Merge pull request #104 from jonaslozys/improvement/event-participant…

…s-list-toggle Improvement/event participants list toggle
VismaLietuva · Dec 13, 2019 · b9da22b · b9da22b
2 parents 159c719 + 2319245
commit b9da22b
Show file tree

Hide file tree

Showing 7 changed files with 313 additions and 16 deletions.
diff --git a/...src/client/app/events/content/participants/participant-list/participant-list.component.js b/...src/client/app/events/content/participants/participant-list/participant-list.component.js
@@ -17,5 +17,19 @@
     function eventParticipantListController() {
         /* jshint validthis: true */
         var vm = this;
+        vm.isExpanded = false;
+
+        vm.expandCollapseText = 'events.expand';
+        vm.toggleExpandCollapse = toggleExpandCollapse;
+
+        function toggleExpandCollapse() {
+            if(vm.isExpanded) {
+                vm.expandCollapseText = 'events.expand';
+            }
+            else {
+                vm.expandCollapseText = 'events.collapse';
+            }
+            vm.isExpanded = !vm.isExpanded;
+        }
     }
 })();
diff --git a/src/webapp/src/client/app/events/content/participants/participant-list/participant-list.html b/src/webapp/src/client/app/events/content/participants/participant-list/participant-list.html
@@ -1,20 +1,43 @@
 <div>
-    <ul ng-if="!!vm.participants.length" class="event-participant-list">
-        <li ng-repeat="participant in vm.participants">
-            <ace-event-participant participant="participant">
-                <wave-spinner class="event-participant-spinner" ng-if="participant.isLoading"></wave-spinner>
-
-                <span ng-if="!!participant.userId && !participant.isLoading && vm.isDeleteVisible"
-                      class="event-participant-delete-button vismaicon vismaicon-cancel-circle"
-                      ace-confirmation-modal="vm.onLeaveEvent({participant: participant})"
-                      confirmation-modal-message="events.deleteUserConfirmationMessage"
-                      data-test-id="event-participant-delete-user"
-                      title="{{'common.delete' | translate}}" translate-cloak>
-                </span>
-            </ace-event-participant>
-        </li>
-    </ul>
-
+    <div class="hidden-xs hidden-sm">
+        <ul ng-if="!!vm.participants.length" class="event-participant-list">
+            <li ng-repeat="participant in vm.participants">
+                <ace-event-participant participant="participant">
+                    <wave-spinner class="event-participant-spinner" ng-if="participant.isLoading"></wave-spinner>
+
+                    <span ng-if="!!participant.userId && !participant.isLoading && vm.isDeleteVisible"
+                        class="event-participant-delete-button vismaicon vismaicon-cancel-circle"
+                        ace-confirmation-modal="vm.onLeaveEvent({participant: participant})"
+                        confirmation-modal-message="events.deleteUserConfirmationMessage"
+                        data-test-id="event-participant-delete-user" title="{{'common.delete' | translate}}"
+                        translate-cloak>
+                    </span>
+                </ace-event-participant>
+            </li>
+        </ul>
+    </div>
+    <div class="hidden-lg hidden-md">
+        <ul ng-if="!!vm.participants.length" class="event-participant-list">
+            <button class="btn btn-info event-participant-list-expand-collapse-button" ng-click="vm.toggleExpandCollapse()"
+                type="button" ng-model="vm.isExpanded">
+                <span class="expand-collapse-text">{{vm.expandCollapseText | translate}}</span>
+                <span class="vismaicon" ng-class="{'collapse-icon':vm.isExpanded, 'expand-icon':!vm.isExpanded}"></span>
+            </button>
+            <li ng-repeat="participant in vm.participants" ng-show="vm.isExpanded">
+                <ace-event-participant participant="participant">
+                    <wave-spinner class="event-participant-spinner" ng-if="participant.isLoading"></wave-spinner>
+
+                    <span ng-if="!!participant.userId && !participant.isLoading && vm.isDeleteVisible"
+                        class="event-participant-delete-button vismaicon vismaicon-cancel-circle"
+                        ace-confirmation-modal="vm.onLeaveEvent({participant: participant})"
+                        confirmation-modal-message="events.deleteUserConfirmationMessage"
+                        data-test-id="event-participant-delete-user" title="{{'common.delete' | translate}}"
+                        translate-cloak>
+                    </span>
+                </ace-event-participant>
+            </li>
+        </ul>
+    </div>
     <div ng-if="!vm.participants.length"
     	 class="event-no-participants text-center"
     	 translate="events.eventNoParticipants"></div>

diff --git a/src/webapp/src/client/images/new-vismaicons/24_arrow_down.svg b/src/webapp/src/client/images/new-vismaicons/24_arrow_down.svg
diff --git a/src/webapp/src/client/images/new-vismaicons/24_arrow_up.svg b/src/webapp/src/client/images/new-vismaicons/24_arrow_up.svg
diff --git a/src/webapp/src/client/resources/en_US/events.json b/src/webapp/src/client/resources/en_US/events.json
@@ -36,6 +36,8 @@
   "eventYes": "Yes",
   "firstName": "First name",
   "lastName": "Last name",
+  "expand": "Expand",
+  "collapse": "Collapse",
   "oneTimeEvents": "Onetime events",
   "recuringEvents": "Recurring events",
   "responsiblePerson": "Responsible person",

diff --git a/src/webapp/src/client/resources/lt_LT/events.json b/src/webapp/src/client/resources/lt_LT/events.json
@@ -37,6 +37,8 @@
   "eventYes": "Taip",
   "firstName": "Vardas",
   "lastName": "Pavardė",
+  "expand": "Išskleisti",
+  "collapse": "Suskleisti",
   "oneTimeEvents": "Vienkartiniai renginiai",
   "recuringEvents": "Pasikartojantys renginiai",
   "responsiblePerson": "Atsakingas asmuo",

diff --git a/src/webapp/src/client/styles/style/modules/_events.less b/src/webapp/src/client/styles/style/modules/_events.less
@@ -168,6 +168,35 @@
     color: #787878;
 }
 
+.event-participant-list-expand-collapse-button {
+    width: 100%; 
+    margin-top: 10px;
+    background-color: #337ab7 !important;
+    padding-top: 8px !important;
+    outline: none !important;
+    box-shadow: none;
+
+    .expand-collapse-text{
+        margin-left: 24px;
+    }
+    .collapse-icon {
+        background-image: url(../images/new-vismaicons/24_arrow_up.svg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-origin: content-box;
+        background-position-x: -87px;
+        float: right;
+    }
+    .expand-icon {
+        background-image: url(../images/new-vismaicons/24_arrow_down.svg);
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-origin: content-box;
+        background-position-x: -87px;
+        float: right;
+    }
+}
+
 .event-add-event-button {
     margin-right: 20px;
     @media (max-width: 991px) {