Merge branch 'feature/mobile-apps-on-reactjs-statusbar' into feature/mobile-apps-on-reactjs
This commit is contained in:
commit
45bbe12dda
|
@ -10,7 +10,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
const {sheets, storeAppOptions, users} = props;
|
||||
const {t} = useTranslation();
|
||||
const _t = t('Statusbar', {returnObjects: true});
|
||||
// console.log(props);
|
||||
|
||||
let isEdit = storeAppOptions.isEdit;
|
||||
let isDisconnected = users.isDisconnected;
|
||||
|
@ -18,7 +17,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
useEffect(() => {
|
||||
const onDocumentReady = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
|
||||
// api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
|
||||
api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
|
||||
api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
|
||||
api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
|
||||
|
@ -44,7 +43,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
Common.Notifications.off('document:ready', onApiSheetsChanged);
|
||||
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_unregisterCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
|
||||
// api.asc_unregisterCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
|
||||
api.asc_unregisterCallback('asc_onWorkbookLocked', onWorkbookLocked);
|
||||
api.asc_unregisterCallback('asc_onWorksheetLocked', onWorksheetLocked);
|
||||
api.asc_unregisterCallback('asc_onSheetsChanged', onApiSheetsChanged);
|
||||
|
@ -63,7 +62,8 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
};
|
||||
|
||||
const onWorksheetLocked = (index, locked) => {
|
||||
let model = sheets.sheets.find(sheet => sheet.index === index);
|
||||
// let model = sheets.sheets.find(sheet => sheet.index === index);
|
||||
let model = sheets.at(index);
|
||||
if(model && model.locked != locked)
|
||||
model.locked = locked;
|
||||
};
|
||||
|
@ -75,7 +75,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
const sheets_count = api.asc_getWorksheetsCount();
|
||||
const active_index = api.asc_getActiveWorksheetIndex();
|
||||
|
||||
let i = -1, items = [], hiddentems = [];
|
||||
let i = -1, items = [];
|
||||
|
||||
while (++i < sheets_count) {
|
||||
const tab = {
|
||||
|
@ -87,59 +87,57 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
color : api.asc_getWorksheetTabColor(i)
|
||||
};
|
||||
|
||||
(api.asc_isWorksheetHidden(i) ? hiddentems : items).push(tab);
|
||||
// items.push(tab);
|
||||
items.push(tab);
|
||||
}
|
||||
|
||||
sheets.resetSheets(items);
|
||||
sheets.resetHiddenSheets(hiddentems);
|
||||
|
||||
updateTabsColors();
|
||||
// updateTabsColors();
|
||||
};
|
||||
|
||||
const loadTabColor = sheetindex => {
|
||||
const api = Common.EditorApi.get();
|
||||
let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
|
||||
// const loadTabColor = sheetindex => {
|
||||
// const api = Common.EditorApi.get();
|
||||
// let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
|
||||
|
||||
if (tab) {
|
||||
setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
|
||||
}
|
||||
// if (tab) {
|
||||
// setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
|
||||
// }
|
||||
|
||||
};
|
||||
// };
|
||||
|
||||
const onApiUpdateTabColor = index => {
|
||||
loadTabColor(index);
|
||||
};
|
||||
// const onApiUpdateTabColor = index => {
|
||||
// loadTabColor(index);
|
||||
// };
|
||||
|
||||
const setTabLineColor = (tab, color) => {
|
||||
if (tab) {
|
||||
if (null !== color) {
|
||||
color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
||||
} else {
|
||||
color = '';
|
||||
}
|
||||
// const setTabLineColor = (tab, color) => {
|
||||
// console.log(color);
|
||||
// if (tab) {
|
||||
// if (null !== color) {
|
||||
// color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
||||
// } else {
|
||||
// color = '';
|
||||
// }
|
||||
|
||||
if (color.length) {
|
||||
if (!tab.active) {
|
||||
color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
|
||||
} else {
|
||||
color = '0px 4px 0 ' + color + ' inset';
|
||||
}
|
||||
// if (color.length) {
|
||||
// if (!tab.active) {
|
||||
// color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
|
||||
// } else {
|
||||
// color = '0px 4px 0 ' + color + ' inset';
|
||||
// }
|
||||
|
||||
$$('.sheet-tabs .tab').eq(tab.index).css('box-shadow', color);
|
||||
} else {
|
||||
$$('.sheet-tabs .tab').eq(tab.index).css('box-shadow', '');
|
||||
}
|
||||
}
|
||||
};
|
||||
// $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color);
|
||||
// } else {
|
||||
// $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', '');
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
|
||||
const updateTabsColors = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
// const updateTabsColors = () => {
|
||||
// const api = Common.EditorApi.get();
|
||||
|
||||
sheets.sheets.forEach(model => {
|
||||
setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
|
||||
});
|
||||
};
|
||||
// sheets.sheets.forEach(model => {
|
||||
// setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
|
||||
// });
|
||||
// };
|
||||
|
||||
const onTabClicked = i => {
|
||||
const model = sheets.at(i);
|
||||
|
@ -196,7 +194,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
} else {
|
||||
f7.popover.close('#idx-tab-context-menu-popover', false);
|
||||
onTabClicked(i);
|
||||
Common.Notifications.trigger('sheet:active', index);
|
||||
// Common.Notifications.trigger('sheet:active', index);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -306,7 +304,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
|||
} else {
|
||||
f7.popover.close('#idx-hidden-sheets-popover');
|
||||
api['asc_showWorksheet'](index);
|
||||
loadTabColor(index);
|
||||
// loadTabColor(index);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
min-width: 48px;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
// padding: 0 10px;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
@ -48,6 +48,8 @@
|
|||
padding: 0 10px 0;
|
||||
line-height: @statusbar-height;
|
||||
color: @text-normal;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:not(.active) {
|
||||
|
|
|
@ -21,28 +21,20 @@ class Worksheet {
|
|||
|
||||
export class storeWorksheets {
|
||||
sheets;
|
||||
hiddensheets;
|
||||
|
||||
constructor() {
|
||||
makeObservable(this, {
|
||||
sheets: observable,
|
||||
hiddensheets: observable,
|
||||
resetSheets: action,
|
||||
resetHiddenSheets: action,
|
||||
setActiveWorksheet: action
|
||||
});
|
||||
this.sheets = [];
|
||||
this.hiddensheets = [];
|
||||
}
|
||||
|
||||
resetSheets(sheets) {
|
||||
this.sheets = Object.values(sheets)
|
||||
}
|
||||
|
||||
resetHiddenSheets(hiddensheets) {
|
||||
this.hiddensheets = Object.values(hiddensheets)
|
||||
}
|
||||
|
||||
setActiveWorksheet(i) {
|
||||
if ( !this.sheets[i].active ) {
|
||||
this.sheets.forEach(model => {
|
||||
|
|
|
@ -14,8 +14,30 @@ const StatusbarView = inject('sheets')(observer(props => {
|
|||
const isAndroid = Device.android;
|
||||
const isPhone = Device.isPhone;
|
||||
const { sheets } = props;
|
||||
const hiddenSheets = sheets.hiddensheets;
|
||||
const hiddenSheets = sheets.hiddenWorksheets();
|
||||
const allSheets = sheets.sheets;
|
||||
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
|
||||
|
||||
const getTabColor = model => {
|
||||
let color = model.color;
|
||||
|
||||
if (color) {
|
||||
color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
|
||||
} else {
|
||||
color = '';
|
||||
}
|
||||
|
||||
if (color.length) {
|
||||
if (!model.active) {
|
||||
color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
|
||||
} else {
|
||||
color = '0px 4px 0 ' + color + ' inset';
|
||||
}
|
||||
}
|
||||
|
||||
return color;
|
||||
}
|
||||
|
||||
// const $boxTabs = $$('.sheet-tabs');
|
||||
// const $statusBar = $$('.statusbar');
|
||||
|
||||
|
@ -102,11 +124,12 @@ const StatusbarView = inject('sheets')(observer(props => {
|
|||
</div>
|
||||
<div className="statusbar--box-tabs">
|
||||
<ul className="sheet-tabs bottom">
|
||||
{sheets.sheets.map((model,i) =>
|
||||
model.hidden ? null :
|
||||
{allSheets.map((model,i) =>
|
||||
model.hidden ? null :
|
||||
<li className={getTabClassList(model)} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
|
||||
<a /* onClick={e => props.onTabClicked(i)} */>{model.name}</a>
|
||||
<a style={{boxShadow: getTabColor(model)}}>{model.name}</a>
|
||||
</li>
|
||||
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue