From 41c912359d763b9d8bf7c08fb93538cf2c68d2ab Mon Sep 17 00:00:00 2001 From: Flavien Martineau <45894263+flmartineau@users.noreply.github.com> Date: Tue, 3 Oct 2023 17:36:49 +0200 Subject: [PATCH] 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 --- src/main/resources/i18n/fr.json | 3 +- .../public/sass/global/components/_icons.scss | 8 ++ .../components/containers/_board-read.scss | 2 +- .../components/directives/_card-comment.scss | 3 +- .../directives/_card-list-item.scss | 74 ++++++++++- .../components/directives/_card-list.scss | 23 ++-- .../global/components/directives/_index.scss | 3 +- .../components/directives/_section-list.scss | 10 +- .../global/components/directives/_zoom.scss | 52 ++++++++ src/main/resources/public/template/board.html | 14 ++- .../ts/controllers/board-view.controller.ts | 6 + .../card-list-item-options.directive.ts | 8 +- .../card-list-item-options.html | 0 .../card-list-item-preview.directive.ts | 26 ++-- .../card-list-item-preview.html | 6 +- .../card-list-item.directive.ts | 36 ++++-- .../{ => card-list-item}/card-list-item.html | 69 ++++++----- .../card-list/card-list.directive.ts | 26 +++- .../ts/directives/card-list/card-list.html | 6 +- .../card-list/card-preview-image.directive.ts | 2 +- .../resources/public/ts/directives/index.ts | 9 +- .../section-list-item.directive.ts | 10 +- .../section-list/section-list-item.html | 2 + .../section-list/section-list.directive.ts | 20 ++- .../directives/section-list/section-list.html | 6 +- .../ts/directives/zoom/zoom.directive.ts | 115 ++++++++++++++++++ .../public/ts/directives/zoom/zoom.html | 17 +++ 27 files changed, 471 insertions(+), 85 deletions(-) create mode 100644 src/main/resources/public/sass/global/components/directives/_zoom.scss rename src/main/resources/public/ts/directives/card-list/{ => card-list-item/card-list-item-options}/card-list-item-options.directive.ts (94%) rename src/main/resources/public/ts/directives/card-list/{ => card-list-item/card-list-item-options}/card-list-item-options.html (100%) rename src/main/resources/public/ts/directives/card-list/{ => card-list-item/card-list-item-preview}/card-list-item-preview.directive.ts (87%) rename src/main/resources/public/ts/directives/card-list/{ => card-list-item/card-list-item-preview}/card-list-item-preview.html (85%) rename src/main/resources/public/ts/directives/card-list/{ => card-list-item}/card-list-item.directive.ts (90%) rename src/main/resources/public/ts/directives/card-list/{ => card-list-item}/card-list-item.html (51%) create mode 100644 src/main/resources/public/ts/directives/zoom/zoom.directive.ts create mode 100644 src/main/resources/public/ts/directives/zoom/zoom.html diff --git a/src/main/resources/i18n/fr.json b/src/main/resources/i18n/fr.json index a924663e..08c778ca 100644 --- 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 fichier", "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 index f92a18c0..3aa9ad5d 100644 --- 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'; + } } \ No newline at end of file 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 index d5127bac..d7ccf286 100644 --- 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; } -} \ No newline at end of file +} 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 index e4e6001a..2883fad1 100644 --- 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; } -} \ No newline at end of file +} 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 index 996b49ce..75d2651b 100644 --- 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; } -} \ No newline at end of file +} 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 index ea99a396..eaa4ad87 100644 --- 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; } -} \ No newline at end of file +} diff --git a/src/main/resources/public/sass/global/components/directives/_index.scss b/src/main/resources/public/sass/global/components/directives/_index.scss index 89559d27..5053f675 100644 --- 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'; \ No newline at end of file +@import 'pdf-viewer'; +@import 'zoom'; \ No newline at end of file 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 index b185d7a3..35aa697d 100644 --- 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); } -} \ No newline at end of file +} diff --git a/src/main/resources/public/sass/global/components/directives/_zoom.scss b/src/main/resources/public/sass/global/components/directives/_zoom.scss new file mode 100644 index 00000000..b265bdb2 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/src/main/resources/public/template/board.html b/src/main/resources/public/template/board.html index ae3620e2..906ddbb6 100644 --- a/src/main/resources/public/template/board.html +++ b/src/main/resources/public/template/board.html @@ -31,6 +31,11 @@

+ @@ -107,7 +112,10 @@

+ display-favorite="vm.board.displayNbFavorites" + zoom="vm.zoomLevel" + zoom-eventer="vm.zoomEventer" + > + card-update-eventer="vm.cardUpdateSubject" + zoom="vm.zoomLevel" + zoom-eventer="vm.zoomEventer">
diff --git a/src/main/resources/public/ts/controllers/board-view.controller.ts b/src/main/resources/public/ts/controllers/board-view.controller.ts index dac8f7ed..1f94088f 100644 --- 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; + goToBoards(): void; getCards(): Promise; @@ -124,6 +127,7 @@ interface IBoardViewScope extends IScope { class Controller implements IViewModel { private eventBusService: EventBusService; + zoomEventer :Subject = new Subject(); displayCardLightbox: boolean; displayUpdateCardLightbox: boolean; @@ -171,6 +175,7 @@ class Controller implements IViewModel { updateIntervalPromise: angular.IPromise; + 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(); + this.zoomLevel = 100; } async $onInit(): Promise { diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item-options.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.directive.ts similarity index 94% rename from src/main/resources/public/ts/directives/card-list/card-list-item-options.directive.ts rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.directive.ts index fcdcb907..53b840a8 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item-options.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/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/src/main/resources/public/ts/directives/card-list/card-list-item-options.html b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.html similarity index 100% rename from src/main/resources/public/ts/directives/card-list/card-list-item-options.html rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-options/card-list-item-options.html diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item-preview.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.directive.ts similarity index 87% rename from src/main/resources/public/ts/directives/card-list/card-list-item-preview.directive.ts rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.directive.ts index e346b1dd..db69f209 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item-preview.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/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/src/main/resources/public/ts/directives/card-list/card-list-item-preview.html b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.html similarity index 85% rename from src/main/resources/public/ts/directives/card-list/card-list-item-preview.html rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.html index e3b700ee..78fc01b4 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item-preview.html +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item-preview/card-list-item-preview.html @@ -1,12 +1,12 @@ -
-
+
+
[[vm.getResourceType()]]
-
+
diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.directive.ts similarity index 90% rename from src/main/resources/public/ts/directives/card-list/card-list-item.directive.ts rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.directive.ts index 582fe4ac..db421a35 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.directive.ts @@ -1,12 +1,12 @@ import {angular, model, ng} from "entcore"; import {IAugmentedJQuery, ILocationService, IParseService, IScope, IWindowService} from "angular"; -import {RootsConst} from "../../core/constants/roots.const"; -import {Card, IBoardOwner} from "../../models"; -import {DateUtils} from "../../utils/date.utils"; -import {RESOURCE_TYPE} from "../../core/enums/resource-type.enum"; -import {safeApply} from "../../utils/safe-apply.utils"; +import {RootsConst} from "../../../core/constants/roots.const"; +import {Card, IBoardOwner} from "../../../models"; +import {DateUtils} from "../../../utils/date.utils"; +import {RESOURCE_TYPE} from "../../../core/enums/resource-type.enum"; +import {safeApply} from "../../../utils/safe-apply.utils"; import {Subject} from "rxjs"; -import {cardsService} from "../../services"; +import {cardsService} from "../../../services"; interface IViewModel extends ng.IController, ICardListItemProps { formatDate(date: string): string; @@ -35,6 +35,8 @@ interface IViewModel extends ng.IController, ICardListItemProps { onCardFavorite?(card_id: string, isFavorite: boolean): void; + getZoomLevel(): number; + isDisplayedOptions: boolean; isSelected: boolean; } @@ -67,6 +69,7 @@ interface ICardListItemProps { hasComments: boolean; boardOwner: IBoardOwner; hasDisplayFavNumber: boolean; + zoom:number; } interface ICardListItemScope extends IScope, ICardListItemProps { @@ -98,6 +101,7 @@ class Controller implements IViewModel { cardUpdateEventer: Subject; boardOwner: IBoardOwner; hasDisplayFavNumber: boolean; + zoom:number; constructor(private $scope: ICardListItemScope, private $location: ILocationService, @@ -134,13 +138,26 @@ class Controller implements IViewModel { return this.hasDelete || this.hasPreview || this.hasEdit || this.hasHide || this.hasDuplicate; } + getZoomLevel(): number { + if(this.zoom >= 100){ + return (this.zoom - 100 )/15 + 3; + } + else { + return (this.zoom - 55 ) / 15 + } + + } + hasImgDisplay(): boolean{ + return this.zoom >= 85; + } + } function directive($parse: IParseService) { return { replace: true, restrict: 'E', - templateUrl: `${RootsConst.directive}card-list/card-list-item.html`, + templateUrl: `${RootsConst.directive}card-list/card-list-item/card-list-item.html`, scope: { card: '=', isSelected: '=', @@ -167,7 +184,8 @@ function directive($parse: IParseService) { cardUpdateEventer: '=', hasComments: '=', boardOwner: '=', - hasDisplayFavNumber: '=' + hasDisplayFavNumber: '=', + zoom: '=' }, controllerAs: 'vm', bindToController: true, @@ -253,4 +271,4 @@ function directive($parse: IParseService) { } } -export const cardListItem = ng.directive('cardListItem', directive) \ No newline at end of file +export const cardListItem = ng.directive('cardListItem', directive) diff --git a/src/main/resources/public/ts/directives/card-list/card-list-item.html b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.html similarity index 51% rename from src/main/resources/public/ts/directives/card-list/card-list-item.html rename to src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.html index e931d20d..11696863 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list-item.html +++ b/src/main/resources/public/ts/directives/card-list/card-list-item/card-list-item.html @@ -1,18 +1,23 @@
-
-
- -
+
+
+ +
- + [[vm.formatDateModification(vm.card.modificationDate)]]
- +
- + + on-board-view="vm.openBoardView" + >
-
+
- [[vm.card.title]] + [[vm.card.title]]
- - - -
+
+ + + +
- - - + + + - - + + [[vm.card.caption]] +
-
\ No newline at end of file +
diff --git a/src/main/resources/public/ts/directives/card-list/card-list.directive.ts b/src/main/resources/public/ts/directives/card-list/card-list.directive.ts index 4e28c7b8..9fc54a5a 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-list.directive.ts @@ -29,6 +29,7 @@ interface IViewModel extends ng.IController, ICardListProps { isMyCard(card: Card): boolean; + getZoomLevel(): number; } interface ICardListProps { @@ -73,6 +74,8 @@ interface ICardListProps { hasComments: boolean; simpleView: boolean; boardOwner: IBoardOwner; + zoom: number; + zoomEventer: Subject; } interface ICardListScope extends IScope, ICardListProps { @@ -109,6 +112,8 @@ class Controller implements IViewModel { displayFavorite: boolean; boardOwner: IBoardOwner; + zoom: number = 100; //default no zoom + zoomEventer: Subject; constructor(private $scope: ICardListScope, private $location: ILocationService, @@ -160,6 +165,16 @@ class Controller implements IViewModel { return card.ownerId === model.me.userId; } + //cetnralise + getZoomLevel(): number { + if(this.zoom >= 100){ + return (this.zoom - 100 )/15 + 3; + } + else { + return (this.zoom - 55 ) / 15 + } + } + } function directive($parse: IParseService, $timeout: ng.ITimeoutService): ng.IDirective { @@ -200,7 +215,9 @@ function directive($parse: IParseService, $timeout: ng.ITimeoutService): ng.IDir cardUpdateEventer: '=', hasComments: '=', simpleView: '=', - boardOwner: '=' + boardOwner: '=', + zoom:"=?", + zoomEventer:"=?" }, controllerAs: 'vm', bindToController: true, @@ -220,6 +237,13 @@ function directive($parse: IParseService, $timeout: ng.ITimeoutService): ng.IDir }, 200); }); } + if (vm.zoomEventer) { + vm.zoomEventer.asObservable().subscribe(() => { + $timeout(() => { + vm.resizeAllCardItems(); + }, 200); + }); + } if (vm.layout == LAYOUT_TYPE.FREE) { const cardList: Element = document.getElementById("card-list"); diff --git a/src/main/resources/public/ts/directives/card-list/card-list.html b/src/main/resources/public/ts/directives/card-list/card-list.html index 6c9d20fd..6cd5b3a9 100644 --- a/src/main/resources/public/ts/directives/card-list/card-list.html +++ b/src/main/resources/public/ts/directives/card-list/card-list.html @@ -1,4 +1,4 @@ -
+
+ has-favorite="vm.hasFavorite" + zoom="vm.zoom" + >

[[card.boardTitle]]
\ No newline at end of file diff --git a/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts b/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts index d5a11646..d67b0cb8 100644 --- a/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts +++ b/src/main/resources/public/ts/directives/card-list/card-preview-image.directive.ts @@ -47,7 +47,7 @@ class Controller implements IViewModel { getExtension = (): string => { let result: string = this.RESOURCE_TYPES.DEFAULT; - if (!!this.card.metadata && !!this.card.metadata.filename) { + if (this.card.metadata && !!this.card.metadata && !!this.card.metadata.filename) { let extension: string; extension = this.card.metadata.filename.split('.').pop(); result = this.getExtensionType(extension); diff --git a/src/main/resources/public/ts/directives/index.ts b/src/main/resources/public/ts/directives/index.ts index bcb238f8..d37c366f 100644 --- a/src/main/resources/public/ts/directives/index.ts +++ b/src/main/resources/public/ts/directives/index.ts @@ -5,10 +5,10 @@ export * from './board-manage-lightbox/board-layout-type/board-layout-type.direc export * from './card-display/card-display.directive'; export * from './card-preview-lightbox/card-preview-lightbox.directive'; export * from './card-list/card-list.directive'; -export * from './card-list/card-list-item.directive'; -export * from './card-list/card-list-item-preview.directive'; +export * from './card-list/card-list-item/card-list-item.directive'; +export * from './card-list/card-list-item/card-list-item-preview/card-list-item-preview.directive'; export * from './card-list/card-preview-image.directive'; -export * from './card-list/card-list-item-options.directive'; +export * from './card-list/card-list-item/card-list-item-options/card-list-item-options.directive'; export * from './card-collection/card-collection.directive'; export * from './card-move-lightbox/card-move-lightbox.directive'; export * from './card-duplicate-move-lightbox/card-duplicate-move-lightbox.directive'; @@ -48,4 +48,5 @@ export * from './comment-input/comment-input.directive'; export * from './comment-delete-lightbox/comment-delete-lightbox.directive'; export * from './board-description-lightbox/board-description-lightbox.directive'; export * from './favorite-button/favorite-button.directive'; -export * from './pdf-viewer/pdf-viewer.directive' \ No newline at end of file +export * from './pdf-viewer/pdf-viewer.directive'; +export * from './zoom/zoom.directive'; \ No newline at end of file diff --git a/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts b/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts index 3b33ee63..a8ea2129 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts +++ b/src/main/resources/public/ts/directives/section-list/section-list-item.directive.ts @@ -54,6 +54,9 @@ interface ISectionListItemProps { onMove?; onLock?; cardUpdateEventer: Subject; + zoom: number; + zoomEventer: Subject; + } interface ISectionListItemScope extends IScope, ISectionListItemProps { @@ -72,7 +75,8 @@ class Controller implements IViewModel { isDisplayedOptions: boolean; isDomLoaded: boolean; cardUpdateEventer: Subject; - + zoom: number; + zoomEventer: Subject; constructor(private $scope: ISectionListItemScope) { this.isDisplayedOptions = false; @@ -168,7 +172,9 @@ function directive($parse: IParseService) { onTransfer: '&', onMove: '&', onLock: '&', - cardUpdateEventer: '=' + cardUpdateEventer: '=', + zoom:"=?", + zoomEventer:"=?" }, controllerAs: 'vm', bindToController: true, diff --git a/src/main/resources/public/ts/directives/section-list/section-list-item.html b/src/main/resources/public/ts/directives/section-list/section-list-item.html index b26351b3..08faef70 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list-item.html +++ b/src/main/resources/public/ts/directives/section-list/section-list-item.html @@ -43,6 +43,8 @@ board-owner="vm.board.owner" has-favorite="true" display-favorite="vm.board.displayNbFavorites" + zoom="vm.zoom" + zoom-eventer="vm.zoomEventer" > diff --git a/src/main/resources/public/ts/directives/section-list/section-list.directive.ts b/src/main/resources/public/ts/directives/section-list/section-list.directive.ts index c89854b5..df25c390 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list.directive.ts +++ b/src/main/resources/public/ts/directives/section-list/section-list.directive.ts @@ -29,7 +29,7 @@ interface IViewModel extends ng.IController, ISectionListProps { openDeleteSectionLightbox(section: Section): void; refresh?(): void; - + getZoomLevel(): number; } interface ISectionListProps { @@ -43,6 +43,8 @@ interface ISectionListProps { onSubmit?; onLock?; cardUpdateEventer: Subject; + zoom: number; + zoomEventer: Subject; } interface ISectionListScope extends IScope, ISectionListProps { @@ -57,7 +59,8 @@ class Controller implements IViewModel { selectedSection: Section; displayDeleteSectionLightbox: boolean; cardUpdateEventer: Subject; - + zoom: number; + zoomEventer: Subject; constructor(private $scope: ISectionListScope, private $location: ILocationService, private $window: IWindowService) { @@ -112,6 +115,15 @@ class Controller implements IViewModel { this.selectedSection = section; this.displayDeleteSectionLightbox = true; } + + getZoomLevel(): number { + if(this.zoom >= 100){ + return (this.zoom - 100 )/15 + 3; + } + else { + return (this.zoom - 55 ) / 15 + } + } } function directive($parse: IParseService) { @@ -129,7 +141,9 @@ function directive($parse: IParseService) { onMove: '&', onSubmit: '&', onLock: '&', - cardUpdateEventer: '=' + cardUpdateEventer: '=', + zoom:"=?", + zoomEventer:"=?" }, controllerAs: 'vm', bindToController: true, diff --git a/src/main/resources/public/ts/directives/section-list/section-list.html b/src/main/resources/public/ts/directives/section-list/section-list.html index 1d02a94c..2ef25721 100644 --- a/src/main/resources/public/ts/directives/section-list/section-list.html +++ b/src/main/resources/public/ts/directives/section-list/section-list.html @@ -1,4 +1,4 @@ -
+
+ card-update-eventer="vm.cardUpdateEventer" + zoom-eventer="vm.zoomEventer" + zoom="vm.zoom">
+ + resetZoom(): void; + + zoomReset: number; +} + +interface ICardProfileProps { + zoomLevel: number; + zoomMax: number; + zoomMin: number; + zoomIncrement: number; + preferences: string; + zoomEventer: Subject; +} + +interface IZoomScope extends ICardProfileProps, IViewModel { + vm: IViewModel; +} + +class Controller implements IViewModel { + zoomLevel: number; + zoomMax: number; + zoomMin: number; + zoomIncrement: number + zoomReset: number + preferences: string; + zoomEventer: Subject; + + constructor() { + if (this.zoomMax === undefined) + this.zoomMax = 130 + if (this.zoomMin === undefined) + this.zoomMin = 55 + if (this.zoomIncrement === undefined) + this.zoomIncrement = 15 + } + + async $onInit(): Promise { + await Me.preference('magneto') + if (!Me.preferences['magneto']) { + await Me.savePreference('magneto'); + await Me.preference('magneto') + } + if (!Me.preferences['magneto'][this.preferences]) { + Me.preferences['magneto'][this.preferences] = this.zoomLevel; + await Me.savePreference('magneto'); + await Me.preference('magneto') + } else { + this.zoomLevel = Me.preferences['magneto'][this.preferences]; + } + this.zoomReset = this.zoomLevel; + } + + async zoomIn(): Promise { + if (this.zoomLevel < this.zoomMax) + this.zoomLevel += this.zoomIncrement; + this.zoomEventer.next(); + await this.savePreferences(); + } + + async savePreferences(): Promise { + Me.preferences['magneto'][this.preferences] = this.zoomLevel; + await Me.savePreference('magneto'); + } + + async zoomOut(): Promise { + if (this.zoomLevel > this.zoomMin) + this.zoomLevel -= this.zoomIncrement; + Me.preferences['magneto'][this.preferences] = this.zoomLevel; + this.zoomEventer.next(); + await Me.savePreference('magneto'); + } + + resetZoom(): void { + this.zoomLevel = this.zoomReset; + this.zoomEventer.next(); + } + +} + +function directive() { + return { + restrict: 'E', + templateUrl: `${RootsConst.directive}zoom/zoom.html`, + scope: { + zoomLevel: '=', + zoomMax: '=?', + zoomMin: '=?', + zoomIncrement: '=?', + preferences: '@', + zoomEventer: '=' + }, + controllerAs: 'vm', + bindToController: true, + controller: ['$scope', '$location', '$window', Controller], + /* interaction DOM/element */ + link: function ($scope: IZoomScope, + element: ng.IAugmentedJQuery, + attrs: ng.IAttributes, + vm: IViewModel) { + } + } +} + +export const zoom = ng.directive('zoom', directive) diff --git a/src/main/resources/public/ts/directives/zoom/zoom.html b/src/main/resources/public/ts/directives/zoom/zoom.html new file mode 100644 index 00000000..84331c3f --- /dev/null +++ b/src/main/resources/public/ts/directives/zoom/zoom.html @@ -0,0 +1,17 @@ +
+ +
+ +
+
+
+ magneto.zoom +
+
+
+ +
+ +
\ No newline at end of file