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

Merge pull request #1238 from influxdata/misc-aesthetic-improvements 

Misc Aesthetic Improvements
pull/10616/head
Alex Paxton 2017-04-11 13:50:44 -07:00 committed by GitHub
parent 9f9e0bf195 007aef43f5
commit 3f4cd78c81
9 changed files with 71 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/dashboards/components/DashboardHeaderEdit.js
View File

@ -23,10 +23,10 @@ class DashboardEditHeader extends Component {
<div className="page-header__container">
<div className="page-header__left">
<input
className="chronograf-header__editing"
className="page-header--editing"
autoFocus={true}
value={name}
placeholder="Dashboard name"
placeholder="Name this Dashboard"
onChange={(e) => this.handleChange(e.target.value)}
/>
</div>

4
ui/src/kapacitor/components/RuleHeader.js
View File

@ -81,7 +81,7 @@ export const RuleHeader = React.createClass({
const name = isEditingName ?
(<input
className="chronograf-header__editing"
className="page-header--editing kapacitor-theme"
autoFocus={true}
defaultValue={rule.name}
ref={r => this.ruleName = r}
@ -89,7 +89,7 @@ export const RuleHeader = React.createClass({
onBlur={() => this.handleEditNameBlur(rule)}
placeholder="Name your rule"
/>) :
(<h1 className="chronograf-header__editable" onClick={this.toggleEditName} data-for="rename-kapacitor-tooltip" data-tip="Click to Rename">
(<h1 className="page-header--editable kapacitor-theme" onClick={this.toggleEditName} data-for="rename-kapacitor-tooltip" data-tip="Click to Rename">
{rule.name}
<span className="icon pencil"></span>
<ReactTooltip id="rename-kapacitor-tooltip" delayShow={200} effect="solid" html={true} offset={{top: 2}} place="bottom" class="influx-tooltip kapacitor-tooltip place-bottom" />

1
ui/src/style/chronograf.scss
View File

@ -29,6 +29,7 @@
@import 'components/input-tag-list';
@import 'components/group-by-time-dropdown';
@import 'components/page-header-dropdown';
@import 'components/page-header-editable';
@import 'components/multi-select-dropdown';
@import 'components/page-spinner';
@import 'components/flash-messages';

1
ui/src/style/components/graph-tips.scss
View File

@ -20,5 +20,6 @@
color: $g0-obsidian;
line-height: 18px;
font-weight: 900;
cursor: default;
}
}

6
ui/src/style/components/page-header-dropdown.scss
View File

@ -6,10 +6,10 @@
width: auto;
border: 0;
background-color: transparent;
text-transform: uppercase;
text-transform: none;
padding-right: (11px + 12px); // caret width + offset
font-size: 17px;
font-weight: 400;
font-size: $page-header-size;
font-weight: $page-header-weight;
transition: color 0.25s ease;
@include no-user-select();
}

43
ui/src/style/components/page-header-editable.scss Normal file
View File

@ -0,0 +1,43 @@
/*
Click to Rename Page Header
----------------------------------------------------------------
*/
.page-header--editable {
transition: color 0.25s ease;
&:hover {
color: $c-pool;
cursor: text !important;
}
&.kapacitor-theme:hover {
color: $c-rainforest;
}
.icon {
cursor: inherit;
margin-left: 5px;
position: relative;
top: -1.5px;
}
}
.page-header--editing {
border: 0;
outline: none;
background-color: $g0-obsidian;
font-size: $page-header-size;
font-weight: $page-header-weight;
padding: 0;
flex: 1;
position: relative;
top: -1px;
&:focus {
color: $c-pool;
}
&.kapacitor-theme:focus {
color: $c-rainforest;
}
&::-webkit-input-placeholder { color: $g9-mountain; }
&::-moz-placeholder { color: $g9-mountain; }
&:-ms-input-placeholder { color: $g9-mountain; }
&:-moz-placeholder { color: $g9-mountain; }
}

15
ui/src/style/layout/page-header.scss
View File

@ -2,6 +2,11 @@
Page Header
----------------------------------------------
*/
$page-header-size: 19px;
$page-header-weight: 400 !important;
.page-header {
height: $chronograf-page-header-height;
width: 100%;
@ -21,13 +26,14 @@
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
width: 100%;
max-width: ($page-wrapper-max-width - $page-wrapper-padding - $page-wrapper-padding);
}
h1 {
text-transform: uppercase;
font-size: 17px;
font-weight: 400;
text-transform: none;
font-size: $page-header-size;
font-weight: $page-header-weight;
margin: 0;
display: inline-block;
vertical-align: middle;
@ -35,6 +41,7 @@
}
&__left,
&__right {
flex: 1 0 0;
display: flex;
align-items: center;
@ -43,11 +50,13 @@
}
}
&__left {
justify-content: flex-start;
> * {
margin: 0 4px 0 0;
}
}
&__right {
justify-content: flex-end;
> * {
margin: 0 0 0 4px;
}

39
ui/src/style/pages/kapacitor.scss
View File

@ -99,8 +99,9 @@ $kapacitor-font-sm: 13px;
.rule-section-heading {
margin: 0;
padding: $kapacitor-page-padding 0 $kap-padding-md $kapacitor-page-gutter;
font-weight: 400;
color: $g13-mist;
font-size: $page-header-size;
font-weight: $page-header-weight;
color: $g12-forge;
position: relative;
@include no-user-select();
@ -655,36 +656,4 @@ div.qeditor.kapacitor-metric-selector {
.size-49 {
width: 49px;
}
}
.chronograf-header__editable {
transition: color 0.25s ease;
&:hover {
color: $g13-mist;
cursor: text !important;
}
.icon {
cursor: inherit;
margin-left: 5px;
position: relative;
top: -1.5px;
}
}
.chronograf-header__editing {
border: 0;
outline: none;
background-color: $g0-obsidian;
font-size: 20px;
font-weight: 400;
padding: 0;
width: 466px;
&:focus {
color: $kapacitor-accent;
}
&::-webkit-input-placeholder { color: $g9-mountain; }
&::-moz-placeholder { color: $g9-mountain; }
&:-ms-input-placeholder { color: $g9-mountain; }
&:-moz-placeholder { color: $g9-mountain; }
}
}

4
ui/src/style/theme/theme-dark.scss
View File

@ -27,7 +27,9 @@
border: 0;
.panel-title {
color: $g10-wolf !important;
color: $g12-forge !important;
font-size: 19px;
font-weight: 400 !important;
}
.panel-body {
padding: 30px;