From d4101a48b3eee8b1fb177831aa02a4b4fbec2588 Mon Sep 17 00:00:00 2001 From: Markus Hatvan Date: Sat, 18 Sep 2021 11:15:25 +0200 Subject: chore: convert various files from JS to TS (#1959) --- src/features/appearance/index.js | 259 --------------------------------------- src/features/appearance/index.ts | 250 +++++++++++++++++++++++++++++++++++++ 2 files changed, 250 insertions(+), 259 deletions(-) delete mode 100644 src/features/appearance/index.js create mode 100644 src/features/appearance/index.ts (limited to 'src/features/appearance') diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js deleted file mode 100644 index 0c935be32..000000000 --- a/src/features/appearance/index.js +++ /dev/null @@ -1,259 +0,0 @@ -import color from 'color'; -import { reaction } from 'mobx'; -import themeInfo from '../../assets/themeInfo.json'; -import { iconSizeBias } from '../../config'; -import { DEFAULT_APP_SETTINGS } from '../../environment'; - -const STYLE_ELEMENT_ID = 'custom-appearance-style'; - -function createStyleElement() { - const styles = document.createElement('style'); - styles.id = STYLE_ELEMENT_ID; - - document.querySelector('head')?.appendChild(styles); -} - -function setAppearance(style) { - const styleElement = document.querySelector(`#${STYLE_ELEMENT_ID}`); - - if (styleElement) { - styleElement.innerHTML = style; - } -} - -// See https://github.com/Qix-/color/issues/53#issuecomment-656590710 -function darkenAbsolute(originalColor, absoluteChange) { - const originalLightness = originalColor.lightness(); - return originalColor.lightness(originalLightness - absoluteChange); -} - -function generateAccentStyle(accentColorStr) { - let style = ''; - - for (const property of Object.keys(themeInfo)) { - style += ` - ${themeInfo[property]} { - ${property}: ${accentColorStr}; - } - `; - } - - let accentColor = color(DEFAULT_APP_SETTINGS.accentColor); - try { - accentColor = color(accentColorStr); - } catch { - // Ignore invalid accent color. - } - const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); - style += ` - a.button:hover, button.button:hover { - background: ${darkenAbsolute(accentColor, 10).hex()}; - } - - .franz-form__button:hover, - .franz-form__button.franz-form__button--inverted:hover, - .settings .settings__close:hover, - .theme__dark .franz-form__button:hover, - .theme__dark .franz-form__button.franz-form__button--inverted:hover, - .theme__dark .settings .settings__close:hover { - background: ${darkerColorStr}; - } - - .franz-form__button:active, - .theme__dark .franz-form__button:active { - background: ${darkerColorStr}; - } - - .theme__dark .franz-form__button.franz-form__button--inverted, - .franz-form__button.franz-form__button--inverted { - background: none; - border-color: ${accentColorStr}; - } - - .tab-item.is-active { - background: ${accentColor.lighten(0.35).hex()}; - } - `; - - return style; -} - -function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { - const width = Number(widthStr); - const iconSize = Number(iconSizeStr) - iconSizeBias; - - return vertical - ? ` - .tab-item { - width: ${width - 2}px !important; - height: ${width - 5 + iconSize}px !important; - min-height: unset; - } - .tab-item .tab-item__icon { - width: ${width / 2 + iconSize}px !important; - } - .sidebar__button { - font-size: ${width / 3}px !important; - } - ` - : ` - .sidebar { - width: ${width}px !important; - } - .tab-item { - width: ${width}px !important; - height: ${width - 5 + iconSize}px !important; - } - .tab-item .tab-item__icon { - width: ${width / 2 + iconSize}px !important; - } - .sidebar__button { - font-size: ${width / 3}px !important; - } - .todos__todos-panel--expanded { - width: calc(100% - ${300 + width}px) !important; - } - `; -} - -function generateShowDragAreaStyle(accentColor) { - return ` - .sidebar { - padding-top: 0px !important; - } - .window-draggable { - position: initial; - background-color: ${accentColor}; - } - #root { - /** Remove 22px from app height, otherwise the page will be too high */ - height: calc(100% - 22px); - } - `; -} - -function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { - if (!document.querySelector('#vertical-style')) { - const link = document.createElement('link'); - link.id = 'vertical-style'; - link.rel = 'stylesheet'; - link.type = 'text/css'; - link.href = './styles/vertical.css'; - - document.head.append(link); - } - const width = Number(widthStr); - const sidebarWidth = width - 4; - const verticalStyleOffset = 23; - - return ` - .sidebar { - height: ${sidebarWidth + verticalStyleOffset + 1}px !important; - ${ - alwaysShowWorkspaces - ? ` - width: calc(100% - 300px) !important; - ` - : '' - } - } - - .sidebar .sidebar__button { - width: ${width}px; - } - - .app .app__content { - padding-top: ${sidebarWidth + verticalStyleOffset + 1}px !important; - } - - .workspaces-drawer { - margin-top: -${sidebarWidth - verticalStyleOffset - 1}px !important; - } - - .todos__todos-panel--expanded { - width: calc(100% - 300px) !important; - } - `; -} - -function generateOpenWorkspaceStyle() { - return ` - .app .app__content { - width: 100%; - transform: translateX(0px); - } - .sidebar__button--workspaces { - display: none; - } - `; -} - -function generateStyle(settings) { - let style = ''; - - const { - accentColor, - serviceRibbonWidth, - iconSize, - showDragArea, - useVerticalStyle, - alwaysShowWorkspaces, - } = settings; - - if ( - accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase() - ) { - style += generateAccentStyle(accentColor); - } - if ( - serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth || - iconSize !== DEFAULT_APP_SETTINGS.iconSize - ) { - style += generateServiceRibbonWidthStyle( - serviceRibbonWidth, - iconSize, - useVerticalStyle, - ); - } - if (showDragArea) { - style += generateShowDragAreaStyle(accentColor); - } - if (useVerticalStyle) { - style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); - } else if (document.querySelector('#vertical-style')) { - const link = document.querySelector('#vertical-style'); - if (link) { - link.remove(); - } - } - if (alwaysShowWorkspaces) { - style += generateOpenWorkspaceStyle(); - } - - return style; -} -function updateStyle(settings) { - const style = generateStyle(settings); - setAppearance(style); -} - -export default function initAppearance(stores) { - const { settings } = stores; - createStyleElement(); - - // Update style when settings change - reaction( - () => [ - settings.all.app.accentColor, - settings.all.app.serviceRibbonWidth, - settings.all.app.iconSize, - settings.all.app.showDragArea, - settings.all.app.useVerticalStyle, - settings.all.app.alwaysShowWorkspaces, - ], - () => { - updateStyle(settings.all.app); - }, - { fireImmediately: true }, - ); -} diff --git a/src/features/appearance/index.ts b/src/features/appearance/index.ts new file mode 100644 index 000000000..b00b9df3d --- /dev/null +++ b/src/features/appearance/index.ts @@ -0,0 +1,250 @@ +import color from 'color'; +import { reaction } from 'mobx'; +import { iconSizeBias } from '../../config'; +import { DEFAULT_APP_SETTINGS } from '../../environment'; + +const STYLE_ELEMENT_ID = 'custom-appearance-style'; + +function createStyleElement() { + const styles = document.createElement('style'); + styles.id = STYLE_ELEMENT_ID; + + document.querySelector('head')?.appendChild(styles); +} + +function setAppearance(style) { + const styleElement = document.querySelector(`#${STYLE_ELEMENT_ID}`); + + if (styleElement) { + styleElement.innerHTML = style; + } +} + +// See https://github.com/Qix-/color/issues/53#issuecomment-656590710 +function darkenAbsolute(originalColor, absoluteChange) { + const originalLightness = originalColor.lightness(); + return originalColor.lightness(originalLightness - absoluteChange); +} + +function generateAccentStyle(accentColorStr) { + let style = ''; + + let accentColor = color(DEFAULT_APP_SETTINGS.accentColor); + try { + accentColor = color(accentColorStr); + } catch { + // Ignore invalid accent color. + } + const darkerColorStr = darkenAbsolute(accentColor, 5).hex(); + style += ` + a.button:hover, button.button:hover { + background: ${darkenAbsolute(accentColor, 10).hex()}; + } + + .franz-form__button:hover, + .franz-form__button.franz-form__button--inverted:hover, + .settings .settings__close:hover, + .theme__dark .franz-form__button:hover, + .theme__dark .franz-form__button.franz-form__button--inverted:hover, + .theme__dark .settings .settings__close:hover { + background: ${darkerColorStr}; + } + + .franz-form__button:active, + .theme__dark .franz-form__button:active { + background: ${darkerColorStr}; + } + + .theme__dark .franz-form__button.franz-form__button--inverted, + .franz-form__button.franz-form__button--inverted { + background: none; + border-color: ${accentColorStr}; + } + + .tab-item.is-active { + background: ${accentColor.lighten(0.35).hex()}; + } + `; + + return style; +} + +function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { + const width = Number(widthStr); + const iconSize = Number(iconSizeStr) - iconSizeBias; + + return vertical + ? ` + .tab-item { + width: ${width - 2}px !important; + height: ${width - 5 + iconSize}px !important; + min-height: unset; + } + .tab-item .tab-item__icon { + width: ${width / 2 + iconSize}px !important; + } + .sidebar__button { + font-size: ${width / 3}px !important; + } + ` + : ` + .sidebar { + width: ${width}px !important; + } + .tab-item { + width: ${width}px !important; + height: ${width - 5 + iconSize}px !important; + } + .tab-item .tab-item__icon { + width: ${width / 2 + iconSize}px !important; + } + .sidebar__button { + font-size: ${width / 3}px !important; + } + .todos__todos-panel--expanded { + width: calc(100% - ${300 + width}px) !important; + } + `; +} + +function generateShowDragAreaStyle(accentColor) { + return ` + .sidebar { + padding-top: 0px !important; + } + .window-draggable { + position: initial; + background-color: ${accentColor}; + } + #root { + /** Remove 22px from app height, otherwise the page will be too high */ + height: calc(100% - 22px); + } + `; +} + +function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { + if (!document.querySelector('#vertical-style')) { + const link = document.createElement('link'); + link.id = 'vertical-style'; + link.rel = 'stylesheet'; + link.type = 'text/css'; + link.href = './styles/vertical.css'; + + document.head.append(link); + } + const width = Number(widthStr); + const sidebarWidth = width - 4; + const verticalStyleOffset = 23; + + return ` + .sidebar { + height: ${sidebarWidth + verticalStyleOffset + 1}px !important; + ${ + alwaysShowWorkspaces + ? ` + width: calc(100% - 300px) !important; + ` + : '' + } + } + + .sidebar .sidebar__button { + width: ${width}px; + } + + .app .app__content { + padding-top: ${sidebarWidth + verticalStyleOffset + 1}px !important; + } + + .workspaces-drawer { + margin-top: -${sidebarWidth - verticalStyleOffset - 1}px !important; + } + + .todos__todos-panel--expanded { + width: calc(100% - 300px) !important; + } + `; +} + +function generateOpenWorkspaceStyle() { + return ` + .app .app__content { + width: 100%; + transform: translateX(0px); + } + .sidebar__button--workspaces { + display: none; + } + `; +} + +function generateStyle(settings) { + let style = ''; + + const { + accentColor, + serviceRibbonWidth, + iconSize, + showDragArea, + useVerticalStyle, + alwaysShowWorkspaces, + } = settings; + + if ( + accentColor.toLowerCase() !== DEFAULT_APP_SETTINGS.accentColor.toLowerCase() + ) { + style += generateAccentStyle(accentColor); + } + if ( + serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth || + iconSize !== DEFAULT_APP_SETTINGS.iconSize + ) { + style += generateServiceRibbonWidthStyle( + serviceRibbonWidth, + iconSize, + useVerticalStyle, + ); + } + if (showDragArea) { + style += generateShowDragAreaStyle(accentColor); + } + if (useVerticalStyle) { + style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); + } else if (document.querySelector('#vertical-style')) { + const link = document.querySelector('#vertical-style'); + if (link) { + link.remove(); + } + } + if (alwaysShowWorkspaces) { + style += generateOpenWorkspaceStyle(); + } + + return style; +} +function updateStyle(settings) { + const style = generateStyle(settings); + setAppearance(style); +} + +export default function initAppearance(stores) { + const { settings } = stores; + createStyleElement(); + + // Update style when settings change + reaction( + () => [ + settings.all.app.accentColor, + settings.all.app.serviceRibbonWidth, + settings.all.app.iconSize, + settings.all.app.showDragArea, + settings.all.app.useVerticalStyle, + settings.all.app.alwaysShowWorkspaces, + ], + () => { + updateStyle(settings.all.app); + }, + { fireImmediately: true }, + ); +} -- cgit v1.2.3-54-g00ecf