From 83cb7be8eb12b8e0b375f2a393eb6d0e84546e2b Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Mon, 28 Dec 2020 23:52:32 +0300 Subject: [PATCH] [SSE mobile] fill worksheets in taskbar --- .../mobile/src/controller/Statusbar.jsx | 78 ++++++++++++++++++- .../mobile/src/less/app.less | 4 + .../mobile/src/less/statusbar.less | 58 ++++++++++++++ .../mobile/src/store/mainStore.js | 2 + .../mobile/src/store/sheets.js | 52 +++++++++++++ .../mobile/src/view/Statusbar.jsx | 33 ++++++-- 6 files changed, 215 insertions(+), 12 deletions(-) create mode 100644 apps/spreadsheeteditor/mobile/src/less/statusbar.less create mode 100644 apps/spreadsheeteditor/mobile/src/store/sheets.js diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index d177b3323..81f22e0ed 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx @@ -1,9 +1,79 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import StatusbarView from '../view/Statusbar'; +import { inject } from 'mobx-react'; -const Statusbar = props => { - return -}; +const Statusbar = inject('sheets')(props => { + const {sheets} = props; + + useEffect(() => { + console.log("status bar did mount"); + + Common.Notifications.on('document:ready', onApiSheetsChanged); + Common.Notifications.on('engineCreated', api => { + api.asc_registerCallback('asc_onSheetsChanged', onApiSheetsChanged.bind(api)); + }); + }, []); + + const onApiSheetsChanged = api => { + console.log('on api sheets changed'); + + !api && (api = Common.EditorApi.get()); + + const sheets_count = api.asc_getWorksheetsCount(); + const active_index = api.asc_getActiveWorksheetIndex(); + let i = -1, items = []; + + while ( ++i < sheets_count ) { + const tab = { + index : i, + active : active_index == i, + name : api.asc_getWorksheetName(i), + locked : api.asc_isWorksheetLockedOrDeleted(i), + hidden : api.asc_isWorksheetHidden(i), + color : api.asc_getWorksheetTabColor(i) + }; + + items.push(tab); + } + + sheets.reset(items); + // this.hiddensheets.reset(hiddentems); + + // this.updateTabsColors(); + }; + + const onTabClicked = i => { + const model = sheets.at(i); + + const api = Common.EditorApi.get(); + api.asc_showWorksheet(model.index); + sheets.setActiveWorksheet(i); + }; + + const onAddTabClicked = () => { + const api = Common.EditorApi.get(); + api.asc_closeCellEditor(); + + const createSheetName = () => { + let items = [], wc = api.asc_getWorksheetsCount(); + while (wc--) { + items.push(api.asc_getWorksheetName(wc).toLowerCase()); + } + + let index = 0, name; + while(++index < 1000) { + name = /*this.strSheet*/ 'Sheet' + index; + if (items.indexOf(name.toLowerCase()) < 0) break; + } + + return name; + }; + + api.asc_addWorksheet(createSheetName()); + }; + + return +}); export default Statusbar; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/less/app.less b/apps/spreadsheeteditor/mobile/src/less/app.less index 00f6e282f..5403bdf9d 100644 --- a/apps/spreadsheeteditor/mobile/src/less/app.less +++ b/apps/spreadsheeteditor/mobile/src/less/app.less @@ -1,6 +1,9 @@ @themeColor: #40865c; +@import '../../../../common/mobile/resources/less/variables.less'; +@import '../../../../../vendor/framework7-react/node_modules/framework7/less/mixins.less'; + @import '../../../../common/mobile/resources/less/_mixins.less'; @import '../../../../common/mobile/resources/less/collaboration.less'; @import '../../../../common/mobile/resources/less/common.less'; @@ -12,6 +15,7 @@ @import './icons-material.less'; @import './icons-common.less'; @import './celleditor.less'; +@import './statusbar.less'; .page[data-name='home'] { .page-content { diff --git a/apps/spreadsheeteditor/mobile/src/less/statusbar.less b/apps/spreadsheeteditor/mobile/src/less/statusbar.less new file mode 100644 index 000000000..a142d2bb9 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/less/statusbar.less @@ -0,0 +1,58 @@ +@statusbar-height: 30px; +@fontColor: #000; + +.statusbar { + .hairline(top, @border-regular-control); + height: @statusbar-height; + min-height: @statusbar-height; + background-color: @background-normal; + + display: flex; + + .tab { + border: 0 none; + border-radius: 0; + font-size: 18px; + line-height: inherit; + min-width: 48px; + + display: inline-block; + padding: 0 10px; + text-align: center; + height: 100%; + position: relative; + + .hairline(right, @border-regular-control); + } + + .statusbar--box-tabs { + > ul { + padding: 0; + margin: 0; + height: 100%; + white-space: pre; + overflow: hidden; + + > li { + a { + font-size: 12px; + padding: 0 10px 0; + line-height: @statusbar-height; + color: @text-normal; + } + + &:not(.active) { + a { + opacity: 0.5; + } + } + } + } + } + + i.icon { + &.icon-plus { + .encoded-svg-background(''); + } + } +} diff --git a/apps/spreadsheeteditor/mobile/src/store/mainStore.js b/apps/spreadsheeteditor/mobile/src/store/mainStore.js index 05abdf386..a54c22e56 100644 --- a/apps/spreadsheeteditor/mobile/src/store/mainStore.js +++ b/apps/spreadsheeteditor/mobile/src/store/mainStore.js @@ -2,6 +2,7 @@ // import {storeDocumentSettings} from './documentSettings'; // import {storeFocusObjects} from "./focusObjects"; import {storeUsers} from '../../../../common/mobile/lib/store/users'; +import {storeWorksheets} from './sheets'; // import {storeTextSettings} from "./textSettings"; // import {storeParagraphSettings} from "./paragraphSettings"; // import {storeShapeSettings} from "./shapeSettings"; @@ -13,6 +14,7 @@ export const stores = { // storeFocusObjects: new storeFocusObjects(), // storeDocumentSettings: new storeDocumentSettings(), users: new storeUsers(), + sheets: new storeWorksheets() // storeTextSettings: new storeTextSettings(), // storeParagraphSettings: new storeParagraphSettings(), // storeShapeSettings: new storeShapeSettings(), diff --git a/apps/spreadsheeteditor/mobile/src/store/sheets.js b/apps/spreadsheeteditor/mobile/src/store/sheets.js new file mode 100644 index 000000000..2b8515041 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/store/sheets.js @@ -0,0 +1,52 @@ + +import {observable, action} from 'mobx'; + +class Worksheet { + @observable sheet = { + index : -1, + active : false, + name : '', + locked : false, + hidden : false, + color : '' + }; + + constructor(data = {}) { + this.sheet.merge(data); + } +} + +export class storeWorksheets { + @observable sheets; + + constructor() { + this.sheets = []; + } + + @action reset(sheets) { + this.sheets = Object.values(sheets) + } + + @action setActiveWorksheet(i) { + if ( !this.sheets[i].active ) { + this.sheets.forEach(model => { + if ( model.active ) + model.active = false; + }); + + this.sheets[i].active = true; + } + } + + at(i) { + return this.sheets[i] + } + + hasHiddenWorksheet() { + return this.sheets.some(model => model.hidden); + } + + hiddenWorksheets() { + return this.sheets.filter(model => model.hidden); + } +} diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index 6c7d19fad..666c3ebb5 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx @@ -1,17 +1,34 @@ import React from 'react'; -import { View, Toolbar, Link } from 'framework7-react'; +import { View, Toolbar, Link, Icon } from 'framework7-react'; +import { observer, inject } from "mobx-react"; const viewStyle = { height: 30 }; -const StatusbarView = props => { - return - - Sheet 1 - Sheet 2 - +const StatusbarView = inject('sheets')(observer(props => { + const { sheets } = props; + + const getTabClassList = model => + `tab ${model.active ? 'active':''} ${model.locked ? 'locked':''}`; + + return +
+ props.onAddTabClicked()}> + + +
+
+ +
; -}; +})); export default StatusbarView;