From bf04ca1fb40eb393b3f80beab88c561cced2b572 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Sun, 10 Nov 2019 13:41:58 +0100 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=94=A8=20Switch=20Appearance=20to=20u?= =?UTF-8?q?se=20useOvermind?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Appearance/EditorTheme/elements.ts | 15 ++ .../Appearance/EditorTheme/index.tsx | 95 +++++++++++++ .../PreferencesModal/Appearance/elements.ts | 9 +- .../PreferencesModal/Appearance/index.tsx | 128 +++++------------- 4 files changed, 147 insertions(+), 100 deletions(-) create mode 100644 packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts create mode 100644 packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts new file mode 100644 index 00000000000..6f1bf6776d2 --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts @@ -0,0 +1,15 @@ +import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText'; +import styled from 'styled-components'; + +export const BigTitle = styled.h2` + font-weight: 600; + color: white; + font-size: 1rem; + padding-top: 1.5rem; + margin-bottom: 0.5rem; +`; + +export const PreferenceText = styled(PreferenceTextBase)` + font-family: 'Source Code Pro'; + font-size: 0.8rem; +`; diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx new file mode 100644 index 00000000000..3cbd939c055 --- /dev/null +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx @@ -0,0 +1,95 @@ +import themes from '@codesandbox/common/lib/themes'; +import React, { FunctionComponent } from 'react'; + +import { useOvermind } from 'app/overmind'; + +import { PaddedPreference, SubDescription, Rule } from '../../elements'; + +import { BigTitle, PreferenceText } from './elements'; + +export const EditorTheme: FunctionComponent = () => { + const { + actions: { + preferences: { settingChanged }, + }, + state: { + preferences: { settings }, + }, + } = useOvermind(); + + const bindValue = (name: string, setUndefined?: boolean) => ({ + setValue: value => settingChanged({ name, value }), + value: setUndefined ? settings[name] || undefined : settings[name], + }); + const themeNames = themes.map(({ name }) => name); + + return settings.experimentVSCode ? ( +
+ Editor Theme + + + You can select your editor theme by selecting File {'->'} Preferences{' '} + {'->'} Color Theme in the menu bar. + + + + + + Custom VSCode Theme + + + + After changing this setting you + {"'"} + ll have to reload the browser and select {'"'} + Custom + {'"'} as your color theme. + + + Developer: Generate Color Scheme From Current Settings' +4. Copy the contents and paste them here!`} + rows={7} + {...bindValue('manualCustomVSCodeTheme', true)} + /> +
+ ) : ( +
+ Editor Theme + + + + + This will be overwritten if you enter a custom theme. + + + + + + Custom VSCode Theme + + + Developer: Generate Color Scheme From Current Settings' +4. Copy the contents and paste them here!`} + rows={7} + {...bindValue('customVSCodeTheme', true)} + /> +
+ ); +}; diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts index 525a94aa0e1..333b25d3d47 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts @@ -1,9 +1,6 @@ +import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText'; import styled from 'styled-components'; -export const BigTitle = styled.h2` - font-weight: 600; - color: white; - font-size: 1rem; - padding-top: 1.5rem; - margin-bottom: 0.5rem; +export const PreferenceText = styled(PreferenceTextBase)` + margin-top: 1rem; `; diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx index 5755daf56e7..d8427c58ac1 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx @@ -1,40 +1,35 @@ -import { PreferenceText } from '@codesandbox/common/lib/components/Preference/PreferenceText'; -import themes from '@codesandbox/common/lib/themes'; +import React, { FunctionComponent } from 'react'; + import { useOvermind } from 'app/overmind'; -import React from 'react'; import { - PaddedPreference, - PreferenceContainer, - Rule, + Title, SubContainer, + PreferenceContainer, + PaddedPreference, SubDescription, - Title, + Rule, } from '../elements'; import VSCodePlaceholder from '../VSCodePlaceholder'; -import { BigTitle } from './elements'; -export const Appearance: React.FC = () => { +import { EditorTheme } from './EditorTheme'; +import { PreferenceText } from './elements'; + +export const Appearance: FunctionComponent = () => { const { - state: { - preferences: { settings }, - }, actions: { preferences: { settingChanged }, }, + state: { + preferences: { settings }, + }, } = useOvermind(); - const bindValue = (name: string, setUndefined?: boolean) => ({ - value: setUndefined ? settings[name] || undefined : settings[name], - setValue: value => - settingChanged({ - name, - value, - }), + const bindValue = (name: string) => ({ + setValue: value => settingChanged({ name, value }), + value: settings[name], }); - const fontOptions = ['Menlo', 'Dank Mono', 'Source Code Pro']; - const themeOptions = themes.map(t => t.name); return (
@@ -48,14 +43,17 @@ export const Appearance: React.FC = () => { type="number" {...bindValue('fontSize')} /> + + + We use{' '} { {' '} as default font, you can also use locally installed fonts + {!fontOptions.includes(settings.fontFamily) && ( )} + + + Whether we should enable{' '} { . + + + + + Hide all distracting elements, perfect for lessons and presentations. - {settings.experimentVSCode ? ( -
- Editor Theme - - You can select your editor theme by selecting File {'->'}{' '} - Preferences {'->'} Color Theme in the menu bar. - - - - - Custom VSCode Theme - - - - After changing this setting you - {"'"} - ll have to reload the browser and select {'"'} - Custom - {'"'} as your color theme. - - - Developer: Generate Color Scheme From Current Settings' -4. Copy the contents and paste them here!`} - {...bindValue('manualCustomVSCodeTheme', true)} - /> -
- ) : ( -
- Editor Theme - - - - This will be overwritten if you enter a custom theme. - - - - - Custom VSCode Theme - - - Developer: Generate Color Scheme From Current Settings' -4. Copy the contents and paste them here!`} - {...bindValue('customVSCodeTheme', true)} - /> -
- )} +
From 9abcd0e8b620dcdce5829b2d23c9993cb0676954 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 28 Nov 2019 19:19:59 +0100 Subject: [PATCH 2/3] Resolve discussions --- .../Appearance/EditorTheme/elements.ts | 1 + .../PreferencesModal/Appearance/EditorTheme/index.tsx | 3 +-- .../Modals/PreferencesModal/Appearance/index.tsx | 8 ++++---- .../components/Preference/PreferenceText/elements.ts | 11 +++++++++++ .../{PreferenceText.tsx => PreferenceText/index.tsx} | 8 +++----- 5 files changed, 20 insertions(+), 11 deletions(-) create mode 100644 packages/common/src/components/Preference/PreferenceText/elements.ts rename packages/common/src/components/Preference/{PreferenceText.tsx => PreferenceText/index.tsx} (89%) diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts index 6f1bf6776d2..a7c0552e67c 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/elements.ts @@ -12,4 +12,5 @@ export const BigTitle = styled.h2` export const PreferenceText = styled(PreferenceTextBase)` font-family: 'Source Code Pro'; font-size: 0.8rem; + width: 100%; `; diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx index 3cbd939c055..35eb240b384 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx @@ -3,8 +3,7 @@ import React, { FunctionComponent } from 'react'; import { useOvermind } from 'app/overmind'; -import { PaddedPreference, SubDescription, Rule } from '../../elements'; - +import { PaddedPreference, Rule, SubDescription } from '../../elements'; import { BigTitle, PreferenceText } from './elements'; export const EditorTheme: FunctionComponent = () => { diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx index d8427c58ac1..2f6053859af 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx @@ -3,12 +3,12 @@ import React, { FunctionComponent } from 'react'; import { useOvermind } from 'app/overmind'; import { - Title, - SubContainer, - PreferenceContainer, PaddedPreference, - SubDescription, + PreferenceContainer, Rule, + SubContainer, + SubDescription, + Title, } from '../elements'; import VSCodePlaceholder from '../VSCodePlaceholder'; diff --git a/packages/common/src/components/Preference/PreferenceText/elements.ts b/packages/common/src/components/Preference/PreferenceText/elements.ts new file mode 100644 index 00000000000..797125fe89a --- /dev/null +++ b/packages/common/src/components/Preference/PreferenceText/elements.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +import InputBase, { TextArea as TextAreaBase } from '../../Input'; + +export const Input = styled(InputBase)` + width: 9rem; +`; + +export const TextArea = styled(TextAreaBase)` + width: 9rem; +`; diff --git a/packages/common/src/components/Preference/PreferenceText.tsx b/packages/common/src/components/Preference/PreferenceText/index.tsx similarity index 89% rename from packages/common/src/components/Preference/PreferenceText.tsx rename to packages/common/src/components/Preference/PreferenceText/index.tsx index 66800ccece7..3b02d358899 100644 --- a/packages/common/src/components/Preference/PreferenceText.tsx +++ b/packages/common/src/components/Preference/PreferenceText/index.tsx @@ -5,7 +5,7 @@ import { FunctionComponent, } from 'react'; -import Input, { TextArea } from '../Input'; +import { Input, TextArea } from './elements'; type Props = { block?: boolean; @@ -15,7 +15,6 @@ type Props = { setValue: (value: string) => void; value: string; } & Pick, 'style'>; - export const PreferenceText: FunctionComponent = ({ isTextArea, placeholder, @@ -28,10 +27,9 @@ export const PreferenceText: FunctionComponent = ({ }; return createElement(isTextArea ? TextArea : Input, { - style: { width: '9rem' }, - value, - placeholder, onChange: handleChange, + placeholder, + value, ...props, }); }; From 095c9d9428917808c65a981eb6482165203ce591 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C3=ABl=20De=20Boey?= Date: Thu, 28 Nov 2019 19:22:10 +0100 Subject: [PATCH 3/3] settings.experimentVSCode is always true --- .../Appearance/EditorTheme/index.tsx | 39 +----- .../PreferencesModal/Appearance/elements.ts | 6 - .../PreferencesModal/Appearance/index.tsx | 130 ++---------------- 3 files changed, 14 insertions(+), 161 deletions(-) delete mode 100644 packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx index 35eb240b384..5bf22a7fab4 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/EditorTheme/index.tsx @@ -1,9 +1,8 @@ -import themes from '@codesandbox/common/lib/themes'; import React, { FunctionComponent } from 'react'; import { useOvermind } from 'app/overmind'; -import { PaddedPreference, Rule, SubDescription } from '../../elements'; +import { Rule, SubDescription } from '../../elements'; import { BigTitle, PreferenceText } from './elements'; export const EditorTheme: FunctionComponent = () => { @@ -20,9 +19,8 @@ export const EditorTheme: FunctionComponent = () => { setValue: value => settingChanged({ name, value }), value: setUndefined ? settings[name] || undefined : settings[name], }); - const themeNames = themes.map(({ name }) => name); - return settings.experimentVSCode ? ( + return (
Editor Theme @@ -57,38 +55,5 @@ export const EditorTheme: FunctionComponent = () => { {...bindValue('manualCustomVSCodeTheme', true)} />
- ) : ( -
- Editor Theme - - - - - This will be overwritten if you enter a custom theme. - - - - - - Custom VSCode Theme - - - Developer: Generate Color Scheme From Current Settings' -4. Copy the contents and paste them here!`} - rows={7} - {...bindValue('customVSCodeTheme', true)} - /> -
); }; diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts deleted file mode 100644 index 333b25d3d47..00000000000 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/elements.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { PreferenceText as PreferenceTextBase } from '@codesandbox/common/lib/components/Preference/PreferenceText'; -import styled from 'styled-components'; - -export const PreferenceText = styled(PreferenceTextBase)` - margin-top: 1rem; -`; diff --git a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx index 2f6053859af..99ef56a62e2 100644 --- a/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx +++ b/packages/app/src/app/pages/common/Modals/PreferencesModal/Appearance/index.tsx @@ -1,126 +1,20 @@ import React, { FunctionComponent } from 'react'; -import { useOvermind } from 'app/overmind'; - -import { - PaddedPreference, - PreferenceContainer, - Rule, - SubContainer, - SubDescription, - Title, -} from '../elements'; +import { PreferenceContainer, SubContainer, Title } from '../elements'; import VSCodePlaceholder from '../VSCodePlaceholder'; import { EditorTheme } from './EditorTheme'; -import { PreferenceText } from './elements'; - -export const Appearance: FunctionComponent = () => { - const { - actions: { - preferences: { settingChanged }, - }, - state: { - preferences: { settings }, - }, - } = useOvermind(); - - const bindValue = (name: string) => ({ - setValue: value => settingChanged({ name, value }), - value: settings[name], - }); - const fontOptions = ['Menlo', 'Dank Mono', 'Source Code Pro']; - - return ( -
- Appearance - - - - - - - - - - - - We use{' '} - - Dank Mono - {' '} - as default font, you can also use locally installed fonts - - - {!fontOptions.includes(settings.fontFamily) && ( - - )} - - - - - - - Whether we should enable{' '} - - font ligatures - - . - - - - - - - - +export const Appearance: FunctionComponent = () => ( +
+ Appearance - - Hide all distracting elements, perfect for lessons and - presentations. - - + + + - - - -
- ); -}; + + + +
+);