diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts index 440b3aa7248..eef3e6eedf7 100644 --- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts @@ -188,6 +188,8 @@ $btn-divider-right: $dark-3; $btn-drag-image: '../img/grab_dark.svg'; +$navbar-btn-gicon-brightness: brightness(0.5); + // Forms // ------------------------- $input-bg: $input-black; diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts index e90299f619c..671e0376f53 100644 --- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts +++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts @@ -175,6 +175,8 @@ $btn-divider-right: $gray-7; $btn-drag-image: '../img/grab_light.svg'; +$navbar-btn-gicon-brightness: brightness(1.5); + // Forms // ------------------------- $input-bg: $white; diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index 92850e0ea5d..09d21ba80c0 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -11,7 +11,7 @@ {{::section.title}} - + diff --git a/public/app/features/alerting/AlertRuleItem.tsx b/public/app/features/alerting/AlertRuleItem.tsx index 3fec37d19b8..ad9e7337db7 100644 --- a/public/app/features/alerting/AlertRuleItem.tsx +++ b/public/app/features/alerting/AlertRuleItem.tsx @@ -58,7 +58,7 @@ class AlertRuleItem extends PureComponent { - + diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx index 9e114e559f5..c7d1a8e058d 100644 --- a/public/app/features/alerting/AlertTab.tsx +++ b/public/app/features/alerting/AlertTab.tsx @@ -133,7 +133,7 @@ export class AlertTab extends PureComponent { const model = { title: 'Panel has no alert rule defined', - buttonIcon: 'icon-gf icon-gf-alert', + buttonIcon: 'gicon gicon-alert', onClick: this.onAddAlert, buttonTitle: 'Create Alert', }; diff --git a/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap b/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap index 8e076ffd22e..3d5a61a3262 100644 --- a/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap +++ b/public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap @@ -77,7 +77,7 @@ exports[`Render should render component 1`] = ` title="Edit alert rule" > diff --git a/public/app/features/annotations/partials/editor.html b/public/app/features/annotations/partials/editor.html index a39bb59310c..455b41be193 100644 --- a/public/app/features/annotations/partials/editor.html +++ b/public/app/features/annotations/partials/editor.html @@ -13,8 +13,9 @@ class="btn btn-primary" ng-click="ctrl.setupNew();" ng-if="ctrl.annotations.length > 1" - ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'" - > New + New + diff --git a/public/app/features/dashboard/components/DashExportModal/template.html b/public/app/features/dashboard/components/DashExportModal/template.html index e399d166d04..9cc6540668d 100644 --- a/public/app/features/dashboard/components/DashExportModal/template.html +++ b/public/app/features/dashboard/components/DashExportModal/template.html @@ -13,10 +13,10 @@
Cancel
diff --git a/public/app/features/dashboard/components/DashLinks/editor.html b/public/app/features/dashboard/components/DashLinks/editor.html index d965d2b9534..ec08b3a4a76 100644 --- a/public/app/features/dashboard/components/DashLinks/editor.html +++ b/public/app/features/dashboard/components/DashLinks/editor.html @@ -11,9 +11,9 @@ class="btn btn-primary" ng-click="ctrl.setupNew()" ng-if="ctrl.dashboard.links.length > 0" - ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'" - > - New + New + diff --git a/public/app/features/dashboard/components/DashNav/DashNav.tsx b/public/app/features/dashboard/components/DashNav/DashNav.tsx index ec7c471fed6..4b29b01bb06 100644 --- a/public/app/features/dashboard/components/DashNav/DashNav.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNav.tsx @@ -236,7 +236,7 @@ export class DashNav extends PureComponent { )} @@ -245,7 +245,7 @@ export class DashNav extends PureComponent { )} diff --git a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx index 6eda6846c29..64138aee101 100644 --- a/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx +++ b/public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx @@ -96,7 +96,7 @@ export class DashboardRow extends React.Component { {canEdit && (
diff --git a/public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts b/public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts index d9009100f42..851644d3f14 100644 --- a/public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts +++ b/public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts @@ -27,10 +27,10 @@ const template = `
Cancel
diff --git a/public/app/features/dashboard/components/ShareModal/template.html b/public/app/features/dashboard/components/ShareModal/template.html index 26bd9d3d59c..86643043f4f 100644 --- a/public/app/features/dashboard/components/ShareModal/template.html +++ b/public/app/features/dashboard/components/ShareModal/template.html @@ -1,186 +1,182 @@
+
+

+ + {{ modalTitle }} +

-
-

- - {{modalTitle}} -

+ - - - - - -
- -
- -
+ + + +
+
+ +
diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts index 568e9ba4f7f..a6e967b733f 100644 --- a/public/app/features/dashboard/utils/getPanelMenu.ts +++ b/public/app/features/dashboard/utils/getPanelMenu.ts @@ -57,7 +57,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => { menu.push({ text: 'View', - iconClassName: 'fa fa-fw fa-eye', + iconClassName: 'gicon gicon-viewer', onClick: onViewPanel, shortcut: 'v', }); @@ -65,7 +65,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => { if (dashboard.meta.canEdit) { menu.push({ text: 'Edit', - iconClassName: 'fa fa-fw fa-edit', + iconClassName: 'gicon gicon-editor', onClick: onEditPanel, shortcut: 'e', }); diff --git a/public/app/features/datasources/DashboardsTable.tsx b/public/app/features/datasources/DashboardsTable.tsx index 077dc1dba63..6c6bad8c88e 100644 --- a/public/app/features/datasources/DashboardsTable.tsx +++ b/public/app/features/datasources/DashboardsTable.tsx @@ -19,7 +19,7 @@ const DashboardsTable: FC = ({ dashboards, onImport, onRemove }) => { return ( - + {dashboard.imported ? ( diff --git a/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap b/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap index a85cbd4ad9b..cd327ba9fb2 100644 --- a/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap +++ b/public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap @@ -20,7 +20,7 @@ exports[`Render should render table 1`] = ` className="width-1" > @@ -50,7 +50,7 @@ exports[`Render should render table 1`] = ` className="width-1" > diff --git a/public/app/features/folders/partials/create_folder.html b/public/app/features/folders/partials/create_folder.html index c4f8bbea562..6d78f80983d 100644 --- a/public/app/features/folders/partials/create_folder.html +++ b/public/app/features/folders/partials/create_folder.html @@ -26,7 +26,7 @@
diff --git a/public/app/features/folders/services/FolderPageLoader.ts b/public/app/features/folders/services/FolderPageLoader.ts index 6842c61847e..f0b6a61c4fc 100755 --- a/public/app/features/folders/services/FolderPageLoader.ts +++ b/public/app/features/folders/services/FolderPageLoader.ts @@ -27,7 +27,7 @@ export class FolderPageLoader { }, { active: activeChildId === 'manage-folder-settings', - icon: 'fa fa-fw fa-cog', + icon: 'gicon gicon-cog', id: 'manage-folder-settings', text: 'Settings', url: 'dashboards/settings', diff --git a/public/app/features/folders/state/navModel.ts b/public/app/features/folders/state/navModel.ts index e6ef763d019..345201f353a 100644 --- a/public/app/features/folders/state/navModel.ts +++ b/public/app/features/folders/state/navModel.ts @@ -25,7 +25,7 @@ export function buildNavModel(folder: FolderDTO): NavModelItem { }, { active: false, - icon: 'fa fa-fw fa-cog', + icon: 'gicon gicon-cog', id: `folder-settings-${folder.uid}`, text: 'Settings', url: `${folder.url}/settings`, diff --git a/public/app/features/manage-dashboards/partials/dashboard_import.html b/public/app/features/manage-dashboards/partials/dashboard_import.html index 8299feac56c..74310cbc881 100644 --- a/public/app/features/manage-dashboards/partials/dashboard_import.html +++ b/public/app/features/manage-dashboards/partials/dashboard_import.html @@ -147,10 +147,10 @@
Cancel
diff --git a/public/app/features/manage-dashboards/partials/snapshot_list.html b/public/app/features/manage-dashboards/partials/snapshot_list.html index e7f88abf264..21909984ee3 100644 --- a/public/app/features/manage-dashboards/partials/snapshot_list.html +++ b/public/app/features/manage-dashboards/partials/snapshot_list.html @@ -21,7 +21,7 @@ - + View diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 41810ab21c0..d3283c4caec 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -119,7 +119,7 @@ export class PanelCtrl { menu.push({ text: 'View', click: 'ctrl.viewPanel();', - icon: 'fa fa-fw fa-eye', + icon: 'gicon gicon-viewer', shortcut: 'v', }); @@ -128,7 +128,7 @@ export class PanelCtrl { text: 'Edit', click: 'ctrl.editPanel();', role: 'Editor', - icon: 'fa fa-fw fa-edit', + icon: 'gicon gicon-editor', shortcut: 'e', }); } diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 6f4125c5619..f49f2e9db61 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -24,7 +24,7 @@
-   {{playlistItem.title}} +   {{playlistItem.title}} @@ -59,7 +59,7 @@ diff --git a/public/app/features/plugins/PluginListItem.tsx b/public/app/features/plugins/PluginListItem.tsx index bbc1daa3355..fa6e46c7845 100644 --- a/public/app/features/plugins/PluginListItem.tsx +++ b/public/app/features/plugins/PluginListItem.tsx @@ -7,13 +7,22 @@ interface Props { const PluginListItem: FC = props => { const { plugin } = props; + let icon; + + if (plugin.type === 'datasource') { + icon = 'gicon gicon-datasources'; + } else if (plugin.type === 'panel') { + icon = 'icon-gf icon-gf-panel'; + } else { + icon = 'icon-gf icon-gf-apps'; + } return (
  • - + {plugin.type}
    {plugin.hasUpdate && ( diff --git a/public/app/features/plugins/import_list/import_list.html b/public/app/features/plugins/import_list/import_list.html index 523005ae87b..040b71223f6 100644 --- a/public/app/features/plugins/import_list/import_list.html +++ b/public/app/features/plugins/import_list/import_list.html @@ -3,7 +3,7 @@
    • diff --git a/public/app/partials/edit_json.html b/public/app/partials/edit_json.html index fb411e662fc..5f06606cd6c 100644 --- a/public/app/partials/edit_json.html +++ b/public/app/partials/edit_json.html @@ -1,24 +1,24 @@
    -
    -

    - JSON -

    +
    +

    + JSON +

    - -
    + +
    -
    -
    - -
    +
    +
    + +
    -
    - - -
    -
    +
    + + +
    +
    diff --git a/public/app/plugins/panel/gettingstarted/module.html b/public/app/plugins/panel/gettingstarted/module.html index b4073faadbb..cd1f1c4265d 100644 --- a/public/app/plugins/panel/gettingstarted/module.html +++ b/public/app/plugins/panel/gettingstarted/module.html @@ -9,7 +9,7 @@ {{step.title}}     - {{step.cta}} + {{step.cta}} diff --git a/public/app/plugins/panel/gettingstarted/module.ts b/public/app/plugins/panel/gettingstarted/module.ts index 84f367a9430..c65a169028f 100644 --- a/public/app/plugins/panel/gettingstarted/module.ts +++ b/public/app/plugins/panel/gettingstarted/module.ts @@ -27,7 +27,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { this.steps.push({ title: 'Create your first data source', cta: 'Add data source', - icon: 'icon-gf icon-gf-datasources', + icon: 'gicon gicon-datasources', href: 'datasources/new?gettingstarted', check: () => { return $q.when( @@ -41,7 +41,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { this.steps.push({ title: 'Create your first dashboard', cta: 'New dashboard', - icon: 'icon-gf icon-gf-dashboard', + icon: 'gicon gicon-dashboard', href: 'dashboard/new?gettingstarted', check: () => { return this.backendSrv.search({ limit: 1 }).then(result => { @@ -53,7 +53,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { this.steps.push({ title: 'Invite your team', cta: 'Add Users', - icon: 'icon-gf icon-gf-users', + icon: 'gicon gicon-team', href: 'org/users?gettingstarted', check: () => { return this.backendSrv.get('/api/org/users').then(res => { @@ -65,7 +65,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { this.steps.push({ title: 'Install apps & plugins', cta: 'Explore plugin repository', - icon: 'icon-gf icon-gf-apps', + icon: 'gicon gicon-plugins', href: 'https://grafana.com/plugins?utm_source=grafana_getting_started', check: () => { return this.backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then(plugins => { diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss index abe0af48535..9a2f4491750 100644 --- a/public/sass/_variables.dark.generated.scss +++ b/public/sass/_variables.dark.generated.scss @@ -191,6 +191,8 @@ $btn-divider-right: $dark-3; $btn-drag-image: '../img/grab_dark.svg'; +$navbar-btn-gicon-brightness: brightness(0.5); + // Forms // ------------------------- $input-bg: $input-black; diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss index 5bacd817eab..7ac170e51f1 100644 --- a/public/sass/_variables.light.generated.scss +++ b/public/sass/_variables.light.generated.scss @@ -178,6 +178,8 @@ $btn-divider-right: $gray-7; $btn-drag-image: '../img/grab_light.svg'; +$navbar-btn-gicon-brightness: brightness(1.5); + // Forms // ------------------------- $input-bg: $white; diff --git a/public/sass/base/_grafana_icons.scss b/public/sass/base/_grafana_icons.scss index 73574ff9efc..40fc44da405 100644 --- a/public/sass/base/_grafana_icons.scss +++ b/public/sass/base/_grafana_icons.scss @@ -30,11 +30,9 @@ width: 1.2857142857em; text-align: center; } - .inline-icon-gf { vertical-align: middle; } - .icon-gf-raintank_wordmark:before { content: '\e600'; } @@ -59,46 +57,12 @@ .icon-gf-panel:before { content: '\e904'; } -.icon-gf-datasources:before { - content: '\e607'; -} .icon-gf-endpoint-tiny:before { content: '\e608'; } -.icon-gf-endpoint:before { - content: '\e609'; -} -.icon-gf-page:before { - content: '\e908'; -} -.icon-gf-filter:before { - content: '\e60a'; -} -.icon-gf-status:before { - content: '\e60b'; -} -.icon-gf-monitoring:before { - content: '\e60c'; -} -.icon-gf-monitoring-tiny:before { - content: '\e620'; -} -.icon-gf-jump-to-dashboard:before { - content: '\e60d'; -} -.icon-gf-warn, -.icon-gf-warning:before { - content: '\e60e'; -} -.icon-gf-nodata:before { - content: '\e60f'; -} .icon-gf-critical:before { content: '\e610'; } -.icon-gf-crit:before { - content: '\e610'; -} .icon-gf-online:before { content: '\e611'; } @@ -183,18 +147,3 @@ .icon-gf-apps:before { content: '\e902'; } -.icon-gf-scale:before { - content: '\e906'; -} -.icon-gf-pending:before { - content: '\e909'; -} -.icon-gf-verified:before { - content: '\e90a'; -} -.icon-gf-worldping:before { - content: '\e627'; -} -.icon-gf-grafana_wordmark:before { - content: '\e903'; -} diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 4e5751c6919..f99821efa14 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -28,6 +28,7 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg'); } +// not used .gicon-add-annotation-alt { background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg'); } @@ -36,6 +37,7 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg'); } +// not used .gicon-add-user { background-image: url('../img/icons_#{$theme-name}_theme/icon_add_user.svg'); } @@ -64,6 +66,7 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg'); } +//not used .gicon-alert-alt { background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg'); } @@ -80,6 +83,7 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation.svg'); } +//not used .gicon-annotation-alt { background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg'); } @@ -100,6 +104,7 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg'); } +//not used .gicon-dashboard-starred { background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg'); } @@ -188,6 +193,7 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_viewer.svg'); } +//not used .gicon-zoom-out { background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); } @@ -217,6 +223,7 @@ } } +// not used .fa--permissions-list { min-width: 20px; padding-right: 5px; diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 22d1ad68e20..1f145c8441c 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -144,10 +144,13 @@ .share-modal-big-icon { margin-bottom: 10px; margin-right: $space-xl; - .fa, - .icon-gf { + .fa { font-size: 50px; } + .gicon { + width: 48px; + height: 48px; + } } .share-modal-info-text { diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 5bcab92c906..d3b37f18920 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -146,6 +146,17 @@ border-radius: 0 2px 2px 0; } + &--settings { + .gicon { + filter: $navbar-btn-gicon-brightness; + } + &:hover { + .gicon { + filter: brightness(0.8); + } + } + } + &--tight { padding: 7px 4px; diff --git a/public/sass/components/_panel_gettingstarted.scss b/public/sass/components/_panel_gettingstarted.scss index 7e23550dda6..b55d2cc0565 100644 --- a/public/sass/components/_panel_gettingstarted.scss +++ b/public/sass/components/_panel_gettingstarted.scss @@ -79,7 +79,7 @@ $path-position: $marker-size-half - ($path-height / 2); // Active state &.active { .progress-step-cta { - display: inline-block; + display: inline-flex; } .progress-title { font-weight: 400; @@ -95,6 +95,9 @@ $path-position: $marker-size-half - ($path-height / 2); -webkit-background-clip: text; text-decoration: none; } + .gicon { + opacity: 1; + } } } @@ -154,6 +157,9 @@ $path-position: $marker-size-half - ($path-height / 2); text-decoration: none; font-size: 35px; vertical-align: sub; + .gicon { + opacity: 0.7; + } } a.progress-link {
    - +   {{playlistItem.title}}
    - + diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index 61faae07690..d1967525688 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -108,7 +108,7 @@ export class PluginEditCtrl { getPluginIcon(type) { switch (type) { case 'datasource': - return 'icon-gf icon-gf-datasources'; + return 'gicon gicon-datasources'; case 'panel': return 'icon-gf icon-gf-panel'; case 'app': @@ -116,7 +116,7 @@ export class PluginEditCtrl { case 'page': return 'icon-gf icon-gf-endpoint-tiny'; case 'dashboard': - return 'icon-gf icon-gf-dashboard'; + return 'gicon gicon-dashboard'; default: return 'icon-gf icon-gf-apps'; } diff --git a/public/app/features/templating/partials/editor.html b/public/app/features/templating/partials/editor.html index 02700e636bb..6c5d0cfccf6 100644 --- a/public/app/features/templating/partials/editor.html +++ b/public/app/features/templating/partials/editor.html @@ -12,9 +12,9 @@ class="btn btn-primary" ng-click="setMode('new');" ng-if="variables.length > 0" - ng-hide="mode === 'edit' || mode === 'new'" - > New + ng-hide="mode === 'edit' || mode === 'new'"> + New +
    diff --git a/public/app/features/users/InviteeRow.tsx b/public/app/features/users/InviteeRow.tsx index 1e3d5017b04..3844ab45e98 100644 --- a/public/app/features/users/InviteeRow.tsx +++ b/public/app/features/users/InviteeRow.tsx @@ -34,7 +34,7 @@ class InviteeRow extends PureComponent { style={{ position: 'absolute', right: -1000 }} ref={this.copyUrlRef} /> - Copy Invite + Copy Invite