From 39c5b1bbfd1727cd25ae8fe47be9682aa899b566 Mon Sep 17 00:00:00 2001 From: Cristian Franco Date: Sat, 21 Oct 2017 01:22:48 -0500 Subject: [PATCH] Annotation toolbar UI style fixes, added annotation functionality on new entry dialog --- example/notebook/bundle.js | 3 +- example/notebook/res/sass/_notebook-base.scss | 30 +++++++++++++++++- .../res/templates/controls/embedControl.html | 5 +++ example/notebook/res/templates/entry.html | 2 +- .../notebook/src/actions/annotateSnapshot.js | 24 ++++++++++---- .../src/actions/newEntryContextual.js | 31 +++++++++++++++++-- .../src/controllers/newEntryController.js | 16 ++++++++-- .../notebook/src/directives/MCTSnapshot.js | 21 ++++++------- 8 files changed, 106 insertions(+), 26 deletions(-) diff --git a/example/notebook/bundle.js b/example/notebook/bundle.js index 5deb525a214..9e5fed8a1b3 100644 --- a/example/notebook/bundle.js +++ b/example/notebook/bundle.js @@ -160,7 +160,8 @@ define([ "category": "embed", "depends":[ "dialogService", - "dndService" + "dndService", + "$rootScope", ] }, { diff --git a/example/notebook/res/sass/_notebook-base.scss b/example/notebook/res/sass/_notebook-base.scss index dceb40d41b9..8c749c3f344 100644 --- a/example/notebook/res/sass/_notebook-base.scss +++ b/example/notebook/res/sass/_notebook-base.scss @@ -338,7 +338,24 @@ padding-right: 0; } -@media only screen and (max-device-width: 1024px){ +.overlay.l-dialog .outer-holder.annotation-dialog{ + width: 90%; + height: 90%; +} + +.snap-annotation-wrapper{ + padding-top: 40px; +} + +.annotate-new{ + .s-button{ + margin-left: 25px; + margin-top: 10px; + z-index: 9; + } +} + +@media screen and (max-width: 1024px){ .entries-wrapper{ font-size: 14px; } @@ -355,6 +372,17 @@ white-space: normal; } } + + .ptro-color-main{ + height: 80px; + .tool-controls,>div>span:not(.ptro-info){ + float: left; + } + } + + .ptro-wrapper{ + top: 80px; + } } @media screen and (max-width: 768px){ diff --git a/example/notebook/res/templates/controls/embedControl.html b/example/notebook/res/templates/controls/embedControl.html index b039ce9088f..ec5e7524173 100644 --- a/example/notebook/res/templates/controls/embedControl.html +++ b/example/notebook/res/templates/controls/embedControl.html @@ -46,6 +46,11 @@ +
+ + Annotate + +
diff --git a/example/notebook/res/templates/entry.html b/example/notebook/res/templates/entry.html index fdb197891b8..bd4e02affe6 100644 --- a/example/notebook/res/templates/entry.html +++ b/example/notebook/res/templates/entry.html @@ -29,7 +29,7 @@ -
+
diff --git a/example/notebook/src/actions/annotateSnapshot.js b/example/notebook/src/actions/annotateSnapshot.js index c762b127ca4..7966dd9e0e5 100644 --- a/example/notebook/src/actions/annotateSnapshot.js +++ b/example/notebook/src/actions/annotateSnapshot.js @@ -42,13 +42,14 @@ define( }] }; - function annotateSnapshot(dialogService,dndService,context) { + function annotateSnapshot(dialogService,dndService,$rootScope,context) { context = context || {}; // Choose the object to be opened into a new tab this.domainObject = context.selectedObject || context.domainObject; this.dialogService = dialogService; this.dndService = dndService; + this.$rootScope = $rootScope; } @@ -61,26 +62,37 @@ define( this.dialogService.getUserChoice(ANNOTATION_STRUCT) .then(saveNotes); + var rootscope = this.$rootScope; + var painterro; var tracker = function(){ + $(document.body).find('.l-dialog .outer-holder').addClass('annotation-dialog'); painterro = Painterro({ id: 'snap-annotation', backgroundFillColor: '#eee', hiddenTools:['save', 'open', 'close','eraser'], saveHandler: function (image, done) { - var elementPos = domainObject.model.entries.map(function(x) {return x.createdOn; }).indexOf(entryId) - var entryEmbeds = domainObject.model.entries[elementPos].embeds; - var embedPos = entryEmbeds.map(function(x) {return x.id; }).indexOf(embedId); - $scope.saveSnap(image.asBlob(),embedPos,elementPos); + if(entryId && embedId){ + var elementPos = domainObject.model.entries.map(function(x) {return x.createdOn; }).indexOf(entryId) + var entryEmbeds = domainObject.model.entries[elementPos].embeds; + var embedPos = entryEmbeds.map(function(x) {return x.id; }).indexOf(embedId); + $scope.saveSnap(image.asBlob(),embedPos,elementPos); + }else{ + rootscope.snapshot = {'src':image.asDataURL('image/png'), + 'modified':Date.now()}; + } + done(true); - } }).show(snapshot); + } ANNOTATION_STRUCT.model = {'tracker':tracker}; + + function saveNotes(param){ if(param=='ok'){ painterro.save(); diff --git a/example/notebook/src/actions/newEntryContextual.js b/example/notebook/src/actions/newEntryContextual.js index 02573734a7f..33d1911bc89 100644 --- a/example/notebook/src/actions/newEntryContextual.js +++ b/example/notebook/src/actions/newEntryContextual.js @@ -89,7 +89,7 @@ define( var notification = this.notificationService; var linkService = this.linkService; var dialogService = this.dialogService; - + var rootScope = this.$rootScope; // Create the overlay element and add it to the document's body this.$rootScope.selObj = domainObj; this.$rootScope.selValue = ""; @@ -99,7 +99,30 @@ define( function setSnapshot(value){ if(value){ - dialogService.getUserInput(NEW_TASK_FORM,{}).then(addNewEntry); + var overlayModel = { + title: NEW_TASK_FORM.name, + message: NEW_TASK_FORM.message, + structure: NEW_TASK_FORM, + value: {'entry': rootScope.newEntryText || ""} + }; + + // Provide result from the model + function resultGetter() { + return overlayModel.value; + } + + if(value !== rootScope.lastValue){ + rootScope.currentDialog = overlayModel; + + dialogService.getDialogResponse( + "overlay-dialog", + overlayModel, + resultGetter + ).then(addNewEntry); + } + + + rootScope.lastValue = value; } } @@ -151,11 +174,13 @@ define( }] }; } - }); + }); notification.info({ title: "Notebook Entry created" }); + + self.$rootScope.newEntryText = ''; } }; diff --git a/example/notebook/src/controllers/newEntryController.js b/example/notebook/src/controllers/newEntryController.js index f1ccf498a7a..d5d65aae30e 100644 --- a/example/notebook/src/controllers/newEntryController.js +++ b/example/notebook/src/controllers/newEntryController.js @@ -30,6 +30,7 @@ define( $scope.snapshot = undefined; $scope.snapToggle = true; + $scope.entryText = ''; var annotateAction = $rootScope.selObj.getCapability('action').getActions( {category: 'embed'})[1]; @@ -37,16 +38,25 @@ define( $scope.objectName = $rootScope.selObj.getModel().name; $scope.cssClass= $rootScope.selObj.getCapability('type').typeDef.cssClass; + $scope.annotateSnapshot = function($event){ + if($rootScope.currentDialog.value){ + $rootScope.newEntryText = $scope.$parent.$parent.ngModel['entry']; + $rootScope.currentDialog.cancel(); + annotateAction.perform($event,$rootScope.snapshot.src); + $rootScope.currentDialog = undefined; + } + }; + function updateSnapshot(img){ $scope.snapshot = img; - } + }; // Update set of actions whenever the action capability // changes or becomes available. $rootScope.$watch("snapshot", updateSnapshot); - $rootScope.$watch("selValue", selValueFn); + $rootScope.$watch("selValue", toggleEmbed); - function selValueFn(value){ + function toggleEmbed(value){ $scope.snapToggle =value; } } diff --git a/example/notebook/src/directives/MCTSnapshot.js b/example/notebook/src/directives/MCTSnapshot.js index 8a9c8c2389c..e5381b4af00 100644 --- a/example/notebook/src/directives/MCTSnapshot.js +++ b/example/notebook/src/directives/MCTSnapshot.js @@ -44,15 +44,11 @@ define([ document.body.appendChild(snapshot); } - function closeOverlay(newForm) { - if(!newForm){ - if(snapshot){ - snapshot.removeChild(element); - layoutContainer.remove(); - } - }else{ - layoutContainer.appendChild(element); - } + function closeOverlay() { + if(snapshot){ + snapshot.removeChild(element); + layoutContainer.remove(); + } document.body.removeChild(snapshot); snapshot = undefined; } @@ -93,6 +89,7 @@ define([ 'size':img.size, 'modified':Date.now() }; + closeOverlay(false); }; } @@ -114,10 +111,12 @@ define([ } saveImg = function(url,entryId,embedId){ - $scope.$parent.$parent.saveSnap(url,embedId,entryId); + $scope.$parent.$parent.$parent.saveSnap(url,embedId,entryId); + } + if($(document.body).find('.overlay.snapshot').length == 0){ + toggleOverlay(); } - toggleOverlay(); $scope.$on('$destroy', function () { $element.off('click', toggleOverlay); });