From d2d61d9bc255e06d7153d8bfb15b763304f4ef4e Mon Sep 17 00:00:00 2001 From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com> Date: Tue, 7 Apr 2020 14:50:49 +0200 Subject: [PATCH] Part2: Unicons implementation (#23266) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Create a new Icon component * Update icons in main sidebar * Update icons in Useful links and in react components on main site * Update icons in Useful links and in main top navigation * Adjust sizing * Update panel navigation and timepicker * Update icons in Panel menu * Update icons in add panel widget * Resolve merge conflict * Fix part of the test errors and type errors * Fix storybook errors * Update getAvailableIcons import in storybook knobs * Fix import path * Fix SyntaxError: Cannot use import statement outside a module in test environment error * Remove dynamic imports * Remove types as using @ts-ignore * Update snapshot test * Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax * Implment icons in Tabs * Implement icons in search items and empty list * Update buttons * Update button-related snapshot tests * Update icons in modals and page headers * Create anfular wrapper and update all icons on search screen * Update sizing, remove colors, update snapshot tests * Remove color prop from icon, remove color implemetation in mono icons * Remove color props from monochrome icons * Complete update of icons for search screen * Update icons for infor tooltips, playlist, permissions * Support temporarly font awesome icons used in enterprise grafana * Part1: Unicons implementation (#23197) * Create a new Icon component * Update icons in main sidebar * Update icons in Useful links and in react components on main site * Update icons in Useful links and in main top navigation * Adjust sizing * Update panel navigation and timepicker * Update icons in Panel menu * NewPanelEditor: Fixed so that test alert rule works in new edit mode (#23179) * Update icons in add panel widget * Resolve merge conflict * Fix part of the test errors and type errors * Fix storybook errors * Update getAvailableIcons import in storybook knobs * Fix import path * Fix SyntaxError: Cannot use import statement outside a module in test environment error * Remove dynamic imports * Remove types as using @ts-ignore * Update snapshot test * Add @iconscout/react-unicons to the shouldExclude list as it is blundled with es2015 syntax * Remove color prop from icon, remove color implemetation in mono icons * Update navbar styling * Move toPascalCase to utils/string Co-authored-by: Torkel Ödegaard * Icons update * Add optional chaining to for isFontAwesome variable Co-authored-by: Torkel Ödegaard --- .../src/components/Button/Button.tsx | 11 +- .../src/components/Button/ButtonContent.tsx | 16 +- .../CallToActionCard.story.tsx | 2 +- .../ConfirmButton/ConfirmButton.story.tsx | 2 +- .../components/ConfirmButton/DeleteButton.tsx | 2 +- .../components/DataLinks/DataLinksEditor.tsx | 2 +- .../DataLinksInlineEditor.tsx | 2 +- .../src/components/FormLabel/FormLabel.tsx | 3 +- .../Forms/Legacy/Select/_Select.scss | 18 +- .../grafana-ui/src/components/Icon/Icon.tsx | 7 + .../src/components/Icon/assets/Bell.tsx | 21 ++ .../src/components/Icon/assets/Favorite.tsx | 2 +- .../src/components/Icon/assets/Folder.tsx | 10 + .../src/components/Icon/assets/FolderPlus.tsx | 21 ++ .../src/components/Icon/assets/Grafana.tsx | 70 +++++++ .../src/components/Icon/assets/Import.tsx | 23 ++ .../src/components/Icon/assets/PlusSquare.tsx | 21 ++ .../src/components/Icon/assets/index.ts | 6 + .../components/InfoTooltip/InfoTooltip.tsx | 3 +- .../src/components/Logs/LogDetailsRow.tsx | 2 +- .../src/components/Modal/ModalHeader.tsx | 2 +- .../src/components/Modal/ModalTabContent.tsx | 12 +- .../src/components/Modal/ModalTabsHeader.tsx | 2 +- .../src/components/Switch/Switch.tsx | 3 +- .../grafana-ui/src/components/Tabs/Tab.tsx | 13 +- .../ThresholdsEditorNew/ThresholdsEditor.tsx | 2 +- .../TimePickerContent/TimePickerCalendar.tsx | 2 +- .../TimePickerContent/TimeRangeForm.tsx | 2 +- .../TransformersUI/TransformationsEditor.tsx | 2 +- .../LegacyValueMappingsEditor.tsx | 2 +- .../ValueMappingsEditor.tsx | 2 +- .../LegacyValueMappingsEditor.test.tsx.snap | 2 +- .../components/ValuePicker/ValuePicker.tsx | 2 +- packages/grafana-ui/src/types/icon.ts | 42 +++- pkg/api/index.go | 2 +- public/app/core/angular_wrappers.ts | 8 + .../DynamicImports/ErrorLoadingChunk.tsx | 2 +- .../components/EmptyListCTA/EmptyListCTA.tsx | 6 +- .../core/components/PageHeader/PageHeader.tsx | 16 +- .../DisabledPermissionListItem.tsx | 6 +- .../PermissionList/PermissionListItem.tsx | 10 +- .../core/components/TagFilter/TagFilter.tsx | 4 +- public/app/core/components/info_popover.ts | 2 +- .../manage_dashboards/manage_dashboards.html | 68 +++--- public/app/core/components/search/search.html | 33 +-- .../components/search/search_results.html | 47 +++-- public/app/core/controllers/invited_ctrl.ts | 2 +- .../core/controllers/reset_password_ctrl.ts | 2 +- public/app/core/controllers/signup_ctrl.ts | 2 +- .../app/features/admin/UserListAdminPage.tsx | 4 +- public/app/features/admin/UserPermissions.tsx | 4 +- .../__snapshots__/ServerStats.test.tsx.snap | 11 +- .../admin/ldap/LdapUserPermissions.tsx | 3 +- public/app/features/alerting/AlertTab.tsx | 8 +- .../alerting/partials/notifications_list.html | 20 +- public/app/features/api-keys/ApiKeysPage.tsx | 2 +- .../__snapshots__/ApiKeysPage.test.tsx.snap | 2 +- .../dashboard/components/DashNav/DashNav.tsx | 6 +- .../DashboardPermissions.tsx | 6 +- .../PanelEditor/PanelEditorTabs.tsx | 4 +- .../components/ShareModal/ShareEmbed.tsx | 6 +- .../components/ShareModal/ShareExport.tsx | 6 +- .../components/ShareModal/ShareLink.tsx | 6 +- .../components/ShareModal/ShareSnapshot.tsx | 12 +- .../PanelHeader/PanelHeaderMenuItem.tsx | 2 +- .../datasources/DataSourcesListPage.tsx | 3 +- .../datasources/NewDataSourcePage.tsx | 2 +- .../explore/NoDataSourceCallToAction.tsx | 2 +- .../explore/RichHistory/RichHistory.tsx | 4 +- .../RichHistory/RichHistorySettings.tsx | 2 +- .../features/folders/FolderPermissions.tsx | 6 +- .../folders/services/FolderPageLoader.ts | 8 +- public/app/features/folders/state/navModel.ts | 8 +- .../partials/snapshot_list.html | 15 +- public/app/features/org/SelectOrgCtrl.ts | 2 +- .../features/playlist/partials/playlist.html | 198 ++++++++++-------- .../playlist/partials/playlist_search.html | 55 +++-- .../features/playlist/partials/playlists.html | 2 +- public/app/features/profile/SignupPage.tsx | 2 +- .../features/profile/UserProfileEditForm.tsx | 6 +- .../search/components/SearchField.tsx | 4 +- .../features/search/components/SearchItem.tsx | 7 +- .../search/components/SearchResults.tsx | 6 +- .../search/components/SearchResultsFilter.tsx | 4 +- public/app/features/teams/TeamGroupSync.tsx | 8 +- public/app/features/teams/TeamList.tsx | 2 +- .../__snapshots__/TeamGroupSync.test.tsx.snap | 24 +-- public/app/features/users/SignupInvited.tsx | 2 +- .../variables/editor/VariableEditorList.tsx | 2 +- .../variables/pickers/shared/VariableLink.tsx | 8 +- .../pickers/shared/VariableOptions.tsx | 6 +- public/app/partials/valueSelectDropdown.html | 6 +- .../elasticsearch/configuration/DataLink.tsx | 2 +- .../elasticsearch/configuration/DataLinks.tsx | 2 +- .../loki/configuration/DerivedField.tsx | 2 +- .../loki/configuration/DerivedFields.tsx | 2 +- public/app/plugins/panel/dashlist/module.html | 2 +- public/sass/base/_icons.scss | 2 +- public/sass/components/_buttons.scss | 3 + public/sass/components/_gf-form.scss | 2 +- public/sass/components/_modals.scss | 11 +- public/sass/components/_search.scss | 3 + public/sass/layout/_page.scss | 3 +- 103 files changed, 667 insertions(+), 407 deletions(-) create mode 100644 packages/grafana-ui/src/components/Icon/assets/Bell.tsx create mode 100644 packages/grafana-ui/src/components/Icon/assets/Folder.tsx create mode 100644 packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx create mode 100644 packages/grafana-ui/src/components/Icon/assets/Grafana.tsx create mode 100644 packages/grafana-ui/src/components/Icon/assets/Import.tsx create mode 100644 packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx index 8c975817288..91f4bc70ccf 100644 --- a/packages/grafana-ui/src/components/Button/Button.tsx +++ b/packages/grafana-ui/src/components/Button/Button.tsx @@ -2,6 +2,7 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, useContext } from 'r import { css, cx } from 'emotion'; import tinycolor from 'tinycolor2'; import { selectThemeVariant, stylesFactory, ThemeContext } from '../../themes'; +import { IconName } from '../../types'; import { getFocusStyle, getPropertiesForButtonSize } from '../Forms/commonStyles'; import { GrafanaTheme } from '@grafana/data'; import { ButtonContent } from './ButtonContent'; @@ -134,7 +135,7 @@ export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link'; type CommonProps = { size?: ComponentSize; variant?: ButtonVariant; - icon?: string; + icon?: IconName; className?: string; }; @@ -151,7 +152,9 @@ export const Button = React.forwardRef( return ( ); } @@ -171,7 +174,9 @@ export const LinkButton = React.forwardRef( return ( - {children} + + {children} + ); } diff --git a/packages/grafana-ui/src/components/Button/ButtonContent.tsx b/packages/grafana-ui/src/components/Button/ButtonContent.tsx index 19c540aa66d..c01de9853f3 100644 --- a/packages/grafana-ui/src/components/Button/ButtonContent.tsx +++ b/packages/grafana-ui/src/components/Button/ButtonContent.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { css } from 'emotion'; import { stylesFactory, useTheme } from '../../themes'; +import { IconName } from '../../types'; +import { Icon } from '../Icon/Icon'; import { ComponentSize } from '../../types/size'; import { GrafanaTheme } from '@grafana/data'; @@ -14,8 +16,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ `, icon: css` - position: relative; - top: 1px; & + * { margin-left: ${theme.spacing.sm}; } @@ -23,28 +23,24 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({ })); type Props = { - icon?: string; + icon?: IconName; className?: string; children: React.ReactNode; size?: ComponentSize; }; export function ButtonContent(props: Props) { - const { icon, children } = props; + const { icon, children, size } = props; const theme = useTheme(); const styles = getStyles(theme); if (!children) { - return ( - - - - ); + return {icon && }; } const iconElement = icon && ( - + ); diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx index 45aeb6d5519..e2672caac6c 100644 --- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx +++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.story.tsx @@ -12,7 +12,7 @@ CallToActionCardStories.add('default', () => { const ctaElements: { [key: string]: JSX.Element } = { custom:

This is just H1 tag, you can any component as CTA element

, button: ( - ), diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx index 5bb392d6798..920f6103486 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx @@ -65,7 +65,7 @@ storiesOf('General/ConfirmButton', module) action('Saved')('save!'); }} > - diff --git a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx index 91875d7ea4a..e464afe98c2 100644 --- a/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx +++ b/packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx @@ -18,7 +18,7 @@ export const DeleteButton: FC = ({ size, disabled, onConfirm }) => { disabled={disabled} onConfirm={onConfirm} > - )} diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx index fd3c937b187..d595eda6086 100644 --- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx +++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx @@ -100,7 +100,7 @@ export const DataLinksInlineEditor: React.FC = ({ li )} - diff --git a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx index b4fc429727f..17cab6b33b1 100644 --- a/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx +++ b/packages/grafana-ui/src/components/FormLabel/FormLabel.tsx @@ -1,6 +1,7 @@ import React, { FunctionComponent, ReactNode } from 'react'; import classNames from 'classnames'; import { Tooltip, PopoverContent } from '../Tooltip/Tooltip'; +import { Icon } from '../Icon/Icon'; interface Props { children: ReactNode; @@ -33,7 +34,7 @@ export const FormLabel: FunctionComponent = ({ {tooltip && (
- +
)} diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss index 671d80841a8..07ebc4a71e6 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss +++ b/packages/grafana-ui/src/components/Forms/Legacy/Select/_Select.scss @@ -135,26 +135,12 @@ $select-input-bg-disabled: $input-bg-disabled; position: absolute; height: 100%; right: 8px; + top: 1px; + margin-top: -1px; display: inline-block; text-align: right; } -.gf-form-select-box__select-arrow { - border-color: $input-color-select-arrow transparent transparent; - border-style: solid; - border-width: 4px 4px 2.5px; - display: inline-block; - position: absolute; - top: 50%; - right: 2px; - margin-top: -2px; - - &.gf-form-select-box__select-arrow--reversed { - border-color: transparent transparent $input-color-select-arrow; - border-width: 0 4px 4px; - } -} - .gf-form-input--form-dropdown { padding: 0; border: 0; diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx index cbd0577e5e2..bcba07515fc 100644 --- a/packages/grafana-ui/src/components/Icon/Icon.tsx +++ b/packages/grafana-ui/src/components/Icon/Icon.tsx @@ -43,6 +43,13 @@ export const Icon = React.forwardRef( const theme = useTheme(); const styles = getIconStyles(theme, type); const svgSize = getSvgSize(size, theme); + + /* Temporary solution to display also font awesome icons */ + const isFontAwesome = name?.includes('fa-'); + if (isFontAwesome) { + return ; + } + const iconName = type === 'default' ? `Uil${toPascalCase(name)}` : toPascalCase(name); /* Unicons don't have type definitions */ diff --git a/packages/grafana-ui/src/components/Icon/assets/Bell.tsx b/packages/grafana-ui/src/components/Icon/assets/Bell.tsx new file mode 100644 index 00000000000..73a984432a7 --- /dev/null +++ b/packages/grafana-ui/src/components/Icon/assets/Bell.tsx @@ -0,0 +1,21 @@ +import React, { FunctionComponent } from 'react'; +import { SvgProps } from '../Icon'; + +export const Bell: FunctionComponent = ({ size, ...rest }) => { + return ( + + + + + ); +}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx b/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx index 914bb29c763..2cc995fecf4 100644 --- a/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx +++ b/packages/grafana-ui/src/components/Icon/assets/Favorite.tsx @@ -1,7 +1,7 @@ import React, { FunctionComponent } from 'react'; import { SvgProps } from '../Icon'; -export const Favorite: FunctionComponent = ({ size, color, secondaryColor, ...rest }) => { +export const Favorite: FunctionComponent = ({ size, ...rest }) => { return ( diff --git a/packages/grafana-ui/src/components/Icon/assets/Folder.tsx b/packages/grafana-ui/src/components/Icon/assets/Folder.tsx new file mode 100644 index 00000000000..994d194da28 --- /dev/null +++ b/packages/grafana-ui/src/components/Icon/assets/Folder.tsx @@ -0,0 +1,10 @@ +import React, { FunctionComponent } from 'react'; +import { SvgProps } from '../Icon'; + +export const Folder: FunctionComponent = ({ size, ...rest }) => { + return ( + + + + ); +}; diff --git a/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx b/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx new file mode 100644 index 00000000000..90300d0d0b6 --- /dev/null +++ b/packages/grafana-ui/src/components/Icon/assets/FolderPlus.tsx @@ -0,0 +1,21 @@ +import React, { FunctionComponent } from 'react'; +import { SvgProps } from '../Icon'; + +export const FolderPlus: FunctionComponent = ({ size, ...rest }) => { + return ( + + + + + ); +}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx b/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx new file mode 100644 index 00000000000..fa5c627c9dc --- /dev/null +++ b/packages/grafana-ui/src/components/Icon/assets/Grafana.tsx @@ -0,0 +1,70 @@ +import React, { FunctionComponent } from 'react'; +import { SvgProps } from '../Icon'; + +export const Grafana: FunctionComponent = ({ size, ...rest }) => { + return ( + + + + + + + + + + ); +}; diff --git a/packages/grafana-ui/src/components/Icon/assets/Import.tsx b/packages/grafana-ui/src/components/Icon/assets/Import.tsx new file mode 100644 index 00000000000..04124ff80f1 --- /dev/null +++ b/packages/grafana-ui/src/components/Icon/assets/Import.tsx @@ -0,0 +1,23 @@ +import React, { FunctionComponent } from 'react'; +import { SvgProps } from '../Icon'; + +export const Import: FunctionComponent = ({ size, ...rest }) => { + return ( + + + + + + + ); +}; diff --git a/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx b/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx new file mode 100644 index 00000000000..ef7ed02758a --- /dev/null +++ b/packages/grafana-ui/src/components/Icon/assets/PlusSquare.tsx @@ -0,0 +1,21 @@ +import React, { FunctionComponent } from 'react'; +import { SvgProps } from '../Icon'; + +export const PlusSquare: FunctionComponent = ({ size, ...rest }) => { + return ( + + + + + ); +}; diff --git a/packages/grafana-ui/src/components/Icon/assets/index.ts b/packages/grafana-ui/src/components/Icon/assets/index.ts index f25c61a5285..0d28cbb8c01 100644 --- a/packages/grafana-ui/src/components/Icon/assets/index.ts +++ b/packages/grafana-ui/src/components/Icon/assets/index.ts @@ -2,3 +2,9 @@ export * from './Apps'; export * from './Cog'; export * from './Shield'; export * from './Favorite'; +export * from './Grafana'; +export * from './Bell'; +export * from './PlusSquare'; +export * from './FolderPlus'; +export * from './Folder'; +export * from './Import'; diff --git a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx index 189aa36d86c..a9cb129e9fc 100644 --- a/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx +++ b/packages/grafana-ui/src/components/InfoTooltip/InfoTooltip.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { Tooltip, TooltipProps, PopoverContent } from '../Tooltip/Tooltip'; +import { Icon } from '../Icon/Icon'; interface InfoTooltipProps extends Omit { children: PopoverContent; @@ -8,7 +9,7 @@ interface InfoTooltipProps extends Omit { export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => { return ( - + ); }; diff --git a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx index 792a48e5ac6..e90f1415650 100644 --- a/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx +++ b/packages/grafana-ui/src/components/Logs/LogDetailsRow.tsx @@ -129,7 +129,7 @@ class UnThemedLogDetailsRow extends PureComponent { = ({ icon, title, children }) => { return ( <>

- {icon && } + {icon && } {title}

{children} diff --git a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx index dafadfe4062..6f7a9074426 100644 --- a/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx +++ b/packages/grafana-ui/src/components/Modal/ModalTabContent.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cx } from 'emotion'; import { IconName } from '../../types'; import { Icon } from '../Icon/Icon'; @@ -8,19 +9,10 @@ interface Props { } export const ModalTabContent: React.FC = ({ icon, iconClass, children }) => { - let iconElem; - const showIcon = icon || iconClass; - if (iconClass) { - iconElem = ; - } - if (icon) { - iconElem = ; - } - return (
- {showIcon &&
{iconElem}
} + {icon && }
{children}
diff --git a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx index fb164cdb116..9f606da3ef4 100644 --- a/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx +++ b/packages/grafana-ui/src/components/Modal/ModalTabsHeader.tsx @@ -7,7 +7,7 @@ import { ModalHeader } from './ModalHeader'; interface ModalTab { value: string; label: string; - icon?: string; + icon?: IconName; } interface Props { diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index 2573eb9238b..6dc7a3ecee4 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -1,6 +1,7 @@ import React, { PureComponent } from 'react'; import uniqueId from 'lodash/uniqueId'; import { Tooltip } from '../Tooltip/Tooltip'; +import { Icon } from '../Icon/Icon'; import * as PopperJS from 'popper.js'; export interface Props { @@ -54,7 +55,7 @@ export class Switch extends PureComponent { {tooltip && (
- +
)} diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx index 888e802238f..4cbf59a0b26 100644 --- a/packages/grafana-ui/src/components/Tabs/Tab.tsx +++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx @@ -1,12 +1,14 @@ import React, { FC } from 'react'; import { css, cx } from 'emotion'; import { GrafanaTheme } from '@grafana/data'; +import { Icon } from '../Icon/Icon'; +import { IconName } from '../../types'; import { stylesFactory, useTheme } from '../../themes'; export interface TabProps { label: string; active?: boolean; - icon?: string; + icon?: IconName; onChangeTab: () => void; } @@ -26,15 +28,10 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => { color: ${colors.text}; cursor: pointer; - i { + svg { margin-right: ${theme.spacing.sm}; } - .gicon { - position: relative; - top: -2px; - } - &:hover, &:focus { color: ${colors.linkHover}; @@ -67,7 +64,7 @@ export const Tab: FC = ({ label, active, icon, onChangeTab }) => { return (
  • - {icon && } + {icon && } {label}
    • ); diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx index b4f961ca001..cfdd755ac57 100644 --- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx +++ b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx @@ -200,7 +200,7 @@ export class ThresholdsEditor extends PureComponent { return (
    - diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx index d78285e8413..d77802e96f1 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimePickerCalendar.tsx @@ -82,7 +82,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaTheme) => { return { title: css` - color: ${theme.colors.text} + color: ${theme.colors.text}; background-color: ${colors.background}; font-size: ${theme.typography.size.md}; border: 1px solid transparent; diff --git a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx index b15b83544c9..de37fa43e2f 100644 --- a/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx +++ b/packages/grafana-ui/src/components/TimePicker/TimePickerContent/TimeRangeForm.tsx @@ -62,7 +62,7 @@ export const TimeRangeForm: React.FC = props => { [timeZone] ); - const icon = isFullscreen ? null : diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx index 07a73687858..71d77b52e00 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/LegacyValueMappingsEditor.tsx @@ -98,7 +98,7 @@ export class LegacyValueMappingsEditor extends PureComponent { removeValueMapping={() => this.onRemoveMapping(valueMapping.id)} /> ))} -
    diff --git a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx index 37ded12deca..a29aa5815db 100644 --- a/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx +++ b/packages/grafana-ui/src/components/ValueMappingsEditor/ValueMappingsEditor.tsx @@ -68,7 +68,7 @@ export const ValueMappingsEditor: React.FC = ({ valueMappings, onChange, diff --git a/packages/grafana-ui/src/types/icon.ts b/packages/grafana-ui/src/types/icon.ts index a5660a8da2b..49ec6808e19 100644 --- a/packages/grafana-ui/src/types/icon.ts +++ b/packages/grafana-ui/src/types/icon.ts @@ -1,6 +1,8 @@ export type IconType = 'mono' | 'default'; export type IconName = + | 'fa fa-fw fa-unlock' + | 'fa fa-envelope' | 'question-circle' | 'plus' | 'angle-up' @@ -11,12 +13,19 @@ export type IconName = | 'plane' | 'power' | 'trash-alt' + | 'plus-square' + | 'folder-plus' + | 'folder-open' + | 'file-copy-alt' + | 'exchange-alt' + | 'import' | 'exclamation-triangle' | 'times' + | 'cloud-upload' | 'step-backward' | 'square-shape' - | 'filter' | 'share-alt' + | 'tag-alt' | 'forward' | 'check' | 'add-panel' @@ -24,6 +33,8 @@ export type IconName = | 'lock' | 'panel-add' | 'arrow-random' + | 'arrow-down' + | 'arrow-up' | 'arrow-from-right' | 'keyboard' | 'search' @@ -40,11 +51,15 @@ export type IconName = | 'link' | 'upload' | 'home-alt' + | 'channel-add' + | 'calendar-alt' + | 'calculator-alt' | 'compass' | 'sliders-v-alt' | 'bell' | 'database' | 'user' + | 'camera' | 'plug' | 'shield' | 'key-skeleton-alt' @@ -58,22 +73,34 @@ export type IconName = | 'bug' | 'cube' | 'star' + | 'list-ul' | 'edit' | 'shield' | 'eye' + | 'filter' | 'monitor' + | 'plus-circle' + | 'arrow-left' + | 'repeat' + | 'external-link-alt' | 'favorite'; export const getAvailableIcons = (): IconName[] => [ 'question-circle', 'plane', 'plus', + 'plus-circle', 'angle-up', 'shield', 'angle-down', 'angle-left', 'angle-right', + 'calendar-alt', + 'tag-alt', + 'calculator-alt', 'pen', + 'repeat', + 'external-link-alt', 'power', 'trash-alt', 'exclamation-triangle', @@ -81,6 +108,7 @@ export const getAvailableIcons = (): IconName[] => [ 'step-backward', 'square-shape', 'share-alt', + 'camera', 'forward', 'check', 'add-panel', @@ -89,6 +117,7 @@ export const getAvailableIcons = (): IconName[] => [ 'panel-add', 'arrow-random', 'arrow-from-right', + 'arrow-left', 'keyboard', 'search', 'chart-line', @@ -116,7 +145,9 @@ export const getAvailableIcons = (): IconName[] => [ 'graph-bar', 'book', 'bolt', + 'cloud-upload', 'comments-alt', + 'list-ul', 'document-info', 'info-circle', 'bug', @@ -124,6 +155,15 @@ export const getAvailableIcons = (): IconName[] => [ 'star', 'edit', 'eye', + 'channel-add', 'monitor', 'favorite', + 'folder-plus', + 'plus-square', + 'import', + 'folder-open', + 'file-copy-alt', + 'arrow-down', + 'arrow-up', + 'exchange-alt', ]; diff --git a/pkg/api/index.go b/pkg/api/index.go index cf8efbcfc92..31d0def407f 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -116,7 +116,7 @@ func (hs *HTTPServer) setIndexViewData(c *models.ReqContext) (*dtos.IndexViewDat children = append(children, &dtos.NavLink{Text: "Folder", SubTitle: "Create a new folder to organize your dashboards", Id: "folder", Icon: "folder-plus", Url: setting.AppSubUrl + "/dashboards/folder/new"}) } - children = append(children, &dtos.NavLink{Text: "Import", SubTitle: "Import dashboard from file or Grafana.com", Id: "import", Icon: "upload", Url: setting.AppSubUrl + "/dashboard/import"}) + children = append(children, &dtos.NavLink{Text: "Import", SubTitle: "Import dashboard from file or Grafana.com", Id: "import", Icon: "import", Url: setting.AppSubUrl + "/dashboard/import"}) data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Create", diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 4d0fc23c142..60ccc0cd94d 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -16,6 +16,7 @@ import { SecretFormField, SeriesColorPickerPopoverWithTheme, UnitPicker, + Icon, } from '@grafana/ui'; import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor'; import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper'; @@ -32,6 +33,13 @@ import { SearchField, SearchResults, SearchResultsFilter } from '../features/sea export function registerAngularDirectives() { react2AngularDirective('footer', Footer, []); + react2AngularDirective('icon', Icon, [ + 'color', + 'name', + 'size', + 'type', + ['onClick', { watchDepth: 'reference', wrapApply: true }], + ]); react2AngularDirective('helpModal', HelpModal, []); react2AngularDirective('sidemenu', SideMenu, []); react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']); diff --git a/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx b/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx index 73bdf1bb0c1..396c6dfc8c1 100644 --- a/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx +++ b/public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx @@ -20,7 +20,7 @@ export const ErrorLoadingChunk: FunctionComponent = ({ error }) => (

    Grafana has likely been updated. Please try reloading the page.


    -
    diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx index 2239ac740fc..3f745909443 100644 --- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx +++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx @@ -1,10 +1,10 @@ import React, { MouseEvent, useContext } from 'react'; -import { CallToActionCard, LinkButton, ThemeContext } from '@grafana/ui'; +import { CallToActionCard, LinkButton, ThemeContext, Icon, IconName } from '@grafana/ui'; import { css } from 'emotion'; export interface Props { title: string; - buttonIcon: string; + buttonIcon: IconName; buttonLink?: string; buttonTitle: string; onClick?: (event: MouseEvent) => void; @@ -45,7 +45,7 @@ const EmptyListCTA: React.FunctionComponent = ({ <> {proTip ? ( - + <> ProTip: {proTip} {proTipLinkTitle} diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx index aaf91ecb74e..f5f75fb9c2d 100644 --- a/public/app/core/components/PageHeader/PageHeader.tsx +++ b/public/app/core/components/PageHeader/PageHeader.tsx @@ -1,5 +1,6 @@ import React, { FormEvent } from 'react'; -import { Tab, TabsBar } from '@grafana/ui'; +import { css } from 'emotion'; +import { Tab, TabsBar, Icon, IconName } from '@grafana/ui'; import appEvents from 'app/core/app_events'; import { NavModel, NavModelItem, NavModelBreadcrumb } from '@grafana/data'; import { CoreEvents } from 'app/types'; @@ -65,7 +66,7 @@ const Navigation = ({ main }: { main: NavModelItem }) => { label={child.text} active={child.active} key={`${child.url}-${index}`} - icon={child.icon} + icon={child.icon as IconName} onChangeTab={() => goToUrl(index)} /> ) @@ -113,10 +114,19 @@ export default class PageHeader extends React.Component { } renderHeaderTitle(main: NavModelItem) { + const iconClassName = + main.icon === 'grafana' + ? css` + margin-top: 12px; + ` + : css` + margin-top: 14px; + `; + return (
    - {main.icon && } + {main.icon && } {main.img && } diff --git a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx index 2bb61bf60b1..8f28aee38e1 100644 --- a/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx +++ b/public/app/core/components/PermissionList/DisabledPermissionListItem.tsx @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { LegacyForms } from '@grafana/ui'; +import { LegacyForms, Icon } from '@grafana/ui'; import { dashboardPermissionLevels } from 'app/types/acl'; const { Select } = LegacyForms; @@ -15,7 +15,7 @@ export default class DisabledPermissionListItem extends Component { return ( - + {item.name} @@ -36,7 +36,7 @@ export default class DisabledPermissionListItem extends Component { diff --git a/public/app/core/components/PermissionList/PermissionListItem.tsx b/public/app/core/components/PermissionList/PermissionListItem.tsx index 0579a2667a2..b3f11097aad 100644 --- a/public/app/core/components/PermissionList/PermissionListItem.tsx +++ b/public/app/core/components/PermissionList/PermissionListItem.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { LegacyForms } from '@grafana/ui'; +import { LegacyForms, Icon } from '@grafana/ui'; import { SelectableValue } from '@grafana/data'; import { dashboardPermissionLevels, DashboardAcl, PermissionLevel } from 'app/types/acl'; import { FolderInfo } from 'app/types'; @@ -17,10 +17,10 @@ function ItemAvatar({ item }: { item: DashboardAcl }) { return ; } if (item.role === 'Editor') { - return ; + return ; } - return ; + return ; } function ItemDescription({ item }: { item: DashboardAcl }) { @@ -89,11 +89,11 @@ export default class PermissionsListItem extends PureComponent { {!item.inherited ? ( - + ) : ( )} diff --git a/public/app/core/components/TagFilter/TagFilter.tsx b/public/app/core/components/TagFilter/TagFilter.tsx index 263ba38ea87..0db6c7c0126 100644 --- a/public/app/core/components/TagFilter/TagFilter.tsx +++ b/public/app/core/components/TagFilter/TagFilter.tsx @@ -8,7 +8,7 @@ import { escapeStringForRegex } from '@grafana/data'; // Components import { TagOption } from './TagOption'; import { TagBadge } from './TagBadge'; -import { resetSelectStyles, LegacyForms } from '@grafana/ui'; +import { resetSelectStyles, LegacyForms, Icon } from '@grafana/ui'; const { IndicatorsContainer, NoOptionsMessage } = LegacyForms; export interface TermCount { @@ -90,7 +90,7 @@ export class TagFilter extends React.Component {
    - +
    ); } diff --git a/public/app/core/components/info_popover.ts b/public/app/core/components/info_popover.ts index 70451465930..72fad71131f 100644 --- a/public/app/core/components/info_popover.ts +++ b/public/app/core/components/info_popover.ts @@ -6,7 +6,7 @@ import Drop from 'tether-drop'; export function infoPopover() { return { restrict: 'E', - template: '', + template: ``, transclude: true, link: (scope: any, elem: any, attrs: any, ctrl: any, transclude: any) => { const offset = attrs.offset || '0 -10px'; diff --git a/public/app/core/components/manage_dashboards/manage_dashboards.html b/public/app/core/components/manage_dashboards/manage_dashboards.html index dd4f11246fa..4356b16fd6b 100644 --- a/public/app/core/components/manage_dashboards/manage_dashboards.html +++ b/public/app/core/components/manage_dashboards/manage_dashboards.html @@ -1,17 +1,38 @@
    -
    +
    - + New Dashboard New Folder - + Import
    @@ -25,22 +46,20 @@
    -  {{tagName}} +  {{tagName}}
    @@ -53,25 +72,25 @@
    -
    +
    - No dashboards found. + No dashboards found.
    -
    - - -
    +
    @@ -29,32 +26,38 @@
    - + Filter by: - Clear + Clear
    - - +
    - New dashboard + New dashboard - New folder + New folder - - Import dashboard + + Import dashboard - - Find dashboards on Grafana.com + + Find dashboards on Grafana.com
    - diff --git a/public/app/core/components/search/search_results.html b/public/app/core/components/search/search_results.html index b3e17e18c5c..6b40087e355 100644 --- a/public/app/core/components/search/search_results.html +++ b/public/app/core/components/search/search_results.html @@ -1,32 +1,45 @@
    -
    +
    + ng-show="ctrl.editable" + on-change="ctrl.selectionChanged($event)" + checked="section.checked" + switch-class="gf-form-checkbox--transparent" + >
    {{::section.title}} - + - - + +
    - diff --git a/public/app/core/controllers/invited_ctrl.ts b/public/app/core/controllers/invited_ctrl.ts index f50d6b0f1bd..e99a1666069 100644 --- a/public/app/core/controllers/invited_ctrl.ts +++ b/public/app/core/controllers/invited_ctrl.ts @@ -11,7 +11,7 @@ export class InvitedCtrl { $scope.navModel = { main: { - icon: 'gicon gicon-branding', + icon: 'grafana', text: 'Invite', subTitle: 'Register your Grafana account', breadcrumbs: [{ title: 'Login', url: 'login' }], diff --git a/public/app/core/controllers/reset_password_ctrl.ts b/public/app/core/controllers/reset_password_ctrl.ts index ff132a54764..76ae67d14be 100644 --- a/public/app/core/controllers/reset_password_ctrl.ts +++ b/public/app/core/controllers/reset_password_ctrl.ts @@ -21,7 +21,7 @@ export class ResetPasswordCtrl { $scope.navModel = { main: { - icon: 'gicon gicon-branding', + icon: 'grafana', text: 'Reset Password', subTitle: 'Reset your Grafana password', breadcrumbs: [{ title: 'Login', url: 'login' }], diff --git a/public/app/core/controllers/signup_ctrl.ts b/public/app/core/controllers/signup_ctrl.ts index d3cb01d58fd..056f5d21593 100644 --- a/public/app/core/controllers/signup_ctrl.ts +++ b/public/app/core/controllers/signup_ctrl.ts @@ -29,7 +29,7 @@ export class SignUpCtrl { $scope.navModel = { main: { - icon: 'gicon gicon-branding', + icon: 'grafana', text: 'Sign Up', subTitle: 'Register your Grafana account', breadcrumbs: [{ title: 'Login', url: 'login' }], diff --git a/public/app/features/admin/UserListAdminPage.tsx b/public/app/features/admin/UserListAdminPage.tsx index 7cbecef7bdd..ec1bfc18b1f 100644 --- a/public/app/features/admin/UserListAdminPage.tsx +++ b/public/app/features/admin/UserListAdminPage.tsx @@ -3,7 +3,7 @@ import { css, cx } from 'emotion'; import { hot } from 'react-hot-loader'; import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'; import { NavModel } from '@grafana/data'; -import { Pagination, Tooltip, HorizontalGroup, stylesFactory, LinkButton, Input } from '@grafana/ui'; +import { Pagination, Tooltip, HorizontalGroup, stylesFactory, LinkButton, Input, Icon } from '@grafana/ui'; import { StoreState, UserDTO } from '../../types'; import Page from 'app/core/components/Page/Page'; import { getNavModel } from '../../core/selectors/navModel'; @@ -51,7 +51,7 @@ const UserListAdminPageUnConnected: React.FC = props => { value={props.query} spellCheck={false} onChange={event => props.changeQuery(event.currentTarget.value)} - prefix={} + prefix={} /> New user diff --git a/public/app/features/admin/UserPermissions.tsx b/public/app/features/admin/UserPermissions.tsx index 24f39fc2e26..52a4f6674b8 100644 --- a/public/app/features/admin/UserPermissions.tsx +++ b/public/app/features/admin/UserPermissions.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { ConfirmButton, RadioButtonGroup } from '@grafana/ui'; +import { ConfirmButton, RadioButtonGroup, Icon } from '@grafana/ui'; import { cx } from 'emotion'; interface Props { @@ -73,7 +73,7 @@ export class UserPermissions extends PureComponent { {isGrafanaAdmin ? ( <> - Yes + Yes ) : ( <>No diff --git a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap index 593ac1483f6..efbd8262933 100644 --- a/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap +++ b/public/app/features/admin/__snapshots__/ServerStats.test.tsx.snap @@ -52,11 +52,7 @@ exports[`ServerStats Should render table with stats 1`] = ` > - - + />
    @@ -100,12 +96,9 @@ exports[`ServerStats Should render table with stats 1`] = ` className="css-payll4" >
  • - Admin
    • diff --git a/public/app/features/admin/ldap/LdapUserPermissions.tsx b/public/app/features/admin/ldap/LdapUserPermissions.tsx index 180c4015912..0c26c76a5fe 100644 --- a/public/app/features/admin/ldap/LdapUserPermissions.tsx +++ b/public/app/features/admin/ldap/LdapUserPermissions.tsx @@ -1,5 +1,6 @@ import React, { FC } from 'react'; import { LdapPermissions } from 'app/types'; +import { Icon } from '@grafana/ui'; interface Props { permissions: LdapPermissions; @@ -21,7 +22,7 @@ export const LdapUserPermissions: FC = ({ permissions }) => { {permissions.isGrafanaAdmin ? ( <> - Yes + Yes ) : ( 'No' diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx index 845a08f9c8f..b0d00a0f2b1 100644 --- a/public/app/features/alerting/AlertTab.tsx +++ b/public/app/features/alerting/AlertTab.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { connect, MapStateToProps, MapDispatchToProps } from 'react-redux'; import { css } from 'emotion'; -import { Alert, Button } from '@grafana/ui'; +import { Alert, Button, IconName } from '@grafana/ui'; import { AngularComponent, getAngularLoader, getDataSourceSrv } from '@grafana/runtime'; import appEvents from 'app/core/app_events'; @@ -130,7 +130,7 @@ class UnConnectedAlertTab extends PureComponent { title: 'Delete Alert', text: 'Are you sure you want to delete this alert rule?', text2: 'You need to save dashboard for the delete to take effect', - icon: 'fa-trash', + icon: 'trash-alt', yesText: 'Delete', onConfirm: () => { delete panel.alert; @@ -178,7 +178,7 @@ class UnConnectedAlertTab extends PureComponent {

    {validatonMessage}


    -
    @@ -199,7 +199,7 @@ class UnConnectedAlertTab extends PureComponent { const model = { title: 'Panel has no alert rule defined', - buttonIcon: 'gicon gicon-alert', + buttonIcon: 'bell' as IconName, onClick: this.onAddAlert, buttonTitle: 'Create Alert', }; diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index b2ac364c991..b2ca1b36779 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -1,11 +1,9 @@
    - diff --git a/public/app/features/api-keys/ApiKeysPage.tsx b/public/app/features/api-keys/ApiKeysPage.tsx index 7fd6fbd417f..e28ddabda3e 100644 --- a/public/app/features/api-keys/ApiKeysPage.tsx +++ b/public/app/features/api-keys/ApiKeysPage.tsx @@ -151,7 +151,7 @@ export class ApiKeysPage extends PureComponent { {!isAdding && ( { /* Hard-coded value so we don't have to wrap whole component in withTheme because of 1 variable */ const iconClassName = css` margin-right: 8px; + margin-bottom: -1px; + `; + const mainIconClassName = css` + margin-right: 8px; `; const folderTitle = dashboard.meta.folderTitle; @@ -108,7 +112,7 @@ class DashNav extends PureComponent { <>
    - {!isFullscreen && } + {!isFullscreen && } {haveFolder && ( <> diff --git a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx index e8af1e52dff..427a5ef2f8a 100644 --- a/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx +++ b/public/app/features/dashboard/components/DashboardPermissions/DashboardPermissions.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { Tooltip } from '@grafana/ui'; +import { Tooltip, Icon } from '@grafana/ui'; import { SlideDown } from 'app/core/components/Animations/SlideDown'; import { StoreState, FolderInfo } from 'app/types'; import { DashboardAcl, PermissionLevel, NewDashboardAclItem } from 'app/types/acl'; @@ -71,9 +71,7 @@ export class DashboardPermissions extends PureComponent {

    Permissions

    }> -
    - -
    +
    - - - - - - Playlist is empty, add dashboards below. - - -
    +
    +

    Add dashboards

    + -
    -

    Add dashboards

    - +
    + + + + + +
    + +   {{playlistItem.title}} + + + +
    +
    +
    + + + + + +
    + + + {{tag.term}}  ({{tag.count}}) + + + +
    +
    +
    -
    - - - - - -
    - -   {{playlistItem.title}} - - - -
    -
    -
    - - - - - -
    - - - {{tag.term}}  ({{tag.count}}) - - - -
    -
    -
    +
    -
    - -
    - Create - Save - Cancel -
    +
    + Create + Save + Cancel +
    diff --git a/public/app/features/playlist/partials/playlist_search.html b/public/app/features/playlist/partials/playlist_search.html index ae4fea46e80..3a97c8f7931 100644 --- a/public/app/features/playlist/partials/playlist_search.html +++ b/public/app/features/playlist/partials/playlist_search.html @@ -1,26 +1,35 @@
    - -
    - - - - starred - | - - - tags - - - | - - - - {{tagName}} - - - -
    -     + +
    + + + + starred + + | + + + tags + + + | + + + + {{tagName}} + + + +
    +
    diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html index 346e76e02fd..c3e2c7a6307 100644 --- a/public/app/features/playlist/partials/playlists.html +++ b/public/app/features/playlist/partials/playlists.html @@ -55,7 +55,7 @@
    { /> {disableLoginForm && ( - + )}
    @@ -88,7 +88,7 @@ export class UserProfileEditForm extends PureComponent { /> {disableLoginForm && ( - + )}
    diff --git a/public/app/features/search/components/SearchField.tsx b/public/app/features/search/components/SearchField.tsx index 46f8575468c..6d57b730be8 100644 --- a/public/app/features/search/components/SearchField.tsx +++ b/public/app/features/search/components/SearchField.tsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import { css, cx } from 'emotion'; // @ts-ignore import tinycolor from 'tinycolor2'; -import { ThemeContext } from '@grafana/ui'; +import { ThemeContext, Icon } from '@grafana/ui'; import { GrafanaTheme } from '@grafana/data'; import { SearchQuery } from 'app/core/components/search/search'; @@ -56,7 +56,7 @@ export const SearchField: React.FunctionComponent = ({ query, {/* based on it GrafanaCtrl (L256) decides whether or not hide search */}
    - +
    = ({ item, editable, onToggleSelection, onTag > - + ) : (
    @@ -139,7 +139,6 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa { selected } ), icon: css` - padding: 5px 0; width: 43px; `, text: css` @@ -152,8 +151,5 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa opacity: 0; transition: opacity 150ms ease-in-out; `, - toggle: css` - padding: 5px; - `, }; }); diff --git a/public/app/features/search/components/SearchResultsFilter.tsx b/public/app/features/search/components/SearchResultsFilter.tsx index 29cc4d935b6..2d23ec64554 100644 --- a/public/app/features/search/components/SearchResultsFilter.tsx +++ b/public/app/features/search/components/SearchResultsFilter.tsx @@ -46,10 +46,10 @@ export const SearchResultsFilter: FC = ({ {showActions ? ( - - diff --git a/public/app/features/teams/TeamGroupSync.tsx b/public/app/features/teams/TeamGroupSync.tsx index 84100a421e8..9f9c124e176 100644 --- a/public/app/features/teams/TeamGroupSync.tsx +++ b/public/app/features/teams/TeamGroupSync.tsx @@ -2,7 +2,7 @@ import React, { PureComponent } from 'react'; import { connect } from 'react-redux'; import { SlideDown } from 'app/core/components/Animations/SlideDown'; -import { LegacyForms, Tooltip } from '@grafana/ui'; +import { LegacyForms, Tooltip, Icon } from '@grafana/ui'; const { Input } = LegacyForms; import { TeamGroup } from '../../types'; @@ -82,9 +82,7 @@ export class TeamGroupSync extends PureComponent {

    External group sync

    -
    - -
    +
    {groups.length > 0 && ( @@ -123,7 +121,7 @@ export class TeamGroupSync extends PureComponent { {groups.length === 0 && !isAdding && ( { return ( -
    - -
    +
    -
    - -
    +
    {
    diff --git a/public/app/features/variables/pickers/shared/VariableLink.tsx b/public/app/features/variables/pickers/shared/VariableLink.tsx index 9428ee84220..f402ee8ec7c 100644 --- a/public/app/features/variables/pickers/shared/VariableLink.tsx +++ b/public/app/features/variables/pickers/shared/VariableLink.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { getTagColorsFromName } from '@grafana/ui'; +import { getTagColorsFromName, Icon } from '@grafana/ui'; import { e2e } from '@grafana/e2e'; import { VariableTag } from '../../../templating/types'; @@ -30,12 +30,14 @@ export class VariableLink extends PureComponent { return ( -     {tag.text} +    + +   {tag.text} ); })} - + ); } diff --git a/public/app/features/variables/pickers/shared/VariableOptions.tsx b/public/app/features/variables/pickers/shared/VariableOptions.tsx index 18430ef6c83..08693f5af11 100644 --- a/public/app/features/variables/pickers/shared/VariableOptions.tsx +++ b/public/app/features/variables/pickers/shared/VariableOptions.tsx @@ -1,5 +1,5 @@ import React, { PureComponent } from 'react'; -import { getTagColorsFromName, Tooltip } from '@grafana/ui'; +import { getTagColorsFromName, Tooltip, Icon } from '@grafana/ui'; import { e2e } from '@grafana/e2e'; import { VariableOption, VariableTag } from '../../../templating/types'; @@ -79,7 +79,9 @@ export class VariableOptions extends PureComponent { > - {tag.text}    + {tag.text}   + +   ); diff --git a/public/app/partials/valueSelectDropdown.html b/public/app/partials/valueSelectDropdown.html index 34509570239..79895ae1b23 100644 --- a/public/app/partials/valueSelectDropdown.html +++ b/public/app/partials/valueSelectDropdown.html @@ -7,10 +7,10 @@ {{vm.linkText}} -     {{tag.text}} +     {{tag.text}} - + {{tag.text}}   {{tag.text}}   
    diff --git a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx index 446f4d1ff81..fd5da650548 100644 --- a/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx +++ b/public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx @@ -51,7 +51,7 @@ export const DataLink = (props: Props) => {
    diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 112e6d9e871..202a7da508a 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -11,7 +11,7 @@ vertical-align: middle; } -.gicon--has-hover { +.icon--has-hover { opacity: 0.7; &:hover { diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 89280a78d35..fb00a645d40 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -82,6 +82,9 @@ .btn-small { @include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm); height: $height-sm; + svg { + margin-bottom: 0; + } } // Deprecated, only used by old plugins diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index eb6e0be5969..4b6ebfa3f26 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -41,7 +41,7 @@ $input-border: 1px solid $input-border-color; .gf-form-input-icon { position: absolute; top: 50%; - margin-top: -9px; + margin-top: -8px; font-size: $font-size-lg; left: 10px; color: $input-color-placeholder; diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 3af632a4cea..df1b629fc0c 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -142,15 +142,8 @@ } .share-modal-big-icon { - margin-bottom: 10px; - margin-right: $space-xl; - .fa { - font-size: 50px; - } - .gicon { - width: 48px; - height: 48px; - } + margin-right: 8px; + margin-top: -7px; } .share-modal-info-text { diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 49ff97e873f..c3e0ff51792 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -74,6 +74,9 @@ font-size: 20px; margin-right: 5px; } + svg { + color: $orange; + } } .search-results-scroller { diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 65a723cb9ef..e6e11b7fed2 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -149,8 +149,7 @@ .page-sub-heading-icon { margin-left: $spacer; - vertical-align: 6px; - font-size: 13px; + margin-top: $space-xs; } .page-sidebar {