IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-26 16:27:02 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: alternative row design

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-08-25 18:53:35 +02:00
parent 4819e50441
commit ba1fbe0786
2 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
public/app/core/components/row_ctrl.ts
View File

@ -4,25 +4,29 @@ import _ from 'lodash';
export class DashboardRowCtrl {
static template = `
<a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
<span class="dashboard-row__chevron">
<div class="dashboard-row__center">
<div class="dashboard-row__actions-left">
<i class="fa fa-chevron-down" ng-hide="ctrl.panel.collapse"></i>
<i class="fa fa-chevron-right" ng-show="ctrl.panel.collapse"></i>
</span>
<span class="dashboard-row__title-text">
{{ctrl.panel.title | interpolateTemplateVars:this}}
</span>
</a>
<div class="dashboard-row__panel_count">
({{ctrl.panel.hiddenPanels.length}} hidden panels)
</div>
<div class="dashboard-row__actions">
<a class="pointer" ng-click="ctrl.openSettings()"><span class="fa fa-cog"></i></a>
</div>
<div class="dashboard-row__drag grid-drag-handle">
</div>
<a class="dashboard-row__title pointer" ng-click="ctrl.toggle()">
<span class="dashboard-row__title-text">
{{ctrl.panel.title | interpolateTemplateVars:this}}
</span>
</a>
<div class="dashboard-row__actions-right">
<a class="pointer" ng-click="ctrl.openSettings()"><span class="fa fa-cog"></i></a>
</div>
</div>
<div class="dashboard-row__panel_count">
({{ctrl.panel.hiddenPanels.length}} hidden panels)
</div>
<div class="dashboard-row__drag grid-drag-handle">
</div>
`;
dashboard: any;
panel: any;

45
public/sass/components/_row.scss
View File

@ -5,7 +5,8 @@ $dashboard-row-height: 30px;
height: $dashboard-row-height;
line-height: $dashboard-row-height;
align-items: center;
padding: 0 0.5rem;
align-content: center;
justify-content: center;
&--collapse {
background: $panel-bg;
@ -22,11 +23,8 @@ $dashboard-row-height: 30px;
}
&:hover {
.dashboard-row__chevron {
color: $link-color;
}
.dashboard-row__actions {
.dashboard-row__actions-left,
.dashboard-row__actions-right {
visibility: visible;
opacity: 1;
transition: opacity 200ms ease-in-out 100ms;
@ -34,29 +32,39 @@ $dashboard-row-height: 30px;
}
}
.dashboard-row__title {
.dashboard-row__center {
position: relative;
flex-grow: 1;
display: flex;
flex-direction: row;
margin-right: $panel-margin;
margin-left: 0;
}
.dashboard-row__title {
@include brand-bottom-border();
position: relative;
flex-grow: 0;
font-size: 1.15rem;
font-weight: $font-weight-semi-bold;
padding: 0rem 1rem 0.3rem 1rem;
}
.dashboard-row__chevron {
.dashboard-row__actions-left {
position: absolute;
left: -23px;
font-size: $font-size-xs;
color: $text-muted;
position: relative;
top: 1px;
visibility: hidden;
opacity: 0;
}
.dashboard-row__actions {
.dashboard-row__actions-right {
position: absolute;
right: -40px;
padding-right: 1rem;
font-size: $font-size-sm;
visibility: hidden;
opacity: 0;
top: 0px;
a {
color: $text-color-weak;
padding-left: $spacer;
@ -67,7 +75,6 @@ $dashboard-row-height: 30px;
}
.dashboard-row__title-text {
padding-left: 0.4rem;
color: $text-color;
}
@ -77,6 +84,9 @@ $dashboard-row-height: 30px;
font-size: $font-size-sm;
font-weight: normal;
display: none;
position: absolute;
right: 30px;
top: 0;
}
.dashboard-row__drag {
@ -86,6 +96,9 @@ $dashboard-row-height: 30px;
background: url("../img/grab_dark.svg") no-repeat 50% 50%;
background-size: 8px;
visibility: hidden;
position: absolute;
top: 0;
right: 0;
}
.panels-wrapper {