root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 250 Packages Projects Releases Wiki Activity

Dashlist: Tweaked design of folder addition (#27241)

This commit is contained in:
Torkel Ödegaard 2020-08-27 09:49:07 +02:00 committed by GitHub
parent 5e27654298
commit 093477c036
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
public/app/plugins/panel/dashlist/module.html
View File

@ -6,13 +6,10 @@
</h6> </h6>
<div class="dashlist-item" ng-repeat="dash in group.list"> <div class="dashlist-item" ng-repeat="dash in group.list">
<a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}"> <a class="dashlist-link dashlist-link-{{dash.type}}" href="{{dash.url}}">
<span class="dashlist-title"> <div class="dashlist-link-body">
{{dash.title}} <div class="dashlist-title">{{dash.title}}</div>
</span> <div ng-if="dash.folderTitle" class="dashlist-folder">{{dash.folderTitle}}</div>
<span ng-if="dash.folderTitle" class="dashlist-folder"> </div>
<icon name="'folder'" type="mono" size="'xs'"></icon>
{{dash.folderTitle}}
</span>
<span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)"> <span class="dashlist-star" ng-click="ctrl.starDashboard(dash, $event)">
<icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon> <icon name="dash.isStarred ? 'favorite':'star'" type="dash.isStarred ? 'mono':'default'"></icon>
</span> </span>

40
public/sass/components/_panel_dashlist.scss
View File

@ -8,26 +8,30 @@
padding-top: 3px; padding-top: 3px;
} }
.dashlist { .dashlist-link {
&-link { @include list-item();
@include list-item(); display: flex;
.fa { .fa {
padding-top: 3px; padding-top: 3px;
}
.fa-star {
color: $orange;
}
} }
&-star { .fa-star {
float: right; color: $orange;
}
&-folder {
color: $text-color-weak;
margin-left: $space-sm;
font-size: $font-size-xs;
} }
} }
.dashlist-star {
display: flex;
align-items: center;
color: $text-color-weak;
}
.dashlist-folder {
color: $text-color-weak;
font-size: $font-size-xs;
}
.dashlist-link-body {
flex-grow: 1;
}