[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 {StatusbarView} from '../view/Statusbar';
|
||||||
import { inject } from 'mobx-react';
|
import { inject } from 'mobx-react';
|
||||||
import { f7 } from 'framework7-react';
|
import { f7 } from 'framework7-react';
|
||||||
import { Dom7 } from 'framework7';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Device } from '../../../../common/mobile/utils/device';
|
import { Device } from '../../../../common/mobile/utils/device';
|
||||||
|
|
||||||
|
|
@ -11,7 +10,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
||||||
const {sheets, storeAppOptions, users} = props;
|
const {sheets, storeAppOptions, users} = props;
|
||||||
const {t} = useTranslation();
|
const {t} = useTranslation();
|
||||||
const _t = t('Statusbar', {returnObjects: true});
|
const _t = t('Statusbar', {returnObjects: true});
|
||||||
console.log(props);
|
// console.log(props);
|
||||||
|
|
||||||
let isEdit = storeAppOptions.isEdit;
|
let isEdit = storeAppOptions.isEdit;
|
||||||
let isDisconnected = users.isDisconnected;
|
let isDisconnected = users.isDisconnected;
|
||||||
|
|
@ -62,7 +61,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const onApiSheetsChanged = () => {
|
const onApiSheetsChanged = () => {
|
||||||
console.log('on api sheets changed');
|
// console.log('on api sheets changed');
|
||||||
|
|
||||||
const api = Common.EditorApi.get();
|
const api = Common.EditorApi.get();
|
||||||
const sheets_count = api.asc_getWorksheetsCount();
|
const sheets_count = api.asc_getWorksheetsCount();
|
||||||
|
|
@ -174,7 +173,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
||||||
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;
|
||||||
let index = model.index;
|
let index = model.index;
|
||||||
|
|
@ -228,14 +227,15 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(props => {
|
||||||
|
|
||||||
f7.dialog.create({
|
f7.dialog.create({
|
||||||
title: _t.textRenameSheet,
|
title: _t.textRenameSheet,
|
||||||
content:
|
content: Device.ios ?
|
||||||
'<div class="input-field"><input type="text" name="modal-sheet-name" placeholder="' + _t.textSheetName + '" class="modal-text-input"></div>',
|
'<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: [
|
buttons: [
|
||||||
{
|
{
|
||||||
text: 'OK',
|
text: 'OK',
|
||||||
bold: true,
|
bold: true,
|
||||||
onClick: function () {
|
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 = [],
|
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);
|
err = !s.trim().length ? _t.textErrNotEmpty : ((s.length > 2 && s[0] == '"' && s[s.length-1] == '"' || !/[:\\\/\*\?\[\]\']/.test(s)) ? null : _t.textErrNameWrongChar);
|
||||||
if (!err) {
|
if (!err) {
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
height: @statusbar-height;
|
height: @statusbar-height;
|
||||||
min-height: @statusbar-height;
|
min-height: @statusbar-height;
|
||||||
background-color: @background-normal;
|
background-color: @background-normal;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
|
|
@ -26,13 +25,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.statusbar--box-tabs {
|
.statusbar--box-tabs {
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: none;
|
||||||
|
// width: 0;
|
||||||
|
// height: 0;
|
||||||
|
}
|
||||||
> ul {
|
> ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
|
// position: absolute;
|
||||||
|
// left: 0;
|
||||||
|
// top: 0;
|
||||||
> li {
|
> li {
|
||||||
a {
|
a {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
||||||
|
|
@ -16,76 +16,81 @@ const StatusbarView = inject('sheets')(observer(props => {
|
||||||
const { sheets } = props;
|
const { sheets } = props;
|
||||||
const hiddenSheets = sheets.hiddensheets;
|
const hiddenSheets = sheets.hiddensheets;
|
||||||
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
|
const getTabClassList = model => `tab ${model.active ? 'active' : ''} ${model.locked ? 'locked' : ''}`;
|
||||||
const $boxTabs = $$('.sheet-tabs');
|
// const $boxTabs = $$('.sheet-tabs');
|
||||||
// $boxTabs.css('position', 'absolute');
|
// const $statusBar = $$('.statusbar');
|
||||||
|
|
||||||
$boxTabs.on('touchstart', onTouchStart);
|
// $boxTabs.on('touchstart', onTouchStart);
|
||||||
$boxTabs.on('touchmove', onTouchMove);
|
// $boxTabs.on('touchmove', onTouchMove);
|
||||||
$boxTabs.on('touchend', onTouchEnd);
|
// $boxTabs.on('touchend', onTouchEnd);
|
||||||
|
|
||||||
let touch = {};
|
// let touch = {};
|
||||||
|
|
||||||
function hasInvisible() {
|
// function hasInvisible() {
|
||||||
let _left_bound_ = $boxTabs.offset().left,
|
// let _left_bound_ = $boxTabs.offset().left,
|
||||||
_right_bound_ = _left_bound_ + $boxTabs.width();
|
// _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_);
|
// console.log(_right_bound_);
|
||||||
|
|
||||||
let tab = $$('.sheet-tabs li')[0];
|
// let tab = $$('.sheet-tabs li')[0];
|
||||||
let rect = tab.getBoundingClientRect();
|
// let rect = tab.getBoundingClientRect();
|
||||||
|
|
||||||
if (!(rect.left < _left_bound_)) {
|
// if (!(rect.left < _left_bound_)) {
|
||||||
tab = $$('.sheet-tabs li')[$$('.sheet-tabs li').length - 1];
|
// // tab = $$('.sheet-tabs li')[$$('.sheet-tabs li').length - 1];
|
||||||
rect = tab.getBoundingClientRect();
|
// // rect = tab.getBoundingClientRect();
|
||||||
|
|
||||||
if (!(rect.right > _right_bound_))
|
// // if (!((rect.right).toFixed(2) > _right_bound_))
|
||||||
return false;
|
// // return false;
|
||||||
}
|
// if(_right_bound_ <= 0) {
|
||||||
|
// return false;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
return true;
|
// return true;
|
||||||
}
|
// }
|
||||||
|
|
||||||
function onTouchStart(e) {
|
// function onTouchStart(e) {
|
||||||
if (hasInvisible()) {
|
// if (hasInvisible()) {
|
||||||
// console.log(e);
|
// console.log(e);
|
||||||
let touches = e.changedTouches;
|
// let touches = e.changedTouches;
|
||||||
touch.startx = touches[0].clientX;
|
// touch.startx = touches[0].clientX;
|
||||||
touch.scrollx = $boxTabs.scrollLeft();
|
// touch.scrollx = $boxTabs.scrollLeft();
|
||||||
// console.log(touch.scrollx);
|
// // console.log(touch.scrollx);
|
||||||
|
|
||||||
touch.timer = setTimeout(function () {
|
// touch.timer = setTimeout(function () {
|
||||||
// touch.longtouch = true;
|
// // touch.longtouch = true;
|
||||||
}, 500);
|
// }, 500);
|
||||||
// e.preventDefault();
|
// // e.preventDefault();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
function onTouchMove(e) {
|
// function onTouchMove(e) {
|
||||||
if (touch.startx !== undefined) {
|
// if (touch.startx !== undefined) {
|
||||||
// console.log(e);
|
// // console.log(e);
|
||||||
let touches = e.changedTouches;
|
// let touches = e.changedTouches;
|
||||||
|
|
||||||
if (touch.longtouch) {}
|
// if (touch.longtouch) {}
|
||||||
else {
|
// else {
|
||||||
if (touch.timer) clearTimeout(touch.timer), delete touch.timer;
|
// if (touch.timer) clearTimeout(touch.timer), delete touch.timer;
|
||||||
let valueLeft = touch.scrollx + (touch.startx - touches[0].clientX);
|
// let valueLeft = touch.scrollx + (touch.startx - touches[0].clientX);
|
||||||
// console.log(valueLeft);
|
// console.log(valueLeft);
|
||||||
$boxTabs.scrollLeft(valueLeft);
|
// // $boxTabs.scrollLeft(valueLeft);
|
||||||
}
|
//
|
||||||
|
// }
|
||||||
|
|
||||||
// e.preventDefault();
|
// // e.preventDefault();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
function onTouchEnd(e) {
|
// function onTouchEnd(e) {
|
||||||
if (touch.startx !== undefined) {
|
// if (touch.startx !== undefined) {
|
||||||
// console.log(e);
|
// // console.log(e);
|
||||||
touch.longtouch = false;
|
// touch.longtouch = false;
|
||||||
delete touch.startx;
|
// delete touch.startx;
|
||||||
// e.preventDefault();
|
// // e.preventDefault();
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue