Merge pull request #1489 from eciis/responsive

Merge Responsive
eciis · Feb 26, 2019 · ba9f731 · ba9f731
2 parents 8066038 + 26ff53e
commit ba9f731
Show file tree

Hide file tree

Showing 94 changed files with 1,954 additions and 311 deletions.
diff --git a/frontend/app.js b/frontend/app.js
@@ -81,7 +81,7 @@
                 }
             })
             .state(STATES.EVENTS, {
-                url: "/events",
+                url: "/events?institutionKey",
                 views: {
                     user_content: {
                         templateUrl: Utils.selectFieldBasedOnScreenSize("app/event/events.html",
@@ -164,6 +164,18 @@
                     }
                 }
             })
+            .state(STATES.INST_DESCRIPTION, {
+                url: "/institution/:institutionKey/description",
+                views: {
+                    institution_content: {
+                        templateUrl: "app/institution/descriptionInst/description_inst.html",
+                        controller: "DescriptionInstController as descriptionCtrl"
+                    }
+                },
+                params: {
+                    institution: undefined
+                }
+            })
             .state(STATES.INST_EVENTS, {
                 url: "/institution/:institutionKey/institution_events",
                 views: {
@@ -515,7 +527,8 @@
      */
     app.run(function mobileInterceptor($transitions, $state, STATES, SCREEN_SIZES) {
         const permitted_routes = [
-            STATES.CREATE_EVENT
+            STATES.CREATE_EVENT,
+            STATES.INST_DESCRIPTION
         ];
 
         $transitions.onStart({

diff --git a/frontend/error/error.html b/frontend/error/error.html
@@ -1,5 +1,5 @@
 <md-content flex class="body hide-scrollbar">
-    <div layout="row">
+    <div layout="row" ng-if="!errorCtrl.isMobileScreen()">
         <div flex layout="column" md-colors="{background: 'grey-50'}">
             <div layout="column" >
                 <div class="container">
@@ -36,4 +36,9 @@ <h5>
             </md-card>
         </div>
     </div>
+    <div ng-if="errorCtrl.isMobileScreen()">
+        <main-toolbar></main-toolbar>
+        <side-menu type="HOME"></side-menu>
+        <is-empty-card text="{{ errorCtrl.getMobileMsg() }}"></is-empty-card>
+    </div>
 </md-content>
diff --git a/frontend/error/errorController.js b/frontend/error/errorController.js
@@ -16,5 +16,9 @@
         errorCtrl.goToReport = function goToReport() {
             $window.open("http://support.plataformacis.org/report");
         }
+
+        errorCtrl.isMobileScreen = () => Utils.isMobileScreen();
+
+        errorCtrl.getMobileMsg = () => "Erro " + errorCtrl.status + ": " + errorCtrl.msg;
     });
 })();
diff --git a/frontend/event/create_event.html b/frontend/event/create_event.html
@@ -1,9 +1,5 @@
 <div ng-class="createEventCtrl.getStep(1) ? 'create-event-grid-inst' : 'create-event-grid'" hide-navbar="both">
-    <div class="create-event-mobile-top-bar">
-        <md-button class="md-icon-button" ng-click="createEventCtrl.previousStep()">
-            <md-icon class="back-to-button">keyboard_arrow_left</md-icon>
-        </md-button>
-    </div>
+    <default-toolbar no-options="true"></default-toolbar>
     <div class="event-select-inst" ng-if="createEventCtrl.getStep(1)">
         <div class="event-select-ball">
             <md-icon class="event-select-ball-margin"

diff --git a/frontend/event/event.css b/frontend/event/event.css
@@ -140,8 +140,7 @@
 }
 
 .centralized-event-content, .event-day-properties {
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0;
 }
 
 #menu-button {
@@ -238,6 +237,7 @@
     .events-day-position {
         grid-column-start: 1;
         grid-column-end: 2;
+        justify-self: center;
     }
 
     .event-position {
@@ -314,6 +314,10 @@
         width: 6em;
     }
 
+    .select-container {
+        justify-content: center;
+    }
+
     .create-event-mobile-top-bar {
         height: 3em;
         width: 100%;
@@ -481,7 +485,7 @@
     }
 
     .create-event-grid-inst {
-        grid-template-rows: 3em 3em auto;
+        grid-template-rows: 3.5em 3.5em auto;
     }
 
     .create-event-form-second-line {

diff --git a/frontend/event/eventController.js b/frontend/event/eventController.js
@@ -2,7 +2,7 @@
 (function() {
     var app = angular.module('app');
 
-    app.controller("EventController", function EventController(EventService, $state, $mdDialog, AuthService, $q, STATES, SCREEN_SIZES) {
+    app.controller("EventController", function EventController(EventService, $state, $mdDialog, AuthService, $q, STATES, SCREEN_SIZES, InstitutionService, $filter) {
         const eventCtrl = this;
         let content = document.getElementById("content");
 
@@ -21,7 +21,7 @@
         eventCtrl.loadMoreEvents = function loadMoreEvents() {
 
             if (eventCtrl._moreEvents) {
-                const getEventsFunction = eventCtrl.institutionKey ? EventService.getInstEvents : EventService.getEvents;
+                const getEventsFunction = EventService.getEvents;
                 return eventCtrl._loadEvents(getEventsFunction,
                     _.get(eventCtrl.selectedMonth, 'month'),
                     eventCtrl.selectedYear);
@@ -40,8 +40,8 @@
          * @private
          */
         eventCtrl._loadEvents = (getEvents, month, year) => {
-            return getEvents({ page: eventCtrl._actualPage, institutionKey: eventCtrl.institutionKey,
-                month: month, year: year}).then(function success(response) {
+            return getEvents({ page: eventCtrl._actualPage, month: month, year: year})
+                .then(function success(response) {
                 eventCtrl._actualPage += 1;
                 eventCtrl._moreEvents = response.next;
 
@@ -54,6 +54,7 @@
                     });
                 }
 
+                eventCtrl.events = $filter('filter')(eventCtrl.events, eventCtrl.institutionKey);
                 eventCtrl.isLoadingEvents = false;
                 eventCtrl._getEventsByDay();
             }, function error() {
@@ -269,6 +270,8 @@
 
         eventCtrl.$onInit = () => {
             eventCtrl.institutionKey = $state.params.institutionKey;
+            getCurrentInstitution();
+
             if(Utils.isMobileScreen(SCREEN_SIZES.SMARTPHONE)) {
                 eventCtrl._getMonths().then(() => {
                     eventCtrl.setupToolbarFields();
@@ -277,5 +280,13 @@
                 eventCtrl.loadMoreEvents();
             }
         };
+
+        function getCurrentInstitution() {
+            if (!_.isNil(eventCtrl.institutionKey)) {
+                InstitutionService.getInstitution(eventCtrl.institutionKey).then((institutionData) => {
+                    eventCtrl.institution = new Institution(institutionData);
+                });
+            }
+        }
     });
 })();
diff --git a/frontend/event/eventDetailsDirective.js b/frontend/event/eventDetailsDirective.js
@@ -3,15 +3,16 @@
     var app = angular.module('app');
 
     app.controller("EventDetailsController", function EventDetailsController(MessageService, EventService,
-        $state, $mdDialog, AuthService, STATES, SCREEN_SIZES) {
+        $state, $mdDialog, AuthService, STATES, SCREEN_SIZES, ngClipboard) {
 
         var eventCtrl = this;
 
         eventCtrl.user = AuthService.getCurrentUser();
         eventCtrl.isLoadingEvents = true;
         eventCtrl.showImage = true;
 
-        eventCtrl.share = function share(ev, event) {
+
+        eventCtrl.share = function share(ev) {
             $mdDialog.show({
                 controller: "SharePostController",
                 controllerAs: "sharePostCtrl",
@@ -21,26 +22,27 @@
                 clickOutsideToClose: true,
                 locals: {
                     user: eventCtrl.user,
-                    post: event,
+                    post: eventCtrl.event,
                     addPost: false
                 }
             });
         };
 
-        eventCtrl.confirmDeleteEvent = function confirmDeleteEvent(ev, event) {
+        eventCtrl.confirmDeleteEvent = function confirmDeleteEvent(ev) {
             var dialog = MessageService.showConfirmationDialog(ev, 'Excluir Evento', 'Este evento será removido.');
             dialog.then(function () {
-                deleteEvent(event);
+                deleteEvent(eventCtrl.event);
             }, function () {
                 MessageService.showToast('Cancelado');
             });
         };
 
-        function deleteEvent(event) {
-            let promise = EventService.deleteEvent(event);
+        function deleteEvent() {
+            let promise = EventService.deleteEvent(eventCtrl.event);
             promise.then(function success() {
                 MessageService.showToast('Evento removido com sucesso!');
                 eventCtrl.event.state = "deleted";
+                $state.go(STATES.EVENTS);
             });
             return promise;
         }
@@ -99,8 +101,8 @@
             return !(emptyPhoto || nullPhoto);
         }
 
-        eventCtrl.isEventAuthor = function isEventAuthor(event) {
-            return event && (event.author_key === eventCtrl.user.key);
+        eventCtrl.isEventAuthor = function isEventAuthor() {
+            return eventCtrl.event && (eventCtrl.event.author_key === eventCtrl.user.key);
         };
 
         eventCtrl.goToEvent = function goToEvent(event) {
@@ -138,7 +140,7 @@
 
         eventCtrl.isDeleted = () => {
             return eventCtrl.event ? eventCtrl.event.state === 'deleted' : true;
-        }
+        };
 
         /**
          * This function receives a date in iso format, 
@@ -151,6 +153,30 @@
             return new Date(isoTime).getHours();
         };
 
+        /**
+         * Copies the event's link to the clipboard.
+         * Checks if the user is following the event.
+         */
+        eventCtrl.copyLink = function copyLink() {
+            var url = Utils.generateLink(`/event/${eventCtrl.event.key}/details`);
+            ngClipboard.toClipboard(url);
+            MessageService.showToast("O link foi copiado");
+        };
+
+        /**
+         * Constructs a list with the menu options.
+         */
+        eventCtrl.generateToolbarMenuOptions = function generateToolbarMenuOptions() {
+            eventCtrl.defaultToolbarOptions = [
+                { title: 'Obter link', icon: 'link', action: () => { eventCtrl.copyLink() } },
+                { title: 'Compartilhar', icon: 'share', action: () => { eventCtrl.share('$event') } },
+                { title: 'Receber atualizações', icon: 'visibility', action: () => { eventCtrl.addFollower() }, hide: () => eventCtrl.isFollower() },
+                { title: 'Não receber atualizações', icon: 'visibility_off', action: () => { eventCtrl.removeFollower() }, 
+                    hide: () => !eventCtrl.isFollower() || eventCtrl.isEventAuthor() },
+                { title: 'Cancelar evento', icon: 'cancel', action: () => { eventCtrl.confirmDeleteEvent('$event') }, hide: () =>  !eventCtrl.canChange() }
+            ]
+        };
+
         /**
          * Checks if the user is following the event.
          */
@@ -193,10 +219,12 @@
                 $state.go(STATES.HOME);
             });
         }
-
+        
         eventCtrl.$onInit = function() {
-            if ($state.params.eventKey)
+            if ($state.params.eventKey) {
+                eventCtrl.generateToolbarMenuOptions();
                 return loadEvent($state.params.eventKey);
+            }
         };
     });
 

diff --git a/frontend/event/event_details_small_page.html b/frontend/event/event_details_small_page.html
@@ -1,39 +1,9 @@
+<default-toolbar menu-options="eventDetailsCtrl.defaultToolbarOptions"></default-toolbar>
+
 <div class="event-content">
     <div style="background-color: white;" class="box">
         <div class="title-container">
             <span>{{ eventDetailsCtrl.event.title | uppercase}}</span>
-            <md-menu id="menu-button" md-offset="-165 45">
-                    <button class="event-menu-button" title="Opções"
-                    ng-click="$mdMenu.open(ev)">
-                        <md-icon style="color: black;">more_vert</md-icon>
-                    </button>
-                    <md-menu-content>
-                    <md-menu-item id="hide-share">
-                        <md-button ng-click="eventDetailsCtrl.share($event, eventDetailsCtrl.event)">
-                        <md-icon>share</md-icon>
-                        Compartilhar evento
-                        </md-button>
-                    </md-menu-item>
-                    <md-menu-item>
-                        <md-button ng-click="eventDetailsCtrl.confirmDeleteEvent($event, eventDetailsCtrl.event)">
-                        <md-icon>cancel</md-icon>
-                        Cancelar evento
-                        </md-button>
-                    </md-menu-item>
-                    <md-menu-item ng-if="!eventDetailsCtrl.isFollower()">
-                        <md-button ng-click="eventDetailsCtrl.addFollower()">
-                            <md-icon>visibility</md-icon>
-                            Receber Atualizações
-                        </md-button>
-                    </md-menu-item>
-                    <md-menu-item ng-if="eventDetailsCtrl.isFollower()">
-                        <md-button ng-click="eventDetailsCtrl.removeFollower()">
-                            <md-icon>visibility_off</md-icon>
-                            Deixar de receber atualizações
-                        </md-button>
-                    </md-menu-item>
-                    </md-menu-content>
-                </md-menu>
         </div>
         <div ng-if="eventDetailsCtrl.event.photo_url">
             <img style="background-color: white; width: 100%" ng-src="{{ eventDetailsCtrl.event.photo_url }}"/>

diff --git a/frontend/event/events_mobile.html b/frontend/event/events_mobile.html
@@ -1,14 +1,21 @@
 <main-toolbar toolbar-menu-items="eventCtrl.toolbarItems" toolbar-general-options="eventCtrl.toolbarGeneralOptions"></main-toolbar>
 
-<div style="overflow: scroll">
+<div style="overflow: scroll;" class="custom-scrollbar hide-scrollbar-mobile">
   <div flex layout="column">
     <load-circle flex add-layout-fill="true" ng-if="eventCtrl.isLoadingEvents"></load-circle>
     <div ng-if="!eventCtrl.isLoadingEvents" class="centralized-event-content">
-      <md-content ng-if="eventCtrl.eventsByDay.length === 0">
-        <h4>Nenhum evento a ser exibido.</h4>
-      </md-content>
+      <entity-showcase
+              class="fill-width"
+              ng-if="eventCtrl.institutionKey"
+              avatar="eventCtrl.institution.photo_url"
+              title="eventCtrl.institution.name"
+              subtitle="eventCtrl.institution.address.city">
+      </entity-showcase>
+      <is-empty-card ng-if="eventCtrl.eventsByDay.length === 0"
+                     text="Nenhum evento a ser exibido">
+      </is-empty-card>
     </div>
-    <md-content id="content" class="custom-scrollbar box">
+    <md-content id="content" class="box">
       <div ng-repeat="events in eventCtrl.eventsByDay"
         ng-if="eventCtrl.events.length > 0" class="events-grid events-grid-position">
           <div class="events-day-position event-day-properties">

diff --git a/frontend/home/colorPickerController.js b/frontend/home/colorPickerController.js
@@ -3,9 +3,11 @@
 (function () {
     const app = angular.module("app");
 
-    app.controller("ColorPickerController", function ColorPickerController(user, ProfileService, MessageService, $mdDialog, AuthService, $http) {
+    app.controller("ColorPickerController", function ColorPickerController(user, institution, ProfileService, MessageService, $mdDialog, AuthService, $http) {
         var colorPickerCtrl = this;
         colorPickerCtrl.user = user;
+        colorPickerCtrl.institution = {};
+        colorPickerCtrl.oldColorValue = institution.color;
 
         colorPickerCtrl.saveColor = function saveColor() {
             var diff = jsonpatch.compare(colorPickerCtrl.user, colorPickerCtrl.newUser);
@@ -26,9 +28,7 @@
         function loadProfile() {
             colorPickerCtrl.newUser = _.cloneDeep(colorPickerCtrl.user);
 
-            colorPickerCtrl.newProfile = _.find(colorPickerCtrl.newUser.institution_profiles, function (profile) {
-                return profile.institution_key === colorPickerCtrl.newUser.current_institution.key;
-            });
+            colorPickerCtrl.institution = _.find(colorPickerCtrl.newUser.institution_profiles, ['institution_key', institution.institution_key]);
         }
 
         function loadColors() {