diff --git a/src/plugins/in-app-menu/renderer.tsx b/src/plugins/in-app-menu/renderer.tsx index 3fdb928a..4ff048bb 100644 --- a/src/plugins/in-app-menu/renderer.tsx +++ b/src/plugins/in-app-menu/renderer.tsx @@ -1,5 +1,6 @@ import { createSignal } from 'solid-js'; import { render } from 'solid-js/web'; +import { extractCss } from 'solid-styled-components'; import { TitleBar } from './renderer/TitleBar'; import { defaultInAppMenuConfig, InAppMenuConfig } from './constants'; diff --git a/src/plugins/in-app-menu/renderer/IconButton.tsx b/src/plugins/in-app-menu/renderer/IconButton.tsx index 2b29ba5f..05039122 100644 --- a/src/plugins/in-app-menu/renderer/IconButton.tsx +++ b/src/plugins/in-app-menu/renderer/IconButton.tsx @@ -1,7 +1,9 @@ import { JSX } from 'solid-js'; import { css } from 'solid-styled-components'; -const iconButton = css` +import { cache } from '@/providers/decorators'; + +const iconButton = cache(() => css` background: transparent; width: 24px; @@ -28,12 +30,12 @@ const iconButton = css` &:active { scale: 0.9; } -`; +`); type CollapseIconButtonProps = JSX.HTMLAttributes; export const IconButton = (props: CollapseIconButtonProps) => { return ( - ); diff --git a/src/plugins/in-app-menu/renderer/MenuButton.tsx b/src/plugins/in-app-menu/renderer/MenuButton.tsx index da17f848..0556edc0 100644 --- a/src/plugins/in-app-menu/renderer/MenuButton.tsx +++ b/src/plugins/in-app-menu/renderer/MenuButton.tsx @@ -1,7 +1,8 @@ import { JSX, splitProps } from 'solid-js'; import { css } from 'solid-styled-components'; +import { cache } from '@/providers/decorators'; -const menuStyle = css` +const menuStyle = cache(() => css` -webkit-app-region: none; display: flex; @@ -25,7 +26,7 @@ const menuStyle = css` &[data-selected="true"] { background-color: rgba(255, 255, 255, 0.2); } -`; +`); export type MenuButtonProps = JSX.HTMLAttributes & { text?: string; @@ -35,7 +36,7 @@ export const MenuButton = (props: MenuButtonProps) => { const [local, leftProps] = splitProps(props, ['text']); return ( -
  • +
  • {local.text}
    • ); diff --git a/src/plugins/in-app-menu/renderer/Panel.tsx b/src/plugins/in-app-menu/renderer/Panel.tsx index 6701a0d1..32dd8931 100644 --- a/src/plugins/in-app-menu/renderer/Panel.tsx +++ b/src/plugins/in-app-menu/renderer/Panel.tsx @@ -4,8 +4,9 @@ import { css } from 'solid-styled-components'; import { Transition } from 'solid-transition-group'; import { autoUpdate, flip, offset, OffsetOptions, size } from '@floating-ui/dom'; import { useFloating } from 'solid-floating-ui'; +import { cache } from '@/providers/decorators'; -const panelStyle = css` +const panelStyle = cache(() => css` position: fixed; top: var(--offset-y, 0); left: var(--offset-x, 0); @@ -32,9 +33,9 @@ const panelStyle = css` 0 2px 8px rgba(0, 0, 0, 0.2); transform-origin: var(--origin-x, 50%) var(--origin-y, 50%); -`; +`); -const animationStyle = { +const animationStyle = cache(() => ({ enter: css` opacity: 0; transform: scale(0.9); @@ -49,7 +50,7 @@ const animationStyle = { exitActive: css` transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0); `, -}; +})); export type Placement = 'top' @@ -122,16 +123,16 @@ export const Panel = (props: PanelProps) => {
      css` + position: relative; - -webkit-app-region: none; - min-height: 32px; - height: 32px; + -webkit-app-region: none; + min-height: 32px; + height: 32px; - display: grid; - grid-template-columns: 32px 1fr auto minmax(32px, auto); - justify-content: flex-start; - align-items: center; + display: grid; + grid-template-columns: 32px 1fr auto minmax(32px, auto); + justify-content: flex-start; + align-items: center; - border-radius: 4px; - cursor: pointer; - box-sizing: border-box; - user-select: none; - -webkit-user-drag: none; + border-radius: 4px; + cursor: pointer; + box-sizing: border-box; + user-select: none; + -webkit-user-drag: none; - transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); + transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); - &:hover { - background-color: rgba(255, 255, 255, 0.1); - } + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } - &:active { - background-color: rgba(255, 255, 255, 0.2); - } - - &[data-selected="true"] { - background-color: rgba(255, 255, 255, 0.2); - } - - & * { - box-sizing: border-box; - } -`; - -const itemIconStyle = css` - height: 32px; - padding: 4px; - color: white; -`; - -const itemLabelStyle = css` - font-size: 12px; - color: white; -`; - -const itemChipStyle = css` - display: flex; - justify-content: center; - align-items: center; - - min-width: 16px; - height: 16px; - padding: 0 4px; - margin-left: 8px; - - border-radius: 4px; + &:active { background-color: rgba(255, 255, 255, 0.2); - color: #f1f1f1; - font-size: 10px; - font-weight: 500; - line-height: 1; -`; + } -const toolTipStyle = css` - min-width: 32px; - width: 100%; - height: 100%; + &[data-selected="true"] { + background-color: rgba(255, 255, 255, 0.2); + } - padding: 4px; + & * { + box-sizing: border-box; + } +`); - max-width: calc(var(--max-width, 100%) - 8px); - max-height: calc(var(--max-height, 100%) - 8px); +const itemIconStyle = cache(() => css` + height: 32px; + padding: 4px; + color: white; +`); - border-radius: 4px; - background-color: rgba(25, 25, 25, 0.8); - color: #f1f1f1; - font-size: 10px; -`; +const itemLabelStyle = cache(() => css` + font-size: 12px; + color: white; +`); -const popupStyle = css` - position: fixed; - top: var(--offset-y, 0); - left: var(--offset-x, 0); +const itemChipStyle = cache(() => css` + display: flex; + justify-content: center; + align-items: center; - max-width: var(--max-width, 100%); - max-height: var(--max-height, 100%); + min-width: 16px; + height: 16px; + padding: 0 4px; + margin-left: 8px; - z-index: 100000000; - pointer-events: none; + border-radius: 4px; + background-color: rgba(255, 255, 255, 0.2); + color: #f1f1f1; + font-size: 10px; + font-weight: 500; + line-height: 1; +`); -`; -const animationStyle = { +const toolTipStyle = cache(() => css` + min-width: 32px; + width: 100%; + height: 100%; + + padding: 4px; + + max-width: calc(var(--max-width, 100%) - 8px); + max-height: calc(var(--max-height, 100%) - 8px); + + border-radius: 4px; + background-color: rgba(25, 25, 25, 0.8); + color: #f1f1f1; + font-size: 10px; +`); + +const popupStyle = cache(() => css` + position: fixed; + top: var(--offset-y, 0); + left: var(--offset-x, 0); + + max-width: var(--max-width, 100%); + max-height: var(--max-height, 100%); + + z-index: 100000000; + pointer-events: none; + +`); + +const animationStyle = cache(() => ({ enter: css` - opacity: 0; - transform: scale(0.9); + opacity: 0; + transform: scale(0.9); `, enterActive: css` - transition: opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1), transform 0.225s cubic-bezier(0.33, 1, 0.68, 1); + transition: opacity 0.225s cubic-bezier(0.33, 1, 0.68, 1), transform 0.225s cubic-bezier(0.33, 1, 0.68, 1); `, exitTo: css` - opacity: 0; - transform: scale(0.9); + opacity: 0; + transform: scale(0.9); `, exitActive: css` - transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0); + transition: opacity 0.225s cubic-bezier(0.32, 0, 0.67, 0), transform 0.225s cubic-bezier(0.32, 0, 0.67, 0); `, -}; +})); const getParents = (element: Element | null): (HTMLElement | null)[] => { const parents: (HTMLElement | null)[] = []; @@ -211,7 +213,7 @@ export const PanelItem = (props: PanelItemProps) => { const closestLevel = parents.find((it) => it?.dataset?.level)?.dataset.level ?? ''; const path = event.composedPath(); - const isOtherItem = path.some((it) => it instanceof HTMLElement && it.classList.contains(itemStyle)); + const isOtherItem = path.some((it) => it instanceof HTMLElement && it.classList.contains(itemStyle())); const isChild = closestLevel.startsWith(props.level.join('/')); if (isOtherItem && !isChild) { @@ -246,14 +248,14 @@ export const PanelItem = (props: PanelItemProps) => { return (
    • - }> + }> - @@ -261,28 +263,30 @@ export const PanelItem = (props: PanelItemProps) => { - + - + - + {props.name} }> - + {props.chip} - @@ -304,7 +308,7 @@ export const PanelItem = (props: PanelItemProps) => {
      { > -
      +
      {props.toolTip}
      diff --git a/src/plugins/in-app-menu/renderer/TitleBar.tsx b/src/plugins/in-app-menu/renderer/TitleBar.tsx index 58a8db58..27605855 100644 --- a/src/plugins/in-app-menu/renderer/TitleBar.tsx +++ b/src/plugins/in-app-menu/renderer/TitleBar.tsx @@ -11,8 +11,9 @@ import { WindowController } from './WindowController'; import type { RendererContext } from '@/types/contexts'; import type { InAppMenuConfig } from '../constants'; +import { cache } from '@/providers/decorators'; -const titleStyle = css` +const titleStyle = cache(() => css` -webkit-app-region: drag; box-sizing: border-box; @@ -41,17 +42,17 @@ const titleStyle = css` &[data-macos="true"] { padding: 4px 4px 4px 74px; } -`; +`); -const separatorStyle = css` +const separatorStyle = cache(() => css` min-height: 1px; height: 1px; margin: 4px 0; background-color: rgba(255, 255, 255, 0.2); -`; +`); -const animationStyle = { +const animationStyle = cache(() => ({ enter: css` opacity: 0; transform: translateX(-50%) scale(0.8); @@ -76,7 +77,7 @@ const animationStyle = { fake: css` transition: all 0.00000000001s; `, -}; +})); export type PanelRendererProps = { items: Electron.Menu['items']; @@ -140,7 +141,7 @@ const PanelRenderer = (props: PanelRendererProps) => { /> -
      +
      @@ -251,7 +252,7 @@ export const TitleBar = (props: TitleBarProps) => { }); return ( -