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

Make legend sorting buttons more compact

pull/10616/head
Alex P 2018-06-13 19:17:13 -07:00
parent edc6c3864a
commit 73290cf88a
2 changed files with 30 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/shared/components/DygraphLegendSort.tsx
View File

@ -14,7 +14,7 @@ class DygraphLegendSort extends PureComponent<Props> {
const {isAscending, top, bottom, onSort, isActive} = this.props
return (
<div
className={classnames('sort-btn btn btn-sm btn-square', {
className={classnames('sort-btn btn btn-xs btn-square', {
'btn-primary': isActive,
'btn-default': !isActive,
'sort-btn--asc': isAscending && isActive,
@ -22,9 +22,10 @@ class DygraphLegendSort extends PureComponent<Props> {
})}
onClick={onSort}
>
<div className="sort-btn--arrow" />
<div className="sort-btn--top">{top}</div>
<div className="sort-btn--bottom">{bottom}</div>
<div className="sort-btn--rotator">
<div className="sort-btn--top">{top}</div>
<div className="sort-btn--bottom">{bottom}</div>
</div>
</div>
)
}

65
ui/src/style/components/dygraphs.scss
View File

@ -168,10 +168,9 @@
background-color: $g0-obsidian;
display: block !important;
position: absolute;
padding: 11px;
padding: 8px;
z-index: $dygraph-legend-z;
border-radius: 3px;
min-width: 350px;
user-select: text;
transform: translateX(-50%);
@extend %drop-shadow;
@ -224,30 +223,23 @@
}
.dygraph-legend--timestamp {
margin-right: 8px;
height: 30px;
font-size: 13px;
font-size: 12px;
white-space: nowrap;
line-height: 30px;
font-weight: 600;
color: $g13-mist;
flex: 1 0 0%;
flex: 1 0 0;
}
.dygraph-legend--filter {
flex: 1 0 0%;
flex: 1 0 0;
margin-top: 8px;
}
.dygraph-legend--divider {
width: 100%;
margin: 8px 0;
height: 2px;
background-color: $g5-pepper;
}
.dygraph-legend--contents {
font-size: 13px;
color: $g15-platinum;
font-weight: 600;
line-height: 13px;
max-height: 123px;
margin-top: 8px;
overflow-y: auto;
@include custom-scrollbar-round($g0-obsidian, $g3-castle);
}
@ -285,34 +277,15 @@
}
}
/* Sorting Buttons */
// Sorting Buttons
.sort-btn {
position: relative;
}
.sort-btn--arrow {
.sort-btn--rotator {
width: 100%;
height: 100%;
position: absolute;
top: 8px;
right: 8px;
height: calc(100% - 16px);
width: 2px;
background-color: $g20-white;
transform: rotate(0deg);
transition: transform 0.25s ease;
&:after {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%) scaleX(0.7);
border-style: solid;
border-width: 6px;
border-color: transparent;
border-bottom-color: $g20-white;
}
}
.sort-btn--asc .sort-btn--arrow {
transform: rotate(180deg);
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sort-btn--top,
.sort-btn--bottom {
@ -320,11 +293,23 @@
font-size: 10px;
font-weight: 900;
color: $g20-white;
left: 6px;
transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sort-btn--top {
top: -5px;
left: 3px;
top: -3px;
}
.sort-btn--bottom {
bottom: -6px;
bottom: -4px;
left: 12px;
}
// Toggled State
.sort-btn.sort-btn--desc {
.sort-btn--rotator {
transform: rotate(180deg);
}
.sort-btn--top,
.sort-btn--bottom {
transform: rotate(-180deg);
}
}