mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-09-09 18:03:21 +00:00
[ACS-5551] minor changes
This commit is contained in:
+5
-1
@@ -25,7 +25,7 @@
|
||||
|
||||
.mat-expansion-panel:not([class*='mat-elevation-z']) {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--adf-metadata-property-panel-border-color);
|
||||
border: 1px solid var(--theme-metadata-property-panel-border-color);
|
||||
border-radius: 12px;
|
||||
margin: 24px;
|
||||
}
|
||||
@@ -45,6 +45,10 @@
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
}
|
||||
|
||||
.mat-content.mat-content-hide-toggle {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.adf-metadata-properties-panel-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
+3
-3
@@ -11,19 +11,19 @@
|
||||
float: right;
|
||||
}
|
||||
|
||||
&-property-label{
|
||||
&-property-label {
|
||||
color: var(--theme-metadata-property-panel-text-color);
|
||||
display: flex;
|
||||
padding: 6px 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
&-property-dateitem-edit-mode{
|
||||
&-property-dateitem-edit-mode {
|
||||
background-color: var(--theme-metadata-buttons-background-color);
|
||||
border-radius: 6px;
|
||||
padding-left: 12px;
|
||||
|
||||
.mat-select-value{
|
||||
.mat-select-value {
|
||||
color: var(--theme-metadata-property-panel-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
-1
@@ -1,5 +1,4 @@
|
||||
.adf {
|
||||
|
||||
&-property-field .mat-form-field-underline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -10,23 +10,39 @@
|
||||
.adf-property-value-padding-top {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: 6px;
|
||||
padding: 6px 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.adf-property-label-not-editable {
|
||||
color: var(--theme-metadata-property-panel-label-color) !important;
|
||||
color: var(--theme-metadata-property-panel-label-color);
|
||||
|
||||
.mat-tooltip-trigger {
|
||||
padding-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-property-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-element {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.mat-form-field-infix {
|
||||
display: flex;
|
||||
border-top-width: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mat-form-field-flex {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
padding-bottom: 0 ;
|
||||
}
|
||||
|
||||
.mat-form-field-label {
|
||||
padding: 6px 0;
|
||||
justify-content: center;
|
||||
@@ -57,6 +73,10 @@
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.mat-input-element.adf-property-label-not-editable {
|
||||
color: var(--theme-metadata-property-panel-label-color);
|
||||
}
|
||||
|
||||
.mat-select.adf-property-select-edit-mode {
|
||||
padding: 6px 0 6px 12px;
|
||||
margin-top: 0;
|
||||
@@ -64,22 +84,10 @@
|
||||
background-color: var(--theme-metadata-buttons-background-color);
|
||||
border-radius: 6px;
|
||||
|
||||
.mat-select-min-line{
|
||||
.mat-select-min-line {
|
||||
color: var(--theme-metadata-property-panel-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.mat-form-field-appearance-standard .mat-form-field-flex {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
.mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
@@ -1,8 +1,6 @@
|
||||
<div *ngIf="showHeader" class="adf-info-drawer-layout-header">
|
||||
<div class="adf-info-drawer-layout-header-icon">
|
||||
<ng-content select="[info-drawer-node-icon]"></ng-content>
|
||||
</div>
|
||||
<div class="adf-info-drawer-layout-header-title">
|
||||
<ng-content select="[info-drawer-node-icon]"></ng-content>
|
||||
<ng-content select="[info-drawer-title]"></ng-content>
|
||||
</div>
|
||||
<div class="adf-info-drawer-layout-header-buttons">
|
||||
|
||||
@@ -14,14 +14,14 @@ $adf-info-drawer-icon-size-half: 24px !default;
|
||||
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
background-color:var(--theme-card-background-color);
|
||||
background-color: var(--theme-card-background-color);
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.27);
|
||||
|
||||
& .mat-tab-label {
|
||||
height: 32px;
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
color: var(--theme-accent-color);
|
||||
text-transform: uppercase;
|
||||
opacity: 1;
|
||||
|
||||
&-active {
|
||||
@@ -30,13 +30,12 @@ $adf-info-drawer-icon-size-half: 24px !default;
|
||||
}
|
||||
|
||||
&-header {
|
||||
padding: 13px 0 0 23px;
|
||||
padding: 8px 0 0 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&-buttons {
|
||||
padding-right: 18px;
|
||||
|
||||
mat-icon {
|
||||
cursor: pointer;
|
||||
@@ -44,16 +43,16 @@ $adf-info-drawer-icon-size-half: 24px !default;
|
||||
}
|
||||
|
||||
&-title {
|
||||
width: 197px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
font-size: $adf-info-drawer-layout-title-font-size;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.5px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 0.15px;
|
||||
text-align: left;
|
||||
align-items: start;
|
||||
color: var(--adf-theme-foreground-text-color-054);
|
||||
|
||||
& > div {
|
||||
overflow: hidden;
|
||||
width: 220px;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--theme-metadata-property-panel-title-color);
|
||||
}
|
||||
|
||||
@@ -33,7 +33,6 @@ export class InfoDrawerLayoutComponent {
|
||||
/**
|
||||
* Directive selectors without adf- prefix will be deprecated on 3.0.0
|
||||
*/
|
||||
@Directive({ selector: '[info-drawer-node-icon], [info-drawer-node-icon]' }) export class InfoDrawerNodeIconDirective {}
|
||||
@Directive({ selector: '[adf-info-drawer-title], [info-drawer-title]' }) export class InfoDrawerTitleDirective {}
|
||||
@Directive({ selector: '[adf-info-drawer-buttons], [info-drawer-buttons]' }) export class InfoDrawerButtonsDirective {}
|
||||
@Directive({ selector: '[adf-info-drawer-content], [info-drawer-content]' }) export class InfoDrawerContentDirective {}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
.adf {
|
||||
&-info-drawer {
|
||||
|
||||
.adf-metadata-properties-panel{
|
||||
display:block;
|
||||
margin:0;
|
||||
.adf-metadata-properties-panel {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mat-tab-label {
|
||||
|
||||
@@ -87,7 +87,7 @@ describe('InfoDrawerComponent', () => {
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<adf-info-drawer [selectedIndex]="tabIndex" nodeIcon="nodeIcon" title="Fake Title Custom">
|
||||
<adf-info-drawer [selectedIndex]="tabIndex" [nodeIcon]="nodeIcon" title="Fake Title Custom">
|
||||
<adf-info-drawer-tab label="Tab1">
|
||||
</adf-info-drawer-tab>
|
||||
<adf-info-drawer-tab label="Tab2">
|
||||
@@ -140,7 +140,7 @@ describe('Custom InfoDrawer', () => {
|
||||
fixture.detectChanges();
|
||||
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
|
||||
expect(tab.length).toBe(1);
|
||||
expect(tab[0].nativeElement.innerText).toContain('TAB1');
|
||||
expect(tab[0].nativeElement.innerText).toContain('Tab1');
|
||||
});
|
||||
|
||||
it('should select the tab 2 (index 1)', () => {
|
||||
@@ -148,14 +148,14 @@ describe('Custom InfoDrawer', () => {
|
||||
fixture.detectChanges();
|
||||
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
|
||||
expect(tab.length).toBe(1);
|
||||
expect(tab[0].nativeElement.innerText).toContain('TAB2');
|
||||
expect(tab[0].nativeElement.innerText).toContain('Tab2');
|
||||
});
|
||||
|
||||
it('should render a tab with icon', () => {
|
||||
component.tabIndex = 2;
|
||||
fixture.detectChanges();
|
||||
const tab: any = fixture.debugElement.queryAll(By.css('.mat-tab-label-active'));
|
||||
expect(tab[0].nativeElement.innerText).not.toBe('TAB3');
|
||||
expect(tab[0].nativeElement.innerText).not.toBe('Tab3');
|
||||
expect(tab[0].nativeElement.innerText).toContain('tab-icon');
|
||||
});
|
||||
|
||||
@@ -171,7 +171,7 @@ describe('Custom InfoDrawer', () => {
|
||||
|
||||
@Component({
|
||||
template: `
|
||||
<adf-info-drawer [showHeader]="showHeader" nodeIcon="nodeIcon" title="Fake Visibility Info Drawer Title">
|
||||
<adf-info-drawer [showHeader]="showHeader" [nodeIcon]="nodeIcon" title="Fake Visibility Info Drawer Title">
|
||||
</adf-info-drawer>
|
||||
`
|
||||
})
|
||||
|
||||
@@ -17,7 +17,6 @@
|
||||
|
||||
import { Component, ContentChildren, EventEmitter, HostListener, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { MatTabChangeEvent } from '@angular/material/tabs';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-info-drawer-tab',
|
||||
template: '<ng-template><ng-content></ng-content></ng-template>',
|
||||
@@ -44,7 +43,6 @@ export class InfoDrawerTabComponent {
|
||||
host: { class: 'adf-info-drawer' }
|
||||
})
|
||||
export class InfoDrawerComponent {
|
||||
|
||||
/** The title of the info drawer (string or translation key). */
|
||||
@Input()
|
||||
title: string|null = null;
|
||||
|
||||
Reference in New Issue
Block a user