inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

38
lib/core/datatable/components/datatable/datatable.component.html
View File

@@ -1,13 +1,13 @@
<div
*ngIf="data" class="full-width"
*ngIf="data" class="adf-full-width"
[class.adf-data-table-card]="display === 'gallery'"
[class.adf-data-table]="display === 'list'"
[class.adf-data-table--empty]="isEmpty()">
<div *ngIf="isHeaderVisible()" class="adf-datatable-header">
<div class="adf-datatable-row" *ngIf="display === 'list'">
<!-- Actions (left) -->
<div *ngIf="actions && actionsPosition === 'left'" class="actions-column adf-datatable-table-cell-header">
<span class="sr-only">Actions</span>
<div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-table-cell-header">
<span class="adf-sr-only">Actions</span>
</div>
<!-- Columns -->
<div *ngIf="multiselect" class="adf-datatable-table-cell-header">
@@ -15,7 +15,7 @@
</div>
<div class="adf-data-table-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-table-cell-header"
*ngFor="let col of data.getColumns()"
[class.sortable]="col.sortable"
[class.adf-sortable]="col.sortable"
[attr.data-automation-id]="'auto_id_' + col.key"
[class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')"
[class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')"
@@ -24,12 +24,12 @@
role="button"
tabindex="0"
title="{{ col.title | translate }}">
<span *ngIf="col.srTitle" class="sr-only">{{ col.srTitle | translate }}</span>
<span *ngIf="col.srTitle" class="adf-sr-only">{{ col.srTitle | translate }}</span>
<span *ngIf="col.title">{{ col.title | translate}}</span>
</div>
<!-- Actions (right) -->
<div *ngIf="actions && actionsPosition === 'right'" class="actions-column adf-datatable-table-cell-header">
<span class="sr-only">Actions</span>
<div *ngIf="actions && actionsPosition === 'right'" class="adf-actions-column adf-datatable-table-cell-header">
<span class="adf-sr-only">Actions</span>
</div>
</div>
<mat-form-field *ngIf="display === 'gallery'">
@@ -50,7 +50,7 @@
<div *ngFor="let row of data.getRows(); let idx = index"
class="adf-datatable-row"
role="button"
[class.is-selected]="row.isSelected"
[class.adf-is-selected]="row.isSelected"
[adf-upload]="allowDropFiles && rowAllowsDrop(row)" [adf-upload-data]="row"
[ngStyle]="rowStyle"
[ngClass]="getRowStyle(row)"
@@ -89,9 +89,9 @@
(keydown.enter)="onEnterKeyPressed(row, $event)"
[context-menu]="getContextMenuActions(row, col)"
[context-menu-enabled]="contextMenu">
<div *ngIf="!col.template" class="cell-container">
<div *ngIf="!col.template" class="adf-cell-container">
<ng-container [ngSwitch]="col.type">
<div *ngSwitchCase="'image'" class="cell-value">
<div *ngSwitchCase="'image'" class="adf-cell-value">
<mat-icon *ngIf="isIconValue(row, col); else no_iconvalue">{{ asIconValue(row, col) }}
</mat-icon>
<ng-template #no_iconvalue>
@@ -106,11 +106,11 @@
</ng-template>
</ng-template>
</div>
<div *ngSwitchCase="'icon'" class="cell-value">
<span class="sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
<div *ngSwitchCase="'icon'" class="adf-cell-value">
<span class="adf-sr-only">{{ iconAltTextKey(data.getValue(row, col)) | translate }}</span>
<mat-icon>{{ data.getValue(row, col) }}</mat-icon>
</div>
<div *ngSwitchCase="'date'" class="cell-value"
<div *ngSwitchCase="'date'" class="adf-cell-value"
[attr.data-automation-id]="'date_' + (data.getValue(row, col) | date: 'medium') ">
<adf-date-cell
[data]="data"
@@ -119,7 +119,7 @@
[tooltip]="getCellTooltip(row, col)">
</adf-date-cell>
</div>
<div *ngSwitchCase="'location'" class="cell-value"
<div *ngSwitchCase="'location'" class="adf-cell-value"
[attr.data-automation-id]="'location' + data.getValue(row, col)">
<adf-location-cell
[data]="data"
@@ -128,7 +128,7 @@
[tooltip]="getCellTooltip(row, col)">
</adf-location-cell>
</div>
<div *ngSwitchCase="'fileSize'" class="cell-value"
<div *ngSwitchCase="'fileSize'" class="adf-cell-value"
[attr.data-automation-id]="'fileSize_' + data.getValue(row, col)">
<adf-filesize-cell
[data]="data"
@@ -137,7 +137,7 @@
[tooltip]="getCellTooltip(row, col)">
</adf-filesize-cell>
</div>
<div *ngSwitchCase="'text'" class="cell-value"
<div *ngSwitchCase="'text'" class="adf-cell-value"
[attr.data-automation-id]="'text_' + data.getValue(row, col)">
<adf-datatable-cell
[data]="data"
@@ -146,12 +146,12 @@
[tooltip]="getCellTooltip(row, col)">
</adf-datatable-cell>
</div>
<span *ngSwitchDefault class="cell-value">
<span *ngSwitchDefault class="adf-cell-value">
<!-- empty cell for unknown column type -->
</span>
</ng-container>
</div>
<div *ngIf="col.template" class="cell-container">
<div *ngIf="col.template" class="adf-cell-container">
<ng-container
[ngTemplateOutlet]="col.template"
[ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col) }">
@@ -161,7 +161,7 @@
<!-- Actions (right) -->
<div *ngIf="actions && actionsPosition === 'right'"
class="adf-datatable-table-cell alfresco-datatable__actions-cell">
class="adf-datatable-table-cell adf-datatable__actions-cell">
<button mat-icon-button [matMenuTriggerFor]="menu"
[title]="'ADF-DATATABLE.CONTENT-ACTIONS.TOOLTIP' | translate"
[attr.id]="'action_menu_right_' + idx"

66
lib/core/datatable/components/datatable/datatable.component.scss
View File

@@ -9,7 +9,7 @@
$data-table-header-color: mat-color($foreground, text) !default;
$data-table-header-sorted-color: mat-color($foreground, text) !default;
$data-table-header-sorted-icon-hover-color: mat-color($foreground, disabled-text) !default;
$data-table-divider-color: mat-color($foreground, text, .07) !default;
$data-table-divider-color: mat-color($foreground, text, 0.07) !default;
$data-table-hover-color: mat-color($background, 'hover') !default;
$data-table-selection-color: mat-color($background, 'selected-button') !default;
$data-table-dividers: 1px solid $data-table-divider-color !default;
@@ -63,7 +63,7 @@
margin-bottom: 0;
}
.is-selected {
.adf-is-selected {
background: mat-color($primary, 100);
padding-bottom: 31px;
}
@@ -104,7 +104,7 @@
overflow: hidden;
outline: none;
&:before {
&::before {
margin-left: 10px;
text-align: left;
content: attr(title);
@@ -117,15 +117,16 @@
}
}
.alfresco-datatable__actions-cell {
.adf-datatable__actions-cell {
position: absolute;
height: 42px !important;
width: 42px !important;
right: 0px;
right: 0;
text-align: right;
}
.image-table-cell {
.adf-image-table-cell {
margin: 8px;
padding: 4px;
overflow: visible;
@@ -133,12 +134,12 @@
border-bottom-width: 1px;
border-bottom-style: solid;
.cell-container {
.adf-cell-container {
float: left;
width: 42px;
}
&:after {
&::after {
margin: 2px;
content: attr(filename);
float: left;
@@ -167,7 +168,7 @@
width: 100%;
position: relative;
border: $data-table-dividers;
border-collapse: collapse;
// border-collapse: collapse;
white-space: nowrap;
font-size: $data-table-font-size;
background-color: mat-color($background, card);
@@ -216,7 +217,7 @@
background-color: $data-table-hover-color;
}
&.is-selected, &.is-selected:hover {
&.adf-is-selected, &.adf-is-selected:hover {
background-color: $data-table-selection-color;
}
@@ -264,16 +265,15 @@
padding-top: $data-table-cell-top;
box-sizing: border-box;
@include no-select;
@include adf-no-select;
}
.adf-datatable-table-cell-header {
@include no-select;
@include adf-no-select;
cursor: pointer;
position: relative;
vertical-align: bottom;
text-overflow: ellipsis;
font-size: 14px;
font-weight: bold;
line-height: 24px;
letter-spacing: 0;
@@ -284,8 +284,8 @@
box-sizing: border-box;
white-space: nowrap;
&.sortable {
@include no-select;
&.adf-sortable {
@include adf-no-select;
&:hover {
cursor: pointer;
}
@@ -294,16 +294,16 @@
&.adf-data-table__header--sorted-asc,
&.adf-data-table__header--sorted-desc {
color: $data-table-header-sorted-color;
&:before {
&::before {
@include typo-icon;
font-size: $data-table-header-sort-icon-size;
content: "\e5d8";
content: '\e5d8';
margin-right: 5px;
vertical-align: sub;
}
}
&.adf-data-table__header--sorted-desc:before {
content: "\e5db";
&.adf-data-table__header--sorted-desc::before {
content: '\e5db';
}
}
@@ -329,7 +329,7 @@
width: 10px;
text-align: left;
.cell-value {
.adf-cell-value {
height: 24px;
}
@@ -338,7 +338,7 @@
}
}
.cell-container {
.adf-cell-container {
display: flex;
align-items: center;
}
@@ -350,13 +350,13 @@
color: mat-color($foreground, text);
&:hover {
color: #2196F3;
color: #2196f3;
text-decoration: underline;
}
}
}
.full-width {
.adf-full-width {
width: 100%;
}
@@ -392,12 +392,12 @@
}
}
.ellipsis-cell {
.cell-container {
.adf-ellipsis-cell {
.adf-cell-container {
height: 100%;
}
.cell-container > * {
.adf-cell-container > * {
display: block;
position: absolute;
max-width: calc(100% - 2em);
@@ -408,7 +408,7 @@
}
/* visible content */
.cell-value {
.adf-cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
@@ -420,13 +420,13 @@
/* query for Microsoft IE 11*/
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
.cell-value {
.adf-cell-value {
top: 100%;
}
}
/* cell stretching content */
& > div:after {
& > div::after {
content: attr(title);
overflow: hidden;
height: 0;
@@ -435,7 +435,7 @@
}
/* [Accessibility] For screen reader only */
.sr-only {
.adf-sr-only {
position: absolute;
width: 1px;
height: 1px;
@@ -447,19 +447,19 @@
}
/* Utils */
.hidden {
.adf-hidden {
display: none;
}
/* mobile phone */
@media all and (max-width: 768px) {
.desktop-only {
.adf-desktop-only {
display: none;
}
}
@media (max-device-width: 768px) {
.desktop-only {
.adf-desktop-only {
display: none;
}
}