Merge pull request #262 from riccardoperra/opacity_editor

feat(app): add alternative theme
riccardoperra · May 24, 2022 · fdbc439 · fdbc439
2 parents 7d8cec9 + f12b7ee
commit fdbc439
Show file tree

Hide file tree

Showing 30 changed files with 190 additions and 88 deletions.
diff --git a/.changeset/plenty-ties-camp.md b/.changeset/plenty-ties-camp.md
@@ -0,0 +1,7 @@
+---
+'@codeimage/app': minor
+'@codeimage/config': minor
+'@codeimage/theme': minor
+---
+
+feat: add editor background type
diff --git a/apps/codeimage/package.json b/apps/codeimage/package.json
@@ -63,8 +63,8 @@
     "@ngneat/elf": "^2.0.0",
     "@ngneat/elf-devtools": "^1.2.1",
     "@ngneat/elf-persist-state": "^1.1.1",
-    "@solid-primitives/resize-observer": "^1.1.0",
     "@solid-primitives/i18n": "^1.1.0",
+    "@solid-primitives/resize-observer": "^1.1.0",
     "@vanilla-extract/css": "^1.7.0",
     "@vanilla-extract/dynamic": "^2.0.2",
     "@vanilla-extract/recipes": "^0.2.4",
@@ -77,6 +77,7 @@
     "html-to-image": "^1.9.0",
     "inter-ui": "^3.19.3",
     "modern-normalize": "^1.1.0",
+    "polished": "4.2.2",
     "rxjs": "^7.5.5",
     "solid-app-router": "^0.3.3",
     "solid-codemirror": "^1.0.3",

diff --git a/apps/codeimage/src/App.tsx b/apps/codeimage/src/App.tsx
@@ -89,6 +89,8 @@ export function App() {
               showGlassReflection={terminal.showGlassReflection}
               tabIcon={tabIcon()?.content}
               showWatermark={terminal.showWatermark}
+              opacity={terminal.opacity}
+              alternativeTheme={terminal.alternativeTheme}
             >
               <CustomEditor />
             </DynamicTerminal>

diff --git a/apps/codeimage/src/components/CustomEditor/CustomEditor.tsx b/apps/codeimage/src/components/CustomEditor/CustomEditor.tsx
@@ -1,4 +1,8 @@
-import {EDITOR_BASE_SETUP} from '@codeimage/config';
+import {
+  EDITOR_BASE_SETUP,
+  SUPPORTED_LANGUAGES,
+  SUPPORTED_THEMES,
+} from '@codeimage/config';
 import {editor$, setFocus} from '@codeimage/store/editor';
 import {EditorView, lineNumbers} from '@codemirror/view';
 import {debounceTime, ReplaySubject, takeUntil} from 'rxjs';
@@ -10,17 +14,18 @@ import {
   createResource,
   onCleanup,
 } from 'solid-js';
-import {appEnvironment} from '../../core/configuration';
+import {SUPPORTED_FONTS} from '../../core/configuration/font';
 import {fromObservableObject} from '../../core/hooks/from-observable-object';
 import {focusedEditor$, setCode} from '../../state/editor';
 import {createCustomFontExtension} from './custom-font-extension';
 import {observeFocusExtension} from './observe-focus-extension';
 
 export const CustomEditor = () => {
   let editorEl!: HTMLDivElement;
-
   const destroy$ = new ReplaySubject<void>(1);
-  const {languages, themes, fonts} = appEnvironment;
+  const themes = SUPPORTED_THEMES;
+  const languages = SUPPORTED_LANGUAGES;
+  const fonts = SUPPORTED_FONTS;
   const editor = fromObservableObject(editor$);
 
   const selectedLanguage = createMemo(() =>

diff --git a/apps/codeimage/src/components/Footer/Footer.tsx b/apps/codeimage/src/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
-import * as styles from './Footer.css';
 import {Box, Link} from '@codeimage/ui';
 import {appEnvironment} from '../../core/configuration';
+import * as styles from './Footer.css';
 
 export const Footer = () => {
   const {version} = appEnvironment;
@@ -20,17 +20,17 @@ export const Footer = () => {
             href={'https://github.com/riccardoperra/codeimage/issues'}
             size="xs"
           >
-            Report issue
+            Issue & Feedback
           </Link>
         </Box>
 
         <Box marginRight={5}>
           <Link
             as={'a'}
-            href={'https://github.com/riccardoperra/codeimage/discussions'}
+            href={'https://github.com/riccardoperra/codeimage/releases'}
             size="xs"
           >
-            Feedback
+            Changelog
           </Link>
         </Box>
 

diff --git a/apps/codeimage/src/components/Frame/Frame.css.ts b/apps/codeimage/src/components/Frame/Frame.css.ts
@@ -1,5 +1,6 @@
 import {backgroundColorVar, themeVars} from '@codeimage/ui';
 import {createTheme, style} from '@vanilla-extract/css';
+import {darkGrayScale} from '../../theme/dark-theme.css';
 
 export const [frameHandler, frameHandlerVars] = createTheme({
   scale: '1',
@@ -45,7 +46,7 @@ export const handler = style([
 export const content = style({
   width: '100%',
   height: '100%',
-  marginTop: '20px',
+  marginTop: '10px',
   marginBottom: '40px',
   position: 'relative',
 });
@@ -183,3 +184,23 @@ export const watermark = style({
   right: '32px',
   bottom: '24px',
 });
+
+export const presets = style({
+  display: 'inline-flex',
+  width: 'auto',
+  alignItems: 'center',
+  paddingLeft: themeVars.spacing['2'],
+  paddingRight: themeVars.spacing['2'],
+  height: '42px',
+  backgroundColor: darkGrayScale.gray3,
+  borderRadius: themeVars.borderRadius.lg,
+  boxShadow: themeVars.boxShadow.lg,
+  columnGap: themeVars.spacing['2'],
+});
+
+export const toolbar = style({
+  height: '28px',
+  width: 'auto',
+  display: 'flex',
+  justifyContent: 'flex-end',
+});
diff --git a/apps/codeimage/src/components/PropertyEditor/EditorSidebar.css.ts b/apps/codeimage/src/components/PropertyEditor/EditorSidebar.css.ts
@@ -82,3 +82,8 @@ export const titleWrapper = style([
     },
   },
 ]);
+
+export const panelDivider = style({
+  borderBottom: `1px solid ${themeVars.dynamicColors.divider}`,
+  paddingTop: themeVars.spacing['4'],
+});
diff --git a/apps/codeimage/src/components/PropertyEditor/EditorSidebar.tsx b/apps/codeimage/src/components/PropertyEditor/EditorSidebar.tsx
@@ -1,9 +1,10 @@
+import {CodeImageLogo} from '../Icons/CodeImageLogo';
+import * as styles from '../Scaffold/Sidebar/Sidebar.css';
 import {EditorForm} from './EditorForm';
-import {WindowStyleForm} from './WindowStyleForm';
-import {FrameStyleForm} from './FrameStyleForm';
 import {EditorStyleForm} from './EditorStyleForm';
-import * as styles from '../Scaffold/Sidebar/Sidebar.css';
-import {CodeImageLogo} from '../Icons/CodeImageLogo';
+import {FrameStyleForm} from './FrameStyleForm';
+import {PanelDivider} from './PanelDivider';
+import {WindowStyleForm} from './WindowStyleForm';
 
 export const EditorSidebar = () => {
   return (
@@ -12,8 +13,10 @@ export const EditorSidebar = () => {
         <CodeImageLogo width={'70%'} />
       </div>
       <FrameStyleForm />
+      <PanelDivider />
 
       <WindowStyleForm />
+      <PanelDivider />
 
       <EditorStyleForm />
     </EditorForm>

diff --git a/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx
@@ -1,3 +1,4 @@
+import {SUPPORTED_LANGUAGES} from '@codeimage/config';
 import {useI18n} from '@codeimage/locale';
 import {
   editor$,
@@ -10,15 +11,16 @@ import {
 import {SegmentedField, Select, Text} from '@codeimage/ui';
 import {map} from 'rxjs';
 import {from, ParentComponent} from 'solid-js';
-import {appEnvironment} from '../../core/configuration';
+import {SUPPORTED_FONTS} from '../../core/configuration/font';
 import {fromObservableObject} from '../../core/hooks/from-observable-object';
 import {useModality} from '../../core/hooks/isMobile';
 import {AppLocaleEntries} from '../../i18n';
 import {PanelHeader} from './PanelHeader';
 import {PanelRow, TwoColumnPanelRow} from './PanelRow';
 
 export const EditorStyleForm: ParentComponent = () => {
-  const {languages, fonts} = appEnvironment;
+  const languages = SUPPORTED_LANGUAGES;
+  const fonts = SUPPORTED_FONTS;
   const editor = fromObservableObject(editor$);
   const modality = useModality();
   const [t] = useI18n<AppLocaleEntries>();

diff --git a/apps/codeimage/src/components/PropertyEditor/PanelDivider.tsx b/apps/codeimage/src/components/PropertyEditor/PanelDivider.tsx
@@ -0,0 +1,6 @@
+import {VoidComponent} from 'solid-js';
+import * as styles from './EditorSidebar.css';
+
+export const PanelDivider: VoidComponent = () => {
+  return <div class={styles.panelDivider} />;
+};
diff --git a/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx b/apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx
@@ -1,6 +1,7 @@
 import {useI18n} from '@codeimage/locale';
 import {
   setAccentVisible,
+  setAlternativeTheme,
   setShowGlassReflection,
   setShowHeader,
   setShowWatermark,
@@ -23,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
@@ -49,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

diff --git a/apps/codeimage/src/components/Terminal/TabName.tsx b/apps/codeimage/src/components/Terminal/TabName.tsx
@@ -1,7 +1,7 @@
+import {SUPPORTED_LANGUAGES} from '@codeimage/config';
 import {Box, useFloating} from '@codeimage/ui';
 import createResizeObserver from '@solid-primitives/resize-observer';
 import {createMemo, createSignal, For, JSXElement, onMount} from 'solid-js';
-import {appEnvironment} from '../../core/configuration';
 import {highlight as _highlight} from '../../core/directives/highlight';
 import '../../ui/Combobox/InlineCombobox';
 import {InlineCombobox} from '../../ui/Combobox/InlineCombobox';
@@ -28,7 +28,7 @@ export function TabName(props: TabNameProps): JSXElement {
     }
   }
 
-  const icons = appEnvironment.languages.flatMap(language => language.icons);
+  const icons = SUPPORTED_LANGUAGES.flatMap(language => language.icons);
 
   const extension = createMemo(() => {
     if (!props.value) return '';

diff --git a/apps/codeimage/src/components/Terminal/TerminalHost.tsx b/apps/codeimage/src/components/Terminal/TerminalHost.tsx
@@ -22,12 +22,23 @@ export interface TerminalHostProps extends BaseTerminalProps {
 }
 
 export const TerminalHost: FlowComponent<TerminalHostProps> = props => {
+  const background = () => {
+    if (props.alternativeTheme) {
+      return `rgba(${styles.terminalVars.headerColor}, .70)`;
+    }
+    const opacity = (props.opacity ?? 100) / 100;
+    if (props.opacity !== 100) {
+      return `rgba(0,0,0, ${opacity})`;
+    }
+    return props.background;
+  };
+
   return (
     <div
       class={clsx(styles.wrapper, props.theme)}
       data-theme-mode={props.darkMode ? 'dark' : 'light'}
       style={assignInlineVars({
-        [styles.terminalVars.backgroundColor]: props.background,
+        [styles.terminalVars.backgroundColor]: background(),
         [styles.terminalVars.textColor]: props.textColor,
         [styles.terminalVars.boxShadow]: props.shadow ?? themeVars.boxShadow.lg,
       })}

diff --git a/apps/codeimage/src/components/Terminal/dynamic/DynamicTerminal.tsx b/apps/codeimage/src/components/Terminal/dynamic/DynamicTerminal.tsx
@@ -2,7 +2,7 @@ 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';
 import {BaseTerminalProps} from '../TerminalHost';
@@ -14,12 +14,12 @@ interface DynamicTerminalProps extends BaseTerminalProps {
 export const DynamicTerminal: ParentComponent<DynamicTerminalProps> = (
   props,
 ): JSXElement => {
-  const {terminalThemes} = appEnvironment;
+  const terminalThemes = AVAILABLE_TERMINAL_THEMES;
 
   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,13 +11,14 @@ import * as styles from './MacOsTerminal.css';
 export const exportExclude = _exportExclude;
 
 export const MacOsTerminal: 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()}
         >
           <div class={styles.headerIconRow}>
             <div
@@ -43,7 +44,7 @@ export const MacOsTerminal: ParentComponent<BaseTerminalProps> = props => {
           <Show when={props.showTab}>
             <div
               use:exportExclude={!props.tabName?.length}
-              class={baseStyles.tab({accent: props.accentVisible})}
+              class={baseStyles.tab({accent: showTab()})}
             >
               <Show when={props.tabIcon}>
                 {icon => <TabIcon content={icon} />}

diff --git a/apps/codeimage/src/components/Terminal/terminal.css.ts b/apps/codeimage/src/components/Terminal/terminal.css.ts
@@ -4,11 +4,13 @@ import {recipe} from '@vanilla-extract/recipes';
 
 export const [terminalTheme, terminalVars] = createTheme({
   headerHeight: '50px',
+  radius: '12px',
   headerBackgroundColor: themeVars.backgroundColor.white,
   backgroundColor: themeVars.backgroundColor.white,
   textColor: themeVars.backgroundColor.gray['800'],
   boxShadow: themeVars.boxShadow.lg,
   tabDelta: '10px',
+  headerColor: '0, 0, 0',
 });
 
 export const wrapper = style([
@@ -18,9 +20,21 @@ export const wrapper = style([
     backgroundColor: terminalVars.backgroundColor,
     color: terminalVars.textColor,
     overflow: 'hidden',
-    borderRadius: '12px',
+    borderRadius: terminalVars.radius,
     boxShadow: terminalVars.boxShadow,
-    transition: 'box-shadow .2s',
+    transition: 'box-shadow .2s, border-radius .2s',
+    selectors: {
+      '&[data-theme-mode=light]': {
+        vars: {
+          [terminalVars.headerColor]: `255, 255, 255`,
+        },
+      },
+      '&[data-theme-mode=dark] &': {
+        vars: {
+          [terminalVars.headerColor]: `0, 0, 0`,
+        },
+      },
+    },
   },
 ]);
 

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}),
               )}
             >