[SSE mobile] Added styles and scrolling sheets
This commit is contained in:
SergeyEzhin
parent
705509e340
commit
63221e9505
|
|
@ -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:
|
||||
'<div class="input-field"><input type="text" name="modal-sheet-name" placeholder="' + _t.textSheetName + '" class="modal-text-input"></div>',
|
||||
content: Device.ios ?
|
||||
'<div class="input-field"><input type="text" name="modal-sheet-name" placeholder="' + _t.textSheetName + '" class="modal-text-input"></div>' :
|
||||
'<div class="item-content item-input" style="margin-top: 15px; position: relative; padding-bottom: 10px;"><div class="item-inner"><div class="item-input-wrap" style="min-height: initial;"><input type="text" name="modal-sheet-name" placeholder="' + _t.textSheetName + '" /></div></div></div>',
|
||||
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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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(_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()) {
|
||||
// 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);
|
||||
// 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);
|
||||
// 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);
|
||||
}
|
||||
// // $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 (
|
||||
<Fragment>
|
||||
|
|
|
|||
Loading…
Reference in a new issue