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

[SSE mobile] Added more in Context Menu, make touch events for sheets list in Statusbar

Browse source
This commit is contained in:
SergeyEzhin 2021-03-24 20:50:09 +03:00
parent 5f1f608b0a
commit 61b1c71319
2 changed files with 103 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -45,7 +45,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
}, []);
const onWorkbookLocked = locked => {
$$('.idx-btn-addtab').toggleClass('disabled', locked);
locked ? $$('.idx-btn-addtab').addClass('disabled') : $$('.idx-btn-addtab').removeClass('disabled');
};
const onWorksheetLocked = (index, locked) => {
@ -116,9 +116,9 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
color = '0px 4px 0 ' + color + ' inset';
}
$('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', color);
$$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color);
} else {
$('.tab:eq(' + tab.index + ')').find('a').css('box-shadow', '');
$$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', '');
}
}
};
@ -361,25 +361,9 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
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;
case 'showMore':
f7.actions.open('#idx-tab-menu-actions');
break;
default:
let _re = /reveal\:(\d+)/.exec(event);
if (_re && !!_re[1]) {

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

@ -1,8 +1,8 @@
import React, { Fragment } from 'react';
import { View, Toolbar, Link, Icon, Popover, List, ListButton } from 'framework7-react';
import { View, Toolbar, Link, Icon, Popover, List, ListButton, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
import { observer, inject } from "mobx-react";
import { useTranslation } from 'react-i18next';
import { f7 } from 'framework7-react';
import { Device } from '../../../../common/mobile/utils/device';
const viewStyle = {
height: 30
@ -11,9 +11,81 @@ const viewStyle = {
const StatusbarView = inject('sheets')(observer(props => {
const { t } = useTranslation();
const _t = t('Statusbar', {returnObjects: true});
const isAndroid = Device.android;
const isPhone = Device.isPhone;
const { sheets } = props;
const hiddenSheets = sheets.hiddensheets;
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
const $boxTabs = $$('.sheet-tabs');
// $boxTabs.css('position', 'absolute');
$boxTabs.on('touchstart', onTouchStart);
$boxTabs.on('touchmove', onTouchMove);
$boxTabs.on('touchend', onTouchEnd);
let touch = {};
function hasInvisible() {
let _left_bound_ = $boxTabs.offset().left,
_right_bound_ = _left_bound_ + $boxTabs.width();
// console.log(_left_bound_);
// console.log(_right_bound_);
let tab = $$('.sheet-tabs li')[0];
let rect = tab.getBoundingClientRect();
if (!(rect.left < _left_bound_)) {
tab = $$('.sheet-tabs li')[$$('.sheet-tabs li').length - 1];
rect = tab.getBoundingClientRect();
if (!(rect.right > _right_bound_))
return false;
}
return true;
}
function onTouchStart(e) {
if (hasInvisible()) {
// console.log(e);
let touches = e.changedTouches;
touch.startx = touches[0].clientX;
touch.scrollx = $boxTabs.scrollLeft();
// console.log(touch.scrollx);
touch.timer = setTimeout(function () {
// touch.longtouch = true;
}, 500);
// e.preventDefault();
}
}
function onTouchMove(e) {
if (touch.startx !== undefined) {
// console.log(e);
let touches = e.changedTouches;
if (touch.longtouch) {}
else {
if (touch.timer) clearTimeout(touch.timer), delete touch.timer;
let valueLeft = touch.scrollx + (touch.startx - touches[0].clientX);
// console.log(valueLeft);
$boxTabs.scrollLeft(valueLeft);
}
// e.preventDefault();
}
}
function onTouchEnd(e) {
if (touch.startx !== undefined) {
// console.log(e);
touch.longtouch = false;
delete touch.startx;
// e.preventDefault();
}
}
return (
<Fragment>
@ -43,13 +115,31 @@ const StatusbarView = inject('sheets')(observer(props => {
<List className="list-block">
<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={() => props.onTabMenu('unhide')} />
): null}
{isPhone || isAndroid ? (
<ListButton title={_t.textMore} onClick={() => props.onTabMenu('showMore')} />
) : (
<Fragment>
<ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
<ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
{hiddenSheets.length ? (
<ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
): null}
</Fragment>
)}
</List>
</Popover>
{isPhone || isAndroid ? (
<Actions id="idx-tab-menu-actions" backdrop={true} closeByBackdropClick={true}>
<ActionsGroup>
<ActionsButton onClick={() => props.onTabMenu('ren')}>{_t.textRename}</ActionsButton>
<ActionsButton onClick={() => props.onTabMenu('hide')}>{_t.textHide}</ActionsButton>
<ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton>
</ActionsGroup>
<ActionsGroup>
<ActionsButton>{_t.textCancel}</ActionsButton>
</ActionsGroup>
</Actions>
) : null}
{hiddenSheets.length ? (
<Popover id="idx-hidden-sheets-popover"
className="document-menu"