Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Add pencil icons to editable names for increased affordance

pull/10616/head
Alex P 2017-10-12 16:59:15 -07:00 committed by Andrew Watkins
parent c0a2cfa14f
commit d2eaa74c07
2 changed files with 36 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/style/components/graph.scss
View File

@ -49,15 +49,30 @@ $graph-gutter: 16px;
color: $g13-mist; color: $g13-mist;
border-radius: 4px; border-radius: 4px;
border: 2px solid transparent; border: 2px solid transparent;
position: relative;
transition: transition:
background-color 0.25s ease, background-color 0.25s ease,
border-color 0.25s ease, border-color 0.25s ease,
color 0.25s ease; color 0.25s ease;
&:after {
content: "\f058";
font-family: 'icomoon';
position: absolute;
font-size: 15px;
top: 50%;
right: 11px;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.25s ease;
color: $g11-sidewalk;
}
&:hover { &:hover {
cursor: text; cursor: text;
background-color: $g5-pepper; background-color: $g5-pepper;
color: $g20-white; color: $g20-white;
&:after {opacity: 1;}
} }
} }
.graph-name__untitled { .graph-name__untitled {

22
ui/src/style/unsorted.scss
View File

@ -353,6 +353,8 @@ $tick-script-overlay-margin: 30px;
Dashboard Name Editing Dashboard Name Editing
----------------------------------------------------------------------------- -----------------------------------------------------------------------------
*/ */
$dash-editable-header-padding: 7px;
.page-header__left.page-header__dash-editable, .page-header__left.page-header__dash-editable,
.dashboard-title, .dashboard-title,
.dashboard-title input[type="text"].form-control.dashboard-title--input, .dashboard-title input[type="text"].form-control.dashboard-title--input,
@ -367,7 +369,7 @@ $tick-script-overlay-margin: 30px;
h1 { h1 {
font-size: $page-header-size; font-size: $page-header-size;
font-weight: $page-header-weight; font-weight: $page-header-weight;
padding: 0 7px; padding: 0 $dash-editable-header-padding;
} }
input[type="text"].form-control.dashboard-title--input, input[type="text"].form-control.dashboard-title--input,
@ -378,6 +380,7 @@ $tick-script-overlay-margin: 30px;
h1 { h1 {
@include no-user-select(); @include no-user-select();
position: relative;
border: 2px solid $g0-obsidian; border: 2px solid $g0-obsidian;
color: $g17-whisper; color: $g17-whisper;
height: 30px; height: 30px;
@ -391,11 +394,28 @@ $tick-script-overlay-margin: 30px;
background-color 0.25s ease, background-color 0.25s ease,
border-color 0.25s ease; border-color 0.25s ease;
&:after {
content: "\f058";
font-family: 'icomoon';
position: absolute;
font-size: 15px;
top: 50%;
right: $dash-editable-header-padding;
transform: translateY(-50%);
opacity: 0;
transition: opacity 0.25s ease;
color: $g11-sidewalk;
}
&:hover { &:hover {
cursor: text; cursor: text;
color: $g20-white; color: $g20-white;
background-color: $g3-castle; background-color: $g3-castle;
border-color: $g3-castle; border-color: $g3-castle;
&:after {
opacity: 1;
}
} }
} }