public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navigation: Don't round app plugin icon images (#54543)

Browse Source 
* Navigation: Don't round app plugin icon images

* round icon
This commit is contained in:
Josh Hunt
2022-09-01 10:28:50 +01:00
committed by GitHub
parent 7efefbaece
commit f15ce633c9
13 changed files with 270 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/types/navModel.ts
+2 -1
View File
@@ -14,6 +14,8 @@ export interface NavLinkDTO {
divider?: boolean;
hideFromMenu?: boolean;
hideFromTabs?: boolean;
showIconInNavbar?: boolean;
roundIcon?: boolean;
children?: NavLinkDTO[];
highlightText?: string;
emptyMessageId?: string;
@@ -30,7 +32,6 @@ export interface NavModelItem extends NavLinkDTO {
highlightText?: string;
highlightId?: string;
tabSuffix?: ComponentType<{ className?: string }>;
showIconInNavbar?: boolean;
hideFromBreadcrumbs?: boolean;
}
packages/grafana-ui/src/components/Icon/Icon.tsx
+1
View File
@@ -6,6 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes/ThemeContext';
import { IconName, IconType, IconSize } from '../../types/icon';
export { toIconName } from '../../types/icon';
import { cacheInitialized, initIconCache, iconRoot } from './iconBundle';
import { getIconSubDir, getSvgSize } from './utils';
packages/grafana-ui/src/components/index.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import { AsyncSelect, Select } from './Forms/Legacy/Select/Select';
import { Switch } from './Forms/Legacy/Switch/Switch';
import { SecretFormField } from './SecretFormField/SecretFormField';
export { Icon } from './Icon/Icon';
export { Icon, toIconName } from './Icon/Icon';
export { IconButton, type IconButtonVariant } from './IconButton/IconButton';
export { ConfirmButton } from './ConfirmButton/ConfirmButton';
export { DeleteButton } from './ConfirmButton/DeleteButton';
packages/grafana-ui/src/types/icon.ts
+209 -184
View File
@@ -5,192 +5,202 @@ import { ComponentSize } from './size';
export type IconType = 'mono' | 'default' | 'solid';
export type IconSize = ComponentSize | 'xl' | 'xxl' | 'xxxl';
export const getAvailableIcons = () =>
[
'anchor',
'angle-double-down',
'angle-double-right',
'angle-double-up',
'angle-down',
'angle-left',
'angle-right',
'angle-up',
'apps',
'arrow',
'arrow-down',
'arrow-from-right',
'arrow-left',
'arrow-random',
'arrow-right',
'arrow-up',
'arrows-h',
'arrows-v',
'backward',
'bars',
'bell',
'bell-slash',
'bolt',
'book',
'bookmark',
'book-open',
'brackets-curly',
'building',
'bug',
'building',
'calculator-alt',
'calendar-alt',
'camera',
'capture',
'channel-add',
'chart-line',
'check',
'check-circle',
'circle',
'clipboard-alt',
'clock-nine',
'cloud',
'cloud-download',
'cloud-upload',
'code-branch',
'cog',
'columns',
'comment-alt',
'comment-alt-message',
'comment-alt-share',
'comments-alt',
'compass',
'copy',
'credit-card',
'cube',
'dashboard',
'database',
'document-info',
'download-alt',
'draggabledots',
'edit',
'ellipsis-v',
'envelope',
'exchange-alt',
'exclamation-triangle',
'exclamation-circle',
'external-link-alt',
'eye',
'eye-slash',
'ellipsis-h',
'fa fa-spinner',
'favorite',
'file-alt',
'file-blank',
'file-copy-alt',
'filter',
'folder',
'font',
'fire',
'folder-open',
'folder-plus',
'folder-upload',
'forward',
'gf-bar-alignment-after',
'gf-bar-alignment-before',
'gf-bar-alignment-center',
'gf-glue',
'gf-grid',
'gf-interpolation-linear',
'gf-interpolation-smooth',
'gf-interpolation-step-after',
'gf-interpolation-step-before',
'gf-landscape',
'gf-layout-simple',
'gf-logs',
'gf-portrait',
'grafana',
'graph-bar',
'heart',
'heart-break',
'history',
'home',
'home-alt',
'horizontal-align-center',
'horizontal-align-left',
'horizontal-align-right',
'hourglass',
'import',
'info',
'info-circle',
'key-skeleton-alt',
'keyboard',
'layer-group',
'library-panel',
'line-alt',
'link',
'list-ui-alt',
'list-ul',
'lock',
'map-marker',
'message',
'minus',
'minus-circle',
'mobile-android',
'monitor',
'palette',
'panel-add',
'pause',
'pen',
'percentage',
'play',
'plug',
'plus',
'plus-circle',
'plus-square',
'power',
'presentation-play',
'process',
'question-circle',
'record-audio',
'repeat',
'rocket',
'ruler-combined',
'save',
'search',
'search-minus',
'search-plus',
'share-alt',
'shield',
'shield-exclamation',
'signal',
'signin',
'signout',
'sitemap',
'slack',
'sliders-v-alt',
'sort-amount-down',
'sort-amount-up',
'square-shape',
'star',
'step-backward',
'stopwatch-slash',
'sync',
'table',
'tag-alt',
'text-fields',
'times',
'toggle-on',
'trash-alt',
'unlock',
'upload',
'user',
'users-alt',
'vertical-align-bottom',
'vertical-align-center',
'vertical-align-top',
'wrap-text',
'rss',
'x',
] as const;
const avaibleBrandIcons = [
'google' as const,
'microsoft' as const,
'github' as const,
'gitlab' as const,
'okta' as const,
];
type BrandIconNames = 'google' | 'microsoft' | 'github' | 'gitlab' | 'okta';
const availableIcons = [
'anchor' as const,
'angle-double-down' as const,
'angle-double-right' as const,
'angle-double-up' as const,
'angle-down' as const,
'angle-left' as const,
'angle-right' as const,
'angle-up' as const,
'apps' as const,
'arrow' as const,
'arrow-down' as const,
'arrow-from-right' as const,
'arrow-left' as const,
'arrow-random' as const,
'arrow-right' as const,
'arrow-up' as const,
'arrows-h' as const,
'arrows-v' as const,
'backward' as const,
'bars' as const,
'bell' as const,
'bell-slash' as const,
'bolt' as const,
'book' as const,
'bookmark' as const,
'book-open' as const,
'brackets-curly' as const,
'building' as const,
'bug' as const,
'building' as const,
'calculator-alt' as const,
'calendar-alt' as const,
'camera' as const,
'capture' as const,
'channel-add' as const,
'chart-line' as const,
'check' as const,
'check-circle' as const,
'circle' as const,
'clipboard-alt' as const,
'clock-nine' as const,
'cloud' as const,
'cloud-download' as const,
'cloud-upload' as const,
'code-branch' as const,
'cog' as const,
'columns' as const,
'comment-alt' as const,
'comment-alt-message' as const,
'comment-alt-share' as const,
'comments-alt' as const,
'compass' as const,
'copy' as const,
'credit-card' as const,
'cube' as const,
'dashboard' as const,
'database' as const,
'document-info' as const,
'download-alt' as const,
'draggabledots' as const,
'edit' as const,
'ellipsis-v' as const,
'envelope' as const,
'exchange-alt' as const,
'exclamation-triangle' as const,
'exclamation-circle' as const,
'external-link-alt' as const,
'eye' as const,
'eye-slash' as const,
'ellipsis-h' as const,
'fa fa-spinner' as const,
'favorite' as const,
'file-alt' as const,
'file-blank' as const,
'file-copy-alt' as const,
'filter' as const,
'folder' as const,
'font' as const,
'fire' as const,
'folder-open' as const,
'folder-plus' as const,
'folder-upload' as const,
'forward' as const,
'gf-bar-alignment-after' as const,
'gf-bar-alignment-before' as const,
'gf-bar-alignment-center' as const,
'gf-glue' as const,
'gf-grid' as const,
'gf-interpolation-linear' as const,
'gf-interpolation-smooth' as const,
'gf-interpolation-step-after' as const,
'gf-interpolation-step-before' as const,
'gf-landscape' as const,
'gf-layout-simple' as const,
'gf-logs' as const,
'gf-portrait' as const,
'grafana' as const,
'graph-bar' as const,
'heart' as const,
'heart-break' as const,
'history' as const,
'home' as const,
'home-alt' as const,
'horizontal-align-center' as const,
'horizontal-align-left' as const,
'horizontal-align-right' as const,
'hourglass' as const,
'import' as const,
'info' as const,
'info-circle' as const,
'key-skeleton-alt' as const,
'keyboard' as const,
'layer-group' as const,
'library-panel' as const,
'line-alt' as const,
'link' as const,
'list-ui-alt' as const,
'list-ul' as const,
'lock' as const,
'map-marker' as const,
'message' as const,
'minus' as const,
'minus-circle' as const,
'mobile-android' as const,
'monitor' as const,
'palette' as const,
'panel-add' as const,
'pause' as const,
'pen' as const,
'percentage' as const,
'play' as const,
'plug' as const,
'plus' as const,
'plus-circle' as const,
'plus-square' as const,
'power' as const,
'presentation-play' as const,
'process' as const,
'question-circle' as const,
'record-audio' as const,
'repeat' as const,
'rocket' as const,
'ruler-combined' as const,
'save' as const,
'search' as const,
'search-minus' as const,
'search-plus' as const,
'share-alt' as const,
'shield' as const,
'shield-exclamation' as const,
'signal' as const,
'signin' as const,
'signout' as const,
'sitemap' as const,
'slack' as const,
'sliders-v-alt' as const,
'sort-amount-down' as const,
'sort-amount-up' as const,
'square-shape' as const,
'star' as const,
'step-backward' as const,
'stopwatch-slash' as const,
'sync' as const,
'table' as const,
'tag-alt' as const,
'text-fields' as const,
'times' as const,
'toggle-on' as const,
'trash-alt' as const,
'unlock' as const,
'upload' as const,
'user' as const,
'users-alt' as const,
'vertical-align-bottom' as const,
'vertical-align-center' as const,
'vertical-align-top' as const,
'wrap-text' as const,
'rss' as const,
'x' as const,
];
export type IconName = ReturnType<typeof getAvailableIcons>[number] | BrandIconNames;
// function remains for backwards compatibility
export const getAvailableIcons = () => availableIcons;
type BrandIconNames = typeof avaibleBrandIcons;
export type IconName = ReturnType<typeof getAvailableIcons>[number] | BrandIconNames[number];
/** Get the icon for a given field type */
export function getFieldTypeIcon(field?: Field): IconName {
@@ -214,3 +224,18 @@ export function getFieldTypeIcon(field?: Field): IconName {
}
return 'question-circle';
}
function isValidIconName(iconName: string): iconName is IconName {
const namedIcons: string[] = availableIcons;
const brandIcons: string[] = avaibleBrandIcons;
return namedIcons.includes(iconName) || brandIcons.includes(iconName);
}
export function toIconName(iconName: string): IconName | undefined {
if (isValidIconName(iconName)) {
return iconName;
}
return undefined;
}