Skip to content

N
nexpie-grafana-theme
Commit df170aee by Torkel Ödegaard
Options

Updated explore icon and style tweaks 

Lowered icon size and improved paddings, tried to align placement between dashboard and explore
parent abddb442
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