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

[SSE mobile] Add unhide

Browse source
This commit is contained in:
SergeyEzhin 2021-03-23 16:43:10 +03:00
parent 5af6d41c80
commit 5b08a8b796
4 changed files with 104 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -312,14 +312,14 @@
}, },
"Statusbar": { "Statusbar": {
"textDuplicate": "Duplicate", "textDuplicate": "Duplicate",
"textDelete": "textDelete", "textDelete": "Delete",
"textHide": "Hide", "textHide": "Hide",
"textUnhide": "Unhide", "textUnhide": "Unhide",
"textErrorLastSheet": "Workbook must have at least one visible worksheet.", "textErrorLastSheet": "Workbook must have at least one visible worksheet.",
"textErrorRemoveSheet": "Can\"t delete the worksheet.", "textErrorRemoveSheet": "Can\"t delete the worksheet.",
"textWarnDeleteSheet": "The worksheet maybe has data. Proceed operation?", "textWarnDeleteSheet": "The worksheet maybe has data. Proceed operation?",
"textSheet": "Sheet", "textSheet": "Sheet",
"textRename": "textRename", "textRename": "Rename",
"textErrNameExists": "Worksheet with such name already exist.", "textErrNameExists": "Worksheet with such name already exist.",
"textErrNameWrongChar": "A sheet name cannot contains characters: \\, \/, *, ?, [, ], :", "textErrNameWrongChar": "A sheet name cannot contains characters: \\, \/, *, ?, [, ], :",
"textErrNotEmpty": "Sheet name must not be empty", "textErrNotEmpty": "Sheet name must not be empty",

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

@ -1,6 +1,6 @@
import React, { Fragment, useEffect, useState } from 'react'; import React, { Fragment, useEffect, useState } from 'react';
import {StatusbarView, TabContextMenu} from '../view/Statusbar'; import {StatusbarView} from '../view/Statusbar';
import { inject } from 'mobx-react'; import { inject } from 'mobx-react';
import { f7 } from 'framework7-react'; import { f7 } from 'framework7-react';
import { Dom7 } from 'framework7'; import { Dom7 } from 'framework7';
@ -87,36 +87,36 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
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.get('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.get('el').find('a').css('box-shadow', color); // $$('.tab')[tab.index].find('a').css('box-shadow', color);
} else { // } else {
tab.get('el').find('a').css('box-shadow', ''); // $$('.tab')[tab.index].find('a').css('box-shadow', '');
} // }
} // }
};
// const updateTabsColors = () => {
// const api = Common.EditorApi.get();
// sheets.sheets.forEach(model => {
// setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
// });
// }; // };
const updateTabsColors = () => {
const api = Common.EditorApi.get();
sheets.sheets.forEach(model => {
setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
});
};
const onTabClicked = i => { const onTabClicked = i => {
const model = sheets.at(i); const model = sheets.at(i);
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
@ -223,9 +223,9 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
const deleteWorksheet = () => { const deleteWorksheet = () => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const countVisibleSheets = sheets.sheets.filter(sheet => !sheet.hidden); const visibleSheets = sheets.visibleWorksheets();
if (sheets.sheets.length == 1 || countVisibleSheets.length == 1) { if (sheets.sheets.length == 1 || visibleSheets.length == 1) {
f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle); f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle);
} else { } else {
f7.dialog.confirm( f7.dialog.confirm(
@ -317,15 +317,15 @@ 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 countVisibleSheets = sheets.sheets.filter(sheet => !sheet.hidden); const visibleSheets = sheets.visibleWorksheets();
if(hide) { if(hide) {
countVisibleSheets.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 {
api['asc_showWorksheet'](index); api['asc_showWorksheet'](index);
loadTabColor(index); // loadTabColor(index);
} }
}; };
@ -343,50 +343,38 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
api.asc_copyWorksheet(index, name); api.asc_copyWorksheet(index, name);
break; break;
case 'ren': renameWorksheet(); break; case 'ren': renameWorksheet(); break;
// case 'unhide': case 'unhide':
// var items = []; f7.popover.open('#idx-hidden-sheets-popover', '.active');
// _.each(this.hiddensheets.models, function (item) { break;
// items.push({ case 'showMore':
// caption: item.get('name'), if (me._moreAction.length > 0) {
// event: 'reveal:' + item.get('index') _.delay(function () {
// }) _.each(me._moreAction, function (action) {
// }); action.text = action.caption;
// _.defer(function () { action.onClick = function () {
// me.statusbar.showTabContextMenu(items, model); me.onTabMenu(null, action.event, model)
// }); }
// break; });
// case 'showMore':
// if (me._moreAction.length > 0) {
// _.delay(function () {
// _.each(me._moreAction, function (action) {
// action.text = action.caption;
// action.onClick = function () {
// 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:
// var _re = /reveal\:(\d+)/.exec(event); let _re = /reveal\:(\d+)/.exec(event);
// if ( _re && !!_re[1] ) { if (_re && !!_re[1]) {
// me.hideWorksheet(false, parseInt(_re[1])); hideWorksheet(false, parseInt(_re[1]));
// } }
} }
}; };
return ( return (
<Fragment> <StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} onTabMenu={onTabMenu} />
<StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} />
<TabContextMenu onTabMenu={onTabMenu} />
</Fragment>
) )
}); });

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

@ -57,4 +57,8 @@ export class storeWorksheets {
hiddenWorksheets() { hiddenWorksheets() {
return this.sheets.filter(model => model.hidden); return this.sheets.filter(model => model.hidden);
} }
visibleWorksheets() {
return this.sheets.filter(model => !model.hidden);
}
} }

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

@ -1,17 +1,22 @@
import React from 'react'; 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';
const viewStyle = { const viewStyle = {
height: 30 height: 30
}; };
const StatusbarView = inject('sheets')(observer(props => { const StatusbarView = inject('sheets')(observer(props => {
const { t } = useTranslation();
const _t = t('Statusbar', {returnObjects: true});
const { sheets } = props; const { sheets } = props;
const hiddenSheets = sheets.hiddenWorksheets();
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`; const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
return <View id="idx-statusbar" className="statusbar" style={viewStyle}> return (
<Fragment>
<View id="idx-statusbar" className="statusbar" style={viewStyle}>
<div id="idx-box-add-tab"> <div id="idx-box-add-tab">
<Link href="false" id="idx-btn-addtab" className="tab" onClick={e => props.onAddTabClicked()}> <Link href="false" id="idx-btn-addtab" className="tab" onClick={e => props.onAddTabClicked()}>
<Icon className="icon icon-plus" /> <Icon className="icon icon-plus" />
@ -27,11 +32,7 @@ const StatusbarView = inject('sheets')(observer(props => {
)} )}
</ul> </ul>
</div> </div>
</View>; </View>
}));
const TabContextMenu = props => {
return (
<Popover id="idx-tab-context-menu-popover" <Popover id="idx-tab-context-menu-popover"
className="document-menu" className="document-menu"
backdrop={false} backdrop={false}
@ -39,13 +40,33 @@ const TabContextMenu = props => {
closeByOutsideClick={false} closeByOutsideClick={false}
> >
<List className="list-block"> <List className="list-block">
<ListButton title="Duplicate" onClick={() => props.onTabMenu('copy')} /> <ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
<ListButton title="Delete" onClick={() => props.onTabMenu('del')} /> <ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
<ListButton title="Rename" onClick={() => props.onTabMenu('ren')} /> <ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
<ListButton title="Hide" onClick={() => props.onTabMenu('hide')} /> <ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
{hiddenSheets.length ? (
<ListButton title={_t.textUnhide} onClick={(e) => props.onTabMenu('unhide')} />
): null}
</List> </List>
</Popover> </Popover>
{hiddenSheets.length ? (
<Popover id="idx-hidden-sheets-popover"
className="document-menu"
backdrop={false}
closeByBackdropClick={false}
closeByOutsideClick={false}
>
<List className="list-block">
{hiddenSheets.map(sheet => {
return (
<ListButton key={sheet.index} data-event={`reveal:${sheet.index}`} title={sheet.name} onClick={() => props.onTabMenu(`reveal:${sheet.index}`)} />
) )
}; })}
</List>
</Popover>
) : null}
</Fragment>
)
}));
export {StatusbarView, TabContextMenu}; export {StatusbarView};