Skip to content

N
nexpie-grafana-theme
Commit 6937f354 by Ivana Huckova Committed by GitHub
Options

@grafana/ui: Various smaller Icon updates (#23588) 

* Remove icon types duplicates, update getAllIcons

* Update Explore-related icons, positioning

* Update Getting started icons

* Update navmodel

* Style adjustments, css changes

* Update tests

* Updatee icon name in test file
parent 2de79a4d
Showing with 102 additions and 92 deletions
packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
......@@ -27,7 +27,7 @@ const getStyles = stylesFactory(() => {
z-index: 100;
`,
icon: css`
margin-left: 4px;
margin: 1px 0 0 4px;
`,
};
});
......
packages/grafana-ui/src/components/Collapse/Collapse.tsx
......@@ -65,6 +65,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
headerButtons: css`
label: collapse__header-buttons;
margin-right: ${theme.spacing.sm};
margin-top: ${theme.spacing.xxs};
font-size: ${theme.typography.size.lg};
line-height: ${theme.typography.heading.h6};
display: inherit;
......
packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
......@@ -140,7 +140,7 @@ export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = props => {
onClick={() => setIsAccessHelpVisible(isVisible => !isVisible)}
>
Help&nbsp;
<Icon name={isAccessHelpVisible ? 'angle-down' : 'angle-right'} />
<Icon name={isAccessHelpVisible ? 'angle-down' : 'angle-right'} style={{ marginBottom: 0 }} />
</label>
</div>
</div>
......
packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
......@@ -48,7 +48,7 @@ export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceCon
theme="info"
>
<div className="gf-form-help-icon gf-form-help-icon--right-normal">
<Icon name="info-circle" size="sm" />
<Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
</div>
</Tooltip>
</div>
......
packages/grafana-ui/src/components/Forms/Legacy/Select/ButtonSelect.tsx
......@@ -23,7 +23,7 @@ const ButtonComponent = (buttonProps: ButtonComponentProps) => (props: any) => {
tabIndex={0} // necessary to get onBlur to work https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
>
<div className="select-button">
{iconClass && <Icon className={'select-button-icon'} name={iconClass as IconName} />}
{iconClass && <Icon className={'select-button-icon'} name={iconClass as IconName} size="lg" />}
<span className="select-button-value">{label ? label : ''}</span>
{!props.menuIsOpen && <Icon name="angle-down" style={{ marginBottom: 0 }} size="lg" />}
{props.menuIsOpen && <Icon name="angle-up" style={{ marginBottom: 0 }} size="lg" />}
......
packages/grafana-ui/src/components/Icon/assets/SquareShape.tsx 0 → 100644
import React, { FunctionComponent } from 'react';
import { SvgProps } from './types';
export const SquareShape: FunctionComponent<SvgProps> = ({ size, ...rest }) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
enableBackground="new 0 0 24 24"
viewBox="0 0 24 24"
width={size}
height={size}
{...rest}
>
<rect width="85%" height="85%" x="2" y="2" rx="5" />
</svg>
);
};
packages/grafana-ui/src/components/Icon/assets/index.ts
......@@ -10,3 +10,4 @@ export * from './Folder';
export * from './Import';
export * from './PanelAdd';
export * from './Circle';
export * from './SquareShape';
packages/grafana-ui/src/components/TimePicker/TimeRangePicker.tsx
......@@ -67,6 +67,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
margin-left: ${theme.spacing.xs};
`,
clockIcon: css`
margin-left: ${theme.spacing.xs};
margin-right: ${theme.spacing.xs};
`,
noRightBorderStyle: css`
......@@ -155,7 +156,7 @@ export class UnthemedTimeRangePicker extends PureComponent<Props, State> {
<div className={styles.buttons}>
{hasAbsolute && (
<button className="btn navbar-button navbar-button--tight" onClick={onMoveBackward}>
<Icon name="angle-left" />
<Icon name="angle-left" size="lg" />
</button>
)}
<div>
......
packages/grafana-ui/src/components/TimePicker/__snapshots__/TimeRangePicker.test.tsx.snap
......@@ -13,6 +13,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
>
<Icon
name="angle-left"
size="lg"
/>
</button>
<div>
......@@ -39,7 +40,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
onClick={[Function]}
>
<Icon
className="css-znfyx6"
className="css-yawc0"
name="clock-nine"
size="lg"
/>
......@@ -328,6 +329,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
>
<Icon
name="angle-left"
size="lg"
/>
</button>
<div>
......@@ -354,7 +356,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
onClick={[Function]}
>
<Icon
className="css-znfyx6"
className="css-yawc0"
name="clock-nine"
size="lg"
/>
......
packages/grafana-ui/src/types/icon.ts
......@@ -3,8 +3,6 @@ export type IconType = 'mono' | 'default';
export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
export type IconName =
| 'fa fa-fw fa-unlock'
| 'fa fa-envelope'
| 'fa fa-spinner'
| 'grafana'
| 'question-circle'
......@@ -23,7 +21,6 @@ export type IconName =
| 'slack'
| 'download-alt'
| 'mobile-android'
| 'slack'
| 'plus-square'
| 'folder-plus'
| 'folder-open'
......@@ -42,7 +39,6 @@ export type IconName =
| 'forward'
| 'check'
| 'check-circle'
| 'add-panel'
| 'copy'
| 'lock'
| 'unlock'
......@@ -68,7 +64,6 @@ export type IconName =
| 'bars'
| 'save'
| 'apps'
| 'folder-plus'
| 'link'
| 'upload'
| 'columns'
......@@ -99,10 +94,8 @@ export type IconName =
| 'star'
| 'list-ul'
| 'edit'
| 'shield'
| 'eye'
| 'eye-slash'
| 'filter'
| 'monitor'
| 'plus-circle'
| 'arrow-left'
......@@ -111,7 +104,6 @@ export type IconName =
| 'minus'
| 'signal'
| 'search-plus'
| 'search-minus'
| 'minus-circle'
| 'table'
| 'plus'
......@@ -121,6 +113,8 @@ export type IconName =
| 'favorite';
export const getAvailableIcons = (): IconName[] => [
'fa fa-spinner',
'grafana',
'question-circle',
'angle-up',
'history',
......@@ -137,7 +131,6 @@ export const getAvailableIcons = (): IconName[] => [
'slack',
'download-alt',
'mobile-android',
'slack',
'plus-square',
'folder-plus',
'folder-open',
......@@ -156,7 +149,6 @@ export const getAvailableIcons = (): IconName[] => [
'forward',
'check',
'check-circle',
'add-panel',
'copy',
'lock',
'unlock',
......@@ -182,7 +174,6 @@ export const getAvailableIcons = (): IconName[] => [
'bars',
'save',
'apps',
'folder-plus',
'link',
'upload',
'columns',
......@@ -213,10 +204,8 @@ export const getAvailableIcons = (): IconName[] => [
'star',
'list-ul',
'edit',
'shield',
'eye',
'eye-slash',
'filter',
'monitor',
'plus-circle',
'arrow-left',
......@@ -225,7 +214,6 @@ export const getAvailableIcons = (): IconName[] => [
'minus',
'signal',
'search-plus',
'search-minus',
'minus-circle',
'table',
'plus',
......
public/app/core/components/QueryOperationRow/QueryOperationAction.test.tsx
......@@ -4,12 +4,12 @@ import { shallow } from 'enzyme';
describe('QueryOperationAction', () => {
it('renders', () => {
expect(() => shallow(<QueryOperationAction icon="add-panel" onClick={() => {}} />)).not.toThrow();
expect(() => shallow(<QueryOperationAction icon="panel-add" onClick={() => {}} />)).not.toThrow();
});
describe('when disabled', () => {
it('does not call onClick handler', () => {
const clickSpy = jest.fn();
const wrapper = shallow(<QueryOperationAction icon="add-panel" onClick={clickSpy} title="Test action" />);
const wrapper = shallow(<QueryOperationAction icon="panel-add" onClick={clickSpy} title="Test action" />);
const actionEl = wrapper.find({ 'aria-label': 'Test action query operation action' });
expect(actionEl).toHaveLength(1);
......
public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx
......@@ -182,7 +182,7 @@ export class PanelHeader extends Component<Props, State> {
)}
{data.request && data.request.timeInfo && (
<span className="panel-time-info">
<Icon name="clock-nine" /> {data.request.timeInfo}
<Icon name="clock-nine" size="sm" /> {data.request.timeInfo}
</span>
)}
</div>
......
public/app/features/datasources/state/navModel.ts
......@@ -15,7 +15,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
children: [
{
active: false,
icon: 'fa fa-fw fa-sliders',
icon: 'sliders-v-alt',
id: `datasource-settings-${dataSource.id}`,
text: 'Settings',
url: `datasources/edit/${dataSource.id}/`,
......@@ -38,7 +38,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
if (pluginMeta.includes && hasDashboards(pluginMeta.includes)) {
navModel.children.push({
active: false,
icon: 'fa fa-fw fa-th-large',
icon: 'apps',
id: `datasource-dashboards-${dataSource.id}`,
text: 'Dashboards',
url: `datasources/edit/${dataSource.id}/dashboards`,
......@@ -48,7 +48,7 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat
if (config.licenseInfo.hasLicense) {
navModel.children.push({
active: false,
icon: 'fa fa-fw fa-lock',
icon: 'lock',
id: `datasource-permissions-${dataSource.id}`,
text: 'Permissions',
url: `datasources/edit/${dataSource.id}/permissions`,
......
public/app/features/explore/LiveLogs.tsx
......@@ -184,7 +184,7 @@ class LiveLogs extends PureComponent<Props, State> {
{isPaused ? 'Resume' : 'Pause'}
</button>
<button onClick={this.props.stopLive} className={cx('btn btn-inverse', styles.button)}>
<Icon name="square-shape" />
<Icon name="square-shape" size="lg" type="mono" />
&nbsp; Exit live mode
</button>
{isPaused || (
......
public/app/features/explore/LiveTailButton.tsx
......@@ -137,7 +137,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
<CSSTransition
mountOnEnter={true}
unmountOnExit={true}
timeout={500}
timeout={100}
in={isLive}
classNames={{
enter: styles.stopButtonEnter,
......@@ -151,7 +151,7 @@ export function LiveTailButton(props: LiveTailButtonProps) {
className={`btn navbar-button navbar-button--attached explore-active-button ${styles.isLive}`}
onClick={stop}
>
<Icon className="icon-brand-gradient" name="square-shape" />
<Icon className="icon-brand-gradient" name="square-shape" size="lg" type="mono" />
</button>
</div>
</CSSTransition>
......
public/app/features/explore/QueryRowActions.tsx
......@@ -51,7 +51,7 @@ export function QueryRowActions(props: Props) {
onClick={onClickToggleDisabled}
title={isDisabled ? 'Enable query' : 'Disable query'}
>
<Icon name={isDisabled ? 'eye' : 'eye-slash'} />
<Icon name={isDisabled ? 'eye-slash' : 'eye'} />
</button>
</div>
<div className="gf-form">
......
public/app/features/explore/ResponsiveButton.tsx
......@@ -46,9 +46,9 @@ export const ResponsiveButton = forwardRef<HTMLDivElement, Props>((props, ref) =
onClick={onClick}
disabled={disabled || false}
>
{icon && iconSide === IconSide.left ? <Icon name={icon} className={iconClassName} /> : null}
{icon && iconSide === IconSide.left ? <Icon name={icon} className={iconClassName} size="lg" /> : null}
<span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
{icon && iconSide === IconSide.right ? <Icon name={icon} className={iconClassName} /> : null}
{icon && iconSide === IconSide.right ? <Icon name={icon} className={iconClassName} size="lg" /> : null}
</button>
</div>
);
......
public/app/features/explore/TimeSyncButton.tsx
......@@ -47,7 +47,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
onClick={() => onClick()}
>
<Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} />
<Icon name="link" className={classNames(styles.topPadding, isSynced && 'icon-brand-gradient')} size="lg" />
</button>
</Tooltip>
);
......
public/app/features/explore/__snapshots__/QueryRowActions.test.tsx.snap
......@@ -38,7 +38,7 @@ exports[`QueryRowActions should render component 1`] = `
title="Disable query"
>
<Icon
name="eye-slash"
name="eye"
/>
</button>
</div>
......
public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap
......@@ -23,6 +23,7 @@ exports[`TimeSyncButton should render component 1`] = `
<Icon
className="css-1c3xqzq-topPadding icon-brand-gradient"
name="link"
size="lg"
>
<div
className="css-1cvxpvr"
......@@ -30,14 +31,14 @@ exports[`TimeSyncButton should render component 1`] = `
<UilLink
className="icon-brand-gradient css-1q2xpj8-topPadding"
color="currentColor"
size={16}
size={18}
>
<svg
className="icon-brand-gradient css-1q2xpj8-topPadding"
fill="currentColor"
height={16}
height={18}
viewBox="0 0 24 24"
width={16}
width={18}
xmlns="http://www.w3.org/2000/svg"
>
<path
......
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">
<icon name="'eye'" style="margin-right: 4px"></icon>
<icon name="'eye'" style="margin-right: 4px;"></icon>
View
</a>
</td>
......
public/app/features/playlist/partials/playlist.html
......@@ -73,7 +73,7 @@
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<icon name="'plus'"></i>
<icon name="'plus'"></icon>
Add to playlist
</button>
</td>
......@@ -91,7 +91,7 @@
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
<icon name="'plus'"></i>
<icon name="'plus'"></icon>
Add to playlist
</button>
</td>
......
public/app/features/profile/partials/profile.html
......@@ -24,7 +24,7 @@
<td>{{ session.browser }} on {{ session.os }} {{ session.osVersion }}</td>
<td>
<button class="btn btn-danger btn-small" ng-click="ctrl.revokeUserSession(session.id)">
<icon name="'power'" style="margin-top: -2px;"></icon>
<icon name="'power'"></icon>
</button>
</td>
</tr>
......
public/app/features/teams/__mocks__/navModelMock.ts
......@@ -2,7 +2,7 @@ export const getMockNavModel = (pageName: string) => {
return {
node: {
active: false,
icon: 'gicon gicon-team',
icon: 'users-alt',
id: `team-${pageName}-2`,
text: `${pageName}`,
url: 'org/teams/edit/2/members',
......@@ -16,14 +16,14 @@ export const getMockNavModel = (pageName: string) => {
children: [
{
active: false,
icon: 'gicon gicon-team',
icon: 'users-alt',
id: 'team-members-2',
text: 'Members',
url: 'org/teams/edit/2/members',
},
{
active: false,
icon: 'fa fa-fw fa-sliders',
icon: 'sliders-v-alt',
id: 'team-settings-2',
text: 'Settings',
url: 'org/teams/edit/2/settings',
......@@ -41,14 +41,14 @@ export const getMockNavModel = (pageName: string) => {
children: [
{
active: true,
icon: 'gicon gicon-team',
icon: 'users-alt',
id: 'team-members-2',
text: 'Members',
url: 'org/teams/edit/2/members',
},
{
active: false,
icon: 'fa fa-fw fa-sliders',
icon: 'sliders-v-alt',
id: 'team-settings-2',
text: 'Settings',
url: 'org/teams/edit/2/settings',
......
public/app/features/teams/state/navModel.ts
......@@ -13,14 +13,14 @@ export function buildNavModel(team: Team): NavModelItem {
children: [
{
active: false,
icon: 'gicon gicon-team',
icon: 'users-alt',
id: `team-members-${team.id}`,
text: 'Members',
url: `org/teams/edit/${team.id}/members`,
},
{
active: false,
icon: 'fa fa-fw fa-sliders',
icon: 'sliders-v-alt',
id: `team-settings-${team.id}`,
text: 'Settings',
url: `org/teams/edit/${team.id}/settings`,
......@@ -31,7 +31,7 @@ export function buildNavModel(team: Team): NavModelItem {
if (config.licenseInfo.hasLicense) {
navModel.children.push({
active: false,
icon: 'fa fa-fw fa-refresh',
icon: 'sync',
id: `team-groupsync-${team.id}`,
text: 'External group sync',
url: `org/teams/edit/${team.id}/groupsync`,
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/annotations.editor.html
......@@ -61,8 +61,8 @@
<div class="gf-form">
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
</div>
......
public/app/plugins/datasource/grafana-azure-monitor-datasource/partials/query.editor.html
......@@ -244,8 +244,8 @@
<div class="gf-form">
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
<div class="gf-form" ng-show="ctrl.lastQuery">
......
public/app/plugins/datasource/mssql/partials/annotations.editor.html
......@@ -19,8 +19,8 @@
<div class="gf-form">
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
</div>
......
public/app/plugins/datasource/mssql/partials/query.editor.html
......@@ -16,15 +16,15 @@
<div class="gf-form">
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
<div class="gf-form" ng-show="ctrl.lastQueryMeta">
<label class="gf-form-label query-keyword" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
Generated SQL
<icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
</label>
</div>
<div class="gf-form gf-form--grow">
......
public/app/plugins/datasource/mysql/partials/annotations.editor.html
......@@ -19,8 +19,8 @@
<div class="gf-form">
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
</div>
......
public/app/plugins/datasource/mysql/partials/query.editor.html
......@@ -116,15 +116,15 @@
<div class="gf-form">
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
<div class="gf-form" ng-show="ctrl.lastQueryMeta">
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
Generated SQL
<icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
</label>
</div>
<div class="gf-form gf-form--grow">
......
public/app/plugins/datasource/opentsdb/partials/query.editor.html
......@@ -213,7 +213,7 @@
</label>
<label class="gf-form-label" >
<a ng-click="ctrl.addTag()" ng-hide="ctrl.errors.tags">add tag</a>
<a ng-click="ctrl.closeAddTagMode()"><icon name="'times'"></icon></a>
<a ng-click="ctrl.closeAddTagMode()"><icon name="'times'" size="'sm'"></icon></a>
</label>
</div>
......
public/app/plugins/datasource/postgres/partials/annotations.editor.html
......@@ -19,8 +19,8 @@
<div class="gf-form">
<label class="gf-form-label query-keyword" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
</div>
......
public/app/plugins/datasource/postgres/partials/query.editor.html
......@@ -116,15 +116,15 @@
<div class="gf-form">
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.showHelp = !ctrl.showHelp">
Show Help
<icon name="'angle-caret-down'" ng-show="ctrl.showHelp"></icon>
<icon name="'angle-caret-right'" ng-hide="ctrl.showHelp"></icon>
<icon name="'angle-down'" ng-show="ctrl.showHelp" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showHelp" style="margin-top: 3px;"></icon>
</label>
</div>
<div class="gf-form" ng-show="ctrl.lastQueryMeta">
<label class="gf-form-label query-keyword pointer" ng-click="ctrl.showLastQuerySQL = !ctrl.showLastQuerySQL">
Generated SQL
<icon name="'angle-caret-down'" ng-show="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-caret-right'" ng-hide="ctrl.showLastQuerySQL"></icon>
<icon name="'angle-down'" ng-show="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
<icon name="'angle-right'" ng-hide="ctrl.showLastQuerySQL" style="margin-top: 3px;"></icon>
</label>
</div>
<div class="gf-form gf-form--grow">
......
public/app/plugins/datasource/stackdriver/components/Help.tsx
......@@ -47,7 +47,12 @@ export class Help extends React.Component<Props, State> {
{rawQuery && (
<div className="gf-form" onClick={this.onRawQueryClicked}>
<label className="gf-form-label query-keyword">
Raw Query <Icon name={displaRawQuery ? 'angle-down' : 'angle-right'} ng-show="ctrl.showHelp" />
Raw query
<Icon
name={displaRawQuery ? 'angle-down' : 'angle-right'}
ng-show="ctrl.showHelp"
style={{ marginTop: '3px' }}
/>
</label>
</div>
)}
......
public/app/plugins/panel/gettingstarted/GettingStarted.tsx
......@@ -2,7 +2,7 @@
import React, { PureComponent } from 'react';
import { PanelProps } from '@grafana/data';
import { Icon } from '@grafana/ui';
import { Icon, IconName } from '@grafana/ui';
import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
import { backendSrv } from 'app/core/services/backend_srv';
import { contextSrv } from 'app/core/core';
......@@ -11,7 +11,7 @@ import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
interface Step {
title: string;
cta?: string;
icon: string;
icon: IconName;
href: string;
target?: string;
note?: string;
......@@ -37,7 +37,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
this.steps = [
{
title: 'Install Grafana',
icon: 'icon-gf icon-gf-check',
icon: 'check',
href: 'http://docs.grafana.org/',
target: '_blank',
note: 'Review the installation docs',
......@@ -46,7 +46,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
{
title: 'Create a data source',
cta: 'Add data source',
icon: 'gicon gicon-datasources',
icon: 'database',
href: 'datasources/new?gettingstarted',
check: () => {
return new Promise(resolve => {
......@@ -63,7 +63,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
{
title: 'Build a dashboard',
cta: 'New dashboard',
icon: 'gicon gicon-dashboard',
icon: 'apps',
href: 'dashboard/new?gettingstarted',
check: () => {
return backendSrv.search({ limit: 1 }).then(result => {
......@@ -74,7 +74,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
{
title: 'Invite your team',
cta: 'Add Users',
icon: 'gicon gicon-team',
icon: 'users-alt',
href: 'org/users?gettingstarted',
check: () => {
return backendSrv.get('/api/org/users/lookup').then((res: any) => {
......@@ -86,7 +86,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
{
title: 'Install apps & plugins',
cta: 'Explore plugin repository',
icon: 'gicon gicon-plugins',
icon: 'plug',
href: 'https://grafana.com/plugins?utm_source=grafana_getting_started',
check: () => {
return backendSrv.get('/api/plugins', { embedded: 0, core: 0 }).then((plugins: any[]) => {
......@@ -153,7 +153,7 @@ export class GettingStarted extends PureComponent<PanelProps, State> {
<div key={index} className={step.done ? 'progress-step completed' : 'progress-step active'}>
<a className="progress-link" href={step.href} target={step.target} title={step.note}>
<span className="progress-marker">
<i className={step.icon} />
<Icon name={step.icon} size="xxl" />
</span>
<span className="progress-text">{step.title}</span>
</a>
......
public/sass/components/_gf-form.scss
......@@ -147,10 +147,6 @@ $input-border: 1px solid $input-border-color;
background: $list-item-hover-bg;
color: $link-color;
}
.fa-caret-down {
padding-left: 4px;
}
}
&:disabled {
......@@ -390,7 +386,7 @@ $input-border: 1px solid $input-border-color;
&--right-absolute {
position: absolute;
right: $spacer;
top: 10px;
top: 6px;
}
&--right-normal {
......
public/sass/pages/_explore.scss
......@@ -7,11 +7,7 @@
}
.icon-brand-gradient {
text-shadow: none;
background: linear-gradient(180deg, #f05a28 30%, #fbca0a 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
color: linear-gradient(180deg, #f05a28 30%, #fbca0a 100%);
}
.icon-margin-left {
......
public/sass/pages/_plugins.scss
......@@ -27,5 +27,7 @@
img {
width: 16px;
margin-right: 4px;
margin-bottom: 1px;
}
}
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