Update: PageBase class中增加Tab栏标记状态设置
This commit is contained in:
@@ -357,10 +357,14 @@ html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close:hover
|
|||||||
background-color: #5f6368 !important;
|
background-color: #5f6368 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme=light] .chrome-tabs .chrome-tab.dirty .chrome-tab-close {
|
.chrome-tabs .chrome-tab.dirty .chrome-tab-close.positive {
|
||||||
background-color: #000;
|
background-color: #ffb800;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close {
|
html[data-bs-theme=light] .chrome-tabs .chrome-tab.dirty .chrome-tab-close.negative {
|
||||||
background-color: #fff;
|
background-color: var(--app-light-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-bs-theme=dark] .chrome-tabs .chrome-tab.dirty .chrome-tab-close.negative {
|
||||||
|
background-color: var(--app-dark-color);
|
||||||
}
|
}
|
||||||
@@ -85,6 +85,10 @@ class FSBoard {
|
|||||||
getHandler() {
|
getHandler() {
|
||||||
return this.#handler_;
|
return this.#handler_;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dispose() {
|
||||||
|
this.#handler_ = null;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Mixly.FSBoard = FSBoard;
|
Mixly.FSBoard = FSBoard;
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ const {
|
|||||||
class PageBase extends Component {
|
class PageBase extends Component {
|
||||||
#pages_ = new Registry();
|
#pages_ = new Registry();
|
||||||
#$tab_ = null;
|
#$tab_ = null;
|
||||||
|
#$close_ = null;
|
||||||
#dirty_ = false;
|
#dirty_ = false;
|
||||||
#active_ = true;
|
#active_ = true;
|
||||||
#inited_ = false;
|
#inited_ = false;
|
||||||
@@ -64,7 +65,9 @@ class PageBase extends Component {
|
|||||||
dispose() {
|
dispose() {
|
||||||
this.#forward_('dispose');
|
this.#forward_('dispose');
|
||||||
this.#pages_.reset();
|
this.#pages_.reset();
|
||||||
|
this.#$close_ = null;
|
||||||
this.#$tab_ && this.#$tab_.remove();
|
this.#$tab_ && this.#$tab_.remove();
|
||||||
|
this.#$tab_ = null;
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -97,22 +100,25 @@ class PageBase extends Component {
|
|||||||
|
|
||||||
setTab($tab) {
|
setTab($tab) {
|
||||||
this.#$tab_ = $tab;
|
this.#$tab_ = $tab;
|
||||||
|
this.#$close_ = $tab.find('.chrome-tab-close');
|
||||||
}
|
}
|
||||||
|
|
||||||
hideCloseBtn() {
|
hideCloseBtn() {
|
||||||
const $closeBtn = this.getTab().find('.chrome-tab-close');
|
this.#$close_.css('display', 'none');
|
||||||
$closeBtn.css('display', 'none');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
showCloseBtn() {
|
showCloseBtn() {
|
||||||
const $closeBtn = this.getTab().find('.chrome-tab-close');
|
this.#$close_.css('display', 'block');
|
||||||
$closeBtn.css('display', 'block');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getTab() {
|
getTab() {
|
||||||
return this.#$tab_;
|
return this.#$tab_;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setMarkStatus(styleClass) {
|
||||||
|
this.#$close_.attr('class', `chrome-tab-close layui-badge-dot ${styleClass}`);
|
||||||
|
}
|
||||||
|
|
||||||
addDirty() {
|
addDirty() {
|
||||||
this.#forward_('addDirty');
|
this.#forward_('addDirty');
|
||||||
const $tab = this.getTab();
|
const $tab = this.getTab();
|
||||||
|
|||||||
@@ -46,7 +46,6 @@ class StatusBarAmpy extends PageBase {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
#$close_ = null;
|
|
||||||
#$fileTree_ = null;
|
#$fileTree_ = null;
|
||||||
#$editor_ = null;
|
#$editor_ = null;
|
||||||
#$openFS_ = null;
|
#$openFS_ = null;
|
||||||
@@ -370,9 +369,7 @@ class StatusBarAmpy extends PageBase {
|
|||||||
init() {
|
init() {
|
||||||
super.init();
|
super.init();
|
||||||
this.addDirty();
|
this.addDirty();
|
||||||
const $tab = this.getTab();
|
this.setMarkStatus('negative');
|
||||||
this.#$close_ = $tab.find('.chrome-tab-close');
|
|
||||||
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
|
|
||||||
this.#editor_.init();
|
this.#editor_.init();
|
||||||
this.#addEventsListener_();
|
this.#addEventsListener_();
|
||||||
const editor = this.#editor_.getEditor();
|
const editor = this.#editor_.getEditor();
|
||||||
@@ -434,22 +431,28 @@ class StatusBarAmpy extends PageBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setStatus(isChanged) {
|
setStatus(isChanged) {
|
||||||
if (this.#changed_ === isChanged || !this.#$close_) {
|
if (this.#changed_ === isChanged) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.#changed_ = isChanged;
|
this.#changed_ = isChanged;
|
||||||
if (isChanged) {
|
if (isChanged) {
|
||||||
this.#$close_.removeClass('layui-bg-blue');
|
this.setMarkStatus('positive');
|
||||||
this.#$close_.addClass('layui-bg-orange');
|
|
||||||
} else {
|
} else {
|
||||||
this.#$close_.removeClass('layui-bg-orange');
|
this.setMarkStatus('negative');
|
||||||
this.#$close_.addClass('layui-bg-blue');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
|
this.#$fileTree_ = null;
|
||||||
|
this.#$editor_ = null;
|
||||||
|
this.#$openFS_ = null;
|
||||||
|
this.#$editorEmpty_ = null;
|
||||||
this.#editor_.dispose();
|
this.#editor_.dispose();
|
||||||
|
this.#editor_ = null;
|
||||||
this.#fileTree_.dispose();
|
this.#fileTree_.dispose();
|
||||||
|
this.#fileTree_ = null;
|
||||||
|
this.#drag_.dispose();
|
||||||
|
this.#drag_ = null;
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -179,6 +179,13 @@ class Panel extends Component {
|
|||||||
|
|
||||||
dispose() {
|
dispose() {
|
||||||
this.#$fsSelect_.select2('destroy');
|
this.#$fsSelect_.select2('destroy');
|
||||||
|
this.#$folderInput_ = null;
|
||||||
|
this.#$closeBtn_ = null;
|
||||||
|
this.#$selectFolderBtn_ = null;
|
||||||
|
this.#$downloadBtn_ = null;
|
||||||
|
this.#$uploadBtn_ = null;
|
||||||
|
this.#$fsSelect_ = null;
|
||||||
|
this.#$progress_ = null;
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -193,9 +200,8 @@ class StatusBarFS extends PageBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#$btn_ = null;
|
#$btn_ = null;
|
||||||
#fsBoard_ = null;
|
|
||||||
#$close_ = null;
|
|
||||||
#$mask_ = null;
|
#$mask_ = null;
|
||||||
|
#fsBoard_ = null;
|
||||||
#registry_ = new Registry();
|
#registry_ = new Registry();
|
||||||
#opened_ = false;
|
#opened_ = false;
|
||||||
|
|
||||||
@@ -221,24 +227,20 @@ class StatusBarFS extends PageBase {
|
|||||||
|
|
||||||
init() {
|
init() {
|
||||||
this.addDirty();
|
this.addDirty();
|
||||||
const $tab = this.getTab();
|
this.setMarkStatus('negative');
|
||||||
this.#$close_ = $tab.find('.chrome-tab-close');
|
|
||||||
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
setStatus(isOpened) {
|
setStatus(isOpened) {
|
||||||
if (this.#opened_ === isOpened || !this.#$close_) {
|
if (this.#opened_ === isOpened) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.#opened_ = isOpened;
|
this.#opened_ = isOpened;
|
||||||
if (isOpened) {
|
if (isOpened) {
|
||||||
this.#$mask_.css('display', 'block');
|
this.#$mask_.css('display', 'block');
|
||||||
this.#$close_.removeClass('layui-bg-blue');
|
this.setMarkStatus('positive');
|
||||||
this.#$close_.addClass('layui-bg-orange');
|
|
||||||
} else {
|
} else {
|
||||||
this.#$mask_.css('display', 'none');
|
this.#$mask_.css('display', 'none');
|
||||||
this.#$close_.removeClass('layui-bg-orange');
|
this.setMarkStatus('negative');
|
||||||
this.#$close_.addClass('layui-bg-blue');
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -310,7 +312,12 @@ class StatusBarFS extends PageBase {
|
|||||||
for (let id of this.#registry_.keys()) {
|
for (let id of this.#registry_.keys()) {
|
||||||
this.#registry_.getItem(id).dispose();
|
this.#registry_.getItem(id).dispose();
|
||||||
}
|
}
|
||||||
|
this.#$btn_ = null;
|
||||||
|
this.#$mask_ = null;
|
||||||
|
this.#fsBoard_.dispose();
|
||||||
|
this.#fsBoard_ = null;
|
||||||
this.#registry_.reset();
|
this.#registry_.reset();
|
||||||
|
this.#registry_ = null;
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -39,7 +39,6 @@ class StatusBarLibs extends PageBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#manager_ = null;
|
#manager_ = null;
|
||||||
#$close_ = null;
|
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
@@ -56,8 +55,7 @@ class StatusBarLibs extends PageBase {
|
|||||||
init() {
|
init() {
|
||||||
this.addDirty();
|
this.addDirty();
|
||||||
const $tab = this.getTab();
|
const $tab = this.getTab();
|
||||||
this.#$close_ = $tab.find('.chrome-tab-close');
|
this.setMarkStatus('negative');
|
||||||
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
getManager() {
|
getManager() {
|
||||||
@@ -78,6 +76,12 @@ class StatusBarLibs extends PageBase {
|
|||||||
this.#manager_.onUnmounted();
|
this.#manager_.onUnmounted();
|
||||||
super.onUnmounted();
|
super.onUnmounted();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
dispose() {
|
||||||
|
this.#manager_.dispose();
|
||||||
|
this.#manager_ = null;
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Mixly.StatusBarLibs = StatusBarLibs;
|
Mixly.StatusBarLibs = StatusBarLibs;
|
||||||
|
|||||||
@@ -62,9 +62,6 @@ class StatusBarSerial extends PageBase {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#$close_ = null;
|
|
||||||
#opened_ = false;
|
|
||||||
#valueTemp_ = '';
|
|
||||||
#$sendInput_ = null;
|
#$sendInput_ = null;
|
||||||
#$settingMenu_ = null;
|
#$settingMenu_ = null;
|
||||||
#$scroll_ = null;
|
#$scroll_ = null;
|
||||||
@@ -72,6 +69,8 @@ class StatusBarSerial extends PageBase {
|
|||||||
#$dtr_ = null;
|
#$dtr_ = null;
|
||||||
#$rts_ = null;
|
#$rts_ = null;
|
||||||
#$hex_ = null;
|
#$hex_ = null;
|
||||||
|
#opened_ = false;
|
||||||
|
#valueTemp_ = '';
|
||||||
#manager_ = null;
|
#manager_ = null;
|
||||||
#output_ = null;
|
#output_ = null;
|
||||||
#chart_ = null;
|
#chart_ = null;
|
||||||
@@ -84,7 +83,6 @@ class StatusBarSerial extends PageBase {
|
|||||||
sendWith: '\r\n',
|
sendWith: '\r\n',
|
||||||
hex: false
|
hex: false
|
||||||
};
|
};
|
||||||
#dropdownMenu_ = null;
|
|
||||||
#addTimestamp_ = false;
|
#addTimestamp_ = false;
|
||||||
#maxLine_ = 200;
|
#maxLine_ = 200;
|
||||||
#lastUpdate_ = 0;
|
#lastUpdate_ = 0;
|
||||||
@@ -426,9 +424,8 @@ class StatusBarSerial extends PageBase {
|
|||||||
init() {
|
init() {
|
||||||
super.init();
|
super.init();
|
||||||
this.addDirty();
|
this.addDirty();
|
||||||
|
this.setMarkStatus('negative');
|
||||||
const $tab = this.getTab();
|
const $tab = this.getTab();
|
||||||
this.#$close_ = $tab.find('.chrome-tab-close');
|
|
||||||
this.#$close_.addClass('layui-badge-dot layui-bg-blue');
|
|
||||||
this.#port_ = $tab.attr('data-tab-id');
|
this.#port_ = $tab.attr('data-tab-id');
|
||||||
this.#serial_ = new Serial(this.getPortName());
|
this.#serial_ = new Serial(this.getPortName());
|
||||||
this.#serial_.config(this.#config_).catch(Debug.error);
|
this.#serial_.config(this.#config_).catch(Debug.error);
|
||||||
@@ -495,16 +492,14 @@ class StatusBarSerial extends PageBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
setStatus(isOpened) {
|
setStatus(isOpened) {
|
||||||
if (this.isOpened() === isOpened || !this.#$close_) {
|
if (this.isOpened() === isOpened) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.#opened_ = isOpened;
|
this.#opened_ = isOpened;
|
||||||
if (isOpened) {
|
if (isOpened) {
|
||||||
this.#$close_.removeClass('layui-bg-blue');
|
this.setMarkStatus('positive');
|
||||||
this.#$close_.addClass('layui-bg-orange');
|
|
||||||
} else {
|
} else {
|
||||||
this.#$close_.removeClass('layui-bg-orange');
|
this.setMarkStatus('negative');
|
||||||
this.#$close_.addClass('layui-bg-blue');
|
|
||||||
}
|
}
|
||||||
this.#output_.setStatus(isOpened);
|
this.#output_.setStatus(isOpened);
|
||||||
this.#chart_.setStatus(isOpened);
|
this.#chart_.setStatus(isOpened);
|
||||||
@@ -558,9 +553,17 @@ class StatusBarSerial extends PageBase {
|
|||||||
this.#serial_.close()
|
this.#serial_.close()
|
||||||
.catch(Debug.error)
|
.catch(Debug.error)
|
||||||
.finally(() => {
|
.finally(() => {
|
||||||
|
this.#$sendInput_ = null;
|
||||||
|
this.#$settingMenu_ = null;
|
||||||
|
this.#$scroll_ = null;
|
||||||
|
this.#$timestamp_ = null;
|
||||||
|
this.#$dtr_ = null;
|
||||||
|
this.#$rts_ = null;
|
||||||
|
this.#$hex_ = null;
|
||||||
|
this.#output_ = null;
|
||||||
|
this.#chart_ = null;
|
||||||
this.#manager_.dispose();
|
this.#manager_.dispose();
|
||||||
this.#manager_ = null;
|
this.#manager_ = null;
|
||||||
this.#$close_ = null;
|
|
||||||
this.#serial_.dispose();
|
this.#serial_.dispose();
|
||||||
this.#serial_ = null;
|
this.#serial_ = null;
|
||||||
super.dispose();
|
super.dispose();
|
||||||
|
|||||||
Reference in New Issue
Block a user