inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-06-02 17:34:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5171] Facets section - UI changes (#3195)

Browse Source 
* [ACS-5171] facets section - ui changes

* [ACS-5171] code improvements

* [ACS-5171] set theme variable for border color
This commit is contained in:
Nikita Maliarchuk 2023-05-17 14:51:58 +02:00 committed by GitHub
parent b04d0f226a
commit f1d8b84d2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
projects/aca-content/assets/i18n/en.json
View File

@ -215,6 +215,9 @@
"DUBLIN_CORE": "Dublin core", "DUBLIN_CORE": "Dublin core",
"EFFECTIVITY": "Effectivity", "EFFECTIVITY": "Effectivity",
"TITLE": "Search Results", "TITLE": "Search Results",
"FILTER_SET": "Filter Set:",
"ADVANCED_FILTERS": "Advanced Filters:",
"RESET": "Reset",
"RESET_ACTION": "Reset search filters", "RESET_ACTION": "Reset search filters",
"FOUND_RESULTS": "{{ number }} results found", "FOUND_RESULTS": "{{ number }} results found",
"FOUND_ONE_RESULT": "{{ number }} result found", "FOUND_ONE_RESULT": "{{ number }} result found",

35
projects/aca-content/src/lib/components/search/search-results/search-results.component.html
View File

@ -14,21 +14,26 @@
<div class="adf-search-results"> <div class="adf-search-results">
<div class="adf-search-results__content"> <div class="adf-search-results__content">
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite"> </mat-progress-bar> <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite"> </mat-progress-bar>
<div class="adf-search-results__content-header content"> <div class="adf-search-results__content-header aca-content">
<adf-search-form class="content__side--left"></adf-search-form> <div class="aca-content__filter-set">
<p>{{ 'APP.BROWSE.SEARCH.FILTER_SET' | translate }}</p>
<mat-divider [vertical]="true" class="content__divider"></mat-divider> <adf-search-form></adf-search-form>
</div>
<adf-search-filter-chips class="content__filter"></adf-search-filter-chips> <mat-divider [vertical]="true" class="aca-content__divider"></mat-divider>
<div class="aca-content__advanced-filters">
<button <div class="aca-content__advanced-filters--header">
mat-button <p>{{ 'APP.BROWSE.SEARCH.ADVANCED_FILTERS' | translate }}</p>
adf-reset-search <button
class="content__reset-action" mat-button
title="{{'APP.BROWSE.SEARCH.RESET_ACTION' | translate }}" adf-reset-search
[attr.aria-label]="'APP.BROWSE.SEARCH.RESET_ACTION' | translate "> class="aca-content__reset-action"
<mat-icon> refresh </mat-icon> title="{{ 'APP.BROWSE.SEARCH.RESET_ACTION' | translate }}"
</button> [attr.aria-label]="'APP.BROWSE.SEARCH.RESET_ACTION' | translate ">
{{ 'APP.BROWSE.SEARCH.RESET' | translate }}
</button>
</div>
<adf-search-filter-chips></adf-search-filter-chips>
</div>
</div> </div>
<adf-document-list <adf-document-list

24
projects/aca-content/src/lib/components/search/search-results/search-results.component.scss
View File

@ -16,7 +16,7 @@ $contrast-gray: #646569;
&__content { &__content {
@include flex-column; @include flex-column;
border-left: 1px solid #eee; border-left: 1px solid var(--theme-border-color);
} }
&__content-header { &__content-header {
@ -24,7 +24,8 @@ $contrast-gray: #646569;
padding: 0 25px; padding: 0 25px;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
border-bottom: 1px solid #eee; border-top: 1px solid var(--theme-border-color);
border-bottom: 1px solid var(--theme-border-color);
.adf-search-filter-chip { .adf-search-filter-chip {
&.mat-chip { &.mat-chip {
@ -85,28 +86,37 @@ $contrast-gray: #646569;
} }
} }
.content { .aca-content {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
place-content: flex-start space-between; place-content: flex-start space-between;
align-items: flex-start; align-items: flex-start;
padding: 16px 12px; padding: 16px 12px;
background-color: var(--theme-primary-color-default-contrast);
&__button { &__filter-set {
padding: 0 12px; p {
padding: 0 16px;
}
} }
&__divider { &__divider {
height: 100%; height: 100%;
} }
&__filter { &__advanced-filters {
width: 100%;
padding: 0 12px; padding: 0 12px;
flex: 1 1 auto;
&--header {
display: flex;
justify-content: space-between;
}
} }
&__reset-action { &__reset-action {
line-height: 33px; line-height: 33px;
font-weight: lighter;
} }
&__sort-picker { &__sort-picker {