Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge branch 'feature/mobile-apps-on-reactjs-statusbar' into feature/mobile-apps-on-reactjs

Browse source
This commit is contained in:
JuliaSvinareva 2021-04-05 20:42:17 +03:00
parent 2b355ce7ec fe684e0edb
commit 45bbe12dda
4 changed files with 75 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx
View file

@ -10,7 +10,6 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
const {sheets, storeAppOptions, users} = props; const {sheets, storeAppOptions, users} = props;
const {t} = useTranslation(); const {t} = useTranslation();
const _t = t('Statusbar', {returnObjects: true}); const _t = t('Statusbar', {returnObjects: true});
// console.log(props);
let isEdit = storeAppOptions.isEdit; let isEdit = storeAppOptions.isEdit;
let isDisconnected = users.isDisconnected; let isDisconnected = users.isDisconnected;
@ -18,7 +17,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
useEffect(() => { useEffect(() => {
const onDocumentReady = () => { const onDocumentReady = () => {
const api = Common.EditorApi.get(); 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_onWorkbookLocked', onWorkbookLocked);
api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked); api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged); api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
@ -44,7 +43,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
Common.Notifications.off('document:ready', onApiSheetsChanged); Common.Notifications.off('document:ready', onApiSheetsChanged);
const api = Common.EditorApi.get(); 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_onWorkbookLocked', onWorkbookLocked);
api.asc_unregisterCallback('asc_onWorksheetLocked', onWorksheetLocked); api.asc_unregisterCallback('asc_onWorksheetLocked', onWorksheetLocked);
api.asc_unregisterCallback('asc_onSheetsChanged', onApiSheetsChanged); api.asc_unregisterCallback('asc_onSheetsChanged', onApiSheetsChanged);
@ -63,7 +62,8 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
}; };
const onWorksheetLocked = (index, locked) => { 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) if(model && model.locked != locked)
model.locked = locked; model.locked = locked;
}; };
@ -75,7 +75,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
const sheets_count = api.asc_getWorksheetsCount(); const sheets_count = api.asc_getWorksheetsCount();
const active_index = api.asc_getActiveWorksheetIndex(); const active_index = api.asc_getActiveWorksheetIndex();
let i = -1, items = [], hiddentems = []; let i = -1, items = [];
while (++i < sheets_count) { while (++i < sheets_count) {
const tab = { const tab = {
@ -87,59 +87,57 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
color : api.asc_getWorksheetTabColor(i) color : api.asc_getWorksheetTabColor(i)
}; };
(api.asc_isWorksheetHidden(i) ? hiddentems : items).push(tab); items.push(tab);
// items.push(tab);
} }
sheets.resetSheets(items); sheets.resetSheets(items);
sheets.resetHiddenSheets(hiddentems); // updateTabsColors();
updateTabsColors();
}; };
const loadTabColor = sheetindex => { // const loadTabColor = sheetindex => {
const api = Common.EditorApi.get(); // const api = Common.EditorApi.get();
let tab = sheets.sheets.find(sheet => sheet.index === sheetindex); // let tab = sheets.sheets.find(sheet => sheet.index === sheetindex);
if (tab) { // if (tab) {
setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex)); // setTabLineColor(tab, api.asc_getWorksheetTabColor(sheetindex));
} // }
}; // };
const onApiUpdateTabColor = index => { // const onApiUpdateTabColor = index => {
loadTabColor(index); // loadTabColor(index);
}; // };
const setTabLineColor = (tab, color) => { // const setTabLineColor = (tab, color) => {
if (tab) { // console.log(color);
if (null !== color) { // if (tab) {
color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); // if (null !== color) {
} else { // color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
color = ''; // } else {
} // color = '';
// }
if (color.length) { // if (color.length) {
if (!tab.active) { // if (!tab.active) {
color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; // color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
} else { // } else {
color = '0px 4px 0 ' + color + ' inset'; // color = '0px 4px 0 ' + color + ' inset';
} // }
$$('.sheet-tabs .tab').eq(tab.index).css('box-shadow', color); // $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color);
} else { // } else {
$$('.sheet-tabs .tab').eq(tab.index).css('box-shadow', ''); // $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', '');
} // }
} // }
}; // };
const updateTabsColors = () => { // const updateTabsColors = () => {
const api = Common.EditorApi.get(); // const api = Common.EditorApi.get();
sheets.sheets.forEach(model => { // sheets.sheets.forEach(model => {
setTabLineColor(model, api.asc_getWorksheetTabColor(model.index)); // setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
}); // });
}; // };
const onTabClicked = i => { const onTabClicked = i => {
const model = sheets.at(i); const model = sheets.at(i);
@ -196,7 +194,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
} else { } else {
f7.popover.close('#idx-tab-context-menu-popover', false); f7.popover.close('#idx-tab-context-menu-popover', false);
onTabClicked(i); 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 { } else {
f7.popover.close('#idx-hidden-sheets-popover'); f7.popover.close('#idx-hidden-sheets-popover');
api['asc_showWorksheet'](index); api['asc_showWorksheet'](index);
loadTabColor(index); // loadTabColor(index);
} }
}; };

4
apps/spreadsheeteditor/mobile/src/less/statusbar.less
View file

@ -16,7 +16,7 @@
min-width: 48px; min-width: 48px;
display: inline-block; display: inline-block;
padding: 0 10px; // padding: 0 10px;
text-align: center; text-align: center;
height: 100%; height: 100%;
position: relative; position: relative;
@ -48,6 +48,8 @@
padding: 0 10px 0; padding: 0 10px 0;
line-height: @statusbar-height; line-height: @statusbar-height;
color: @text-normal; color: @text-normal;
height: 100%;
display: block;
} }
&:not(.active) { &:not(.active) {

8
apps/spreadsheeteditor/mobile/src/store/sheets.js
View file

@ -21,28 +21,20 @@ class Worksheet {
export class storeWorksheets { export class storeWorksheets {
sheets; sheets;
hiddensheets;
constructor() { constructor() {
makeObservable(this, { makeObservable(this, {
sheets: observable, sheets: observable,
hiddensheets: observable,
resetSheets: action, resetSheets: action,
resetHiddenSheets: action,
setActiveWorksheet: action setActiveWorksheet: action
}); });
this.sheets = []; this.sheets = [];
this.hiddensheets = [];
} }
resetSheets(sheets) { resetSheets(sheets) {
this.sheets = Object.values(sheets) this.sheets = Object.values(sheets)
} }
resetHiddenSheets(hiddensheets) {
this.hiddensheets = Object.values(hiddensheets)
}
setActiveWorksheet(i) { setActiveWorksheet(i) {
if ( !this.sheets[i].active ) { if ( !this.sheets[i].active ) {
this.sheets.forEach(model => { this.sheets.forEach(model => {

29
apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx
View file

@ -14,8 +14,30 @@ const StatusbarView = inject('sheets')(observer(props => {
const isAndroid = Device.android; const isAndroid = Device.android;
const isPhone = Device.isPhone; const isPhone = Device.isPhone;
const { sheets } = props; 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 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 $boxTabs = $$('.sheet-tabs');
// const $statusBar = $$('.statusbar'); // const $statusBar = $$('.statusbar');
@ -102,11 +124,12 @@ const StatusbarView = inject('sheets')(observer(props => {
</div> </div>
<div className="statusbar--box-tabs"> <div className="statusbar--box-tabs">
<ul className="sheet-tabs bottom"> <ul className="sheet-tabs bottom">
{sheets.sheets.map((model,i) => {allSheets.map((model,i) =>
model.hidden ? null : model.hidden ? null :
<li className={getTabClassList(model)} key={i} onClick={(e) => props.onTabClick(i, e.target)}> <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> </li>
)} )}
</ul> </ul>
</div> </div>