From df170aee166ee1ef28cfe562bf51fa22a9a188a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 18 Feb 2019 15:04:26 +0100 Subject: [PATCH] Updated explore icon and style tweaks Lowered icon size and improved paddings, tried to align placement between dashboard and explore --- pkg/api/index.go | 2 +- .../app/features/explore/ExploreToolbar.tsx | 16 ++++++------ public/img/icons_dark_theme/icon_explore.svg | 24 ++++++++++++++++++ public/img/icons_light_theme/icon_explore.svg | 24 ++++++++++++++++++ public/sass/base/_icons.scss | 7 ++++++ public/sass/components/_navbar.scss | 24 ++++++++---------- public/sass/components/_sidemenu.scss | 2 +- public/sass/pages/_explore.scss | 25 +------------------ 8 files changed, 76 insertions(+), 48 deletions(-) create mode 100644 public/img/icons_dark_theme/icon_explore.svg create mode 100644 public/img/icons_light_theme/icon_explore.svg diff --git a/pkg/api/index.go b/pkg/api/index.go index e90db84016d..248ebf63f0f 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -145,7 +145,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er Text: "Explore", Id: "explore", SubTitle: "Explore your data", - Icon: "fa fa-rocket", + Icon: "gicon gicon-explore", Url: setting.AppSubUrl + "/explore", }) } diff --git a/public/app/features/explore/ExploreToolbar.tsx b/public/app/features/explore/ExploreToolbar.tsx index 786998c96c1..adcd0c8afa8 100644 --- a/public/app/features/explore/ExploreToolbar.tsx +++ b/public/app/features/explore/ExploreToolbar.tsx @@ -103,18 +103,16 @@ export class UnConnectedExploreToolbar extends PureComponent {
{exploreId === 'left' && ( - + Explore )}
-
- {exploreId === 'right' && ( - - - - )} -
+ {exploreId === 'right' && ( + + + + )}
@@ -156,7 +154,7 @@ export class UnConnectedExploreToolbar extends PureComponent { splitted, title: 'Run Query', onClick: this.onRunQuery, - buttonClassName: 'navbar-button--primary', + buttonClassName: 'navbar-button--secondary', iconClassName: loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-level-down fa-fw run-icon', iconSide: IconSide.right, })} diff --git a/public/img/icons_dark_theme/icon_explore.svg b/public/img/icons_dark_theme/icon_explore.svg new file mode 100644 index 00000000000..8d7e1b93fce --- /dev/null +++ b/public/img/icons_dark_theme/icon_explore.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_explore.svg b/public/img/icons_light_theme/icon_explore.svg new file mode 100644 index 00000000000..8732b2d9ae8 --- /dev/null +++ b/public/img/icons_light_theme/icon_explore.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 2d0cb394da1..8d171673f6b 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -192,6 +192,10 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); } +.gicon-explore { + background-image: url('../img/icons_#{$theme-name}_theme/icon_explore.svg'); +} + .sidemenu { .gicon-dashboard { background-image: url('../img/icons_dark_theme/icon_dashboard.svg'); @@ -205,6 +209,9 @@ .gicon-question { background-image: url('../img/icons_dark_theme/icon_question.svg'); } + .gicon-explore { + background-image: url('../img/icons_dark_theme/icon_explore.svg'); + } } .fa--permissions-list { diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 86494f9e47a..b96f7bb7fc5 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -1,9 +1,8 @@ .navbar { position: relative; - padding-left: 20px; z-index: $zindex-navbar-fixed; height: $navbarHeight; - padding-right: 20px; + padding: 0 20px 0 50px; display: flex; flex-grow: 1; border-bottom: 1px solid transparent; @@ -57,15 +56,14 @@ white-space: nowrap; display: block; margin: 0; - color: darken($link-color, 5%); + color: $headings-color; font-size: $font-size-lg; - padding-left: 1rem; min-height: $navbarHeight; line-height: $navbarHeight; .fa-caret-down { font-size: 60%; - padding-left: 0.2rem; + padding-left: 6px; } &--search { @@ -73,12 +71,12 @@ } .gicon { + top: -2px; position: relative; - top: -1px; - font-size: 19px; + font-size: 17px; line-height: 8px; opacity: 0.75; - margin-right: 13px; + margin-right: 10px; display: none; } @@ -123,7 +121,7 @@ height: 30px; color: $text-muted; border: 1px solid $navbar-button-border; - margin-right: 3px; + margin-left: 3px; white-space: nowrap; .gicon { @@ -152,19 +150,19 @@ } } - &--primary { - @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); + &--secondary { + @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); } } @include media-breakpoint-up(sm) { .navbar { - padding-left: 50px; + padding-left: 60px; } .sidemenu-open { .navbar { - padding-left: 15px; + padding-left: 20px; margin-left: 0; } } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 44941540598..f30bdb5c79e 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -253,7 +253,7 @@ li.sidemenu-org-switcher { } .sidemenu__logo_small_breakpoint { - padding: 16px 10px 26px; + padding: 14px 10px 26px 13px; display: flex; flex-direction: row; justify-content: space-between; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 151130a69e2..50d2c188862 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -30,12 +30,6 @@ padding: 0; margin-left: 0; } - - .explore-toolbar-header-title { - .navbar-page-btn { - padding-left: 0; - } - } } .explore-toolbar { @@ -87,22 +81,9 @@ align-items: center; } -.explore-toolbar-header-title { - color: darken($link-color, 5%); - - .navbar-page-btn { - padding-left: $dashboard-padding; - } - - .fa { - font-size: 100%; - opacity: 0.75; - margin-right: 0.5em; - } -} - .explore-toolbar-header-close { margin-left: auto; + color: $text-color-weak; } .explore-toolbar-content { @@ -156,7 +137,6 @@ .sidemenu-open { .explore-toolbar-header-title { .navbar-page-btn { - padding-left: 0; margin-left: 0; } } @@ -164,7 +144,6 @@ .explore-toolbar-header-title { .navbar-page-btn { - padding-left: 0; margin-left: $dashboard-padding; } } @@ -185,7 +164,6 @@ .sidemenu-open { .explore-toolbar-header-title { .navbar-page-btn { - padding-left: 0; margin-left: $dashboard-padding; } } @@ -193,7 +171,6 @@ .explore-toolbar-header-title { .navbar-page-btn { - padding-left: 0; margin-left: $dashboard-padding; } }