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';
$navbar-btn-gicon-brightness: brightness(0.5);
// Forms
// -------------------------
$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';
$navbar-btn-gicon-brightness: brightness(1.5);
// Forms
// -------------------------
$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>
<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>

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

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

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

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

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"
>
<i
className="icon-gf icon-gf-settings"
className="gicon gicon-cog"
/>
</a>
</div>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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-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">
<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>
<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>
<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>
<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>
<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 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>
</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="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="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-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 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 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 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 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 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>
</script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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';
$navbar-btn-gicon-brightness: brightness(0.5);
// Forms
// -------------------------
$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';
$navbar-btn-gicon-brightness: brightness(1.5);
// Forms
// -------------------------
$input-bg: $white;

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

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

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

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

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

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

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

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

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

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