Skip to content

Commit a9c31fa

Browse files
riccardoperrariccardoperra
committed
feat(app): add support for editor custom opacity
1 parent f336be4 commit a9c31fa

21 files changed

Lines changed: 147 additions & 56 deletions

‎apps/codeimage/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@
6363
"@ngneat/elf": "^2.0.0",
6464
"@ngneat/elf-devtools": "^1.2.1",
6565
"@ngneat/elf-persist-state": "^1.1.1",
66-
"@solid-primitives/resize-observer": "^1.1.0",
6766
"@solid-primitives/i18n": "^1.1.0",
67+
"@solid-primitives/resize-observer": "^1.1.0",
6868
"@vanilla-extract/css": "^1.7.0",
6969
"@vanilla-extract/dynamic": "^2.0.2",
7070
"@vanilla-extract/recipes": "^0.2.4",
@@ -77,6 +77,7 @@
7777
"html-to-image": "^1.9.0",
7878
"inter-ui": "^3.19.3",
7979
"modern-normalize": "^1.1.0",
80+
"polished": "4.2.2",
8081
"rxjs": "^7.5.5",
8182
"solid-app-router": "^0.3.3",
8283
"solid-codemirror": "^1.0.3",

‎apps/codeimage/src/App.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export function App() {
8989
showGlassReflection={terminal.showGlassReflection}
9090
tabIcon={tabIcon()?.content}
9191
showWatermark={terminal.showWatermark}
92+
opacity={terminal.opacity}
9293
>
9394
<CustomEditor />
9495
</DynamicTerminal>

‎apps/codeimage/src/components/CustomEditor/CustomEditor.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import {EDITOR_BASE_SETUP} from '@codeimage/config';
1+
import {
2+
EDITOR_BASE_SETUP,
3+
SUPPORTED_LANGUAGES,
4+
SUPPORTED_THEMES,
5+
} from '@codeimage/config';
26
import {editor$, setFocus} from '@codeimage/store/editor';
37
import {EditorView, lineNumbers} from '@codemirror/view';
48
import {debounceTime, ReplaySubject, takeUntil} from 'rxjs';
@@ -10,17 +14,18 @@ import {
1014
createResource,
1115
onCleanup,
1216
} from 'solid-js';
13-
import {appEnvironment} from '../../core/configuration';
17+
import {SUPPORTED_FONTS} from '../../core/configuration/font';
1418
import {fromObservableObject} from '../../core/hooks/from-observable-object';
1519
import {focusedEditor$, setCode} from '../../state/editor';
1620
import {createCustomFontExtension} from './custom-font-extension';
1721
import {observeFocusExtension} from './observe-focus-extension';
1822

1923
export const CustomEditor = () => {
2024
let editorEl!: HTMLDivElement;
21-
2225
const destroy$ = new ReplaySubject<void>(1);
23-
const {languages, themes, fonts} = appEnvironment;
26+
const themes = SUPPORTED_THEMES;
27+
const languages = SUPPORTED_LANGUAGES;
28+
const fonts = SUPPORTED_FONTS;
2429
const editor = fromObservableObject(editor$);
2530

2631
const selectedLanguage = createMemo(() =>

‎apps/codeimage/src/components/Frame/Frame.css.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import {backgroundColorVar, themeVars} from '@codeimage/ui';
22
import {createTheme, style} from '@vanilla-extract/css';
3+
import {darkGrayScale} from '../../theme/dark-theme.css';
34

45
export const [frameHandler, frameHandlerVars] = createTheme({
56
scale: '1',
@@ -183,3 +184,37 @@ export const watermark = style({
183184
right: '32px',
184185
bottom: '24px',
185186
});
187+
188+
export const presets = style({
189+
display: 'inline-flex',
190+
width: 'auto',
191+
alignItems: 'center',
192+
paddingLeft: themeVars.spacing['2'],
193+
paddingRight: themeVars.spacing['2'],
194+
height: '42px',
195+
backgroundColor: darkGrayScale.gray3,
196+
borderRadius: themeVars.borderRadius.lg,
197+
boxShadow: themeVars.boxShadow.lg,
198+
columnGap: themeVars.spacing['2'],
199+
});
200+
201+
export const presetsContainer = style({
202+
height: '28px',
203+
width: 'auto',
204+
borderRadius: themeVars.borderRadius.lg,
205+
display: 'flex',
206+
alignItems: 'center',
207+
backgroundColor: darkGrayScale.gray5,
208+
columnGap: '8px',
209+
color: darkGrayScale.gray11,
210+
paddingRight: themeVars.spacing['4'],
211+
});
212+
213+
export const presetsBox = style({
214+
display: 'block',
215+
height: '28px',
216+
width: '28px',
217+
borderRadius: themeVars.borderRadius.lg,
218+
background: backgroundColorVar,
219+
marginRight: themeVars.spacing['1'],
220+
});

‎apps/codeimage/src/components/PropertyEditor/EditorSidebar.css.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,3 +82,8 @@ export const titleWrapper = style([
8282
},
8383
},
8484
]);
85+
86+
export const panelDivider = style({
87+
borderBottom: `1px solid ${themeVars.dynamicColors.divider}`,
88+
paddingTop: themeVars.spacing['4'],
89+
});

‎apps/codeimage/src/components/PropertyEditor/EditorSidebar.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
1+
import {CodeImageLogo} from '../Icons/CodeImageLogo';
2+
import * as styles from '../Scaffold/Sidebar/Sidebar.css';
13
import {EditorForm} from './EditorForm';
2-
import {WindowStyleForm} from './WindowStyleForm';
3-
import {FrameStyleForm} from './FrameStyleForm';
44
import {EditorStyleForm} from './EditorStyleForm';
5-
import * as styles from '../Scaffold/Sidebar/Sidebar.css';
6-
import {CodeImageLogo} from '../Icons/CodeImageLogo';
5+
import {FrameStyleForm} from './FrameStyleForm';
6+
import {PanelDivider} from './PanelDivider';
7+
import {WindowStyleForm} from './WindowStyleForm';
78

89
export const EditorSidebar = () => {
910
return (
@@ -12,8 +13,10 @@ export const EditorSidebar = () => {
1213
<CodeImageLogo width={'70%'} />
1314
</div>
1415
<FrameStyleForm />
16+
<PanelDivider />
1517

1618
<WindowStyleForm />
19+
<PanelDivider />
1720

1821
<EditorStyleForm />
1922
</EditorForm>

‎apps/codeimage/src/components/PropertyEditor/EditorStyleForm.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import {SUPPORTED_LANGUAGES} from '@codeimage/config';
12
import {useI18n} from '@codeimage/locale';
23
import {
34
editor$,
@@ -10,15 +11,16 @@ import {
1011
import {SegmentedField, Select, Text} from '@codeimage/ui';
1112
import {map} from 'rxjs';
1213
import {from, ParentComponent} from 'solid-js';
13-
import {appEnvironment} from '../../core/configuration';
14+
import {SUPPORTED_FONTS} from '../../core/configuration/font';
1415
import {fromObservableObject} from '../../core/hooks/from-observable-object';
1516
import {useModality} from '../../core/hooks/isMobile';
1617
import {AppLocaleEntries} from '../../i18n';
1718
import {PanelHeader} from './PanelHeader';
1819
import {PanelRow, TwoColumnPanelRow} from './PanelRow';
1920

2021
export const EditorStyleForm: ParentComponent = () => {
21-
const {languages, fonts} = appEnvironment;
22+
const languages = SUPPORTED_LANGUAGES;
23+
const fonts = SUPPORTED_FONTS;
2224
const editor = fromObservableObject(editor$);
2325
const modality = useModality();
2426
const [t] = useI18n<AppLocaleEntries>();

‎apps/codeimage/src/components/PropertyEditor/PanelDivider.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {VoidComponent} from 'solid-js';
2+
import * as styles from './EditorSidebar.css';
3+
4+
export const PanelDivider: VoidComponent = () => {
5+
return <div class={styles.panelDivider} />;
6+
};

‎apps/codeimage/src/components/PropertyEditor/WindowStyleForm.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import {useI18n} from '@codeimage/locale';
22
import {
33
setAccentVisible,
4+
setOpacity,
45
setShowGlassReflection,
56
setShowHeader,
67
setShowWatermark,
78
setType,
89
terminal$,
910
} from '@codeimage/store/terminal';
10-
import {SegmentedField} from '@codeimage/ui';
11+
import {RangeField, SegmentedField} from '@codeimage/ui';
1112
import {ParentComponent, Show} from 'solid-js';
1213
import {fromObservableObject} from '../../core/hooks/from-observable-object';
1314
import {AppLocaleEntries} from '../../i18n';
@@ -92,6 +93,16 @@ export const WindowStyleForm: ParentComponent = () => {
9293
/>
9394
</TwoColumnPanelRow>
9495
</PanelRow>
96+
97+
<PanelRow for={'frameOpacityField'} label={t('frame.opacity')}>
98+
<TwoColumnPanelRow>
99+
<RangeField
100+
size={'xs'}
101+
value={terminal.opacity}
102+
onChange={setOpacity}
103+
/>
104+
</TwoColumnPanelRow>
105+
</PanelRow>
95106
</>
96107
);
97108
};

‎apps/codeimage/src/components/Terminal/TabName.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import {SUPPORTED_LANGUAGES} from '@codeimage/config';
12
import {Box, useFloating} from '@codeimage/ui';
23
import createResizeObserver from '@solid-primitives/resize-observer';
34
import {createMemo, createSignal, For, JSXElement, onMount} from 'solid-js';
4-
import {appEnvironment} from '../../core/configuration';
55
import {highlight as _highlight} from '../../core/directives/highlight';
66
import '../../ui/Combobox/InlineCombobox';
77
import {InlineCombobox} from '../../ui/Combobox/InlineCombobox';
@@ -28,7 +28,7 @@ export function TabName(props: TabNameProps): JSXElement {
2828
}
2929
}
3030

31-
const icons = appEnvironment.languages.flatMap(language => language.icons);
31+
const icons = SUPPORTED_LANGUAGES.flatMap(language => language.icons);
3232

3333
const extension = createMemo(() => {
3434
if (!props.value) return '';

0 commit comments

Comments
 (0)