New layout for agenda list slide, fixing long titles in agenda list view, fixing mediafiles in fullscreen (fixes #3369)

openslides/agenda/static/js/agenda/projector.js

@@ -77,6 +77,7 @@ angular.module('OpenSlidesApp.agenda.projector', ['OpenSlidesApp.agenda'])
         // class.
 
         // Bind agenda tree to the scope
+        var items;
         $scope.$watch(function () {
             return Agenda.lastModified();
         }, function () {
@@ -101,12 +102,19 @@ angular.module('OpenSlidesApp.agenda.projector', ['OpenSlidesApp.agenda'])
                     $scope.items.push(item);
                 }
             } else if ($scope.element.tree) {
-                $scope.items = AgendaTree.getFlatTree(Agenda.getAll());
+                items = _.filter(Agenda.getAll(), function (item) {
+                    return item.type === 1;
+                });
+                $scope.tree = AgendaTree.getTree(items);
             } else {
-                $scope.items = Agenda.filter({
+                items = Agenda.filter({
                     where: { parent_id: null },
                     orderBy: 'weight'
                 });
+                items = _.filter(items, function (item) {
+                    return item.type === 1;
+                });
+                $scope.tree = AgendaTree.getTree(items);
             }
         });
     }

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

@@ -142,7 +142,7 @@
       </span>
   </div>
 
-  <div class="os-table container-fluid">
+  <div id="agenda-table" class="os-table container-fluid">
     <div class="row header-row">
       <div class="col-xs-1 centered" ng-show="isSelectMode">
         <i class="fa text-danger pointer" ng-class="selectedAll ? 'fa-check-square-o' : 'fa-square-o'"
@@ -265,11 +265,11 @@
 
       <!-- main content column -->
       <div class="col-xs-6 content" style="padding-left: calc({{ item.parentCount }}*15px)">
-        <div class="spacer-right">
+        <div class="icon-column">
           <i class="fa fa-ban" ng-style="{'visibility': item.is_hidden ? 'visible' : 'hidden'}"
             title="{{ 'Internal item' | translate }}"></i>
         </div>
-        <div>
+        <div class="title-column">
           <!-- ID and title -->
           <div>
             <a class="title" ui-sref="{{ item.getContentObjectDetailState() }}" ng-show="isAllowedToSeeOpenLink(item)">

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

@@ -3,11 +3,30 @@
   <h1 ng-if="element.id">{{ rootItem.getTitle() }}</h1>
 
   <div class="agendalist">
-    <!-- item type: AGENDA_ITEM = 1, HIDDEN_ITEM = 2 -->
-    <p ng-repeat="item in items | filter: {type: 1}"
-        ng-class="{mainitem: item.parentCount == 0, subitem: item.parentCount != 0, done: item.closed}">
-      <span ng-repeat="n in [].constructor(item.parentCount) track by $index">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-      {{ item.getListViewTitle() }}
-    </p>
+    <table class="agendalist-table">
+      <tr ng-repeat="node in tree" ng-include="'projector_agenda_renderer.html'"></tr>
+    </table>
   </div>
 </div>
+
+<!-- Nested node template -->
+<script type="text/ng-template" id="projector_agenda_renderer.html">
+  <td class="number">
+    <p ng-class="{mainitem: node.item.parent_id === null, subitem: node.item.parent_id !== null, done: node.item.closed}">
+      {{ node.item.item_number }}
+    </p>
+  </td>
+  <td>
+    <p ng-class="{mainitem: node.item.parent_id === null}" ng-if="node.item.item_number">
+      &middot;
+    </p>
+  </td>
+  <td>
+    <p ng-class="{mainitem: node.item.parent_id === null, subitem: node.item.parent_id !== null, done: node.item.closed}">
+      {{ node.item.title }}
+    </p>
+    <table ng-if="node.children.length" class="agendalist-table">
+      <tr ng-repeat="node in node.children" ng-include="'projector_agenda_renderer.html'"></tr>
+    </table>
+  </td>
+</script>

openslides/core/static/css/app.css

@@ -1083,6 +1083,16 @@ img {
     padding: 5px 5px 5px 0;
 }
 
+/** Agenda table **/
+#agenda-table .icon-column {
+    width: 5%;
+}
+
+#agenda-table .title-column {
+    padding: 0px 10px;
+    width: 95%;
+}
+
 /** Mediafile table **/
 #mediafile-table .icon-column {
     width: 10%;

openslides/core/static/css/projector.css

@@ -170,7 +170,7 @@ body {
 }
 .fullscreen {
     position: fixed;
-    top: 0;
+    top: 0 !important;
     left: 0;
     width: 100%;
     height: 100%;
@@ -389,6 +389,9 @@ tr.elected td {
 }
 
 /*** Agenda list ***/
+.agendalist {
+    line-height: 1.5em;
+}
 .agendalist p {
     font-size: 140%;
 }
@@ -406,6 +409,16 @@ tr.elected td {
     margin-top: 10px;
 }
 
+.agendalist-table td {
+    vertical-align: top;
+    padding-left: 5px;
+}
+
+.agendalist-table .number {
+    padding: 0;
+    white-space: nowrap;
+}
+
 
 /*** List of speakers ***/
 .slimlabel.label {