Skip to content

Commit

Permalink
icon updates and light css
Browse files Browse the repository at this point in the history
- fixed render issues with current icons
- did some light css but looped in pete and found it might be diminishing return so stopped
- made the top banner a gradient
- rebased against master 2019 Jan 10
  • Loading branch information
rossmoody authored and bsclifton committed Jan 11, 2019
1 parent 637ec1a commit f16a26a
Show file tree
Hide file tree
Showing 8 changed files with 198 additions and 97 deletions.
26 changes: 13 additions & 13 deletions browser/resources/settings/brave_settings_menu/icons.html

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
diff --git a/chrome/browser/resources/settings/settings_icons_css.html b/chrome/browser/resources/settings/settings_icons_css.html
index 7a4e72d47e8e79a89aacd2f84fa47575d122e0a8..5a4c8832a7b91499f19b4d08468639f1dc453383 100644
--- a/chrome/browser/resources/settings/settings_icons_css.html
+++ b/chrome/browser/resources/settings/settings_icons_css.html
@@ -4,14 +4,14 @@
<dom-module id="settings-icons">
<template>
<style>
-<if expr="chromeos">
- paper-icon-button-light.icon-add-circle {
- background-image: url(./images/settings_icon_add_circle.svg);
- }
- paper-icon-button-light.icon-add-wifi {
- background-image: url(./images/settings_icon_add_wifi.svg);
- }
-</if>
+ <if expr="chromeos">
+ paper-icon-button-light.icon-add-circle {
+ background-image: url(./images/settings_icon_add_circle.svg);
+ }
+ paper-icon-button-light.icon-add-wifi {
+ background-image: url(./images/settings_icon_add_wifi.svg);
+ }
+ </if>
</style>
</template>
</dom-module>
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
diff --git a/chrome/browser/resources/settings/settings_menu/settings_menu.html b/chrome/browser/resources/settings/settings_menu/settings_menu.html
index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a0c8136be 100644
index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..d116ae93881505cfc720fdeb6b334efb91fb17ec 100644
--- a/chrome/browser/resources/settings/settings_menu/settings_menu.html
+++ b/chrome/browser/resources/settings/settings_menu/settings_menu.html
@@ -10,23 +10,32 @@
@@ -10,44 +10,69 @@
<link rel="import" href="../route.html">
<link rel="import" href="../settings_shared_css.html">

Expand All @@ -18,11 +18,11 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
- margin-top: 8px;
+ display: inline-block;
+ vertical-align: top;
+ margin: 12px;
+ padding: 12px 60px 20px 0;
+ margin: 30px 12px;
+ padding: 30px;
+ background-color: #fff;
+ border: 1px solid #e8e8ef;
+ border-radius: 7px;
+ border-radius: 12px;
+ font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

Expand All @@ -37,12 +37,14 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
+ color: #A0A1B2; /* brave: subtleInteracting */
display: flex;
- font-weight: 500;
- margin-inline-end: 2px; /* Margin so selected outline is visible. */
- margin-inline-start: 1px;
- min-height: 20px;
- padding-bottom: 10px;
- padding-inline-start: 23px; /* 24px - 1px from margin for outline. */
- padding-top: 10px;
+ font-weight: normal;
margin-inline-end: 2px; /* Margin so selected outline is visible. */
margin-inline-start: 1px;
min-height: 20px;
@@ -35,10 +44,32 @@
padding-top: 10px;
+ margin: 0 20px 20px 0;
}

- a[href].iron-selected {
Expand All @@ -51,8 +53,8 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
}

+ a[href].iron-selected {
+ color: #000;
+ font-weight: bold;
+ color: #424242;
+ font-weight: 500;
+ }
+
+ #settingsHeader,
Expand All @@ -62,36 +64,53 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
+ };
+ align-items: center;
+ font-weight: normal;
+ margin-inline-end: 2px; /* Margin so selected outline is visible. */
+ margin-inline-start: 1px;
+ min-height: 20px;
+ padding-bottom: 10px;
+ padding-inline-start: 23px; /* 24px - 1px from margin for outline. */
+ padding-top: 10px;
+ font-size: larger;
+ color: #000;
+ color: #424242;
+ margin-bottom: 20px;
+ font-family: Poppins, -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+ }
+
iron-icon {
--iron-icon-fill-color: var(--settings-nav-grey);
margin-inline-end: 24px;
@@ -48,6 +79,7 @@
- margin-inline-end: 24px;
+ margin-inline-end: 16px;
pointer-events: none;
vertical-align: top;
+ width: 24px;
+ height: 24px;
}

.iron-selected > iron-icon {
fill: var(--google-blue-700);
+ font-weight: bold;
}

#advancedButton {
@@ -77,7 +109,6 @@
#advancedButton > iron-icon,
#extensionsLink > iron-icon {
@@ -55,9 +80,9 @@
border: none;
border-radius: initial;
height: unset;
- margin-top: 8px;
- padding-inline-end: 0;
+ padding: 0;
text-transform: none;
+ margin-top: 30px;
}

#advancedButton:focus {
@@ -74,10 +99,8 @@
flex: 1;
}

- #advancedButton > iron-icon,
- #extensionsLink > iron-icon {
+ #advancedButton > iron-icon {
@apply --cr-icon-height-width;
- margin-inline-end: 14px; /* 16px - 2px from margin for outline. */
}

#menuSeparator {
@@ -86,10 +117,19 @@
@@ -86,10 +109,21 @@
margin-bottom: 8px;
margin-top: 8px;
}
Expand All @@ -100,6 +119,8 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
+ display: flex;
+ flex-direction: column;
+ color: #C5C5D3; /* brave: subtle */
+ font-size: 12px;
+ line-height: 16px;
+ }
</style>
<iron-selector id="topMenu" selectable="a:not(#extensionsLink)"
Expand All @@ -111,34 +132,46 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
<if expr="chromeos">
<a href="/internet">
<iron-icon icon="settings:network-wifi"></iron-icon>
@@ -114,11 +150,12 @@
@@ -106,7 +140,7 @@
</a>
</if>
<a id="people" href="/people" hidden="[[!pageVisibility.people]]">
- <iron-icon icon="cr:person"></iron-icon>
+ <iron-icon icon="brave_settings:logos-thumbs-up"></iron-icon>
$i18n{peoplePageTitle}
</a>
<a id="autofill" href="/autofill"
@@ -114,10 +148,11 @@
<iron-icon icon="settings:assignment"></iron-icon>
$i18n{autofillPageTitle}
</a>
- <a id="appearance" href="/appearance"
- hidden="[[!pageVisibility.appearance]]">
- <iron-icon icon="settings:palette"></iron-icon>
- $i18n{appearancePageTitle}
- </a>
+ <a id="extensionsLink" href="chrome://extensions" target="_blank"
+ on-click="onExtensionsLinkClick_"
+ title="$i18n{extensionsLinkTooltip}">
+ <iron-icon icon="brave_settings:misc-extensions"></iron-icon>
+ $i18n{extensionsPageTitle}
+ </a>
</a>
<if expr="chromeos">
<a href="/device">
<iron-icon icon="settings:laptop-chromebook"></iron-icon>
@@ -148,11 +185,20 @@
$i18n{defaultBrowser}
@@ -125,8 +160,12 @@
$i18n{devicePageTitle}
</a>
</if>
+ <a href="/braveSync" hidden="[[!pageVisibility.braveSync]]">
+ <iron-icon icon="cr:sync"></iron-icon>
+ $i18n{braveSync}
+ <a href="/shields">
+ <iron-icon icon="brave_settings:shields-success-o"></iron-icon>
+ Shields
+ </a>
<a id="onStartup" href="/onStartup"
hidden="[[!pageVisibility.onStartup]]">
<a href="/search">
- <iron-icon icon="cr:search"></iron-icon>
+ <iron-icon icon="brave_settings:search"></iron-icon>
$i18n{searchPageTitle}
</a>
<if expr="chromeos">
@@ -153,6 +192,11 @@
<iron-icon icon="settings:power-settings-new"></iron-icon>
$i18n{onStartup}
</a>
Expand All @@ -150,20 +183,33 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
<paper-button toggles id="advancedButton"
aria-active-attribute="aria-expanded" active="{{advancedOpened}}"
hidden="[[!pageVisibility.advancedSettings]]">
@@ -185,10 +231,12 @@
<iron-icon icon="cr:print"></iron-icon>
@@ -174,15 +218,15 @@
$i18n{privacyPageTitle}
</a>
<a href="/languages">
- <iron-icon icon="settings:language"></iron-icon>
+ <iron-icon icon="brave_settings:language"></iron-icon>
$i18n{languagesPageTitle}
</a>
<a href="/downloads">
- <iron-icon icon="cr:file-download"></iron-icon>
+ <iron-icon icon="brave_settings:arrows-download"></iron-icon>
$i18n{downloadsPageTitle}
</a>
<a href="/printing">
- <iron-icon icon="cr:print"></iron-icon>
+ <iron-icon icon="brave_settings:printer"></iron-icon>
$i18n{printingPageTitle}
</a>
+<if expr="_google_chrome">
<a href="/accessibility">
<iron-icon icon="settings:accessibility"></iron-icon>
$i18n{a11yPageTitle}
@@ -196,19 +240,19 @@
</a>
</if>
<a id="reset" href="/reset" hidden="[[!pageVisibility.reset]]">
- <iron-icon icon="settings:restore"></iron-icon>
+ <iron-icon icon="brave_settings:reset"></iron-icon>
$i18n{resetPageTitle}
</a>
+</if>
<if expr="not chromeos">
<a href="/system">
<iron-icon icon="settings:build"></iron-icon>
@@ -202,13 +250,13 @@
</iron-selector>
</iron-collapse>
<div id="menuSeparator"></div>
Expand All @@ -175,7 +221,7 @@ index 2fcea63a9bf9bf0400640d3ec8b6277087814bab..85ffd65837bc24455f444ab983dca45a
- </a>
- <a id="about-menu" href="/help">$i18n{aboutPageTitle}</a>
+ <a id="about-menu" href="/help">
+ <iron-icon icon="brave_settings:full-color-brave-lion"></iron-icon>
+ <iron-icon icon="brave_settings:logos-product"></iron-icon>
+ <div id="aboutMenuText">
+ <div>$i18n{aboutPageTitle}</div>
+ <div>$i18n{braveProductVersion}</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,32 +1,41 @@
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.html b/chrome/browser/resources/settings/settings_ui/settings_ui.html
index 88d91ba73e146bdefdb2c51b84f49ea4be934aad..2cac764ba9a2687c365ecaa52fe3deb16f5ff397 100644
index 04069b85b3e1df39ea3ac0075901164d9f622e88..9aa9a5e30d5a964c7c0dcfc4910faf7aea47fab3 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.html
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.html
@@ -48,6 +48,10 @@
@@ -39,7 +39,7 @@
cr-toolbar {
@apply --layout-center;
--iron-icon-fill-color: white;
- background-color: var(--google-blue-700);
+ background-image: linear-gradient(-90deg, #F73A1C, #BF14A2);
color: white;
min-height: 56px;
z-index: 2;
@@ -49,6 +49,11 @@
flex: 1;
overflow: overlay;
position: relative;
+ text-align: center;
+ }
+
+ #container > * {
+ text-align: left;
}
</style>
<settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs>
@@ -61,23 +65,17 @@
@@ -62,22 +67,17 @@
role="banner"
show-menu>
</cr-toolbar>
- <cr-drawer id="drawer" on-close="onMenuClosed_"
- heading="$i18n{settings}" align="$i18n{textdirection}">
- <cr-drawer id="drawer" on-close="onMenuClose_" heading="$i18n{settings}"
- align="$i18n{textdirection}">
- <div class="drawer-content">
- <template is="dom-if" id="drawerTemplate">
- <settings-menu page-visibility="[[pageVisibility_]]"
- show-android-apps="[[showAndroidApps_]]"
- show-crostini="[[showCrostini_]]"
- show-multidevice="[[showMultidevice_]]"
- have-play-store-app="[[havePlayStoreApp_]]"
- autofill-home-enabled="[[autofillHomeEnabled_]]"
- on-iron-activate="onIronActivate_"
- advanced-opened="{{advancedOpened_}}">
- </settings-menu>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,48 +1,45 @@
diff --git a/chrome/browser/resources/settings/settings_ui/settings_ui.js b/chrome/browser/resources/settings/settings_ui/settings_ui.js
index 37ebe94a48728893daf84613aab94be6ddf89df7..2318718b653cad4db62664044611aeef3ed956e1 100644
index 8bd9c1091bb95d266fb35bea5a69e90f73f10f7a..14aa6c528d4e0bc1bb1ac17e1f1e546aa595953f 100644
--- a/chrome/browser/resources/settings/settings_ui/settings_ui.js
+++ b/chrome/browser/resources/settings/settings_ui/settings_ui.js
@@ -92,13 +92,13 @@ Polymer({
@@ -85,13 +85,13 @@ Polymer({
*/
ready: function() {
// Lazy-create the drawer the first time it is opened or swiped into view.
- listenOnce(this.$.drawer, 'open-changed', () => {
- listenOnce(this.$.drawer, 'cr-drawer-opening', () => {
- this.$.drawerTemplate.if = true;
- });
+ // listenOnce(this.$.drawer, 'open-changed', () => {
+ // listenOnce(this.$.drawer, 'cr-drawer-opening', () => {
+ // this.$.drawerTemplate.if = true;
+ // });

- window.addEventListener('popstate', e => {
- this.$.drawer.closeDrawer();
- this.$.drawer.cancel();
- });
+ // window.addEventListener('popstate', e => {
+ // this.$.drawer.closeDrawer();
+ // this.$.drawer.cancel();
+ // });

CrPolicyStrings = {
controlledSettingExtension:
@@ -273,16 +273,17 @@ Polymer({
@@ -262,14 +262,14 @@ Polymer({
* Called when a section is selected.
* @private
*/
onIronActivate_: function(event) {
- if (event.detail.item.id != 'advancedSubmenu')
- this.$.drawer.closeDrawer();
+ // if (event.detail.item.id != 'advancedSubmenu')
+ // this.$.drawer.closeDrawer();
},
- onIronActivate_: function() {
- this.$.drawer.close();
- },
+ // onIronActivate_: function() {
+ // this.$.drawer.close();
+ // },

/** @private */
- onMenuButtonTap_: function() {
- this.$.drawer.toggle();
- },
+ // onMenuButtonTap_: function() {
+ // console.log('BSC]] LOL TOGGLING')
+ // this.$.drawer.toggle();
+ // },

- /** @private */
+ // /** @private */
onMenuClosed_: function() {
// Add tab index so that the container can be focused.
this.$.container.setAttribute('tabindex', '-1');
/**
* When this is called, The drawer animation is finished, and the dialog no
Loading

0 comments on commit f16a26a

Please sign in to comment.