feat(app): add alternative theme on sidebar menu

riccardoperra · riccardoperra · commit 8ec0ee6b5c9c · 2022-05-25T00:04:15.000+02:00
diff --git a/apps/codeimage/src/components/Frame/FrameHandler.tsx b/apps/codeimage/src/components/Frame/FrameHandler.tsx
@@ -1,10 +1,6 @@
 import {focusedEditor$} from '@codeimage/store/editor';
 import {onCopyToClipboard} from '@codeimage/store/effects/onCopyToClipboard';
-import {
-  isAlternativeTheme$,
-  toggleAlternativeTheme,
-} from '@codeimage/store/terminal';
-import {Box, Button} from '@codeimage/ui';
+import {Box} from '@codeimage/ui';
 import {dispatch} from '@ngneat/effects';
 import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {WithRef} from 'solid-headless/dist/types/utils/dynamic-prop';
@@ -46,8 +42,6 @@ export function FrameHandler(
 
   const ratio = 0.1;
 
-  const isAlternative = from(isAlternativeTheme$);
-
   createEffect(
     on([handlerRef], ([frame]) => {
       if (modality === 'mobile') {
@@ -83,20 +77,6 @@ export function FrameHandler(
         }
         ref={setHandlerRef}
       >
-        <div class={styles.toolbar}>
-          <Button
-            variant={'solid'}
-            size={'xs'}
-            theme={'secondary'}
-            style={{height: 'auto'}}
-            onClick={() => toggleAlternativeTheme()}
-          >
-            {isAlternative()
-              ? 'Apply default theme'
-              : 'Apply alternative theme'}
-          </Button>
-        </div>
-
         <div
           class={styles.content}
           ref={createRef<'div'>(props, e => {
diff --git a/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx
@@ -1,14 +1,14 @@
 import {useI18n} from '@codeimage/locale';
 import {
   setAccentVisible,
-  setOpacity,
+  setAlternativeTheme,
   setShowGlassReflection,
   setShowHeader,
   setShowWatermark,
   setType,
   terminal$,
 } from '@codeimage/store/terminal';
-import {RangeField, SegmentedField} from '@codeimage/ui';
+import {SegmentedField} from '@codeimage/ui';
 import {ParentComponent, Show} from 'solid-js';
 import {fromObservableObject} from '../../core/hooks/from-observable-object';
 import {AppLocaleEntries} from '../../i18n';
@@ -24,6 +24,20 @@ export const WindowStyleForm: ParentComponent = () => {
     <>
       <PanelHeader label={t('frame.terminal')} />
 
+      <PanelRow for={'frameAlternativeField'} label={t('frame.backgroundType')}>
+        <TwoColumnPanelRow>
+          <SegmentedField
+            size={'xs'}
+            value={terminal.alternativeTheme}
+            onChange={setAlternativeTheme}
+            items={[
+              {label: 'Default', value: false},
+              {label: 'Alternative', value: true},
+            ]}
+          />
+        </TwoColumnPanelRow>
+      </PanelRow>
+
       <PanelRow for={'frameHeaderField'} label={t('frame.header')}>
         <TwoColumnPanelRow>
           <SegmentedField
@@ -50,7 +64,7 @@ export const WindowStyleForm: ParentComponent = () => {
         </PanelRow>
       </Show>
 
-      <Show when={terminal.showHeader}>
+      <Show when={terminal.showHeader && !terminal.alternativeTheme}>
         <PanelRow for={'frameTabAccentField'} label={t('frame.tabAccent')}>
           <TwoColumnPanelRow>
             <SegmentedField
@@ -93,16 +107,6 @@ export const WindowStyleForm: ParentComponent = () => {
           />
         </TwoColumnPanelRow>
       </PanelRow>
-
-      <PanelRow for={'frameOpacityField'} label={t('frame.opacity')}>
-        <TwoColumnPanelRow>
-          <RangeField
-            size={'xs'}
-            value={terminal.opacity}
-            onChange={setOpacity}
-          />
-        </TwoColumnPanelRow>
-      </PanelRow>
     </>
   );
 };
diff --git a/apps/codeimage/src/components/Terminal/dynamic/DynamicTerminal.tsx b/apps/codeimage/src/components/Terminal/dynamic/DynamicTerminal.tsx
@@ -2,7 +2,6 @@ import {Box, FadeInOutTransition} from '@codeimage/ui';
 import {createMemo, JSXElement, ParentComponent} from 'solid-js';
 import {Dynamic} from 'solid-js/web';
 import {omitProps} from 'solid-use';
-import {appEnvironment} from '../../../core/configuration';
 import {AVAILABLE_TERMINAL_THEMES} from '../../../core/configuration/terminal-themes';
 import {CodeImageLogo} from '../../Icons/CodeImageLogo';
 import * as styles from '../terminal.css';
@@ -20,7 +19,7 @@ export const DynamicTerminal: ParentComponent<DynamicTerminalProps> = (
   const terminal = createMemo(
     () =>
       terminalThemes.entries[
-        props.type as typeof appEnvironment['terminalThemes']['keys'][number]
+        props.type as typeof terminalThemes['keys'][number]
       ].component,
   );
 
diff --git a/apps/codeimage/src/components/Terminal/macOS/MacOsTerminal.tsx b/apps/codeimage/src/components/Terminal/macOS/MacOsTerminal.tsx
@@ -11,14 +11,14 @@ import * as styles from './MacOsTerminal.css';
 export const exportExclude = _exportExclude;
 
 export const MacOsTerminal: ParentComponent<BaseTerminalProps> = props => {
-  const hasAccent = () => props.accentVisible && props.opacity === 100;
+  const showTab = () => props.accentVisible && !props.alternativeTheme;
   return (
     <TerminalHost {...props} theme={styles.theme}>
       <Show when={props.showHeader}>
         <div
           class={baseStyles.header}
           data-theme-mode={props.darkMode ? 'dark' : 'light'}
-          data-accent-visible={hasAccent()}
+          data-accent-visible={showTab()}
         >
           <div class={styles.headerIconRow}>
             <div
@@ -44,7 +44,7 @@ export const MacOsTerminal: ParentComponent<BaseTerminalProps> = props => {
           <Show when={props.showTab}>
             <div
               use:exportExclude={!props.tabName?.length}
-              class={baseStyles.tab({accent: hasAccent()})}
+              class={baseStyles.tab({accent: showTab()})}
             >
               <Show when={props.tabIcon}>
                 {icon => <TabIcon content={icon} />}
diff --git a/apps/codeimage/src/components/Terminal/windows/WindowsTerminal.tsx b/apps/codeimage/src/components/Terminal/windows/WindowsTerminal.tsx
@@ -12,19 +12,22 @@ import {WindowsTerminalControls} from './WindowsTerminalControls';
 export const exportExclude = _exportExclude;
 
 export const WindowsTerminal: ParentComponent<BaseTerminalProps> = props => {
+  const showTab = () => !!props.accentVisible && !props.alternativeTheme;
   return (
     <TerminalHost {...props} theme={styles.theme}>
       <Show when={props.showHeader}>
         <div
           class={baseStyles.header}
           data-theme-mode={props.darkMode ? 'dark' : 'light'}
-          data-accent-visible={props.accentVisible}
+          data-accent-visible={showTab()}
         >
           <Show when={props.showTab}>
             <div
               use:exportExclude={!props.tabName?.length}
               class={clsx(
-                baseStyles.tab({accent: props.accentVisible}),
+                baseStyles.tab({
+                  accent: showTab(),
+                }),
                 sprinkles({marginLeft: 6}),
               )}
             >
diff --git a/apps/codeimage/src/components/TerminalControlField/TerminalControlField.tsx b/apps/codeimage/src/components/TerminalControlField/TerminalControlField.tsx
@@ -38,6 +38,8 @@ export function TerminalControlField(
                 readonlyTab={true}
                 showHeader={true}
                 showWatermark={false}
+                alternativeTheme={false}
+                opacity={100}
                 showGlassReflection={terminalState.showGlassReflection}
               />
             </Box>
diff --git a/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx b/apps/codeimage/src/components/ThemeSwitcher/ThemeSwitcher.tsx
@@ -106,6 +106,7 @@ export const ThemeSwitcher: ParentComponent<ThemeSwitcherVariant> = props => {
                   showWatermark={false}
                   showGlassReflection={terminal.showGlassReflection}
                   opacity={100}
+                  alternativeTheme={terminal.alternativeTheme}
                 >
                   <Text size={'sm'}>{`// Code here`}</Text>
                 </DynamicTerminal>
diff --git a/apps/codeimage/src/core/configuration.ts b/apps/codeimage/src/core/configuration.ts
@@ -20,9 +20,6 @@ export const [appEnvironment] = createConfiguration({
   locales: SUPPORTED_LOCALES,
   themes: SUPPORTED_THEMES,
   languages: [],
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  terminalThemes: {},
   editorPadding: [16, 32, 64, 128],
   fonts: SUPPORTED_FONTS,
   defaultState: {
@@ -44,5 +41,5 @@ export const [appEnvironment] = createConfiguration({
       theme: SUPPORTED_THEMES_DICTIONARY.vsCodeDarkTheme,
       font: SUPPORTED_FONTS_DICTIONARY['jetbrains-mono'],
     },
-  },
+  } as const,
 });
diff --git a/apps/codeimage/src/i18n/sidebar.ts b/apps/codeimage/src/i18n/sidebar.ts
@@ -17,6 +17,7 @@ export default {
       font: 'Font',
       fontWeight: 'Font weight',
       reflection: 'Reflection',
+      backgroundType: 'Background',
     },
   },
   it: {
@@ -37,6 +38,7 @@ export default {
       fontWeight: 'Peso carattere',
       reflection: 'Riflesso',
       watermark: 'Watermark',
+      backgroundType: 'Tipo background',
     },
   },
   de: {
@@ -57,6 +59,7 @@ export default {
       fontWeight: 'Schriftart',
       reflection: 'Reflex',
       watermark: 'Schriftstärke',
+      backgroundType: 'Background type',
     },
   },
 } as const;
diff --git a/apps/codeimage/src/state/effects/onTabNameChange.tsx b/apps/codeimage/src/state/effects/onTabNameChange.tsx
@@ -1,8 +1,8 @@
+import {SUPPORTED_LANGUAGES} from '@codeimage/config';
 import {editorLanguageId$, setLanguageId} from '@codeimage/store/editor';
 import {createAction, createEffect, ofType, props} from '@ngneat/effects';
 import {filterNil} from '@ngneat/elf';
 import {debounceTime, map, tap, withLatestFrom} from 'rxjs';
-import {appEnvironment} from '../../core/configuration';
 
 export const updateTabName = createAction(
   '[CodeImage] Update Tab Name',
@@ -19,7 +19,7 @@ export const onTabNameChange$ = createEffect(actions =>
       languageId,
     })),
     map(({tabName, languageId}) => {
-      const matches = appEnvironment.languages.filter(language => {
+      const matches = SUPPORTED_LANGUAGES.filter(language => {
         return language.icons.some(({matcher}) => matcher.test(tabName));
       });
 
diff --git a/apps/codeimage/src/state/terminal.ts b/apps/codeimage/src/state/terminal.ts
@@ -63,16 +63,13 @@ export const {
   setBackground,
   setShowGlassReflection,
   setOpacity,
+  setAlternativeTheme,
 } = elfAutoSettersFactory(store);
 
 export function toggleShowHeader() {
   store.update(setProp('showHeader', showHeader => !showHeader));
 }
 
-export function toggleAlternativeTheme() {
-  store.update(setProp('alternativeTheme', alternative => !alternative));
-}
-
 export function toggleWatermark() {
   store.update(setProp('showWatermark', showWatermark => !showWatermark));
 }
diff --git a/packages/config/src/lib/core/ConfigurationProvider.tsx b/packages/config/src/lib/core/ConfigurationProvider.tsx
@@ -1,15 +1,13 @@
 import {createContext, JSXElement, PropsWithChildren} from 'solid-js';
 import {AppStaticConfiguration} from '../types/configuration';
-import {TerminalDefinitionMap} from '../types/terminal-def';
 import {CustomTheme} from '@codeimage/theme';
 import {LanguageDefinition} from '../types/language-def';
 
 type BaseAppStaticConfiguration = AppStaticConfiguration<
   string,
   readonly CustomTheme[],
   readonly string[],
-  readonly LanguageDefinition[],
-  TerminalDefinitionMap<string[], unknown>
+  readonly LanguageDefinition[]
 >;
 
 export const StaticConfigurationContext =
diff --git a/packages/config/src/lib/core/createConfiguration.ts b/packages/config/src/lib/core/createConfiguration.ts
@@ -1,27 +1,20 @@
-import {Component, useContext} from 'solid-js';
-import {StaticConfigurationContext} from './ConfigurationProvider';
 import {CustomTheme} from '@codeimage/theme';
-import {TerminalDefinitionMap} from '../types/terminal-def';
+import {useContext} from 'solid-js';
 import {AppStaticConfiguration} from '../types/configuration';
 import {LanguageDefinition} from '../types/language-def';
+import {StaticConfigurationContext} from './ConfigurationProvider';
 
 export function createConfiguration<
   V extends string,
   Themes extends readonly CustomTheme[],
   Locales extends readonly string[],
   Languages extends readonly LanguageDefinition[],
-  TerminalThemes extends TerminalDefinitionMap<
-    readonly string[],
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Component<any>
-  >,
   Configuration extends AppStaticConfiguration<
     V,
     Themes,
     Locales,
-    Languages,
-    TerminalThemes
-  > = AppStaticConfiguration<V, Themes, Locales, Languages, TerminalThemes>,
+    Languages
+  > = AppStaticConfiguration<V, Themes, Locales, Languages>,
 >(configuration: Configuration): [Configuration, () => Configuration] {
   if (!configuration.version) {
     throw new Error('No version specified');
diff --git a/packages/config/src/lib/types/configuration.ts b/packages/config/src/lib/types/configuration.ts
@@ -1,17 +1,14 @@
 import {LanguageDefinition} from './language-def';
-import {TerminalDefinitionMap} from './terminal-def';
 import {CustomTheme} from '@codeimage/theme';
 
 export interface AppStaticConfiguration<
   V extends string,
   Themes extends readonly CustomTheme[],
   Locales extends readonly string[],
   Languages extends readonly LanguageDefinition[],
-  TerminalThemes extends TerminalDefinitionMap<readonly string[], unknown>,
 > {
   readonly version: V;
   readonly themes: Themes;
   readonly locales: Locales;
   readonly languages: Languages;
-  readonly terminalThemes: TerminalThemes;
 }
diff --git a/packages/theme/src/lib/themes/material-palenight/index.ts b/packages/theme/src/lib/themes/material-palenight/index.ts
@@ -7,7 +7,7 @@ export const materialPalenightTheme = createTheme({
   properties: {
     darkMode: true,
     label: 'Material Palenight',
-    previewBackground: '#1e222f',
+    previewBackground: 'linear-gradient(135deg, #54D2EF 0%, #2AA6DA 100%)',
     terminal: {
       main: '#24293B',
       text: palette.gray,

Original file line number	Diff line number	Diff line change
`@@ -106,6 +106,7 @@ export const ThemeSwitcher: ParentComponent<ThemeSwitcherVariant> = props => {`
`106`	`106`	`showWatermark={false}`
`107`	`107`	`showGlassReflection={terminal.showGlassReflection}`
`108`	`108`	`opacity={100}`
	`109`	`+ alternativeTheme={terminal.alternativeTheme}`
`109`	`110`	`>`
`110`	`111`	<Text size={'sm'}>{`// Code here`}</Text>
`111`	`112`	`</DynamicTerminal>`