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

Use tab list style for visualization type selector

pull/10616/head
Alex P 2017-05-23 02:13:31 -07:00
parent a64e7008a9
commit ae27f3aec1
2 changed files with 6 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,11 +12,11 @@ const OverlayControls = props => {
<h3 className="overlay--graph-name">Cell Editor</h3> <h3 className="overlay--graph-name">Cell Editor</h3>
<div className="overlay-controls--right"> <div className="overlay-controls--right">
<p>Visualization Type:</p> <p>Visualization Type:</p>
<ul className="toggle toggle-sm"> <ul className="nav nav-tablist nav-tablist-sm">
{graphTypes.map(graphType => ( {graphTypes.map(graphType => (
<li <li
key={graphType.type} key={graphType.type}
className={classnames('toggle-btn', { className={classnames({
active: graphType.type === selectedGraphType, active: graphType.type === selectedGraphType,
})} })}
onClick={() => onSelectGraphType(graphType.type)} onClick={() => onSelectGraphType(graphType.type)}

27
ui/src/style/pages/overlay-technology.scss
View File

@ -54,13 +54,16 @@ $overlay-z: 100;
margin: 0 0 0 5px; margin: 0 0 0 5px;
} }
p { p {
width: auto;
font-weight: 600; font-weight: 600;
color: $g13-mist; color: $g13-mist;
margin: 0; margin: 0 6px 0 0;
@include no-user-select; @include no-user-select;
white-space: nowrap;
} }
} }
.overlay--graph-name { .overlay--graph-name {
width: auto;
margin: 0; margin: 0;
font-size: 17px; font-size: 17px;
font-weight: 400; font-weight: 400;
@ -78,28 +81,6 @@ $overlay-z: 100;
.overlay-controls .confirm-buttons { .overlay-controls .confirm-buttons {
margin-left: 32px; margin-left: 32px;
} }
.overlay-controls .confirm-buttons .btn {
height: 30px;
line-height: 30px;
padding: 0 9px;
& > span.icon {
font-size: 16px;
}
}
.overlay-controls .toggle {
.toggle-btn {
background-color: $overlay-controls-bg;
&:hover {
background-color: $g4-onyx;
}
&.active {
background-color: $g5-pepper;
}
}
}
/* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */ /* Graph editing in Dashboards is a little smaller so the dash can be seen in the background */
.overlay-technology .graph { .overlay-technology .graph {