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

ux: search design update

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-11-29 13:21:42 +01:00
parent 6c5748203d
commit d981fe4f04
6 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/app/core/components/search/search.html
View File

@ -74,15 +74,10 @@
</div>
</span>
<span class="search-item__tags">
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
<span ng-click="ctrl.filterByTag(tag, $event)" ng-repeat="tag in item.tags" tag-color-from-name="tag" class="label label-tag">
{{tag}}
</span>
</span>
<span class="search-item__actions">
<span class="search-item__actions__item" ng-click="ctrl.toggleStar()">
<i class="fa" ng-class="{'fa-star': item.isStarred, 'fa-star-o': !item.isStarred}"></i>
</span>
</span>
</a>
</div>
</div>

4
public/sass/_variables.dark.scss
View File

@ -51,7 +51,7 @@ $critical: #ed2e18;
// Scaffolding
// -------------------------
$body-bg: rgb(23,24,25);
$page-bg: $dark-2;
$page-bg: rgb(22, 23, 25);
$body-color: $gray-4;
$text-color: $gray-4;
$text-color-strong: $white;
@ -64,7 +64,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
// gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
$page-gradient: linear-gradient(180deg, #222426 10px, rgba(15, 15, 16, .03) 100px, rgba(10, 10, 11, .03));
$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);
// Links
// -------------------------

1
public/sass/_variables.scss
View File

@ -224,6 +224,7 @@ $side-menu-width: 60px;
// dashboard
$panel-margin: 10px;
$dashboard-padding: $panel-margin * 2;
$panel-padding: 0px 10px 5px 10px;
// tabs
$tabs-padding-top: 0.6rem;

28
public/sass/components/_search.scss
View File

@ -69,6 +69,7 @@
padding: $spacer;
position: relative;
flex-grow: 10;
margin-bottom: 1rem;
.label-tag {
margin-left: 6px;
@ -84,9 +85,16 @@
}
}
.search-section {
background: $panel-bg;
border: $panel-border;
padding: $panel-padding;
margin-bottom: 8px;
}
.search-section__header {
font-size: $font-size-h6;
padding: 0.6rem 0;
padding: 8px 0 2px 0;
color: $text-color-weak;
display: flex;
flex-grow: 1;
@ -105,7 +113,7 @@
}
.search-section__header__icon {
padding: 3px 10px;
padding: 5px 10px;
}
.search-section__header__toggle {
@ -170,24 +178,34 @@
}
.search-item__tags {
padding: 8px;
padding: 10px;
}
.search-item__actions {
flex: 0 0 auto;
padding: 0 10px 0 0;
}
.search-item__actions__item {
display: none;
display: inline-block;
opacity: 0;
width: 0;
transition: all 0.2s ease-in-out;
.fa-star, .fa-star-o {
color: $orange;
line-height: 37px;
}
}
.search-item:hover {
.search-item__actions__item {
opacity: 0.8;
width: 15px;
opacity: 1;
}
}
.search-button-row {
text-align: center;
padding: $spacer*2 $spacer;
background: $panel-bg;
}

12
public/sass/layout/_page.scss
View File

@ -141,16 +141,16 @@
display: block;
float: left;
font-size: 12px;
line-height: 36px;
line-height: 30px;
padding: 0 7px 0 37px;
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
position: relative;
box-shadow: $card-shadow;
&:first-child {
padding-left: 13px;
padding-left: 10px;
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
font-size: 20px;
font-size: 18px;
}
&:first-child:before {
@ -178,11 +178,11 @@
content: '';
position: absolute;
top: 0;
right: -18px; // half of square's length
right: -14px; // half of square's length
// same dimension as the line-height of .breadcrumb-item
width: 36px;
height: 36px;
width: 30px;
height: 30px;
transform: scale(0.707) rotate(45deg);
// we need to prevent the arrows from getting buried under the next link

2
public/sass/pages/_dashboard.scss
View File

@ -42,7 +42,7 @@ div.flot-text {
}
.panel-content {
padding: 0px 10px 5px 10px;
padding: $panel-padding;
height: calc(100% - 27px);
position: relative;
overflow: hidden;