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

[SSE] Add 'Tab Color' in Sheets

Browse source
This commit is contained in:
ShimaginAndrey 2021-12-30 00:26:40 +03:00
parent bdd8958932
commit 1d9ef74b37
7 changed files with 176 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
apps/common/mobile/lib/component/ThemeColorPalette.jsx
View file

@ -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 (
<div className='palette'>
{themeColors.map((row, rowIndex) => {
@ -11,7 +11,7 @@ const ThemeColors = ({ themeColors, onColorClick, curColor, isTypeCustomColors }
{row.map((effect, index) => {
return(
<a key={`tc-${rowIndex}-${index}`}
className={(curColor && !isTypeCustomColors && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color))) ? 'active' : ''}
className={(curColor && !isTypeCustomColors && !isTypeColors && ((curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor === effect.color))) ? 'active' : ''}
style={{ background: `#${effect.color}`}}
onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
></a>
@ -115,7 +115,7 @@ const ThemeColorPalette = props => {
<List>
<ListItem className='theme-colors'>
<div>{ _t.textThemeColors }</div>
<ThemeColors isTypeCustomColors={isTypeCustomColors} themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
<ThemeColors isTypeCustomColors={isTypeCustomColors} isTypeColors={isTypeColors} themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
</ListItem>
<ListItem className='standart-colors'>
<div>{ _t.textStandartColors }</div>

1
apps/spreadsheeteditor/mobile/locale/en.json
View file

@ -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?"

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

@ -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 (
<StatusbarView
onTabClick={onTabClick}
@ -372,6 +402,7 @@ const Statusbar = inject('sheets', 'storeAppOptions', 'users')(observer(props =>
onAddTabClicked={onAddTabClicked}
onTabMenu={onTabMenu}
onMenuMoveClick = {onMenuMoveClick}
onSetWorkSheetColor={onSetWorkSheetColor}
/>
)
}));

2
apps/spreadsheeteditor/mobile/src/less/icons-material.less
View file

@ -394,7 +394,7 @@
&.icon-plus {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{toolbar-icons}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>');
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{toolbar-icons}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>', @toolbar-icons);
}
}

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

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

11
apps/spreadsheeteditor/mobile/src/store/sheets.js
View file

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

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

@ -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 (
<Page>
<Navbar title={_t.textCustomColor} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose ></Link>
</NavRight>
}
</Navbar>
<CustomColorPicker currentColor={props.sheets.colorTab} onAddNewColor={onAddNewColor}/>
</Page>
)
}));
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 (
<Page>
<Navbar title={t('Statusbar.textTabColor')}>
{Device.phone &&
<NavRight>
<Link sheetClose>
<Icon icon='icon-expand-down'/>
</Link>
</NavRight>
}
</Navbar>
{ allSheets.length !== 0 &&
<ThemeColorPalette changeColor={changeColor} curColor={sheets.colorTab} customColors={customColors} transparent={true}/> }
<List>
<ListItem title={t('View.Edit.textAddCustomColor')} link="/sheet-tab-custom-color/" routeProps={{
onSetWorkSheetColor: props.onSetWorkSheetColor,
sheets,
}}></ListItem>
</List>
</Page>
)
}));
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 :
<li className={`tab${model.active ? ' active' : ''} ${model.locked ? 'locked' : ''}`} key={i} onClick={(e) => props.onTabClick(i, e.target)}>
<a>{model.name}</a>
<a className={`tab-color-${model.index}`}>{model.name}</a>
</li>
)}
@ -109,6 +197,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
<ListButton title={_t.textRename} onClick={() => props.onTabMenu('ren')} />
<ListButton title={_t.textHide} onClick={() => props.onTabMenu('hide')} />
<ListButton title={_t.textMove} onClick={() => props.onTabMenu('move')} />
<ListButton title={_t.textTabColor} onClick={() => props.onTabMenu('tab-color')} />
{hiddenSheets.length ? (
<ListButton title={_t.textUnhide} onClick={() => props.onTabMenu('unhide')} />
) : null}
@ -122,6 +211,7 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
<ActionsButton onClick={() => props.onTabMenu('ren')}>{_t.textRename}</ActionsButton>
<ActionsButton onClick={() => props.onTabMenu('hide')}>{_t.textHide}</ActionsButton>
<ActionsButton onClick={() => props.onTabMenu('move')}>{_t.textMove}</ActionsButton>
<ActionsButton onClick={() => props.onTabMenu('tab-color')}>{_t.textTabColor}</ActionsButton>
{hiddenSheets.length ? (
<ActionsButton onClick={() => props.onTabMenu('unhide')}>{_t.textUnhide}</ActionsButton>
) : null}
@ -143,6 +233,24 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
<PageListMove sheets={sheets} onMenuMoveClick={props.onMenuMoveClick}/>
</Popover>
}
{ isPhone ?
<Sheet style={{height: '50%'}} className='tab-color-sheet' backdrop={false}
onSheetClose={() =>
{
f7.navbar.show('.main-navbar');
$$('.statusbar').css('top', '0%');
}}>
<View routes={routes}>
<PageTabColor sheets={sheets} onSetWorkSheetColor={props.onSetWorkSheetColor}/>
</View>
</Sheet>
:
<Popover id="idx-tab-color-popover" backdrop={false}>
<View style={{height: '450px'}} routes={routes}>
<PageTabColor sheets={sheets} onSetWorkSheetColor={props.onSetWorkSheetColor}/>
</View>
</Popover>
}
{hiddenSheets.length ? (
<Popover id="idx-hidden-sheets-popover"
className="document-menu"
@ -164,4 +272,11 @@ const StatusbarView = inject('storeAppOptions', 'sheets', 'users')(observer(prop
)
}));
const routes = [
{
path: '/sheet-tab-custom-color/',
component: PageCustomTabColor
},
];
export {StatusbarView};