prime: reduce bundle css (in progress)

Signed-off-by: Johnny Mariéthoz <[email protected]>
rero · Nov 13, 2024 · 2d11278 · 2d11278
1 parent d41c42c
commit 2d11278
Show file tree

Hide file tree

Showing 35 changed files with 315 additions and 376 deletions.
diff --git a/angular.json b/angular.json
@@ -59,8 +59,7 @@
             "allowedCommonJsDependencies": [
               "crypto-js",
               "easymde",
-              "js-generate-password",
-              "moment"
+              "js-generate-password"
             ],
             "outputPath": "dist/ng-core-tester",
             "index": "projects/ng-core-tester/src/index.html",

diff --git a/projects/ng-core-tester/src/app/app.component.html b/projects/ng-core-tester/src/app/app.component.html
@@ -17,7 +17,7 @@
 <p-toast />
 <p-confirmDialog />
 
-<div class="container my-5">
+<div class="p-4 border-1 surface-border border-round-md my-5">
   <div class="flex align-items-center gap-2 mb-4">
     <div class="flex flex-auto">
       <app-menu />

diff --git a/projects/ng-core-tester/src/app/app.component.ts b/projects/ng-core-tester/src/app/app.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { CoreConfigService, RecordEvent, RecordService, TitleMetaService } from '@rero/ng-core';
 import { MenuItem, MessageService } from 'primeng/api';
 

diff --git a/projects/ng-core-tester/src/app/record/editor/schema.json b/projects/ng-core-tester/src/app/record/editor/schema.json
@@ -262,7 +262,7 @@
       "widget": {
         "formlyConfig": {
           "props": {
-            "cssClass": "border border-info rounded p-2"
+            "cssClass": "p-2"
           }
         }
       }

diff --git a/projects/ng-core-tester/src/styles.scss b/projects/ng-core-tester/src/styles.scss
@@ -14,21 +14,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-$fa-font-path: "~font-awesome/fonts";
 
 @import "font-awesome/scss/font-awesome.scss";
-
-@import "node_modules/primeng/resources/primeng.min.css";
-@import "node_modules/primeflex/primeflex";
-@import "node_modules/primeicons/primeicons.css";
-@import "node_modules/primeng/resources/themes/aura-light-blue/theme.css";
-@import "../../rero/ng-core/assets/scss/ng-core.scss";
+@import "primeng/resources/primeng";
+@import "primeicons/primeicons.css";
+@import "primeng/resources/themes/aura-light-blue/theme.css";
 @import "easymde/dist/easymde.min";
-
-.p-menubar {
-  @extend .mb-0, .border-none, .bg-white;
-}
-
-.container {
-  @extend .p-4, .border-1, .surface-border, .border-round-md;
-}
+@import "node_modules/ngx-spinner/animations/ball-zig-zag.css";
+@import "primeflex/primeflex";
+@import "projects/rero/ng-core/assets/scss/ng-core.scss";
diff --git a/projects/rero/ng-core/assets/scss/_editor.scss b/projects/rero/ng-core/assets/scss/_editor.scss
@@ -1,8 +1,27 @@
-ng-core-editor-formly-field-textarea,
-ng-core-formly-field-primeng-input,
-ng-core-tree-select,
-ng-core-multi-select,
-ng-core-primeng-select,
-ng-core-date-picker {
-  @extend .w-full;
+/*
+ * RERO angular core
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@layer ng-core {
+  ng-core-editor-formly-field-textarea,
+  ng-core-formly-field-primeng-input,
+  ng-core-tree-select,
+  ng-core-multi-select,
+  ng-core-primeng-select,
+  ng-core-date-picker {
+    @extend .w-full;
+  }
 }
diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss
@@ -14,34 +14,51 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-@import 'primeflex/primeflex';
-:root {
-  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  --font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
 
-html,
-body {
-  @extend .line-height-1, .text-sm;
-}
+@layer ng-core {
+  :root {
+    font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
+      sans-serif;
+    --font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial,
+      sans-serif;
 
-a {
-  @extend .text-blue-500, .no-underline;
-}
+    @extend .text-sm;
 
-a:hover {
-  @extend .text-blue-600, .underline;
-}
+    a {
+      @extend .text-blue-500, .no-underline;
+    }
 
-.p-submenu-list {
-  z-index: 1000;
-}
+    a:hover {
+      @extend .text-blue-600, .underline;
+    }
 
-.p-menuitem {
-  a {
-    @extend .text-color;
-  }
-  a:hover {
-    @extend .no-underline;
+    .p-submenu-list {
+      z-index: 1000;
+    }
+
+    .p-menuitem {
+      a {
+        @extend .text-color;
+      }
+      a:hover {
+        @extend .no-underline;
+      }
+    }
+
+    dl.metadata {
+      @extend .grid, .my-0, .w-full;
+      dt {
+        @extend .font-bold, .col-12, .py-0;
+        @include styleclass('md:col-4');
+      }
+      dd {
+        @extend .col-12, .py-0;
+        @include styleclass('md:col-8');
+        margin-inline-start: 0;
+      }
+    }
+    .p-menubar {
+      @extend .mb-0, .border-none, .bg-white;
+    }
   }
 }
diff --git a/projects/rero/ng-core/assets/scss/_typography.scss b/projects/rero/ng-core/assets/scss/_typography.scss
@@ -14,69 +14,76 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-@import "primeflex/primeflex";
 
+@layer ng-core {
+  :root {
+    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+      @extend .mt-0, .mb-2, .font-medium, .line-height-2;
+    }
 
-h1, h2, h3, h4, h5, h6,
-.h1, .h2, .h3, .h4, .h5, .h6 {
-  @extend .mt-0, .mb-2, .font-medium, .line-height-2;
-}
+    h1, .h1 {
+      @extend .text-5xl;
+    }
 
-h1, .h1 {
-  @extend .text-5xl;
-}
+    h2, .h2 {
+      @extend .text-4xl;
+    }
 
-h2, .h2 {
-  @extend .text-4xl;
-}
+    h3, .h3 {
+      @extend .text-3xl;
+    }
 
-h3, .h3 {
-  @extend .text-3xl;
-}
+    h4, .h4 {
+      @extend .text-2xl;
+    }
 
-h4, .h4 {
-  @extend .text-2xl;
-}
+    h5, .h5 {
+      @extend .text-xl;
+    }
 
-h5, .h5 {
-  @extend .text-xl;
-}
+    h6, .h6 {
+      @extend .text-lg;
+    }
 
-h6, .h6 {
-  @extend .text-lg;
-}
+    // from aura-light-blue message theme
+    .text-info {
+      color: #2563eb;
+    }
 
-// from aura-light-blue message theme
-.text-info {
-  color: #2563eb;
-}
+    .text-success {
+      color: #16a34a;
+    }
 
-.text-success {
-  color: #16a34a;
-}
+    .text-warning {
+      color: #ca8a04;
+    }
 
-.text-warning {
-  color: #ca8a04;
-}
+    .text-error {
+      color: #dc2626;
+    }
 
-.text-error {
-  color: #dc2626;
-}
+    .border-info {
+      border-color: #2563eb;
+    }
 
-.text-link-color {
-  @extend .text-blue-500;
-}
+    .border-success {
+      border-color: #16a34a;
+    }
 
-.text-link-color-hover {
-  @extend .text-blue-600;
-}
+    .border-warning {
+      border-color: #ca8a04;
+    }
 
-.text-link {
-  @extend .text-link-color;
-  &:hover {
-    @extend .text-link-color-hover;
-    @extend .underline;
-  }
-}
+    .border-error {
+      border-color: #dc2626;
+    }
 
+    .text-link {
+      @include styleclass('text-blue-500 hover:text-blue-600 hover:underline cursor-pointer');
+    }
 
+    .text-link-secondary {
+      @include styleclass('text-color-secondary hover:text-blue-600 cursor-pointer');
+    }
+  }
+}
diff --git a/projects/rero/ng-core/assets/scss/ng-core.scss b/projects/rero/ng-core/assets/scss/ng-core.scss
@@ -18,3 +18,6 @@
 @import "./_editor";
 @import "./_theme";
 @import "./_typography";
+
+@import "../../src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss";
+@import "../../src/lib/record/editor/editor.component.scss";
diff --git a/projects/rero/ng-core/ng-package.json b/projects/rero/ng-core/ng-package.json
@@ -1,7 +1,7 @@
 {
   "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
   "dest": "../../../dist/rero/ng-core",
-  "assets": ["./assets"],
+  "assets": ["./assets", "./src/**/*.scss"],
   "lib": {
     "entryFile": "src/public-api.ts"
   }

diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.html b/projects/rero/ng-core/src/lib/record/editor/editor.component.html
@@ -15,9 +15,9 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <form [formGroup]="form" (ngSubmit)="submit()">
-  <div class="grid editor">
-    <div class="flex header align-items-stretch w-full my-2 p-2 border-bottom-1 surface-border">
-      <div class="flex align-items-center w-full">
+  <div class="grid">
+    <div class="col-12 flex header sticky top-0 bg-white h-full z-5 justify-content-between align-items-center my-2 p-2 border-bottom-1 surface-border">
+      <div class="">
         @if (rootField) {
           <legend class="text-2xl">
               <span [pTooltip]="description" tooltipPosition="top">
@@ -26,7 +26,7 @@
           </legend>
         }
       </div>
-      <div class="flex align-items-center justify-content-end w-full">
+      <div class="flex align-items-center justify-content-end">
         <!-- cancel button -->
         <p-button
         id="editor-cancel-button"
@@ -69,20 +69,9 @@
 
     <!-- add fields section -->
     @if (editorSettings.longMode) {
-      <div class="col-2 bd-sidebar">
+      <div class="col-2 bd-sidebar overflow-y-auto sticky">
         <ng-core-editor-add-field-editor [editorComponent]="editorComponent" />
       </div>
-      <!-- TOC navigation -->
-      <nav class="col-2 bd-toc hidden lg:block" aria-label="Secondary navigation">
-          <label for="addField" translate>Jump to</label>
-          <ul class="section-nav">
-            @for (f of tocFields$ | async; track f) {
-              <li class="toc-entry mb-1">
-                <a href (click)="setFocus($event, f)">{{ f.props.label | translate }}</a>
-              </li>
-            }
-          </ul>
-      </nav>
     }
 
     <!-- editor itself -->
@@ -96,6 +85,20 @@
           (modelChange)="modelChanged($event)"
         />
     </div>
+
+    @if (editorSettings.longMode) {
+      <!-- TOC navigation -->
+      <nav class="col-2 py-2 text-sm bd-toc sticky overflow-y-auto hidden lg:block" aria-label="Secondary navigation">
+          <label for="addField" translate>Jump to</label>
+          <ul class="ml-2 pl-0 list-none">
+            @for (f of tocFields$ | async; track f) {
+              <li class="mb-1">
+                <span class="text-link-secondary" (click)="setFocus($event, f)">{{ f.props.label | translate }}</span>
+              </li>
+            }
+          </ul>
+      </nav>
+    }
   </div>
 </form>
 @if (error) {