[ADF-5406] SCSS and HTML template path fixes (#7063)

* remove useless mixin * fix scss paths * style fixes * fix styles * style fixes * style fixes * style fixes * style fixes * insights fixes * css and template path fixes * bug fixes
2025-07-24 17:32:15 +00:00 · 2021-06-01 09:21:00 +01:00
parent 9e0000a307
commit e94b2f99bd
229 changed files with 557 additions and 934 deletions
--- a/demo-shell/src/app/components/about/about.component.ts
+++ b/demo-shell/src/app/components/about/about.component.ts
@@ -27,7 +27,7 @@ import { AppConfigService } from '@alfresco/adf-core';
@Component({
    selector: 'app-about-page',
    templateUrl: './about.component.html',
-    styleUrls: ['about.component.scss']
+    styleUrls: ['./about.component.scss']
 })
 export class AboutComponent implements OnInit {
    url = `https://github.com/Alfresco/${name}/commits/${commit}`;
--- a/demo-shell/src/app/components/app-layout/app-layout.component.scss
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.scss
@@ -2,7 +2,7 @@
    $primary: map-get($theme, primary);
    $minimumAppWidth: 320px;

-    @media screen and ($mat-xsmall) {
+    @media screen and (max-width: 599px) {
        app-search-bar {
            width: 150px;
        }
@@ -46,13 +46,13 @@
        }
    }

-    @media screen and ($mat-small) {
+    @media screen and (max-width: 959px) {
        .app-menu {
            padding-top: 0;
        }
    }

-    @media screen and ($mat-xsmall) {}
+    @media screen and (max-width: 599px) {}

    mat-sidenav-content > div {
        display: flex;
--- a/demo-shell/src/app/components/app-layout/app-layout.component.ts
+++ b/demo-shell/src/app/components/app-layout/app-layout.component.ts
@@ -22,8 +22,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-    templateUrl: 'app-layout.component.html',
-    styleUrls: ['app-layout.component.scss'],
+    templateUrl: './app-layout.component.html',
    host: {
        'class': 'app-layout'
    },
--- a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.ts
+++ b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.ts
@@ -34,8 +34,8 @@ import {
 } from '../../../cloud/custom-form-components/custom-editor.component';

@Component({
-    templateUrl: 'cloud-form-demo.component.html',
-    styleUrls: ['cloud-form-demo.component.scss'],
+    templateUrl: './cloud-form-demo.component.html',
+    styleUrls: ['./cloud-form-demo.component.scss'],
    providers: [
        { provide: FormRenderingService, useClass: CloudFormRenderingService }
    ]
--- a/demo-shell/src/app/components/aspect-list-sample/aspect-list-sample.component.ts
+++ b/demo-shell/src/app/components/aspect-list-sample/aspect-list-sample.component.ts
@@ -20,8 +20,8 @@ import { Component } from '@angular/core';

@Component({
    selector: 'app-expandable-menu',
-    templateUrl: 'aspect-list-sample.component.html',
-    styleUrls: ['aspect-list-sample.component.scss']
+    templateUrl: './aspect-list-sample.component.html',
+    styleUrls: ['./aspect-list-sample.component.scss']
 })
 export class AspectListSampleComponent {

--- a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts
+++ b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts
@@ -21,7 +21,7 @@ import { ActivatedRoute } from '@angular/router';
@Component({
    selector: 'app-cloud-breadcrumbs',
    templateUrl: './cloud-breadcrumb-component.html',
-    styleUrls: ['cloud-breadcrumb-component.scss']
+    styleUrls: ['./cloud-breadcrumb-component.scss']
 })
 export class CloudBreadcrumbsComponent implements OnInit {
    appName: string;
--- a/demo-shell/src/app/components/cloud/cloud-filters-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/cloud-filters-demo.component.ts
@@ -24,7 +24,7 @@ import { ProcessFilterCloudModel } from '@alfresco/adf-process-services-cloud';
@Component({
    selector: 'app-cloud-filters-demo',
    templateUrl: './cloud-filters-demo.component.html',
-    styleUrls: ['cloud-filters-demo.component.scss'],
+    styleUrls: ['./cloud-filters-demo.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class CloudFiltersDemoComponent implements OnInit {
--- a/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts
@@ -23,7 +23,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-    templateUrl: 'service-task-list-cloud-demo.component.html'
+    templateUrl: './service-task-list-cloud-demo.component.html'
 })
 export class ServiceTaskListCloudDemoComponent implements OnInit, OnDestroy {

--- a/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.scss
--- a/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/start-process-cloud-demo.component.ts
@@ -24,7 +24,6 @@ import { CloudFormRenderingService } from '@alfresco/adf-process-services-cloud'

@Component({
    templateUrl: './start-process-cloud-demo.component.html',
-    styleUrls: ['./start-process-cloud-demo.component.scss'],
    providers: [
        { provide: FormRenderingService, useClass: CloudFormRenderingService }
    ]
--- a/demo-shell/src/app/components/cloud/start-task-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/start-task-cloud-demo.component.scss
--- a/demo-shell/src/app/components/cloud/start-task-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/start-task-cloud-demo.component.ts
@@ -21,8 +21,7 @@ import { NotificationService } from '@alfresco/adf-core';
 import { CloudLayoutService } from './services/cloud-layout.service';

@Component({
-    templateUrl: './start-task-cloud-demo.component.html',
-    styleUrls: ['./start-task-cloud-demo.component.scss']
+    templateUrl: './start-task-cloud-demo.component.html'
 })
 export class StartTaskCloudDemoComponent implements OnInit {

--- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss
+++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss
--- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
+++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
@@ -24,8 +24,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-    templateUrl: 'tasks-cloud-demo.component.html',
-    styleUrls: ['tasks-cloud-demo.component.scss']
+    templateUrl: './tasks-cloud-demo.component.html'
 })
 export class TasksCloudDemoComponent implements OnInit, OnDestroy {

--- a/demo-shell/src/app/components/config-editor/config-editor.component.ts
+++ b/demo-shell/src/app/components/config-editor/config-editor.component.ts
@@ -27,7 +27,7 @@ import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-config-editor',
-    templateUrl: 'config-editor.component.html',
+    templateUrl: './config-editor.component.html',
    styleUrls: ['./config-editor.component.scss']
 })
 export class ConfigEditorComponent implements OnDestroy {
--- a/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.scss
+++ b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.scss
--- a/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts
+++ b/demo-shell/src/app/components/confirm-dialog/confirm-dialog-example.component.ts
@@ -21,8 +21,7 @@ import { ConfirmDialogComponent } from '@alfresco/adf-content-services';

@Component({
    selector: 'app-confirm-dialog-example',
-    templateUrl: 'confirm-dialog-example.component.html',
-    styleUrls: ['confirm-dialog-example.component.scss']
+    templateUrl: './confirm-dialog-example.component.html'
 })
 export class ConfirmDialogExampleComponent {

--- a/demo-shell/src/app/components/file-view/file-view.component.ts
+++ b/demo-shell/src/app/components/file-view/file-view.component.ts
@@ -23,8 +23,8 @@ import { PreviewService } from '../../services/preview.service';

@Component({
    selector: 'app-file-view',
-    templateUrl: 'file-view.component.html',
-    styleUrls: ['file-view.component.scss'],
+    templateUrl: './file-view.component.html',
+    styleUrls: ['./file-view.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class FileViewComponent implements OnInit {
--- a/demo-shell/src/app/components/files/custom-sources.component.ts
+++ b/demo-shell/src/app/components/files/custom-sources.component.ts
@@ -20,7 +20,7 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';

@Component({
    selector: 'app-custom-sources',
-    templateUrl: 'custom-sources.component.html'
+    templateUrl: './custom-sources.component.html'
 })
 export class CustomSourcesComponent {

--- a/demo-shell/src/app/components/files/files.component.scss
+++ b/demo-shell/src/app/components/files/files.component.scss
@@ -3,7 +3,7 @@
        margin: 10px !important;
    }

-    @media screen and ($mat-xsmall) {
+    @media screen and (max-width: 599px) {
        .app-container {
            margin: 0;
        }
--- a/demo-shell/src/app/components/files/files.component.ts
+++ b/demo-shell/src/app/components/files/files.component.ts
@@ -54,7 +54,6 @@ const DEFAULT_FOLDER_TO_SHOW = '-my-';
@Component({
    selector: 'app-files-component',
    templateUrl: './files.component.html',
-    styleUrls: ['./files.component.scss'],
    providers: [
        { provide: FormRenderingService, useClass: ProcessFormRenderingService }
    ]
--- a/demo-shell/src/app/components/form/form-list.component.ts
+++ b/demo-shell/src/app/components/form/form-list.component.ts
@@ -23,8 +23,8 @@ import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-form-list',
-    templateUrl: 'form-list.component.html',
-    styleUrls: ['form-list.component.scss']
+    templateUrl: './form-list.component.html',
+    styleUrls: ['./form-list.component.scss']
 })
 export class FormListComponent implements OnInit, OnDestroy {

--- a/demo-shell/src/app/components/form/form-loading.component.ts
+++ b/demo-shell/src/app/components/form/form-loading.component.ts
@@ -29,8 +29,8 @@ import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-form-loading',
-    templateUrl: 'form-loading.component.html',
-    styleUrls: ['form-loading.component.scss'],
+    templateUrl: './form-loading.component.html',
+    styleUrls: ['./form-loading.component.scss'],
    providers: [{ provide: FormService, useClass: FakeFormService }]
 })
 export class FormLoadingComponent implements OnInit, OnDestroy {
--- a/demo-shell/src/app/components/form/form.component.ts
+++ b/demo-shell/src/app/components/form/form.component.ts
@@ -24,8 +24,8 @@ import { takeUntil } from 'rxjs/operators';

@Component({
    selector: 'app-form',
-    templateUrl: 'form.component.html',
-    styleUrls: ['form.component.scss'],
+    templateUrl: './form.component.html',
+    styleUrls: ['./form.component.scss'],
    providers: [
        { provide: FormService, useClass: InMemoryFormService },
        { provide: FormRenderingService, useClass: ProcessFormRenderingService }
--- a/demo-shell/src/app/components/login/login.component.scss
+++ b/demo-shell/src/app/components/login/login.component.scss
@@ -26,7 +26,7 @@
        display: none;
    }

-    @media screen and ($mat-small) {
+    @media screen and (max-width: 959px) {
        .app-settings, .app-setting-button.mat-fab.mat-accent {
            display: none;
        }
--- a/demo-shell/src/app/components/login/login.component.ts
+++ b/demo-shell/src/app/components/login/login.component.ts
@@ -21,8 +21,7 @@ import { LogService } from '@alfresco/adf-core';

@Component({
    selector: 'app-login',
-    templateUrl: './login.component.html',
-    styleUrls: ['./login.component.scss']
+    templateUrl: './login.component.html'
 })
 export class LoginComponent {

--- a/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts
+++ b/demo-shell/src/app/components/overlay-viewer/overlay-viewer.component.ts
@@ -18,7 +18,7 @@
 import { Component, Input } from '@angular/core';

@Component({
-    templateUrl: 'overlay-viewer.component.html'
+    templateUrl: './overlay-viewer.component.html'
 })
 export class OverlayViewerComponent {

--- a/demo-shell/src/app/components/pipes/pipes.component.ts
+++ b/demo-shell/src/app/components/pipes/pipes.component.ts
@@ -21,7 +21,7 @@ import { AppConfigService } from '@alfresco/adf-core';
@Component({
    selector: 'app-pipes-page',
    templateUrl: './pipes.component.html',
-    styleUrls: ['pipes.component.scss']
+    styleUrls: ['./pipes.component.scss']
 })
 export class PipesComponent {

--- a/demo-shell/src/app/components/process-service/process-service.component.scss
+++ b/demo-shell/src/app/components/process-service/process-service.component.scss
@@ -1,100 +1,97 @@
-@mixin app-process-service-component-theme($theme) {
-    .app-no-form-container {
-        text-align: center;
-        font-weight: 600;
-        font-size: 18px;
+.app-no-form-container {
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+}
+
+.app-grid {
+    .app-grid-item {
+        margin: 4px;
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+            0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        padding: 10px;
    }

-    .app-grid {
-        .app-grid-item {
-            margin: 4px;
-            box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-            0 3px 1px -2px rgba(0, 0, 0, 0.2),
-            0 1px 5px 0 rgba(0, 0, 0, 0.12);
-            padding: 10px;
-        }
+    .app-list-buttons {
+        margin-bottom: 24px;
+    }

-        .app-list-buttons {
-            margin-bottom: 24px;
-        }
+    .app-tasks-list.app-small-pagination,
+    .app-processes-list.app-small-pagination {
+        .app-pagination {
+            flex-wrap: wrap;
+            padding-bottom: 24px;
+            padding-top: 8px;

-        .app-tasks-list.app-small-pagination,
-        .app-processes-list.app-small-pagination {
-            .app-pagination {
-
-                flex-wrap: wrap;
-                padding-bottom: 24px;
-                padding-top: 8px;
-
-                &__range-block.app-pagination__block:first-child {
-                    order: 1;
-                    width: 60%;
-                    flex: 0 0 auto;
-                    box-sizing: border-box;
-                    padding-left: 2px;
-                    justify-content: flex-start;
-                }
-
-                &__perpage-block {
-                    order: 3;
-                    width: 60%;
-                    box-sizing: border-box;
-                    padding-left: 2px;
-                    justify-content: flex-start;
-                }
-
-                &__actualinfo-block {
-                    order: 2;
-                    width: 40%;
-                    box-sizing: border-box;
-                    padding-right: 2px;
-                    justify-content: flex-end;
-                }
-
-                &__controls-block {
-                    order: 4;
-                    width: 40%;
-                    box-sizing: border-box;
-                    padding-right: 2px;
-                    justify-content: flex-end;
-                }
+            &__range-block.app-pagination__block:first-child {
+                order: 1;
+                width: 60%;
+                flex: 0 0 auto;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
            }
-        }

-        .app-list {
-            .app-datatable-list {
-                border: none;
+            &__perpage-block {
+                order: 3;
+                width: 60%;
+                box-sizing: border-box;
+                padding-left: 2px;
+                justify-content: flex-start;
            }
-        }

-        mat-slide-toggle {
-            margin: 10px;
-        }
+            &__actualinfo-block {
+                order: 2;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
+            }

-        @media screen and ($mat-small) {
-            container-widget .app-grid-list {
-                flex-direction: column;
+            &__controls-block {
+                order: 4;
+                width: 40%;
+                box-sizing: border-box;
+                padding-right: 2px;
+                justify-content: flex-end;
            }
        }
    }

-    .app-accordion-panel {
-        .mat-expansion-panel {
-            background: inherit;
+    .app-list {
+        .app-datatable-list {
+            border: none;
        }
+    }

-        .mat-expansion-panel-header-title, .mat-expansion-panel-header-description {
-            flex-basis: 0;
-            align-items: center;
-        }
+    mat-slide-toggle {
+        margin: 10px;
+    }

-        .mat-expansion-panel-header-description {
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .app-accordion-title-padding {
-            padding-left: 20px;
+    @media screen and (max-width: 959px) {
+        container-widget .app-grid-list {
+            flex-direction: column;
        }
    }
 }
+
+.app-accordion-panel {
+    .mat-expansion-panel {
+        background: inherit;
+    }
+
+    .mat-expansion-panel-header-title,
+    .mat-expansion-panel-header-description {
+        flex-basis: 0;
+        align-items: center;
+    }
+
+    .mat-expansion-panel-header-description {
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .app-accordion-title-padding {
+        padding-left: 20px;
+    }
+}
--- a/demo-shell/src/app/components/settings/settings.component.ts
+++ b/demo-shell/src/app/components/settings/settings.component.ts
@@ -21,7 +21,7 @@ import { Router } from '@angular/router';

@Component({
    selector: 'app-settings',
-    templateUrl: 'settings.component.html'
+    templateUrl: './settings.component.html'
 })
 export class SettingsComponent {

--- a/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
+++ b/demo-shell/src/app/components/shared-link-view/shared-link-view.component.ts
@@ -20,8 +20,8 @@ import { ActivatedRoute, Router } from '@angular/router';

@Component({
    selector: 'app-shared-link-view',
-    templateUrl: 'shared-link-view.component.html',
-    styleUrls: [ 'shared-link-view.component.scss' ],
+    templateUrl: './shared-link-view.component.html',
+    styleUrls: [ './shared-link-view.component.scss' ],
    encapsulation: ViewEncapsulation.None,
    // tslint:disable-next-line:use-host-property-decorator
    host: { 'class': 'app-shared-link-view' }
--- a/demo-shell/src/app/components/sites/sites.component.scss
+++ b/demo-shell/src/app/components/sites/sites.component.scss
--- a/demo-shell/src/app/components/sites/sites.component.ts
+++ b/demo-shell/src/app/components/sites/sites.component.ts
@@ -19,8 +19,7 @@ import { Component } from '@angular/core';

@Component({
    selector: 'app-sites',
-    templateUrl: 'sites.component.html',
-    styleUrls: ['sites.component.scss']
+    templateUrl: './sites.component.html'
 })
 export class SitesComponent {

--- a/demo-shell/src/app/components/social/social.component.ts
+++ b/demo-shell/src/app/components/social/social.component.ts
@@ -19,8 +19,8 @@ import { Component } from '@angular/core';

@Component({
    selector: 'app-social',
-    templateUrl: 'social.component.html',
-    styleUrls: ['social.component.scss']
+    templateUrl: './social.component.html',
+    styleUrls: ['./social.component.scss']
 })
 export class SocialComponent {

--- a/demo-shell/src/app/components/tag/tag.component.ts
+++ b/demo-shell/src/app/components/tag/tag.component.ts
@@ -19,8 +19,8 @@ import { Component } from '@angular/core';

@Component({
    selector: 'app-tag',
-    templateUrl: 'tag.component.html',
-    styleUrls: ['tag.component.scss']
+    templateUrl: './tag.component.html',
+    styleUrls: ['./tag.component.scss']
 })
 export class TagComponent {

--- a/demo-shell/src/app/components/theme-picker/theme-picker.ts
+++ b/demo-shell/src/app/components/theme-picker/theme-picker.ts
@@ -28,8 +28,8 @@ import { DocsSiteTheme, ThemeStorage } from './theme-storage/theme-storage';

@Component({
    selector: 'app-theme-picker',
-    templateUrl: 'theme-picker.html',
-    styleUrls: ['theme-picker.css'],
+    templateUrl: './theme-picker.html',
+    styleUrls: ['./theme-picker.css'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {'aria-hidden': 'true'}
 })
--- a/demo-shell/src/app/components/trashcan/trashcan.component.scss
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.scss
--- a/demo-shell/src/app/components/trashcan/trashcan.component.ts
+++ b/demo-shell/src/app/components/trashcan/trashcan.component.ts
@@ -24,8 +24,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

@Component({
-    templateUrl: './trashcan.component.html',
-    styleUrls: ['trashcan.component.scss']
+    templateUrl: './trashcan.component.html'
 })
 export class TrashcanComponent implements OnInit, OnDestroy {
    @ViewChild('documentList', { static: true })
--- a/demo-shell/src/app/components/tree-view/tree-view-sample.component.ts
+++ b/demo-shell/src/app/components/tree-view/tree-view-sample.component.ts
@@ -19,8 +19,8 @@ import { Component } from '@angular/core';

@Component({
    selector: 'app-tree-view',
-    templateUrl: 'tree-view-sample.component.html',
-    styleUrls: ['tree-view-sample.component.scss']
+    templateUrl: './tree-view-sample.component.html',
+    styleUrls: ['./tree-view-sample.component.scss']
 })
 export class TreeViewSampleComponent {

--- a/demo-shell/src/app/components/webscript/webscript.component.ts
+++ b/demo-shell/src/app/components/webscript/webscript.component.ts
@@ -20,7 +20,7 @@ import { LogService } from '@alfresco/adf-core';

@Component({
    selector: 'app-webscript',
-    templateUrl: 'webscript.component.html'
+    templateUrl: './webscript.component.html'
 })
 export class WebscriptComponent {

--- a/demo-shell/src/custom-style-dev.scss
+++ b/demo-shell/src/custom-style-dev.scss
@@ -1,7 +1,6 @@
@import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss';
@import './app/components/login/login.component.scss';
-@import './app/components/process-service/process-service.component.scss';


@import '../../lib/content-services/src/lib/styles/index';
@@ -23,7 +22,6 @@ $theme:   mat-light-theme($primary, $accent, $warn);
@include app-layout-theme($theme);
@include app-file-component-theme($theme);
@include app-login-component-theme($theme);
-@include app-process-service-component-theme($theme);


@include adf-content-services-theme($theme);
--- a/demo-shell/src/custom-style.scss
+++ b/demo-shell/src/custom-style.scss
@@ -1,7 +1,6 @@
@import './app/components/app-layout/app-layout.component.scss';
@import './app/components/files/files.component.scss';
@import './app/components/login/login.component.scss';
-@import './app/components/process-service/process-service.component.scss';

@import '~@alfresco/adf-content-services/theming';
@import '~@alfresco/adf-process-services/theming';
@@ -22,7 +21,6 @@ $theme:   mat-light-theme($primary, $accent, $warn);
@include app-layout-theme($theme);
@include app-file-component-theme($theme);
@include app-login-component-theme($theme);
-@include app-process-service-component-theme($theme);

@include adf-content-services-theme($theme);
@include adf-process-services-theme($theme);