Move styles to app/renderer/components/styles/global.js

GreenRecycleBin · Jul 14, 2017 · 492ade8 · 492ade8
1 parent d3f96bb
commit 492ade8
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 33 deletions.
diff --git a/app/common/constants/styleValues.js b/app/common/constants/styleValues.js
@@ -4,13 +4,6 @@
 
 // Don't forget to update .less files as well and vice-versa
 const styleValues = {
-  'bookmark-item-max-width': 100,
-  'bookmark-item-padding': 4,
-  'bookmark-item-margin': 3,
-  'bookmark-item-font-size': 4,
-  'bookmark-item-chevron-margin': 4,
-  'bookmarks-toolbar-padding': 10,
-  'default-font-family': '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif',
   'download-bar-buttons': 140,
   'download-bar-height': 60,
   'download-bar-padding': 20,

diff --git a/app/renderer/components/bookmarks/bookmarkToolbarButton.js b/app/renderer/components/bookmarks/bookmarkToolbarButton.js
@@ -304,10 +304,6 @@ class BookmarkToolbarButton extends React.Component {
 
 module.exports = ReduxComponent.connect(BookmarkToolbarButton)
 
-const bookmarkItemMaxWidth = '100px'
-const bookmarkItemPadding = '4px'
-const bookmarkItemMargin = '3px'
-const bookmarkItemChevronMargin = '4px'
 const bookmarkToolbarButtonDraggingMargin = '25px'
 
 const styles = StyleSheet.create({
@@ -318,11 +314,11 @@ const styles = StyleSheet.create({
     borderRadius: '3px',
     color: globalStyles.color.mediumGray,
     cursor: 'default',
-    fontSize: '11px',
+    fontSize: globalStyles.spacing.bookmarksItemFontSize,
     lineHeight: '1.3',
-    margin: `auto ${bookmarkItemMargin}`,
-    maxWidth: bookmarkItemMaxWidth,
-    padding: `2px ${bookmarkItemPadding}`,
+    margin: `auto ${globalStyles.spacing.bookmarksItemMargin}`,
+    maxWidth: globalStyles.spacing.bookmarksItemMaxWidth,
+    padding: `2px ${globalStyles.spacing.bookmarksItemPadding}`,
     textOverflow: 'ellipsis',
     userSelect: 'none',
     whiteSpace: 'nowrap',
@@ -343,7 +339,7 @@ const styles = StyleSheet.create({
     opacity: '0.2'
   },
   bookmarkToolbarButton__showOnlyFavicon: {
-    padding: '2px 4px',
+    padding: `2px ${globalStyles.spacing.bookmarksItemPadding}`,
     margin: 'auto 0'
   },
   bookmarkToolbarButton__marginRightZero: {
@@ -353,7 +349,7 @@ const styles = StyleSheet.create({
     backgroundPosition: 'center',
     backgroundRepeat: 'no-repeat',
     display: 'inline-block',
-    marginRight: '4px'
+    marginRight: globalStyles.spacing.bookmarksItemMargin
   },
   bookmarkToolbarButton__bookmarkFolder: {
     fontSize: globalStyles.spacing.bookmarksFolderIconSize,
@@ -371,7 +367,7 @@ const styles = StyleSheet.create({
   },
   bookmarkToolbarButton__bookmarkFolderChevron: {
     color: '#676767',
-    fontSize: '8px',
-    marginLeft: bookmarkItemChevronMargin
+    fontSize: globalStyles.spacing.bookmarksItemChevronFontSize,
+    marginLeft: globalStyles.spacing.bookmarksItemChevronMargin
   }
 })
diff --git a/app/renderer/components/bookmarks/bookmarksToolbar.js b/app/renderer/components/bookmarks/bookmarksToolbar.js
@@ -200,13 +200,13 @@ const styles = StyleSheet.create({
     boxSizing: 'border-box',
     display: 'flex',
     flex: 1,
-    padding: `${globalStyles.spacing.navbarMenubarMargin} 10px`
+    padding: `${globalStyles.spacing.navbarMenubarMargin} ${globalStyles.spacing.bookmarksToolbarPadding}`
   },
   bookmarksToolbar__allowDragging: {
     WebkitAppRegion: 'drag'
   },
   bookmarksToolbar__showOnlyFavicon: {
-    padding: `${globalStyles.spacing.navbarMenubarMargin} 0 ${globalStyles.spacing.tabPagesHeight} 10px`
+    padding: `${globalStyles.spacing.navbarMenubarMargin} 0 ${globalStyles.spacing.tabPagesHeight} ${globalStyles.spacing.bookmarksToolbarPadding}`
   },
   bookmarksToolbar__bookmarkButton: {
     boxSizing: 'border-box',

diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
@@ -23,6 +23,10 @@ const {opacityIncreaseKeyframes} = require('./animations')
  */
 
 const globalStyles = {
+  defaultFontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI"` +
+    `, "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans"` +
+    `, "Droid Sans", sans-serif`,
+
   breakpoint: {
     breakpointWideViewport: '1000px',
     breakpointNarrowViewport: '600px',
@@ -145,6 +149,13 @@ const globalStyles = {
     bookmarksToolbarWithFaviconsHeight: '24px',
     bookmarksFileIconSize: '13px',
     bookmarksFolderIconSize: '15px',
+    bookmarksItemMaxWidth: '100px',
+    bookmarksItemPadding: '4px',
+    bookmarksItemMargin: '4px',
+    bookmarksItemChevronMargin: '4px',
+    bookmarksItemChevronFontSize: '8px',
+    bookmarksToolbarPadding: '10px',
+    bookmarksItemFontSize: '11px',
     navbarMenubarMargin: '7px',
     navbarButtonSpacing: '4px',
     navbarButtonWidth: '20px',

diff --git a/less/bookmarksToolbar.less b/less/bookmarksToolbar.less
@@ -2,18 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-// Copied to bookmaksToolbar.js
-// If updating update app/common/constants/styleValues.js as well and vice-versa
-:root {
-  --bookmark-item-max-width: 100px;
-  --bookmark-item-padding: 4px;
-  --bookmark-item-margin: 3px;
-  --bookmark-item-chevron-margin: 4px;
-  --bookmark-item-font-size: 16px;
-  --bookmarks-toolbar-padding: 10px;
-}
-
-
 div[class^='bookmarksToolbar'] {
   // PR #7740
   + .tabPages {