01/01: resize image and view image in full size

8 Jul 2014

This is an automated email from the git hooks/post-receive script.

New commit to branch develop in repository pollen.

See http://git.chorem.org/pollen.git

commit 3fbb710e24eff5115236067535b56fa7c3a8d349
Author: Adrien Garandel <a.garandel@dralagen.fr>
Date:   Tue Jul 8 14:59:31 2014 +0200

    resize image and view image in full size
---
 pollen-ui-angular/src/main/webapp/index.html       |  6 +--
 pollen-ui-angular/src/main/webapp/js/directives.js | 34 ++++++++++++++++-
 pollen-ui-angular/src/main/webapp/less/style.less  | 43 ++++++++++++++++++++--
 .../src/main/webapp/less/variables.less            |  4 +-
 .../src/main/webapp/partials/inline-poll.html      |  2 +-
 .../src/main/webapp/partials/zoomImage.html        |  7 ++++
 6 files changed, 87 insertions(+), 9 deletions(-)

diff --git a/pollen-ui-angular/src/main/webapp/index.html b/pollen-ui-angular/src/main/webapp/index.html
index 34ec952..7f154b2 100644
--- a/pollen-ui-angular/src/main/webapp/index.html
+++ b/pollen-ui-angular/src/main/webapp/index.html
@@ -31,9 +31,9 @@
       ou
       $ mvn compile
   -->
-  <!--<link rel="stylesheet/less" type="text/css" href="less/style.less" />
-  <script language="javascript" type="text/javascript" src="lib/less/dist/less-1.7.3.min.js"></script>-->
-  <link rel="stylesheet" type="text/css" href="css/style.css"/>
+  <link rel="stylesheet/less" type="text/css" href="less/style.less" />
+  <script language="javascript" type="text/javascript" src="lib/less/dist/less-1.7.3.min.js"></script>
+  <!--<link rel="stylesheet" type="text/css" href="css/style.css"/>-->
 
   <script language="javascript" type="text/javascript" src="js/conf.js"></script>
 
diff --git a/pollen-ui-angular/src/main/webapp/js/directives.js b/pollen-ui-angular/src/main/webapp/js/directives.js
index a006325..755eb81 100644
--- a/pollen-ui-angular/src/main/webapp/js/directives.js
+++ b/pollen-ui-angular/src/main/webapp/js/directives.js
@@ -434,6 +434,10 @@ angular.module('pollenDirective', [])
 }])
 
 
+//////////////////////////////////////
+/////    UPLOAD    FILE          /////
+//////////////////////////////////////
+
 .directive("uploadFile", function () {
   return {
     restrict : "E",
@@ -446,7 +450,6 @@ angular.module('pollenDirective', [])
         var reader = new FileReader();
         reader.onload = function (loadEvent) {
           scope.$apply(function () {
-//            scope.ngModel.data = loadEvent.target.result;
             scope.ngModel = { meta: changeEvent.target.files[0], data: loadEvent.target.result};
           });
         }
@@ -455,4 +458,33 @@ angular.module('pollenDirective', [])
 
     }
   }
+})
+
+//////////////////////////////////////
+/////      ZOOM     IMAGE        /////
+//////////////////////////////////////
+
+.directive("zoomImage", function () {
+  return {
+    restrict : "E",
+    scope : {
+      image : "=",
+      name  : "="
+    },
+    transclude : true,
+    templateUrl : "partials/zoomImage.html",
+    link : function (scope, element, attrs) {
+      scope.showImage = false;
+
+      var toggleZoom = function () {
+        scope.$apply(function() {
+          scope.showImage = !scope.showImage;
+        });
+      };
+
+      element.bind("click", function (event) {
+        toggleZoom();
+      });
+    }
+  }
 })
\ No newline at end of file
diff --git a/pollen-ui-angular/src/main/webapp/less/style.less b/pollen-ui-angular/src/main/webapp/less/style.less
index 5e6e25b..f61e193 100644
--- a/pollen-ui-angular/src/main/webapp/less/style.less
+++ b/pollen-ui-angular/src/main/webapp/less/style.less
@@ -11,9 +11,9 @@
   margin-top:60px;
 }
 
-@media screen and (max-width:770px) {
+@media screen and (max-width: @responsive-min-width) {
   #content, #pollenMenu, #pollenMenu .container-fluid, #poll-link {
-    width:770px !important;
+    width:@responsive-min-width !important;
   }
 }
 
@@ -132,7 +132,6 @@
 @media screen and (max-width: @responsive-large-width) {
   @foot-padding : 1.8%;
   @foot-height : 80px;
-  @responsive-height: 600px;
 
   #poll-link {
     text-align:center;
@@ -432,6 +431,44 @@ hr {
   margin-bottom:15px;
 }
 
+
+.full {
+  position:fixed;
+  top:0%;
+  left:0%;
+  width:100%;
+  height:100%;
+  margin:0px;
+  padding:0px;
+  z-index:5000;
+  text-align:center;
+  background-color:rgba(0,0,0,0.5);
+
+  .full-content {
+    display:inline-block;
+    max-width:100%;
+    max-height:100%;
+    margin-top:1.25%;
+    margin-bottom:0px;
+    margin-left:1.25%;
+    margin-right:1.25%;
+    padding:8px;
+    background-color:@borderColor;
+    border-radius:8px;
+
+    span {
+      display:block;
+      padding-top:2px;
+    }
+    img {
+      max-width:95% !important;
+      max-height:95% !important;
+      padding:0;
+      margin:0;
+    }
+  }
+}
+
 .ng-enter, .ng-leave {
   -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) @short-time-transition;
   transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) @short-time-transition;
diff --git a/pollen-ui-angular/src/main/webapp/less/variables.less b/pollen-ui-angular/src/main/webapp/less/variables.less
index 31cd251..18b3ea0 100644
--- a/pollen-ui-angular/src/main/webapp/less/variables.less
+++ b/pollen-ui-angular/src/main/webapp/less/variables.less
@@ -9,4 +9,6 @@
 @danger-color : @brand-danger;
 @danger-hover-color : darken(@danger-color, 15%);
 
-@responsive-large-width : 1024px;
\ No newline at end of file
+@responsive-large-width : 1024px;
+@responsive-min-width : 770px;
+@responsive-height: 600px;
\ No newline at end of file
diff --git a/pollen-ui-angular/src/main/webapp/partials/inline-poll.html b/pollen-ui-angular/src/main/webapp/partials/inline-poll.html
index 4801314..af8c658 100644
--- a/pollen-ui-angular/src/main/webapp/partials/inline-poll.html
+++ b/pollen-ui-angular/src/main/webapp/partials/inline-poll.html
@@ -56,7 +56,7 @@
               <info-error error="choice.restError.value[0]" data="choice.value"></info-error>
               <input type="button" class="btn btn-default" ng-if="!globalVariables.voted && globalVariables.editMode" ng-show="showEditHover" ng-click="editChoice(choice)" value="..."/>
               <br/>
-              <img ng-attr-src="{{choice.value.data}}" />
+              <zoom-image image="choice.value.data" name="choice.value.meta.name"></zoom-image>
 
             </div>
 
diff --git a/pollen-ui-angular/src/main/webapp/partials/zoomImage.html b/pollen-ui-angular/src/main/webapp/partials/zoomImage.html
new file mode 100644
index 0000000..43db544
--- /dev/null
+++ b/pollen-ui-angular/src/main/webapp/partials/zoomImage.html
@@ -0,0 +1,7 @@
+<div><img ng-attr-src="{{image}}" /></div>
+<div ng-show="showImage" class="full">
+  <div class="full-content">
+    <span>{{name}}</span>
+    <img ng-attr-src="{{image}}" />
+  </div>
+</div>
\ No newline at end of file

-- 
To stop receiving notification emails like this one, please contact
chorem.org SCM administrator <admin+scm@chorem.org>.

    

chorem.org scm

tags

participants (1)