yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add navigation tips

Browse Source
This commit is contained in:
JesmoDev
2024-05-27 14:46:45 +02:00
parent f3d57dedbc
commit 55cac5eda0
1 changed files with 62 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/Umbraco.Web.UI.Client/src/packages/search/search-modal/search-modal.element.ts
View File

@@ -284,7 +284,7 @@ export class UmbSearchModalElement extends UmbLitElement {
${this.#renderSearchTags()}
${this._search
? html`<div id="main">${this._searchResults.length > 0 ? this.#renderResults() : this.#renderNoResults()}</div>`
: nothing}
: this.#renderNavigationTips()}
`;
}
@@ -340,6 +340,44 @@ export class UmbSearchModalElement extends UmbLitElement {
return this._loading ? nothing : html`<div id="no-results">${this.localize.term('general_searchNoResult')}</div>`;
}
#renderNavigationTips() {
return html`<div id="navigation-tips">
<div class="navigation-tips-key" style="grid-column: span 2;">Tab</div>
<span>Navigate search providers</span>
<div class="navigation-tips-key">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<path d="m5 12 7-7 7 7" />
<path d="M12 19V5" />
</svg>
</div>
<div class="navigation-tips-key">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<path d="M12 5v14" />
<path d="m19 12-7 7-7-7" />
</svg>
</div>
<span>Navigate search results</span>
</div>`;
}
static styles = [
UmbTextStyles,
css`
@@ -355,6 +393,29 @@ export class UmbSearchModalElement extends UmbLitElement {
font-size: 1rem;
padding-bottom: var(--uui-size-space-2);
}
#navigation-tips {
display: grid;
grid-template-columns: 50px 50px auto;
column-gap: var(--uui-size-space-3);
row-gap: var(--uui-size-space-4);
align-items: center;
color: var(--uui-color-border-emphasis);
margin-top: var(--uui-size-layout-3);
margin-inline: auto;
}
.navigation-tips-key {
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--uui-border-radius);
border: 1px solid var(--uui-color-border);
height: 36px;
font-size: 0.9rem;
font-weight: bold;
}
#navigation-tips .navigation-tips-key + span {
margin-left: var(--uui-size-space-2);
}
#top {
background-color: var(--uui-color-surface);
display: flex;