[ADF-3746] Add style lint rules (#3975)

* add stylelint

* fix style first part

*  fix style second part

*  fix style third part

*  fix style fourth part

* Fix e2e tests first part

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* fix insights

* fix style abotu component

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* [ADF-3746] Rebase branch

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* Fix e2e tests second part

* Rebase branch

* Fix list error

* fix new style added

* tslint fix

* [ADF-3746] Fix scss errors on Process Filters Cloud component
This commit is contained in:
davidcanonieto
2018-11-28 14:43:18 +00:00
committed by Eugenio Romano
parent 5fc03cf26b
commit 1a21f234b6
234 changed files with 2328 additions and 1058 deletions

View File

@@ -24,7 +24,7 @@
<h1>{{getAppName(app) | async}}</h1>
</div>
<mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
<div class="line-clamp">{{app.description}}</div>
<div class="adf-line-clamp">{{app.description}}</div>
</mat-card-subtitle>
<mat-card-actions class="adf-app-listgrid-item-card-actions">

View File

@@ -50,12 +50,16 @@
}
outline: none;
transition: transform 280ms cubic-bezier(.4,0,.2,1), box-shadow 280ms cubic-bezier(.4,0,.2,1);
transition:
transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
min-height: 200px;
padding: 0 !important;
&:hover {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12), 0 5px 5px -3px rgba(0, 0, 0, .2);
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.2);
cursor: pointer;
transform: scale(1.015);
}
@@ -103,14 +107,14 @@
z-index: 9999;
padding: 16px;
.line-clamp {
@include line-clamp(1.25, 3);
.adf-line-clamp {
@include adf-line-clamp(1.25, 3);
}
}
&-actions {
padding: 0 16px 16px 16px !important;
border-top: 1px solid rgba(0,0,0,.1);
padding: 0 16px 16px !important;
border-top: 1px solid rgba(0, 0, 0, 0.1);
min-height: 48px;
box-sizing: border-box;
@@ -119,8 +123,8 @@
}
&.mat-card-actions {
margin-left: 0px;
margin-right: 0px;
margin-left: 0;
margin-right: 0;
&:last-child {
margin-bottom: 0 !important;

View File

@@ -1,5 +1,5 @@
.adf-create-attachment {
display: inline-block;
line-height: 0px;
line-height: 0;
vertical-align: middle;
}

View File

@@ -20,7 +20,7 @@
<data-columns>
<data-column key="icon" type="image" srTitle="ADF_PROCESS_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column>
<data-column key="name" type="text" title="{{'ADF_PROCESS_LIST.PROPERTIES.NAME' | translate}}" class="full-width ellipsis-cell" [sortable]="true"></data-column>
<data-column key="name" type="text" title="{{'ADF_PROCESS_LIST.PROPERTIES.NAME' | translate}}" class="adf-full-width adf-ellipsis-cell" [sortable]="true"></data-column>
<data-column key="created" type="date" format="shortDate" title="{{'ADF_PROCESS_LIST.PROPERTIES.CREATED' | translate}}"></data-column>
</data-columns>

View File

@@ -1,6 +1,6 @@
@mixin adf-process-attachment-list-theme($theme) {
.data-cell {
.adf-data-cell {
cursor: pointer !important;
}

View File

@@ -19,7 +19,7 @@
<data-columns>
<data-column key="icon" type="image" srTitle="ADF_TASK_LIST.PROPERTIES.THUMBNAIL" [sortable]="false"></data-column>
<data-column key="name" type="text" title="ADF_TASK_LIST.PROPERTIES.NAME" class="full-width ellipsis-cell" [sortable]="true"></data-column>
<data-column key="name" type="text" title="ADF_TASK_LIST.PROPERTIES.NAME" class="adf-full-width adf-ellipsis-cell" [sortable]="true"></data-column>
<data-column key="created" type="date" format="shortDate" title="ADF_TASK_LIST.PROPERTIES.CREATED"></data-column>
</data-columns>
<loading-content-template>

View File

@@ -1,7 +1,7 @@
@mixin adf-task-attachment-list-theme($theme) {
adf-datatable .data-cell {
adf-datatable .adf-data-cell {
cursor: pointer !important;
}

View File

@@ -29,7 +29,7 @@
<button *ngIf="isLoggedIn()"
mat-button
[disabled]="!chosenNode"
class="choose-action"
class="adf-choose-action"
(click)="onClick($event)"
data-automation-id="attach-file-dialog-actions-choose">{{ buttonActionName | translate }}
</button>

View File

@@ -17,7 +17,7 @@
font-weight: normal;
}
.choose-action {
.adf-choose-action {
&[disabled] {
opacity: 0.6;

View File

@@ -31,11 +31,11 @@
z-index: -1;
}
&-attach-widget__image-logo{
&-attach-widget__image-logo {
padding-left: 5px;
}
&-attach-widget-repo-button{
&-attach-widget-repo-button {
padding-left: 10px;
.mat-button-wrapper {
@@ -66,7 +66,7 @@
&-attach-files-row {
.mat-line {
margin-bottom: 0px;
margin-bottom: 0;
}
}

View File

@@ -27,7 +27,7 @@
&-attach-folder-files-row {
padding-left: 8px;
.mat-line {
margin-bottom: 0px;
margin-bottom: 0;
}
}

View File

@@ -1,4 +1,4 @@
<mat-form-field class="search-text-container">
<mat-form-field class="adf-search-text-container">
<input
matInput
placeholder="{{ searchPlaceholder }}"
@@ -9,22 +9,22 @@
data-automation-id="adf-people-search-input">
</mat-form-field>
<ng-container *ngIf="users$ | async; let users">
<div class="search-list-container" id="search-people-list" *ngIf="users.length > 0">
<div class="adf-search-list-container" id="search-people-list" *ngIf="users.length > 0">
<adf-people-list [users]="users" (clickRow)="onRowClick($event)">
<data-columns>
<data-column key="firstName">
<ng-template let-entry="$implicit">
<div *ngIf="!entry.row.obj.pictureId" class="people-pic">
<div *ngIf="!entry.row.obj.pictureId" class="adf-people-pic">
{{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}</div>
<div>
<img *ngIf="entry.row.obj.pictureId" class="people-img"
<img *ngIf="entry.row.obj.pictureId" class="adf-people-img"
[src]="peopleProcessService.getUserImage(entry.row.obj)"/>
</div>
</ng-template>
</data-column>
<data-column key="email" class="full-width">
<data-column key="email" class="adf-full-width">
<ng-template let-entry="$implicit">
<div class="people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
<div class="adf-people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
</ng-template>
</data-column>
</data-columns>

View File

@@ -6,7 +6,7 @@
.adf-people-search-field {
width: 100%;
.search-text-container {
.adf-search-text-container {
width: 100%;
input {
@@ -14,7 +14,7 @@
}
}
.search-list-container {
.adf-search-list-container {
max-height: 152px;
width: 100%;
overflow-y: auto;
@@ -24,7 +24,7 @@
display: none;
}
.people-pic {
.adf-people-pic {
background: mat-color($primary);
width: 30px;
padding: 10px 5px;
@@ -37,7 +37,7 @@
vertical-align: text-bottom;
}
.people-img {
.adf-people-img {
border-radius: 90%;
width: 40px;
height: 40px;

View File

@@ -1,4 +1,4 @@
<div class="search-text-header">
<div class="adf-search-text-header">
<ng-content select="[people-search-title]"></ng-content>
</div>

View File

@@ -6,26 +6,26 @@
.adf-people-search {
width: 100%;
.activiti-label {
.adf-activiti-label {
font-weight: bolder;
}
.fix-element-user-list {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
.adf-fix-element-user-list {
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.search-text-header {
.adf-search-text-header {
font-weight: bold;
opacity: 0.54;
}
.search-list-action-container {
.adf-search-list-action-container {
border-top: 1px solid #eee;
text-align: right;
padding: 5px 0px;
padding: 5px 0;
margin-top: 5px;
> button {
opacity: 0.54;

View File

@@ -1,17 +1,17 @@
<mat-card class="assignment-top-container">
<div mat-card-content class="assignment-top-container-content">
<mat-card class="adf-assignment-top-container">
<div mat-card-content class="adf-assignment-top-container-content">
<div class="assignment-header">
<div *ngIf="hasPeople()" class="assigment-count" id="people-title">
<div *ngIf="hasPeople()" class="adf-assignment-count" id="people-title">
{{ 'ADF_TASK_LIST.DETAILS.LABELS.PEOPLE' | translate }} {{ ' (' + people.length + ')' }}
</div>
<div *ngIf="!hasPeople()" class="assigment-count" id="no-people-label">
<div *ngIf="!hasPeople()" class="adf-assignment-count" id="no-people-label">
{{ 'ADF_TASK_LIST.DETAILS.PEOPLE.NONE' | translate }}
</div>
<div *ngIf="isEditMode()" class="add-people" (click)="onAddAssignment()">
<div *ngIf="isEditMode()" class="adf-add-people" (click)="onAddAssignment()">
<mat-icon class="adf-add-person-icon">person_add</mat-icon>
</div>
</div>
<div class="assignment-container" *ngIf="showAssignment">
<div class="adf-assignment-container" *ngIf="showAssignment">
<adf-people-search
#peopleSearch
(searchPeople)="searchUser($event)"
@@ -22,7 +22,7 @@
<ng-container people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_USER' | translate }}</ng-container>
</adf-people-search>
</div>
<div class="assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
<div class="adf-assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
<adf-people-list
[users]="people"
[actions]="isEditMode()"
@@ -33,16 +33,16 @@
<div *ngIf="!entry.row.obj.pictureId" class="adf-people-search-people-pic">
{{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}</div>
<div>
<img *ngIf="entry.row.obj.pictureId" class="people-img"
<img *ngIf="entry.row.obj.pictureId" class="adf-people-img"
[src]="peopleProcessService.getUserImage(entry.row.obj)"/>
</div>
</ng-template>
</data-column>
<data-column key="email" class="full-width">
<data-column key="email" class="adf-full-width">
<ng-template let-entry="$implicit">
<div class="people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
<div class="people-email">{{ entry.row.obj.email }}</div>
<div class="people-edit-label">can edit</div>
<div class="adf-people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
<div class="adf-people-email">{{ entry.row.obj.email }}</div>
<div class="adf-people-edit-label">can edit</div>
</ng-template>
</data-column>
</data-columns>

View File

@@ -3,19 +3,19 @@
$foreground: map-get($theme, foreground);
$header-border: 1px solid mat-color($foreground, divider);
.assignment-header {
.adf-assignment-header {
border-bottom: $header-border;
padding: 6px 20px;
}
.assigment-count {
.adf-assignment-count {
float: left;
padding: 10px 0px;
padding: 10px 0;
font-weight: bolder;
opacity: 0.54;
}
.add-people {
.adf-add-people {
float: right;
padding: 8px;
height: 26px;
@@ -26,16 +26,16 @@
}
}
.assignment-top-container.mat-card {
.adf-assignment-top-container.mat-card {
border-top: $header-border;
margin: 0px;
padding: 0px;
margin: 0;
padding: 0;
display: flex;
flex-flow: row wrap;
align-items: stretch;
}
.assignment-top-container-content {
.adf-assignment-top-container-content {
display: flex;
flex-flow: column;
align-items: stretch;
@@ -43,14 +43,14 @@
max-width: 100%;
}
.assignment-container {
.adf-assignment-container {
padding: 10px 20px;
border-bottom: $header-border;
max-width: 100%;
}
.assignment-list-container {
padding: 0px;
.adf-assignment-list-container {
padding: 0;
}
@@ -60,17 +60,17 @@
display: none;
}
.adf-data-table .adf-data-table-cell .cell-container {
.adf-data-table .adf-data-table-cell .adf-cell-container {
flex-direction: column;
align-items: left;
}
.people-email {
.adf-people-email {
opacity: 0.54;
}
}
.people-img {
.adf-people-img {
border-radius: 90%;
width: 40px;
height: 40px;

View File

@@ -6,17 +6,17 @@
width: 100%;
}
.activiti-label {
.adf-activiti-label {
font-weight: bolder;
vertical-align: top;
}
.activiti-label + .icon {
.adf-activiti-label + .adf-icon {
position: relative;
top: -2px;
}
.list-wrap {
.adf-list-wrap {
word-wrap: break-word;
word-break: break-all;
-moz-hyphens: auto;
@@ -25,7 +25,7 @@
hyphens: auto;
}
.hide-long-names {
.adf-hide-long-names {
overflow: auto;
}

View File

@@ -1,7 +1,7 @@
<div class="menu-container">
<mat-list class="adf-menu-list">
<mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
class="adf-filters__entry" [class.active]="currentFilter === filter">
class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
<mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
<span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
</mat-list-item>

View File

@@ -7,12 +7,13 @@
cursor: pointer;
font-size: 14px!important;
font-weight: bold;
opacity: .54;
opacity: 0.54;
padding-left: 30px;
.mat-list-item-content {
height: 34px;
}
&.active, &:hover {
&.adf-active, &:hover {
color: mat-color($primary);
opacity: 1;
}
@@ -20,7 +21,7 @@
&-filters__entry-icon {
padding-right: 12px !important;
padding-left: 0px !important;
padding-left: 0 !important;
}
&-menu-list {

View File

@@ -30,7 +30,7 @@
</div>
<div *ngIf="hasStartFormDefined()">
<span class="activiti-label">{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.START_FORM'|translate }}</span>
<span class="adf-activiti-label">{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.START_FORM'|translate }}</span>
<!--IF START TASK COMPLETED -->
<div class="menu-container">

View File

@@ -458,9 +458,9 @@ describe('ProcessInstanceListComponent', () => {
template: `
<adf-process-instance-list #processlistComponentInstance>
<data-columns>
<data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="full-width name-column"></data-column>
<data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.END_DATE" class="hidden"></data-column>
<data-column key="startedBy" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="desktop-only dw-dt-col-3 ellipsis-cell">
<data-column key="name" title="ADF_PROCESS_LIST.PROPERTIES.NAME" class="adf-full-width adf-name-column"></data-column>
<data-column key="created" title="ADF_PROCESS_LIST.PROPERTIES.END_DATE" class="adf-hidden"></data-column>
<data-column key="startedBy" title="ADF_PROCESS_LIST.PROPERTIES.CREATED" class="adf-desktop-only dw-dt-col-3 adf-ellipsis-cell">
<ng-template let-entry="$implicit">
<div>{{entry.row.obj.startedBy | fullName}}</div>
</ng-template>

View File

@@ -12,7 +12,7 @@
}
mat-select {
width: 100%;
padding: 16px 0px 0px 0px;
padding: 16px 0 0;
}
mat-card-actions {
text-align: right;
@@ -37,7 +37,7 @@
&-start-form-container {
.mat-card {
box-shadow: none !important;
padding: 0px !important;
padding: 0 !important;
}
}
&-start-form-actions {

View File

@@ -1,6 +1,6 @@
<div class="adf-checklist-control">
<mat-chip-list data-automation-id="checklist-label">
<span class="activiti-label">{{ 'ADF_TASK_LIST.DETAILS.LABELS.CHECKLIST' | translate }}</span>
<span class="adf-activiti-label">{{ 'ADF_TASK_LIST.DETAILS.LABELS.CHECKLIST' | translate }}</span>
<mat-chip class="adf-process-badge" color="accent" selected="true">{{checklist?.length}}</mat-chip>
</mat-chip-list>
@@ -22,7 +22,7 @@
</mat-chip-list>
</div>
<div *ngIf="checklist?.length === 0" id="checklist-none-message">
<div *ngIf="checklist?.length === 0" id="checklist-none-message" class="adf-checklist-none-message">
{{ 'ADF_TASK_LIST.DETAILS.CHECKLIST.NONE' | translate }}
</div>

View File

@@ -2,7 +2,7 @@
width: 100%;
}
.activiti-label {
.adf-activiti-label {
font-weight: bolder;
}
@@ -20,11 +20,11 @@
outline: none;
}
.adf-checklist-menu-container{
.adf-checklist-menu-container {
margin-top: 10px;
}
#checklist-none-message {
.adf-checklist-none-message {
margin-top: 10px;
}
@@ -32,7 +32,7 @@
display: flex;
justify-content: space-between;
.activiti-label {
.adfactiviti-label {
margin-top: 6px;
margin-right: 10px;
}

View File

@@ -67,7 +67,10 @@
</div>
<div class="adf-grid-column adf-grid-half-width">
<people-widget (peopleSelected)="getAssigneeId($event)" [field]="field"></people-widget>
<people-widget
(peopleSelected)="getAssigneeId($event)"
[field]="field"
class="adf-people-widget-content"></people-widget>
</div>
</div>
</div>

View File

@@ -71,7 +71,7 @@
}
}
#people-widget-content {
.adf-people-widget-content {
.mat-form-field {
width: 100%;
}
@@ -146,7 +146,7 @@
.adf-label {
color: mat-color($warn);
&:after {
&::after {
background-color: mat-color($warn);
}
}

View File

@@ -10,7 +10,7 @@
<div *ngIf="taskDetails" class="adf-task-details">
<div *ngIf="showHeader" class="adf-task-details-header">
<h2 class="activiti-task-details__header">
<h2 class="adf-activiti-task-details__header">
<span>{{taskDetails.name || 'No name'}}</span>
</h2>
</div>
@@ -82,7 +82,7 @@
<div class="adf-task-details-core-sidebar">
<adf-info-drawer *ngIf="showHeaderContent" title="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TITLE' | translate }}" id="adf-task-details-core-sidebar-drawer" class="adf-task-details-core-sidebar-drawer">
<adf-info-drawer-tab label="{{ 'ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_DETAILS_TITLE' | translate }}">
<div class="assignment-container" *ngIf="showAssignee">
<div class="adf-assignment-container" *ngIf="showAssignee">
<adf-people-search
(searchPeople)="searchUser($event)"
(success)="assignTaskToUser($event)"

View File

@@ -2,18 +2,18 @@
width: 100%;
}
.error-dialog h3 {
.adf-error-dialog h3 {
margin: 16px 0;
}
.activiti-task-details__header {
.adf-activiti-task-details__header {
align-self: flex-end;
display: flex;
font-size: 24px;
font-weight: 300;
line-height: normal;
overflow: hidden;
margin: 8px 0 16px 0;
margin: 8px 0 16px;
cursor: pointer;
user-select: none;
-moz-user-select: none;
@@ -21,16 +21,17 @@
-ms-user-select: none;
}
.activiti-task-details__action-button {
.adf-activiti-task-details__action-button {
text-transform: uppercase;
}
.assignment-container {
.adf-assignment-container {
padding: 10px 20px;
width: auto;
}
adf-task-header.assign-edit-view ::ng-deep adf-card-view ::ng-deep .adf-property[data-automation-id="header-assignee"] {
adf-task-header.adf-assign-edit-view ::ng-deep adf-card-view ::ng-deep
.adf-property[data-automation-id='header-assignee'] {
display: none;
}
@@ -63,7 +64,7 @@ adf-task-header.assign-edit-view ::ng-deep adf-card-view ::ng-deep .adf-property
&-sidebar {
&-drawer {
@media screen and (max-width: 1279px) {
margin-left: 0px;
margin-left: 0;
}
}

View File

@@ -1,7 +1,7 @@
<div class="menu-container">
<mat-list class="adf-menu-list">
<mat-list-item (click)="selectFilterAndEmit(filter)" *ngFor="let filter of filters"
class="adf-filters__entry" [class.active]="currentFilter === filter">
class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
<mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
<span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
</mat-list-item>

View File

@@ -7,7 +7,8 @@
cursor: pointer;
font-size: 14px!important;
font-weight: bold;
opacity: .54;
opacity: 0.54;
padding-left: 30px;
.mat-list-item-content {
height: 34px;
@@ -16,11 +17,11 @@
&-filters__entry-icon {
padding-right: 12px !important;
padding-left: 0px !important;
padding-left: 0 !important;
}
&-filters__entry {
&.active, &:hover {
&.adf-active, &:hover {
color: mat-color($primary);
opacity: 1;
}

View File

@@ -27,13 +27,13 @@
font-size: mat-font-size($config, display-1);
line-height: 36px;
letter-spacing: -1.3px;
opacity: .54;
opacity: 0.54;
margin: auto;
width: fit-content !important;
}
&-no-form-submessage {
font-size: mat-font-size($config, subheading-2);
opacity: .54;
opacity: 0.54;
margin: auto;
width: fit-content !important;
}