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
154
lib/process-services/src/lib/app-list/apps-list.component.scss
Normal file
154
lib/process-services/src/lib/app-list/apps-list.component.scss
Normal file
@@ -0,0 +1,154 @@
|
||||
@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%;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-apps {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-app-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
$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-list-spinner, .adf-app-list-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
.mat-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { AppsProcessService, TranslationService, CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
|
||||
import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild, OnDestroy } from '@angular/core';
|
||||
import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable, Observer, of, Subject } from 'rxjs';
|
||||
import { AppDefinitionRepresentationModel } from '../task-list';
|
||||
import { IconModel } from './icon.model';
|
||||
@@ -24,7 +24,10 @@ import { share, takeUntil, finalize } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-apps',
|
||||
templateUrl: './apps-list.component.html'
|
||||
templateUrl: './apps-list.component.html',
|
||||
styleUrls: ['./apps-list.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-apps' }
|
||||
})
|
||||
export class AppsListComponent implements OnInit, AfterContentInit, OnDestroy {
|
||||
|
||||
|
||||
@@ -1,137 +0,0 @@
|
||||
@mixin adf-apps-theme($theme) {
|
||||
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-app-list-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
$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-list-spinner, .adf-app-list-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 85vh;
|
||||
.mat-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
.adf-attach-file-widget-dialog {
|
||||
.mat-dialog-actions {
|
||||
background-color: var(--theme-background-color);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: var(--theme-foreground-text-color);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.adf-choose-action {
|
||||
&[disabled] {
|
||||
color: var(--theme-secondary-text-color);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -25,6 +25,7 @@ import { Node } from '@alfresco/js-api';
|
||||
@Component({
|
||||
selector: 'adf-attach-file-widget-dialog',
|
||||
templateUrl: './attach-file-widget-dialog.component.html',
|
||||
styleUrls: ['./attach-file-widget-dialog.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
providers: [
|
||||
AuthenticationService,
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
@mixin adf-attach-file-widget-dialog-component-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf-attach-file-widget-dialog {
|
||||
|
||||
.mat-dialog-actions {
|
||||
|
||||
background-color: mat-color($background, background);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
color: mat-color($foreground, text, 0.72);
|
||||
|
||||
button {
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.adf-choose-action {
|
||||
|
||||
&[disabled] {
|
||||
color: mat-color($foreground, secondary-text);
|
||||
}
|
||||
|
||||
&:enabled {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
122
lib/process-services/src/lib/form/start-form.component.scss
Normal file
122
lib/process-services/src/lib/form/start-form.component.scss
Normal file
@@ -0,0 +1,122 @@
|
||||
.adf {
|
||||
&-form-container {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
|
||||
& .mat-card {
|
||||
padding: 16px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-card-header-text {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
& .mat-tab-body-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-tab-label {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
line-height: var(--theme-headline-line-height);
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: var(--theme-text-color);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& .mat-ink-bar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
& .mat-form-field-wrapper {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-form-title {
|
||||
font-size: var(--theme-title-font-size);
|
||||
}
|
||||
|
||||
&-form-debug-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-form-reload-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&-form-validation-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 39px;
|
||||
color: var(--theme-accent-color);
|
||||
|
||||
& .adf-invalid-color {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
|
||||
&-form-hide-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
font-size: var(--theme-caption-font-size);
|
||||
line-height: var(--theme-headline-line-height);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-form-mat-card-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-element {
|
||||
font-size: var(--theme-body-2-font-size);
|
||||
padding-top: 8px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .adf-form-validation-button {
|
||||
left: 50px;
|
||||
right: unset;
|
||||
}
|
||||
@@ -34,6 +34,7 @@ import { ContentLinkModel, FormService, WidgetVisibilityService, FormOutcomeMode
|
||||
@Component({
|
||||
selector: 'adf-start-form',
|
||||
templateUrl: './start-form.component.html',
|
||||
styleUrls: ['./start-form.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class StartFormComponent extends FormComponent implements OnChanges, OnInit, OnDestroy {
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
@mixin adf-start-form-component-theme($theme) {
|
||||
|
||||
$config: mat-typography-config();
|
||||
$warn: map-get($theme, warn);
|
||||
$accent: map-get($theme, accent);
|
||||
|
||||
.adf {
|
||||
&-form-container {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
|
||||
& .mat-card {
|
||||
padding: 16px 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-card-header-text {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
& .mat-tab-body-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& .mat-tab-label {
|
||||
font-size: mat-font-size($config, subheading-2);
|
||||
line-height: mat-line-height($config, headline);
|
||||
letter-spacing: -0.4px;
|
||||
text-align: left;
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
& .mat-ink-bar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
& .mat-form-field-wrapper {
|
||||
margin: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-form-title {
|
||||
font-size: mat-font-size($alfresco-typography, title);
|
||||
}
|
||||
|
||||
&-form-debug-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text {
|
||||
padding-left: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&-form-debug-container .adf-debug-toggle-text:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-form-reload-button {
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
&-form-validation-button {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
top: 39px;
|
||||
color: mat-color($accent);
|
||||
|
||||
& .adf-invalid-color {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
|
||||
&-form-hide-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&-task-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&-label {
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
font-size: mat-font-size($config, caption);
|
||||
line-height: mat-line-height($config, headline);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&-form-mat-card-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
form-field {
|
||||
width: 100%;
|
||||
|
||||
.mat-input-element {
|
||||
font-size: mat-font-size($config, body-2);
|
||||
padding-top: 8px;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
[dir='rtl'] .adf-form-validation-button {
|
||||
left: 50px;
|
||||
right: unset;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
.adf-people-search-field {
|
||||
width: 100%;
|
||||
|
||||
.adf-search-text-container {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-list-container {
|
||||
max-height: 152px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
adf-people-list ::ng-deep adf-datatable ::ng-deep thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-people-pic {
|
||||
background: var(--theme-primary-color);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 90%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.adf-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
@@ -26,6 +26,7 @@ import { getDisplayUser } from '../../helpers/get-display-user';
|
||||
@Component({
|
||||
selector: 'adf-people-search-field',
|
||||
templateUrl: './people-search-field.component.html',
|
||||
styleUrls: ['./people-search-field.component.scss'],
|
||||
host: { 'class': 'adf-people-search-field' },
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
@mixin adf-task-list-people-search-field-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf-people-search-field {
|
||||
width: 100%;
|
||||
|
||||
.adf-search-text-container {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-search-list-container {
|
||||
max-height: 152px;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
adf-people-list ::ng-deep adf-datatable ::ng-deep thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-people-pic {
|
||||
background: mat-color($primary);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 90%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.adf-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
.adf-people-search {
|
||||
width: 100%;
|
||||
|
||||
.adf-activiti-label {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.adf-fix-element-user-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adf-search-text-header {
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.adf-search-list-action-container {
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
padding: 5px 0;
|
||||
margin-top: 5px;
|
||||
> button {
|
||||
opacity: 0.54;
|
||||
font-weight: bolder;
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -24,6 +24,7 @@ import { map } from 'rxjs/operators';
|
||||
@Component({
|
||||
selector: 'adf-people-search',
|
||||
templateUrl: './people-search.component.html',
|
||||
styleUrls: ['./people-search.component.scss'],
|
||||
host: {
|
||||
'class': 'adf-people-search'
|
||||
},
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
@mixin adf-task-list-people-search-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
|
||||
.adf-people-search {
|
||||
width: 100%;
|
||||
|
||||
.adf-activiti-label {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.adf-fix-element-user-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.adf-search-text-header {
|
||||
font-weight: bold;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
.adf-search-list-action-container {
|
||||
border-top: 1px solid #eee;
|
||||
text-align: right;
|
||||
padding: 5px 0;
|
||||
margin-top: 5px;
|
||||
> button {
|
||||
opacity: 0.54;
|
||||
font-weight: bolder;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
.adf-assignment-header {
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
padding: 6px 20px;
|
||||
}
|
||||
|
||||
.adf-assignment-count {
|
||||
float: left;
|
||||
padding: 10px 0;
|
||||
font-weight: bolder;
|
||||
opacity: 0.54;
|
||||
margin: 13px;
|
||||
}
|
||||
|
||||
.adf-add-people {
|
||||
margin: 13px;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
height: 26px;
|
||||
opacity: 0.54;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--theme-primary-color);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-assignment-top-container.mat-card {
|
||||
border-top: 1px solid var(--theme-fg-divider);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.adf-assignment-top-container-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: stretch;
|
||||
flex: 1 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.adf-assignment-container {
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.adf-assignment-list-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
adf-people-list adf-datatable {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
margin: 13px;
|
||||
}
|
||||
|
||||
.adf-datatable .adf-datatable-cell .adf-cell-container {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.adf-people-email {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.adf-people-search-people-pic {
|
||||
background: var(--theme-primary-color);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.adf-people-user-info {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { LogService, UserProcessModel, PeopleProcessService } from '@alfresco/adf-core';
|
||||
import { Component, Input, ViewChild } from '@angular/core';
|
||||
import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable, Observer } from 'rxjs';
|
||||
import { UserEventModel } from '../../../task-list/models/user-event.model';
|
||||
import { PeopleSearchComponent } from '../people-search/people-search.component';
|
||||
@@ -24,7 +24,9 @@ import { share } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-people',
|
||||
templateUrl: './people.component.html'
|
||||
templateUrl: './people.component.html',
|
||||
styleUrls: ['./people.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class PeopleComponent {
|
||||
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
@mixin adf-task-list-people-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$header-border: 1px solid mat-color($foreground, divider);
|
||||
|
||||
.adf-assignment-header {
|
||||
border-bottom: $header-border;
|
||||
padding: 6px 20px;
|
||||
}
|
||||
|
||||
.adf-assignment-count {
|
||||
float: left;
|
||||
padding: 10px 0;
|
||||
font-weight: bolder;
|
||||
opacity: 0.54;
|
||||
margin: 13px;
|
||||
}
|
||||
|
||||
.adf-add-people {
|
||||
margin: 13px;
|
||||
float: right;
|
||||
padding: 8px;
|
||||
height: 26px;
|
||||
opacity: 0.54;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
}
|
||||
|
||||
.adf-assignment-top-container.mat-card {
|
||||
border-top: $header-border;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.adf-assignment-top-container-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: stretch;
|
||||
flex: 1 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.adf-assignment-container {
|
||||
padding: 10px 20px;
|
||||
border-bottom: $header-border;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.adf-assignment-list-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
adf-people-list adf-datatable {
|
||||
thead {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.adf-datatable-cell {
|
||||
margin: 13px;
|
||||
}
|
||||
|
||||
.adf-datatable .adf-datatable-cell .adf-cell-container {
|
||||
flex-direction: column;
|
||||
align-items: left;
|
||||
}
|
||||
|
||||
.adf-people-email {
|
||||
opacity: 0.54;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-people-img {
|
||||
border-radius: 90%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.adf-people-search-people-pic {
|
||||
background: mat-color($primary);
|
||||
width: 30px;
|
||||
padding: 10px 5px;
|
||||
border-radius: 100px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.adf-people-user-info {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
@import './components/people-search/people-search.theme';
|
||||
@import './components/people-search-field/people-search-field.theme';
|
||||
@import './components/people/people.theme';
|
||||
|
||||
@mixin adf-people-module-theme($theme) {
|
||||
@include adf-task-list-people-search-theme($theme);
|
||||
@include adf-task-list-people-search-field-theme($theme);
|
||||
@include adf-task-list-people-theme($theme);
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.adf-process-instance-comments {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-activiti-label {
|
||||
font-weight: bolder;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.adf-activiti-label + .adf-icon {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.adf-list-wrap {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.adf-hide-long-names {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-comments-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-comments-header {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
}
|
||||
|
||||
.adf-comments-input-container {
|
||||
width: calc(100% - 30px);
|
||||
padding: 8px 15px 0;
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
adf-comment-list {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
height: calc(100% - 101px);
|
||||
width: 100%;
|
||||
}
|
||||
@@ -16,13 +16,16 @@
|
||||
*/
|
||||
|
||||
import { CommentModel, CommentProcessService } from '@alfresco/adf-core';
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable, Observer, Subject } from 'rxjs';
|
||||
import { share, takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-process-instance-comments',
|
||||
templateUrl: './process-comments.component.html'
|
||||
templateUrl: './process-comments.component.html',
|
||||
styleUrls: ['./process-comments.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
host: { class: 'adf-process-instance-comments' }
|
||||
})
|
||||
export class ProcessCommentsComponent implements OnChanges, OnDestroy {
|
||||
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
@mixin adf-process-comment-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$header-border: 1px solid mat-color($foreground, divider);
|
||||
|
||||
:host {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-activiti-label {
|
||||
font-weight: bolder;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.adf-activiti-label + .adf-icon {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.adf-list-wrap {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
-o-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.adf-hide-long-names {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-comments-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.adf-comments-header {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
border-bottom: $header-border;
|
||||
}
|
||||
|
||||
.adf-comments-input-container {
|
||||
width: calc(100% - 30px);
|
||||
padding: 8px 15px 0;
|
||||
border-bottom: $header-border;
|
||||
}
|
||||
|
||||
.adf-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
adf-comment-list {
|
||||
float: left;
|
||||
overflow: auto;
|
||||
height: calc(100% - 101px);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { AppsProcessService } from '@alfresco/adf-core';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { ProcessInstanceFilterRepresentation, UserProcessInstanceFilterRepresentation } from '@alfresco/js-api';
|
||||
import { Observable } from 'rxjs';
|
||||
import { FilterProcessRepresentationModel } from '../models/filter-process.model';
|
||||
@@ -25,7 +25,9 @@ import { IconModel } from '../../app-list/icon.model';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-process-instance-filters',
|
||||
templateUrl: './process-filters.component.html'
|
||||
templateUrl: './process-filters.component.html',
|
||||
styleUrls: ['./process-filters.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ProcessFiltersComponent implements OnInit, OnChanges {
|
||||
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
@mixin adf-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,71 @@
|
||||
.adf {
|
||||
&-start-process {
|
||||
width: 96%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 10px;
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.mat-form-field-label {
|
||||
color: var(--theme-colors-mat-grey-dark);
|
||||
}
|
||||
.mat-content-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;
|
||||
}
|
||||
mat-spinner {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
&-start-form-container {
|
||||
.mat-card {
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
&-start-form-actions {
|
||||
text-align: right !important;
|
||||
}
|
||||
&-start-process-definition-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: baseline;
|
||||
}
|
||||
&-start-process-app-list {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.adf-start-process {
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-start-process-loading {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
margin-right: calc((100% - 100px) / 2);
|
||||
}
|
||||
@@ -43,6 +43,7 @@ import { ProcessNamePipe } from '../../pipes/process-name.pipe';
|
||||
@Component({
|
||||
selector: 'adf-start-process',
|
||||
templateUrl: './start-process.component.html',
|
||||
styleUrls: ['./start-process.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestroy {
|
||||
|
||||
@@ -1,73 +0,0 @@
|
||||
@mixin adf-process-services-create-theme($theme) {
|
||||
.adf {
|
||||
&-start-process {
|
||||
width: 96%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 10px;
|
||||
mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.mat-form-field-label {
|
||||
color: mat-color($mat-grey, A400);
|
||||
}
|
||||
.mat-content-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;
|
||||
}
|
||||
mat-spinner {
|
||||
position: absolute;
|
||||
right: -1px;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
&-start-form-container {
|
||||
.mat-card {
|
||||
box-shadow: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
&-start-form-actions {
|
||||
text-align: right !important;
|
||||
}
|
||||
&-start-process-definition-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: baseline;
|
||||
}
|
||||
&-start-process-app-list {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.adf-start-process {
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-start-process-loading {
|
||||
margin-left: calc((100% - 100px) / 2);
|
||||
margin-right: calc((100% - 100px) / 2);
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
@import '../process-list/components/process-filters.theme';
|
||||
@import '../process-comments/process-comments.theme';
|
||||
@import '../people/people.theme';
|
||||
@import '../task-list/components/start-task.theme';
|
||||
@import '../task-list/components/task-filters.theme';
|
||||
@import '../task-list/components/task-header.theme';
|
||||
@import '../task-list/components/task-standalone.theme';
|
||||
@import '../app-list/apps-list.theme';
|
||||
@import '../content-widget/attach-file-widget-dialog.theme';
|
||||
@import '../form/start-form.theme';
|
||||
@import '../process-list/components/start-process.theme';
|
||||
@import '../task-list/components/task-form/task-form.theme';
|
||||
|
||||
@mixin adf-process-services-theme($theme) {
|
||||
@include adf-process-filters-theme($theme);
|
||||
@include adf-process-comment-theme($theme);
|
||||
@include adf-task-list-start-task-theme($theme);
|
||||
@include adf-people-module-theme($theme);
|
||||
@include adf-task-list-filters-task-theme($theme);
|
||||
@include adf-task-list-header-theme($theme);
|
||||
@include adf-apps-theme($theme);
|
||||
@include adf-task-standalone-component-theme($theme);
|
||||
@include adf-attach-file-widget-dialog-component-theme($theme);
|
||||
@include adf-start-form-component-theme($theme);
|
||||
@include adf-process-services-create-theme($theme);
|
||||
@include adf-task-form-theme($theme);
|
||||
}
|
||||
@@ -0,0 +1,115 @@
|
||||
.adf-new-task-heading {
|
||||
padding-top: 12px;
|
||||
border-bottom: 1px solid var(--theme-fg-divider);
|
||||
.mat-card-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-new-task-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-new-task-layout-card {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.adf-new-task-footer {
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.adf-mat-select {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
adf-start-task {
|
||||
|
||||
.mat-button.adf-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
people-widget {
|
||||
width: 100%;
|
||||
.mat-form-field-label-wrapper {
|
||||
top: -14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-people-widget-content {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.adf-label {
|
||||
line-height: 0;
|
||||
}
|
||||
.adf-error-text-container {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
&-start-task-input-container .mat-form-field-wrapper {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&-error-text-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: var(--theme-warn-color);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-error-icon {
|
||||
font-size: 17px;
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: rgb(186, 186, 186);;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: #f44336 !important;
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.mat-form-field-prefix {
|
||||
color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: var(--theme-warn-color);
|
||||
}
|
||||
|
||||
.adf-label {
|
||||
color: var(--theme-warn-color);
|
||||
&::after {
|
||||
background-color: var(--theme-warn-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -33,6 +33,7 @@ import { FormBuilder, AbstractControl, Validators, FormGroup, FormControl } from
|
||||
@Component({
|
||||
selector: 'adf-start-task',
|
||||
templateUrl: './start-task.component.html',
|
||||
styleUrls: ['./start-task.component.scss'],
|
||||
providers: [
|
||||
{ provide: DateAdapter, useClass: MomentDateAdapter },
|
||||
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }],
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
@mixin adf-task-list-start-task-theme($theme) {
|
||||
$primary: map-get($theme, primary);
|
||||
$accent: map-get($theme, accent);
|
||||
$warn: map-get($theme, warn);
|
||||
$foreground: map-get($theme, foreground);
|
||||
$header-border: 1px solid mat-color($foreground, divider);
|
||||
|
||||
.adf-new-task-heading {
|
||||
padding-top: 12px;
|
||||
border-bottom: $header-border;
|
||||
.mat-card-title {
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-new-task-form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.adf-new-task-layout-card {
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.adf-new-task-footer {
|
||||
padding: 4px;
|
||||
font-size: 18px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.adf-mat-select {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
adf-start-task {
|
||||
|
||||
.mat-button.adf-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
people-widget {
|
||||
width: 100%;
|
||||
.mat-form-field-label-wrapper {
|
||||
top: -14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.adf-people-widget-content {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
.adf-label {
|
||||
line-height: 0;
|
||||
}
|
||||
.adf-error-text-container {
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.adf {
|
||||
&-start-task-input-container .mat-form-field-wrapper {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
&-error-text-container {
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&-error-text {
|
||||
padding-right: 8px;
|
||||
height: 16px;
|
||||
font-size: 12px;
|
||||
line-height: 1.33;
|
||||
color: mat-color($warn);
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&-error-icon {
|
||||
font-size: 17px;
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
&-label {
|
||||
color: rgb(186, 186, 186);;
|
||||
}
|
||||
|
||||
&-invalid {
|
||||
|
||||
.mat-form-field-underline {
|
||||
background-color: #f44336 !important;
|
||||
}
|
||||
|
||||
.adf-file {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.mat-form-field-prefix {
|
||||
color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-input {
|
||||
border-color: mat-color($warn);
|
||||
}
|
||||
|
||||
.adf-label {
|
||||
color: mat-color($warn);
|
||||
&::after {
|
||||
background-color: mat-color($warn);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,7 +16,7 @@
|
||||
*/
|
||||
|
||||
import { AppsProcessService } from '@alfresco/adf-core';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { FilterParamsModel, FilterRepresentationModel } from '../models/filter.model';
|
||||
import { TaskFilterService } from './../services/task-filter.service';
|
||||
@@ -25,7 +25,9 @@ import { IconModel } from '../../app-list/icon.model';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-task-filters',
|
||||
templateUrl: './task-filters.component.html'
|
||||
templateUrl: './task-filters.component.html',
|
||||
styleUrls: ['./task-filters.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TaskFiltersComponent implements OnInit, OnChanges {
|
||||
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
@mixin adf-task-list-filters-task-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,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
|
||||
import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import {
|
||||
FormModel,
|
||||
ContentLinkModel,
|
||||
@@ -32,7 +32,9 @@ import { Observable } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'adf-task-form',
|
||||
templateUrl: './task-form.component.html'
|
||||
templateUrl: './task-form.component.html',
|
||||
styleUrls: ['./task-form.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TaskFormComponent implements OnInit {
|
||||
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
@mixin adf-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,35 @@
|
||||
.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);
|
||||
}
|
||||
|
||||
&-card-container {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
adf-card-view .adf-property-value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
|
||||
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
|
||||
import {
|
||||
BpmUserService,
|
||||
CardViewDateItemModel,
|
||||
@@ -32,7 +32,9 @@ import { TaskDescriptionValidator } from '../validators/task-description.validat
|
||||
|
||||
@Component({
|
||||
selector: 'adf-task-header',
|
||||
templateUrl: './task-header.component.html'
|
||||
templateUrl: './task-header.component.html',
|
||||
styleUrls: ['./task-header.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TaskHeaderComponent implements OnChanges, OnInit {
|
||||
|
||||
|
||||
@@ -1,40 +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);
|
||||
}
|
||||
|
||||
&-card-container {
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
adf-card-view .adf-property-value {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
.adf {
|
||||
&-message-card {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
margin: 16px auto;
|
||||
.mat-card-actions {
|
||||
border-top: solid 1px var(--theme-status-bar-bg-color);
|
||||
}
|
||||
}
|
||||
&-no-form-message-container {
|
||||
height: 256px;
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
&-no-form-message-list {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center !important;
|
||||
}
|
||||
&-no-form-message {
|
||||
padding-bottom: 10px;
|
||||
font-size: var(--theme-display-1-font-size);
|
||||
line-height: 36px;
|
||||
letter-spacing: -1.3px;
|
||||
opacity: 0.54;
|
||||
margin: auto;
|
||||
width: fit-content !important;
|
||||
}
|
||||
&-no-form-submessage {
|
||||
font-size: var(--theme-subheading-2-font-size);
|
||||
opacity: 0.54;
|
||||
margin: auto;
|
||||
width: fit-content !important;
|
||||
}
|
||||
&-no-form-mat-card-actions.mat-card-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& .mat-button {
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& .mat-button-wrapper {
|
||||
opacity: 0.54;
|
||||
font-size: var(--theme-button-font-size);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,6 +20,7 @@ import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angu
|
||||
@Component({
|
||||
selector: 'adf-task-standalone',
|
||||
templateUrl: './task-standalone.component.html',
|
||||
styleUrls: ['./task-standalone.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
@mixin adf-task-standalone-component-theme($theme) {
|
||||
|
||||
$config: mat-typography-config();
|
||||
$background: map-get($theme, background);
|
||||
|
||||
.adf {
|
||||
&-message-card {
|
||||
width: 60%;
|
||||
box-sizing: border-box;
|
||||
margin: 16px auto;
|
||||
.mat-card-actions {
|
||||
border-top: solid 1px mat-color($background, status-bar);
|
||||
}
|
||||
}
|
||||
&-no-form-message-container {
|
||||
height: 256px;
|
||||
width: 100%;
|
||||
display: table;
|
||||
}
|
||||
&-no-form-message-list {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
text-align: center !important;
|
||||
}
|
||||
&-no-form-message {
|
||||
padding-bottom: 10px;
|
||||
font-size: mat-font-size($config, display-1);
|
||||
line-height: 36px;
|
||||
letter-spacing: -1.3px;
|
||||
opacity: 0.54;
|
||||
margin: auto;
|
||||
width: fit-content !important;
|
||||
}
|
||||
&-no-form-submessage {
|
||||
font-size: mat-font-size($config, subheading-2);
|
||||
opacity: 0.54;
|
||||
margin: auto;
|
||||
width: fit-content !important;
|
||||
}
|
||||
&-no-form-mat-card-actions.mat-card-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
& .mat-button {
|
||||
text-transform: uppercase;
|
||||
border-radius: 5px;
|
||||
}
|
||||
& .mat-button-wrapper {
|
||||
opacity: 0.54;
|
||||
font-size: mat-font-size($config, button);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user