[AAE-16369] use layout-bp mixin where applicable (#8945)

* [AAE-15828] layout-bp mixin for core * [AAE-15828] fixed import * [AAE-15828] layout-bp for process-services-cloud * [AAE-15828] layout-bp for process-services * [AAE-15828] layout-bp for content-services * [AAE-15828] fixed incorrect values * [AAE-15828] lint fix * configure stylePreprocessorOptions for cross project scss importing * scss import cardio * set correct style paths for packages * [AAE-16369] addded missing test config * [ci:force] fix for the pretheme build * unified configs for libs
Alfresco · Oct 23, 2023 · 3912a65 · 3912a65
1 parent f6f74f4
commit 3912a65
Show file tree

Hide file tree

Showing 32 changed files with 245 additions and 61 deletions.
diff --git a/angular.json b/angular.json
@@ -29,7 +29,7 @@
             "polyfills": "demo-shell/src/polyfills.ts",
             "stylePreprocessorOptions": {
               "includePaths": [
-                "lib"
+                "lib", "lib/core/src/lib"
               ]
             },
             "assets": [
@@ -272,6 +272,11 @@
             "karmaConfig": "lib/core/karma.conf.js",
             "sourceMap": true,
             "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            },
             "styles": [
               "demo-shell/src/styles.scss"
             ]
@@ -307,7 +312,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "ci": {
@@ -328,7 +338,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "ci": {
@@ -378,7 +393,12 @@
                 "command": "npm publish --tag {args.tag}",
                 "forwardAllArgs": true
               }
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         }
       }
@@ -410,7 +430,12 @@
             "tsConfig": "lib/content-services/tsconfig.spec.json",
             "karmaConfig": "lib/content-services/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -435,7 +460,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "ci": {
@@ -456,7 +486,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "ci": {
@@ -518,7 +553,12 @@
             "tsConfig": "lib/process-services/tsconfig.spec.json",
             "karmaConfig": "lib/process-services/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -584,7 +624,12 @@
             "tsConfig": "lib/process-services-cloud/tsconfig.spec.json",
             "karmaConfig": "lib/process-services-cloud/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -609,7 +654,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "ci": {
@@ -630,7 +680,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "ci": {
@@ -703,7 +758,12 @@
             "tsConfig": "lib/insights/tsconfig.spec.json",
             "karmaConfig": "lib/insights/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -768,7 +828,12 @@
             "tsConfig": "lib/extensions/tsconfig.spec.json",
             "karmaConfig": "lib/extensions/karma.conf.js",
             "sourceMap": true,
-            "codeCoverage": true
+            "codeCoverage": true,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           }
         },
         "lint": {
@@ -816,7 +881,12 @@
                 "entryName": "shared",
                 "entryPath": "/lib/testing/src/lib/shared/index.ts"
               }
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -897,7 +967,12 @@
             "outputPath": "dist/libs/eslint-plugin-eslint-angular",
             "main": "lib/eslint-angular/index.ts",
             "generatePackageJson" : true,
-            "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json"
+            "tsConfig": "lib/eslint-angular/tsconfig.lib.prod.json",
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -956,7 +1031,12 @@
           "options": {
             "commands": [
               "cd lib/cli && npm i && npm run dist"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "production": {
@@ -1032,6 +1112,11 @@
             "browserTarget": "stories:storybook",
             "configDir": "lib/stories/.storybook",
             "compodoc": false,
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            },
             "styles": [
               "demo-shell/src/assets/fonts/muli/muli.css",
               "demo-shell/src/styles.scss",
@@ -1059,7 +1144,12 @@
               "demo-shell/src/custom-style-dev.scss",
               "node_modules/cropperjs/dist/cropper.min.css",
               "node_modules/pdfjs-dist/web/pdf_viewer.css"
-            ]
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "lib", "lib/core/src/lib"
+              ]
+            }
           },
           "configurations": {
             "ci": {

diff --git a/lib/config/webpack.style.js b/lib/config/webpack.style.js
@@ -41,5 +41,11 @@ module.exports = {
         new DisableOutputWebpackPlugin({
             test: /\.js$/,
         })
-    ]
+    ],
+
+    resolve: {
+        alias: {
+            'styles': path.resolve(__dirname, '../core/src/lib/styles'),
+        }
+    }
 };
diff --git a/lib/content-services/ng-package.json b/lib/content-services/ng-package.json
@@ -20,6 +20,9 @@
   ],
   "lib": {
     "entryFile": "src/public-api.ts",
-    "flatModuleFile": "adf-content-services"
+    "flatModuleFile": "adf-content-services",
+    "styleIncludePaths": [
+      "../core/src/lib"
+    ]
   }
 }
diff --git a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf {
     &-userinfo-container {
         display: flex;
@@ -12,7 +14,7 @@
     &-userinfo-name {
         padding: 0 5px;
 
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             display: none;
         }
     }
@@ -90,7 +92,7 @@
         display: flex;
         justify-content: space-between;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             padding: 10px;
         }
     }

diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.scss b/lib/content-services/src/lib/document-list/components/document-list.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .adf-document-list {
     min-height: 0;
     height: 100%;
@@ -141,7 +143,7 @@
         word-break: break-all;
         white-space: pre-line;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             font-size: 48px;
         }
     }
@@ -163,12 +165,12 @@
         object-fit: contain;
         margin-top: 17px;
 
-        @media screen and (max-width: 599px) {
+        @include layout-bp(lt-sm) {
             width: 250px;
         }
     }
 
-    @media screen and (max-width: 960px) {
+    @include layout-bp(lt-md) {
         &-drag-drop,
         &-any-files-here-to-add {
             display: none;

diff --git a/lib/content-services/src/lib/search/components/search-control.component.scss b/lib/content-services/src/lib/search/components/search-control.component.scss
@@ -1,4 +1,5 @@
 @use '@angular/material' as mat;
+@import 'styles/flex';
 
 $mat-menu-overlay-min-width: 112px !default;   // 56 * 2
 $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
@@ -23,7 +24,7 @@ $mat-menu-overlay-max-width: 280px !default;   // 56 * 5
         background-color: var(--adf-theme-background-card-color);
         border-radius: 2px;
 
-        @media screen and (max-width: 959px) {
+        @include layout-bp(lt-md) {
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;

diff --git a/lib/core/ng-package.json b/lib/core/ng-package.json
@@ -35,7 +35,10 @@
   ],
   "lib": {
     "entryFile": "./src/public-api.ts",
-    "flatModuleFile": "adf-core"
+    "flatModuleFile": "adf-core",
+    "styleIncludePaths": [
+      "./src/lib"
+    ]
   },
   "allowedNonPeerDependencies": [
     "cropperjs",

diff --git a/lib/core/shell/ng-package.json b/lib/core/shell/ng-package.json
@@ -1,6 +1,9 @@
 {
-  "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "lib": {
-    "entryFile": "src/index.ts"
+    "entryFile": "src/index.ts",
+    "styleIncludePaths": [
+      "../src/lib"
+    ]
   }
 }
diff --git a/lib/core/shell/src/lib/components/shell/shell.component.scss b/lib/core/shell/src/lib/components/shell/shell.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/flex';
+
 .app-shell {
     display: flex;
     flex-direction: column;
@@ -21,7 +23,7 @@
     }
 }
 
-@media screen and (max-width: 599px) {
+@include layout-bp(lt-sm) {
     .adf-app-title {
         display: none;
     }