mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-5637] Remove SCSS mixins and use CSS variables (#7250)
* remove default-class mixin and use regular import * cleanup colors * remove variables file, fix bugs in animations * proper ordering of imports, core css vars * cleanup snackbar and material themes * tags component * login component styles * app login * toolbar component styles * breadcrumb styles * dropdown breadcrumb * app layout component * demo shell: files component * aspect list styles * content metadata styles * node selector * name location cell * node share dialog * content type dialog * folder dialog * document list * datatable theme * pagination theme * viewer theme * viewer theme * user-info theme * container widget * dynamic table theme * form widgets * form theme * form renderer * sidebar menu * header theme * info drawer theme * comment list * commens and layout container * sidenav layout * empty content * error content * clipboard theme * search input * tooltip card and notification history * card view theme * remove unused keys * add permission dialog * search and permission dialogs * version comparison and column themes * upload drag area and cleanup references * remove the need for content styles * insight components * cleanup insights theme * process components * process components * process cloud themes * cleanup unsed imports * cleanup mixins * update build scripts * test fixes * remove fdescribe * css fixes * update unit tests
This commit is contained in:
Denys Vuika
GitHub
@@ -0,0 +1,134 @@
|
||||
@mixin adf-line-clamp($line-height: 1.25, $lines: 3) {
|
||||
position: relative;
|
||||
line-height: $line-height;
|
||||
padding: 0 !important;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@supports (-webkit-line-clamp: 1) {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: $lines;
|
||||
height: calc(0.99em * #{$line-height} * #{$lines});
|
||||
}
|
||||
|
||||
@supports not (-webkit-line-clamp: 1) {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
$tile-themes: (
|
||||
theme-1: (bg: #269abc, color: #168aac),
|
||||
theme-2: (bg: #7da9b0, color: #6d99a0),
|
||||
theme-3: (bg: #7689ab, color: #66799b),
|
||||
theme-4: (bg: #c74e3e, color: #b73e2e),
|
||||
theme-5: (bg: #fab96c, color: #eaa95c),
|
||||
theme-6: (bg: #759d4c, color: #658d3c),
|
||||
theme-7: (bg: #b1b489, color: #a1a479),
|
||||
theme-8: (bg: #a17299, color: #916289),
|
||||
theme-9: (bg: #696c67, color: #595c57),
|
||||
theme-10: (bg: #cabb33, color: #baab23)
|
||||
);
|
||||
|
||||
.adf-app-listgrid {
|
||||
padding: 8px;
|
||||
|
||||
&-item {
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-card {
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.theme-#{$i} {
|
||||
$tile-theme: map-get($tile-themes, theme-#{$i});
|
||||
background-color: map-get($tile-theme, bg);
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
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, 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);
|
||||
}
|
||||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
padding: 16px;
|
||||
z-index: 9;
|
||||
|
||||
&-icon {
|
||||
font-size: 70px;
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.theme-#{$i} & {
|
||||
$tile-theme: map-get($tile-themes, theme-#{$i});
|
||||
color: map-get($tile-theme, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding: 16px;
|
||||
margin-bottom: 0 !important;
|
||||
z-index: 9999;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
width: 80%;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
color: white;
|
||||
z-index: 9999;
|
||||
padding: 16px;
|
||||
|
||||
.adf-line-clamp {
|
||||
@include adf-line-clamp(1.25, 3);
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
padding: 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-icon {
|
||||
color: #e9f1f3;
|
||||
}
|
||||
|
||||
&.mat-card-actions {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,12 +15,14 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
||||
import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
|
||||
import { ApplicationInstanceModel, DEFAULT_APP_INSTANCE_ICON, DEFAULT_APP_INSTANCE_THEME } from '../models/application-instance.model';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-app-details',
|
||||
templateUrl: './app-details-cloud.component.html'
|
||||
templateUrl: './app-details-cloud.component.html',
|
||||
styleUrls: ['./app-details-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
export class AppDetailsCloudComponent {
|
||||
|
||||
@@ -1,117 +0,0 @@
|
||||
@mixin adf-cloud-app-details-theme($theme) {
|
||||
|
||||
$tile-themes: (
|
||||
theme-1: (bg: #269abc, color: #168aac),
|
||||
theme-2: (bg: #7da9b0, color: #6d99a0),
|
||||
theme-3: (bg: #7689ab, color: #66799b),
|
||||
theme-4: (bg: #c74e3e, color: #b73e2e),
|
||||
theme-5: (bg: #fab96c, color: #eaa95c),
|
||||
theme-6: (bg: #759d4c, color: #658d3c),
|
||||
theme-7: (bg: #b1b489, color: #a1a479),
|
||||
theme-8: (bg: #a17299, color: #916289),
|
||||
theme-9: (bg: #696c67, color: #595c57),
|
||||
theme-10: (bg: #cabb33, color: #baab23)
|
||||
);
|
||||
|
||||
.adf-app-listgrid {
|
||||
padding: 8px;
|
||||
|
||||
&-item {
|
||||
outline: none;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-card {
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
&.theme-#{$i} {
|
||||
$tile-theme: map-get($tile-themes, theme-#{$i});
|
||||
background-color: map-get($tile-theme, bg);
|
||||
}
|
||||
}
|
||||
|
||||
outline: none;
|
||||
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, 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);
|
||||
}
|
||||
|
||||
&-logo {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
padding: 16px;
|
||||
z-index: 9;
|
||||
|
||||
&-icon {
|
||||
font-size: 70px;
|
||||
width: 1em !important;
|
||||
height: 1em !important;
|
||||
|
||||
@for $i from 1 through 10 {
|
||||
.theme-#{$i} & {
|
||||
$tile-theme: map-get($tile-themes, theme-#{$i});
|
||||
color: map-get($tile-theme, color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
padding: 16px;
|
||||
margin-bottom: 0 !important;
|
||||
z-index: 9999;
|
||||
|
||||
h1 {
|
||||
color: white;
|
||||
width: 80%;
|
||||
font-size: 24px;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
color: white;
|
||||
z-index: 9999;
|
||||
padding: 16px;
|
||||
|
||||
.adf-line-clamp {
|
||||
@include adf-line-clamp(1.25, 3);
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
padding: 0 16px 16px !important;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
min-height: 48px;
|
||||
box-sizing: border-box;
|
||||
|
||||
&-icon {
|
||||
color: #e9f1f3;
|
||||
}
|
||||
|
||||
&.mat-card-actions {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,3 @@
|
||||
@mixin adf-cloud-attach-file-cloud-widget($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
&-attach-widget-container {
|
||||
margin-bottom: 15px;
|
||||
@@ -81,10 +78,9 @@
|
||||
&-attach-selected-file-row {
|
||||
div.mat-list-item-content {
|
||||
.adf-datatable-selected {
|
||||
color: mat-color($primary);
|
||||
color: var(--theme-primary-color);
|
||||
padding-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,6 +40,7 @@ import { ContentNodeSelectorPanelService } from '@alfresco/adf-content-services'
|
||||
@Component({
|
||||
selector: 'adf-cloud-attach-file-cloud-widget',
|
||||
templateUrl: './attach-file-cloud-widget.component.html',
|
||||
styleUrls: ['./attach-file-cloud-widget.component.scss'],
|
||||
host: {
|
||||
'(click)': 'event($event)',
|
||||
'(blur)': 'event($event)',
|
||||
|
||||
@@ -0,0 +1,58 @@
|
||||
.adf {
|
||||
&-cloud-group-list {
|
||||
margin: 5px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-cloud-group {
|
||||
width: 100%;
|
||||
|
||||
&-option-not-active {
|
||||
background: inherit !important;
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-error {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&-error {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
|
||||
&-message {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 17px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mat-autocomplete-panel .mat-fab {
|
||||
background: var(--theme-primary-color);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mat-autocomplete-panel .mat-fab {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.mat-autocomplete-panel .mat-fab .mat-button-wrapper {
|
||||
display: inline !important;
|
||||
}
|
||||
@@ -40,6 +40,7 @@ import { ComponentSelectionMode } from '../../types';
|
||||
@Component({
|
||||
selector: 'adf-cloud-group',
|
||||
templateUrl: './group-cloud.component.html',
|
||||
styleUrls: ['./group-cloud.component.scss'],
|
||||
animations: [
|
||||
trigger('transitionMessages', [
|
||||
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
@mixin adf-cloud-group-theme($theme) {
|
||||
|
||||
$warn: map-get($theme, warn);
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
&-cloud-group-list {
|
||||
margin: 5px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-cloud-group {
|
||||
width: 100%;
|
||||
|
||||
&-option-not-active {
|
||||
background: inherit !important;
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-error {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&-error {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
|
||||
&-message {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.mat-autocomplete-panel .mat-fab {
|
||||
background: mat-color($primary);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.mat-autocomplete-panel .mat-fab {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.mat-autocomplete-panel .mat-fab .mat-button-wrapper {
|
||||
display: inline !important;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.adf {
|
||||
|
||||
&-people-cloud {
|
||||
width: 100%;
|
||||
|
||||
&-option-not-active {
|
||||
background: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-people-cloud-list {
|
||||
margin: 5px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-people-cloud-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-people-cloud-pic {
|
||||
background: var(--theme-primary-color);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
color: var(--theme-text-fg-color);
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-start-task-cloud-error {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&-start-task-cloud-error {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
|
||||
&-message {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 17px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -43,6 +43,7 @@ import { ComponentSelectionMode } from '../../types';
|
||||
@Component({
|
||||
selector: 'adf-cloud-people',
|
||||
templateUrl: './people-cloud.component.html',
|
||||
styleUrls: ['./people-cloud.component.scss'],
|
||||
animations: [
|
||||
trigger('transitionMessages', [
|
||||
state('enter', style({ opacity: 1, transform: 'translateY(0%)' })),
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
@mixin adf-cloud-people-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$primary: map-get($theme, primary);
|
||||
$background: map-get($theme, background);
|
||||
$foreground: map-get($theme, foreground);
|
||||
|
||||
.adf {
|
||||
|
||||
&-people-cloud {
|
||||
width: 100%;
|
||||
|
||||
&-option-not-active {
|
||||
background: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-people-cloud-list {
|
||||
margin: 5px 0;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
&-people-cloud-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&-people-cloud-pic {
|
||||
background: mat-color($primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 100px;
|
||||
color: mat-color($foreground, text);
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
&-start-task-cloud-error {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&-start-task-cloud-error {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
|
||||
&-message {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-icon {
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
.adf-edit-process-filter-date-error-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 11px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 16px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-cloud-edit-process-filter-loading-margin {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
margin-right: calc((100% - 100px) / 2);
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
|
||||
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, AbstractControl } from '@angular/forms';
|
||||
import { DateAdapter } from '@angular/material/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -38,7 +38,9 @@ export interface DropdownOption {
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-edit-process-filter',
|
||||
templateUrl: './edit-process-filter-cloud.component.html'
|
||||
templateUrl: './edit-process-filter-cloud.component.html',
|
||||
styleUrls: ['./edit-process-filter-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class EditProcessFilterCloudComponent implements OnInit, OnChanges, OnDestroy {
|
||||
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
@mixin adf-cloud-edit-process-filter-theme($theme) {
|
||||
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf-edit-process-filter-date-error-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 11px;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 16px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
|
||||
&-cloud-edit-process-filter-loading-margin {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
margin-right: calc((100% - 100px) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
.adf {
|
||||
&-filters__entry {
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-filter-action-button .adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
}
|
||||
&-filters__entry {
|
||||
&.adf-active,
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
|
||||
import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
|
||||
@@ -25,7 +25,9 @@ import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-process-filters',
|
||||
templateUrl: './process-filters-cloud.component.html'
|
||||
templateUrl: './process-filters-cloud.component.html',
|
||||
styleUrls: ['./process-filters-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestroy {
|
||||
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
@mixin adf-cloud-process-filters-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
&-filters__entry {
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-filter-action-button .adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
}
|
||||
&-filters__entry {
|
||||
&.adf-active,
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
.adf {
|
||||
&-start-process {
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-form-field-label {
|
||||
color: var(--theme-colors-mat-grey-dark);
|
||||
}
|
||||
|
||||
mat-card-actions {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
padding-bottom: 1.25em;
|
||||
}
|
||||
|
||||
&-process-input-container {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-process-input-autocomplete {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: -14px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-start-form-container {
|
||||
.mat-card {
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-start-form-actions {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
@@ -34,6 +34,7 @@ import { ProcessNameCloudPipe } from '../../../pipes/process-name-cloud.pipe';
|
||||
@Component({
|
||||
selector: 'adf-cloud-start-process',
|
||||
templateUrl: './start-process-cloud.component.html',
|
||||
styleUrls: ['./start-process-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy {
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
@mixin adf-cloud-start-service-theme($theme) {
|
||||
.adf {
|
||||
&-start-process {
|
||||
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-form-field-label {
|
||||
color: mat-color($mat-grey, A400);
|
||||
}
|
||||
|
||||
mat-card-actions {
|
||||
text-align: right;
|
||||
|
||||
.mat-button {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-title {
|
||||
padding-bottom: 1.25em;
|
||||
}
|
||||
|
||||
&-process-input-container {
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-process-input-autocomplete {
|
||||
display: flex;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: -14px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-start-form-container {
|
||||
.mat-card {
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&-start-form-actions {
|
||||
text-align: right !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
@import '../app/components/app-details-cloud.theme';
|
||||
@import '../group/components/group-cloud.theme';
|
||||
@import '../people/components/people-cloud.theme';
|
||||
@import '../process/process-filters/components/edit-process-filter-cloud.theme';
|
||||
@import '../process/start-process/components/start-process-cloud.theme';
|
||||
@import '../process/process-filters/components/process-filters-cloud.theme';
|
||||
@import '../task/task-form/components/task-form-cloud.theme';
|
||||
@import '../task/start-task/components/start-task-cloud.theme';
|
||||
@import '../task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.theme';
|
||||
@import '../task/task-filters/components/base-task-filters-cloud.theme';
|
||||
@import '../task/task-header/components/task-header-cloud.theme';
|
||||
@import '../form/components/widgets/attach-file/attach-file-cloud-widget.theme';
|
||||
|
||||
|
||||
@mixin adf-process-services-cloud-theme($theme) {
|
||||
@include adf-cloud-app-details-theme($theme);
|
||||
@include adf-cloud-task-filters-theme($theme);
|
||||
@include adf-cloud-edit-task-filters-theme($theme);
|
||||
@include adf-cloud-edit-process-filter-theme($theme);
|
||||
@include adf-cloud-start-task-theme($theme);
|
||||
@include adf-cloud-people-theme($theme);
|
||||
@include adf-cloud-group-theme($theme);
|
||||
@include adf-cloud-task-form-theme($theme);
|
||||
@include adf-cloud-start-service-theme($theme);
|
||||
@include adf-cloud-attach-file-cloud-widget($theme);
|
||||
@include adf-task-list-header-theme($theme);
|
||||
@include adf-cloud-process-filters-theme($theme);
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.adf-cloud-start-task-heading {
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
margin-bottom: 10px;
|
||||
|
||||
.mat-card-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-cloud-priority-container {
|
||||
padding-top: 1.1em;
|
||||
}
|
||||
|
||||
.adf-cloud-date-error-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 17px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-cloud-start-task-footer {
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
adf-cloud-start-task {
|
||||
.adf {
|
||||
|
||||
&-cloud-start-task-footer {
|
||||
.mat-button {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -38,6 +38,7 @@ import { TaskPriorityOption } from '../../models/task.model';
|
||||
@Component({
|
||||
selector: 'adf-cloud-start-task',
|
||||
templateUrl: './start-task-cloud.component.html',
|
||||
styleUrls: ['./start-task-cloud.component.scss'],
|
||||
providers: [
|
||||
{ provide: DateAdapter, useClass: MomentDateAdapter },
|
||||
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
@mixin adf-cloud-start-task-theme($theme) {
|
||||
$warn: map-get($theme, warn);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$header-border: 1px solid mat-color($foreground, divider);
|
||||
|
||||
.adf-cloud-start-task-heading {
|
||||
border-bottom: $header-border;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.mat-card-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-cloud-priority-container {
|
||||
padding-top: 1.1em;
|
||||
}
|
||||
|
||||
.adf-cloud-date-error-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-cloud-start-task-footer {
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
adf-cloud-start-task {
|
||||
.adf {
|
||||
|
||||
&-cloud-start-task-footer {
|
||||
.mat-button {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
.adf {
|
||||
&-task-filters__entry {
|
||||
display: flex;
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-filter-action-button {
|
||||
opacity: 0.54;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-filter-action-button__counter {
|
||||
opacity: 0.54;
|
||||
margin-left: 10px;
|
||||
margin-top: 6px;
|
||||
padding: 0 5px;
|
||||
|
||||
&.adf-active {
|
||||
margin-left: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px;
|
||||
border-radius: 15px;
|
||||
background-color: var(--theme-accent-color);
|
||||
color: var(--theme-colors-mag-grey-light);
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
|
||||
.adf-filter-action-button__counter,
|
||||
.adf-filter-action-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-active {
|
||||
color: var(--theme-primary-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
@mixin adf-cloud-task-filters-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf {
|
||||
&-task-filters__entry {
|
||||
display: flex;
|
||||
padding: 12px 0 !important;
|
||||
height: 24px;
|
||||
width: 100%;
|
||||
font-size: 14px !important;
|
||||
font-weight: bold;
|
||||
opacity: 1;
|
||||
|
||||
.adf-full-width {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-filter-action-button {
|
||||
opacity: 0.54;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.adf-filter-action-button__label {
|
||||
padding-left: 20px;
|
||||
margin: 0 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-filter-action-button__counter {
|
||||
opacity: 0.54;
|
||||
margin-left: 10px;
|
||||
margin-top: 6px;
|
||||
padding: 0 5px;
|
||||
|
||||
&.adf-active {
|
||||
margin-left: 8px;
|
||||
margin-top: 5px;
|
||||
padding: 0 5px;
|
||||
border-radius: 15px;
|
||||
background-color: mat-color($accent);
|
||||
color: mat-color($mat-grey, 50);
|
||||
font-size: smaller;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
|
||||
.adf-filter-action-button__counter,
|
||||
.adf-filter-action-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-active {
|
||||
color: mat-color($primary);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
.adf-edit-task-filter-checkbox {
|
||||
font-size: 16px;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
flex: 1 23%;
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-date-error-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 16px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-dateRange mat-grid-list {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.adf {
|
||||
&-cloud-edit-task-filter-loading-margin {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
margin-right: calc((100% - 100px) / 2);
|
||||
}
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
@mixin adf-cloud-edit-task-filters-theme($theme) {
|
||||
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf-edit-task-filter-checkbox {
|
||||
font-size: 16px;
|
||||
padding-top: 10px;
|
||||
text-align: center;
|
||||
flex: 1 23%;
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-date-error-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.adf-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 10px;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.adf-error-icon {
|
||||
font-size: 16px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-edit-task-filter-dateRange mat-grid-list {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.adf {
|
||||
&-cloud-edit-task-filter-loading-margin {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
margin-right: calc((100% - 100px) / 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder } from '@angular/forms';
|
||||
import { DateAdapter } from '@angular/material/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -32,7 +32,9 @@ import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-ta
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-edit-service-task-filter',
|
||||
templateUrl: './base-edit-task-filter-cloud.component.html'
|
||||
templateUrl: './base-edit-task-filter-cloud.component.html',
|
||||
styleUrls: ['./base-edit-task-filter-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class EditServiceTaskFilterCloudComponent extends BaseEditTaskFilterCloudComponent<ServiceTaskFilterCloudModel> {
|
||||
constructor(
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { FormBuilder } from '@angular/forms';
|
||||
import { DateAdapter } from '@angular/material/core';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
@@ -34,7 +34,9 @@ import { BaseEditTaskFilterCloudComponent, DropdownOption } from './base-edit-ta
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-edit-task-filter',
|
||||
templateUrl: './base-edit-task-filter-cloud.component.html'
|
||||
templateUrl: './base-edit-task-filter-cloud.component.html',
|
||||
styleUrls: ['./base-edit-task-filter-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class EditTaskFilterCloudComponent extends BaseEditTaskFilterCloudComponent<TaskFilterCloudModel> {
|
||||
constructor(
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit } from '@angular/core';
|
||||
import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { FilterParamsModel, ServiceTaskFilterCloudModel } from '../models/filter-cloud.model';
|
||||
import { TranslationService } from '@alfresco/adf-core';
|
||||
@@ -25,7 +25,9 @@ import { ServiceTaskFilterCloudService } from '../services/service-task-filter-c
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-service-task-filters',
|
||||
templateUrl: './base-task-filters-cloud.component.html'
|
||||
templateUrl: './base-task-filters-cloud.component.html',
|
||||
styleUrls: ['./base-task-filters-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ServiceTaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent implements OnInit, OnChanges {
|
||||
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit } from '@angular/core';
|
||||
import { Component, EventEmitter, OnChanges, Output, SimpleChanges, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
|
||||
import { TaskFilterCloudModel, FilterParamsModel } from '../models/filter-cloud.model';
|
||||
@@ -27,7 +27,9 @@ import { TaskCloudEngineEvent } from '../../../models/engine-event-cloud.model';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-task-filters',
|
||||
templateUrl: './base-task-filters-cloud.component.html'
|
||||
templateUrl: './base-task-filters-cloud.component.html',
|
||||
styleUrls: ['./base-task-filters-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TaskFiltersCloudComponent extends BaseTaskFiltersCloudComponent implements OnInit, OnChanges {
|
||||
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
.adf-task-form {
|
||||
&-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
float: right;
|
||||
padding-bottom: 25px !important;
|
||||
padding-right: 25px !important;
|
||||
|
||||
& .mat-button {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
& .mat-button-wrapper {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
opacity: 0.54;
|
||||
font-size: var(--theme-body-2-font-size);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
import {
|
||||
Component, EventEmitter, Input, OnChanges,
|
||||
Output, SimpleChanges, OnInit, HostListener
|
||||
Output, SimpleChanges, OnInit, HostListener, ViewEncapsulation
|
||||
} from '@angular/core';
|
||||
import { TaskDetailsCloudModel } from '../../start-task/models/task-details-cloud.model';
|
||||
import { TaskCloudService } from '../../services/task-cloud.service';
|
||||
@@ -28,7 +28,9 @@ import { DateCloudWidgetComponent } from '../../../form/components/widgets/date/
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-task-form',
|
||||
templateUrl: './task-form-cloud.component.html'
|
||||
templateUrl: './task-form-cloud.component.html',
|
||||
styleUrls: ['./task-form-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TaskFormCloudComponent implements OnInit, OnChanges {
|
||||
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
@mixin adf-cloud-task-form-theme($theme) {
|
||||
|
||||
$config: mat-typography-config();
|
||||
|
||||
.adf-task-form {
|
||||
&-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
float: right;
|
||||
padding-bottom: 25px !important;
|
||||
padding-right: 25px !important;
|
||||
|
||||
& .mat-button {
|
||||
height: 36px;
|
||||
border-radius: 5px;
|
||||
|
||||
}
|
||||
|
||||
& .mat-button-wrapper {
|
||||
width: 58px;
|
||||
height: 20px;
|
||||
opacity: 0.54;
|
||||
font-size: mat-font-size($config, body-2);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
.adf {
|
||||
&-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-edit-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&-switch-to-edit-mode,
|
||||
&-save-edit-mode {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
|
||||
&-cancel-edit-mode,
|
||||
&-claim-controls {
|
||||
color: rgb(131, 131, 131);
|
||||
}
|
||||
|
||||
&-task-header-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
adf-card-view .adf-property-value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-task-header-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, EventEmitter, Output, OnDestroy, OnChanges, OnInit } from '@angular/core';
|
||||
import { Component, Input, EventEmitter, Output, OnDestroy, OnChanges, OnInit, ViewEncapsulation } from '@angular/core';
|
||||
import { takeUntil, concatMap, catchError, finalize } from 'rxjs/operators';
|
||||
import { Subject, of, forkJoin } from 'rxjs';
|
||||
import {
|
||||
@@ -37,7 +37,9 @@ import { TaskCloudService } from '../../services/task-cloud.service';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-cloud-task-header',
|
||||
templateUrl: './task-header-cloud.component.html'
|
||||
templateUrl: './task-header-cloud.component.html',
|
||||
styleUrls: ['./task-header-cloud.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TaskHeaderCloudComponent implements OnInit, OnDestroy, OnChanges {
|
||||
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
@mixin adf-task-list-header-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
|
||||
.adf {
|
||||
&-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&-edit-controls {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&-switch-to-edit-mode,
|
||||
&-save-edit-mode {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
||||
&-cancel-edit-mode,
|
||||
&-claim-controls {
|
||||
color: rgb(131, 131, 131);
|
||||
}
|
||||
|
||||
&-task-header-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
adf-card-view .adf-property-value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.adf-task-header-loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
Reference in New Issue
Block a user