From 1d9ef74b37fe98bf181248857193cd4953d9fd21 Mon Sep 17 00:00:00 2001 From: ShimaginAndrey Date: Thu, 30 Dec 2021 00:26:40 +0300 Subject: [PATCH] [SSE] Add 'Tab Color' in Sheets --- .../lib/component/ThemeColorPalette.jsx | 6 +- apps/spreadsheeteditor/mobile/locale/en.json | 1 + .../mobile/src/controller/Statusbar.jsx | 45 ++++++- .../mobile/src/less/icons-material.less | 2 +- .../mobile/src/less/statusbar.less | 5 + .../mobile/src/store/sheets.js | 11 +- .../mobile/src/view/Statusbar.jsx | 121 +++++++++++++++++- 7 files changed, 176 insertions(+), 15 deletions(-) diff --git a/apps/common/mobile/lib/component/ThemeColorPalette.jsx b/apps/common/mobile/lib/component/ThemeColorPalette.jsx index 73107dc27..3c53ff558 100644 --- a/apps/common/mobile/lib/component/ThemeColorPalette.jsx +++ b/apps/common/mobile/lib/component/ThemeColorPalette.jsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import { f7, ListItem, List, Icon } from 'framework7-react'; import { useTranslation } from 'react-i18next'; -const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors }) => { +const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeColors, isTypeCustomColors }) => { return (
{themeColors.map((row, rowIndex) => { @@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors } {row.map((effect, index) => { return( {onColorClick(effect.color, effect.effectId, effect.effectValue)}} > @@ -115,7 +115,7 @@ const ThemeColorPalette = props => {
{ _t.textThemeColors }
- +
{ _t.textStandartColors }
diff --git a/apps/spreadsheeteditor/mobile/locale/en.json b/apps/spreadsheeteditor/mobile/locale/en.json index c1ec9e908..52985dcf4 100644 --- a/apps/spreadsheeteditor/mobile/locale/en.json +++ b/apps/spreadsheeteditor/mobile/locale/en.json @@ -291,6 +291,7 @@ "textSheetName": "Sheet Name", "textUnhide": "Unhide", "textMove": "Move", + "textTabColor": "Tab Color", "textMoveBack": "Move back", "textMoveForward": "Move forward", "textWarnDeleteSheet": "The worksheet maybe has data. Proceed operation?" diff --git a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx index f0edbc676..53c6e0928 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/Statusbar.jsx @@ -63,8 +63,7 @@ const StatusbarController = inject('sheets', 'storeFocusObjects', 'users')(obser } sheets.resetSheets(items); - - updateTabsColors(); + setTimeout(() => updateTabsColors()); }; const onApiActiveSheetChanged = (index) => { @@ -72,6 +71,7 @@ const StatusbarController = inject('sheets', 'storeFocusObjects', 'users')(obser sheets.setActiveWorksheet(index); Common.Notifications.trigger('sheet:active', index); } + onApiSheetsChanged(); }; const onApiHideTabContextMenu = () => { @@ -103,14 +103,13 @@ const StatusbarController = inject('sheets', 'storeFocusObjects', 'users')(obser if (color.length) { if (!tab.active) { - color = '0px 4px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; + color = '0px 3px 0 ' + Common.Utils.RGBColor(color).toRGBA(0.7) + ' inset'; } else { - color = '0px 4px 0 ' + color + ' inset'; + color = '0px 3px 0 ' + color + ' inset'; } - - $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', color); + $$(`.sheet-tabs .tab a.tab-color-${tab.index}`).css('box-shadow', color); } else { - $$('.sheet-tabs .tab a').eq(tab.index).css('box-shadow', ''); + $$(`.sheet-tabs .tab a.tab-color-${tab.index}`).css('box-shadow', ''); } } }; @@ -337,6 +336,15 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => case 'move': Device.phone ? f7.sheet.open('.move-sheet') : f7.popover.open('#idx-move-sheet-popover', targetRef.current); break; + case 'tab-color': + if( Device.phone ) { + f7.sheet.open('.tab-color-sheet'); + f7.navbar.hide('.main-navbar'); + $$('.statusbar').css('top', '-50%'); + } else { + f7.popover.open('#idx-tab-color-popover',targetRef.current); + } + break; case 'unhide': f7.popover.open('#idx-hidden-sheets-popover', '.active'); break; @@ -365,6 +373,28 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props => api.asc_moveWorksheet(activeIndex === undefined ? api.asc_getWorksheetsCount() : activeIndex, [api.asc_getActiveWorksheetIndex()]); } + const onSetWorkSheetColor = (color) => { + const api = Common.EditorApi.get(); + let arrIndex = []; + + if (api) { + arrIndex.push(api.asc_getActiveWorksheetIndex()); + if (arrIndex) { + if(color === 'transparent') { + api.asc_setWorksheetTabColor(null, arrIndex); + sheets.sheets.forEach(tab => { + if(tab.active) $$(`.sheet-tabs .tab a.tab-color-${tab.index}`).css('box-shadow', ''); + }) + } else { + let asc_clr = Common.Utils.ThemeColor.getRgbColor(color); + if (asc_clr) { + api.asc_setWorksheetTabColor(asc_clr, arrIndex); + } + } + } + } + } + return ( onAddTabClicked={onAddTabClicked} onTabMenu={onTabMenu} onMenuMoveClick = {onMenuMoveClick} + onSetWorkSheetColor={onSetWorkSheetColor} /> ) })); diff --git a/apps/spreadsheeteditor/mobile/src/less/icons-material.less b/apps/spreadsheeteditor/mobile/src/less/icons-material.less index 70a6e5c9d..5de264f68 100644 --- a/apps/spreadsheeteditor/mobile/src/less/icons-material.less +++ b/apps/spreadsheeteditor/mobile/src/less/icons-material.less @@ -394,7 +394,7 @@ &.icon-plus { width: 22px; height: 22px; - .encoded-svg-mask(''); + .encoded-svg-mask('', @toolbar-icons); } } diff --git a/apps/spreadsheeteditor/mobile/src/less/statusbar.less b/apps/spreadsheeteditor/mobile/src/less/statusbar.less index 2e4f8ac81..c94d8afa2 100644 --- a/apps/spreadsheeteditor/mobile/src/less/statusbar.less +++ b/apps/spreadsheeteditor/mobile/src/less/statusbar.less @@ -8,6 +8,8 @@ background-color: @background-tertiary; display: flex; + transition: top 400ms; + .tab { border: 0 none; border-radius: 0; @@ -24,6 +26,9 @@ &.active { background-color: @background-secondary; font-weight: 600; + a { + box-shadow: 0px 2px 0 #49795d inset; + } } .hairline(right, @background-menu-divider); diff --git a/apps/spreadsheeteditor/mobile/src/store/sheets.js b/apps/spreadsheeteditor/mobile/src/store/sheets.js index 3caa203da..ed2db7b86 100644 --- a/apps/spreadsheeteditor/mobile/src/store/sheets.js +++ b/apps/spreadsheeteditor/mobile/src/store/sheets.js @@ -42,15 +42,24 @@ export class storeWorksheets { setWsProps: action, isDisabledEditSheet: observable, - setDisabledEditSheet: action + setDisabledEditSheet: action, + + colorTab:observable, + changeTabColor: action }); this.sheets = []; } + colorTab = undefined; + resetSheets(sheets) { this.sheets = Object.values(sheets) } + changeTabColor(color) { + this.colorTab = color; + } + setActiveWorksheet(i) { if ( !this.sheets[i].active ) { this.sheets.forEach(model => { diff --git a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx index bc1ccf646..b261f0f2c 100644 --- a/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/Statusbar.jsx @@ -1,8 +1,9 @@ -import React, { Fragment, useState } from 'react'; -import { View, Link, Icon, Popover, List, ListItem, ListButton, Actions, ActionsGroup, ActionsButton, Sheet, Page } from 'framework7-react'; +import React, { Fragment, useEffect, useState } from 'react'; +import {f7, View, Link, Icon, Popover, Navbar, NavRight, List, ListItem, ListButton, Actions, ActionsGroup, ActionsButton, Sheet, Page } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { Device } from '../../../../common/mobile/utils/device'; import { inject, observer } from 'mobx-react'; +import { ThemeColorPalette, CustomColorPicker } from '../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; const viewStyle = { height: 30 @@ -53,6 +54,93 @@ const PageListMove = props => { ) }; +const PageCustomTabColor = inject("storePalette")(observer (props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + const onAddNewColor = (colors, color) => { + props.storePalette.changeCustomColors(colors); + props.onSetWorkSheetColor(color); + props.sheets.changeTabColor(color); + props.f7router.back(); + }; + + return ( + + + {Device.phone && + + + + } + + + + ) +})); + +const PageTabColor = inject("storePalette")(observer(props => { + const { t } = useTranslation(); + const {sheets} = props; + const allSheets = sheets.sheets; + const storePalette = props.storePalette; + const customColors = storePalette.customColors; + const activeIndex = sheets.activeWorksheet; + + useEffect(() => { + if (allSheets.length !== 0) { + let color = sheets.at(activeIndex).color; + if(sheets.at(activeIndex).color !== null) { + sheets.changeTabColor('' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())); + } else { + sheets.changeTabColor('transparent'); + } + } + }, [allSheets]) + + const changeColor = (color, effectId, effectValue) => { + if (color !== 'empty') { + if (effectId !== undefined ) { + const newColor = {color: color, effectId: effectId, effectValue: effectValue}; + sheets.changeTabColor(newColor); + props.onSetWorkSheetColor(color); + } else { + sheets.changeTabColor(color); + props.onSetWorkSheetColor(color); + } + + Device.isPhone ? f7.sheet.close('.tab-color-sheet') : f7.popover.close('#idx-tab-color-popover'); + + } else { + f7.views.current.router.navigate('/sheet-tab-custom-color/', {props:{onSetWorkSheetColor: props.onSetWorkSheetColor, sheets}}); + } + }; + + return ( + + + {Device.phone && + + + + + + } + + + { allSheets.length !== 0 && + } + + + + + ) +})); + + const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(props => { const { t } = useTranslation(); const _t = t('Statusbar', {returnObjects: true}); @@ -82,7 +170,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop {allSheets.map((model,i) => model.hidden ? null :
  • props.onTabClick(i, e.target)}> - {model.name} + {model.name}
    • )} @@ -109,6 +197,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop props.onTabMenu('ren')} /> props.onTabMenu('hide')} /> props.onTabMenu('move')} /> + props.onTabMenu('tab-color')} /> {hiddenSheets.length ? ( props.onTabMenu('unhide')} /> ) : null} @@ -122,6 +211,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop props.onTabMenu('ren')}>{_t.textRename} props.onTabMenu('hide')}>{_t.textHide} props.onTabMenu('move')}>{_t.textMove} + props.onTabMenu('tab-color')}>{_t.textTabColor} {hiddenSheets.length ? ( props.onTabMenu('unhide')}>{_t.textUnhide} ) : null} @@ -143,6 +233,24 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop } + { isPhone ? + + { + f7.navbar.show('.main-navbar'); + $$('.statusbar').css('top', '0%'); + }}> + + + + + : + + + + + + } {hiddenSheets.length ? (