[SSE mobile] Add styles, corrected unhide and hiding

This commit is contained in:
SergeyEzhin 2021-03-25 23:34:22 +03:00
parent 61b1c71319
commit 705509e340
5 changed files with 66 additions and 70 deletions

View file

@ -490,4 +490,17 @@
} }
} }
} }
.actions-button {
background: rgba(255,255,255,.95);
}
.actions-button-text {
height: 57px;
line-height: 57px;
font-size: 20px;
color: @themeColor;
white-space: normal;
text-overflow: ellipsis;
}
} }

View file

@ -431,4 +431,19 @@
} }
} }
} }
.actions-button-text {
cursor: pointer;
line-height: 48px;
font-size: 16px;
color: rgba(0,0,0,.87);
}
@media (min-width: 496px) {
.actions-modal {
width: 100%;
left: auto;
margin-left: 0;
}
}
} }

View file

@ -23,10 +23,13 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
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);
api.asc_registerCallback('asc_onHidePopMenu', onApiHideTabContextMenu);
}; };
const on_main_view_click = e => { const on_main_view_click = e => {
// f7.popover.close('.document-menu.modal-in'); if(!e.target.closest('.tab.active')) {
f7.popover.close('.document-menu.modal-in', false);
}
}; };
Common.Notifications.on('api:disconnect', onApiDisconnect); Common.Notifications.on('api:disconnect', onApiDisconnect);
@ -44,6 +47,10 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
}; };
}, []); }, []);
const onApiHideTabContextMenu = () => {
f7.popover.close('.document-menu.modal-in', false);
}
const onWorkbookLocked = locked => { const onWorkbookLocked = locked => {
locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled'); locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled');
}; };
@ -79,7 +86,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
sheets.resetSheets(items); sheets.resetSheets(items);
sheets.resetHiddenSheets(hiddentems); sheets.resetHiddenSheets(hiddentems);
// this.hiddensheets.reset(hiddentems);
updateTabsColors(); updateTabsColors();
}; };
@ -164,71 +171,25 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
api.asc_addWorksheet(createSheetName()); api.asc_addWorksheet(createSheetName());
}; };
// const _getTabMenuItems = model => {
// const api = Common.EditorApi.get();
// let wbLocked = api.asc_isWorkbookLocked();
// let shLocked = api.asc_isWorksheetLockedOrDeleted(model.index);
// let items = [{
// caption: _t.textDuplicate,
// event: 'copy',
// locked: wbLocked || shLocked
// },{
// caption: _t.textDelete,
// event: 'del',
// locked: wbLocked || shLocked
// },{
// caption: _t.textRename,
// event: 'ren',
// locked: wbLocked || shLocked
// },{
// caption: _t.textHide,
// event: 'hide',
// locked: wbLocked || shLocked
// }];
// if (!wbLocked && !shLocked && this.hiddensheets.length) {
// items.push({
// caption: _t.textUnhide,
// event: 'unhide'
// });
// }
// if (Common.SharedSettings.get('phone') && items.length > 3) {
// this._moreAction = items.slice(2);
// items = items.slice(0, 2);
// items.push({
// caption: this.menuMore,
// event: 'showMore'
// });
// }
// return items;
// };
const onTabClick = (i, target) => { const onTabClick = (i, target) => {
const api = Common.EditorApi.get(); const api = Common.EditorApi.get();
const model = sheets.at(i); const model = sheets.at(i);
console.log(model); console.log(model);
let opened = $$('.document-menu.modal-in').length; let opened = $$('.document-menu.modal-in').length;
f7.popover.close('.document-menu.modal-in');
let index = model.index; let index = model.index;
f7.popover.close('.document-menu.modal-in', false);
if (index == api.asc_getActiveWorksheetIndex()) { if (index == api.asc_getActiveWorksheetIndex()) {
if (!opened) { if (!opened) {
if (!isDisconnected) { if (!isDisconnected) {
api.asc_closeCellEditor(); api.asc_closeCellEditor();
// const items = _getTabMenuItems(model);
// this.statusbar.showTabContextMenu(this._getTabMenuItems(model), model);
f7.popover.open('#idx-tab-context-menu-popover', target); f7.popover.open('#idx-tab-context-menu-popover', target);
} }
} }
} else { } else {
f7.popover.close('#idx-tab-context-menu-popover'); 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);
} }
@ -339,7 +300,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);
} }
}; };
@ -347,7 +308,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
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('.document-menu.modal-in', false);
switch (event) { switch (event) {
case 'del': deleteWorksheet(); break; case 'del': deleteWorksheet(); break;

View file

@ -10,6 +10,7 @@ import AddOptions from "../view/add/Add";
import EditOptions from "../view/edit/Edit"; import EditOptions from "../view/edit/Edit";
import { Device } from '../../../../common/mobile/utils/device'; import { Device } from '../../../../common/mobile/utils/device';
import { Search, SearchSettings } from '../controller/Search'; import { Search, SearchSettings } from '../controller/Search';
import { f7 } from 'framework7-react';
import {FunctionGroups} from "../controller/add/AddFunction"; import {FunctionGroups} from "../controller/add/AddFunction";
@ -26,6 +27,8 @@ export default class MainPage extends Component {
} }
handleClickToOpenOptions = (opts, showOpts) => { handleClickToOpenOptions = (opts, showOpts) => {
f7.popover.close('.document-menu.modal-in', false);
this.setState(state => { this.setState(state => {
if ( opts == 'edit' ) if ( opts == 'edit' )
return {editOptionsVisible: true}; return {editOptionsVisible: true};

View file

@ -112,31 +112,35 @@ const StatusbarView = inject('sheets')(observer(props => {
closeByBackdropClick={false} closeByBackdropClick={false}
closeByOutsideClick={false} closeByOutsideClick={false}
> >
<List className="list-block"> {isPhone || isAndroid ? (
<ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} /> <List className="list-block">
<ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} /> <ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
{isPhone || isAndroid ? ( <ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
<ListButton title={_t.textMore} onClick={() => props.onTabMenu('showMore')} /> <ListButton title={_t.textMore} onClick={() => props.onTabMenu('showMore')} />
) : ( </List>
<Fragment> ) : (
<ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} /> <List className="list-block">
<ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} /> <ListButton title={_t.textDuplicate} onClick={() => props.onTabMenu('copy')} />
{hiddenSheets.length ? ( <ListButton title={_t.textDelete} onClick={() => props.onTabMenu('del')} />
<ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} /> <ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
): null} <ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
</Fragment> {hiddenSheets.length ? (
)} <ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
</List> ) : null}
</List>
)}
</Popover> </Popover>
{isPhone || isAndroid ? ( {isPhone || isAndroid ? (
<Actions id="idx-tab-menu-actions" backdrop={true} closeByBackdropClick={true}> <Actions id="idx-tab-menu-actions" backdrop={true} closeByBackdropClick={true}>
<ActionsGroup> <ActionsGroup>
<ActionsButton onClick={() => props.onTabMenu('ren')}>{_t.textRename}</ActionsButton> <ActionsButton onClick={() => props.onTabMenu('ren')}>{_t.textRename}</ActionsButton>
<ActionsButton onClick={() => props.onTabMenu('hide')}>{_t.textHide}</ActionsButton> <ActionsButton onClick={() => props.onTabMenu('hide')}>{_t.textHide}</ActionsButton>
<ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton> {hiddenSheets.length ? (
<ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton>
) : null}
</ActionsGroup> </ActionsGroup>
<ActionsGroup> <ActionsGroup>
<ActionsButton>{_t.textCancel}</ActionsButton> <ActionsButton bold={true}>{_t.textCancel}</ActionsButton>
</ActionsGroup> </ActionsGroup>
</Actions> </Actions>
) : null} ) : null}