IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(thresholds): updated design for grab handles

Browse Source
This commit is contained in:
Torkel Ödegaard 2016-08-11 21:22:40 +02:00
parent 89ca15f3a1
commit 224ceb0ae5
6 changed files with 54 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/plugins/panel/graph/thresholds.ts
View File

@ -19,13 +19,14 @@ export class ThresholdControls {
colorClass = 'warn'; colorClass = 'warn';
} }
return `<div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}"> return `
<div class="alert-handle-line alert-handle-line--${colorClass}"> <div class="alert-handle-wrapper alert-handle-wrapper--T${handleIndex}">
</div> <div class="alert-handle-line alert-handle-line--${colorClass}">
<div class="alert-handle" data-handle-index="${handleIndex}"> </div>
<i class="icon-gf icon-gf-${colorClass} alert-icon-${colorClass}"></i> <div class="alert-handle" data-handle-index="${handleIndex}">
<span class="alert-handle-value">${valueStr}</span> <i class="icon-gf icon-gf-${colorClass} alert-icon-${colorClass}"></i>
</div> <span class="alert-handle-value">${valueStr}<i class="alert-handle-grip"></i></span>
</div>
</div>`; </div>`;
} }

15
public/img/grab_dark.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="32" viewBox="0 0 12 32">
<g id="icomoon-ignore">
</g>
<path d="M0 2h4v4h-4v-4z" fill="#414141"></path>
<path d="M0 10h4v4h-4v-4z" fill="#414141"></path>
<path d="M0 18h4v4h-4v-4z" fill="#414141"></path>
<path d="M0 26h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 2h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 10h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 18h4v4h-4v-4z" fill="#414141"></path>
<path d="M8 26h4v4h-4v-4z" fill="#414141"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 746 B

15
public/img/grab_light.svg Normal file
View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="32" viewBox="0 0 12 32">
<g id="icomoon-ignore">
</g>
<path d="M0 2h4v4h-4v-4z" fill="#CCC"></path>
<path d="M0 10h4v4h-4v-4z" fill="#CCC"></path>
<path d="M0 18h4v4h-4v-4z" fill="#CCC"></path>
<path d="M0 26h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 2h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 10h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 18h4v4h-4v-4z" fill="#CCC"></path>
<path d="M8 26h4v4h-4v-4z" fill="#CCC"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 722 B

6
public/sass/_variables.dark.scss
View File

@ -152,8 +152,10 @@ $btn-link-color: $gray-3;
$iconContainerBackground: $black; $iconContainerBackground: $black;
$btn-divider-left: $dark-5; $btn-divider-left: $dark-4;
$btn-divider-right: $dark-1; $btn-divider-right: $dark-2;
$btn-drag-image: '../img/grab_dark.svg';
// Forms // Forms
// ------------------------- // -------------------------

5
public/sass/_variables.light.scss
View File

@ -157,8 +157,9 @@ $btn-inverse-text-color: $dark-4;
$btn-link-color: $gray-1; $btn-link-color: $gray-1;
$btn-divider-left: $dark-5; $btn-divider-left: $gray-4;
$btn-divider-right: $dark-1; $btn-divider-right: $gray-7;
$btn-drag-image: '../img/grab_light.svg';
$iconContainerBackground: $white; $iconContainerBackground: $white;

9
public/sass/components/_panel_graph.scss
View File

@ -350,6 +350,15 @@
border-left: 1px solid $btn-divider-right; border-left: 1px solid $btn-divider-right;
padding: 0.5rem; padding: 0.5rem;
line-height: 2rem; line-height: 2rem;
.alert-handle-grip {
background: url($btn-drag-image) no-repeat 50% 50%;
background-size: 8px;
float: right;
width: 1rem;
height: 2rem;
margin-right: 2px;
}
} }
&--T1 { &--T1 {