[ADF-5563][ADF-5565][ADF-5566]Removed !important from 'task-form','cloud-form-demo' and 'add-permission-panel' component (#9187)

* Removed important

* ADF-5563

* ADF-5566

* refactored

* Refactored

* Review comments resolved

* [ci:force]

* lint issue fixed

* lint issues fixed

* Refactored

* extra space  removed

* linting resolved

* checkbox issue fixed

* lint issue fixed

* lint issue fixed
This commit is contained in:
pkunduGL 2024-01-03 16:32:35 +05:30 committed by GitHub
parent d4d731b275
commit 4ff46642fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 92 additions and 88 deletions

View File

@ -27,7 +27,7 @@
} }
.app-form-config-editor { .app-form-config-editor {
height: 500px !important; height: 500px;
} }
.app-form-editor-buttons { .app-form-editor-buttons {

View File

@ -1,75 +1,79 @@
<mat-form-field floatPlaceholder="never" <mat-form-field floatPlaceholder="never" class="adf-permission-search-input">
class="adf-permission-search-input"> <input
<input matInput matInput
id="searchInput" id="searchInput"
[formControl]="searchInput" [formControl]="searchInput"
type="text" type="text"
title="{{'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate}}" title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
placeholder="{{'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate}}" placeholder="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
[value]="searchedWord"> [value]="searchedWord"
/>
<mat-icon *ngIf="searchedWord?.length > 0" <mat-icon
class="adf-permission-search-icon" *ngIf="searchedWord?.length > 0"
data-automation-id="adf-permission-clear-input" class="adf-permission-search-icon"
id="adf-permission-clear-input" data-automation-id="adf-permission-clear-input"
matSuffix id="adf-permission-clear-input"
(click)="clearSearch()">clear matSuffix
(click)="clearSearch()"
>clear
</mat-icon> </mat-icon>
<mat-icon *ngIf="searchedWord?.length === 0" <mat-icon *ngIf="searchedWord?.length === 0" class="adf-permission-search-icon" data-automation-id="adf-permission-search-icon" matSuffix
class="adf-permission-search-icon" >search
data-automation-id="adf-permission-search-icon"
matSuffix>search
</mat-icon> </mat-icon>
</mat-form-field> </mat-form-field>
<div *ngIf="searchedWord?.length === 0" <div *ngIf="searchedWord?.length === 0" class="adf-permission-start-message" id="adf-add-permission-type-search">
class="adf-permission-start-message" <span>{{ 'PERMISSION_MANAGER.ADD-PERMISSION.TYPE-MESSAGE' | translate }}</span>
id="adf-add-permission-type-search">
<span>{{'PERMISSION_MANAGER.ADD-PERMISSION.TYPE-MESSAGE' | translate}}</span>
</div> </div>
<adf-search #search <adf-search
[searchTerm]="searchedWord" #search
id="adf-add-permission-authority-results" [searchTerm]="searchedWord"
class="adf-permission-result-list" id="adf-add-permission-authority-results"
[class.adf-permission-result-list-search]="searchedWord.length === 0"> class="adf-permission-result-list"
[class.adf-permission-result-list-search]="searchedWord.length === 0"
>
<ng-template let-data> <ng-template let-data>
<mat-selection-list class="adf-permission-result-list-elements" <mat-selection-list
title="{{'PERMISSION_MANAGER.ADD-PERMISSION.USER-GROUP-LIST' | translate}}" class="adf-permission-result-list-elements"
(selectionChange)="onSelectionChange()"> title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.USER-GROUP-LIST' | translate }}"
<mat-list-option id="adf-add-permission-group-everyone" (selectionChange)="onSelectionChange()"
class="adf-list-option-item" >
#eveyone <mat-list-option id="adf-add-permission-group-everyone" #eveyone [disableRipple]="true" [value]="EVERYONE">
[disableRipple]="true" <div class="adf-list-option-item">
[value]="EVERYONE"> <adf-user-icon-column [node]="EVERYONE" id="add-group-icon" [selected]="eveyone.selected"></adf-user-icon-column>
<adf-user-icon-column [node]="EVERYONE" id="add-group-icon" [selected]="eveyone.selected"></adf-user-icon-column> <p class="adf-result-name">
<p class="adf-result-name"> {{ 'PERMISSION_MANAGER.ADD-PERMISSION.EVERYONE' | translate }}
{{'PERMISSION_MANAGER.ADD-PERMISSION.EVERYONE' | translate}} </p>
</p> </div>
</mat-list-option> </mat-list-option>
<mat-list-option *ngFor="let item of data?.list?.entries; let idx = index" <mat-list-option
[disableRipple]="true" *ngFor="let item of data?.list?.entries; let idx = index"
[value]="item" [disableRipple]="true"
class="adf-list-option-item" [value]="item"
id="result_option_{{idx}}" id="result_option_{{ idx }}"
#option> #option
<adf-user-icon-column [node]="item" [selected]="option.selected"></adf-user-icon-column> >
<p class="adf-result-name"> <div class="adf-list-option-item">
<ng-container *ngIf="item.entry?.properties['cm:authorityDisplayName']; else authorityName"> <adf-user-icon-column [node]="item" [selected]="option.selected"></adf-user-icon-column>
{{item.entry.properties['cm:authorityDisplayName']}} <p class="adf-result-name">
</ng-container> <ng-container *ngIf="item.entry?.properties['cm:authorityDisplayName']; else authorityName">
<ng-template #authorityName> {{ item.entry.properties['cm:authorityDisplayName'] }}
<ng-container *ngIf="item.entry?.properties['cm:authorityName']; else owner">
{{item.entry.properties['cm:authorityName']}}
</ng-container> </ng-container>
</ng-template> <ng-template #authorityName>
<ng-template #owner> <ng-container *ngIf="item.entry?.properties['cm:authorityName']; else owner">
{{item.entry?.properties['cm:firstName'] ? item.entry?.properties['cm:firstName'] : '' }} {{ item.entry.properties['cm:authorityName'] }}
{{item.entry?.properties['cm:lastName'] ? item.entry?.properties['cm:lastName']: ''}} </ng-container>
</ng-template> </ng-template>
</p> <ng-template #owner>
{{ item.entry?.properties['cm:firstName'] ? item.entry?.properties['cm:firstName'] : '' }}
{{ item.entry?.properties['cm:lastName'] ? item.entry?.properties['cm:lastName'] : '' }}
</ng-template>
</p>
</div>
</mat-list-option> </mat-list-option>
</mat-selection-list> </mat-selection-list>
</ng-template> </ng-template>

View File

@ -7,6 +7,10 @@ $search-result-height: calc(100% - 75px);
overflow: auto; overflow: auto;
border: 2px solid var(--adf-theme-foreground-text-color-007); border: 2px solid var(--adf-theme-foreground-text-color-007);
mat-pseudo-checkbox {
display: none;
}
&-elements { &-elements {
width: 100%; width: 100%;
} }
@ -16,6 +20,16 @@ $search-result-height: calc(100% - 75px);
} }
} }
&-list-option-item {
display: flex;
flex-direction: row;
align-items: center;
.adf-result-name {
padding-left: 16px;
}
}
&-permission-start-message { &-permission-start-message {
display: flex; display: flex;
align-items: center; align-items: center;
@ -47,22 +61,6 @@ $search-result-height: calc(100% - 75px);
} }
} }
&-list-option-item {
mat-pseudo-checkbox {
display: none;
}
.mat-list-text {
display: flex;
flex-direction: row !important;
align-items: center;
.adf-result-name {
padding-left: 16px !important;
}
}
}
&-permission-action { &-permission-action {
&[disabled] { &[disabled] {
opacity: 0.6; opacity: 0.6;

View File

@ -59,15 +59,17 @@
</adf-empty-content> </adf-empty-content>
</ng-template> </ng-template>
</mat-card-content> </mat-card-content>
<mat-card-actions class="adf-task-form-actions"> <mat-card-actions>
<ng-template [ngTemplateOutlet]="taskFormButtons"></ng-template> <div class="adf-task-form-actions">
<button mat-button <ng-template [ngTemplateOutlet]="taskFormButtons"></ng-template>
*ngIf="!isCompletedTask()" id="adf-no-form-complete-button" <button mat-button
color="primary" *ngIf="!isCompletedTask()" id="adf-no-form-complete-button"
[disabled]="canCompleteNoFormTask()" color="primary"
(click)="onCompleteTask()"> [disabled]="canCompleteNoFormTask()"
{{'ADF_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate}} (click)="onCompleteTask()">
</button> {{'ADF_TASK_FORM.EMPTY_FORM.BUTTONS.COMPLETE' | translate}}
</button>
</div>
</mat-card-actions> </mat-card-actions>
</mat-card> </mat-card>
</ng-template> </ng-template>

View File

@ -5,8 +5,8 @@
&-actions { &-actions {
float: right; float: right;
padding-bottom: 25px !important; padding-right: 25px;
padding-right: 25px !important; padding-bottom: 25px;
& .mat-button { & .mat-button {
height: 36px; height: 36px;