Browse Source

Feature/improve styles of assistant (#4901)

* Improve styles

* Update changelog
pull/4903/head
Thomas Kaul 3 weeks ago
committed by GitHub
parent
commit
b80c186c97
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
  1. 1
      CHANGELOG.md
  2. 6
      libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html
  3. 9
      libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss
  4. 68
      libs/ui/src/lib/assistant/assistant.html
  5. 26
      libs/ui/src/lib/assistant/assistant.scss

1
CHANGELOG.md

@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed ### Changed
- Improved the style of the assistant
- Migrated the `HtmlTemplateMiddleware` to use `@Injectable()` - Migrated the `HtmlTemplateMiddleware` to use `@Injectable()`
- Renamed `User` to `user` in the database schema - Renamed `User` to `user` in the database schema
- Improved the language localization for French (`fr`) - Improved the language localization for French (`fr`)

6
libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.html

@ -1,12 +1,10 @@
<a <a
#link #link
class="d-block line-height-1 px-2 py-1 text-truncate" class="d-block line-height-1 px-3 py-1 text-truncate"
[queryParams]="queryParams" [queryParams]="queryParams"
[routerLink]="routerLink" [routerLink]="routerLink"
(click)="onClick()" (click)="onClick()"
><span ><span>{{ item?.name }}</span>
><b>{{ item?.name }}</b></span
>
@if (item && isAsset(item)) { @if (item && isAsset(item)) {
<br /> <br />
<small class="text-muted" <small class="text-muted"

9
libs/ui/src/lib/assistant/assistant-list-item/assistant-list-item.scss

@ -6,6 +6,11 @@
a { a {
color: rgba(var(--light-primary-text)); color: rgba(var(--light-primary-text));
font-weight: bold;
.text-muted {
color: rgba(var(--light-primary-text)) !important;
}
} }
} }
} }
@ -14,6 +19,10 @@
&.has-focus { &.has-focus {
a { a {
color: rgba(var(--dark-primary-text)); color: rgba(var(--dark-primary-text));
.text-muted {
color: rgba(var(--dark-primary-text)) !important;
}
} }
} }
} }

68
libs/ui/src/lib/assistant/assistant.html

@ -38,23 +38,29 @@
</div> </div>
<div <div
*ngIf="searchFormControl.value" *ngIf="searchFormControl.value"
class="overflow-auto py-3 result-container" class="overflow-auto py-2 result-container"
> >
<div <div
*ngIf="searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks" *ngIf="searchResults?.quickLinks?.length !== 0 || isLoading.quickLinks"
class="mb-3" class="mb-2"
> >
<div class="h6 mb-1 px-2" i18n>Quick Links</div> <div class="font-weight-bold px-3 text-muted title" i18n>
<gf-assistant-list-item Quick Links
*ngFor="let searchResultItem of searchResults?.quickLinks" </div>
[item]="searchResultItem" @for (
(clicked)="onCloseAssistant()" searchResultItem of searchResults?.quickLinks;
/> track searchResultItem
) {
<gf-assistant-list-item
[item]="searchResultItem"
(clicked)="onCloseAssistant()"
/>
}
<ng-container> <ng-container>
@if (isLoading.quickLinks) { @if (isLoading.quickLinks) {
<ngx-skeleton-loader <ngx-skeleton-loader
animation="pulse" animation="pulse"
class="mx-2" class="mx-3"
[theme]="{ [theme]="{
height: '1.5rem', height: '1.5rem',
width: '100%' width: '100%'
@ -64,46 +70,56 @@
</ng-container> </ng-container>
</div> </div>
<div> <div>
<div class="h6 mb-1 px-2" i18n>Holdings</div> <div class="font-weight-bold px-3 text-muted title" i18n>Holdings</div>
<gf-assistant-list-item @for (
*ngFor="let searchResultItem of searchResults?.holdings" searchResultItem of searchResults?.holdings;
[item]="searchResultItem" track searchResultItem
(clicked)="onCloseAssistant()" ) {
/> <gf-assistant-list-item
[item]="searchResultItem"
(clicked)="onCloseAssistant()"
/>
}
<ng-container *ngIf="searchResults?.holdings?.length === 0"> <ng-container *ngIf="searchResults?.holdings?.length === 0">
@if (isLoading.holdings) { @if (isLoading.holdings) {
<ngx-skeleton-loader <ngx-skeleton-loader
animation="pulse" animation="pulse"
class="mx-2" class="mx-3"
[theme]="{ [theme]="{
height: '1.5rem', height: '1.5rem',
width: '100%' width: '100%'
}" }"
/> />
} @else { } @else {
<div class="px-2 py-1" i18n>No entries...</div> <div class="px-3 py-1 text-muted" i18n>No entries...</div>
} }
</ng-container> </ng-container>
</div> </div>
<div *ngIf="hasPermissionToAccessAdminControl" class="mt-3"> <div *ngIf="hasPermissionToAccessAdminControl" class="mt-2">
<div class="h6 mb-1 px-2" i18n>Asset Profiles</div> <div class="font-weight-bold px-3 text-muted title" i18n>
<gf-assistant-list-item Asset Profiles
*ngFor="let searchResultItem of searchResults?.assetProfiles" </div>
[item]="searchResultItem" @for (
(clicked)="onCloseAssistant()" searchResultItem of searchResults?.assetProfiles;
/> track searchResultItem
) {
<gf-assistant-list-item
[item]="searchResultItem"
(clicked)="onCloseAssistant()"
/>
}
<ng-container *ngIf="searchResults?.assetProfiles?.length === 0"> <ng-container *ngIf="searchResults?.assetProfiles?.length === 0">
@if (isLoading.assetProfiles) { @if (isLoading.assetProfiles) {
<ngx-skeleton-loader <ngx-skeleton-loader
animation="pulse" animation="pulse"
class="mx-2" class="mx-3"
[theme]="{ [theme]="{
height: '1.5rem', height: '1.5rem',
width: '100%' width: '100%'
}" }"
/> />
} @else { } @else {
<div class="px-2 py-1" i18n>No entries...</div> <div class="px-3 py-1 text-muted" i18n>No entries...</div>
} }
</ng-container> </ng-container>
</div> </div>

26
libs/ui/src/lib/assistant/assistant.scss

@ -7,6 +7,24 @@
.result-container { .result-container {
max-height: 15rem; max-height: 15rem;
.title {
align-items: center;
display: flex;
font-size: 0.75rem;
display: flex;
margin: 0;
position: relative;
white-space: nowrap;
&::after {
content: '';
flex-grow: 1;
height: 1px;
background: rgba(var(--dark-dividers));
margin-left: 0.25rem;
}
}
} }
.search-container { .search-container {
@ -31,6 +49,14 @@
border-color: rgba(var(--light-dividers)); border-color: rgba(var(--light-dividers));
} }
.result-container {
.title {
&::after {
background: rgba(var(--light-dividers));
}
}
}
.search-container { .search-container {
border-color: rgba(var(--light-dividers)); border-color: rgba(var(--light-dividers));

Loading…
Cancel
Save