feat(board-view) : #MAG-233/234 add zoom levels for board view (#50)

* feat(zoom) #MAG-234 : add zoom component for board view * feat(board): #MAG-233 adapt board CSS for zoom levels --------- Co-authored-by: rseuret <[email protected]>
OPEN-ENT-NG · Oct 3, 2023 · 70ff611 · 70ff611
1 parent a2f535c
commit 70ff611
Show file tree

Hide file tree

Showing 27 changed files with 471 additions and 85 deletions.
diff --git a/src/main/resources/i18n/fr.json b/src/main/resources/i18n/fr.json
@@ -189,5 +189,6 @@
   "magneto.dropzone.overlay.solution": "Veuillez importer un <b>fichier</b>",
   "magneto.dropzone.overlay.action": "J'ai compris",
   "magneto.shared.push.notif.body": "a partagé avec vous un nouveau tableau",
-  "magneto.loading": "Chargement"
+  "magneto.loading": "Chargement",
+  "magneto.zoom": "Zoom"
 }
diff --git a/src/main/resources/public/sass/global/components/_icons.scss b/src/main/resources/public/sass/global/components/_icons.scss
@@ -244,4 +244,12 @@ i {
     font-family: 'magneto-mdi';
     content: '\F04EB';
   }
+  &.magneto-plus::before{
+      font-family: 'magneto-mdi';
+      content: '\F0415';
+  }
+  &.magneto-minus::before{
+    font-family: 'magneto-mdi';
+    content: '\F0374';
+  }
 }
diff --git a/src/main/resources/public/sass/global/components/containers/_board-read.scss b/src/main/resources/public/sass/global/components/containers/_board-read.scss
@@ -98,4 +98,4 @@
     overflow: hidden;
   }
 
-}
+}
diff --git a/src/main/resources/public/sass/global/components/directives/_card-comment.scss b/src/main/resources/public/sass/global/components/directives/_card-comment.scss
@@ -64,6 +64,7 @@
   &-content {
     line-height: 18px;
     margin-left: 40px;
+    white-space: initial !important;
   }
 
-}
+}
diff --git a/src/main/resources/public/sass/global/components/directives/_card-list-item.scss b/src/main/resources/public/sass/global/components/directives/_card-list-item.scss
@@ -18,6 +18,18 @@
     }
   }
 
+  $start: 0;
+  $end: 5;
+  @for $i from $start through $end {
+    &-zoom-#{$i} {
+      $width-value: 120 + $i * 48px;
+      width: #{$width-value};
+      @if $i < 2 {
+        height: #{$width-value};
+      }
+    }
+  }
+
   &.draggable {
     cursor: move;
   }
@@ -31,17 +43,25 @@
     height: 15%;
     align-items: center;
     display: flex;
+    justify-content: space-between;
 
     &.reduced-format {
       height: 20% !important;
     }
+    &.dezoom{
+      height: 25% !important;
+      margin-bottom: 0.5em;
+    }
 
     &-creation {
-      width: 80%;
       margin-left: 8px;
       display: flex;
       flex-direction: column;
 
+      &.dezoom{
+        width: 49%;
+        margin-left: 0;
+      }
       &-user {
         @include noTextOverflow(1);
       }
@@ -73,10 +93,27 @@
     }
   }
 
+  &-flex-row {
+    display: flex;
+    position: relative;
+    align-items: end;
+    bottom: 0;
+  }
   &-preview {
     position: relative;
     height: 18vh;
 
+
+    $start: 0;
+    $end: 5;
+    @for $i from $start through $end {
+      &-zoom-#{$i} {
+        $width-value: 3 + $i * 3em;
+        height: #{$width-value};
+        display: flex;
+        flex: 1;
+      }
+    }
     img {
       margin-left: auto;
       margin-right: auto;
@@ -120,7 +157,14 @@
     bottom: 0;
     left: 0;
     z-index: 1;
-
+    &-zoom-0{
+      margin-left: -5px;
+      height: 1.5em;
+    }
+    &-zoom-1{
+      margin-left: -5px;
+      height: 1.5em;
+    }
     i {
       font-size: $spacing-M;
     }
@@ -137,15 +181,37 @@
   }
 
   &-infos {
+    &-0 ,&-1{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex-wrap: nowrap;
+      align-content: stretch;
+      align-items: stretch;
+      height: 70%;
+    }
 
     &-title {
       font-size: 16px;
       font-weight: bold;
       margin-bottom: 5px;
       height: 3vh;
-
+      white-space: initial;
       &-ellipsis {
         @include noTextOverflow(1);
+        height: 1.5em;
+        &.dezoom-0{
+          @include noTextOverflow(3);
+          width: 100%;
+          line-height: 18px;
+          height: auto;
+        }
+        &.dezoom-1{
+          @include noTextOverflow(4);
+          line-height: 130%;
+          width: 100%;
+          height: auto;
+        }
       }
 
       &.reduced-format {
@@ -183,4 +249,4 @@
     font-size: 25px;
     right: 5px;
   }
-}
+}
diff --git a/src/main/resources/public/sass/global/components/directives/_card-list.scss b/src/main/resources/public/sass/global/components/directives/_card-list.scss
@@ -2,14 +2,25 @@
   &.no-background-image {
     background: $magneto-lighter-light-grey;
   }
+  $start: 0;
+  $end: 5;
+  @for $i from $start through $end {
+    &-zoom-#{$i} {
+      $width-value: 120 + $i * 48px;
+      grid-template-columns: repeat(auto-fill, minmax(#{$width-value}, 1fr));
+    }
+  }
+
+  transform-origin: 0 0;
+  display: grid;
+  grid-gap: 10px;
+  column-gap: 14px;
+  grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
+  grid-auto-rows: 0;
 
   &-free {
     min-height: 70vh;
     justify-content: center;
-    display: grid;
-    grid-gap: 10px;
-    grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
-    grid-auto-rows: 0;
   }
 
   &-vertical {
@@ -18,7 +29,6 @@
     overflow-x: hidden;
     display: grid;
     grid-gap: 10px;
-    grid-template-columns: repeat(auto-fill, minmax(230px,1fr));
     grid-auto-rows: 0;
   }
 
@@ -27,7 +37,6 @@
     overflow-x: auto;
     flex-wrap: nowrap;
     padding-bottom: 20px;
-    display: flex;
     gap: 10px;
 
   }
@@ -37,4 +46,4 @@
     overflow-y: scroll;
     height: 55vh;
   }
-}
+}
diff --git a/src/main/resources/public/sass/global/components/directives/_index.scss b/src/main/resources/public/sass/global/components/directives/_index.scss
@@ -23,4 +23,5 @@
 @import 'comments-panel';
 @import 'board-description-lightbox';
 @import 'favorite-button';
-@import 'pdf-viewer';
+@import 'pdf-viewer';
+@import 'zoom';
diff --git a/src/main/resources/public/sass/global/components/directives/_section-list.scss b/src/main/resources/public/sass/global/components/directives/_section-list.scss
@@ -5,6 +5,14 @@
   overflow-y: hidden;
   min-width: min-content;
 
+  $start: 3;
+  $end: 5;
+  @for $i from $start through $end {
+    &-zoom-#{$i} {
+      $width-value: 100 + ($i - 3) * 20%;
+      width: $width-value
+    }
+  }
 
   i.magneto-card-settings {
     font-size: 25px;
@@ -113,4 +121,4 @@
   &-content-vertical:not(:first-child) {
     border-left: solid 2px rgba(211, 211, 211, .5);
   }
-}
+}
diff --git a/src/main/resources/public/sass/global/components/directives/_zoom.scss b/src/main/resources/public/sass/global/components/directives/_zoom.scss
@@ -0,0 +1,52 @@
+.zoom{
+  background-color: $magneto-grey;
+  opacity: 75%;
+  display: flex;
+  color: $magneto-white;
+  position: fixed;
+  border-radius: 32px;
+  padding: 8px;
+  right: 45%;
+  bottom: 1em;
+  z-index: 2;
+
+  &-plus{
+    font-size: 32px;
+    padding-left: 1em;
+    margin-top: 3px;
+    &-disabled{
+      color: $magneto-light-grey;
+    }
+  }
+  &-minus{
+    padding-right: 1em;
+    font-size: 32px;
+    margin-top: 3px;
+    &-disabled{
+      color: $magneto-light-grey;
+    }
+  }
+  &-label{
+    margin: 0 1em ;
+  }
+
+  &-line1 {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 20%;
+    width: 40px;
+    height: 1px;
+    background-color: #ffffff;
+  }
+
+  &-line2 {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 62%;
+    width: 40px;
+    height: 1px;
+    background-color: #ffffff;
+  }
+}
diff --git a/src/main/resources/public/template/board.html b/src/main/resources/public/template/board.html
@@ -31,6 +31,11 @@ <h1 ng-click="vm.goToBoards()" class="cell paddingRight" tooltip="[[vm.board.tit
                 board-description-eventer="vm.boardDescriptionEventer"
         >
         </board-description-lightbox>
+        <zoom
+                zoom-level="vm.zoomLevel"
+                preferences="zoomPreferences"
+                zoom-eventer="vm.zoomEventer"
+        ></zoom>
     </div>
 
     <!-- Header mobile -->
@@ -107,7 +112,10 @@ <h1 ng-click="vm.goToBoards()" class="cell paddingRight" tooltip="[[vm.board.tit
                     has-comments="vm.board.canComment"
                     board-owner="vm.board.owner"
                     has-favorite="true"
-                    display-favorite="vm.board.displayNbFavorites">
+                    display-favorite="vm.board.displayNbFavorites"
+                    zoom="vm.zoomLevel"
+                    zoom-eventer="vm.zoomEventer"
+            >
             </card-list>
             <section-list
                     ng-if="!!vm.board.layoutType && !vm.board.isLayoutFree()"
@@ -121,7 +129,9 @@ <h1 ng-click="vm.goToBoards()" class="cell paddingRight" tooltip="[[vm.board.tit
                     on-transfer="vm.openTransferResourceLightbox"
                     on-submit="vm.onFormSubmit"
                     on-lock="vm.openLockResource"
-                    card-update-eventer="vm.cardUpdateSubject">
+                    card-update-eventer="vm.cardUpdateSubject"
+                    zoom="vm.zoomLevel"
+                    zoom-eventer="vm.zoomEventer">
             </section-list>
             <div ng-show="vm.isLoading" class="centered-text">
                 <loader min-height="'250px'"></loader>

diff --git a/src/main/resources/public/ts/controllers/board-view.controller.ts b/src/main/resources/public/ts/controllers/board-view.controller.ts
@@ -78,6 +78,9 @@ interface IViewModel extends ng.IController {
 
     updateFrequency: number;
 
+    zoomLevel:  number;
+    zoomEventer :Subject<void>;
+
     goToBoards(): void;
 
     getCards(): Promise<void>;
@@ -124,6 +127,7 @@ interface IBoardViewScope extends IScope {
 class Controller implements IViewModel {
 
     private eventBusService: EventBusService;
+    zoomEventer :Subject<void> = new Subject<void>();
 
     displayCardLightbox: boolean;
     displayUpdateCardLightbox: boolean;
@@ -171,6 +175,7 @@ class Controller implements IViewModel {
 
     updateIntervalPromise: angular.IPromise<any>;
 
+    zoomLevel:number;
     constructor(private $scope: IBoardViewScope,
                 private $route: any,
                 private $location: ng.ILocationService,
@@ -187,6 +192,7 @@ class Controller implements IViewModel {
         this.navbarCollection = [];
         this.COLLECTION_NAVBAR_VIEWS = COLLECTION_NAVBAR_VIEWS;
         this.boardDescriptionEventer = new Subject<void>();
+        this.zoomLevel = 100;
     }
 
     async $onInit(): Promise<void> {
-Original file line number
+Diff line change
@@ Expand Up / @@ -98,4 +98,4 @@ @@
         overflow: hidden;
       }
-    }
+    }