Skip to content

N
nexpie-grafana-theme
Commit d040e336 by Patrick O'Carroll Committed by Torkel Ödegaard
Options

UI: Remove old icons (#16335) 

* removed unsused grafana-icon classes, replaced grafana-icons with gicons

* replaced old dashboard and datasource icons with gicon, fixed so icons on plugin list are shown

* removed unsused grafana-icon classes, replaced grafana-icons with gicons

* replaced old dashboard and datasource icons with gicon, fixed so icons on plugin list are shown

* replaced fontawesome cog, eye, link and edit with gicons

* updated snapshot

* fixed color of cog in dashboard nav, removed icons from buttons, ran preitterier on some files

* changed opacity on getting started icons and fixed getting started button

* .5 -> 0.5 fix for prettier
parent 8b0dd424
Showing with 113 additions and 119 deletions
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
...@@ -188,6 +188,8 @@ $btn-divider-right: $dark-3; ...@@ -188,6 +188,8 @@ $btn-divider-right: $dark-3;
$btn-drag-image: '../img/grab_dark.svg'; $btn-drag-image: '../img/grab_dark.svg';
$navbar-btn-gicon-brightness: brightness(0.5);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $input-black; $input-bg: $input-black;
......
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
...@@ -175,6 +175,8 @@ $btn-divider-right: $gray-7; ...@@ -175,6 +175,8 @@ $btn-divider-right: $gray-7;
$btn-drag-image: '../img/grab_light.svg'; $btn-drag-image: '../img/grab_light.svg';
$navbar-btn-gicon-brightness: brightness(1.5);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $white; $input-bg: $white;
......
public/app/core/components/search/search_results.html
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
<i class="search-section__header__icon" ng-class="section.icon"></i> <i class="search-section__header__icon" ng-class="section.icon"></i>
<span class="search-section__header__text">{{::section.title}}</span> <span class="search-section__header__text">{{::section.title}}</span>
<a ng-show="section.url" href="{{section.url}}" class="search-section__header__link"> <a ng-show="section.url" href="{{section.url}}" class="search-section__header__link">
<i class="fa fa-cog"></i> <i class="gicon gicon-cog"></i>
</a> </a>
<i class="fa fa-angle-down search-section__header__toggle" ng-show="section.expanded"></i> <i class="fa fa-angle-down search-section__header__toggle" ng-show="section.expanded"></i>
<i class="fa fa-angle-right search-section__header__toggle" ng-hide="section.expanded"></i> <i class="fa fa-angle-right search-section__header__toggle" ng-hide="section.expanded"></i>
......
public/app/features/alerting/AlertRuleItem.tsx
...@@ -58,7 +58,7 @@ class AlertRuleItem extends PureComponent<Props> { ...@@ -58,7 +58,7 @@ class AlertRuleItem extends PureComponent<Props> {
<i className={iconClassName} /> <i className={iconClassName} />
</button> </button>
<a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule"> <a className="btn btn-small btn-inverse alert-list__btn width-2" href={ruleUrl} title="Edit alert rule">
<i className="icon-gf icon-gf-settings" /> <i className="gicon gicon-cog" />
</a> </a>
</div> </div>
</li> </li>
......
public/app/features/alerting/AlertTab.tsx
...@@ -133,7 +133,7 @@ export class AlertTab extends PureComponent<Props> { ...@@ -133,7 +133,7 @@ export class AlertTab extends PureComponent<Props> {
const model = { const model = {
title: 'Panel has no alert rule defined', title: 'Panel has no alert rule defined',
buttonIcon: 'icon-gf icon-gf-alert', buttonIcon: 'gicon gicon-alert',
onClick: this.onAddAlert, onClick: this.onAddAlert,
buttonTitle: 'Create Alert', buttonTitle: 'Create Alert',
}; };
......
public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap
...@@ -77,7 +77,7 @@ exports[`Render should render component 1`] = ` ...@@ -77,7 +77,7 @@ exports[`Render should render component 1`] = `
title="Edit alert rule" title="Edit alert rule"
> >
<i <i
className="icon-gf icon-gf-settings" className="gicon gicon-cog"
/> />
</a> </a>
</div> </div>
......
public/app/features/annotations/partials/editor.html
...@@ -13,8 +13,9 @@ ...@@ -13,8 +13,9 @@
class="btn btn-primary" class="btn btn-primary"
ng-click="ctrl.setupNew();" ng-click="ctrl.setupNew();"
ng-if="ctrl.annotations.length > 1" ng-if="ctrl.annotations.length > 1"
ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'" ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'">
><i class="fa fa-plus"></i> New</a New
</a
> >
</div> </div>
......
public/app/features/dashboard/components/DashExportModal/template.html
...@@ -13,10 +13,10 @@ ...@@ -13,10 +13,10 @@
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="button" class="btn gf-form-btn width-10 btn-primary" ng-click="ctrl.saveDashboardAsFile()"> <button type="button" class="btn gf-form-btn width-10 btn-primary" ng-click="ctrl.saveDashboardAsFile()">
<i class="fa fa-save"></i> Save to file Save to file
</button> </button>
<button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.viewJson()"> <button type="button" class="btn gf-form-btn width-10 btn-secondary" ng-click="ctrl.viewJson()">
<i class="fa fa-file-text-o"></i> View JSON View JSON
</button> </button>
<a class="btn btn-link" ng-click="ctrl.dismiss()">Cancel</a> <a class="btn btn-link" ng-click="ctrl.dismiss()">Cancel</a>
</div> </div>
......
public/app/features/dashboard/components/DashLinks/editor.html
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
class="btn btn-primary" class="btn btn-primary"
ng-click="ctrl.setupNew()" ng-click="ctrl.setupNew()"
ng-if="ctrl.dashboard.links.length > 0" ng-if="ctrl.dashboard.links.length > 0"
ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'" ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'">
> New
<i class="fa fa-plus"></i> New</a </a
> >
</div> </div>
......
public/app/features/dashboard/components/DashNav/DashNav.tsx
...@@ -236,7 +236,7 @@ export class DashNav extends PureComponent<Props> { ...@@ -236,7 +236,7 @@ export class DashNav extends PureComponent<Props> {
<DashNavButton <DashNavButton
tooltip="Open original dashboard" tooltip="Open original dashboard"
classSuffix="snapshot-origin" classSuffix="snapshot-origin"
icon="fa fa-link" icon="gicon gicon-link"
href={snapshotUrl} href={snapshotUrl}
/> />
)} )}
...@@ -245,7 +245,7 @@ export class DashNav extends PureComponent<Props> { ...@@ -245,7 +245,7 @@ export class DashNav extends PureComponent<Props> {
<DashNavButton <DashNavButton
tooltip="Dashboard settings" tooltip="Dashboard settings"
classSuffix="settings" classSuffix="settings"
icon="fa fa-cog" icon="gicon gicon-cog"
onClick={this.onOpenSettings} onClick={this.onOpenSettings}
/> />
)} )}
......
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
...@@ -96,7 +96,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> { ...@@ -96,7 +96,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
{canEdit && ( {canEdit && (
<div className="dashboard-row__actions"> <div className="dashboard-row__actions">
<a className="pointer" onClick={this.onOpenSettings}> <a className="pointer" onClick={this.onOpenSettings}>
<i className="fa fa-cog" /> <i className="gicon gicon-cog" />
</a> </a>
<a className="pointer" onClick={this.onDelete}> <a className="pointer" onClick={this.onDelete}>
<i className="fa fa-trash" /> <i className="fa fa-trash" />
......
public/app/features/dashboard/components/DashboardSettings/template.html
<aside class="dashboard-settings__aside"> <aside class="dashboard-settings__aside">
<h2 class="dashboard-settings__aside-header"> <h2 class="dashboard-settings__aside-header">
<i class="fa fa-cog"></i> <i class="gicon gicon-cog"></i>
Settings Settings
</h2> </h2>
......
public/app/features/dashboard/components/FolderPicker/template.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<button class="btn btn-inverse" <button class="btn btn-inverse"
ng-click="ctrl.createFolder($event)" ng-click="ctrl.createFolder($event)"
ng-disabled="!ctrl.newFolderNameTouched || ctrl.hasValidationError"> ng-disabled="!ctrl.newFolderNameTouched || ctrl.hasValidationError">
<i class="fa fa-fw fa-save"></i>&nbsp;Create Create
</button> </button>
</div> </div>
<div class="gf-form" ng-if="ctrl.createNewFolder"> <div class="gf-form" ng-if="ctrl.createNewFolder">
......
public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts
...@@ -27,10 +27,10 @@ const template = ` ...@@ -27,10 +27,10 @@ const template = `
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn btn-primary" clipboard-button="ctrl.getJsonForClipboard()"> <button class="btn btn-primary" clipboard-button="ctrl.getJsonForClipboard()">
<i class="fa fa-clipboard"></i>&nbsp;Copy JSON to Clipboard Copy JSON to Clipboard
</button> </button>
<button class="btn btn-secondary" clipboard-button="ctrl.save()"> <button class="btn btn-secondary" clipboard-button="ctrl.save()">
<i class="fa fa-save"></i>&nbsp;Save JSON to file Save JSON to file
</button> </button>
<a class="btn btn-link" ng-click="ctrl.dismiss();">Cancel</a> <a class="btn btn-link" ng-click="ctrl.dismiss();">Cancel</a>
</div> </div>
......
public/app/features/dashboard/utils/getPanelMenu.ts
...@@ -57,7 +57,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => { ...@@ -57,7 +57,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
menu.push({ menu.push({
text: 'View', text: 'View',
iconClassName: 'fa fa-fw fa-eye', iconClassName: 'gicon gicon-viewer',
onClick: onViewPanel, onClick: onViewPanel,
shortcut: 'v', shortcut: 'v',
}); });
...@@ -65,7 +65,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => { ...@@ -65,7 +65,7 @@ export const getPanelMenu = (dashboard: DashboardModel, panel: PanelModel) => {
if (dashboard.meta.canEdit) { if (dashboard.meta.canEdit) {
menu.push({ menu.push({
text: 'Edit', text: 'Edit',
iconClassName: 'fa fa-fw fa-edit', iconClassName: 'gicon gicon-editor',
onClick: onEditPanel, onClick: onEditPanel,
shortcut: 'e', shortcut: 'e',
}); });
......
public/app/features/datasources/DashboardsTable.tsx
...@@ -19,7 +19,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => { ...@@ -19,7 +19,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
return ( return (
<tr key={`${dashboard.dashboardId}-${index}`}> <tr key={`${dashboard.dashboardId}-${index}`}>
<td className="width-1"> <td className="width-1">
<i className="icon-gf icon-gf-dashboard" /> <i className="gicon gicon-dashboard" />
</td> </td>
<td> <td>
{dashboard.imported ? ( {dashboard.imported ? (
......
public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap
...@@ -20,7 +20,7 @@ exports[`Render should render table 1`] = ` ...@@ -20,7 +20,7 @@ exports[`Render should render table 1`] = `
className="width-1" className="width-1"
> >
<i <i
className="icon-gf icon-gf-dashboard" className="gicon gicon-dashboard"
/> />
</td> </td>
<td> <td>
...@@ -50,7 +50,7 @@ exports[`Render should render table 1`] = ` ...@@ -50,7 +50,7 @@ exports[`Render should render table 1`] = `
className="width-1" className="width-1"
> >
<i <i
className="icon-gf icon-gf-dashboard" className="gicon gicon-dashboard"
/> />
</td> </td>
<td> <td>
......
public/app/features/folders/partials/create_folder.html
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn btn-primary width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError"> <button type="submit" class="btn btn-primary width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
<i class="fa fa-save"></i> Create Create
</button> </button>
</div> </div>
</form> </form>
......
public/app/features/folders/services/FolderPageLoader.ts
...@@ -27,7 +27,7 @@ export class FolderPageLoader { ...@@ -27,7 +27,7 @@ export class FolderPageLoader {
}, },
{ {
active: activeChildId === 'manage-folder-settings', active: activeChildId === 'manage-folder-settings',
icon: 'fa fa-fw fa-cog', icon: 'gicon gicon-cog',
id: 'manage-folder-settings', id: 'manage-folder-settings',
text: 'Settings', text: 'Settings',
url: 'dashboards/settings', url: 'dashboards/settings',
......
public/app/features/folders/state/navModel.ts
...@@ -25,7 +25,7 @@ export function buildNavModel(folder: FolderDTO): NavModelItem { ...@@ -25,7 +25,7 @@ export function buildNavModel(folder: FolderDTO): NavModelItem {
}, },
{ {
active: false, active: false,
icon: 'fa fa-fw fa-cog', icon: 'gicon gicon-cog',
id: `folder-settings-${folder.uid}`, id: `folder-settings-${folder.uid}`,
text: 'Settings', text: 'Settings',
url: `${folder.url}/settings`, url: `${folder.url}/settings`,
......
public/app/features/manage-dashboards/partials/dashboard_import.html
...@@ -147,10 +147,10 @@ ...@@ -147,10 +147,10 @@
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="button" class="btn btn-primary width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()"> <button type="button" class="btn btn-primary width-12" ng-click="ctrl.saveDashboard()" ng-hide="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
<i class="fa fa-save"></i> Import Import
</button> </button>
<button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()"> <button type="button" class="btn btn-danger width-12" ng-click="ctrl.saveDashboard()" ng-show="ctrl.nameExists || ctrl.uidExists" ng-disabled="!ctrl.isValid()">
<i class="fa fa-save"></i> Import (Overwrite) Import (Overwrite)
</button> </button>
<a class="btn btn-link" ng-click="ctrl.back()">Cancel</a> <a class="btn btn-link" ng-click="ctrl.back()">Cancel</a>
</div> </div>
......
public/app/features/manage-dashboards/partials/snapshot_list.html
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</td> </td>
<td class="text-center"> <td class="text-center">
<a href="{{snapshot.url}}" class="btn btn-inverse btn-small"> <a href="{{snapshot.url}}" class="btn btn-inverse btn-small">
<i class="fa fa-eye"></i> <i class="gicon gicon-viewer"></i>
View View
</a> </a>
</td> </td>
......
public/app/features/panel/panel_ctrl.ts
...@@ -119,7 +119,7 @@ export class PanelCtrl { ...@@ -119,7 +119,7 @@ export class PanelCtrl {
menu.push({ menu.push({
text: 'View', text: 'View',
click: 'ctrl.viewPanel();', click: 'ctrl.viewPanel();',
icon: 'fa fa-fw fa-eye', icon: 'gicon gicon-viewer',
shortcut: 'v', shortcut: 'v',
}); });
...@@ -128,7 +128,7 @@ export class PanelCtrl { ...@@ -128,7 +128,7 @@ export class PanelCtrl {
text: 'Edit', text: 'Edit',
click: 'ctrl.editPanel();', click: 'ctrl.editPanel();',
role: 'Editor', role: 'Editor',
icon: 'fa fa-fw fa-edit', icon: 'gicon gicon-editor',
shortcut: 'e', shortcut: 'e',
}); });
} }
......
public/app/features/playlist/partials/playlist.html
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<table class="filter-table playlist-available-list"> <table class="filter-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.playlistItems"> <tr ng-repeat="playlistItem in ctrl.playlistItems">
<td ng-if="playlistItem.type === 'dashboard_by_id'"> <td ng-if="playlistItem.type === 'dashboard_by_id'">
<i class="icon-gf icon-gf-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}} <i class="gicon gicon-dashboard"></i>&nbsp;&nbsp;{{playlistItem.title}}
</td> </td>
<td ng-if="playlistItem.type === 'dashboard_by_tag'"> <td ng-if="playlistItem.type === 'dashboard_by_tag'">
<a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title"> <a class="search-result-tag label label-tag" tag-color-from-name="playlistItem.title">
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
<table class="filter-table playlist-available-list"> <table class="filter-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.filteredDashboards"> <tr ng-repeat="playlistItem in ctrl.filteredDashboards">
<td> <td>
<i class="icon-gf icon-gf-dashboard"></i> <i class="gicon gicon-dashboard"></i>
&nbsp;&nbsp;{{playlistItem.title}} &nbsp;&nbsp;{{playlistItem.title}}
<i class="fa fa-star" ng-show="playlistItem.isStarred"></i> <i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
</td> </td>
......
public/app/features/plugins/PluginListItem.tsx
...@@ -7,13 +7,22 @@ interface Props { ...@@ -7,13 +7,22 @@ interface Props {
const PluginListItem: FC<Props> = props => { const PluginListItem: FC<Props> = props => {
const { plugin } = 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 ( return (
<li className="card-item-wrapper"> <li className="card-item-wrapper">
<a className="card-item" href={`plugins/${plugin.id}/edit`}> <a className="card-item" href={`plugins/${plugin.id}/edit`}>
<div className="card-item-header"> <div className="card-item-header">
<div className="card-item-type"> <div className="card-item-type">
<i className={`icon-gf icon-gf-${plugin.type}`} /> <i className={icon} />
{plugin.type} {plugin.type}
</div> </div>
{plugin.hasUpdate && ( {plugin.hasUpdate && (
......
public/app/features/plugins/import_list/import_list.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<tbody> <tbody>
<tr ng-repeat="dash in ctrl.dashboards"> <tr ng-repeat="dash in ctrl.dashboards">
<td class="width-1"> <td class="width-1">
<i class="icon-gf icon-gf-dashboard"></i> <i class="gicon gicon-dashboard"></i>
</td> </td>
<td> <td>
<a href="{{dash.importedUrl}}" ng-show="dash.imported"> <a href="{{dash.importedUrl}}" ng-show="dash.imported">
......
public/app/features/plugins/plugin_edit_ctrl.ts
...@@ -108,7 +108,7 @@ export class PluginEditCtrl { ...@@ -108,7 +108,7 @@ export class PluginEditCtrl {
getPluginIcon(type) { getPluginIcon(type) {
switch (type) { switch (type) {
case 'datasource': case 'datasource':
return 'icon-gf icon-gf-datasources'; return 'gicon gicon-datasources';
case 'panel': case 'panel':
return 'icon-gf icon-gf-panel'; return 'icon-gf icon-gf-panel';
case 'app': case 'app':
...@@ -116,7 +116,7 @@ export class PluginEditCtrl { ...@@ -116,7 +116,7 @@ export class PluginEditCtrl {
case 'page': case 'page':
return 'icon-gf icon-gf-endpoint-tiny'; return 'icon-gf icon-gf-endpoint-tiny';
case 'dashboard': case 'dashboard':
return 'icon-gf icon-gf-dashboard'; return 'gicon gicon-dashboard';
default: default:
return 'icon-gf icon-gf-apps'; return 'icon-gf icon-gf-apps';
} }
......
public/app/features/templating/partials/editor.html
...@@ -12,9 +12,9 @@ ...@@ -12,9 +12,9 @@
class="btn btn-primary" class="btn btn-primary"
ng-click="setMode('new');" ng-click="setMode('new');"
ng-if="variables.length > 0" ng-if="variables.length > 0"
ng-hide="mode === 'edit' || mode === 'new'" ng-hide="mode === 'edit' || mode === 'new'">
><i class="fa fa-plus"></i> New</a New
> </a>
</div> </div>
<div ng-if="mode === 'list'"> <div ng-if="mode === 'list'">
......
public/app/features/users/InviteeRow.tsx
...@@ -34,7 +34,7 @@ class InviteeRow extends PureComponent<Props> { ...@@ -34,7 +34,7 @@ class InviteeRow extends PureComponent<Props> {
style={{ position: 'absolute', right: -1000 }} style={{ position: 'absolute', right: -1000 }}
ref={this.copyUrlRef} ref={this.copyUrlRef}
/> />
<i className="fa fa-clipboard" /> Copy Invite Copy Invite
</button> </button>
&nbsp; &nbsp;
</td> </td>
......
public/app/partials/edit_json.html
<div ng-controller="JsonEditorCtrl"> <div ng-controller="JsonEditorCtrl">
<div class="tabbed-view-header"> <div class="tabbed-view-header">
<h2 class="tabbed-view-title"> <h2 class="tabbed-view-title">
JSON JSON
</h2> </h2>
<button class="tabbed-view-close-btn" ng-click="dismiss()"> <button class="tabbed-view-close-btn" ng-click="dismiss()">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</button> </button>
</div> </div>
<div class="tabbed-view-body"> <div class="tabbed-view-body">
<div class="gf-form"> <div class="gf-form">
<code-editor content="json" data-mode="json" data-max-lines=20 ></code-editor> <code-editor content="json" data-mode="json" data-max-lines="20"></code-editor>
</div> </div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button type="button" class="btn btn-primary" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button> <button type="button" class="btn btn-primary" ng-show="canUpdate" ng-click="update(); dismiss();">Update</button>
<button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()"> <button class="btn btn-secondary" ng-if="canCopy" clipboard-button="getContentForClipboard()">
<i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard Copy to Clipboard
</button> </button>
</div> </div>
</div> </div>
</div> </div>
public/app/plugins/panel/gettingstarted/module.html
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span> <span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span>
<span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span> <span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span>
</a> </a>
<a class="btn progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a> <a class="btn-small progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
</li> </li>
</ul> </ul>
</div> </div>
......
public/app/plugins/panel/gettingstarted/module.ts
...@@ -27,7 +27,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { ...@@ -27,7 +27,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
this.steps.push({ this.steps.push({
title: 'Create your first data source', title: 'Create your first data source',
cta: 'Add data source', cta: 'Add data source',
icon: 'icon-gf icon-gf-datasources', icon: 'gicon gicon-datasources',
href: 'datasources/new?gettingstarted', href: 'datasources/new?gettingstarted',
check: () => { check: () => {
return $q.when( return $q.when(
...@@ -41,7 +41,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { ...@@ -41,7 +41,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
this.steps.push({ this.steps.push({
title: 'Create your first dashboard', title: 'Create your first dashboard',
cta: 'New dashboard', cta: 'New dashboard',
icon: 'icon-gf icon-gf-dashboard', icon: 'gicon gicon-dashboard',
href: 'dashboard/new?gettingstarted', href: 'dashboard/new?gettingstarted',
check: () => { check: () => {
return this.backendSrv.search({ limit: 1 }).then(result => { return this.backendSrv.search({ limit: 1 }).then(result => {
...@@ -53,7 +53,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { ...@@ -53,7 +53,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
this.steps.push({ this.steps.push({
title: 'Invite your team', title: 'Invite your team',
cta: 'Add Users', cta: 'Add Users',
icon: 'icon-gf icon-gf-users', icon: 'gicon gicon-team',
href: 'org/users?gettingstarted', href: 'org/users?gettingstarted',
check: () => { check: () => {
return this.backendSrv.get('/api/org/users').then(res => { return this.backendSrv.get('/api/org/users').then(res => {
...@@ -65,7 +65,7 @@ class GettingStartedPanelCtrl extends PanelCtrl { ...@@ -65,7 +65,7 @@ class GettingStartedPanelCtrl extends PanelCtrl {
this.steps.push({ this.steps.push({
title: 'Install apps & plugins', title: 'Install apps & plugins',
cta: 'Explore plugin repository', cta: 'Explore plugin repository',
icon: 'icon-gf icon-gf-apps', icon: 'gicon gicon-plugins',
href: 'https://grafana.com/plugins?utm_source=grafana_getting_started', href: 'https://grafana.com/plugins?utm_source=grafana_getting_started',
check: () => { check: () => {
return this.backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then(plugins => { return this.backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then(plugins => {
......
public/sass/_variables.dark.generated.scss
...@@ -191,6 +191,8 @@ $btn-divider-right: $dark-3; ...@@ -191,6 +191,8 @@ $btn-divider-right: $dark-3;
$btn-drag-image: '../img/grab_dark.svg'; $btn-drag-image: '../img/grab_dark.svg';
$navbar-btn-gicon-brightness: brightness(0.5);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $input-black; $input-bg: $input-black;
......
public/sass/_variables.light.generated.scss
...@@ -178,6 +178,8 @@ $btn-divider-right: $gray-7; ...@@ -178,6 +178,8 @@ $btn-divider-right: $gray-7;
$btn-drag-image: '../img/grab_light.svg'; $btn-drag-image: '../img/grab_light.svg';
$navbar-btn-gicon-brightness: brightness(1.5);
// Forms // Forms
// ------------------------- // -------------------------
$input-bg: $white; $input-bg: $white;
......
public/sass/base/_grafana_icons.scss
...@@ -30,11 +30,9 @@ ...@@ -30,11 +30,9 @@
width: 1.2857142857em; width: 1.2857142857em;
text-align: center; text-align: center;
} }
.inline-icon-gf { .inline-icon-gf {
vertical-align: middle; vertical-align: middle;
} }
.icon-gf-raintank_wordmark:before { .icon-gf-raintank_wordmark:before {
content: '\e600'; content: '\e600';
} }
...@@ -59,46 +57,12 @@ ...@@ -59,46 +57,12 @@
.icon-gf-panel:before { .icon-gf-panel:before {
content: '\e904'; content: '\e904';
} }
.icon-gf-datasources:before {
content: '\e607';
}
.icon-gf-endpoint-tiny:before { .icon-gf-endpoint-tiny:before {
content: '\e608'; 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 { .icon-gf-critical:before {
content: '\e610'; content: '\e610';
} }
.icon-gf-crit:before {
content: '\e610';
}
.icon-gf-online:before { .icon-gf-online:before {
content: '\e611'; content: '\e611';
} }
...@@ -183,18 +147,3 @@ ...@@ -183,18 +147,3 @@
.icon-gf-apps:before { .icon-gf-apps:before {
content: '\e902'; 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';
}
public/sass/base/_icons.scss
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation.svg');
} }
// not used
.gicon-add-annotation-alt { .gicon-add-annotation-alt {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_add_annotation_alt.svg');
} }
...@@ -36,6 +37,7 @@ ...@@ -36,6 +37,7 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_add_data_sources.svg');
} }
// not used
.gicon-add-user { .gicon-add-user {
background-image: url('../img/icons_#{$theme-name}_theme/icon_add_user.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_add_user.svg');
} }
...@@ -64,6 +66,7 @@ ...@@ -64,6 +66,7 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_alert.svg');
} }
//not used
.gicon-alert-alt { .gicon-alert-alt {
background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_alert_alt.svg');
} }
...@@ -80,6 +83,7 @@ ...@@ -80,6 +83,7 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation.svg');
} }
//not used
.gicon-annotation-alt { .gicon-annotation-alt {
background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_annotation_alt.svg');
} }
...@@ -100,6 +104,7 @@ ...@@ -100,6 +104,7 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard.svg');
} }
//not used
.gicon-dashboard-starred { .gicon-dashboard-starred {
background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_dashboard_fav.svg');
} }
...@@ -188,6 +193,7 @@ ...@@ -188,6 +193,7 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_viewer.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_viewer.svg');
} }
//not used
.gicon-zoom-out { .gicon-zoom-out {
background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg'); background-image: url('../img/icons_#{$theme-name}_theme/icon_zoom_out.svg');
} }
...@@ -217,6 +223,7 @@ ...@@ -217,6 +223,7 @@
} }
} }
// not used
.fa--permissions-list { .fa--permissions-list {
min-width: 20px; min-width: 20px;
padding-right: 5px; padding-right: 5px;
......
public/sass/components/_modals.scss
...@@ -144,10 +144,13 @@ ...@@ -144,10 +144,13 @@
.share-modal-big-icon { .share-modal-big-icon {
margin-bottom: 10px; margin-bottom: 10px;
margin-right: $space-xl; margin-right: $space-xl;
.fa, .fa {
.icon-gf {
font-size: 50px; font-size: 50px;
} }
.gicon {
width: 48px;
height: 48px;
}
} }
.share-modal-info-text { .share-modal-info-text {
......
public/sass/components/_navbar.scss
...@@ -146,6 +146,17 @@ ...@@ -146,6 +146,17 @@
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
} }
&--settings {
.gicon {
filter: $navbar-btn-gicon-brightness;
}
&:hover {
.gicon {
filter: brightness(0.8);
}
}
}
&--tight { &--tight {
padding: 7px 4px; padding: 7px 4px;
......
public/sass/components/_panel_gettingstarted.scss
...@@ -79,7 +79,7 @@ $path-position: $marker-size-half - ($path-height / 2); ...@@ -79,7 +79,7 @@ $path-position: $marker-size-half - ($path-height / 2);
// Active state // Active state
&.active { &.active {
.progress-step-cta { .progress-step-cta {
display: inline-block; display: inline-flex;
} }
.progress-title { .progress-title {
font-weight: 400; font-weight: 400;
...@@ -95,6 +95,9 @@ $path-position: $marker-size-half - ($path-height / 2); ...@@ -95,6 +95,9 @@ $path-position: $marker-size-half - ($path-height / 2);
-webkit-background-clip: text; -webkit-background-clip: text;
text-decoration: none; text-decoration: none;
} }
.gicon {
opacity: 1;
}
} }
} }
...@@ -154,6 +157,9 @@ $path-position: $marker-size-half - ($path-height / 2); ...@@ -154,6 +157,9 @@ $path-position: $marker-size-half - ($path-height / 2);
text-decoration: none; text-decoration: none;
font-size: 35px; font-size: 35px;
vertical-align: sub; vertical-align: sub;
.gicon {
opacity: 0.7;
}
} }
a.progress-link { a.progress-link {
......
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