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

[SSE mobile] Added unhide in Context Menu

Browse source
This commit is contained in:
SergeyEzhin 2021-03-24 01:46:37 +03:00
parent 4a0af99640
commit 5f1f608b0a
3 changed files with 83 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -7,19 +7,22 @@ import { Dom7 } from 'framework7';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { Device } from '../../../../common/mobile/utils/device'; import { Device } from '../../../../common/mobile/utils/device';
const Statusbar = inject('sheets', 'storeAppOptions')(props => { const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
const {sheets, storeAppOptions} = props; const {sheets, storeAppOptions, users} = props;
const $$ = Dom7;
const {t} = useTranslation(); const {t} = useTranslation();
const _t = t('Statusbar', {returnObjects: true}); const _t = t('Statusbar', {returnObjects: true});
console.log(props); console.log(props);
let isEdit = storeAppOptions.isEdit; let isEdit = storeAppOptions.isEdit;
let isDisconnected = false; let isDisconnected = users.isDisconnected;
useEffect(() => { useEffect(() => {
const on_api_created = api => { const on_api_created = api => {
api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged.bind(api)); api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect);
api.asc_registerCallback('asc_onUpdateTabColor', onApiUpdateTabColor);
api.asc_registerCallback('asc_onWorkbookLocked', onWorkbookLocked);
api.asc_registerCallback('asc_onWorksheetLocked', onWorksheetLocked);
api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged);
}; };
const on_main_view_click = e => { const on_main_view_click = e => {
@ -33,6 +36,7 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
$$('.view-main').on('click', on_main_view_click); $$('.view-main').on('click', on_main_view_click);
return () => { return () => {
Common.Notifications.off('api:disconnect', onApiDisconnect);
Common.Notifications.off('document:ready', onApiSheetsChanged); Common.Notifications.off('document:ready', onApiSheetsChanged);
Common.Notifications.off('engineCreated', on_api_created); Common.Notifications.off('engineCreated', on_api_created);
@ -40,16 +44,15 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
}; };
}, []); }, []);
// const onWorkbookLocked = locked => { const onWorkbookLocked = locked => {
// this.statusbar.$btnAddTab.toggleClass('disabled', locked); $$('.idx-btn-addtab').toggleClass('disabled', locked);
// return; };
// };
// const onWorksheetLocked = (index, locked) => { const onWorksheetLocked = (index, locked) => {
// let model = sheets.findWhere({index: index}); let model = sheets.find(sheet => sheet.index === index);
// if(model && model.get('locked') != locked) if(model && model.locked != locked)
// model.set('locked', locked); model.locked = locked;
// }; };
const onApiSheetsChanged = () => { const onApiSheetsChanged = () => {
console.log('on api sheets changed'); console.log('on api sheets changed');
@ -58,9 +61,9 @@ const Statusbar = inject('sheets', 'storeAppOptions')(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 = []; let i = -1, items = [], hiddentems = [];
while ( ++i < sheets_count ) { while (++i < sheets_count) {
const tab = { const tab = {
index : i, index : i,
active : active_index == i, active : active_index == i,
@ -70,12 +73,14 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
color : api.asc_getWorksheetTabColor(i) color : api.asc_getWorksheetTabColor(i)
}; };
items.push(tab); (api.asc_isWorksheetHidden(i) ? hiddentems : items).push(tab);
// items.push(tab);
} }
sheets.reset(items); sheets.resetSheets(items);
sheets.resetHiddenSheets(hiddentems);
// this.hiddensheets.reset(hiddentems); // this.hiddensheets.reset(hiddentems);
// updateTabsColors(); updateTabsColors();
}; };
const loadTabColor = sheetindex => { const loadTabColor = sheetindex => {
@ -89,34 +94,34 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
}; };
const onApiDisconnect = () => { const onApiDisconnect = () => {
isDisconnected = true; users.isDisconnected = true;
}; };
const onApiUpdateTabColor = index => { const onApiUpdateTabColor = index => {
loadTabColor(index); loadTabColor(index);
}; };
// const setTabLineColor = (tab, color) => { const setTabLineColor = (tab, color) => {
// if (tab) { if (tab) {
// if (null !== color) { if (null !== color) {
// color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); color = '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
// } else { } else {
// color = ''; 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';
// } }
// $$('.tab')[tab.index].find('a').css('box-shadow', color); $('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', color);
// } else { } else {
// $$('.tab')[tab.index].find('a').css('box-shadow', ''); $('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', '');
// } }
// } }
// }; };
const updateTabsColors = () => { const updateTabsColors = () => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -154,7 +159,6 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
const onAddTabClicked = () => { const onAddTabClicked = () => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
api.asc_closeCellEditor(); api.asc_closeCellEditor();
f7.popover.close('#idx-tab-context-menu-popover');
createSheetName(); createSheetName();
api.asc_addWorksheet(createSheetName()); api.asc_addWorksheet(createSheetName());
@ -210,10 +214,10 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
console.log(model); console.log(model);
let opened = $$('.document-menu.modal-in').length; let opened = $$('.document-menu.modal-in').length;
let index = model.index;
f7.popover.close('.document-menu.modal-in'); f7.popover.close('.document-menu.modal-in');
let index = model.index;
if (index == api.asc_getActiveWorksheetIndex()) { if (index == api.asc_getActiveWorksheetIndex()) {
if (!opened) { if (!opened) {
if (!isDisconnected) { if (!isDisconnected) {
@ -327,12 +331,13 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
const hideWorksheet = (hide, index) => { const hideWorksheet = (hide, index) => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const visibleSheets = sheets.visibleWorksheets(); const visibleSheets = sheets.visibleWorksheets();
if(hide) { if(hide) {
visibleSheets.length == 1 ? visibleSheets.length == 1 ?
f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle) : f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle) :
api['asc_hideWorksheet']([index]); api['asc_hideWorksheet']([index]);
} else { } else {
f7.popover.close('#idx-hidden-sheets-popover');
api['asc_showWorksheet'](index); api['asc_showWorksheet'](index);
// loadTabColor(index); // loadTabColor(index);
} }
@ -341,6 +346,7 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
const onTabMenu = (event) => { const onTabMenu = (event) => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
let index = sheets.sheets.find(sheet => sheet.active).index; let index = sheets.sheets.find(sheet => sheet.active).index;
f7.popover.close('#idx-tab-context-menu-popover'); f7.popover.close('#idx-tab-context-menu-popover');
switch (event) { switch (event) {
@ -355,25 +361,25 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
case 'unhide': case 'unhide':
f7.popover.open('#idx-hidden-sheets-popover', '.active'); f7.popover.open('#idx-hidden-sheets-popover', '.active');
break; break;
case 'showMore': // case 'showMore':
if (me._moreAction.length > 0) { // if (me._moreAction.length > 0) {
_.delay(function () { // _.delay(function () {
_.each(me._moreAction, function (action) { // _.each(me._moreAction, function (action) {
action.text = action.caption; // action.text = action.caption;
action.onClick = function () { // action.onClick = function () {
me.onTabMenu(null, action.event, model) // me.onTabMenu(null, action.event, model)
} // }
}); // });
uiApp.actions([me._moreAction, [ // uiApp.actions([me._moreAction, [
{ // {
text: me.cancelButtonText, // text: me.cancelButtonText,
bold: true // bold: true
} // }
]]); // ]]);
}, 100); // }, 100);
} // }
break; // break;
default: default:
let _re = /reveal\:(\d+)/.exec(event); let _re = /reveal\:(\d+)/.exec(event);
if (_re && !!_re[1]) { if (_re && !!_re[1]) {

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

@ -21,20 +21,28 @@ class Worksheet {
export class storeWorksheets { export class storeWorksheets {
sheets; sheets;
hiddensheets;
constructor() { constructor() {
makeObservable(this, { makeObservable(this, {
sheets: observable, sheets: observable,
reset: action, hiddensheets: observable,
resetSheets: action,
resetHiddenSheets: action,
setActiveWorksheet: action setActiveWorksheet: action
}); });
this.sheets = []; this.sheets = [];
this.hiddensheets = [];
} }
reset(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 => {

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

@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
import { View, Toolbar, Link, Icon, Popover, List, ListButton } from 'framework7-react'; import { View, Toolbar, Link, Icon, Popover, List, ListButton } from 'framework7-react';
import { observer, inject } from "mobx-react"; import { observer, inject } from "mobx-react";
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { f7 } from 'framework7-react';
const viewStyle = { const viewStyle = {
height: 30 height: 30
@ -11,7 +12,7 @@ const StatusbarView = inject('sheets')(observer(props => {
const { t } = useTranslation(); const { t } = useTranslation();
const _t = t('Statusbar', {returnObjects: true}); const _t = t('Statusbar', {returnObjects: true});
const { sheets } = props; const { sheets } = props;
const hiddenSheets = sheets.hiddenWorksheets(); const hiddenSheets = sheets.hiddensheets;
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`; const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
return ( return (
@ -27,7 +28,7 @@ const StatusbarView = inject('sheets')(observer(props => {
{sheets.sheets.map((model,i) => {sheets.sheets.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 /* onClick={e => props.onTabClicked(i)} */>{model.name}</a>
</li> </li>
)} )}
</ul> </ul>
@ -45,7 +46,7 @@ const StatusbarView = inject('sheets')(observer(props => {
<ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} /> <ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
<ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} /> <ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
{hiddenSheets.length ? ( {hiddenSheets.length ? (
<ListButton title={_t.textUnhide} onClick={(e) => props.onTabMenu('unhide')} /> <ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
): null} ): null}
</List> </List>
</Popover> </Popover>
@ -59,7 +60,8 @@ const StatusbarView = inject('sheets')(observer(props => {
<List className="list-block"> <List className="list-block">
{hiddenSheets.map(sheet => { {hiddenSheets.map(sheet => {
return ( return (
<ListButton key={sheet.index} data-event={`reveal:${sheet.index}`} title={sheet.name} onClick={() => props.onTabMenu(`reveal:${sheet.index}`)} /> <ListButton key={sheet.index} data-event={`reveal:${sheet.index}`} title={sheet.name}
onClick={() => props.onTabMenu(`reveal:${sheet.index}`)} />
) )
})} })}
</List> </List>