diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-10 11:22:25 +0200 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-04-10 11:22:25 +0200 |
commit | 9472deab9496aca3a9bdf20b93f2a84e3e4569b7 (patch) | |
tree | 4785fcbd438330eaa5463203bba249080e6c02e5 | |
parent | fix drawer add workspace label styles (diff) | |
download | ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.tar.gz ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.tar.zst ferdium-app-9472deab9496aca3a9bdf20b93f2a84e3e4569b7.zip |
refactors workspace theme vars into object structure
-rw-r--r-- | packages/theme/src/themes/dark/index.ts | 49 | ||||
-rw-r--r-- | packages/theme/src/themes/default/index.ts | 60 | ||||
-rw-r--r-- | src/components/layout/AppLayout.js | 4 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 20 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.js | 20 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 2 |
6 files changed, 78 insertions, 77 deletions
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts index 73ffa7f5e..fd04b106c 100644 --- a/packages/theme/src/themes/dark/index.ts +++ b/packages/theme/src/themes/dark/index.ts | |||
@@ -76,6 +76,13 @@ export const services = merge({}, defaultStyles.services, { | |||
76 | }, | 76 | }, |
77 | }); | 77 | }); |
78 | 78 | ||
79 | // Service Icon | ||
80 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
81 | isCustom: { | ||
82 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
83 | }, | ||
84 | }); | ||
85 | |||
79 | // Workspaces | 86 | // Workspaces |
80 | const drawerBg = color(colorBackground).lighten(0.3).hex(); | 87 | const drawerBg = color(colorBackground).lighten(0.3).hex(); |
81 | 88 | ||
@@ -105,27 +112,21 @@ export const workspaces = merge({}, defaultStyles.workspaces, { | |||
105 | }, | 112 | }, |
106 | }); | 113 | }); |
107 | 114 | ||
108 | // Workspace settings | 115 | // // Workspace settings |
109 | export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { | 116 | // export const workspaceSettings = merge({}, defaultStyles.workspaceSettings, { |
110 | listItemBorderColor: legacyStyles.darkThemeGrayDarker, | 117 | // listItemBorderColor: legacyStyles.darkThemeGrayDarker, |
111 | listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, | 118 | // listItemHoverBgColor: legacyStyles.darkThemeGrayDarker, |
112 | }); | 119 | // }); |
113 | 120 | // | |
114 | // Workspace Drawer | 121 | // // Workspace Drawer |
115 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); | 122 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.3).hex(); |
116 | export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; | 123 | // export const workspaceDrawerAddButtonColor = legacyStyles.darkThemeGrayLighter; |
117 | export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; | 124 | // export const workspaceDrawerAddButtonHoverColor = legacyStyles.darkThemeGraySmoke; |
118 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); | 125 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).lighten(0.2).hex(); |
119 | export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex(); | 126 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).lighten(0.2).hex(); |
120 | export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; | 127 | // export const workspaceDrawerItemActiveBackground = defaultStyles.brandPrimary; |
121 | export const workspaceDrawerItemNameColor = colorText; | 128 | // export const workspaceDrawerItemNameColor = colorText; |
122 | export const workspaceDrawerItemNameActiveColor = 'white'; | 129 | // export const workspaceDrawerItemNameActiveColor = 'white'; |
123 | export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); | 130 | // export const workspaceDrawerServicesColor = color(colorText).darken(0.5).hex(); |
124 | export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); | 131 | // export const workspaceDrawerServicesActiveColor = color(defaultStyles.brandPrimary).lighten(0.5).hex(); |
125 | 132 | // | |
126 | // Service Icon | ||
127 | export const serviceIcon = merge({}, defaultStyles.serviceIcon, { | ||
128 | isCustom: { | ||
129 | border: `1px solid ${legacyStyles.darkThemeGrayDark}`, | ||
130 | }, | ||
131 | }); | ||
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index eb7e80b9f..48111d22b 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -157,6 +157,16 @@ export const services = { | |||
157 | }, | 157 | }, |
158 | }; | 158 | }; |
159 | 159 | ||
160 | // Service Icon | ||
161 | export const serviceIcon = { | ||
162 | width: 35, | ||
163 | isCustom: { | ||
164 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
165 | borderRadius: legacyStyles.themeBorderRadius, | ||
166 | width: 37, | ||
167 | }, | ||
168 | }; | ||
169 | |||
160 | // Workspaces | 170 | // Workspaces |
161 | const drawerBg = color(colorBackground).lighten(0.1).hex(); | 171 | const drawerBg = color(colorBackground).lighten(0.1).hex(); |
162 | 172 | ||
@@ -168,7 +178,7 @@ export const workspaces = { | |||
168 | width: 300, | 178 | width: 300, |
169 | padding: 20, | 179 | padding: 20, |
170 | background: drawerBg, | 180 | background: drawerBg, |
171 | addButton: { | 181 | buttons: { |
172 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), | 182 | color: color(legacyStyles.themeGrayLight).lighten(0.1).hex(), |
173 | hoverColor: legacyStyles.themeGrayLight, | 183 | hoverColor: legacyStyles.themeGrayLight, |
174 | }, | 184 | }, |
@@ -188,32 +198,22 @@ export const workspaces = { | |||
188 | }, | 198 | }, |
189 | }; | 199 | }; |
190 | 200 | ||
191 | export const workspaceSettings = { | 201 | // export const workspaceSettings = { |
192 | listItemHeight: 57, | 202 | // listItemHeight: 57, |
193 | listItemBorderColor: legacyStyles.themeGrayLightest, | 203 | // listItemBorderColor: legacyStyles.themeGrayLightest, |
194 | listItemHoverBgColor: legacyStyles.themeGrayLightest, | 204 | // listItemHoverBgColor: legacyStyles.themeGrayLightest, |
195 | }; | 205 | // }; |
196 | 206 | // | |
197 | // Workspace Drawer | 207 | // // Workspace Drawer |
198 | export const workspaceDrawerWidth = 300; | 208 | // export const workspaceDrawerWidth = 300; |
199 | export const workspaceDrawerPadding = 20; | 209 | // export const workspaceDrawerPadding = 20; |
200 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); | 210 | // export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); |
201 | export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; | 211 | // export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; |
202 | export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); | 212 | // export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); |
203 | export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex(); | 213 | // export const workspaceDrawerItemHoverBackground = color(workspaceDrawerBackground).darken(0.01).hex(); |
204 | export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; | 214 | // export const workspaceDrawerItemActiveBackground = legacyStyles.themeGrayLightest; |
205 | export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); | 215 | // export const workspaceDrawerItemBorder = color(workspaceDrawerBackground).darken(0.05).hex(); |
206 | export const workspaceDrawerItemNameColor = colorText; | 216 | // export const workspaceDrawerItemNameColor = colorText; |
207 | export const workspaceDrawerItemNameActiveColor = colorText; | 217 | // export const workspaceDrawerItemNameActiveColor = colorText; |
208 | export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); | 218 | // export const workspaceDrawerServicesColor = color(colorText).lighten(1.5).hex(); |
209 | export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; | 219 | // export const workspaceDrawerServicesActiveColor = workspaceDrawerServicesColor; |
210 | |||
211 | // Service Icon | ||
212 | export const serviceIcon = { | ||
213 | width: 35, | ||
214 | isCustom: { | ||
215 | border: `1px solid ${legacyStyles.themeGrayLighter}`, | ||
216 | borderRadius: legacyStyles.themeBorderRadius, | ||
217 | width: 37, | ||
218 | }, | ||
219 | }; | ||
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 0c72c1413..b7f7722dd 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -50,10 +50,10 @@ const messages = defineMessages({ | |||
50 | 50 | ||
51 | const styles = theme => ({ | 51 | const styles = theme => ({ |
52 | appContent: { | 52 | appContent: { |
53 | width: `calc(100% + ${theme.workspaceDrawerWidth}px)`, | 53 | width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
54 | transition: 'transform 0.5s ease', | 54 | transition: 'transform 0.5s ease', |
55 | transform() { | 55 | transform() { |
56 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`; | 56 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; |
57 | }, | 57 | }, |
58 | }, | 58 | }, |
59 | }); | 59 | }); |
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index ae67b9ea4..d48b55f12 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -45,24 +45,24 @@ const messages = defineMessages({ | |||
45 | 45 | ||
46 | const styles = theme => ({ | 46 | const styles = theme => ({ |
47 | drawer: { | 47 | drawer: { |
48 | backgroundColor: theme.workspaceDrawerBackground, | 48 | background: theme.workspaces.drawer.background, |
49 | width: `${theme.workspaceDrawerWidth}px`, | 49 | width: `${theme.workspaces.drawer.width}px`, |
50 | }, | 50 | }, |
51 | headline: { | 51 | headline: { |
52 | fontSize: '24px', | 52 | fontSize: '24px', |
53 | marginTop: '38px', | 53 | marginTop: '38px', |
54 | marginBottom: '25px', | 54 | marginBottom: '25px', |
55 | marginLeft: theme.workspaceDrawerPadding, | 55 | marginLeft: theme.workspaces.drawer.padding, |
56 | }, | 56 | }, |
57 | workspacesSettingsButton: { | 57 | workspacesSettingsButton: { |
58 | float: 'right', | 58 | float: 'right', |
59 | marginRight: theme.workspaceDrawerPadding, | 59 | marginRight: theme.workspaces.drawer.padding, |
60 | marginTop: '2px', | 60 | marginTop: '2px', |
61 | }, | 61 | }, |
62 | workspacesSettingsButtonIcon: { | 62 | workspacesSettingsButtonIcon: { |
63 | fill: theme.workspaceDrawerAddButtonColor, | 63 | fill: theme.workspaces.drawer.buttons.color, |
64 | '&:hover': { | 64 | '&:hover': { |
65 | fill: theme.workspaceDrawerAddButtonHoverColor, | 65 | fill: theme.workspaces.drawer.buttons.hoverColor, |
66 | }, | 66 | }, |
67 | }, | 67 | }, |
68 | workspaces: { | 68 | workspaces: { |
@@ -80,11 +80,11 @@ const styles = theme => ({ | |||
80 | }, | 80 | }, |
81 | addNewWorkspaceLabel: { | 81 | addNewWorkspaceLabel: { |
82 | height: 'auto', | 82 | height: 'auto', |
83 | color: theme.workspaces.drawer.addButton.color, | 83 | color: theme.workspaces.drawer.buttons.color, |
84 | marginTop: 40, | 84 | marginTop: 40, |
85 | textAlign: 'center', | 85 | textAlign: 'center', |
86 | '& > svg': { | 86 | '& > svg': { |
87 | fill: theme.workspaces.drawer.addButton.color, | 87 | fill: theme.workspaces.drawer.buttons.color, |
88 | }, | 88 | }, |
89 | '& > span': { | 89 | '& > span': { |
90 | fontSize: '13px', | 90 | fontSize: '13px', |
@@ -93,9 +93,9 @@ const styles = theme => ({ | |||
93 | top: -3, | 93 | top: -3, |
94 | }, | 94 | }, |
95 | '&:hover': { | 95 | '&:hover': { |
96 | color: theme.workspaces.drawer.addButton.hoverColor, | 96 | color: theme.workspaces.drawer.buttons.hoverColor, |
97 | '& > svg': { | 97 | '& > svg': { |
98 | fill: theme.workspaces.drawer.addButton.hoverColor, | 98 | fill: theme.workspaces.drawer.buttons.hoverColor, |
99 | }, | 99 | }, |
100 | }, | 100 | }, |
101 | }, | 101 | }, |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 0be485504..57f0754d9 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -15,41 +15,41 @@ const messages = defineMessages({ | |||
15 | const styles = theme => ({ | 15 | const styles = theme => ({ |
16 | item: { | 16 | item: { |
17 | height: '67px', | 17 | height: '67px', |
18 | padding: `15px ${theme.workspaceDrawerPadding}px`, | 18 | padding: `15px ${theme.workspaces.drawer.padding}px`, |
19 | borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`, | 19 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
20 | transition: 'background-color 300ms ease-out', | 20 | transition: 'background-color 300ms ease-out', |
21 | '&:first-child': { | 21 | '&:first-child': { |
22 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, | 22 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
23 | }, | 23 | }, |
24 | '&:hover': { | 24 | '&:hover': { |
25 | backgroundColor: theme.workspaceDrawerItemHoverBackground, | 25 | backgroundColor: theme.workspaces.drawer.listItem.hoverBackground, |
26 | }, | 26 | }, |
27 | }, | 27 | }, |
28 | isActiveItem: { | 28 | isActiveItem: { |
29 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | 29 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, |
30 | '&:hover': { | 30 | '&:hover': { |
31 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | 31 | backgroundColor: theme.workspaces.drawer.listItem.activeBackground, |
32 | }, | 32 | }, |
33 | }, | 33 | }, |
34 | name: { | 34 | name: { |
35 | marginTop: '4px', | 35 | marginTop: '4px', |
36 | color: theme.workspaceDrawerItemNameColor, | 36 | color: theme.workspaces.drawer.listItem.name.color, |
37 | }, | 37 | }, |
38 | activeName: { | 38 | activeName: { |
39 | color: theme.workspaceDrawerItemNameActiveColor, | 39 | color: theme.workspaces.drawer.listItem.name.activeColor, |
40 | }, | 40 | }, |
41 | services: { | 41 | services: { |
42 | display: 'block', | 42 | display: 'block', |
43 | fontSize: '11px', | 43 | fontSize: '11px', |
44 | marginTop: '5px', | 44 | marginTop: '5px', |
45 | color: theme.workspaceDrawerServicesColor, | 45 | color: theme.workspaces.drawer.listItem.services.color, |
46 | whiteSpace: 'nowrap', | 46 | whiteSpace: 'nowrap', |
47 | textOverflow: 'ellipsis', | 47 | textOverflow: 'ellipsis', |
48 | overflow: 'hidden', | 48 | overflow: 'hidden', |
49 | lineHeight: '15px', | 49 | lineHeight: '15px', |
50 | }, | 50 | }, |
51 | activeServices: { | 51 | activeServices: { |
52 | color: theme.workspaceDrawerServicesActiveColor, | 52 | color: theme.workspaces.drawer.listItem.services.active, |
53 | }, | 53 | }, |
54 | }); | 54 | }); |
55 | 55 | ||
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index 8aba5bbd9..ded6b8f2a 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -25,7 +25,7 @@ const styles = theme => ({ | |||
25 | marginTop: '20px', | 25 | marginTop: '20px', |
26 | }, | 26 | }, |
27 | wrapperWhenDrawerIsOpen: { | 27 | wrapperWhenDrawerIsOpen: { |
28 | width: `calc(100% - ${theme.workspaceDrawerWidth}px)`, | 28 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, |
29 | }, | 29 | }, |
30 | component: { | 30 | component: { |
31 | background: 'rgba(20, 20, 20, 0.4)', | 31 | background: 'rgba(20, 20, 20, 0.4)', |