diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index 67651a5f6..8b59fe33a 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx @@ -3,7 +3,6 @@ import React, { Fragment, useEffect, useState } from 'react'; import {StatusbarView} from '../view/Statusbar'; import { inject } from 'mobx-react'; import { f7 } from 'framework7-react'; -import { Dom7 } from 'framework7'; import { useTranslation } from 'react-i18next'; import { Device } from '../../../../common/mobile/utils/device'; @@ -11,7 +10,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => { const {sheets, storeAppOptions, users} = props; const {t} = useTranslation(); const _t = t('Statusbar', {returnObjects: true}); - console.log(props); + // console.log(props); let isEdit = storeAppOptions.isEdit; let isDisconnected = users.isDisconnected; @@ -62,7 +61,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => { }; const onApiSheetsChanged = () => { - console.log('on api sheets changed'); + // console.log('on api sheets changed'); const api = Common.EditorApi.get(); const sheets_count = api.asc_getWorksheetsCount(); @@ -174,7 +173,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => { const onTabClick = (i, target) => { const api = Common.EditorApi.get(); const model = sheets.at(i); - console.log(model); + // console.log(model); let opened = $$('.document-menu.modal-in').length; let index = model.index; @@ -228,14 +227,15 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => { f7.dialog.create({ title: _t.textRenameSheet, - content: - '
', + content: Device.ios ? + '
' : + '
', buttons: [ { text: 'OK', bold: true, onClick: function () { - let s = $$('.modal-text-input[name="modal-sheet-name"]').val(), + let s = $$('input[name="modal-sheet-name"]').val(), wc = api.asc_getWorksheetsCount(), items = [], err = !s.trim().length ? _t.textErrNotEmpty : ((s.length > 2 && s[0] == '"' && s[s.length-1] == '"' || !/[:\\\/\*\?\[\]\']/.test(s)) ? null : _t.textErrNameWrongChar); if (!err) { diff --git a/apps/spreadsheeteditor/mobile/src/less/statusbar.less b/apps/spreadsheeteditor/mobile/src/less/statusbar.less index 3ce1c36cd..e2dc8269a 100644 --- a/apps/spreadsheeteditor/mobile/src/less/statusbar.less +++ b/apps/spreadsheeteditor/mobile/src/less/statusbar.less @@ -6,7 +6,6 @@ height: @statusbar-height; min-height: @statusbar-height; background-color: @background-normal; - display: flex; .tab { @@ -26,13 +25,23 @@ } .statusbar--box-tabs { + overflow-x: auto; + overflow-y: hidden; + &::-webkit-scrollbar { + -webkit-appearance: none; + display: none; + // width: 0; + // height: 0; + } > ul { padding: 0; margin: 0; height: 100%; white-space: pre; - overflow: hidden; - + // overflow: hidden; + // position: absolute; + // left: 0; + // top: 0; > li { a { font-size: 12px; diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index ebd23b5f2..d0d7fea21 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx @@ -16,76 +16,81 @@ const StatusbarView = inject('sheets')(observer(props => { 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'); + // const $boxTabs = $$('.sheet-tabs'); + // const $statusBar = $$('.statusbar'); - $boxTabs.on('touchstart', onTouchStart); - $boxTabs.on('touchmove', onTouchMove); - $boxTabs.on('touchend', onTouchEnd); + // $boxTabs.on('touchstart', onTouchStart); + // $boxTabs.on('touchmove', onTouchMove); + // $boxTabs.on('touchend', onTouchEnd); - let touch = {}; + // let touch = {}; - function hasInvisible() { - let _left_bound_ = $boxTabs.offset().left, - _right_bound_ = _left_bound_ + $boxTabs.width(); + // function hasInvisible() { + // let _left_bound_ = $boxTabs.offset().left, + // _right_bound_ = $boxTabs.width() + _left_bound_ - $statusBar.width(); + // // _right_bound_ = _left_bound_ + $boxTabs.width(); - // console.log(_left_bound_); - // console.log(_right_bound_); + // // console.log(_left_bound_); + // console.log(_right_bound_); - let tab = $$('.sheet-tabs li')[0]; - let rect = tab.getBoundingClientRect(); + // 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.left < _left_bound_)) { + // // tab = $$('.sheet-tabs li')[$$('.sheet-tabs li').length - 1]; + // // rect = tab.getBoundingClientRect(); - if (!(rect.right > _right_bound_)) - return false; - } + // // if (!((rect.right).toFixed(2) > _right_bound_)) + // // return false; + // if(_right_bound_ <= 0) { + // return false; + // } + // } - return true; - } + // 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); + // 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(); - } - } + // touch.timer = setTimeout(function () { + // // touch.longtouch = true; + // }, 500); + // // e.preventDefault(); + // } + // } - function onTouchMove(e) { - if (touch.startx !== undefined) { - // console.log(e); - let touches = e.changedTouches; + // 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); - } + // 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(); - } - } + // // e.preventDefault(); + // } + // } - function onTouchEnd(e) { - if (touch.startx !== undefined) { - // console.log(e); - touch.longtouch = false; - delete touch.startx; - // e.preventDefault(); - } - } + // function onTouchEnd(e) { + // if (touch.startx !== undefined) { + // // console.log(e); + // touch.longtouch = false; + // delete touch.startx; + // // e.preventDefault(); + // } + // } return (