diff options
author | niu tech <jerzyglowacki@gmail.com> | 2021-11-12 23:52:58 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-13 04:22:58 +0530 |
commit | ad17ec5ccad3ceffd383f228d4529438b5a3b9a6 (patch) | |
tree | f8cb939e8a1ae8d24126d37dfcd7e4b00c85eba0 /src | |
parent | New Crowdin updates (#2219) (diff) | |
download | ferdium-app-ad17ec5ccad3ceffd383f228d4529438b5a3b9a6.tar.gz ferdium-app-ad17ec5ccad3ceffd383f228d4529438b5a3b9a6.tar.zst ferdium-app-ad17ec5ccad3ceffd383f228d4529438b5a3b9a6.zip |
Adjust number of columns for Split Mode (#2208)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 18 | ||||
-rw-r--r-- | src/config.ts | 4 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.js | 11 | ||||
-rw-r--r-- | src/features/workspaces/store.js | 4 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 1 | ||||
-rw-r--r-- | src/i18n/locales/pl.json | 3 | ||||
-rw-r--r-- | src/stores.types.ts | 1 | ||||
-rw-r--r-- | src/stores/ServicesStore.js | 7 | ||||
-rw-r--r-- | src/stores/UIStore.js | 28 | ||||
-rw-r--r-- | src/styles/services.scss | 38 |
10 files changed, 92 insertions, 23 deletions
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index 9e8fb3cf5..589bb4538 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -17,6 +17,8 @@ import { | |||
17 | DEFAULT_APP_SETTINGS, | 17 | DEFAULT_APP_SETTINGS, |
18 | FRANZ_TRANSLATION, | 18 | FRANZ_TRANSLATION, |
19 | GITHUB_FRANZ_URL, | 19 | GITHUB_FRANZ_URL, |
20 | SPLIT_COLUMNS_MAX, | ||
21 | SPLIT_COLUMNS_MIN, | ||
20 | } from '../../../config'; | 22 | } from '../../../config'; |
21 | import { isMac, isWindows, lockFerdiShortcutKey } from '../../../environment'; | 23 | import { isMac, isWindows, lockFerdiShortcutKey } from '../../../environment'; |
22 | import { | 24 | import { |
@@ -178,6 +180,10 @@ const messages = defineMessages({ | |||
178 | defaultMessage: | 180 | defaultMessage: |
179 | 'Official translations are English & German. All other languages are community based translations.', | 181 | 'Official translations are English & German. All other languages are community based translations.', |
180 | }, | 182 | }, |
183 | numberOfColumns: { | ||
184 | id: 'settings.app.form.splitColumns', | ||
185 | defaultMessage: 'Number of columns', | ||
186 | }, | ||
181 | }); | 187 | }); |
182 | 188 | ||
183 | const Hr = () => <hr style={{ marginBottom: 20 }} />; | 189 | const Hr = () => <hr style={{ marginBottom: 20 }} />; |
@@ -200,6 +206,7 @@ class EditSettingsForm extends Component { | |||
200 | automaticUpdates: PropTypes.bool.isRequired, | 206 | automaticUpdates: PropTypes.bool.isRequired, |
201 | isDarkmodeEnabled: PropTypes.bool.isRequired, | 207 | isDarkmodeEnabled: PropTypes.bool.isRequired, |
202 | isAdaptableDarkModeEnabled: PropTypes.bool.isRequired, | 208 | isAdaptableDarkModeEnabled: PropTypes.bool.isRequired, |
209 | isSplitModeEnabled: PropTypes.bool.isRequired, | ||
203 | isNightlyEnabled: PropTypes.bool.isRequired, | 210 | isNightlyEnabled: PropTypes.bool.isRequired, |
204 | hasAddedTodosAsService: PropTypes.bool.isRequired, | 211 | hasAddedTodosAsService: PropTypes.bool.isRequired, |
205 | isOnline: PropTypes.bool.isRequired, | 212 | isOnline: PropTypes.bool.isRequired, |
@@ -246,6 +253,7 @@ class EditSettingsForm extends Component { | |||
246 | getCacheSize, | 253 | getCacheSize, |
247 | automaticUpdates, | 254 | automaticUpdates, |
248 | isDarkmodeEnabled, | 255 | isDarkmodeEnabled, |
256 | isSplitModeEnabled, | ||
249 | isTodosActivated, | 257 | isTodosActivated, |
250 | isNightlyEnabled, | 258 | isNightlyEnabled, |
251 | hasAddedTodosAsService, | 259 | hasAddedTodosAsService, |
@@ -538,6 +546,16 @@ class EditSettingsForm extends Component { | |||
538 | <Hr /> | 546 | <Hr /> |
539 | 547 | ||
540 | <Toggle field={form.$('splitMode')} /> | 548 | <Toggle field={form.$('splitMode')} /> |
549 | {isSplitModeEnabled && ( | ||
550 | <Input | ||
551 | type="number" | ||
552 | min={SPLIT_COLUMNS_MIN} | ||
553 | max={SPLIT_COLUMNS_MAX} | ||
554 | placeholder={intl.formatMessage(messages.numberOfColumns)} | ||
555 | onChange={e => this.submit(e)} | ||
556 | field={form.$('splitColumns')} | ||
557 | /> | ||
558 | )} | ||
541 | 559 | ||
542 | <Hr /> | 560 | <Hr /> |
543 | 561 | ||
diff --git a/src/config.ts b/src/config.ts index fb073c062..f8659970c 100644 --- a/src/config.ts +++ b/src/config.ts | |||
@@ -172,6 +172,9 @@ export const CUSTOM_WEBSITE_RECIPE_ID = 'franz-custom-website'; | |||
172 | 172 | ||
173 | export const DEFAULT_SERVICE_ORDER = 99; // something high enough that it gets added to the end of the already-added services on the left sidebar | 173 | export const DEFAULT_SERVICE_ORDER = 99; // something high enough that it gets added to the end of the already-added services on the left sidebar |
174 | 174 | ||
175 | export const SPLIT_COLUMNS_MIN = 1; | ||
176 | export const SPLIT_COLUMNS_MAX = 5; | ||
177 | |||
175 | export const DEFAULT_APP_SETTINGS = { | 178 | export const DEFAULT_APP_SETTINGS = { |
176 | autoLaunchOnStart: false, | 179 | autoLaunchOnStart: false, |
177 | autoLaunchInBackground: false, | 180 | autoLaunchInBackground: false, |
@@ -193,6 +196,7 @@ export const DEFAULT_APP_SETTINGS = { | |||
193 | spellcheckerLanguage: 'en-us', | 196 | spellcheckerLanguage: 'en-us', |
194 | darkMode: false, | 197 | darkMode: false, |
195 | splitMode: false, | 198 | splitMode: false, |
199 | splitColumns: 3, | ||
196 | fallbackLocale: 'en-US', | 200 | fallbackLocale: 'en-US', |
197 | beta: false, | 201 | beta: false, |
198 | isAppMuted: false, | 202 | isAppMuted: false, |
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js index 64f5b2e01..c34a41039 100644 --- a/src/containers/settings/EditSettingsScreen.js +++ b/src/containers/settings/EditSettingsScreen.js | |||
@@ -169,6 +169,10 @@ const messages = defineMessages({ | |||
169 | id: 'settings.app.form.splitMode', | 169 | id: 'settings.app.form.splitMode', |
170 | defaultMessage: 'Enable Split View Mode', | 170 | defaultMessage: 'Enable Split View Mode', |
171 | }, | 171 | }, |
172 | splitColumns: { | ||
173 | id: 'settings.app.form.splitColumns', | ||
174 | defaultMessage: 'Number of columns', | ||
175 | }, | ||
172 | serviceRibbonWidth: { | 176 | serviceRibbonWidth: { |
173 | id: 'settings.app.form.serviceRibbonWidth', | 177 | id: 'settings.app.form.serviceRibbonWidth', |
174 | defaultMessage: 'Sidebar width', | 178 | defaultMessage: 'Sidebar width', |
@@ -310,6 +314,7 @@ class EditSettingsScreen extends Component { | |||
310 | adaptableDarkMode: Boolean(settingsData.adaptableDarkMode), | 314 | adaptableDarkMode: Boolean(settingsData.adaptableDarkMode), |
311 | universalDarkMode: Boolean(settingsData.universalDarkMode), | 315 | universalDarkMode: Boolean(settingsData.universalDarkMode), |
312 | splitMode: Boolean(settingsData.splitMode), | 316 | splitMode: Boolean(settingsData.splitMode), |
317 | splitColumns: Number(settingsData.splitColumns), | ||
313 | serviceRibbonWidth: Number(settingsData.serviceRibbonWidth), | 318 | serviceRibbonWidth: Number(settingsData.serviceRibbonWidth), |
314 | iconSize: Number(settingsData.iconSize), | 319 | iconSize: Number(settingsData.iconSize), |
315 | enableLongPressServiceHint: Boolean( | 320 | enableLongPressServiceHint: Boolean( |
@@ -613,6 +618,11 @@ class EditSettingsScreen extends Component { | |||
613 | value: settings.all.app.splitMode, | 618 | value: settings.all.app.splitMode, |
614 | default: DEFAULT_APP_SETTINGS.splitMode, | 619 | default: DEFAULT_APP_SETTINGS.splitMode, |
615 | }, | 620 | }, |
621 | splitColumns: { | ||
622 | label: intl.formatMessage(messages.splitColumns), | ||
623 | value: settings.all.app.splitColumns, | ||
624 | default: DEFAULT_APP_SETTINGS.splitColumns, | ||
625 | }, | ||
616 | serviceRibbonWidth: { | 626 | serviceRibbonWidth: { |
617 | label: intl.formatMessage(messages.serviceRibbonWidth), | 627 | label: intl.formatMessage(messages.serviceRibbonWidth), |
618 | value: settings.all.app.serviceRibbonWidth, | 628 | value: settings.all.app.serviceRibbonWidth, |
@@ -725,6 +735,7 @@ class EditSettingsScreen extends Component { | |||
725 | isAdaptableDarkModeEnabled={ | 735 | isAdaptableDarkModeEnabled={ |
726 | this.props.stores.settings.app.adaptableDarkMode | 736 | this.props.stores.settings.app.adaptableDarkMode |
727 | } | 737 | } |
738 | isSplitModeEnabled={this.props.stores.settings.app.splitMode} | ||
728 | isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser} | 739 | isTodosActivated={this.props.stores.todos.isFeatureEnabledByUser} |
729 | isUsingCustomTodoService={ | 740 | isUsingCustomTodoService={ |
730 | this.props.stores.todos.isUsingCustomTodoService | 741 | this.props.stores.todos.isUsingCustomTodoService |
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js index 17ec17b3a..d6b790bd3 100644 --- a/src/features/workspaces/store.js +++ b/src/features/workspaces/store.js | |||
@@ -199,7 +199,7 @@ export default class WorkspacesStore extends FeatureStore { | |||
199 | : 'none'; | 199 | : 'none'; |
200 | } | 200 | } |
201 | } | 201 | } |
202 | }, 1000); | 202 | }, 500); |
203 | }; | 203 | }; |
204 | 204 | ||
205 | @action _deactivateActiveWorkspace = () => { | 205 | @action _deactivateActiveWorkspace = () => { |
@@ -221,7 +221,7 @@ export default class WorkspacesStore extends FeatureStore { | |||
221 | wrapper.style.display = ''; | 221 | wrapper.style.display = ''; |
222 | } | 222 | } |
223 | } | 223 | } |
224 | }, 1000); | 224 | }, 500); |
225 | }; | 225 | }; |
226 | 226 | ||
227 | @action _toggleWorkspaceDrawer = () => { | 227 | @action _toggleWorkspaceDrawer = () => { |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 2544d2a00..41263b12b 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -242,6 +242,7 @@ | |||
242 | "settings.app.form.showDragArea": "Show draggable area on window", | 242 | "settings.app.form.showDragArea": "Show draggable area on window", |
243 | "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled", | 243 | "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled", |
244 | "settings.app.form.showServiceName": "Display service name under the icon", | 244 | "settings.app.form.showServiceName": "Display service name under the icon", |
245 | "settings.app.form.splitColumns": "Number of columns", | ||
245 | "settings.app.form.splitMode": "Enable Split View Mode", | 246 | "settings.app.form.splitMode": "Enable Split View Mode", |
246 | "settings.app.form.startMinimized": "Start minimized", | 247 | "settings.app.form.startMinimized": "Start minimized", |
247 | "settings.app.form.universalDarkMode": "Enable universal Dark Mode", | 248 | "settings.app.form.universalDarkMode": "Enable universal Dark Mode", |
diff --git a/src/i18n/locales/pl.json b/src/i18n/locales/pl.json index 0accdac07..be9f7ee7a 100644 --- a/src/i18n/locales/pl.json +++ b/src/i18n/locales/pl.json | |||
@@ -242,7 +242,8 @@ | |||
242 | "settings.app.form.showDragArea": "Show draggable area on window", | 242 | "settings.app.form.showDragArea": "Show draggable area on window", |
243 | "settings.app.form.showMessagesBadgesWhenMuted": "Pokaż licznik nieprzeczytanych wiadomości gdy powiadomienia są wyłączone", | 243 | "settings.app.form.showMessagesBadgesWhenMuted": "Pokaż licznik nieprzeczytanych wiadomości gdy powiadomienia są wyłączone", |
244 | "settings.app.form.showServiceName": "Display service name under the icon", | 244 | "settings.app.form.showServiceName": "Display service name under the icon", |
245 | "settings.app.form.splitMode": "Enable Split View Mode", | 245 | "settings.app.form.splitColumns": "Liczba kolumn", |
246 | "settings.app.form.splitMode": "Włącz tryb podzielony", | ||
246 | "settings.app.form.startMinimized": "Uruchom zminimalizowany", | 247 | "settings.app.form.startMinimized": "Uruchom zminimalizowany", |
247 | "settings.app.form.universalDarkMode": "Włącz uniwersalny tryb ciemny", | 248 | "settings.app.form.universalDarkMode": "Włącz uniwersalny tryb ciemny", |
248 | "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi", | 249 | "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi", |
diff --git a/src/stores.types.ts b/src/stores.types.ts index c63cdd4b8..34922c199 100644 --- a/src/stores.types.ts +++ b/src/stores.types.ts | |||
@@ -276,6 +276,7 @@ interface UIStore { | |||
276 | actionStatus: () => void; | 276 | actionStatus: () => void; |
277 | isDarkThemeActive: () => void; | 277 | isDarkThemeActive: () => void; |
278 | isSplitModeActive: () => void; | 278 | isSplitModeActive: () => void; |
279 | splitColumnsNo: () => void; | ||
279 | showMessageBadgesEvenWhenMuted: () => void; | 280 | showMessageBadgesEvenWhenMuted: () => void; |
280 | theme: () => void; | 281 | theme: () => void; |
281 | } | 282 | } |
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js index 926ee36f0..a34390d88 100644 --- a/src/stores/ServicesStore.js +++ b/src/stores/ServicesStore.js | |||
@@ -171,6 +171,13 @@ export default class ServicesStore extends Store { | |||
171 | ); | 171 | ); |
172 | 172 | ||
173 | reaction( | 173 | reaction( |
174 | () => this.stores.settings.app.splitColumns, | ||
175 | () => { | ||
176 | this._shareSettingsWithServiceProcess(); | ||
177 | }, | ||
178 | ); | ||
179 | |||
180 | reaction( | ||
174 | () => this.stores.settings.app.searchEngine, | 181 | () => this.stores.settings.app.searchEngine, |
175 | () => { | 182 | () => { |
176 | this._shareSettingsWithServiceProcess(); | 183 | this._shareSettingsWithServiceProcess(); |
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js index 779f89b9f..9c194aa91 100644 --- a/src/stores/UIStore.js +++ b/src/stores/UIStore.js | |||
@@ -54,6 +54,13 @@ export default class UIStore extends Store { | |||
54 | }, | 54 | }, |
55 | { fireImmediately: true }, | 55 | { fireImmediately: true }, |
56 | ); | 56 | ); |
57 | reaction( | ||
58 | () => this.splitColumnsNo, | ||
59 | () => { | ||
60 | this._setupColumnsInDOM(); | ||
61 | }, | ||
62 | { fireImmediately: true }, | ||
63 | ); | ||
57 | } | 64 | } |
58 | 65 | ||
59 | @computed get showMessageBadgesEvenWhenMuted() { | 66 | @computed get showMessageBadgesEvenWhenMuted() { |
@@ -84,6 +91,10 @@ export default class UIStore extends Store { | |||
84 | return this.stores.settings.app.splitMode; | 91 | return this.stores.settings.app.splitMode; |
85 | } | 92 | } |
86 | 93 | ||
94 | @computed get splitColumnsNo() { | ||
95 | return this.stores.settings.app.splitColumns; | ||
96 | } | ||
97 | |||
87 | @computed get theme() { | 98 | @computed get theme() { |
88 | const themeId = | 99 | const themeId = |
89 | this.isDarkThemeActive || this.stores.settings.app.darkMode | 100 | this.isDarkThemeActive || this.stores.settings.app.darkMode |
@@ -113,22 +124,23 @@ export default class UIStore extends Store { | |||
113 | 124 | ||
114 | // Reactions | 125 | // Reactions |
115 | _setupThemeInDOM() { | 126 | _setupThemeInDOM() { |
116 | const body = document.querySelector('body'); | ||
117 | |||
118 | if (!this.isDarkThemeActive) { | 127 | if (!this.isDarkThemeActive) { |
119 | body?.classList.remove('theme__dark'); | 128 | document.body.classList.remove('theme__dark'); |
120 | } else { | 129 | } else { |
121 | body?.classList.add('theme__dark'); | 130 | document.body.classList.add('theme__dark'); |
122 | } | 131 | } |
123 | } | 132 | } |
124 | 133 | ||
125 | _setupModeInDOM() { | 134 | _setupModeInDOM() { |
126 | const body = document.querySelector('body'); | ||
127 | |||
128 | if (!this.isSplitModeActive) { | 135 | if (!this.isSplitModeActive) { |
129 | body?.classList.remove('mode__split'); | 136 | document.body.classList.remove('mode__split'); |
130 | } else { | 137 | } else { |
131 | body?.classList.add('mode__split'); | 138 | document.body.classList.add('mode__split'); |
139 | document.body.dataset.columns = this.splitColumnsNo; | ||
132 | } | 140 | } |
133 | } | 141 | } |
142 | |||
143 | _setupColumnsInDOM() { | ||
144 | document.body.dataset.columns = this.splitColumnsNo; | ||
145 | } | ||
134 | } | 146 | } |
diff --git a/src/styles/services.scss b/src/styles/services.scss index dd053e93d..cedfcbdd1 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -18,21 +18,35 @@ | |||
18 | } | 18 | } |
19 | } | 19 | } |
20 | 20 | ||
21 | .mode__split .services { | 21 | .mode__split { |
22 | display: flex; | 22 | .services { |
23 | overflow: visible; | 23 | display: flex; |
24 | 24 | overflow: visible; | |
25 | .services__webview { | ||
26 | position: relative; | ||
27 | flex: 1 0 50%; | ||
28 | 25 | ||
29 | @media (min-width: 1280px) { | 26 | .services__webview { |
30 | flex-basis: 33.33%; | 27 | position: relative; |
28 | flex: 1 0 33.33%; | ||
31 | } | 29 | } |
30 | } | ||
32 | 31 | ||
33 | @media (min-width: 2048px) { | 32 | &[data-columns="1"] .services .services__webview { |
34 | flex-basis: 25%; | 33 | flex-basis: 100%; |
35 | } | 34 | } |
35 | |||
36 | &[data-columns="2"] .services .services__webview { | ||
37 | flex-basis: 50%; | ||
38 | } | ||
39 | |||
40 | &[data-columns="3"] .services .services__webview { | ||
41 | flex-basis: 33.33%; | ||
42 | } | ||
43 | |||
44 | &[data-columns="4"] .services .services__webview { | ||
45 | flex-basis: 25%; | ||
46 | } | ||
47 | |||
48 | &[data-columns="5"] .services .services__webview { | ||
49 | flex-basis: 20%; | ||
36 | } | 50 | } |
37 | } | 51 | } |
38 | 52 | ||