From 6609dbff90f838a781837875dbc7682387ce27bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 17 Aug 2017 12:06:51 +0200 Subject: [PATCH] ux: sidenav fixes and dashboard search changes --- ' | 134 ----------------- package.json | 2 +- public/app/core/components/scroll/scroll.ts | 4 + public/app/core/components/search/search.html | 57 ++++---- .../features/dashboard/partials/settings.html | 27 ---- public/app/features/org/org_users_ctrl.ts | 2 +- .../app/features/org/partials/orgUsers.html | 8 +- public/app/features/panel/panel_header.ts | 1 - .../features/plugins/partials/ds_edit.html | 136 +++++++++--------- .../features/plugins/partials/ds_list.html | 88 ++++++------ public/app/partials/dashboard.html | 34 +++-- public/app/partials/signup_invited.html | 2 +- public/sass/base/_type.scss | 4 + public/sass/components/_scrollbar.scss | 19 ++- public/sass/components/_search.scss | 3 +- public/sass/layout/_page.scss | 3 +- yarn.lock | 5 +- 17 files changed, 200 insertions(+), 329 deletions(-) delete mode 100644 ' diff --git a/' b/' deleted file mode 100644 index 61ae44e0aba..00000000000 --- a/' +++ /dev/null @@ -1,134 +0,0 @@ - - -.sidemenu { - display: flex; - flex-flow: column; - flex-direction: column; - width: $side-menu-width; - background-color: $side-menu-bg; - z-index: 1; - - a:focus { - text-decoration: none; - } -} - -.sidemenu__top { - flex-grow: 1; -} - -.sidemenu__bottom { - padding-bottom: $spacer; -} - -.sidemenu-item { - position: relative; - @include left-brand-border(); - - &.active, - &:hover { - background-color: $side-menu-item-hover-bg; - @include left-brand-border-gradient(); - - .dropdown-menu { - margin: 0; - display: block; - opacity: 0; - top: 0px; - // important to overlap it otherwise it can be hidden - // again by the mouse getting outside the hover space - left: $side-menu-width - 2px; - @include animation('dropdown-anim 100ms ease-in-out 100ms forwards'); - z-index: 1; - } - } -} - -.dropup.sidemenu-item:hover .dropdown-menu { - top: auto !important; -} - -.sidemenu-link { - color: $link-color; - line-height: 42px; - padding: 0px 10px 0px 10px; - display: block; - position: relative; - font-size: 16px; - border: 1px solid transparent; - - img { - border-radius: 50%; - width: 28px; - height: 28px; - box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05); - } -} - -@include keyframes(dropdown-anim) { - 0% { - opacity: 0; - //transform: translate3d(-5%,0,0); - } - 100% { - opacity: 1; - //transform: translate3d(0,0,0); - } -} - -.icon-circle { - width: 35px; - height: 35px; - display: inline-block; - i { - color: $link-color; - opacity: .7; - position: relative; - left: 3px; - font-size: 130%; - } - - .fa { - top: 2px; - } - - .icon-gf { - top: 5px; - } - - img { - left: 3px; - position: relative; - } -} - -.side-menu-header { - padding: 10px 10px 10px 20px; - white-space: nowrap; - background-color: $side-menu-item-hover-bg; - font-size: 17px; -} - -li.sidemenu-org-switcher { - border-bottom: 1px solid $dropdownDividerBottom; -} - -.sidemenu-org-switcher__org-name { - font-size: $font-size-base; -} - -.sidemenu-org-switcher__org-current { - font-size: $font-size-xs; - color: $text-color-weak; -} - -.sidemenu-org-switcher__switch { - font-size: $font-size-sm; - padding-left: 1.5rem; - display: flex; - align-items: center; - i.fa > { - margin-right: 5px; - top: 0; - } -} diff --git a/package.json b/package.json index 4b29ebdccfb..2c03020a86f 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ "dependencies": { "eventemitter3": "^2.0.2", "gaze": "^1.1.2", - "gemini-scrollbar": "^1.5.2", + "gemini-scrollbar": "https://github.com/grafana/gemini-scrollbar#grafana", "grunt-jscs": "3.0.1", "grunt-sass-lint": "^0.2.2", "grunt-sync": "^0.6.2", diff --git a/public/app/core/components/scroll/scroll.ts b/public/app/core/components/scroll/scroll.ts index 06bdcb8c864..c2e75df84c0 100644 --- a/public/app/core/components/scroll/scroll.ts +++ b/public/app/core/components/scroll/scroll.ts @@ -12,6 +12,10 @@ export function geminiScrollbar() { autoshow: false, element: elem[0] }).create(); + + scope.$on('$destroy', () => { + myScrollbar.destroy(); + }); } }; } diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index 9e24941ba81..57fa3bb894a 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -40,35 +40,38 @@
-
-
- - - {{tag.term}}  ({{tag.count}}) - +
+
+
+ + + {{tag.term}}  ({{tag.count}}) + +
+
+ +
+
No dashboards matching your query were found.
+ +
- -
-
No dashboards matching your query were found.
- -
diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html index f0655c4d1b7..ddd21eae463 100644 --- a/public/app/features/dashboard/partials/settings.html +++ b/public/app/features/dashboard/partials/settings.html @@ -83,33 +83,6 @@
- - - -
-
Rows settings
- -
-
-
- Title - -
- - -
- - - -
-
-
diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index d65094b5882..3948748e3f4 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -47,7 +47,7 @@ export class OrgUsersCtrl { } else if (config.disableLoginForm) { return "Add Users"; } else { - return "Add or Invite"; + return "Add"; } } diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index aaed94b018d..22afa60acf4 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -26,12 +26,12 @@
  • - + Groups (0)
    • -
  • - +
  • + Pending Invitations ({{ctrl.pendingInvites.length}})
    • @@ -76,7 +76,7 @@
    -
    +
    diff --git a/public/app/features/panel/panel_header.ts b/public/app/features/panel/panel_header.ts index 2bca009604e..749aa0e4b26 100644 --- a/public/app/features/panel/panel_header.ts +++ b/public/app/features/panel/panel_header.ts @@ -99,7 +99,6 @@ function panelHeader($compile) { menuScope = scope.$new(); let menuHtml = createMenuTemplate(scope.ctrl); - console.log(menuHtml); menuElem.html(menuHtml); $compile(menuElem)(menuScope); diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 2526c59e29a..ba74f1c0512 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,85 +1,87 @@
    - -
    -
    - +
    + +
    +
    + -
    - +
    + +
    -
    -
    +
    -
    -
    -
    -
    - 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. -
    - - - - - - -
    -
    Testing....
    -
    -
    {{ctrl.testing.title}}
    -
    +
    + This plugin is marked as being in alpha state, which means it is in early development phase and + updates will include breaking changes.
    -
    -
    - - - - Cancel -
    + + + + + +
    +
    Testing....
    +
    +
    {{ctrl.testing.title}}
    +
    +
    +
    + +
    + + + + Cancel +
    + + +
    + +
    + +
    -
    - -
    - -
    -
    diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index b4a6604eaa5..b8e9969d3e3 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,50 +1,52 @@
    - -
    -
    - + +
    + No data sources defined +
    +
    +
    diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index cecbc7aa28a..86f3c275b76 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,23 +1,27 @@
    -
    -
    -
    +
    +
    +
    +
    +
    - + -
    +
    - - + + -
    -
    - - ADD ROW - -
    -
    -
    +
    +
    + + ADD ROW + +
    +
    +
    +
    +
    diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html index 7a8dd459ff6..1a9b195c764 100644 --- a/public/app/partials/signup_invited.html +++ b/public/app/partials/signup_invited.html @@ -1,4 +1,4 @@ -
    +