Navigation: more command palette tweaks (#62286)

* update placeholder text, only create search keybindings if topNavCommandPalette is disabled

* make search input wider
This commit is contained in:
Ashley Harrison
2023-01-27 16:21:48 +00:00
committed by GitHub
parent 305209f4be
commit 1ef7cfda3f
10 changed files with 20 additions and 12 deletions

View File

@@ -79,7 +79,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
justifyContent: 'space-between', justifyContent: 'space-between',
[theme.breakpoints.up('sm')]: { [theme.breakpoints.up('sm')]: {
gridTemplateColumns: '1.5fr minmax(200px, 1fr) 1.5fr', // search should not be smaller than 200px gridTemplateColumns: '1.5fr minmax(240px, 1fr) 1.5fr', // search should not be smaller than 240px
display: 'grid', display: 'grid',
justifyContent: 'flex-start', justifyContent: 'flex-start',

View File

@@ -36,7 +36,7 @@ export function TopSearchBarCommandPaletteTrigger() {
<ToolbarButton <ToolbarButton
iconOnly iconOnly
icon="search" icon="search"
aria-label={t('nav.search.placeholder', 'Search Grafana')} aria-label={t('nav.search.placeholderCommandPalette', 'Search or jump to...')}
onClick={onOpenSearch} onClick={onOpenSearch}
/> />
); );
@@ -65,7 +65,7 @@ function PretendTextInput({ onClick }: PretendTextInputProps) {
</div> </div>
<button className={styles.fakeInput} onClick={onClick}> <button className={styles.fakeInput} onClick={onClick}>
{t('nav.search.placeholder', 'Search Grafana')} {t('nav.search.placeholderCommandPalette', 'Search or jump to...')}
</button> </button>
<div className={styles.suffix}> <div className={styles.suffix}>

View File

@@ -39,9 +39,11 @@ export class KeybindingSrv {
this.bind('g a', this.openAlerting); this.bind('g a', this.openAlerting);
this.bind('g p', this.goToProfile); this.bind('g p', this.goToProfile);
this.bind('g e', this.goToExplore); this.bind('g e', this.goToExplore);
this.bind('s o', this.openSearch); if (!config.featureToggles.topNavCommandPalette) {
this.bind('s o', this.openSearch);
this.bind('f', this.openSearch);
}
this.bind('t a', this.makeAbsoluteTime); this.bind('t a', this.makeAbsoluteTime);
this.bind('f', this.openSearch);
this.bind('esc', this.exit); this.bind('esc', this.exit);
this.bindGlobalEsc(); this.bindGlobalEsc();
} }

View File

@@ -59,7 +59,7 @@ export const CommandPalette = () => {
<div className={styles.searchContainer}> <div className={styles.searchContainer}>
{isFetchingDashboardResults ? <Spinner className={styles.spinner} /> : <Icon name="search" size="md" />} {isFetchingDashboardResults ? <Spinner className={styles.spinner} /> : <Icon name="search" size="md" />}
<KBarSearch <KBarSearch
defaultPlaceholder={t('command-palette.search-box.placeholder', 'Search Grafana')} defaultPlaceholder={t('command-palette.search-box.placeholder', 'Search or jump to...')}
className={styles.search} className={styles.search}
/> />
</div> </div>

View File

@@ -292,7 +292,8 @@
"title": "Szenen" "title": "Szenen"
}, },
"search": { "search": {
"placeholder": "Grafana durchsuchen" "placeholder": "Grafana durchsuchen",
"placeholderCommandPalette": ""
}, },
"search-dashboards": { "search-dashboards": {
"title": "Dashboards durchsuchen" "title": "Dashboards durchsuchen"

View File

@@ -292,7 +292,8 @@
"title": "Scenes" "title": "Scenes"
}, },
"search": { "search": {
"placeholder": "Search Grafana" "placeholder": "Search Grafana",
"placeholderCommandPalette": "Search or jump to..."
}, },
"search-dashboards": { "search-dashboards": {
"title": "Search dashboards" "title": "Search dashboards"

View File

@@ -292,7 +292,8 @@
"title": "Escenas" "title": "Escenas"
}, },
"search": { "search": {
"placeholder": "Buscar Grafana" "placeholder": "Buscar Grafana",
"placeholderCommandPalette": ""
}, },
"search-dashboards": { "search-dashboards": {
"title": "Buscar paneles de control" "title": "Buscar paneles de control"

View File

@@ -292,7 +292,8 @@
"title": "Scènes" "title": "Scènes"
}, },
"search": { "search": {
"placeholder": "Rechercher dans Grafana" "placeholder": "Rechercher dans Grafana",
"placeholderCommandPalette": ""
}, },
"search-dashboards": { "search-dashboards": {
"title": "Rechercher dans les tableaux de bord" "title": "Rechercher dans les tableaux de bord"

View File

@@ -292,7 +292,8 @@
"title": "Ŝčęʼnęş" "title": "Ŝčęʼnęş"
}, },
"search": { "search": {
"placeholder": "Ŝęäřčĥ Ğřäƒäʼnä" "placeholder": "Ŝęäřčĥ Ğřäƒäʼnä",
"placeholderCommandPalette": "Ŝęäřčĥ őř ĵūmp ŧő..."
}, },
"search-dashboards": { "search-dashboards": {
"title": "Ŝęäřčĥ đäşĥþőäřđş" "title": "Ŝęäřčĥ đäşĥþőäřđş"

View File

@@ -292,7 +292,8 @@
"title": "场景" "title": "场景"
}, },
"search": { "search": {
"placeholder": "搜索 Grafana" "placeholder": "搜索 Grafana",
"placeholderCommandPalette": ""
}, },
"search-dashboards": { "search-dashboards": {
"title": "" "title": ""