feat(board): #MAG-233 adapt board CSS for zoom levels

OPEN-ENT-NG · Oct 3, 2023 · 6596026 · 6596026
1 parent f5c97f9
commit 6596026
Show file tree

Hide file tree

Showing 22 changed files with 294 additions and 106 deletions.
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/_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/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 -->
@@ -108,7 +113,8 @@ <h1 ng-click="vm.goToBoards()" class="cell paddingRight" tooltip="[[vm.board.tit
                     board-owner="vm.board.owner"
                     has-favorite="true"
                     display-favorite="vm.board.displayNbFavorites"
-                    ng-style="{'zoom': vm.zoomLevel + '%'}"
+                    zoom="vm.zoomLevel"
+                    zoom-eventer="vm.zoomEventer"
             >
             </card-list>
             <section-list
@@ -123,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>
@@ -219,9 +227,5 @@ <h1 ng-click="vm.goToBoards()" class="cell paddingRight" tooltip="[[vm.board.tit
                          loading-mode="true"
                          scroll-eventer="vm.infiniteScrollService">
         </infinite-scroll>
-        <zoom
-                zoom-level="vm.zoomLevel"
-                preferences="zoomPreferences"
-        ></zoom>
     </div>
 </div>
diff --git a/src/main/resources/public/ts/controllers/board-view.controller.ts b/src/main/resources/public/ts/controllers/board-view.controller.ts
@@ -79,6 +79,7 @@ interface IViewModel extends ng.IController {
     updateFrequency: number;
 
     zoomLevel:  number;
+    zoomEventer :Subject<void>;
 
     goToBoards(): void;
 
@@ -126,6 +127,7 @@ interface IBoardViewScope extends IScope {
 class Controller implements IViewModel {
 
     private eventBusService: EventBusService;
+    zoomEventer :Subject<void> = new Subject<void>();
 
     displayCardLightbox: boolean;
     displayUpdateCardLightbox: boolean;

diff --git a/...-list/card-list-item-options.directive.ts → ...tions/card-list-item-options.directive.ts b/...-list/card-list-item-options.directive.ts → ...tions/card-list-item-options.directive.ts
@@ -1,8 +1,8 @@
 import {ng} from "entcore";
 import {ILocationService, IParseService, IScope, IWindowService} from "angular";
-import {RootsConst} from "../../core/constants/roots.const";
-import {Card, Section} from "../../models";
-import {CardComment} from "../../models/card-comment.model";
+import {RootsConst} from "../../../../core/constants/roots.const";
+import {Card, Section} from "../../../../models";
+import {CardComment} from "../../../../models/card-comment.model";
 
 interface IViewModel extends ng.IController, ICardListItemOptionsProps {
     openEdit?(): void;
@@ -69,7 +69,7 @@ function directive($parse: IParseService) {
     return {
         replace: true,
         restrict: 'E',
-        templateUrl: `${RootsConst.directive}card-list/card-list-item-options.html`,
+        templateUrl: `${RootsConst.directive}card-list/card-list-item/card-list-item-options/card-list-item-options.html`,
         scope: {
             options: '=',
             isDisplayed: '=',

diff --git a/...ves/card-list/card-list-item-options.html → ...-item-options/card-list-item-options.html b/...ves/card-list/card-list-item-options.html → ...-item-options/card-list-item-options.html
diff --git a/...-list/card-list-item-preview.directive.ts → ...eview/card-list-item-preview.directive.ts b/...-list/card-list-item-preview.directive.ts → ...eview/card-list-item-preview.directive.ts
@@ -1,10 +1,10 @@
 import {idiom, ng} from "entcore";
 import {ILocationService, IScope, IWindowService} from "angular";
-import {RootsConst} from "../../core/constants/roots.const";
-import {Card} from "../../models";
-import {RESOURCE_TYPE} from "../../core/enums/resource-type.enum";
-import {EXTENSION_FORMAT} from "../../core/constants/extension-format.const";
-import {Dailymotion, PeerTube, Vimeo, Youtube} from "../../models/video-platform.model";
+import {RootsConst} from "../../../../core/constants/roots.const";
+import {Card} from "../../../../models";
+import {RESOURCE_TYPE} from "../../../../core/enums/resource-type.enum";
+import {EXTENSION_FORMAT} from "../../../../core/constants/extension-format.const";
+import {Dailymotion, PeerTube, Vimeo, Youtube} from "../../../../models/video-platform.model";
 
 interface IViewModel extends ng.IController, ICardListItemProps {
     getExtension(fileName: string): string;
@@ -22,6 +22,7 @@ interface IViewModel extends ng.IController, ICardListItemProps {
 
 interface ICardListItemProps {
     card: Card;
+    zoom:number;
 }
 
 interface ICardListItemScope extends IScope, ICardListItemProps {
@@ -34,6 +35,7 @@ class Controller implements IViewModel {
     RESOURCE_TYPES: typeof RESOURCE_TYPE;
     url: string;
 
+    zoom:number;
 
     constructor(private $scope: ICardListItemScope,
                 private $location: ILocationService,
@@ -124,16 +126,26 @@ class Controller implements IViewModel {
         return idiom.translate('magneto.card.type.' + this.card.resourceType);
     }
 
+    getZoomLevel(): number {
+        if(this.zoom >= 100){
+            return (this.zoom - 100 )/15 + 3;
+        }
+        else {
+            return (this.zoom - 55   ) / 15
+        }
+    }
+
 }
 
 function directive() {
     return {
         replace: true,
         restrict: 'E',
-        templateUrl: `${RootsConst.directive}card-list/card-list-item-preview.html`,
+        templateUrl: `${RootsConst.directive}card-list/card-list-item/card-list-item-preview/card-list-item-preview.html`,
         scope: {
             card: '=',
-            resourceType: '='
+            resourceType: '=',
+            zoom: '='
         },
         controllerAs: 'vm',
         bindToController: true,

diff --git a/...ves/card-list/card-list-item-preview.html → ...-item-preview/card-list-item-preview.html b/...ves/card-list/card-list-item-preview.html → ...-item-preview/card-list-item-preview.html
@@ -1,12 +1,12 @@
 <!--Card Previsualisation-->
-<div class="cardDirective-list-item-preview">
-    <div class="cardDirective-list-item-type">
+<div class="cardDirective-list-item-preview cardDirective-list-item-preview-zoom-[[vm.getZoomLevel()]]">
+    <div class="cardDirective-list-item-type cardDirective-list-item-type-zoom-[[vm.getZoomLevel()]]">
         <span>
             <i class="magneto-[[vm.card.resourceType]]"></i>
             [[vm.getResourceType()]]
         </span>
     </div>
-    <div class="cardDirective-list-item-image flex">
+    <div class="cardDirective-list-item-image flex" ng-if="vm.zoom >= 85">
         <img ng-if="vm.card.isType(vm.RESOURCE_TYPES.IMAGE)" class="cardDirective-list-item-preview-[[vm.card.resourceType]]" ng-src="/workspace/document/[[vm.card.resourceId]]">
         <img ng-if="vm.card.isType(vm.RESOURCE_TYPES.FILE)" class="type-icon" data-ng-src="/magneto/public/img/extension/[[vm.getExtension(vm.card.metadata.filename)]].svg">
         <a ng-href="[[vm.card.resourceUrl]]" class="type-icon" ng-if="vm.card.isType(vm.RESOURCE_TYPES.LINK)" target="_blank">
-Original file line number
+Diff line change
@@ Expand Up / @@ -98,4 +98,4 @@ @@
         overflow: hidden;
       }
-    }
+    }