List views: show number of filtered AND total rows.

Improve css animation for ng-enter/ng-leave.

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

@@ -31,7 +31,8 @@
     <div class="col-sm-6">
       <form class="form-inline">
         <!-- delete mode -->
-        <button os-perms="agenda.can_manage" class="btn btn-default"
+        <button os-perms="agenda.can_manage" class="btn"
+            ng-class="$parent.isDeleteMode ? 'btn-primary' : 'btn-default'"
             ng-click="$parent.isDeleteMode = !$parent.isDeleteMode; uncheckAll()">
           <i class="fa fa-check-square-o"></i>
           <translate>Select ...</translate>
@@ -65,7 +66,8 @@
                placeholder="{{ 'Search' | translate}}">
           </div>
         </div>
-        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen">
+        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen"
+            ng-class="isFilterOpen ? 'btn-primary' : 'btn-default'">
           <i class="fa fa-filter"></i>
           <translate>Filter ...</translate>
         </button>
@@ -95,6 +97,7 @@
   </div>
 
   <div class="spacer-top-lg italic">
+    <span os-perms="agenda.can_see_hidden_items">{{ itemsFiltered.length }} /</span>
     {{ items.length }} {{ "items" | translate }}<span ng-if="(items|filter:{selected:true}).length > 0">,
     {{(items|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
   </div>
@@ -115,8 +118,8 @@
         <th class="minimum">
           <translate>Done</translate>
     <tbody>
-      <tr ng-repeat="item in items | filter: filter.search |  filter: {is_hidden: filter.showHiddenItems}
+      <tr ng-repeat="item in itemsFiltered = (items | filter: filter.search |
-          |  filter: {closed: filter.showClosedItems}"
+          filter: {is_hidden: filter.showHiddenItems} |  filter: {closed: filter.showClosedItems})"
           class="animate-item"
           ng-class="{ 'activeline': item.isProjected(), 'selected': item.selected, 'hiddenrow': item.is_hidden}">
         <!-- projector column -->

openslides/assignments/static/templates/assignments/assignment-list.html

@@ -23,7 +23,8 @@
     <div class="col-sm-6">
       <form class="form-inline">
         <!-- delete mode -->
-        <button os-perms="assignments.can_manage" class="btn btn-default"
+        <button os-perms="assignments.can_manage" class="btn"
+            ng-class="$parent.isDeleteMode ? 'btn-primary' : 'btn-default'"
             ng-click="$parent.isDeleteMode = !$parent.isDeleteMode; uncheckAll()">
           <i class="fa fa-check-square-o"></i>
           <translate>Select ...</translate>
@@ -39,7 +40,8 @@
                placeholder="{{ 'Search' | translate}}">
           </div>
         </div>
-        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen">
+        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen"
+            ng-class="isFilterOpen ? 'btn-primary' : 'btn-default'">
           <i class="fa fa-filter"></i>
           <translate>Filter ...</translate>
         </button>
@@ -69,6 +71,7 @@
   </div>
 
   <div class="spacer-top-lg italic">
+    {{ assignmentsFiltered.length }} /
     {{ assignments.length }} {{ "elections" | translate }}<span ng-if="(assignments|filter:{selected:true}).length > 0">,
     {{(assignments|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
   </div>
@@ -96,8 +99,8 @@
               ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
           </i>
     <tbody>
-      <tr ng-repeat="assignment in assignments | filter: filter.search | filter: {phase: phaseFilter} |
+      <tr ng-repeat="assignment in assignmentsFiltered = (assignments | filter: filter.search |
-          orderBy: sortColumn:reverse"
+          filter: {phase: phaseFilter} | orderBy: sortColumn:reverse)"
           class="animate-item"
           ng-class="{ 'activeline': assignment.isProjected(), 'selected': assignment.selected }">
         <!-- projector column -->

openslides/core/static/css/app.css

@@ -648,23 +648,21 @@ img {
 
 /* ngAnimate classes */
 .animate-item.ng-enter {
-    -webkit-animation: fade-in 1s linear;
+    -webkit-animation: fade-in 0.5s linear;
-    animation: fade-in 1.5s linear;
+    animation: fade-in 0.5s linear;
 }
 
 .animate-item.ng-leave {
-    -webkit-animation: fade-out 1s linear;
+    -webkit-animation: fade-out 0.25s linear;
-    animation: fade-out 1.5s linear;
+    animation: fade-out 0.25s linear;
 }
 
 @keyframes fade-out {
     0% { opacity: 1; background: none; }
-    25% { opacity: 1; background: #f8efc0; }
     100% { opacity: 0; background: none; }
 }
 @keyframes fade-in {
     0% { opacity: 0; background: none; }
-    25% { opacity: 1; background: #dff0d8; }
     100% { opacity: 1; background: none; }
 }
 

openslides/motions/static/templates/motions/motion-list.html

@@ -30,7 +30,8 @@
   <div class="row">
     <div class="col-sm-6">
       <!-- delete mode -->
-      <button os-perms="motions.can_manage" class="btn btn-default"
+      <button os-perms="motions.can_manage" class="btn"
+          ng-class="$parent.isDeleteMode ? 'btn-primary' : 'btn-default'"
           ng-click="$parent.isDeleteMode = !$parent.isDeleteMode; uncheckAll()">
         <i class="fa fa-check-square-o"></i>
         <translate>Select ...</translate>
@@ -45,7 +46,8 @@
                placeholder="{{ 'Search' | translate}}">
           </div>
         </div>
-        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen">
+        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen"
+            ng-class="isFilterOpen ? 'btn-primary' : 'btn-default'">
           <i class="fa fa-filter"></i>
           <translate>Filter ...</translate>
         </button>
@@ -75,6 +77,7 @@
   </div>
 
   <div class="spacer-top-lg italic">
+    {{ motionsFiltered.length }} /
     {{ motions.length }} {{ "motions" | translate }}<span ng-if="(motions|filter:{selected:true}).length > 0">,
     {{(motions|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
   </div>
@@ -82,9 +85,9 @@
     <thead>
       <tr>
         <!-- projector column -->
-        <th ng-show="!$parent.isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
+        <th ng-show="!$parent.isDeleteMode" os-perms="core.can_manage_projector" class="minimum">
         <!-- delete selection column -->
-        <th ng-show="$parent.isDeleteMode" os-perms="motions.can_manage" class="firstColumn deleteColumn">
+        <th ng-show="$parent.isDeleteMode" os-perms="motions.can_manage" class="minimum deleteColumn">
           <input type="checkbox" ng-model="$parent.selectedAll" ng-change="checkAll()">
         <th ng-click="toggleSort('identifier')" class="sortable minimum">
           <translate>Identifier</translate>
@@ -112,8 +115,8 @@
               ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
           </i>
     <tbody>
-      <tr ng-repeat="motion in motions | osFilter: filter.search : getFilterString | filter: {state_id: stateFilter} |
+      <tr ng-repeat="motion in motionsFiltered = (motions | osFilter: filter.search : getFilterString |
-          orderBy: sortColumn:reverse"
+          filter: {state_id: stateFilter} | orderBy: sortColumn:reverse)"
           class="animate-item"
           ng-class="{ 'activeline': motion.isProjected(), 'selected': motion.selected }">
         <!-- projector column -->

openslides/users/static/js/users/site.js

@@ -35,6 +35,9 @@ angular.module('OpenSlidesApp.users.site', ['OpenSlidesApp.users'])
             resolve: {
                 users: function(User) {
                     return User.findAll();
+                },
+                groups: function(Group) {
+                    return Group.findAll();
                 }
             }
         })

openslides/users/static/templates/users/user-list.html

@@ -40,7 +40,8 @@
   <div class="row">
     <div class="col-sm-6">
       <!-- delete mode -->
-      <button os-perms="users.can_manage" class="btn btn-default"
+      <button os-perms="users.can_manage" class="btn"
+          ng-class="$parent.isDeleteMode ? 'btn-primary' : 'btn-default'"
           ng-click="$parent.isDeleteMode = !$parent.isDeleteMode; uncheckAll()">
         <i class="fa fa-check-square-o"></i>
         <translate>Select ...</translate>
@@ -55,7 +56,8 @@
                placeholder="{{ 'Search' | translate}}">
           </div>
         </div>
-        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen">
+        <button class="btn btn-default" ng-click="isFilterOpen = !isFilterOpen"
+            ng-class="isFilterOpen ? 'btn-primary' : 'btn-default'">
           <i class="fa fa-filter"></i>
           <translate>Filter ...</translate>
         </button>
@@ -64,7 +66,12 @@
   </div>
   <div uib-collapse="!isFilterOpen" class="row spacer">
     <div class="col-sm-6 text-right"></div>
-    <div class="col-sm-6 text-right">
+    <div class="col-sm-6 text-right form-inline">
+      <!-- group filter -->
+      <select ng-model="groupFilter" class="form-control" id="groupFilter">
+        <option value="" translate>--- Select group ---</option>
+        <option ng-repeat="group in groups" value="{{ group.id }}">{{ group.name }}</option>
+      </select>
       <!-- isPresent filter -->
       <input type="checkbox" ng-model="filterPresent" ng-false-value="''">
       <translate>Is present</translate>
@@ -83,6 +90,7 @@
   </div>
 
   <div class="spacer-top-lg italic">
+    {{ usersFiltered.length }} /
     {{ users.length }} {{ "participants" | translate }}<span ng-if="(users|filter:{selected:true}).length > 0">,
     {{(users|filter:{selected:true}).length}} {{ "selected" | translate }}</span>
   </div>
@@ -90,9 +98,9 @@
     <thead>
       <tr>
         <!-- projector column -->
-        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="firstColumn">
+        <th ng-show="!isDeleteMode" os-perms="core.can_manage_projector" class="minimum">
         <!-- delete selection column -->
-        <th ng-show="isDeleteMode" os-perms="users.can_manage" class="firstColumn deleteColumn">
+        <th ng-show="isDeleteMode" os-perms="users.can_manage" class="minimum deleteColumn">
           <input type="checkbox" ng-model="$parent.selectedAll" ng-change="checkAll()">
         <th ng-click="toggleSort('first_name')" class="sortable">
           <translate>Name</translate>
@@ -116,8 +124,9 @@
               ng-class="reverse ? 'fa-sort-desc' : 'fa-sort-asc'">
           </i>
     <tbody>
-      <tr ng-repeat="user in users | filter: filter.search | filter: {is_present: filterPresent} |
+      <tr ng-repeat="user in usersFiltered = (users | filter: filter.search | filter: {groups: groupFilter} |
-          orderBy: sortColumn:reverse"
+          filter: {is_present: filterPresent} | orderBy: sortColumn:reverse)"
+          class="animate-item"
           ng-class="{ 'activeline': user.isProjected(), 'selected': user.selected  }">
         <!-- projector column -->
         <td ng-show="!isDeleteMode" os-perms="core.can_manage_projector">