Skip to content

N
nexpie-grafana-theme
Commit 9d78960c by Torkel Ödegaard Committed by GitHub
Options

Merge pull request #15503 from grafana/explore-icon 

Updated explore icon and style tweaks
parents caa47759 df170aee
Showing with 76 additions and 48 deletions
pkg/api/index.go
...@@ -145,7 +145,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er ...@@ -145,7 +145,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er
Text: "Explore", Text: "Explore",
Id: "explore", Id: "explore",
SubTitle: "Explore your data", SubTitle: "Explore your data",
Icon: "fa fa-rocket", Icon: "gicon gicon-explore",
Url: setting.AppSubUrl + "/explore", Url: setting.AppSubUrl + "/explore",
}) })
} }
......
public/app/features/explore/ExploreToolbar.tsx
...@@ -103,18 +103,16 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -103,18 +103,16 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
<div className="explore-toolbar-header-title"> <div className="explore-toolbar-header-title">
{exploreId === 'left' && ( {exploreId === 'left' && (
<span className="navbar-page-btn"> <span className="navbar-page-btn">
<i className="fa fa-rocket fa-fw" /> <i className="gicon gicon-explore" />
Explore Explore
</span> </span>
)} )}
</div> </div>
<div className="explore-toolbar-header-close"> {exploreId === 'right' && (
{exploreId === 'right' && ( <a className="explore-toolbar-header-close" onClick={this.props.closeSplit}>
<a onClick={this.props.closeSplit}> <i className="fa fa-times fa-fw" />
<i className="fa fa-times fa-fw" /> </a>
</a> )}
)}
</div>
</div> </div>
</div> </div>
<div className="explore-toolbar-item"> <div className="explore-toolbar-item">
...@@ -156,7 +154,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> { ...@@ -156,7 +154,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
splitted, splitted,
title: 'Run Query', title: 'Run Query',
onClick: this.onRunQuery, 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', iconClassName: loading ? 'fa fa-spinner fa-fw fa-spin run-icon' : 'fa fa-level-down fa-fw run-icon',
iconSide: IconSide.right, iconSide: IconSide.right,
})} })}
......
public/img/icons_dark_theme/icon_explore.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#E3E3E3;}
</style>
<g>
<polygon class="st0" points="7.93,14.21 6.99,17.47 9.52,15.21 9,14.28 "/>
<polygon class="st0" points="14.15,7.86 15.08,4.6 12.56,6.86 13.08,7.79 "/>
<polygon class="st0" points="14.28,13.07 14.22,14.14 17.47,15.08 15.22,12.55 "/>
<polygon class="st0" points="7.8,9 7.86,7.93 4.61,6.99 6.86,9.52 "/>
<path class="st0" d="M8.82,1.31L8.36,9.35l-7.05,3.9l8.04,0.46l3.9,7.05l0.46-8.04l7.05-3.9l-8.04-0.46L8.82,1.31z M11.38,11.78
c-0.41,0.19-0.89,0.01-1.08-0.4c-0.19-0.41-0.01-0.89,0.4-1.08c0.41-0.19,0.89-0.01,1.08,0.4C11.97,11.1,11.79,11.59,11.38,11.78z"
/>
<path class="st1" d="M21.72,8.56c-1.35-5.92-7.24-9.63-13.16-8.28C2.64,1.63-1.07,7.52,0.28,13.44s7.24,9.63,13.16,8.28
C19.36,20.37,23.07,14.48,21.72,8.56z M15.08,4.6l-0.94,3.25l-1.07-0.06l-0.52-0.94L15.08,4.6z M7.86,7.93L7.8,9L6.86,9.52
L4.61,6.99L7.86,7.93z M6.99,17.47l0.94-3.25L9,14.28l0.52,0.94L6.99,17.47z M14.22,14.14l0.06-1.07l0.94-0.52l2.25,2.53
L14.22,14.14z M13.72,12.72l-0.46,8.04l-3.9-7.05l-8.04-0.46l7.05-3.9l0.46-8.04l3.9,7.05l8.04,0.46L13.72,12.72z"/>
<path class="st1" d="M10.7,10.29c-0.41,0.19-0.59,0.67-0.4,1.08c0.19,0.41,0.67,0.59,1.08,0.4c0.41-0.19,0.59-0.67,0.4-1.08
C11.59,10.28,11.1,10.11,10.7,10.29z"/>
</g>
</svg>
public/img/icons_light_theme/icon_explore.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="22px" height="22px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#52545c;}
</style>
<g>
<polygon class="st0" points="7.93,14.21 6.99,17.47 9.52,15.21 9,14.28 "/>
<polygon class="st0" points="14.15,7.86 15.08,4.6 12.56,6.86 13.08,7.79 "/>
<polygon class="st0" points="14.28,13.07 14.22,14.14 17.47,15.08 15.22,12.55 "/>
<polygon class="st0" points="7.8,9 7.86,7.93 4.61,6.99 6.86,9.52 "/>
<path class="st0" d="M8.82,1.31L8.36,9.35l-7.05,3.9l8.04,0.46l3.9,7.05l0.46-8.04l7.05-3.9l-8.04-0.46L8.82,1.31z M11.38,11.78
c-0.41,0.19-0.89,0.01-1.08-0.4c-0.19-0.41-0.01-0.89,0.4-1.08c0.41-0.19,0.89-0.01,1.08,0.4C11.97,11.1,11.79,11.59,11.38,11.78z"
/>
<path class="st1" d="M21.72,8.56c-1.35-5.92-7.24-9.63-13.16-8.28C2.64,1.63-1.07,7.52,0.28,13.44s7.24,9.63,13.16,8.28
C19.36,20.37,23.07,14.48,21.72,8.56z M15.08,4.6l-0.94,3.25l-1.07-0.06l-0.52-0.94L15.08,4.6z M7.86,7.93L7.8,9L6.86,9.52
L4.61,6.99L7.86,7.93z M6.99,17.47l0.94-3.25L9,14.28l0.52,0.94L6.99,17.47z M14.22,14.14l0.06-1.07l0.94-0.52l2.25,2.53
L14.22,14.14z M13.72,12.72l-0.46,8.04l-3.9-7.05l-8.04-0.46l7.05-3.9l0.46-8.04l3.9,7.05l8.04,0.46L13.72,12.72z"/>
<path class="st1" d="M10.7,10.29c-0.41,0.19-0.59,0.67-0.4,1.08c0.19,0.41,0.67,0.59,1.08,0.4c0.41-0.19,0.59-0.67,0.4-1.08
C11.59,10.28,11.1,10.11,10.7,10.29z"/>
</g>
</svg>
public/sass/base/_icons.scss
...@@ -192,6 +192,10 @@ ...@@ -192,6 +192,10 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); 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 { .sidemenu {
.gicon-dashboard { .gicon-dashboard {
background-image: url('../img/icons_dark_theme/icon_dashboard.svg'); background-image: url('../img/icons_dark_theme/icon_dashboard.svg');
...@@ -205,6 +209,9 @@ ...@@ -205,6 +209,9 @@
.gicon-question { .gicon-question {
background-image: url('../img/icons_dark_theme/icon_question.svg'); 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 { .fa--permissions-list {
......
public/sass/components/_navbar.scss
.navbar { .navbar {
position: relative; position: relative;
padding-left: 20px;
z-index: $zindex-navbar-fixed; z-index: $zindex-navbar-fixed;
height: $navbarHeight; height: $navbarHeight;
padding-right: 20px; padding: 0 20px 0 50px;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
...@@ -57,15 +56,14 @@ ...@@ -57,15 +56,14 @@
white-space: nowrap; white-space: nowrap;
display: block; display: block;
margin: 0; margin: 0;
color: darken($link-color, 5%); color: $headings-color;
font-size: $font-size-lg; font-size: $font-size-lg;
padding-left: 1rem;
min-height: $navbarHeight; min-height: $navbarHeight;
line-height: $navbarHeight; line-height: $navbarHeight;
.fa-caret-down { .fa-caret-down {
font-size: 60%; font-size: 60%;
padding-left: 0.2rem; padding-left: 6px;
} }
&--search { &--search {
...@@ -73,12 +71,12 @@ ...@@ -73,12 +71,12 @@
} }
.gicon { .gicon {
top: -2px;
position: relative; position: relative;
top: -1px; font-size: 17px;
font-size: 19px;
line-height: 8px; line-height: 8px;
opacity: 0.75; opacity: 0.75;
margin-right: 13px; margin-right: 10px;
display: none; display: none;
} }
...@@ -123,7 +121,7 @@ ...@@ -123,7 +121,7 @@
height: 30px; height: 30px;
color: $text-muted; color: $text-muted;
border: 1px solid $navbar-button-border; border: 1px solid $navbar-button-border;
margin-right: 3px; margin-left: 3px;
white-space: nowrap; white-space: nowrap;
.gicon { .gicon {
...@@ -152,19 +150,19 @@ ...@@ -152,19 +150,19 @@
} }
} }
&--primary { &--secondary {
@include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
} }
} }
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
.navbar { .navbar {
padding-left: 50px; padding-left: 60px;
} }
.sidemenu-open { .sidemenu-open {
.navbar { .navbar {
padding-left: 15px; padding-left: 20px;
margin-left: 0; margin-left: 0;
} }
} }
......
public/sass/components/_sidemenu.scss
...@@ -253,7 +253,7 @@ li.sidemenu-org-switcher { ...@@ -253,7 +253,7 @@ li.sidemenu-org-switcher {
} }
.sidemenu__logo_small_breakpoint { .sidemenu__logo_small_breakpoint {
padding: 16px 10px 26px; padding: 14px 10px 26px 13px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
......
public/sass/pages/_explore.scss
...@@ -30,12 +30,6 @@ ...@@ -30,12 +30,6 @@
padding: 0; padding: 0;
margin-left: 0; margin-left: 0;
} }
.explore-toolbar-header-title {
.navbar-page-btn {
padding-left: 0;
}
}
} }
.explore-toolbar { .explore-toolbar {
...@@ -87,22 +81,9 @@ ...@@ -87,22 +81,9 @@
align-items: center; 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 { .explore-toolbar-header-close {
margin-left: auto; margin-left: auto;
color: $text-color-weak;
} }
.explore-toolbar-content { .explore-toolbar-content {
...@@ -156,7 +137,6 @@ ...@@ -156,7 +137,6 @@
.sidemenu-open { .sidemenu-open {
.explore-toolbar-header-title { .explore-toolbar-header-title {
.navbar-page-btn { .navbar-page-btn {
padding-left: 0;
margin-left: 0; margin-left: 0;
} }
} }
...@@ -164,7 +144,6 @@ ...@@ -164,7 +144,6 @@
.explore-toolbar-header-title { .explore-toolbar-header-title {
.navbar-page-btn { .navbar-page-btn {
padding-left: 0;
margin-left: $dashboard-padding; margin-left: $dashboard-padding;
} }
} }
...@@ -185,7 +164,6 @@ ...@@ -185,7 +164,6 @@
.sidemenu-open { .sidemenu-open {
.explore-toolbar-header-title { .explore-toolbar-header-title {
.navbar-page-btn { .navbar-page-btn {
padding-left: 0;
margin-left: $dashboard-padding; margin-left: $dashboard-padding;
} }
} }
...@@ -193,7 +171,6 @@ ...@@ -193,7 +171,6 @@
.explore-toolbar-header-title { .explore-toolbar-header-title {
.navbar-page-btn { .navbar-page-btn {
padding-left: 0;
margin-left: $dashboard-padding; margin-left: $dashboard-padding;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment