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