IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-08-14 07:04:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Updated explore icon and style tweaks

Browse Source 
Lowered icon size and improved paddings, tried to align placement between dashboard and explore
This commit is contained in:
Torkel Ödegaard
2019-02-18 18:26:24 +01:00
parent abddb442a1
commit df170aee16
8 changed files with 76 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pkg/api/index.go
+1 -1
View File
@@ -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
+7 -9
View File
@@ -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, {}> {
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
+24
View File
@@ -0,0 +1,24 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/img/icons_light_theme/icon_explore.svg
+24
View File
@@ -0,0 +1,24 @@
<?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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

public/sass/base/_icons.scss
+7
View File
@@ -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 @@
.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
+11 -13
View File
@@ -1,9 +1,8 @@
.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 @@
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 @@
} }
.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 @@
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 @@
} }
} }
&--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
+1 -1
View File
@@ -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
+1 -24
View File
@@ -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 @@
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 @@
.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 @@
.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 @@
.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 @@
.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;
} }
} }