Skip to content

N
nexpie-grafana-theme
Commit d981fe4f by Torkel Ödegaard
Options

ux: search design update

parent 6c574820
Showing with 34 additions and 20 deletions
public/app/core/components/search/search.html
...@@ -74,15 +74,10 @@ ...@@ -74,15 +74,10 @@
</div> </div>
</span> </span>
<span class="search-item__tags"> <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}} {{tag}}
</span> </span>
</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> </a>
</div> </div>
</div> </div>
......
public/sass/_variables.dark.scss
...@@ -51,7 +51,7 @@ $critical: #ed2e18; ...@@ -51,7 +51,7 @@ $critical: #ed2e18;
// Scaffolding // Scaffolding
// ------------------------- // -------------------------
$body-bg: rgb(23,24,25); $body-bg: rgb(23,24,25);
$page-bg: $dark-2; $page-bg: rgb(22, 23, 25);
$body-color: $gray-4; $body-color: $gray-4;
$text-color: $gray-4; $text-color: $gray-4;
$text-color-strong: $white; $text-color-strong: $white;
...@@ -64,7 +64,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); ...@@ -64,7 +64,7 @@ $text-shadow-faint: 1px 1px 4px rgb(45, 45, 45);
// gradients // 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%); $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 // Links
// ------------------------- // -------------------------
......
public/sass/_variables.scss
...@@ -224,6 +224,7 @@ $side-menu-width: 60px; ...@@ -224,6 +224,7 @@ $side-menu-width: 60px;
// dashboard // dashboard
$panel-margin: 10px; $panel-margin: 10px;
$dashboard-padding: $panel-margin * 2; $dashboard-padding: $panel-margin * 2;
$panel-padding: 0px 10px 5px 10px;
// tabs // tabs
$tabs-padding-top: 0.6rem; $tabs-padding-top: 0.6rem;
......
public/sass/components/_search.scss
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
padding: $spacer; padding: $spacer;
position: relative; position: relative;
flex-grow: 10; flex-grow: 10;
margin-bottom: 1rem;
.label-tag { .label-tag {
margin-left: 6px; margin-left: 6px;
...@@ -84,9 +85,16 @@ ...@@ -84,9 +85,16 @@
} }
} }
.search-section {
background: $panel-bg;
border: $panel-border;
padding: $panel-padding;
margin-bottom: 8px;
}
.search-section__header { .search-section__header {
font-size: $font-size-h6; font-size: $font-size-h6;
padding: 0.6rem 0; padding: 8px 0 2px 0;
color: $text-color-weak; color: $text-color-weak;
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
...@@ -105,7 +113,7 @@ ...@@ -105,7 +113,7 @@
} }
.search-section__header__icon { .search-section__header__icon {
padding: 3px 10px; padding: 5px 10px;
} }
.search-section__header__toggle { .search-section__header__toggle {
...@@ -170,24 +178,34 @@ ...@@ -170,24 +178,34 @@
} }
.search-item__tags { .search-item__tags {
padding: 8px; padding: 10px;
} }
.search-item__actions { .search-item__actions {
flex: 0 0 auto; flex: 0 0 auto;
padding: 0 10px 0 0;
} }
.search-item__actions__item { .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:hover {
.search-item__actions__item { .search-item__actions__item {
opacity: 0.8; width: 15px;
opacity: 1;
} }
} }
.search-button-row { .search-button-row {
text-align: center; text-align: center;
padding: $spacer*2 $spacer; padding: $spacer*2 $spacer;
background: $panel-bg;
} }
public/sass/layout/_page.scss
...@@ -141,16 +141,16 @@ ...@@ -141,16 +141,16 @@
display: block; display: block;
float: left; float: left;
font-size: 12px; font-size: 12px;
line-height: 36px; line-height: 30px;
padding: 0 7px 0 37px; padding: 0 7px 0 37px;
@include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
position: relative; position: relative;
box-shadow: $card-shadow; box-shadow: $card-shadow;
&:first-child { &:first-child {
padding-left: 13px; padding-left: 10px;
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
font-size: 20px; font-size: 18px;
} }
&:first-child:before { &:first-child:before {
...@@ -178,11 +178,11 @@ ...@@ -178,11 +178,11 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; 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 // same dimension as the line-height of .breadcrumb-item
width: 36px; width: 30px;
height: 36px; height: 30px;
transform: scale(0.707) rotate(45deg); transform: scale(0.707) rotate(45deg);
// we need to prevent the arrows from getting buried under the next link // we need to prevent the arrows from getting buried under the next link
......
public/sass/pages/_dashboard.scss
...@@ -42,7 +42,7 @@ div.flot-text { ...@@ -42,7 +42,7 @@ div.flot-text {
} }
.panel-content { .panel-content {
padding: 0px 10px 5px 10px; padding: $panel-padding;
height: calc(100% - 27px); height: calc(100% - 27px);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment