diff options
author | Bennett <hello@vantezzen.io> | 2020-10-11 20:16:18 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-10-11 19:16:18 +0100 |
commit | 3eb55287d9df74dae7e8196487e7038fec04d4ce (patch) | |
tree | b58ec428c018102b49ee719532a3c27e140d2a78 | |
parent | Improve Ferdi's design (#977) (diff) | |
download | ferdium-app-3eb55287d9df74dae7e8196487e7038fec04d4ce.tar.gz ferdium-app-3eb55287d9df74dae7e8196487e7038fec04d4ce.tar.zst ferdium-app-3eb55287d9df74dae7e8196487e7038fec04d4ce.zip |
Add vertical style and "Always show workspace drawer" setting (#567)
-rw-r--r-- | gulpfile.babel.js | 34 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 5 | ||||
-rw-r--r-- | src/config.js | 2 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.js | 20 | ||||
-rw-r--r-- | src/features/appearance/index.js | 113 | ||||
-rw-r--r-- | src/i18n/locales/defaultMessages.json | 66 | ||||
-rw-r--r-- | src/i18n/locales/en-US.json | 2 | ||||
-rw-r--r-- | src/i18n/locales/whitelist_en-US.json | 3 | ||||
-rw-r--r-- | src/i18n/messages/src/containers/settings/EditSettingsScreen.json | 66 | ||||
-rw-r--r-- | src/lib/Menu.js | 24 | ||||
-rw-r--r-- | src/styles/vertical.scss | 62 |
11 files changed, 309 insertions, 88 deletions
diff --git a/gulpfile.babel.js b/gulpfile.babel.js index bf3b85083..d3d6a931d 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js | |||
@@ -58,6 +58,10 @@ const paths = { | |||
58 | dest: 'build/styles', | 58 | dest: 'build/styles', |
59 | watch: 'src/styles/**/*.scss', | 59 | watch: 'src/styles/**/*.scss', |
60 | }, | 60 | }, |
61 | verticalStyle: { | ||
62 | src: 'src/styles/vertical.scss', | ||
63 | dest: 'build/styles', | ||
64 | }, | ||
61 | scripts: { | 65 | scripts: { |
62 | src: 'src/**/*.js', | 66 | src: 'src/**/*.js', |
63 | dest: 'build/', | 67 | dest: 'build/', |
@@ -164,6 +168,33 @@ export function styles() { | |||
164 | .pipe(gulp.dest(paths.styles.dest)); | 168 | .pipe(gulp.dest(paths.styles.dest)); |
165 | } | 169 | } |
166 | 170 | ||
171 | export function verticalStyle() { | ||
172 | return gulp | ||
173 | .src(paths.verticalStyle.src) | ||
174 | .pipe( | ||
175 | sassVariables( | ||
176 | Object.assign( | ||
177 | { | ||
178 | $env: | ||
179 | process.env.NODE_ENV === 'development' | ||
180 | ? 'development' | ||
181 | : 'production', | ||
182 | }, | ||
183 | ...styleConfig, | ||
184 | ), | ||
185 | ), | ||
186 | ) | ||
187 | .pipe( | ||
188 | sass({ | ||
189 | includePaths: ['./node_modules', '../node_modules'], | ||
190 | }).on('error', sass.logError), | ||
191 | ) | ||
192 | .pipe((gulpIf(process.env.NODE_ENV !== 'development', csso({ // Only minify in production to speed up dev builds | ||
193 | restructure: false, // Don't restructure CSS, otherwise it will break the styles | ||
194 | })))) | ||
195 | .pipe(gulp.dest(paths.verticalStyle.dest)); | ||
196 | } | ||
197 | |||
167 | export function scripts() { | 198 | export function scripts() { |
168 | return gulp | 199 | return gulp |
169 | .src(paths.scripts.src, { since: gulp.lastRun(scripts) }) | 200 | .src(paths.scripts.src, { since: gulp.lastRun(scripts) }) |
@@ -179,6 +210,7 @@ export function scripts() { | |||
179 | export function watch() { | 210 | export function watch() { |
180 | gulp.watch(paths.packages.watch, mvLernaPackages); | 211 | gulp.watch(paths.packages.watch, mvLernaPackages); |
181 | gulp.watch(paths.styles.watch, styles); | 212 | gulp.watch(paths.styles.watch, styles); |
213 | gulp.watch(paths.verticalStyle.src, verticalStyle); | ||
182 | 214 | ||
183 | gulp.watch([paths.src, `${paths.scripts.src}`, `${paths.styles.src}`], mvSrc); | 215 | gulp.watch([paths.src, `${paths.scripts.src}`, `${paths.styles.src}`], mvSrc); |
184 | 216 | ||
@@ -205,7 +237,7 @@ export function recipeInfo() { | |||
205 | const build = gulp.series( | 237 | const build = gulp.series( |
206 | clean, | 238 | clean, |
207 | gulp.parallel(mvSrc, mvPackageJson, mvLernaPackages), | 239 | gulp.parallel(mvSrc, mvPackageJson, mvLernaPackages), |
208 | gulp.parallel(html, scripts, styles, recipes, recipeInfo), | 240 | gulp.parallel(html, scripts, styles, verticalStyle, recipes, recipeInfo), |
209 | ); | 241 | ); |
210 | export { build }; | 242 | export { build }; |
211 | 243 | ||
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index b6698b8e2..b1e9a878d 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js | |||
@@ -497,6 +497,11 @@ export default @observer class EditSettingsForm extends Component { | |||
497 | 497 | ||
498 | <Select field={form.$('serviceRibbonWidth')} /> | 498 | <Select field={form.$('serviceRibbonWidth')} /> |
499 | 499 | ||
500 | <Toggle field={form.$('useVerticalStyle')} /> | ||
501 | |||
502 | <Toggle field={form.$('alwaysShowWorkspaces')} /> | ||
503 | |||
504 | <Hr /> | ||
500 | <Select field={form.$('iconSize')} /> | 505 | <Select field={form.$('iconSize')} /> |
501 | 506 | ||
502 | <Hr /> | 507 | <Hr /> |
diff --git a/src/config.js b/src/config.js index c610534f6..8a46d8083 100644 --- a/src/config.js +++ b/src/config.js | |||
@@ -132,6 +132,8 @@ export const DEFAULT_APP_SETTINGS = { | |||
132 | sentry: false, | 132 | sentry: false, |
133 | nightly: false, | 133 | nightly: false, |
134 | navigationBarBehaviour: 'custom', | 134 | navigationBarBehaviour: 'custom', |
135 | useVerticalStyle: false, | ||
136 | alwaysShowWorkspaces: false, | ||
135 | }; | 137 | }; |
136 | 138 | ||
137 | export const DEFAULT_FEATURES_CONFIG = { | 139 | export const DEFAULT_FEATURES_CONFIG = { |
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js index aa50bac68..7078546f9 100644 --- a/src/containers/settings/EditSettingsScreen.js +++ b/src/containers/settings/EditSettingsScreen.js | |||
@@ -139,6 +139,14 @@ const messages = defineMessages({ | |||
139 | id: 'settings.app.form.iconSize', | 139 | id: 'settings.app.form.iconSize', |
140 | defaultMessage: '!!!Service icon size', | 140 | defaultMessage: '!!!Service icon size', |
141 | }, | 141 | }, |
142 | useVerticalStyle: { | ||
143 | id: 'settings.app.form.useVerticalStyle', | ||
144 | defaultMessage: '!!!Use vertical style', | ||
145 | }, | ||
146 | alwaysShowWorkspaces: { | ||
147 | id: 'settings.app.form.alwaysShowWorkspaces', | ||
148 | defaultMessage: '!!!Always show workspace drawer', | ||
149 | }, | ||
142 | accentColor: { | 150 | accentColor: { |
143 | id: 'settings.app.form.accentColor', | 151 | id: 'settings.app.form.accentColor', |
144 | defaultMessage: '!!!Accent color', | 152 | defaultMessage: '!!!Accent color', |
@@ -243,6 +251,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e | |||
243 | universalDarkMode: settingsData.universalDarkMode, | 251 | universalDarkMode: settingsData.universalDarkMode, |
244 | serviceRibbonWidth: settingsData.serviceRibbonWidth, | 252 | serviceRibbonWidth: settingsData.serviceRibbonWidth, |
245 | iconSize: settingsData.iconSize, | 253 | iconSize: settingsData.iconSize, |
254 | useVerticalStyle: settingsData.useVerticalStyle, | ||
255 | alwaysShowWorkspaces: settingsData.alwaysShowWorkspaces, | ||
246 | accentColor: settingsData.accentColor, | 256 | accentColor: settingsData.accentColor, |
247 | showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted, | 257 | showMessageBadgeWhenMuted: settingsData.showMessageBadgeWhenMuted, |
248 | showDragArea: settingsData.showDragArea, | 258 | showDragArea: settingsData.showDragArea, |
@@ -494,6 +504,16 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e | |||
494 | default: DEFAULT_APP_SETTINGS.iconSize, | 504 | default: DEFAULT_APP_SETTINGS.iconSize, |
495 | options: iconSizes, | 505 | options: iconSizes, |
496 | }, | 506 | }, |
507 | useVerticalStyle: { | ||
508 | label: intl.formatMessage(messages.useVerticalStyle), | ||
509 | value: settings.all.app.useVerticalStyle, | ||
510 | default: DEFAULT_APP_SETTINGS.useVerticalStyle, | ||
511 | }, | ||
512 | alwaysShowWorkspaces: { | ||
513 | label: intl.formatMessage(messages.alwaysShowWorkspaces), | ||
514 | value: settings.all.app.alwaysShowWorkspaces, | ||
515 | default: DEFAULT_APP_SETTINGS.alwaysShowWorkspaces, | ||
516 | }, | ||
497 | accentColor: { | 517 | accentColor: { |
498 | label: intl.formatMessage(messages.accentColor), | 518 | label: intl.formatMessage(messages.accentColor), |
499 | value: settings.all.app.accentColor, | 519 | value: settings.all.app.accentColor, |
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js index a14d1461e..039ef7711 100644 --- a/src/features/appearance/index.js +++ b/src/features/appearance/index.js | |||
@@ -42,13 +42,25 @@ function generateAccentStyle(color) { | |||
42 | return style; | 42 | return style; |
43 | } | 43 | } |
44 | 44 | ||
45 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr) { | 45 | function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) { |
46 | const width = Number(widthStr); | 46 | const width = Number(widthStr); |
47 | const iconSize = Number(iconSizeStr) - iconSizeBias; | 47 | const iconSize = Number(iconSizeStr) - iconSizeBias; |
48 | 48 | ||
49 | return ` | 49 | return vertical ? ` |
50 | .tab-item { | ||
51 | width: ${width - 2}px !important; | ||
52 | height: ${width - 5 + iconSize}px !important; | ||
53 | min-height: unset; | ||
54 | } | ||
55 | .tab-item .tab-item__icon { | ||
56 | width: ${(width / 2) + iconSize}px !important; | ||
57 | } | ||
58 | .sidebar__button { | ||
59 | font-size: ${width / 3}px !important; | ||
60 | } | ||
61 | ` : ` | ||
50 | .sidebar { | 62 | .sidebar { |
51 | width: ${width}px !important; | 63 | width: ${width - 1}px !important; |
52 | } | 64 | } |
53 | .tab-item { | 65 | .tab-item { |
54 | width: ${width - 2}px !important; | 66 | width: ${width - 2}px !important; |
@@ -79,6 +91,48 @@ function generateShowDragAreaStyle(accentColor) { | |||
79 | `; | 91 | `; |
80 | } | 92 | } |
81 | 93 | ||
94 | function generateVerticalStyle(widthStr, alwaysShowWorkspaces) { | ||
95 | if (!document.getElementById('vertical-style')) { | ||
96 | const link = document.createElement('link'); | ||
97 | link.id = 'vertical-style'; | ||
98 | link.rel = 'stylesheet'; | ||
99 | link.type = 'text/css'; | ||
100 | link.href = './styles/vertical.css'; | ||
101 | |||
102 | document.head.appendChild(link); | ||
103 | } | ||
104 | const width = Number(widthStr); | ||
105 | |||
106 | return ` | ||
107 | .app_service { | ||
108 | top: ${width}px !important; | ||
109 | } | ||
110 | .darwin .sidebar { | ||
111 | height: ${width + 19}px !important; | ||
112 | } | ||
113 | .darwin .sidebar .sidebar__button--workspaces.is-active { | ||
114 | height: ${width - 20}px !important; | ||
115 | } | ||
116 | ${alwaysShowWorkspaces ? ` | ||
117 | .sidebar { | ||
118 | width: calc(100% - 300px) !important; | ||
119 | } | ||
120 | ` : ''} | ||
121 | `; | ||
122 | } | ||
123 | |||
124 | function generateOpenWorkspaceStyle() { | ||
125 | return ` | ||
126 | .app .app__content { | ||
127 | width: 100%; | ||
128 | transform: translateX(0px); | ||
129 | } | ||
130 | .sidebar__button--workspaces { | ||
131 | display: none; | ||
132 | } | ||
133 | `; | ||
134 | } | ||
135 | |||
82 | function generateStyle(settings) { | 136 | function generateStyle(settings) { |
83 | let style = ''; | 137 | let style = ''; |
84 | 138 | ||
@@ -87,6 +141,8 @@ function generateStyle(settings) { | |||
87 | serviceRibbonWidth, | 141 | serviceRibbonWidth, |
88 | iconSize, | 142 | iconSize, |
89 | showDragArea, | 143 | showDragArea, |
144 | useVerticalStyle, | ||
145 | alwaysShowWorkspaces, | ||
90 | } = settings; | 146 | } = settings; |
91 | 147 | ||
92 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { | 148 | if (accentColor !== DEFAULT_APP_SETTINGS.accentColor) { |
@@ -94,11 +150,20 @@ function generateStyle(settings) { | |||
94 | } | 150 | } |
95 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth | 151 | if (serviceRibbonWidth !== DEFAULT_APP_SETTINGS.serviceRibbonWidth |
96 | || iconSize !== DEFAULT_APP_SETTINGS.iconSize) { | 152 | || iconSize !== DEFAULT_APP_SETTINGS.iconSize) { |
97 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize); | 153 | style += generateServiceRibbonWidthStyle(serviceRibbonWidth, iconSize, useVerticalStyle); |
98 | } | 154 | } |
99 | if (showDragArea) { | 155 | if (showDragArea) { |
100 | style += generateShowDragAreaStyle(accentColor); | 156 | style += generateShowDragAreaStyle(accentColor); |
101 | } | 157 | } |
158 | if (useVerticalStyle) { | ||
159 | style += generateVerticalStyle(serviceRibbonWidth, alwaysShowWorkspaces); | ||
160 | } else if (document.getElementById('vertical-style')) { | ||
161 | const link = document.getElementById('vertical-style'); | ||
162 | document.head.removeChild(link); | ||
163 | } | ||
164 | if (alwaysShowWorkspaces) { | ||
165 | style += generateOpenWorkspaceStyle(); | ||
166 | } | ||
102 | 167 | ||
103 | return style; | 168 | return style; |
104 | } | 169 | } |
@@ -111,11 +176,16 @@ export default function initAppearance(stores) { | |||
111 | const { settings } = stores; | 176 | const { settings } = stores; |
112 | createStyleElement(); | 177 | createStyleElement(); |
113 | 178 | ||
114 | // Update accent color | 179 | // Update style when settings change |
115 | reaction( | 180 | reaction( |
116 | () => ( | 181 | () => ([ |
117 | settings.all.app.accentColor | 182 | settings.all.app.accentColor, |
118 | ), | 183 | settings.all.app.serviceRibbonWidth, |
184 | settings.all.app.iconSize, | ||
185 | settings.all.app.showDragArea, | ||
186 | settings.all.app.useVerticalStyle, | ||
187 | settings.all.app.alwaysShowWorkspaces, | ||
188 | ]), | ||
119 | () => { | 189 | () => { |
120 | updateStyle(settings.all.app); | 190 | updateStyle(settings.all.app); |
121 | }, | 191 | }, |
@@ -123,31 +193,4 @@ export default function initAppearance(stores) { | |||
123 | fireImmediately: true, | 193 | fireImmediately: true, |
124 | }, | 194 | }, |
125 | ); | 195 | ); |
126 | // Update service ribbon width | ||
127 | reaction( | ||
128 | () => ( | ||
129 | settings.all.app.serviceRibbonWidth | ||
130 | ), | ||
131 | () => { | ||
132 | updateStyle(settings.all.app); | ||
133 | }, | ||
134 | ); | ||
135 | // Update icon size | ||
136 | reaction( | ||
137 | () => ( | ||
138 | settings.all.app.iconSize | ||
139 | ), | ||
140 | () => { | ||
141 | updateStyle(settings.all.app); | ||
142 | }, | ||
143 | ); | ||
144 | // Update draggable area | ||
145 | reaction( | ||
146 | () => ( | ||
147 | settings.all.app.showDragArea | ||
148 | ), | ||
149 | () => { | ||
150 | updateStyle(settings.all.app); | ||
151 | }, | ||
152 | ); | ||
153 | } | 196 | } |
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json index c0ce026a6..4db3e5fd4 100644 --- a/src/i18n/locales/defaultMessages.json +++ b/src/i18n/locales/defaultMessages.json | |||
@@ -5084,133 +5084,159 @@ | |||
5084 | } | 5084 | } |
5085 | }, | 5085 | }, |
5086 | { | 5086 | { |
5087 | "defaultMessage": "!!!Accent color", | 5087 | "defaultMessage": "!!!Use vertical style", |
5088 | "end": { | 5088 | "end": { |
5089 | "column": 3, | 5089 | "column": 3, |
5090 | "line": 145 | 5090 | "line": 145 |
5091 | }, | 5091 | }, |
5092 | "file": "src/containers/settings/EditSettingsScreen.js", | 5092 | "file": "src/containers/settings/EditSettingsScreen.js", |
5093 | "id": "settings.app.form.useVerticalStyle", | ||
5094 | "start": { | ||
5095 | "column": 20, | ||
5096 | "line": 142 | ||
5097 | } | ||
5098 | }, | ||
5099 | { | ||
5100 | "defaultMessage": "!!!Always show workspace drawer", | ||
5101 | "end": { | ||
5102 | "column": 3, | ||
5103 | "line": 149 | ||
5104 | }, | ||
5105 | "file": "src/containers/settings/EditSettingsScreen.js", | ||
5106 | "id": "settings.app.form.alwaysShowWorkspaces", | ||
5107 | "start": { | ||
5108 | "column": 24, | ||
5109 | "line": 146 | ||
5110 | } | ||
5111 | }, | ||
5112 | { | ||
5113 | "defaultMessage": "!!!Accent color", | ||
5114 | "end": { | ||
5115 | "column": 3, | ||
5116 | "line": 153 | ||
5117 | }, | ||
5118 | "file": "src/containers/settings/EditSettingsScreen.js", | ||
5093 | "id": "settings.app.form.accentColor", | 5119 | "id": "settings.app.form.accentColor", |
5094 | "start": { | 5120 | "start": { |
5095 | "column": 15, | 5121 | "column": 15, |
5096 | "line": 142 | 5122 | "line": 150 |
5097 | } | 5123 | } |
5098 | }, | 5124 | }, |
5099 | { | 5125 | { |
5100 | "defaultMessage": "!!!Display disabled services tabs", | 5126 | "defaultMessage": "!!!Display disabled services tabs", |
5101 | "end": { | 5127 | "end": { |
5102 | "column": 3, | 5128 | "column": 3, |
5103 | "line": 149 | 5129 | "line": 157 |
5104 | }, | 5130 | }, |
5105 | "file": "src/containers/settings/EditSettingsScreen.js", | 5131 | "file": "src/containers/settings/EditSettingsScreen.js", |
5106 | "id": "settings.app.form.showDisabledServices", | 5132 | "id": "settings.app.form.showDisabledServices", |
5107 | "start": { | 5133 | "start": { |
5108 | "column": 24, | 5134 | "column": 24, |
5109 | "line": 146 | 5135 | "line": 154 |
5110 | } | 5136 | } |
5111 | }, | 5137 | }, |
5112 | { | 5138 | { |
5113 | "defaultMessage": "!!!Show unread message badge when notifications are disabled", | 5139 | "defaultMessage": "!!!Show unread message badge when notifications are disabled", |
5114 | "end": { | 5140 | "end": { |
5115 | "column": 3, | 5141 | "column": 3, |
5116 | "line": 153 | 5142 | "line": 161 |
5117 | }, | 5143 | }, |
5118 | "file": "src/containers/settings/EditSettingsScreen.js", | 5144 | "file": "src/containers/settings/EditSettingsScreen.js", |
5119 | "id": "settings.app.form.showMessagesBadgesWhenMuted", | 5145 | "id": "settings.app.form.showMessagesBadgesWhenMuted", |
5120 | "start": { | 5146 | "start": { |
5121 | "column": 29, | 5147 | "column": 29, |
5122 | "line": 150 | 5148 | "line": 158 |
5123 | } | 5149 | } |
5124 | }, | 5150 | }, |
5125 | { | 5151 | { |
5126 | "defaultMessage": "!!!Show draggable area on window", | 5152 | "defaultMessage": "!!!Show draggable area on window", |
5127 | "end": { | 5153 | "end": { |
5128 | "column": 3, | 5154 | "column": 3, |
5129 | "line": 157 | 5155 | "line": 165 |
5130 | }, | 5156 | }, |
5131 | "file": "src/containers/settings/EditSettingsScreen.js", | 5157 | "file": "src/containers/settings/EditSettingsScreen.js", |
5132 | "id": "settings.app.form.showDragArea", | 5158 | "id": "settings.app.form.showDragArea", |
5133 | "start": { | 5159 | "start": { |
5134 | "column": 16, | 5160 | "column": 16, |
5135 | "line": 154 | 5161 | "line": 162 |
5136 | } | 5162 | } |
5137 | }, | 5163 | }, |
5138 | { | 5164 | { |
5139 | "defaultMessage": "!!!Enable spell checking", | 5165 | "defaultMessage": "!!!Enable spell checking", |
5140 | "end": { | 5166 | "end": { |
5141 | "column": 3, | 5167 | "column": 3, |
5142 | "line": 161 | 5168 | "line": 169 |
5143 | }, | 5169 | }, |
5144 | "file": "src/containers/settings/EditSettingsScreen.js", | 5170 | "file": "src/containers/settings/EditSettingsScreen.js", |
5145 | "id": "settings.app.form.enableSpellchecking", | 5171 | "id": "settings.app.form.enableSpellchecking", |
5146 | "start": { | 5172 | "start": { |
5147 | "column": 23, | 5173 | "column": 23, |
5148 | "line": 158 | 5174 | "line": 166 |
5149 | } | 5175 | } |
5150 | }, | 5176 | }, |
5151 | { | 5177 | { |
5152 | "defaultMessage": "!!!Enable GPU Acceleration", | 5178 | "defaultMessage": "!!!Enable GPU Acceleration", |
5153 | "end": { | 5179 | "end": { |
5154 | "column": 3, | 5180 | "column": 3, |
5155 | "line": 165 | 5181 | "line": 173 |
5156 | }, | 5182 | }, |
5157 | "file": "src/containers/settings/EditSettingsScreen.js", | 5183 | "file": "src/containers/settings/EditSettingsScreen.js", |
5158 | "id": "settings.app.form.enableGPUAcceleration", | 5184 | "id": "settings.app.form.enableGPUAcceleration", |
5159 | "start": { | 5185 | "start": { |
5160 | "column": 25, | 5186 | "column": 25, |
5161 | "line": 162 | 5187 | "line": 170 |
5162 | } | 5188 | } |
5163 | }, | 5189 | }, |
5164 | { | 5190 | { |
5165 | "defaultMessage": "!!!Include beta versions", | 5191 | "defaultMessage": "!!!Include beta versions", |
5166 | "end": { | 5192 | "end": { |
5167 | "column": 3, | 5193 | "column": 3, |
5168 | "line": 169 | 5194 | "line": 177 |
5169 | }, | 5195 | }, |
5170 | "file": "src/containers/settings/EditSettingsScreen.js", | 5196 | "file": "src/containers/settings/EditSettingsScreen.js", |
5171 | "id": "settings.app.form.beta", | 5197 | "id": "settings.app.form.beta", |
5172 | "start": { | 5198 | "start": { |
5173 | "column": 8, | 5199 | "column": 8, |
5174 | "line": 166 | 5200 | "line": 174 |
5175 | } | 5201 | } |
5176 | }, | 5202 | }, |
5177 | { | 5203 | { |
5178 | "defaultMessage": "!!!Enable updates", | 5204 | "defaultMessage": "!!!Enable updates", |
5179 | "end": { | 5205 | "end": { |
5180 | "column": 3, | 5206 | "column": 3, |
5181 | "line": 173 | 5207 | "line": 181 |
5182 | }, | 5208 | }, |
5183 | "file": "src/containers/settings/EditSettingsScreen.js", | 5209 | "file": "src/containers/settings/EditSettingsScreen.js", |
5184 | "id": "settings.app.form.automaticUpdates", | 5210 | "id": "settings.app.form.automaticUpdates", |
5185 | "start": { | 5211 | "start": { |
5186 | "column": 20, | 5212 | "column": 20, |
5187 | "line": 170 | 5213 | "line": 178 |
5188 | } | 5214 | } |
5189 | }, | 5215 | }, |
5190 | { | 5216 | { |
5191 | "defaultMessage": "!!!Enable Franz Todos", | 5217 | "defaultMessage": "!!!Enable Franz Todos", |
5192 | "end": { | 5218 | "end": { |
5193 | "column": 3, | 5219 | "column": 3, |
5194 | "line": 177 | 5220 | "line": 185 |
5195 | }, | 5221 | }, |
5196 | "file": "src/containers/settings/EditSettingsScreen.js", | 5222 | "file": "src/containers/settings/EditSettingsScreen.js", |
5197 | "id": "settings.app.form.enableTodos", | 5223 | "id": "settings.app.form.enableTodos", |
5198 | "start": { | 5224 | "start": { |
5199 | "column": 15, | 5225 | "column": 15, |
5200 | "line": 174 | 5226 | "line": 182 |
5201 | } | 5227 | } |
5202 | }, | 5228 | }, |
5203 | { | 5229 | { |
5204 | "defaultMessage": "!!!Keep all workspaces loaded", | 5230 | "defaultMessage": "!!!Keep all workspaces loaded", |
5205 | "end": { | 5231 | "end": { |
5206 | "column": 3, | 5232 | "column": 3, |
5207 | "line": 181 | 5233 | "line": 189 |
5208 | }, | 5234 | }, |
5209 | "file": "src/containers/settings/EditSettingsScreen.js", | 5235 | "file": "src/containers/settings/EditSettingsScreen.js", |
5210 | "id": "settings.app.form.keepAllWorkspacesLoaded", | 5236 | "id": "settings.app.form.keepAllWorkspacesLoaded", |
5211 | "start": { | 5237 | "start": { |
5212 | "column": 27, | 5238 | "column": 27, |
5213 | "line": 178 | 5239 | "line": 186 |
5214 | } | 5240 | } |
5215 | } | 5241 | } |
5216 | ], | 5242 | ], |
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index ee6fc2b29..9bf4fcc15 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json | |||
@@ -287,6 +287,7 @@ | |||
287 | "settings.app.currentVersion": "Current version:", | 287 | "settings.app.currentVersion": "Current version:", |
288 | "settings.app.form.accentColor": "Accent color", | 288 | "settings.app.form.accentColor": "Accent color", |
289 | "settings.app.form.adaptableDarkMode": "Synchronize dark mode with my OS's dark mode setting", | 289 | "settings.app.form.adaptableDarkMode": "Synchronize dark mode with my OS's dark mode setting", |
290 | "settings.app.form.alwaysShowWorkspaces": "Always show workspace drawer", | ||
290 | "settings.app.form.autoLaunchInBackground": "Open in background", | 291 | "settings.app.form.autoLaunchInBackground": "Open in background", |
291 | "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start", | 292 | "settings.app.form.autoLaunchOnStart": "Launch Ferdi on start", |
292 | "settings.app.form.automaticUpdates": "Enable updates", | 293 | "settings.app.form.automaticUpdates": "Enable updates", |
@@ -323,6 +324,7 @@ | |||
323 | "settings.app.form.startMinimized": "Start minimized", | 324 | "settings.app.form.startMinimized": "Start minimized", |
324 | "settings.app.form.universalDarkMode": "Enable universal Dark Mode", | 325 | "settings.app.form.universalDarkMode": "Enable universal Dark Mode", |
325 | "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi", | 326 | "settings.app.form.useTouchIdToUnlock": "Allow using TouchID to unlock Ferdi", |
327 | "settings.app.form.useVerticalStyle": "Use vertical style", | ||
326 | "settings.app.headline": "Settings", | 328 | "settings.app.headline": "Settings", |
327 | "settings.app.headlineAdvanced": "Advanced", | 329 | "settings.app.headlineAdvanced": "Advanced", |
328 | "settings.app.headlineAppearance": "Appearance", | 330 | "settings.app.headlineAppearance": "Appearance", |
diff --git a/src/i18n/locales/whitelist_en-US.json b/src/i18n/locales/whitelist_en-US.json index 32960f8ce..fe51488c7 100644 --- a/src/i18n/locales/whitelist_en-US.json +++ b/src/i18n/locales/whitelist_en-US.json | |||
@@ -1,2 +1 @@ | |||
1 | [ | [] | |
2 | ] \ No newline at end of file | ||
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json index df5e7714a..7165bd46c 100644 --- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json +++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json | |||
@@ -364,15 +364,41 @@ | |||
364 | } | 364 | } |
365 | }, | 365 | }, |
366 | { | 366 | { |
367 | "id": "settings.app.form.useVerticalStyle", | ||
368 | "defaultMessage": "!!!Use vertical style", | ||
369 | "file": "src/containers/settings/EditSettingsScreen.js", | ||
370 | "start": { | ||
371 | "line": 142, | ||
372 | "column": 20 | ||
373 | }, | ||
374 | "end": { | ||
375 | "line": 145, | ||
376 | "column": 3 | ||
377 | } | ||
378 | }, | ||
379 | { | ||
380 | "id": "settings.app.form.alwaysShowWorkspaces", | ||
381 | "defaultMessage": "!!!Always show workspace drawer", | ||
382 | "file": "src/containers/settings/EditSettingsScreen.js", | ||
383 | "start": { | ||
384 | "line": 146, | ||
385 | "column": 24 | ||
386 | }, | ||
387 | "end": { | ||
388 | "line": 149, | ||
389 | "column": 3 | ||
390 | } | ||
391 | }, | ||
392 | { | ||
367 | "id": "settings.app.form.accentColor", | 393 | "id": "settings.app.form.accentColor", |
368 | "defaultMessage": "!!!Accent color", | 394 | "defaultMessage": "!!!Accent color", |
369 | "file": "src/containers/settings/EditSettingsScreen.js", | 395 | "file": "src/containers/settings/EditSettingsScreen.js", |
370 | "start": { | 396 | "start": { |
371 | "line": 142, | 397 | "line": 150, |
372 | "column": 15 | 398 | "column": 15 |
373 | }, | 399 | }, |
374 | "end": { | 400 | "end": { |
375 | "line": 145, | 401 | "line": 153, |
376 | "column": 3 | 402 | "column": 3 |
377 | } | 403 | } |
378 | }, | 404 | }, |
@@ -381,11 +407,11 @@ | |||
381 | "defaultMessage": "!!!Display disabled services tabs", | 407 | "defaultMessage": "!!!Display disabled services tabs", |
382 | "file": "src/containers/settings/EditSettingsScreen.js", | 408 | "file": "src/containers/settings/EditSettingsScreen.js", |
383 | "start": { | 409 | "start": { |
384 | "line": 146, | 410 | "line": 154, |
385 | "column": 24 | 411 | "column": 24 |
386 | }, | 412 | }, |
387 | "end": { | 413 | "end": { |
388 | "line": 149, | 414 | "line": 157, |
389 | "column": 3 | 415 | "column": 3 |
390 | } | 416 | } |
391 | }, | 417 | }, |
@@ -394,11 +420,11 @@ | |||
394 | "defaultMessage": "!!!Show unread message badge when notifications are disabled", | 420 | "defaultMessage": "!!!Show unread message badge when notifications are disabled", |
395 | "file": "src/containers/settings/EditSettingsScreen.js", | 421 | "file": "src/containers/settings/EditSettingsScreen.js", |
396 | "start": { | 422 | "start": { |
397 | "line": 150, | 423 | "line": 158, |
398 | "column": 29 | 424 | "column": 29 |
399 | }, | 425 | }, |
400 | "end": { | 426 | "end": { |
401 | "line": 153, | 427 | "line": 161, |
402 | "column": 3 | 428 | "column": 3 |
403 | } | 429 | } |
404 | }, | 430 | }, |
@@ -407,11 +433,11 @@ | |||
407 | "defaultMessage": "!!!Show draggable area on window", | 433 | "defaultMessage": "!!!Show draggable area on window", |
408 | "file": "src/containers/settings/EditSettingsScreen.js", | 434 | "file": "src/containers/settings/EditSettingsScreen.js", |
409 | "start": { | 435 | "start": { |
410 | "line": 154, | 436 | "line": 162, |
411 | "column": 16 | 437 | "column": 16 |
412 | }, | 438 | }, |
413 | "end": { | 439 | "end": { |
414 | "line": 157, | 440 | "line": 165, |
415 | "column": 3 | 441 | "column": 3 |
416 | } | 442 | } |
417 | }, | 443 | }, |
@@ -420,11 +446,11 @@ | |||
420 | "defaultMessage": "!!!Enable spell checking", | 446 | "defaultMessage": "!!!Enable spell checking", |
421 | "file": "src/containers/settings/EditSettingsScreen.js", | 447 | "file": "src/containers/settings/EditSettingsScreen.js", |
422 | "start": { | 448 | "start": { |
423 | "line": 158, | 449 | "line": 166, |
424 | "column": 23 | 450 | "column": 23 |
425 | }, | 451 | }, |
426 | "end": { | 452 | "end": { |
427 | "line": 161, | 453 | "line": 169, |
428 | "column": 3 | 454 | "column": 3 |
429 | } | 455 | } |
430 | }, | 456 | }, |
@@ -433,11 +459,11 @@ | |||
433 | "defaultMessage": "!!!Enable GPU Acceleration", | 459 | "defaultMessage": "!!!Enable GPU Acceleration", |
434 | "file": "src/containers/settings/EditSettingsScreen.js", | 460 | "file": "src/containers/settings/EditSettingsScreen.js", |
435 | "start": { | 461 | "start": { |
436 | "line": 162, | 462 | "line": 170, |
437 | "column": 25 | 463 | "column": 25 |
438 | }, | 464 | }, |
439 | "end": { | 465 | "end": { |
440 | "line": 165, | 466 | "line": 173, |
441 | "column": 3 | 467 | "column": 3 |
442 | } | 468 | } |
443 | }, | 469 | }, |
@@ -446,11 +472,11 @@ | |||
446 | "defaultMessage": "!!!Include beta versions", | 472 | "defaultMessage": "!!!Include beta versions", |
447 | "file": "src/containers/settings/EditSettingsScreen.js", | 473 | "file": "src/containers/settings/EditSettingsScreen.js", |
448 | "start": { | 474 | "start": { |
449 | "line": 166, | 475 | "line": 174, |
450 | "column": 8 | 476 | "column": 8 |
451 | }, | 477 | }, |
452 | "end": { | 478 | "end": { |
453 | "line": 169, | 479 | "line": 177, |
454 | "column": 3 | 480 | "column": 3 |
455 | } | 481 | } |
456 | }, | 482 | }, |
@@ -459,11 +485,11 @@ | |||
459 | "defaultMessage": "!!!Enable updates", | 485 | "defaultMessage": "!!!Enable updates", |
460 | "file": "src/containers/settings/EditSettingsScreen.js", | 486 | "file": "src/containers/settings/EditSettingsScreen.js", |
461 | "start": { | 487 | "start": { |
462 | "line": 170, | 488 | "line": 178, |
463 | "column": 20 | 489 | "column": 20 |
464 | }, | 490 | }, |
465 | "end": { | 491 | "end": { |
466 | "line": 173, | 492 | "line": 181, |
467 | "column": 3 | 493 | "column": 3 |
468 | } | 494 | } |
469 | }, | 495 | }, |
@@ -472,11 +498,11 @@ | |||
472 | "defaultMessage": "!!!Enable Franz Todos", | 498 | "defaultMessage": "!!!Enable Franz Todos", |
473 | "file": "src/containers/settings/EditSettingsScreen.js", | 499 | "file": "src/containers/settings/EditSettingsScreen.js", |
474 | "start": { | 500 | "start": { |
475 | "line": 174, | 501 | "line": 182, |
476 | "column": 15 | 502 | "column": 15 |
477 | }, | 503 | }, |
478 | "end": { | 504 | "end": { |
479 | "line": 177, | 505 | "line": 185, |
480 | "column": 3 | 506 | "column": 3 |
481 | } | 507 | } |
482 | }, | 508 | }, |
@@ -485,11 +511,11 @@ | |||
485 | "defaultMessage": "!!!Keep all workspaces loaded", | 511 | "defaultMessage": "!!!Keep all workspaces loaded", |
486 | "file": "src/containers/settings/EditSettingsScreen.js", | 512 | "file": "src/containers/settings/EditSettingsScreen.js", |
487 | "start": { | 513 | "start": { |
488 | "line": 178, | 514 | "line": 186, |
489 | "column": 27 | 515 | "column": 27 |
490 | }, | 516 | }, |
491 | "end": { | 517 | "end": { |
492 | "line": 181, | 518 | "line": 189, |
493 | "column": 3 | 519 | "column": 3 |
494 | } | 520 | } |
495 | } | 521 | } |
diff --git a/src/lib/Menu.js b/src/lib/Menu.js index 3c5fc6530..dde4f694a 100644 --- a/src/lib/Menu.js +++ b/src/lib/Menu.js | |||
@@ -1169,17 +1169,21 @@ export default class FranzMenu { | |||
1169 | }); | 1169 | }); |
1170 | 1170 | ||
1171 | // Open workspace drawer: | 1171 | // Open workspace drawer: |
1172 | const drawerLabel = ( | 1172 | if (!this.stores.settings.app.alwaysShowWorkspaces) { |
1173 | isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer | 1173 | const drawerLabel = ( |
1174 | ); | 1174 | isWorkspaceDrawerOpen ? menuItems.closeWorkspaceDrawer : menuItems.openWorkspaceDrawer |
1175 | ); | ||
1176 | menu.push({ | ||
1177 | label: intl.formatMessage(drawerLabel), | ||
1178 | accelerator: `${cmdKey}+D`, | ||
1179 | click: () => { | ||
1180 | workspaceActions.toggleWorkspaceDrawer(); | ||
1181 | }, | ||
1182 | enabled: this.stores.user.isLoggedIn, | ||
1183 | }); | ||
1184 | } | ||
1185 | |||
1175 | menu.push({ | 1186 | menu.push({ |
1176 | label: intl.formatMessage(drawerLabel), | ||
1177 | accelerator: `${cmdKey}+D`, | ||
1178 | click: () => { | ||
1179 | workspaceActions.toggleWorkspaceDrawer(); | ||
1180 | }, | ||
1181 | enabled: this.stores.user.isLoggedIn, | ||
1182 | }, { | ||
1183 | type: 'separator', | 1187 | type: 'separator', |
1184 | }); | 1188 | }); |
1185 | 1189 | ||
diff --git a/src/styles/vertical.scss b/src/styles/vertical.scss new file mode 100644 index 000000000..55660a088 --- /dev/null +++ b/src/styles/vertical.scss | |||
@@ -0,0 +1,62 @@ | |||
1 | $sidebar-width: 65px; | ||
2 | |||
3 | .sidebar { | ||
4 | width: 100vw; | ||
5 | height: $sidebar-width; | ||
6 | flex-direction: row; | ||
7 | position: absolute; | ||
8 | right: 0; | ||
9 | padding-bottom: 0px; | ||
10 | |||
11 | div:first-of-type { | ||
12 | overflow-x: scroll; | ||
13 | width: 100%; | ||
14 | } | ||
15 | |||
16 | .tabs { | ||
17 | flex-direction: row; | ||
18 | |||
19 | .tab-item { | ||
20 | |||
21 | &.is-active { | ||
22 | border-left-width: 0px; | ||
23 | border-top-width: 4px; | ||
24 | border-top-style: solid; | ||
25 | border-top-color: #7367f0; | ||
26 | padding-left: 4px; | ||
27 | } | ||
28 | |||
29 | &:not(.is-active) { | ||
30 | padding-top: 4px; | ||
31 | } | ||
32 | } | ||
33 | } | ||
34 | |||
35 | .sidebar__button--workspaces.is-active { | ||
36 | position: absolute; | ||
37 | right: 300px; | ||
38 | height: 100%; | ||
39 | background-color: #f7f7f9; | ||
40 | } | ||
41 | } | ||
42 | |||
43 | .app_service { | ||
44 | width: 100vw; | ||
45 | position: absolute; | ||
46 | top: $sidebar-width; | ||
47 | right: 0; | ||
48 | } | ||
49 | |||
50 | .theme__dark { | ||
51 | .sidebar .sidebar__button--workspaces.is-active { | ||
52 | background-color: #2d2f31; | ||
53 | } | ||
54 | } | ||
55 | |||
56 | .darwin .sidebar { | ||
57 | height: $sidebar-width + 22px; | ||
58 | |||
59 | .sidebar__button--workspaces.is-active { | ||
60 | height: $sidebar-width - 22px; | ||
61 | } | ||
62 | } \ No newline at end of file | ||