Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

docs: visualize keyboard shortcut for search (#47507)

Browse source 
PR Close #47507
This commit is contained in:
Rokas Brazdžionis 2022-09-21 19:20:25 +03:00 committed by Alex Rickabaugh
parent 478db892c2
commit 291a5b35bd
3 changed files with 24 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
aio/src/app/search/search-box/search-box.component.ts
View file

@ -24,6 +24,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
(keyup)="doSearch()"
(focus)="doFocus()"
(click)="doSearch()">
<div class="search-box-shortcut">/</div>
<mat-icon
*ngIf="searchBox.value"
(click)="searchBox.value = ''; searchBox.focus()">

5
aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
View file

@ -88,6 +88,11 @@
color: constants.$mediumgray;
}
}
.search-box-shortcut {
border-color: constants.$mediumgray;
color: constants.$mediumgray;
}
}
aio-theme-toggle {

18
aio/src/styles/1-layouts/top-menu/_top-menu.scss
View file

@ -208,6 +208,24 @@ mat-toolbar.app-toolbar {
}
}
.search-box-shortcut {
display: none;
position: absolute;
right: 16px;
font-size: 1.2rem;
line-height: 2.2rem;
padding: 0 0.8rem;
pointer-events: none;
font-weight: bold;
text-align: center;
border-radius: 4px;
border: 1px solid;
}
input:not(:focus):placeholder-shown + .search-box-shortcut {
display: block;
}
mat-icon {
position: absolute;
color: constants.$blue;