From cdd94a5d02e387e922c72c939a7fa1f02f0f4846 Mon Sep 17 00:00:00 2001 From: Sergey Krylov Date: Sun, 10 Jul 2022 13:40:50 +0500 Subject: [PATCH] add vertical align buttons --- src/components/toolbar/toolbar-types.ts | 3 +- src/components/toolbar/toolbar.template.ts | 119 +++++++++++++-------- src/constants.ts | 2 +- src/core/routes/router.ts | 8 +- src/pages/ExcelPage.ts | 4 +- src/styles/components/table.scss | 1 + src/styles/components/toolbar.scss | 9 +- 7 files changed, 94 insertions(+), 52 deletions(-) diff --git a/src/components/toolbar/toolbar-types.ts b/src/components/toolbar/toolbar-types.ts index c0f75c8..554722f 100644 --- a/src/components/toolbar/toolbar-types.ts +++ b/src/components/toolbar/toolbar-types.ts @@ -2,5 +2,6 @@ export type ToolbarStateType = { fontWeight?: 'normal' | 'bold'; fontStyle?: 'normal' | 'italic'; textDecoration?: 'none' | 'underline'; - textAlign?: 'left' | 'center' | 'right'; + justifyContent?: 'start' | 'center' | 'end'; + alignItems?: 'start' | 'center' | 'end'; }; diff --git a/src/components/toolbar/toolbar.template.ts b/src/components/toolbar/toolbar.template.ts index 821e3d9..6f610b7 100644 --- a/src/components/toolbar/toolbar.template.ts +++ b/src/components/toolbar/toolbar.template.ts @@ -8,52 +8,90 @@ type ButtonConfigType = { }; export function createToolbar(state: ToolbarStateType): string { - const btns: ButtonConfigType[] = [ - { - icon: 'format_bold', - isActive: state.fontWeight === 'bold', - value: { - fontWeight: state.fontWeight === 'bold' ? initialStyleState.fontWeight : 'bold', + const btns: (ButtonConfigType | ButtonConfigType[])[] = [ + [ + { + icon: 'format_bold', + isActive: state.fontWeight === 'bold', + value: { + fontWeight: state.fontWeight === 'bold' ? initialStyleState.fontWeight : 'bold', + }, }, - }, - { - icon: 'format_italic', - isActive: state.fontStyle === 'italic', - value: { - fontStyle: state.fontStyle === 'italic' ? initialStyleState.fontStyle : 'italic', + { + icon: 'format_italic', + isActive: state.fontStyle === 'italic', + value: { + fontStyle: state.fontStyle === 'italic' ? initialStyleState.fontStyle : 'italic', + }, }, - }, - { - icon: 'format_underline', - isActive: state.textDecoration === 'underline', - value: { - textDecoration: state.textDecoration === 'underline' ? initialStyleState.textDecoration : 'underline', + { + icon: 'format_underline', + isActive: state.textDecoration === 'underline', + value: { + textDecoration: state.textDecoration === 'underline' ? initialStyleState.textDecoration : 'underline', + }, }, - }, - { - icon: 'format_align_left', - isActive: state.textAlign === 'left', - value: { - textAlign: 'left', + ], + [ + { + icon: 'format_align_left', + isActive: state.justifyContent === 'start', + value: { + justifyContent: 'start', + }, }, - }, - { - icon: 'format_align_center', - isActive: state.textAlign === 'center', - value: { - textAlign: state.textAlign === 'center' ? initialStyleState.textAlign : 'center', + { + icon: 'format_align_center', + isActive: state.justifyContent === 'center', + value: { + justifyContent: state.justifyContent === 'center' ? initialStyleState.justifyContent : 'center', + }, }, - }, - { - icon: 'format_align_right', - isActive: state.textAlign === 'right', - value: { - textAlign: state.textAlign === 'right' ? initialStyleState.textAlign : 'right', + { + icon: 'format_align_right', + isActive: state.justifyContent === 'end', + value: { + justifyContent: state.justifyContent === 'end' ? initialStyleState.justifyContent : 'end', + }, }, - }, + ], + [ + { + icon: 'vertical_align_bottom', + isActive: state.alignItems === 'end', + value: { + alignItems: state.alignItems === 'end' ? initialStyleState.alignItems : 'end', + }, + }, + { + icon: 'vertical_align_center', + isActive: state.alignItems === 'center', + value: { + alignItems: state.alignItems === 'center' ? initialStyleState.alignItems : 'center', + }, + }, + { + icon: 'vertical_align_top', + isActive: state.alignItems === 'start', + value: { + alignItems: state.alignItems === 'start' ? initialStyleState.alignItems : 'start', + }, + }, + ], ]; - return btns.map(btn => toButton(btn)).join(' '); + return btns.map(btn => (Array.isArray(btn) ? toButtonGroup(btn) : toButton(btn))).join(' '); +} + +function toButtonGroup(buttons: ButtonConfigType[]) { + if (buttons.length === 1) return toButton(buttons[0]); + const btns = buttons.map(btn => toButton(btn)); + + return ` +
+ ${btns.join('')} +
+ `; } function toButton(button: ButtonConfigType) { @@ -63,10 +101,7 @@ function toButton(button: ButtonConfigType) { `; return ` -
+
${button.icon}
`; diff --git a/src/constants.ts b/src/constants.ts index b19f78a..d15b079 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -4,7 +4,7 @@ import { StateType } from 'redux/types'; import { storage } from 'core/utils'; export const initialStyleState: ToolbarStateType = { - textAlign: 'left', + justifyContent: 'start', fontWeight: 'normal', textDecoration: 'none', fontStyle: 'normal', diff --git a/src/core/routes/router.ts b/src/core/routes/router.ts index b23f2a6..2b6b687 100644 --- a/src/core/routes/router.ts +++ b/src/core/routes/router.ts @@ -12,7 +12,7 @@ type RoutesType = { export class Router { private $placeholder: Dom; private routes: RoutesType; - private page: DashboardPage | ExcelPage | null; + private page: DashboardPage | ExcelPage; private loader: Dom; constructor(selector: SelectorType, routes: RoutesType) { @@ -20,7 +20,6 @@ export class Router { this.$placeholder = $(selector); this.routes = routes; - this.page = null; this.loader = Loader(); this.changePageHandler = this.changePageHandler.bind(this); @@ -50,14 +49,13 @@ export class Router { Page = this.routes.dashboard; break; } - // @ts-ignore this.page = new Page(ActiveRoute.param); - const root = await this.page?.getRoot(); + const root = await this.page.getRoot(); this.$placeholder.clear().append(root); - this.page?.afterRender(); + this.page.afterRender(); } destroy() { diff --git a/src/pages/ExcelPage.ts b/src/pages/ExcelPage.ts index e674b31..ce47669 100644 --- a/src/pages/ExcelPage.ts +++ b/src/pages/ExcelPage.ts @@ -29,8 +29,8 @@ export class ExcelPage extends AbstractPage { } async getRoot() { - const normalizeState = await this.processor.get(); - const store = new Store(rootReducer, normalizeState); + const state = await this.processor.get(); + const store = new Store(rootReducer, state); this.storeSub = store.subscribe(this.processor.listen); diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss index 1c35c7e..7150acf 100644 --- a/src/styles/components/table.scss +++ b/src/styles/components/table.scss @@ -48,6 +48,7 @@ border-left: 0; white-space: nowrap; outline: none; + display: flex; &:hover:not(.selected) { cursor: cell; } diff --git a/src/styles/components/toolbar.scss b/src/styles/components/toolbar.scss index f25b908..1cb6a7b 100644 --- a/src/styles/components/toolbar.scss +++ b/src/styles/components/toolbar.scss @@ -15,4 +15,11 @@ .button { @include button(green) } -} \ No newline at end of file + + .button__group { + border-right: 1px solid #c0c0c0; + &:last-child { + border: none; + } + } +}