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
Text: "Explore",
Id: "explore",
SubTitle: "Explore your data",
Icon: "fa fa-rocket",
Icon: "gicon gicon-explore",
Url: setting.AppSubUrl + "/explore",
})
}
......
public/app/features/explore/ExploreToolbar.tsx
......@@ -103,18 +103,16 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
<div className="explore-toolbar-header-title">
{exploreId === 'left' && (
<span className="navbar-page-btn">
<i className="fa fa-rocket fa-fw" />
<i className="gicon gicon-explore" />
Explore
</span>
)}
</div>
<div className="explore-toolbar-header-close">
{exploreId === 'right' && (
<a onClick={this.props.closeSplit}>
<i className="fa fa-times fa-fw" />
</a>
)}
</div>
{exploreId === 'right' && (
<a className="explore-toolbar-header-close" onClick={this.props.closeSplit}>
<i className="fa fa-times fa-fw" />
</a>
)}
</div>
</div>
<div className="explore-toolbar-item">
......@@ -156,7 +154,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
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,
})}
......
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 @@
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 {
......
public/sass/components/_navbar.scss
.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;
}
}
......
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;
......
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;
}
}
......
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