[ACS-5551] minor changes

This commit is contained in:
Anukriti Singh
2023-10-13 16:29:16 +05:30
parent 4500e25062
commit 4ed5d39083
10 changed files with 49 additions and 44 deletions
@@ -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;
@@ -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,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;