Merge pull request #3567 from FinnStutzenstein/layoutChanges

Collapsable agenda, one panel for each motion comment and hide closed…

CHANGELOG

@@ -15,6 +15,8 @@ Agenda:
 - Fixed multiple request on creation of agenda related items [#3341].
 - Added possibility to mark speakers [#3570].
 - New DOCX export of agenda [#3569].
+- Hide closed agenda items in the item slide [#3567].
+- Agenda is now collapsable for a better overview [#3567].
 
 Motions:
 - New export dialog [#3185].

openslides/agenda/static/css/agenda/_projector.scss

@@ -6,10 +6,6 @@
 
     p {
         font-size: 140%;
-
-        &.done {
-            color: #9a9898;
-        }
     }
 
     .mainitem {

openslides/agenda/static/css/agenda/_site.scss

@@ -2,12 +2,21 @@
 
 #agenda-table {
     .icon-column {
+        padding: 3px;
         width: 5%;
     }
 
     .title-column {
-        padding: 0px 10px;
+        padding-left: 3px;
-        width: 95%;
+        padding-right: 10px;
+        width: calc(95% - 15px );
+    }
+
+    .caret-spacer {
+        width: 15px;
+        padding: 3px;
+        color: #337ab7;
+        font-size: 115%;
     }
 }
 

openslides/agenda/static/js/agenda/base.js

@@ -298,6 +298,7 @@ angular.module('OpenSlidesApp.agenda', ['OpenSlidesApp.users'])
 
                 function generateFlatTree(tree, parentCount) {
                     _.each(tree, function (item) {
+                        item.item.childrenCount = item.children.length;
                         item.item.parentCount = parentCount;
                         flatItems.push(item.item);
                         generateFlatTree(item.children, parentCount + 1);

openslides/agenda/static/js/agenda/site.js

@@ -120,10 +120,7 @@ angular.module('OpenSlidesApp.agenda.site', [
                 return item.list_view_title;
             });
             $scope.items = AgendaTree.getFlatTree(allowedItems);
-            var subitems = $filter('filter')($scope.items, {'parent_id': ''});
+            $scope.agendaHasSubitems = $filter('filter')($scope.items, {'parent_id': ''}).length;
-            if (subitems.length) {
-                $scope.agendaHasSubitems = true;
-            }
         });
         Projector.bindAll({}, $scope, 'projectors');
         $scope.mainListTree = true;
@@ -169,6 +166,12 @@ angular.module('OpenSlidesApp.agenda.site', [
             },
         };
 
+        // Expand all items during searching.
+        $scope.filter.changed = function () {
+            $scope.collapseState = true;
+            $scope.toggleCollapseState();
+        };
+
         // pagination
         $scope.pagination = osTablePagination.createInstance('AgendaTablePagination');
 
@@ -235,6 +238,14 @@ angular.module('OpenSlidesApp.agenda.site', [
             }
         };
 
+        // Agenda collapse function
+        $scope.toggleCollapseState = function () {
+            $scope.collapseState = !$scope.collapseState;
+            _.forEach($scope.items, function (item) {
+                item.hideChildren = $scope.collapseState;
+            });
+        };
+
         /** Agenda item functions **/
         // open dialog for new topics // TODO Remove this. Don't forget import button in template.
         $scope.newDialog = function () {
@@ -278,6 +289,7 @@ angular.module('OpenSlidesApp.agenda.site', [
         $scope.edit = function (item) {
             ngDialog.open(item.getContentObjectForm().getDialog({id: item.content_object.id}));
         };
+
         // export
         $scope.pdfExport = function () {
             AgendaPdfExport.export($scope.itemsFiltered);
@@ -393,6 +405,33 @@ angular.module('OpenSlidesApp.agenda.site', [
     }
 ])
 
+// filter to hide collapsed items. Items has to be a flat tree.
+.filter('collapsedItemFilter', [
+    function () {
+        return function (items) {
+            return _.filter(items, function (item) {
+                var index = _.findIndex(items, item);
+                var parentId = item.parent_id;
+                // Search for parents, if one has the hideChildren attribute set. All parents
+                // have a higher index as this item, because items is a flat tree.
+                // If a parent has this attribute, we should remove this item. Else if we hit
+                // the top or an item on the first layer, the item is not collapsed.
+                for (--index; index >= 0 && parentId !== null; index--) {
+                    var p = items[index];
+                    if (p.id === parentId) {
+                        if (p.hideChildren) {
+                            return false;
+                        } else {
+                            parentId = p.parent_id;
+                        }
+                    }
+                }
+                return true;
+            });
+        };
+    }
+])
+
 .controller('ItemDetailCtrl', [
     '$scope',
     '$filter',

openslides/agenda/static/templates/agenda/item-list.html

@@ -148,6 +148,13 @@
           </span>
         </span>
       </span>
+      <span ng-if="items.length === itemsFiltered.length">
+        &middot;
+        <a href="" ng-click="toggleCollapseState()">
+          <span ng-if="collapseState" translate>Expand all</span>
+          <span ng-if="!collapseState" translate>Collapse all</span>
+        </a>
+      </span>
     </div>
     <div class="col-md-6" ng-show="itemsFiltered.length > pagination.itemsPerPage">
       <span class="pull-right">
@@ -232,6 +239,7 @@
         | osFilter: filter.filterString : filter.getObjectQueryString
         | filter: {closed: filter.booleanFilters.closed.value}
         | filter: {is_hidden: filter.booleanFilters.is_hidden.value})
+        | collapsedItemFilter
         | limitTo : pagination.itemsPerPage : pagination.limitBegin">
 
       <!-- select column -->
@@ -279,11 +287,18 @@
       <div class="no-projector-spacer" os-perms="!core.can_manage_projector"></div>
 
       <!-- main content column -->
-      <div class="col-xs-6 content" style="padding-left: calc({{ item.parentCount }}*15px)">
+      <div class="col-xs-6 content"
+        style="padding-left: calc({{ items.length === itemsFiltered.length ? item.parentCount : 0 }}*25px)">
         <div class="icon-column">
           <i class="fa fa-ban" ng-style="{'visibility': item.is_hidden ? 'visible' : 'hidden'}"
             title="{{ 'Internal item' | translate }}"></i>
         </div>
+        <div class="caret-spacer" ng-if="items.length === itemsFiltered.length">
+          <i class="fa pointer"
+            ng-style="{visibility: item.childrenCount ? 'visible' : 'hidden'}"
+            ng-class="item.hideChildren ? 'fa-caret-right' : 'fa-caret-down'"
+            ng-click="item.hideChildren = !item.hideChildren"></i>
+        </div>
         <div class="title-column">
           <!-- ID and title -->
           <div>
@@ -295,7 +310,8 @@
             </span>
           </div>
           <!-- hover menu -->
-          <div os-perms="agenda.can_see" ng-class="{'hiddenDiv': !item.hover}">
+          <div os-perms="agenda.can_see" ng-class="{'hiddenDiv': !item.hover}"
+            ng-style="{'padding-left': items.length === itemsFiltered.length ? '15px' : '0px'}">
             <small>
               <a ui-sref="agenda.item.detail({id: item.id})" translate>List of speakers</a>
               <span os-perms="agenda.can_manage"> &middot;

openslides/agenda/static/templates/agenda/slide-item-list.html

@@ -11,18 +11,18 @@
 
 <!-- Nested node template -->
 <script type="text/ng-template" id="projector_agenda_renderer.html">
-  <td class="number">
+  <td class="number" ng-if="!node.item.closed">
-    <p ng-class="{mainitem: node.item.parent_id === null, subitem: node.item.parent_id !== null, done: node.item.closed}">
+    <p ng-class="{mainitem: node.item.parent_id === null, subitem: node.item.parent_id !== null}">
       {{ node.item.item_number }}
     </p>
   </td>
-  <td>
+  <td ng-if="!node.item.closed">
     <p ng-class="{mainitem: node.item.parent_id === null}" ng-if="node.item.item_number">
       &middot;
     </p>
   </td>
-  <td>
+  <td ng-if="!node.item.closed">
-    <p ng-class="{mainitem: node.item.parent_id === null, subitem: node.item.parent_id !== null, done: node.item.closed}">
+    <p ng-class="{mainitem: node.item.parent_id === null, subitem: node.item.parent_id !== null}">
       {{ node.item.title }}
     </p>
     <table ng-if="node.children.length" class="agendalist-table">

openslides/core/static/js/core/site.js

@@ -511,6 +511,7 @@ angular.module('OpenSlidesApp.core.site', [
             self.existsStorageEntry = existsStorageEntry;
             self.save = function () {
                 $sessionStorage[tableName] = self;
+                self.changed();
             };
             self.areFiltersSet = function () {
                 var areFiltersSet = _.find(self.multiselectFilters, function (filterList) {
@@ -567,6 +568,8 @@ angular.module('OpenSlidesApp.core.site', [
                 });
                 return stringList.join(' ');
             };
+            // Stub for callback
+            self.changed = function () {};
             return self;
         };
 

openslides/motions/static/js/motions/motion-services.js

@@ -131,7 +131,7 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
     function (MotionInlineEditing, Editor) {
         var createInstances = function ($scope, motion) {
             var commentsInlineEditing = {
-                editors: []
+                editors: {}, // Map comment id to editor instance.
             };
             var options = Editor.getOptions('inline', 'YOffset');
             _.forEachRight($scope.noSpecialCommentsFields, function (field, id) {
@@ -141,20 +141,20 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
                         return motion['comment_' + id];
                     },
                     function (obj) {
+                        if (obj.editor) {
                             motion['comment_' + id] = obj.editor.getData();
                         }
+                    }
                 );
-                commentsInlineEditing.editors.push(inlineEditing);
+                commentsInlineEditing.editors[id] = inlineEditing;
             });
             commentsInlineEditing.saveToolbarVisible = function () {
                 return _.some(commentsInlineEditing.editors, function (instance) {
                     return instance.changed && instance.active;
                 });
             };
-            commentsInlineEditing.active = function () {
+            commentsInlineEditing.active = function (commentId) {
-                return _.some(commentsInlineEditing.editors, function (instance) {
+                return commentsInlineEditing.editors[commentId].active;
-                    return instance.active;
-                });
             };
             commentsInlineEditing.save = function () {
                 _.forEach(commentsInlineEditing.editors, function (instance) {
@@ -166,15 +166,11 @@ angular.module('OpenSlidesApp.motions.motionservices', ['OpenSlidesApp.motions',
                     instance.revert();
                 });
             };
-            commentsInlineEditing.enable = function () {
+            commentsInlineEditing.enable = function (commentId) {
-                _.forEach(commentsInlineEditing.editors, function (instance) {
+                commentsInlineEditing.editors[commentId].enable();
-                    instance.enable();
-                });
             };
-            commentsInlineEditing.disable = function () {
+            commentsInlineEditing.disable = function (commentId) {
-                _.forEach(commentsInlineEditing.editors, function (instance) {
+                commentsInlineEditing.editors[commentId].disable();
-                    instance.disable();
-                });
             };
 
             return commentsInlineEditing;

openslides/motions/static/js/motions/pdf.js

@@ -1069,26 +1069,23 @@ angular.module('OpenSlidesApp.motions.pdf', ['OpenSlidesApp.core.pdf'])
                     });
                 });
             },
-            exportComments: function (motion, filename) {
+            exportComment: function (motion, commentId, filename) {
-                var fields = MotionComment.getNoSpecialCommentsFields();
+                var field = MotionComment.getNoSpecialCommentsFields()[commentId];
-                var content = [];
+                if (field && motion.comments[commentId]) {
-                _.forEach(fields, function (field, id) {
-                    if (motion.comments[id]) {
                     var title = field.name;
                     if (!field.public) {
                         title += ' (' + gettextCatalog.getString('internal') + ')';
                     }
-                        content.push({
+                    var content = [{
                         heading: title,
-                            text: motion.comments[id],
+                        text: motion.comments[commentId],
-                        });
+                    }];
-                    }
-                });
                     MotionPartialContentProvider.createInstance(motion, content).then(function (contentProvider) {
                         PdfMakeDocumentProvider.createInstance(contentProvider).then(function (documentProvider) {
                             PdfCreate.download(documentProvider.getDocument(), filename);
                         });
                     });
+                }
             },
         };
     }

openslides/motions/static/js/motions/site.js

@@ -1768,11 +1768,11 @@ angular.module('OpenSlidesApp.motions.site', [
         $scope.createPollPdf = function () {
             MotionPdfExport.createPollPdf($scope.motion, $scope.version);
         };
-        $scope.exportComments = function () {
+        $scope.exportComment = function (commentId) {
             var identifier = $scope.motion.identifier ? '-' + $scope.motion.identifier : '';
             var commentsString = ' - ' + gettextCatalog.getString('Comments');
             var filename = gettextCatalog.getString('Motion') + identifier + commentsString + '.pdf';
-            MotionPdfExport.exportComments($scope.motion, filename);
+            MotionPdfExport.exportComment($scope.motion, commentId, filename);
         };
         $scope.exportPersonalNote = function () {
             var identifier = $scope.motion.identifier ? '-' + $scope.motion.identifier : '';

openslides/motions/static/templates/motions/motion-detail/comments.html

@@ -1,38 +1,39 @@
-<div class="details" ng-if="commentFieldsAvailable()">
+<div class="details" ng-repeat="(id, field) in noSpecialCommentsFields">
   <div class="row">
     <!-- inline editing toolbar -->
     <div class="motion-toolbar">
       <div class="pull-right inline-editing-activator">
-        <button ng-click="exportComments()" class="btn btn-default btn-sm"
+        <button ng-click="exportComment(id)" class="btn btn-default btn-sm"
           uib-tooltip="{{ 'Export comments only' | translate }}">
           <i class="fa fa-file-pdf-o"></i>
           <translate>PDF</translate>
         </button>
         <span ng-if="motion.isAllowed('change_comments')">
-          <button ng-if="!commentsInlineEditing.active()" ng-click="commentsInlineEditing.enable()"
+          <button ng-if="!commentsInlineEditing.active(id)" ng-click="commentsInlineEditing.enable(id)"
             class="btn btn-sm btn-default">
             <i class="fa fa-pencil-square-o"></i>
             <translate>Inline editing</translate>
           </button>
-          <button ng-if="commentsInlineEditing.active()" ng-click="commentsInlineEditing.disable()"
+          <button ng-if="commentsInlineEditing.active(id)" ng-click="commentsInlineEditing.disable(id)"
             class="btn btn-sm btn-default">
             <i class="fa fa-times-circle"></i>
             <translate>Inline editing</translate>
           </button>
         </span>
       </div>
-      <h1 class="toolbar-left" translate>Comments</h1>
+      <h1 class="toolbar-left" translate>Comments
+        {{ field.name }}
+        <span ng-if="!field.public" class="label label-warning" translate>internal</span>
+      </h1>
     </div>
     <!-- comment fields -->
     <div class="col-sm-12">
-      <div ng-repeat="(id, field) in noSpecialCommentsFields">
-        <h4>
-          {{ field.name }}
-          <span ng-if="!field.public" class="label label-warning" translate>internal</span>
-        </h4>
       <div id="view-original-comment-inline-editor-{{ id }}" style="min-height: 14px;"
         ng-bind-html="motion.comments[id] | trusted" contenteditable="{{ commentsInlineEditing.editors[$index].isEditable }}"></div>
     </div>
+  </div>
+</div>
+
 <!-- save toolbar -->
 <div class="motion-save-toolbar" ng-class="{ 'visible': commentsInlineEditing.saveToolbarVisible() }">
   <div class="changed-hint" translate>A comment has been changed.</div>
@@ -43,6 +44,3 @@
       Revert
   </button>
 </div>
-    </div>
-  </div>
-</div>