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 fec8d1244e78d3c31b8f69c684a612a28d06bf24 Author: Adrien Garandel <a.garandel@dralagen.fr> Date: Mon Jun 23 15:39:23 2014 +0200 improve UI --- pollen-ui-angular/src/main/webapp/css/style.css | 44 ++++++++++++++++++++- .../src/main/webapp/img/chart-icon.png | Bin 0 -> 610 bytes pollen-ui-angular/src/main/webapp/img/pie-icon.png | Bin 0 -> 1292 bytes pollen-ui-angular/src/main/webapp/index.html | 4 +- pollen-ui-angular/src/main/webapp/js/app.js | 41 ++++++++++--------- .../main/webapp/js/controllers/favoriteListCtrl.js | 17 ++++++-- .../src/main/webapp/js/controllers/pollCtrl.js | 29 ++++++++------ .../main/webapp/partials/favoriteList-edit.html | 4 +- .../src/main/webapp/partials/poll-comment.html | 2 +- .../main/webapp/partials/poll-listParticipant.html | 13 ++++-- .../src/main/webapp/partials/poll-result.html | 34 ++++++++++++---- 11 files changed, 138 insertions(+), 50 deletions(-) diff --git a/pollen-ui-angular/src/main/webapp/css/style.css b/pollen-ui-angular/src/main/webapp/css/style.css index ab77b85..7047243 100644 --- a/pollen-ui-angular/src/main/webapp/css/style.css +++ b/pollen-ui-angular/src/main/webapp/css/style.css @@ -276,4 +276,46 @@ i.icon-collapse { hr { border-top:1px solid #CCCCCC; -} \ No newline at end of file +} + +.table-result { + margin-left: auto; + margin-right: auto; + margin-top:5px; + margin-bottom:15px; +} +.table-result tr, .table-result tr td, .table-result tr th { + padding:8px; + border: 1px solid #AAA; + transition-duration: 0.5s; +} + +.table-result tr:hover { + background:#DDDDDD; + transition-duration: 0.5s; +} + +.plot { + height:300px; + margin-top:5px; + margin-bottom:15px; +} + +.ng-enter, .ng-leave { + -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.25s; + transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.25s; +} + +.ng-leave { + height:0px; +} + +.ng-enter, +.ng-leave.ng-leave-active { + opacity:0; +} + +.ng-leave, +.ng-enter.ng-enter-active { + opacity:1; +} diff --git a/pollen-ui-angular/src/main/webapp/img/chart-icon.png b/pollen-ui-angular/src/main/webapp/img/chart-icon.png new file mode 100644 index 0000000..152442c Binary files /dev/null and b/pollen-ui-angular/src/main/webapp/img/chart-icon.png differ diff --git a/pollen-ui-angular/src/main/webapp/img/pie-icon.png b/pollen-ui-angular/src/main/webapp/img/pie-icon.png new file mode 100644 index 0000000..fba9dd7 Binary files /dev/null and b/pollen-ui-angular/src/main/webapp/img/pie-icon.png differ diff --git a/pollen-ui-angular/src/main/webapp/index.html b/pollen-ui-angular/src/main/webapp/index.html index 4423296..a4589d9 100644 --- a/pollen-ui-angular/src/main/webapp/index.html +++ b/pollen-ui-angular/src/main/webapp/index.html @@ -35,15 +35,15 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pieRenderer.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.highlighter.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.4.1/ckeditor.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-resource.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.0.1/angular-translate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script> - <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.4.1/ckeditor.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> diff --git a/pollen-ui-angular/src/main/webapp/js/app.js b/pollen-ui-angular/src/main/webapp/js/app.js index 037841d..0465c9e 100644 --- a/pollen-ui-angular/src/main/webapp/js/app.js +++ b/pollen-ui-angular/src/main/webapp/js/app.js @@ -18,7 +18,7 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * #L% */ -angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userControllers', 'favoriteListControllers', 'localeControllers', 'ui.bootstrap', 'pascalprecht.translate']) +angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userControllers', 'favoriteListControllers', 'localeControllers', 'ui.bootstrap', 'pascalprecht.translate', 'ngAnimate']) .config(['$httpProvider', function($httpProvider) { // edit header for locale and sessionToken $httpProvider.interceptors.push('httpInterceptor'); @@ -320,6 +320,7 @@ angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userC restrict : 'E', scope : { data:'=', + max:'=' }, template:'<div class="jqplot-target"></div>', link: function(scope, element, attrs) { @@ -332,7 +333,6 @@ angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userC //animate: !$.jqplot.use_excanvas, seriesDefaults:{ renderer:$.jqplot.BarRenderer, - pointLabels: { show: true }, rendererOptions : { varyBarColor: true } @@ -340,6 +340,7 @@ angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userC axesDefaults: { showTicks: true, showTickMarks: true, + max: scope.max, tickOptions: { showGridline: false, show:true, @@ -349,25 +350,28 @@ angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userC axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer, + }, + yaxis: { + label:'Vote', } - }, - highlighter: { - showMaker:false, - tooltipLocation: 'ne', - formatString:'<div style="display:none">%s</div>%s Vote(s)' } }); + + var imgData = $(element).find('div').jqplotToImageStr({}); + $(element).html('<img src="' + imgData + '" />') } }; - scope.$watch('data', function () { - if (angular.isDefined(scope.plot)) { - scope.plot.html(''); - initChart() - } else { - initChart(); - } - }, true); + $timeout( function() { + scope.$watch('data', function () { + if (angular.isDefined(scope.plot)) { + scope.plot.html(''); + initChart() + } else { + initChart(); + } + }); + }); } } }) @@ -398,11 +402,12 @@ angular.module('pollen', ['pollenServices', 'ngRoute', 'pollControllers', 'userC }, legend:{ show:true - }, - highlighter:{ - show:false } }); + + var imgData = $(element).find('div').jqplotToImageStr({}); + $(element).html('<img src="' + imgData + '" />') + } }; diff --git a/pollen-ui-angular/src/main/webapp/js/controllers/favoriteListCtrl.js b/pollen-ui-angular/src/main/webapp/js/controllers/favoriteListCtrl.js index 6bd03aa..655996f 100644 --- a/pollen-ui-angular/src/main/webapp/js/controllers/favoriteListCtrl.js +++ b/pollen-ui-angular/src/main/webapp/js/controllers/favoriteListCtrl.js @@ -70,6 +70,10 @@ angular.module('favoriteListControllers', []) } }); + var getEmptyFavoriteList = function () { + return {name:'', members: []}; + } + var initFavoriteList = function () { if ($routeParams.favoriteListId) { FavoriteList.get({favoriteListId:$routeParams.favoriteListId}, function (favList) { @@ -78,7 +82,7 @@ angular.module('favoriteListControllers', []) }); } else { - $scope.data.favoriteList = {name:'', members: []}; + $scope.data.favoriteList = getEmptyFavoriteList(); } }; initFavoriteList(); @@ -170,10 +174,13 @@ angular.module('favoriteListControllers', []) } }); } + else { + $location.url('/favoriteList'); + } }; $scope.deleteMember = function (member) { - if (angular.isDefined($scope.data.favoriteList.id)) { + if (angular.isDefined($scope.data.favoriteList.id) && angular.isDefined(member.id)) { var confirmMessage; $translate('action.message.confirmDelete').then(function (msg) { confirmMessage = msg; @@ -187,10 +194,14 @@ angular.module('favoriteListControllers', []) } }); } + else { + var index = $scope.data.favoriteList.members.indexOf(member); + $scope.data.favoriteList.members.splice(index, 1); + } }; $scope.newFavoriteList = function () { - initFavoriteList(); + $scope.data.favoriteList = getEmptyFavoriteList(); $location.url('/favoriteList/new'); } diff --git a/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js b/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js index 3714ed5..316add0 100644 --- a/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js +++ b/pollen-ui-angular/src/main/webapp/js/controllers/pollCtrl.js @@ -475,10 +475,12 @@ angular.module('pollControllers', []) } var initFavoriteList = function () { - FavoriteList.get({paginationParameter:{pageSize:-1}}, function (data) { - $scope.data.favoriteList = data.elements; - $scope.data.favoriteListImport = null; - }); + if (angular.isDefined(SessionStorage.get().user)) { + FavoriteList.get({paginationParameter:{pageSize:-1}}, function (data) { + $scope.data.favoriteList = data.elements; + $scope.data.favoriteListImport = null; + }); + } }; initFavoriteList(); $scope.importFavoriteList = function (voterListId) { @@ -602,6 +604,9 @@ angular.module('pollControllers', []) PollVoterList.remove({pollId:$routeParams.pollId, permission:$scope.globalVariables.permission, voterListId:voterList.group.id}, function (data) { var index = $scope.data.voterList.indexOf(voterList); $scope.data.voterList.splice(index, 1); + if ($scope.data.voterList.length == 0 && $scope.data.poll.pollType == 'RESTRICTED') { + $scope.addGroup(); + } }); } }); @@ -609,6 +614,9 @@ angular.module('pollControllers', []) else { var index = $scope.data.voterList.indexOf(voterList); $scope.data.voterList.splice(index, 1); + if ($scope.data.voterList.length == 0 && $scope.data.poll.pollType == 'RESTRICTED') { + $scope.addGroup(); + } } }; @@ -956,6 +964,7 @@ angular.module('pollControllers', []) $controller('PollCtrl', {$scope:$scope}); $scope.tab = $scope.setTab('result'); + $scope.plot = 'chart'; var choicesDeferred = $q.defer(); PollChoice.query({pollId:$routeParams.pollId}, function (choices) { @@ -992,16 +1001,14 @@ angular.module('pollControllers', []) } } }) - $scope.data.result.scoresChart = scores; resultDeferred.resolve('result load'); - }); - }); - votesDeferred.promise.then(function () { - angular.forEach($scope.data.result.scoresChart, function (value, key) { - value.push( Math.round(value[1] * 100 / $scope.data.result.scoreTotal) + '%'); + votesDeferred.promise.then(function () { + $scope.data.result.scoresChart = scores; + }); + }); - }) + }); }]) diff --git a/pollen-ui-angular/src/main/webapp/partials/favoriteList-edit.html b/pollen-ui-angular/src/main/webapp/partials/favoriteList-edit.html index 3ceb95d..47f66fa 100644 --- a/pollen-ui-angular/src/main/webapp/partials/favoriteList-edit.html +++ b/pollen-ui-angular/src/main/webapp/partials/favoriteList-edit.html @@ -32,7 +32,7 @@ <input type="text" ng-model="member.email" class="form-control" auto-save="saveMember(member)" /> </input-error> </td> - <td class="action"> <div ng-show="member.id"><button class="btn btn-danger" ng-click="deleteMember(member);" tooltip="{{ 'action.favoriteList.deleteMember' | translate }} "><span class="glyphicon glyphicon-trash"></span></button></div></td> + <td class="action"><button class="btn btn-danger" ng-click="deleteMember(member);" tooltip="{{ 'action.favoriteList.deleteMember' | translate }} "><span class="glyphicon glyphicon-trash"></span></button></td> </tr> <tr> @@ -46,7 +46,7 @@ <tr> <th colspan="3"> <button class="btn btn-info" ng-click="addMember();"><span class="glyphicon glyphicon-plus"></span> {{ 'action.favoriteList.addMember' | translate }} </button> - <button class="btn btn-danger" ng-click="deleteFavoriteList();" ng-show="data.favoriteList.id"><span class="glyphicon glyphicon-trash"></span> {{ 'action.favoriteList.delete' | translate }} </button> + <button class="btn btn-danger" ng-click="deleteFavoriteList();"><span class="glyphicon glyphicon-trash"></span> {{ 'action.favoriteList.delete' | translate }} </button> </th> </tr> </table> diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-comment.html b/pollen-ui-angular/src/main/webapp/partials/poll-comment.html index a738c9c..cfd2042 100644 --- a/pollen-ui-angular/src/main/webapp/partials/poll-comment.html +++ b/pollen-ui-angular/src/main/webapp/partials/poll-comment.html @@ -38,7 +38,7 @@ <label class="col-sm-2"> {{ 'comment' | translate }} </label> <div class="col-sm-1"><info-error error="restError.text[0]" data="comment.text"></info-error></div> <div class="col-sm-9"> - <textarea data-ck-editor ng-model="comment.text" focus-me="comment.id != null"></textarea> + <textarea ck-editor ng-model="comment.text" focus-me="comment.id != null"></textarea> </div> </div> diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html b/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html index dc0ef80..a60cb46 100644 --- a/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html +++ b/pollen-ui-angular/src/main/webapp/partials/poll-listParticipant.html @@ -34,11 +34,14 @@ {{ 'poll.restricted.group' | translate }} </label> - <hr/> - <div class="container-fluid"> + + + <div class="container-fluid" ng-hide="data.poll.pollType == 'FREE'"> + <hr/> + <div class="row"> <button class="btn btn-info" ng-show="data.poll.pollType == 'GROUP'" ng-click="addGroup()"><span class="glyphicon glyphicon-plus"></span> {{ 'action.restricted.addGroup' | translate }}</button> - <button class="btn btn-warning" ng-hide="data.poll.pollType == 'FREE'" disabled><span class="glyphicon glyphicon-envelope"></span> {{ 'action.restricted.notify' | translate }}</button> + <button class="btn btn-warning" disabled><span class="glyphicon glyphicon-envelope"></span> {{ 'action.restricted.notify' | translate }}</button> </div> <div class="row" ng-if="data.favoriteList"> @@ -56,9 +59,11 @@ </select> </div> </div> + + <hr/> </div> - <hr/> + <table ng-repeat="voterList in data.voterList" class="voterList" ng-hide="data.poll.pollType == 'FREE'"> diff --git a/pollen-ui-angular/src/main/webapp/partials/poll-result.html b/pollen-ui-angular/src/main/webapp/partials/poll-result.html index 8ff8bb9..fb492d4 100644 --- a/pollen-ui-angular/src/main/webapp/partials/poll-result.html +++ b/pollen-ui-angular/src/main/webapp/partials/poll-result.html @@ -2,12 +2,30 @@ <h2> Résultats : {{data.result.nbVotant}} Votants</h2> -<chart data="data.result.scoresChart"></chart> -<pie data="data.result.scoresChart"></pie> -<div ng-repeat="score in data.result.scores"> - <h4> {{score.choice.name}} </h4> - <p> - nb vote : {{score.scoreValue}} - </p> -</div> \ No newline at end of file +<hr/> +<div> + <button class="btn btn-default" ng-click="plot = 'chart'"><img src="img/chart-icon.png" /></button> + <button class="btn btn-default" ng-click="plot = 'pie'"><img src="img/pie-icon.png" </button> +</div> +<div class="plot"> + <div ng-if="plot == 'chart'"> + <chart data="data.result.scoresChart" max="data.result.nbVotant"></chart> + </div> + <div ng-if="plot == 'pie'"> + <pie data="data.result.scoresChart"></pie> + </div> +</div> +<hr/> +<table class="table-result"> + <tr> + <th>Choix</th> + <th>Score</th> + </tr> + <tr ng-repeat="score in data.result.scores"> + <th> {{score.choice.name}} </th> + <td> + {{score.scoreValue}} + </td> + </tr> +</table> \ No newline at end of file -- To stop receiving notification emails like this one, please contact chorem.org SCM administrator <admin+scm@chorem.org>.
participants (1)
-
chorem.org scm