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

[SSE mobile] Added styles and scrolling sheets

Browse source
This commit is contained in:
SergeyEzhin 2021-03-26 16:34:46 +03:00
parent 705509e340
commit 63221e9505
3 changed files with 80 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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) {

15
apps/spreadsheeteditor/mobile/src/less/statusbar.less
View file

@ -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;

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

@ -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 (
<Fragment>