[SSE mobile] Add unhide
This commit is contained in:
SergeyEzhin
parent
5af6d41c80
commit
5b08a8b796
|
|
@ -312,14 +312,14 @@
|
|||
},
|
||||
"Statusbar": {
|
||||
"textDuplicate": "Duplicate",
|
||||
"textDelete": "textDelete",
|
||||
"textDelete": "Delete",
|
||||
"textHide": "Hide",
|
||||
"textUnhide": "Unhide",
|
||||
"textErrorLastSheet": "Workbook must have at least one visible worksheet.",
|
||||
"textErrorRemoveSheet": "Can\"t delete the worksheet.",
|
||||
"textWarnDeleteSheet": "The worksheet maybe has data. Proceed operation?",
|
||||
"textSheet": "Sheet",
|
||||
"textRename": "textRename",
|
||||
"textRename": "Rename",
|
||||
"textErrNameExists": "Worksheet with such name already exist.",
|
||||
"textErrNameWrongChar": "A sheet name cannot contains characters: \\, \/, *, ?, [, ], :",
|
||||
"textErrNotEmpty": "Sheet name must not be empty",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
import React, { Fragment, useEffect, useState } from 'react';
|
||||
import {StatusbarView, TabContextMenu} from '../view/Statusbar';
|
||||
import {StatusbarView} from '../view/Statusbar';
|
||||
import { inject } from 'mobx-react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { Dom7 } from 'framework7';
|
||||
|
|
@ -87,36 +87,36 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
|
|||
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) => {
|
||||
// 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.get('active')) {
|
||||
color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset';
|
||||
} else {
|
||||
color = '0px 4px 0 ' + color + ' inset';
|
||||
}
|
||||
|
||||
tab.get('el').find('a').css('box-shadow', color);
|
||||
} else {
|
||||
tab.get('el').find('a').css('box-shadow', '');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// const updateTabsColors = () => {
|
||||
// const api = Common.EditorApi.get();
|
||||
|
||||
// sheets.sheets.forEach(model => {
|
||||
// setTabLineColor(model, api.asc_getWorksheetTabColor(model.index));
|
||||
// });
|
||||
// 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';
|
||||
// }
|
||||
|
||||
// $$('.tab')[tab.index].find('a').css('box-shadow', color);
|
||||
// } else {
|
||||
// $$('.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 onTabClicked = i => {
|
||||
const model = sheets.at(i);
|
||||
const api = Common.EditorApi.get();
|
||||
|
|
@ -223,9 +223,9 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
|
|||
|
||||
const deleteWorksheet = () => {
|
||||
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);
|
||||
} else {
|
||||
f7.dialog.confirm(
|
||||
|
|
@ -317,15 +317,15 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
|
|||
|
||||
const hideWorksheet = (hide, index) => {
|
||||
const api = Common.EditorApi.get();
|
||||
const countVisibleSheets = sheets.sheets.filter(sheet => !sheet.hidden);
|
||||
|
||||
const visibleSheets = sheets.visibleWorksheets();
|
||||
|
||||
if(hide) {
|
||||
countVisibleSheets.length == 1 ?
|
||||
visibleSheets.length == 1 ?
|
||||
f7.dialog.alert(_t.textErrorLastSheet, _t.notcriticalErrorTitle) :
|
||||
api['asc_hideWorksheet']([index]);
|
||||
} else {
|
||||
api['asc_showWorksheet'](index);
|
||||
loadTabColor(index);
|
||||
// loadTabColor(index);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -343,50 +343,38 @@ const Statusbar = inject('sheets', 'storeAppOptions')(props => {
|
|||
api.asc_copyWorksheet(index, name);
|
||||
break;
|
||||
case 'ren': renameWorksheet(); break;
|
||||
// case 'unhide':
|
||||
// var items = [];
|
||||
// _.each(this.hiddensheets.models, function (item) {
|
||||
// items.push({
|
||||
// caption: item.get('name'),
|
||||
// event: 'reveal:' + item.get('index')
|
||||
// })
|
||||
// });
|
||||
// _.defer(function () {
|
||||
// me.statusbar.showTabContextMenu(items, 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)
|
||||
// }
|
||||
// });
|
||||
case 'unhide':
|
||||
f7.popover.open('#idx-hidden-sheets-popover', '.active');
|
||||
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, [
|
||||
// {
|
||||
// text: me.cancelButtonText,
|
||||
// bold: true
|
||||
// }
|
||||
// ]]);
|
||||
// }, 100);
|
||||
// }
|
||||
// break;
|
||||
// default:
|
||||
// var _re = /reveal\:(\d+)/.exec(event);
|
||||
// if ( _re && !!_re[1] ) {
|
||||
// me.hideWorksheet(false, parseInt(_re[1]));
|
||||
// }
|
||||
uiApp.actions([me._moreAction, [
|
||||
{
|
||||
text: me.cancelButtonText,
|
||||
bold: true
|
||||
}
|
||||
]]);
|
||||
}, 100);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
let _re = /reveal\:(\d+)/.exec(event);
|
||||
if (_re && !!_re[1]) {
|
||||
hideWorksheet(false, parseInt(_re[1]));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} />
|
||||
<TabContextMenu onTabMenu={onTabMenu} />
|
||||
</Fragment>
|
||||
<StatusbarView onTabClick={onTabClick} onTabClicked={onTabClicked} onAddTabClicked={onAddTabClicked} onTabMenu={onTabMenu} />
|
||||
)
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -57,4 +57,8 @@ export class storeWorksheets {
|
|||
hiddenWorksheets() {
|
||||
return this.sheets.filter(model => model.hidden);
|
||||
}
|
||||
|
||||
visibleWorksheets() {
|
||||
return this.sheets.filter(model => !model.hidden);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 { observer, inject } from "mobx-react";
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const viewStyle = {
|
||||
height: 30
|
||||
};
|
||||
|
||||
const StatusbarView = inject('sheets')(observer(props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Statusbar', {returnObjects: true});
|
||||
const { sheets } = props;
|
||||
|
||||
const hiddenSheets = sheets.hiddenWorksheets();
|
||||
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">
|
||||
<Link href="false" id="idx-btn-addtab" className="tab" onClick={e => props.onAddTabClicked()}>
|
||||
<Icon className="icon icon-plus" />
|
||||
|
|
@ -27,25 +32,41 @@ const StatusbarView = inject('sheets')(observer(props => {
|
|||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</View>;
|
||||
}));
|
||||
|
||||
const TabContextMenu = props => {
|
||||
return (
|
||||
<Popover id="idx-tab-context-menu-popover"
|
||||
</View>
|
||||
<Popover id="idx-tab-context-menu-popover"
|
||||
className="document-menu"
|
||||
backdrop={false}
|
||||
closeByBackdropClick={false}
|
||||
closeByOutsideClick={false}
|
||||
>
|
||||
<List className="list-block">
|
||||
<ListButton title="Duplicate" onClick={() => props.onTabMenu('copy')} />
|
||||
<ListButton title="Delete" onClick={() => props.onTabMenu('del')} />
|
||||
<ListButton title="Rename" onClick={() => props.onTabMenu('ren')} />
|
||||
<ListButton title="Hide" onClick={() => props.onTabMenu('hide')} />
|
||||
<ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
|
||||
<ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
|
||||
<ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
|
||||
<ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
|
||||
{hiddenSheets.length ? (
|
||||
<ListButton title={_t.textUnhide} onClick={(e) => props.onTabMenu('unhide')} />
|
||||
): null}
|
||||
</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};
|
||||
|
|
|
|||
Loading…
Reference in a new issue