inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-7331] - View details sidebar (#9455)

Browse Source
This commit is contained in:
jacekpluta 2024-04-17 19:45:12 +02:00 committed by Jacek Pluta
parent 2b67b36c52
commit 3b6e7e87a2
12 changed files with 147 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/content-services/src/lib/category/categories-management/categories-management.component.scss
View File

@ -1,6 +1,4 @@
.adf-categories-management { .adf-categories-management {
padding-top: 12px;
.adf-category-name-field { .adf-category-name-field {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
@ -11,7 +9,9 @@
align-items: center; align-items: center;
input { input {
padding: 7px 8px; background-color: transparent;
padding: 7px 8px 8px 8px;
width: 100%;
} }
} }

25
lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
View File

@ -1,3 +1,5 @@
@import 'styles/mat-selectors';
$panel-properties-height: 56px !default; $panel-properties-height: 56px !default;
.adf { .adf {
@ -10,7 +12,12 @@ $panel-properties-height: 56px !default;
.adf-property-list .adf-property .adf-property-field { .adf-property-list .adf-property .adf-property-field {
.adf-property-value:not(.adf-card-view-selectitem .adf-property-value) { .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
margin-top: 20px; margin-top: 10px;
height: 32px;
&:is(textarea) {
padding-top: 6px;
}
} }
label { label {
@ -30,6 +37,19 @@ $panel-properties-height: 56px !default;
} }
} }
#{$mat-expansion-panel-body} {
padding-top: 16px;
input {
border-color: transparent;
width: 100%;
&:focus-visible {
outline: none;
}
}
}
.adf-edit-icon-buttons { .adf-edit-icon-buttons {
color: var(--adf-theme-foreground-text-color-054); color: var(--adf-theme-foreground-text-color-054);
} }
@ -41,7 +61,6 @@ $panel-properties-height: 56px !default;
border-radius: 16px; border-radius: 16px;
width: fit-content; width: fit-content;
background: var(--adf-metadata-buttons-background-color); background: var(--adf-metadata-buttons-background-color);
margin-top: 12px;
padding: 6px 12px; padding: 6px 12px;
justify-content: center; justify-content: center;
margin-left: 8px; margin-left: 8px;
@ -51,7 +70,7 @@ $panel-properties-height: 56px !default;
.adf-metadata-no-item-added { .adf-metadata-no-item-added {
word-break: break-all; word-break: break-all;
font-size: 15px; font-size: 15px;
padding: 16px 0 0 12px; padding: 0 0 0 12px;
} }
&-tags { &-tags {

11
lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
View File

@ -2,18 +2,23 @@
.adf-card-view-dateitem { .adf-card-view-dateitem {
.adf-property-value { .adf-property-value {
padding: 6px 0; padding-top: 6px;
padding-bottom: 6px;
line-height: 20px; line-height: 20px;
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
color: var(--adf-metadata-property-panel-title-color); color: var(--adf-metadata-property-panel-title-color);
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
margin-top: 10px;
&.adf-property-value-editable { &.adf-property-value-editable {
display: flex;
align-items: center;
border-radius: 6px; border-radius: 6px;
border-bottom: inherit; border-bottom: inherit;
margin-bottom: 18px;
} }
&.adf-property-readonly-value { &.adf-property-readonly-value {
padding-left: 12px; padding: 0 0 0 12px;
} }
} }

22
lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
View File

@ -14,10 +14,20 @@
z-index: 1; z-index: 1;
} }
.adf-property-value-editable { .adf-property-value-editable.adf-property-value-editable {
padding-left: 0;
#{$mat-text-field--no-label} #{$mat-form-field-infix} {
padding: 0;
}
#{$mat-form-field-wrapper} {
background-color: initial;
}
/* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
mat-select { mat-select {
padding: 6px 0 6px 12px; padding: 6px 0 8px 12px;
margin-top: 0; margin-top: 0;
border-radius: 6px; border-radius: 6px;
@ -27,12 +37,20 @@
} }
} }
#{$mat-form-field-subscript-wrapper} {
display: none;
}
.adf-property-read-only { .adf-property-read-only {
padding: 6px 0; padding: 6px 0;
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
color: var(--adf-metadata-property-panel-title-color); color: var(--adf-metadata-property-panel-title-color);
} }
.mdc-line-ripple {
display: none;
}
.adf-property-readonly-value { .adf-property-readonly-value {
color: var(--adf-metadata-property-panel-label-color); color: var(--adf-metadata-property-panel-label-color);
} }

10
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@ -1,6 +1,6 @@
<div [ngSwitch]="templateType"> <div [ngSwitch]="templateType">
<div *ngSwitchDefault> <div *ngSwitchDefault>
<mat-form-field class="adf-property-field adf-card-textitem-field" <mat-form-field subscriptSizing="dynamic" class="adf-property-field adf-card-textitem-field"
[ngClass]="{'adf-property-read-only': !isEditable }" [ngClass]="{'adf-property-read-only': !isEditable }"
[floatLabel]="'always'"> [floatLabel]="'always'">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label" <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"
@ -33,9 +33,9 @@
*ngIf="property.multiline" *ngIf="property.multiline"
title="{{property.label | translate }}" title="{{property.label | translate }}"
[cdkTextareaAutosize]="true" [cdkTextareaAutosize]="true"
[cdkAutosizeMaxRows]="1"
[cdkAutosizeMaxRows]="5"
class="adf-property-value" class="adf-property-value"
cdkAutosizeMinRows="1"
cdkAutosizeMaxRows="5"
[ngClass]="{ [ngClass]="{
'adf-property-value-editable': editable, 'adf-property-value-editable': editable,
'adf-property-readonly-value': isReadonlyProperty 'adf-property-readonly-value': isReadonlyProperty
@ -66,7 +66,7 @@
</mat-chip-row> </mat-chip-row>
</mat-chip-grid> </mat-chip-grid>
<mat-form-field [hidden]="!isEditable" <mat-form-field subscriptSizing="dynamic" [hidden]="!isEditable"
class="adf-property-field adf-textitem-chip-list-input" class="adf-property-field adf-textitem-chip-list-input"
[ngClass]="{ 'adf-property-read-only': !isEditable }"> [ngClass]="{ 'adf-property-read-only': !isEditable }">
<input matInput <input matInput
@ -91,7 +91,7 @@
[ngClass]="{ 'adf-property-read-only': !isEditable }" [ngClass]="{ 'adf-property-read-only': !isEditable }"
[attr.data-automation-id]="'card-textitem-toggle-' + property.key" [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
(click)="clicked()"> (click)="clicked()">
<mat-form-field class="adf-property-field adf-card-textitem-field"> <mat-form-field subscriptSizing="dynamic" class="adf-property-field adf-card-textitem-field">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label"> <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
{{ property.label | translate }} {{ property.label | translate }}
</mat-label> </mat-label>

13
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@ -1,10 +1,6 @@
@import 'styles/mat-selectors'; @import 'styles/mat-selectors';
.adf-card-view-textitem { .adf-card-view-textitem {
.adf-property-field {
padding-top: 15px;
}
.adf-textitem-error { .adf-textitem-error {
font-size: var(--theme-caption-font-size); font-size: var(--theme-caption-font-size);
padding-top: 6px; padding-top: 6px;
@ -59,7 +55,7 @@
color: var(--adf-theme-foreground-text-color-054); color: var(--adf-theme-foreground-text-color-054);
} }
.adf-property-read-only { .adf-property-read-only:not(:has(.adf-property-readonly-value)) {
border-bottom: 1px solid var(--adf-metadata-property-panel-border-color); border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
} }
@ -70,4 +66,11 @@
.adf-property-value-editable { .adf-property-value-editable {
color: var(--adf-metadata-property-panel-title-color); color: var(--adf-metadata-property-panel-title-color);
} }
#{$mat-form-field-underline} {
&::before,
&::after {
display: none;
}
}
} }

18
lib/core/src/lib/card-view/components/card-view/card-view.component.scss
View File

@ -22,10 +22,16 @@
} }
.adf-property-container { .adf-property-container {
margin-bottom: 10px; margin-bottom: 12px;
} }
.adf-property { .adf-property {
.adf-card-view-textitem {
.adf-property-field {
padding-top: 0;
}
}
.adf-property-field { .adf-property-field {
width: 100%; width: 100%;
@ -49,7 +55,6 @@
#{$mat-form--text-field-infix} { #{$mat-form--text-field-infix} {
border-top-width: 0; border-top-width: 0;
padding: 0;
} }
#{$mat-form-field-flex} { #{$mat-form-field-flex} {
@ -57,7 +62,10 @@
} }
#{$mat-form-field-wrapper} { #{$mat-form-field-wrapper} {
background-color: inherit;
padding-bottom: 0; padding-bottom: 0;
padding-left: 0;
padding-right: 0;
} }
#{$mat-form-field-label} { #{$mat-form-field-label} {
@ -75,16 +83,18 @@
} }
.adf-property-value { .adf-property-value {
color: var(--adf-metadata-property-panel-text-color); color: var(--adf-metadata-property-panel-title-color);
&.adf-property-value-editable { &.adf-property-value-editable {
color: var(--adf-metadata-property-panel-title-color); color: var(--adf-metadata-property-panel-title-color);
background-color: var(--adf-metadata-buttons-background-color); background-color: var(--adf-metadata-buttons-background-color);
border-radius: 6px; border-radius: 6px;
height: 32px;
padding-left: 10px;
#{$mat-input-element} { #{$mat-input-element} {
color: var(--adf-metadata-action-button-clear-color); color: var(--adf-metadata-action-button-clear-color);
padding: 6px 0 6px 12px; padding: 5px 0 6px 12px;
margin: 5px 0 0; margin: 5px 0 0;
} }
} }

4
lib/core/src/lib/comments/comments.component.html
View File

@ -3,12 +3,12 @@
{{'COMMENTS.HEADER' | translate: { count: comments?.length } }} {{'COMMENTS.HEADER' | translate: { count: comments?.length } }}
</div> </div>
<div *ngIf="!readOnly" class="adf-comments-input-container adf-comments-divider"> <div *ngIf="!readOnly" class="adf-comments-input-container adf-comments-divider">
<mat-form-field> <mat-form-field class="adf-comments-form-field" subscriptSizing="dynamic">
<mat-label>{{'COMMENTS.ADD' | translate}}</mat-label>
<textarea <textarea
matInput matInput
id="comment-input" id="comment-input"
[attr.aria-label]="'COMMENTS.ADD' | translate" [attr.aria-label]="'COMMENTS.ADD' | translate"
placeholder="{{'COMMENTS.ADD' | translate}}"
[(ngModel)]="message" [(ngModel)]="message"
(keydown.escape)="clearMessage($event)" (keydown.escape)="clearMessage($event)"
> >

38
lib/core/src/lib/comments/comments.component.scss
View File

@ -5,6 +5,24 @@ adf-comments {
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
.adf-comments-input-container {
width: 100%;
padding-bottom: 8px;
textarea {
resize: vertical;
}
#{$mat-form-field} {
padding-bottom: 12px;
width: 100%;
}
#{$mat-form-field-infix} {
padding-bottom: 0;
}
}
} }
.adf-comments-divider { .adf-comments-divider {
@ -15,24 +33,16 @@ adf-comments {
padding: 10px 0; padding: 10px 0;
font-size: var(--theme-body-1-font-size); font-size: var(--theme-body-1-font-size);
font-weight: 600; font-weight: 600;
margin: 0;
}
.adf-comments-input-container {
width: 100%;
padding: 8px 0;
textarea {
resize: vertical;
}
#{$mat-form-field} {
width: 100%;
}
} }
.adf-comments-input-actions { .adf-comments-input-actions {
padding-top: 4px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
#{$mat-list-item-unscoped-content} {
display: flex;
padding: 0 16px;
}
} }

6
lib/core/src/lib/info-drawer/info-drawer-layout.component.scss
View File

@ -24,6 +24,12 @@ $adf-info-drawer-icon-size-half: 24px !default;
opacity: 1; opacity: 1;
} }
#{$mat-tab-label}#{$mat-tab-label-active} {
& #{$mat-tab-label-text} {
color: inherit;
}
}
&-header { &-header {
padding: 8px 0 0 24px; padding: 8px 0 0 24px;
display: flex; display: flex;

57
lib/core/src/lib/info-drawer/info-drawer.component.scss
View File

@ -48,12 +48,7 @@
} }
} }
#{$mat-tab-ink-bar} {
height: 2px;
}
#{$mat-tab-body} { #{$mat-tab-body} {
padding: 10px;
overflow-y: hidden; overflow-y: hidden;
} }
@ -68,32 +63,42 @@
} }
} }
.adf-info-drawer-tab { .adf-info-drawer-tabs {
color: var(--adf-info-drawer-tab-default-color); #{$mat-tab-label-container} {
background-color: var(--adf-info-drawer-tab-default-background); border-bottom: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: var(--adf-info-drawer-tab-default-bottom-line); }
opacity: 1;
&--active { .adf-info-drawer-tab {
color: var(--adf-info-drawer-tab-active-unfocused-color); color: var(--adf-info-drawer-tab-default-color);
background-color: var(--adf-info-drawer-tab-active-unfocused-background); background-color: var(--adf-info-drawer-tab-default-background);
border-bottom: var(--adf-info-drawer-tab-active-unfocused-bottom-line); border-bottom: var(--adf-info-drawer-tab-default-bottom-line);
opacity: 1;
&:focus { &:has(span) {
color: var(--adf-info-drawer-tab-active-focused-color); height: 32px;
border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line); }
&--active {
color: var(--adf-info-drawer-tab-active-unfocused-color);
background-color: var(--adf-info-drawer-tab-active-unfocused-background);
border-bottom: 1px solid var(--adf-info-drawer-tab-active-unfocused-bottom-line);
&:focus {
color: var(--adf-info-drawer-tab-active-focused-color);
border-bottom: var(--adf-info-drawer-tab-active-focused-bottom-line);
} }
} }
&:hover:not([class*='--disabled'], [class*='--active']) { &:hover:not([class*='--disabled'], [class*='--active']) {
color: var(--adf-info-drawer-tab-hover-color); color: var(--adf-info-drawer-tab-hover-color);
background-color: var(--adf-info-drawer-tab-hover-background); background-color: var(--adf-info-drawer-tab-hover-background);
border-bottom: var(--adf-info-drawer-tab-hover-bottom-line); border-bottom: var(--adf-info-drawer-tab-hover-bottom-line);
} }
&--disabled { &--disabled {
color: var(--adf-info-drawer-tab-disabled-color); color: var(--adf-info-drawer-tab-disabled-color);
background-color: var(--adf-info-drawer-tab-disabled-background); background-color: var(--adf-info-drawer-tab-disabled-background);
border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line); border-bottom: var(--adf-info-drawer-tab-disabled-bottom-line);
}
} }
} }

5
lib/core/src/lib/styles/_mat-selectors.scss
View File

@ -8,6 +8,7 @@ $mat-tab-label: '.mat-mdc-tab';
$mat-tab-label-active: '.mdc-tab--active'; $mat-tab-label-active: '.mdc-tab--active';
$mat-tab-label-content: '.mdc-tab__content'; $mat-tab-label-content: '.mdc-tab__content';
$mat-tab-label-container: '.mat-mdc-tab-label-container'; $mat-tab-label-container: '.mat-mdc-tab-label-container';
$mat-expansion-panel-body: '.mat-expansion-panel-body';
$mat-tab-label-text: '.mdc-tab__text-label'; $mat-tab-label-text: '.mdc-tab__text-label';
$mat-tab-list: '.mat-mdc-tab-list'; $mat-tab-list: '.mat-mdc-tab-list';
$mat-tab-body: '.mat-mdc-tab-body'; $mat-tab-body: '.mat-mdc-tab-body';
@ -91,11 +92,13 @@ $mat-calendar-table-header: '.mat-calendar-table-header';
$mat-calendar-body-disabled: '.mat-calendar-body-disabled'; $mat-calendar-body-disabled: '.mat-calendar-body-disabled';
$mat-toolbar: '.mat-toolbar'; $mat-toolbar: '.mat-toolbar';
$mat-slide-toggle: '.mat-mdc-slide-toggle'; $mat-slide-toggle: '.mat-mdc-slide-toggle';
$mat-list-item-unscoped-content: '.mat-mdc-list-item-unscoped-content';
$mat-text-field--no-label: '.mdc-text-field--no-label';
$mat-form-field-infix: '.mat-mdc-form-field-infix';
$mat-checkbox-background: '.mdc-checkbox__background'; $mat-checkbox-background: '.mdc-checkbox__background';
$mat-dialog-content: '.mdc-dialog__content'; $mat-dialog-content: '.mdc-dialog__content';
$mat-floating-label: '.mdc-floating-label'; $mat-floating-label: '.mdc-floating-label';
$mat-floating-label-above: '.mdc-floating-label--float-above'; $mat-floating-label-above: '.mdc-floating-label--float-above';
$mat-form-field-infix: '.mat-mdc-form-field-infix';
$mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper'; $mat-select-arrow-wrapper: '.mat-mdc-select-arrow-wrapper';
$mat-dialog-title: '.mdc-dialog__title'; $mat-dialog-title: '.mdc-dialog__title';
$mat-expansion-panel-body: '.mat-expansion-panel-body'; $mat-expansion-panel-body: '.mat-expansion-panel-body';