inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-26 17:24:45 +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",
"EFFECTIVITY": "Effectivity",
"TITLE": "Search Results",
"FILTER_SET": "Filter Set:",
"ADVANCED_FILTERS": "Advanced Filters:",
"RESET": "Reset",
"RESET_ACTION": "Reset search filters",
"FOUND_RESULTS": "{{ number }} results 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__content">
<mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite"> </mat-progress-bar>
<div class="adf-search-results__content-header content">
<adf-search-form class="content__side--left"></adf-search-form>
<mat-divider [vertical]="true" class="content__divider"></mat-divider>
<adf-search-filter-chips class="content__filter"></adf-search-filter-chips>
<button
mat-button
adf-reset-search
class="content__reset-action"
title="{{'APP.BROWSE.SEARCH.RESET_ACTION' | translate }}"
[attr.aria-label]="'APP.BROWSE.SEARCH.RESET_ACTION' | translate ">
<mat-icon> refresh </mat-icon>
</button>
<div class="adf-search-results__content-header aca-content">
<div class="aca-content__filter-set">
<p>{{ 'APP.BROWSE.SEARCH.FILTER_SET' | translate }}</p>
<adf-search-form></adf-search-form>
</div>
<mat-divider [vertical]="true" class="aca-content__divider"></mat-divider>
<div class="aca-content__advanced-filters">
<div class="aca-content__advanced-filters--header">
<p>{{ 'APP.BROWSE.SEARCH.ADVANCED_FILTERS' | translate }}</p>
<button
mat-button
adf-reset-search
class="aca-content__reset-action"
title="{{ 'APP.BROWSE.SEARCH.RESET_ACTION' | translate }}"
[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>
<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 {
@include flex-column;
border-left: 1px solid #eee;
border-left: 1px solid var(--theme-border-color);
}
&__content-header {
@ -24,7 +24,8 @@ $contrast-gray: #646569;
padding: 0 25px;
flex-direction: row;
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 {
&.mat-chip {
@ -85,28 +86,37 @@ $contrast-gray: #646569;
}
}
.content {
.aca-content {
box-sizing: border-box;
display: flex;
place-content: flex-start space-between;
align-items: flex-start;
padding: 16px 12px;
background-color: var(--theme-primary-color-default-contrast);
&__button {
padding: 0 12px;
&__filter-set {
p {
padding: 0 16px;
}
}
&__divider {
height: 100%;
}
&__filter {
&__advanced-filters {
width: 100%;
padding: 0 12px;
flex: 1 1 auto;
&--header {
display: flex;
justify-content: space-between;
}
}
&__reset-action {
line-height: 33px;
font-weight: lighter;
}
&__sort-picker {