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 278 additions and 288 deletions
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;
......
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;
......
public/app/core/components/search/search_results.html
......@@ -11,7 +11,7 @@
<i class="search-section__header__icon" ng-class="section.icon"></i>
<span class="search-section__header__text">{{::section.title}}</span>
<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>
<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>
......
public/app/features/alerting/AlertRuleItem.tsx
......@@ -58,7 +58,7 @@ class AlertRuleItem extends PureComponent<Props> {
<i className={iconClassName} />
</button>
<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>
</div>
</li>
......
public/app/features/alerting/AlertTab.tsx
......@@ -133,7 +133,7 @@ export class AlertTab extends PureComponent<Props> {
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',
};
......
public/app/features/alerting/__snapshots__/AlertRuleItem.test.tsx.snap
......@@ -77,7 +77,7 @@ exports[`Render should render component 1`] = `
title="Edit alert rule"
>
<i
className="icon-gf icon-gf-settings"
className="gicon gicon-cog"
/>
</a>
</div>
......
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'"
><i class="fa fa-plus"></i> New</a
ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'">
New
</a
>
</div>
......
public/app/features/dashboard/components/DashExportModal/template.html
......@@ -13,10 +13,10 @@
<div class="gf-form-button-row">
<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 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>
<a class="btn btn-link" ng-click="ctrl.dismiss()">Cancel</a>
</div>
......
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'"
>
<i class="fa fa-plus"></i> New</a
ng-hide="ctrl.mode === 'edit' || ctrl.mode === 'new'">
New
</a
>
</div>
......
public/app/features/dashboard/components/DashNav/DashNav.tsx
......@@ -236,7 +236,7 @@ export class DashNav extends PureComponent<Props> {
<DashNavButton
tooltip="Open original dashboard"
classSuffix="snapshot-origin"
icon="fa fa-link"
icon="gicon gicon-link"
href={snapshotUrl}
/>
)}
......@@ -245,7 +245,7 @@ export class DashNav extends PureComponent<Props> {
<DashNavButton
tooltip="Dashboard settings"
classSuffix="settings"
icon="fa fa-cog"
icon="gicon gicon-cog"
onClick={this.onOpenSettings}
/>
)}
......
public/app/features/dashboard/components/DashboardRow/DashboardRow.tsx
......@@ -96,7 +96,7 @@ export class DashboardRow extends React.Component<DashboardRowProps, any> {
{canEdit && (
<div className="dashboard-row__actions">
<a className="pointer" onClick={this.onOpenSettings}>
<i className="fa fa-cog" />
<i className="gicon gicon-cog" />
</a>
<a className="pointer" onClick={this.onDelete}>
<i className="fa fa-trash" />
......
public/app/features/dashboard/components/DashboardSettings/template.html
<aside class="dashboard-settings__aside">
<h2 class="dashboard-settings__aside-header">
<i class="fa fa-cog"></i>
<i class="gicon gicon-cog"></i>
Settings
</h2>
......
public/app/features/dashboard/components/FolderPicker/template.html
......@@ -19,7 +19,7 @@
<button class="btn btn-inverse"
ng-click="ctrl.createFolder($event)"
ng-disabled="!ctrl.newFolderNameTouched || ctrl.hasValidationError">
<i class="fa fa-fw fa-save"></i>&nbsp;Create
Create
</button>
</div>
<div class="gf-form" ng-if="ctrl.createNewFolder">
......
public/app/features/dashboard/components/SaveModals/SaveProvisionedDashboardModalCtrl.ts
......@@ -27,10 +27,10 @@ const template = `
</div>
<div class="gf-form-button-row">
<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 class="btn btn-secondary" clipboard-button="ctrl.save()">
<i class="fa fa-save"></i>&nbsp;Save JSON to file
Save JSON to file
</button>
<a class="btn btn-link" ng-click="ctrl.dismiss();">Cancel</a>
</div>
......
public/app/features/dashboard/components/ShareModal/template.html
<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>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in tabs">
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
{{::tab.title}}
</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-header">
<h2 class="modal-header-title">
<i class="fa fa-share-square-o"></i>
<span class="p-l-1">{{ modalTitle }}</span>
</h2>
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="tab in tabs">
<a class="gf-tabs-link" ng-click="editor.index = $index" ng-class="{active: editor.index === $index}">
{{::tab.title}}
</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>
<script type="text/ng-template" id="shareEmbed.html">
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="fa fa-code"></i>
</div>
<div class="share-modal-content">
<div ng-include src="'shareLinkOptions.html'"></div>
<p class="share-modal-info-text">
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.
</p>
<div class="gf-form-group gf-form--grow">
<div class="gf-form">
<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
</div>
</div>
</div>
</div>
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="fa fa-code"></i>
</div>
<div class="share-modal-content">
<div ng-include src="'shareLinkOptions.html'"></div>
<p class="share-modal-info-text">
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.
</p>
<div class="gf-form-group gf-form--grow">
<div class="gf-form">
<textarea rows="5" data-share-panel-url class="gf-form-input" ng-model='iframeHtml'></textarea>
</div>
</div>
</div>
</div>
</script>
<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 type="text/ng-template" id="shareLinkOptions.html">
<div class="gf-form-group">
<gf-form-switch class="gf-form"
label="Current time range" label-class="width-12" switch-class="max-width-6"
checked="options.forCurrent" on-change="buildUrl()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Template variables" label-class="width-12" switch-class="max-width-6"
checked="options.includeTemplateVars" on-change="buildUrl()">
</gf-form-switch>
<div class="gf-form">
<span class="gf-form-label width-12">Theme</span>
<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>
</div>
</div>
</div>
<div class="gf-form-group">
<gf-form-switch class="gf-form"
label="Current time range" label-class="width-12" switch-class="max-width-6"
checked="options.forCurrent" on-change="buildUrl()">
</gf-form-switch>
<gf-form-switch class="gf-form"
label="Template variables" label-class="width-12" switch-class="max-width-6"
checked="options.includeTemplateVars" on-change="buildUrl()">
</gf-form-switch>
<div class="gf-form">
<span class="gf-form-label width-12">Theme</span>
<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>
</div>
</div>
</div>
</script>
<script type="text/ng-template" id="shareLink.html">
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="fa fa-link"></i>
</div>
<div class="share-modal-content">
<p class="share-modal-info-text">
Create a direct link to this dashboard or panel, customized with the options below.
</p>
<div ng-include src="'shareLinkOptions.html'"></div>
<div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-form--grow">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl"></input>
</div>
<div class="gf-form">
<button class="btn btn-inverse" clipboard-button="getShareUrl()"><i class="fa fa-clipboard"></i> Copy</button>
</div>
</div>
</div>
</div>
<div class="gf-form" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</div>
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i class="gicon gicon-link"></i>
</div>
<div class="share-modal-content">
<p class="share-modal-info-text">
Create a direct link to this dashboard or panel, customized with the options below.
</p>
<div ng-include src="'shareLinkOptions.html'"></div>
<div>
<div class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form gf-form--grow">
<input type="text" data-share-panel-url class="gf-form-input" ng-model="shareUrl">
</div>
<div class="gf-form">
<button class="btn btn-inverse" clipboard-button="getShareUrl()">Copy</button>
</div>
</div>
</div>
</div>
<div class="gf-form" ng-show="modeSharePanel">
<a href="{{imageUrl}}" target="_blank"><i class="fa fa-camera"></i> Direct link rendered image</a>
</div>
</div>
</script>
<script type="text/ng-template" id="shareSnapshot.html">
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<i ng-if="!loading" class="icon-gf icon-gf-snapshot"></i>
</div>
<div class="share-modal-content">
<div ng-if="step === 1">
<p class="share-modal-info-text">
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,
leaving only the visible metric data and series names embedded into your dashboard.
</p>
<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.
Share wisely.
</p>
</div>
<div class="share-modal-header" ng-if="step === 3">
<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
browser caches or CDN caches.
</p>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Snapshot name</span>
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15" >
</div>
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Expire</span>
<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>
</div>
</div>
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
<div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
<i class="fa fa-external-link-square"></i>
{{snapshotUrl}}
</a>
<br>
<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()"><i class="fa fa-clipboard"></i> Copy Link</button>
</div>
</div>
</div>
<div ng-if="step === 1">
<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.
</p>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Timeout (seconds)</span>
<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15" >
</div>
</div>
<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">
<i class="fa fa-save"></i>
Local Snapshot
</button>
<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
<i class="fa fa-cloud-upload"></i>
{{sharingButtonText}}
</button>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
<div class="ng-cloak" ng-cloak ng-controller="ShareSnapshotCtrl" ng-init="init()">
<div class="share-modal-header">
<div class="share-modal-big-icon">
<i ng-if="loading" class="fa fa-spinner fa-spin"></i>
<i ng-if="!loading" class="gicon gicon-snapshots"></i>
</div>
<div class="share-modal-content">
<div ng-if="step === 1">
<p class="share-modal-info-text">
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,
leaving only the visible metric data and series names embedded into your dashboard.
</p>
<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.
Share wisely.
</p>
</div>
<div class="share-modal-header" ng-if="step === 3">
<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
browser caches or CDN caches.
</p>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Snapshot name</span>
<input type="text" ng-model="snapshot.name" class="gf-form-input max-width-15">
</div>
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Expire</span>
<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>
</div>
</div>
<div class="gf-form" ng-if="step === 2" style="margin-top: 40px">
<div class="gf-form-row">
<a href="{{snapshotUrl}}" class="large share-modal-link" target="_blank">
<i class="fa fa-external-link-square"></i>
{{snapshotUrl}}
</a>
<br>
<button class="btn btn-inverse" clipboard-button="getSnapshotUrl()">Copy Link</button>
</div>
</div>
</div>
<div ng-if="step === 1">
<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.
</p>
</div>
<div class="gf-form-group share-modal-options">
<div class="gf-form" ng-if="step === 1">
<span class="gf-form-label width-12">Timeout (seconds)</span>
<input type="number" ng-model="snapshot.timeoutSeconds" class="gf-form-input max-width-15">
</div>
</div>
<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">
Local Snapshot
</button>
<button class="btn gf-form-btn width-16 btn-secondary" ng-if="externalEnabled" ng-click="createSnapshot(true)" ng-disabled="loading">
{{sharingButtonText}}
</button>
<a class="btn btn-link" ng-click="dismiss()">Cancel</a>
</div>
<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>
</div>
</div>
</div>
</div>
</div>
</script>
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',
});
......
public/app/features/datasources/DashboardsTable.tsx
......@@ -19,7 +19,7 @@ const DashboardsTable: FC<Props> = ({ dashboards, onImport, onRemove }) => {
return (
<tr key={`${dashboard.dashboardId}-${index}`}>
<td className="width-1">
<i className="icon-gf icon-gf-dashboard" />
<i className="gicon gicon-dashboard" />
</td>
<td>
{dashboard.imported ? (
......
public/app/features/datasources/__snapshots__/DashboardsTable.test.tsx.snap
......@@ -20,7 +20,7 @@ exports[`Render should render table 1`] = `
className="width-1"
>
<i
className="icon-gf icon-gf-dashboard"
className="gicon gicon-dashboard"
/>
</td>
<td>
......@@ -50,7 +50,7 @@ exports[`Render should render table 1`] = `
className="width-1"
>
<i
className="icon-gf icon-gf-dashboard"
className="gicon gicon-dashboard"
/>
</td>
<td>
......
public/app/features/folders/partials/create_folder.html
......@@ -26,7 +26,7 @@
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary width-12" ng-disabled="!ctrl.titleTouched || ctrl.hasValidationError">
<i class="fa fa-save"></i> Create
Create
</button>
</div>
</form>
......
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',
......
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`,
......
public/app/features/manage-dashboards/partials/dashboard_import.html
......@@ -147,10 +147,10 @@
<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()">
<i class="fa fa-save"></i> Import
Import
</button>
<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>
<a class="btn btn-link" ng-click="ctrl.back()">Cancel</a>
</div>
......
public/app/features/manage-dashboards/partials/snapshot_list.html
......@@ -21,7 +21,7 @@
</td>
<td class="text-center">
<a href="{{snapshot.url}}" class="btn btn-inverse btn-small">
<i class="fa fa-eye"></i>
<i class="gicon gicon-viewer"></i>
View
</a>
</td>
......
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',
});
}
......
public/app/features/playlist/partials/playlist.html
......@@ -24,7 +24,7 @@
<table class="filter-table playlist-available-list">
<tr ng-repeat="playlistItem in ctrl.playlistItems">
<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 ng-if="playlistItem.type === 'dashboard_by_tag'">
<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">
<tr ng-repeat="playlistItem in ctrl.filteredDashboards">
<td>
<i class="icon-gf icon-gf-dashboard"></i>
<i class="gicon gicon-dashboard"></i>
&nbsp;&nbsp;{{playlistItem.title}}
<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
</td>
......
public/app/features/plugins/PluginListItem.tsx
......@@ -7,13 +7,22 @@ interface Props {
const PluginListItem: FC<Props> = 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 (
<li className="card-item-wrapper">
<a className="card-item" href={`plugins/${plugin.id}/edit`}>
<div className="card-item-header">
<div className="card-item-type">
<i className={`icon-gf icon-gf-${plugin.type}`} />
<i className={icon} />
{plugin.type}
</div>
{plugin.hasUpdate && (
......
public/app/features/plugins/import_list/import_list.html
......@@ -3,7 +3,7 @@
<tbody>
<tr ng-repeat="dash in ctrl.dashboards">
<td class="width-1">
<i class="icon-gf icon-gf-dashboard"></i>
<i class="gicon gicon-dashboard"></i>
</td>
<td>
<a href="{{dash.importedUrl}}" ng-show="dash.imported">
......
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';
}
......
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'"
><i class="fa fa-plus"></i> New</a
>
ng-hide="mode === 'edit' || mode === 'new'">
New
</a>
</div>
<div ng-if="mode === 'list'">
......
public/app/features/users/InviteeRow.tsx
......@@ -34,7 +34,7 @@ class InviteeRow extends PureComponent<Props> {
style={{ position: 'absolute', right: -1000 }}
ref={this.copyUrlRef}
/>
<i className="fa fa-clipboard" /> Copy Invite
Copy Invite
</button>
&nbsp;
</td>
......
public/app/partials/edit_json.html
<div ng-controller="JsonEditorCtrl">
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
JSON
</h2>
<div class="tabbed-view-header">
<h2 class="tabbed-view-title">
JSON
</h2>
<button class="tabbed-view-close-btn" ng-click="dismiss()">
<i class="fa fa-remove"></i>
</button>
</div>
<button class="tabbed-view-close-btn" ng-click="dismiss()">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="tabbed-view-body">
<div class="gf-form">
<code-editor content="json" data-mode="json" data-max-lines=20 ></code-editor>
</div>
<div class="tabbed-view-body">
<div class="gf-form">
<code-editor content="json" data-mode="json" data-max-lines="20"></code-editor>
</div>
<div class="gf-form-button-row">
<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()">
<i class="fa fa-clipboard"></i>&nbsp;Copy to Clipboard
</button>
</div>
</div>
<div class="gf-form-button-row">
<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()">
Copy to Clipboard
</button>
</div>
</div>
</div>
public/app/plugins/panel/gettingstarted/module.html
......@@ -9,7 +9,7 @@
<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>
</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>
</ul>
</div>
......
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 => {
......
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;
......
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;
......
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';
}
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;
......
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 {
......
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;
......
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 {
......
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