From a3bd761b0c069a2d04452ea7e0c6c56f9b2cfae4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 14 Oct 2017 21:17:16 +0200 Subject: [PATCH] ux: testing out new icons --- pkg/api/index.go | 10 +- .../features/dashboard/dashnav/dashnav.html | 24 ++-- .../dashboard/folder_modal/folder.html | 2 +- public/app/features/panel/panel_ctrl.ts | 15 ++- .../features/plugins/partials/ds_edit.html | 7 +- "public/img/icons_dark_theme/Icon\r" | 0 .../img/icons_dark_theme/icon_add_folder.svg | 31 +++++ public/img/icons_dark_theme/icon_alert.svg | 16 +++ .../img/icons_dark_theme/icon_alert_alt.svg | 108 ++++++++++++++++++ .../img/icons_dark_theme/icon_alert_off.svg | 17 +++ .../img/icons_dark_theme/icon_dashboard.svg | 18 +++ .../icons_dark_theme/icon_dashboard_fav.svg | 30 +++++ .../icon_import_dashboard.svg | 32 ++++++ .../icons_dark_theme/icon_new_dashboard.svg | 32 ++++++ .../icon_notification_channels.svg | 14 +++ public/img/icons_dark_theme/icon_org.svg | 40 +++++++ public/img/icons_dark_theme/icon_user.svg | 15 +++ .../img/icons_dark_theme/icon_user_group.svg | 25 ++++ "public/img/icons_light_theme/Icon\r" | 0 .../img/icons_light_theme/icon_add_folder.svg | 29 +++++ public/img/icons_light_theme/icon_alert.svg | 16 +++ .../img/icons_light_theme/icon_alert_alt.svg | 108 ++++++++++++++++++ .../img/icons_light_theme/icon_alert_off.svg | 17 +++ .../img/icons_light_theme/icon_dashboard.svg | 18 +++ .../icons_light_theme/icon_dashboard_fav.svg | 28 +++++ .../icon_import_dashboard.svg | 32 ++++++ .../icons_light_theme/icon_new_dashboard.svg | 32 ++++++ .../icon_notification_channels.svg | 14 +++ public/img/icons_light_theme/icon_org.svg | 40 +++++++ public/img/icons_light_theme/icon_user.svg | 15 +++ .../img/icons_light_theme/icon_user_group.svg | 25 ++++ public/sass/_grafana.scss | 1 + public/sass/_variables.dark.scss | 6 +- public/sass/base/_icons.scss | 38 ++++++ public/sass/components/_dropdown.scss | 5 + public/sass/components/_icon-picker.scss | 26 ----- public/sass/components/_navbar.scss | 35 +++--- public/sass/components/_sidemenu.scss | 9 +- 38 files changed, 851 insertions(+), 79 deletions(-) create mode 100644 "public/img/icons_dark_theme/Icon\r" create mode 100644 public/img/icons_dark_theme/icon_add_folder.svg create mode 100644 public/img/icons_dark_theme/icon_alert.svg create mode 100644 public/img/icons_dark_theme/icon_alert_alt.svg create mode 100644 public/img/icons_dark_theme/icon_alert_off.svg create mode 100644 public/img/icons_dark_theme/icon_dashboard.svg create mode 100644 public/img/icons_dark_theme/icon_dashboard_fav.svg create mode 100644 public/img/icons_dark_theme/icon_import_dashboard.svg create mode 100644 public/img/icons_dark_theme/icon_new_dashboard.svg create mode 100644 public/img/icons_dark_theme/icon_notification_channels.svg create mode 100644 public/img/icons_dark_theme/icon_org.svg create mode 100644 public/img/icons_dark_theme/icon_user.svg create mode 100644 public/img/icons_dark_theme/icon_user_group.svg create mode 100644 "public/img/icons_light_theme/Icon\r" create mode 100644 public/img/icons_light_theme/icon_add_folder.svg create mode 100644 public/img/icons_light_theme/icon_alert.svg create mode 100644 public/img/icons_light_theme/icon_alert_alt.svg create mode 100644 public/img/icons_light_theme/icon_alert_off.svg create mode 100644 public/img/icons_light_theme/icon_dashboard.svg create mode 100644 public/img/icons_light_theme/icon_dashboard_fav.svg create mode 100644 public/img/icons_light_theme/icon_import_dashboard.svg create mode 100644 public/img/icons_light_theme/icon_new_dashboard.svg create mode 100644 public/img/icons_light_theme/icon_notification_channels.svg create mode 100644 public/img/icons_light_theme/icon_org.svg create mode 100644 public/img/icons_light_theme/icon_user.svg create mode 100644 public/img/icons_light_theme/icon_user_group.svg create mode 100644 public/sass/base/_icons.scss delete mode 100644 public/sass/components/_icon-picker.scss diff --git a/pkg/api/index.go b/pkg/api/index.go index 189a6bbb604..0f4674cdd9c 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -92,9 +92,9 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Icon: "fa fa-fw fa-plus", Url: "#", Children: []*dtos.NavLink{ - {Text: "Dashboard", Icon: "fa fa-fw fa-plus", Url: setting.AppSubUrl + "/dashboard/new"}, - {Text: "Folder", Icon: "fa fa-fw fa-plus", Url: setting.AppSubUrl + "/dashboard/new/?editview=new-folder"}, - {Text: "Import", Icon: "fa fa-fw fa-plus", Url: setting.AppSubUrl + "/dashboard/new/?editview=import"}, + {Text: "Dashboard", Icon: "gicon gicon-dashboard-new", Url: setting.AppSubUrl + "/dashboard/new"}, + {Text: "Folder", Icon: "gicon gicon-folder-new", Url: setting.AppSubUrl + "/dashboard/new/?editview=new-folder"}, + {Text: "Import", Icon: "gicon gicon-dashboard-import", Url: setting.AppSubUrl + "/dashboard/new/?editview=import"}, }, }) } @@ -108,7 +108,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Dashboards", Id: "dashboards", - Icon: "icon-gf icon-gf-dashboard", + Icon: "gicon gicon-dashboard", Url: setting.AppSubUrl + "/", Children: dashboardChildNavs, }) @@ -145,7 +145,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Alerting", Id: "alerting", - Icon: "icon-gf icon-gf-alert", + Icon: "gicon gicon-alert", Url: setting.AppSubUrl + "/alerting/list", Children: alertChildNavs, }) diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index e350bc33caa..dc538fb5500 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,13 +1,13 @@
+ + + -
- - - {{ctrl.dashboard.title}} - - -
+ + {{ctrl.dashboard.title}} + +
  • @@ -21,12 +21,7 @@
-
    -
  • - - - -
    • +
      • @@ -76,6 +71,9 @@
      +
      +
      +
      • diff --git a/public/app/features/dashboard/folder_modal/folder.html b/public/app/features/dashboard/folder_modal/folder.html index e875cc724c2..e037923e77a 100644 --- a/public/app/features/dashboard/folder_modal/folder.html +++ b/public/app/features/dashboard/folder_modal/folder.html @@ -1,7 +1,7 @@

        - + New Dashboard Folder

        diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index fca9050b4ac..94a213ea30a 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -133,11 +133,6 @@ export class PanelCtrl { menu.push({text: 'Edit', click: 'ctrl.editPanel();', role: 'Editor', icon: "fa fa-fw fa-edit", shortcut: "e"}); menu.push({text: 'Share', click: 'ctrl.sharePanel();', icon: "fa fa-fw fa-share", shortcut: "p s"}); - if (!this.fullscreen) { - menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor', icon: "fa fa-fw fa-copy" }); - } - - menu.push({divider: true}); let extendedMenu = this.getExtendedMenu(); menu.push({text: 'More ...', click: 'ctrl.removePanel();', icon: "fa fa-fw fa-cube", submenu: extendedMenu}); @@ -147,9 +142,13 @@ export class PanelCtrl { } getExtendedMenu() { - var actions = [{text: 'Panel JSON', click: 'ctrl.editPanelJson(); dismiss();'}]; - this.events.emit('init-panel-actions', actions); - return actions; + let menu = []; + if (!this.fullscreen) { + menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); + } + menu.push({text: 'Panel JSON', click: 'ctrl.editPanelJson(); dismiss();' }); + this.events.emit('init-panel-actions', menu); + return menu; } otherPanelInFullscreenMode() { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 451a9024a18..d734dbc49db 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -57,8 +57,6 @@ -
        -
        Testing....
        @@ -79,6 +77,11 @@ Cancel
        + +
        +
        +
        +
        diff --git "a/public/img/icons_dark_theme/Icon\r" "b/public/img/icons_dark_theme/Icon\r" new file mode 100644 index 00000000000..e69de29bb2d diff --git a/public/img/icons_dark_theme/icon_add_folder.svg b/public/img/icons_dark_theme/icon_add_folder.svg new file mode 100644 index 00000000000..d7ac00099e3 --- /dev/null +++ b/public/img/icons_dark_theme/icon_add_folder.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_alert.svg b/public/img/icons_dark_theme/icon_alert.svg new file mode 100644 index 00000000000..2a3a764a925 --- /dev/null +++ b/public/img/icons_dark_theme/icon_alert.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_alert_alt.svg b/public/img/icons_dark_theme/icon_alert_alt.svg new file mode 100644 index 00000000000..a6c6e9bd051 --- /dev/null +++ b/public/img/icons_dark_theme/icon_alert_alt.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_alert_off.svg b/public/img/icons_dark_theme/icon_alert_off.svg new file mode 100644 index 00000000000..cebbe532ce4 --- /dev/null +++ b/public/img/icons_dark_theme/icon_alert_off.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_dashboard.svg b/public/img/icons_dark_theme/icon_dashboard.svg new file mode 100644 index 00000000000..a5d4e9b491d --- /dev/null +++ b/public/img/icons_dark_theme/icon_dashboard.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_dashboard_fav.svg b/public/img/icons_dark_theme/icon_dashboard_fav.svg new file mode 100644 index 00000000000..22d2462e922 --- /dev/null +++ b/public/img/icons_dark_theme/icon_dashboard_fav.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_import_dashboard.svg b/public/img/icons_dark_theme/icon_import_dashboard.svg new file mode 100644 index 00000000000..20b3e6c27e8 --- /dev/null +++ b/public/img/icons_dark_theme/icon_import_dashboard.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_new_dashboard.svg b/public/img/icons_dark_theme/icon_new_dashboard.svg new file mode 100644 index 00000000000..326cbf1ca7f --- /dev/null +++ b/public/img/icons_dark_theme/icon_new_dashboard.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_notification_channels.svg b/public/img/icons_dark_theme/icon_notification_channels.svg new file mode 100644 index 00000000000..d3bad3f78f4 --- /dev/null +++ b/public/img/icons_dark_theme/icon_notification_channels.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/public/img/icons_dark_theme/icon_org.svg b/public/img/icons_dark_theme/icon_org.svg new file mode 100644 index 00000000000..b9aa21c3a9c --- /dev/null +++ b/public/img/icons_dark_theme/icon_org.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_user.svg b/public/img/icons_dark_theme/icon_user.svg new file mode 100644 index 00000000000..e488d9ffcf4 --- /dev/null +++ b/public/img/icons_dark_theme/icon_user.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/public/img/icons_dark_theme/icon_user_group.svg b/public/img/icons_dark_theme/icon_user_group.svg new file mode 100644 index 00000000000..15dade3d289 --- /dev/null +++ b/public/img/icons_dark_theme/icon_user_group.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git "a/public/img/icons_light_theme/Icon\r" "b/public/img/icons_light_theme/Icon\r" new file mode 100644 index 00000000000..e69de29bb2d diff --git a/public/img/icons_light_theme/icon_add_folder.svg b/public/img/icons_light_theme/icon_add_folder.svg new file mode 100644 index 00000000000..ad4638e7e32 --- /dev/null +++ b/public/img/icons_light_theme/icon_add_folder.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_alert.svg b/public/img/icons_light_theme/icon_alert.svg new file mode 100644 index 00000000000..a3109c23fa1 --- /dev/null +++ b/public/img/icons_light_theme/icon_alert.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_alert_alt.svg b/public/img/icons_light_theme/icon_alert_alt.svg new file mode 100644 index 00000000000..0d105481a7d --- /dev/null +++ b/public/img/icons_light_theme/icon_alert_alt.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_alert_off.svg b/public/img/icons_light_theme/icon_alert_off.svg new file mode 100644 index 00000000000..b8fd5b000a3 --- /dev/null +++ b/public/img/icons_light_theme/icon_alert_off.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_dashboard.svg b/public/img/icons_light_theme/icon_dashboard.svg new file mode 100644 index 00000000000..2e275b87568 --- /dev/null +++ b/public/img/icons_light_theme/icon_dashboard.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_dashboard_fav.svg b/public/img/icons_light_theme/icon_dashboard_fav.svg new file mode 100644 index 00000000000..6ec8730e3ad --- /dev/null +++ b/public/img/icons_light_theme/icon_dashboard_fav.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_import_dashboard.svg b/public/img/icons_light_theme/icon_import_dashboard.svg new file mode 100644 index 00000000000..3a83c0fe829 --- /dev/null +++ b/public/img/icons_light_theme/icon_import_dashboard.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_new_dashboard.svg b/public/img/icons_light_theme/icon_new_dashboard.svg new file mode 100644 index 00000000000..a4ea6c4f4b0 --- /dev/null +++ b/public/img/icons_light_theme/icon_new_dashboard.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_notification_channels.svg b/public/img/icons_light_theme/icon_notification_channels.svg new file mode 100644 index 00000000000..aa6ada13c8a --- /dev/null +++ b/public/img/icons_light_theme/icon_notification_channels.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/public/img/icons_light_theme/icon_org.svg b/public/img/icons_light_theme/icon_org.svg new file mode 100644 index 00000000000..2c4b738bda2 --- /dev/null +++ b/public/img/icons_light_theme/icon_org.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/public/img/icons_light_theme/icon_user.svg b/public/img/icons_light_theme/icon_user.svg new file mode 100644 index 00000000000..2a68115129d --- /dev/null +++ b/public/img/icons_light_theme/icon_user.svg @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/public/img/icons_light_theme/icon_user_group.svg b/public/img/icons_light_theme/icon_user_group.svg new file mode 100644 index 00000000000..2ec7caf796e --- /dev/null +++ b/public/img/icons_light_theme/icon_user_group.svg @@ -0,0 +1,25 @@ + + + + + + + + + + diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index a4e99987576..739b9848338 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -21,6 +21,7 @@ @import "base/grid"; @import "base/fonts"; @import "base/code"; +@import "base/icons"; // UTILS @import "utils/utils"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 3c015383103..2f45ecca5e6 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -27,8 +27,8 @@ $white: #fff; // ------------------------- $blue: #33B5E5; $blue-dark: #005f81; -$green: #609000; -$red: #CC3900; +$green: #3aa655; +$red: #d44939; $yellow: #ECBB13; $pink: #FF4444; $purple: #9933CC; @@ -139,7 +139,7 @@ $btn-primary-bg-hl: #bc3e06; $btn-secondary-bg: $blue-dark; $btn-secondary-bg-hl: lighten($blue-dark, 5%); -$btn-success-bg: lighten($green, 3%); +$btn-success-bg: $green; $btn-success-bg-hl: darken($green, 3%); $btn-warning-bg: $brand-warning; diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss new file mode 100644 index 00000000000..b35f39eb24f --- /dev/null +++ b/public/sass/base/_icons.scss @@ -0,0 +1,38 @@ +.gicon { + line-height: 1; + display: inline-block; + width: 1.2057142857em; + height: 1.2057142857em; + text-align: center; + background-repeat: no-repeat; + background-position: center; + background-size: 100% 100%; + display: inline-block; + vertical-align: middle; +} + +.gicon-alert { + background-image: url('../img/icons_dark_theme/icon_alert.svg'); +} + +.gicon-dashboard { + background-image: url('../img/icons_dark_theme/icon_dashboard.svg'); +} + +.gicon-dashboard-starred { + background-image: url('../img/icons_dark_theme/icon_dashboard_fav.svg'); +} + +.gicon-dashboard-new { + background-image: url('../img/icons_dark_theme/icon_new_dashboard.svg'); +} + +.gicon-folder-new { + background-image: url('../img/icons_dark_theme/icon_add_folder.svg'); +} + +.gicon-dashboard-import { + background-image: url('../img/icons_dark_theme/icon_import_dashboard.svg'); +} + + diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 0be45ea0e37..c10c1ecd0ab 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -91,6 +91,11 @@ color: $link-color-disabled; position: relative; top: 3px; + padding-left: 5px; + } + + .gicon { + opacity: 0.9; } } } diff --git a/public/sass/components/_icon-picker.scss b/public/sass/components/_icon-picker.scss deleted file mode 100644 index 796f3f95db5..00000000000 --- a/public/sass/components/_icon-picker.scss +++ /dev/null @@ -1,26 +0,0 @@ -.gf-icon-picker { - width: 400px; - height: 450px; - - .icon-filter { - padding-bottom: 10px; - margin: auto; - width: 50%; - } - - .icon-container { - max-height: 350px; - overflow: auto; - - .gf-event-icon { - margin: 0.4rem; - height: 1.5rem; - } - } -} - -.gf-icon-picker-button { - .gf-event-icon { - height: 1.2rem; - } -} diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index ab1cba4fd23..b4692e49dcc 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -12,6 +12,7 @@ min-height: $navbarHeight; padding-right: $spacer; background-color: $navbarBackground; + display: flex; @include clearfix(); } @@ -25,12 +26,12 @@ position: relative; left: 0; float: left; + + &--grow { + flex-grow: 1; + } } -.navbar .nav.pull-right { - float: right; // redeclare due to specificity - margin-right: 0; // remove margin on float right nav -} .navbar .nav > li { float: left; @@ -62,6 +63,19 @@ background-color: $navbarLinkBackgroundActive; } +.navbar-page-icon { + font-size: $font-size-lg; + padding: 1rem 0rem 0.75rem 1rem; + min-height: $navbarHeight; + + .gicon { + position: relative; + top: -1px; + font-size: 20px; + line-height: 8px; + } +} + .navbar-page-btn { text-overflow: ellipsis; overflow: hidden; @@ -78,19 +92,6 @@ padding-left: 0.2rem; } - .icon-gf { - position: relative; - top: 2px; - font-size: 20px; - line-height: 8px; - margin-right: 0.5rem; - } - - > img { - max-width: 27px; - max-height: 27px; - } - &--search { padding: 1rem 1.5rem 0.75rem 1.5rem; } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 86011f41c28..aea9cc4e69d 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -73,6 +73,7 @@ position: relative; font-size: 16px; border: 1px solid transparent; + text-align: center; img { border-radius: 50%; @@ -97,16 +98,17 @@ width: 35px; height: 35px; display: inline-block; - i { + + .fa, .icon-gf, .gicon { color: $link-color; - opacity: .7; position: relative; - left: 3px; + opacity: .7; font-size: 130%; } .fa { top: 2px; + position: relative; } .icon-gf { @@ -114,7 +116,6 @@ } img { - left: 3px; position: relative; } }