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>.