IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

UI: Remove old icons (#16335)

Browse Source 
* 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
This commit is contained in:
Patrick O'Carroll 2019-04-17 15:18:32 +02:00 committed by Torkel Ödegaard
parent 8b0dd4244b
commit d040e336c1
40 changed files with 264 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
View File

@ -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;

2
packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
View File

@ -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;

2
public/app/core/components/search/search_results.html
View File

@ -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>

2
public/app/features/alerting/AlertRuleItem.tsx
View File

@ -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>

2
public/app/features/alerting/AlertTab.tsx
View File

@ -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',
}; };

2
public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap
View File

@ -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>

5
public/app/features/annotations/partials/editor.html
View File

@ -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>

4
public/app/features/dashboard/components/DashExportModal/template.html
View File

@ -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>

6
public/app/features/dashboard/components/DashLinks/editor.html
View File

@ -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>

4
public/app/features/dashboard/components/DashNav/DashNav.tsx
View File

@ -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> {
<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}
/> />
)} )}

2
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
View File

@ -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" />

2
public/app/features/dashboard/components/DashboardSettings/template.html
View File

@ -1,6 +1,6 @@
<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>

2
public/app/features/dashboard/components/FolderPicker/template.html
View File

@ -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">

4
public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts
View File

@ -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>

306
public/app/features/dashboard/components/ShareModal/template.html
View File

@ -1,186 +1,182 @@
<div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()"> <div class="modal-body" ng-controller="ShareModalCtrl" ng-init="init()">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-share-square-o"></i>
<span class="p-l-1">{{ modalTitle }}</span>
</h2>
<div class="modal-header"> <ul class="gf-tabs">
<h2 class="modal-header-title"> <li class="gf-tabs-item" ng-repeat="tab in tabs">
<i class="fa fa-share-square-o"></i> <a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
<span class="p-l-1">{{modalTitle}}</span> {{::tab.title}}
</h2> </a>
</li>
</ul>
<ul class="gf-tabs"> <a class="modal-header-close" ng-click="dismiss();">
<li class="gf-tabs-item" ng-repeat="tab in tabs"> <i class="fa fa-remove"></i>
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}"> </a>
{{::tab.title}} </div>
</a>
</li>
</ul>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
<div ng-include src="tab.src" class="share-modal-body"></div>
</div>
<div class="modal-content" ng-repeat="tab in tabs" ng-if="editor.index == $index">
<div ng-include src="tab.src" class="share-modal-body"></div>
</div>
</div> </div>
<script type="text/ng-template" id="shareEmbed.html"> <script type="text/ng-template" id="shareEmbed.html">
<div class="share-modal-header"> <div class="share-modal-header">
<div class="share-modal-big-icon"> <div class="share-modal-big-icon">
<i class="fa fa-code"></i> <i class="fa fa-code"></i>
</div> </div>
<div class="share-modal-content"> <div class="share-modal-content">
<div ng-include src="'shareLinkOptions.html'"></div> <div ng-include src="'shareLinkOptions.html'"></div>
<p class="share-modal-info-text"> <p class="share-modal-info-text">
The html code below can be pasted and included in another web page. Unless anonymous access The html code below can be pasted and included in another web page. Unless anonymous access
is enabled, the user viewing that page need to be signed into grafana for the graph to load. is enabled, the user viewing that page need to be signed into grafana for the graph to load.
</p> </p>
<div class="gf-form-group gf-form--grow"> <div class="gf-form-group gf-form--grow">
<div class="gf-form"> <div class="gf-form">
<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea> <textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</script> </script>
<script type="text/ng-template" id="shareExport.html"> <script type="text/ng-template" id="shareExport.html">
<dash-export-modal dismiss="dismiss()"></dash-export-modal> <dash-export-modal dismiss="dismiss()"></dash-export-modal>
</script> </script>
<script type="text/ng-template" id="shareLinkOptions.html"> <script type="text/ng-template" id="shareLinkOptions.html">
<div class="gf-form-group"> <div class="gf-form-group">
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Current time range" label-class="width-12" switch-class="max-width-6" label="Current time range" label-class="width-12" switch-class="max-width-6"
checked="options.forCurrent" on-change="buildUrl()"> checked="options.forCurrent" on-change="buildUrl()">
</gf-form-switch> </gf-form-switch>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Template variables" label-class="width-12" switch-class="max-width-6" label="Template variables" label-class="width-12" switch-class="max-width-6"
checked="options.includeTemplateVars" on-change="buildUrl()"> checked="options.includeTemplateVars" on-change="buildUrl()">
</gf-form-switch> </gf-form-switch>
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-12">Theme</span> <span class="gf-form-label width-12">Theme</span>
<div class="gf-form-select-wrapper width-10"> <div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select> <select class="gf-form-input" ng-model="options.theme" ng-options="f as f for f in ['current', 'dark', 'light']" ng-change="buildUrl()"></select>
</div> </div>
</div> </div>
</div> </div>
</script> </script>
<script type="text/ng-template" id="shareLink.html"> <script type="text/ng-template" id="shareLink.html">
<div class="share-modal-header"> <div class="share-modal-header">
<div class="share-modal-big-icon"> <div class="share-modal-big-icon">
<i class="fa fa-link"></i> <i class="gicon gicon-link"></i>
</div> </div>
<div class="share-modal-content"> <div class="share-modal-content">
<p class="share-modal-info-text"> <p class="share-modal-info-text">
Create a direct link to this dashboard or panel, customized with the options below. Create a direct link to this dashboard or panel, customized with the options below.
</p> </p>
<div ng-include src="'shareLinkOptions.html'"></div> <div ng-include src="'shareLinkOptions.html'"></div>
<div> <div>
<div class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form gf-form--grow"> <div class="gf-form gf-form--grow">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input> <input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl">
</div> </div>
<div class="gf-form"> <div class="gf-form">
<button class="btn btn-inverse" clipboard-button="getShareUrl()"><i class="fa fa-clipboard"></i> Copy</button> <button class="btn btn-inverse" clipboard-button="getShareUrl()">Copy</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="gf-form" ng-show="modeSharePanel"> <div class="gf-form" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a> <a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div> </div>
</div> </div>
</script> </script>
<script type="text/ng-template" id="shareSnapshot.html"> <script type="text/ng-template" id="shareSnapshot.html">
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()"> <div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
<div class="share-modal-header"> <div class="share-modal-header">
<div class="share-modal-big-icon"> <div class="share-modal-big-icon">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i> <i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i> <i ng-if="!loading" class="gicon gicon-snapshots"></i>
</div> </div>
<div class="share-modal-content"> <div class="share-modal-content">
<div ng-if="step === 1"> <div ng-if="step === 1">
<p class="share-modal-info-text"> <p class="share-modal-info-text">
A snapshot is an instant way to share an interactive dashboard publicly. A snapshot is an instant way to share an interactive dashboard publicly.
When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links, When created, we <strong>strip sensitive data</strong> like queries (metric, template and annotation) and panel links,
leaving only the visible metric data and series names embedded into your dashboard. leaving only the visible metric data and series names embedded into your dashboard.
</p> </p>
<p class="share-modal-info-text"> <p class="share-modal-info-text">
Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL. Keep in mind, your <strong>snapshot can be viewed by anyone</strong> that has the link and can reach the URL.
Share wisely. Share wisely.
</p> </p>
</div> </div>
<div class="share-modal-header" ng-if="step === 3"> <div class="share-modal-header" ng-if="step === 3">
<p class="share-modal-info-text"> <p class="share-modal-info-text">
The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from The snapshot has now been deleted. If it you have already accessed it once, It might take up to an hour before it is removed from
browser caches or CDN caches. browser caches or CDN caches.
</p> </p>
</div> </div>
<div class="gf-form-group share-modal-options"> <div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1"> <div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Snapshot name</span> <span class="gf-form-label width-12">Snapshot name</span>
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" > <input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15">
</div> </div>
<div class="gf-form" ng-if="step === 1"> <div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Expire</span> <span class="gf-form-label width-12">Expire</span>
<div class="gf-form-select-wrapper max-width-15"> <div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select> <select class="gf-form-input" ng-model="snapshot.expires" ng-options="f.value as f.text for f in expireOptions"></select>
</div> </div>
</div> </div>
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px"> <div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
<div class="gf-form-row"> <div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank"> <a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
<i class="fa fa-external-link-square"></i> <i class="fa fa-external-link-square"></i>
{{snapshotUrl}} {{snapshotUrl}}
</a> </a>
<br> <br>
<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()"><i class="fa fa-clipboard"></i> Copy Link</button> <button class="btn btn-inverse" clipboard-button="getSnapshotUrl()">Copy Link</button>
</div> </div>
</div> </div>
</div> </div>
<div ng-if="step === 1"> <div ng-if="step === 1">
<p class="share-modal-info-text"> <p class="share-modal-info-text">
You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics. You may need to configure the timeout value if it takes a long time to collect your dashboard's metrics.
</p> </p>
</div> </div>
<div class="gf-form-group share-modal-options"> <div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1"> <div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Timeout (seconds)</span> <span class="gf-form-label width-12">Timeout (seconds)</span>
<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15" > <input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15">
</div> </div>
</div> </div>
<div ng-if="step === 1" class="gf-form-button-row"> <div ng-if="step === 1" class="gf-form-button-row">
<button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading"> <button class="btn gf-form-btn width-10 btn-primary" ng-click="createSnapshot()" ng-disabled="loading">
<i class="fa fa-save"></i> Local Snapshot
Local Snapshot </button>
</button> <button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading"> {{sharingButtonText}}
<i class="fa fa-cloud-upload"></i> </button>
{{sharingButtonText}} <a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</button> </div>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
<div class="pull-right" ng-if="step === 2" style="padding: 5px"> <div class="pull-right" ng-if="step === 2" style="padding: 5px">
Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a> Did you make a mistake? <a class="pointer" ng-click="deleteSnapshot()" target="_blank">delete snapshot.</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</script> </script>

4
public/app/features/dashboard/utils/getPanelMenu.ts
View File

@ -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) => {
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',
}); });

2
public/app/features/datasources/DashboardsTable.tsx
View File

@ -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 ? (

4
public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap
View File

@ -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`] = `
className="width-1" className="width-1"
> >
<i <i
className="icon-gf icon-gf-dashboard" className="gicon gicon-dashboard"
/> />
</td> </td>
<td> <td>

2
public/app/features/folders/partials/create_folder.html
View File

@ -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>

2
public/app/features/folders/services/FolderPageLoader.ts
View File

@ -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',

2
public/app/features/folders/state/navModel.ts
View File

@ -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`,

4
public/app/features/manage-dashboards/partials/dashboard_import.html
View File

@ -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>

2
public/app/features/manage-dashboards/partials/snapshot_list.html
View File

@ -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>

4
public/app/features/panel/panel_ctrl.ts
View File

@ -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 {
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',
}); });
} }

4
public/app/features/playlist/partials/playlist.html
View File

@ -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 @@
<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>

11
public/app/features/plugins/PluginListItem.tsx
View File

@ -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 && (

2
public/app/features/plugins/import_list/import_list.html
View File

@ -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">

4
public/app/features/plugins/plugin_edit_ctrl.ts
View File

@ -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 {
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';
} }

6
public/app/features/templating/partials/editor.html
View File

@ -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'">

2
public/app/features/users/InviteeRow.tsx
View File

@ -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>

38
public/app/partials/edit_json.html
View File

@ -1,24 +1,24 @@
<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>

2
public/app/plugins/panel/gettingstarted/module.html
View File

@ -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>

8
public/app/plugins/panel/gettingstarted/module.ts
View File

@ -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 {
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 {
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 {
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 => {

2
public/sass/_variables.dark.generated.scss
View File

@ -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;

2
public/sass/_variables.light.generated.scss
View File

@ -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;

51
public/sass/base/_grafana_icons.scss
View File

@ -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 @@
.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 @@
.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';
}

7
public/sass/base/_icons.scss
View File

@ -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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
} }
} }
// not used
.fa--permissions-list { .fa--permissions-list {
min-width: 20px; min-width: 20px;
padding-right: 5px; padding-right: 5px;

7
public/sass/components/_modals.scss
View File

@ -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 {

11
public/sass/components/_navbar.scss
View File

@ -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;

8
public/sass/components/_panel_gettingstarted.scss
View File

@ -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);
-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);
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 {