From 78ea1dc87d110ed031fcce1a726fe6d66047f5b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 14 Aug 2017 16:06:20 +0200 Subject: [PATCH] ux: new page header look wip --- .../features/plugins/partials/ds_edit.html | 156 ++++++++++-------- .../features/plugins/partials/ds_list.html | 96 ++++++----- public/sass/_variables.dark.scss | 2 +- public/sass/layout/_page.scss | 39 +++-- 4 files changed, 174 insertions(+), 119 deletions(-) diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 73691b16b2e..96c4d2b3836 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,85 +1,107 @@ - +
+
+
+
+ + Configuration + +
+ +
+ + Data sources + +
+
+ +

+ + Add data source + Settings +

+ + + + Add data source + + +
+ +
+
+
-
-

Add data source

-

Edit data source

- -
- -
-
-
-
- Name - - - The name is used when you select the data source in panels. - The Default data source is preselected in new - panels. - -
- -
+
+ Name + + + The name is used when you select the data source in panels. + The Default data source is preselected in new + panels. + +
+ +
-
- Type -
- -
-
-
+
+ Type +
+ +
+
+
-
- This plugin is marked as being in alpha state, which means it is in early development phase and - updates will include breaking changes. -
+
+ This plugin is marked as being in alpha state, which means it is in early development phase and + updates will include breaking changes. +
- - - - + + + + -
-
Testing....
-
-
{{ctrl.testing.title}}
-
-
-
+
+
Testing....
+
+
{{ctrl.testing.title}}
+
+
+
-
- - - - Cancel -
+
+ + + + Cancel +
- - + + -
- -
+
+ +
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 2a8f728346e..ed8cad218f4 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,45 +1,61 @@ -
-
-

Data Sources

- - - Add data source - -
+
+
+
+
+ + Configuration + +
+
-
+

+ + Data Sources +

+ + + + Add data source + + +
+
+ + +
+
-
    -
  1. - -
    -
    - {{ds.type}} -
    -
    -
    -
    - -
    -
    -
    - {{ds.name}} - - default - -
    -
    - {{ds.url}} -
    -
    -
    -     -
    2. -
-
+
    +
  1. + +
    +
    + {{ds.type}} +
    +
    +
    +
    + +
    +
    +
    + {{ds.name}} + + default + +
    +
    + {{ds.url}} +
    +
    +
    +     +
    2. +
+ -
- No data sources defined -
+
+ No data sources defined +
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 5562078047d..d30be1c6dcc 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -48,7 +48,7 @@ $critical: #ed2e18; // Scaffolding // ------------------------- -$body-bg: rgb(20,20,20); +$body-bg: rgb(24,20,20); $page-bg: $dark-2; $body-color: $gray-4; $text-color: $gray-4; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 33a62e8fbc5..0fa4094e452 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -7,15 +7,20 @@ .main-view { flex-grow: 1; + background: linear-gradient(180deg,#282020 0,#1e0f05); } .page-container { @extend .container; - background-color: $page-bg; - padding: ($spacer * 2) ($spacer * 4); + + padding: $spacer; min-height: calc(100% - 54px); padding-bottom: $spacer * 5; - background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%) +} + +.page-header-inner { + @include brand-bottom-border(); + @include clearfix(); } .page-body { @@ -38,21 +43,20 @@ } .page-header { - padding: $spacer 0 0 0; - margin-bottom: 2rem; - @include brand-bottom-border(); - @include clearfix(); + padding: 2rem 0 1rem 0; h1 { + font-size: $font-size-h2; flex-grow: 1; display: inline-block; margin-bottom: $spacer*1.5; } - button, a { - float: right; - margin-left: $spacer; - } +} + +.page-header__cta { + float: right; + margin-left: $spacer; } .page-heading { @@ -90,3 +94,16 @@ .page-sidebar-section { margin-bottom: $spacer*2; } + +.page-breadcrumb { + display: flex; + margin-bottom: $spacer; +} + +.page-breadcrumb__item { + a { + color: $text-color-weak; + } + padding-right: $spacer; +} +