(feat) major rework of the sidenav and top toolbars

UI/Common/UIxPageFrame.m

@@ -440,40 +440,6 @@
   return ([[self productCSSURL] length] > 0);
 }
 
-- (BOOL) _moduleIs: (NSString *) moduleName
-{
-  NSString *frameworkName;
-
-  frameworkName = [[context page] frameworkName];
-
-  return [frameworkName isEqualToString: moduleName];
-}
-
-- (BOOL) isCalendar
-{
-  return [self _moduleIs: @"SchedulerUI"];
-}
-
-- (BOOL) isContacts
-{
-  return [self _moduleIs: @"ContactsUI"];
-}
-
-- (BOOL) isMail
-{
-  return [self _moduleIs: @"MailerUI"];
-}
-
-- (BOOL) isPreferences
-{
-  return [self _moduleIs: @"PreferencesUI"];
-}
-
-- (BOOL) isAdministration
-{
-  return [self _moduleIs: @"AdministrationUI"];
-}
-
 - (void) setToolbar: (NSString *) newToolbar
 {
   ASSIGN (toolbar, newToolbar);
@@ -509,6 +475,12 @@
   return [[context activeUser] cn];
 }
 
+- (NSString *) userEmail
+{
+  return [[context activeUser] systemEmail];
+}
+
+
 - (BOOL) canLogoff
 {
   BOOL canLogoff;

UI/Templates/MailerUI/UIxMailMainFrame.wox

@@ -235,17 +235,17 @@
             <div layout="row" layout-align="space-between center">
               <span>{{account.name}}</span>
               <div>
-              <md-button class="sg-icon-button"
-                         label:aria-label="New Folder..."
-                         ng-click="app.newFolder(account)">
-                <md-icon>add_circle_outline</md-icon>
-              </md-button>
-              <md-button class="sg-icon-button"
-                         ng-show="account.id == 0"
-                         label:aria-label="Delegation..."
-                         ng-click="app.delegate(account)">
-                <md-icon>people</md-icon>
-              </md-button>
+                <md-button class="sg-icon-button"
+                           label:aria-label="New Folder..."
+                           ng-click="app.newFolder(account)">
+                  <md-icon>add_circle_outline</md-icon>
+                </md-button>
+                <md-button class="sg-icon-button"
+                           ng-show="account.id == 0"
+                           label:aria-label="Delegation..."
+                           ng-click="app.delegate(account)">
+                  <md-icon>people</md-icon>
+                </md-button>
               </div>
             </div>
           </md-subheader>
@@ -346,14 +346,10 @@
   </script>
 
   <script type="text/ng-template" id="UIxMailFolderTemplate">
-    <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main">
-      <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
+    <md-toolbar layout="column" layout-align="space-between start" class="md-tall toolbar-main" >
+      <div class="md-toolbar-tools md-toolbar-tools-top sg-padded"
+           layout="row" layout-align="space-between start">
         <var:component className="UIxTopnavToolbarTemplate" />
-        <div class="sg-toolbar-group-last">
-          <md-button class="sg-icon-button" label:aria-label="More">
-            <md-icon>more_vert</md-icon>
-          </md-button>
-        </div>
       </div>
       <div class="md-toolbar-tools" layout="row" layout-align="space-between center"
            ng-show="mailbox.selectedFolder.$selectedCount() == 0">

UI/Templates/PreferencesUI/UIxPreferences.wox

@@ -53,11 +53,6 @@
       <md-toolbar layout="row" layout-align="space-between start" class="md-tall">
         <div class="md-toolbar-tools md-toolbar-tools-top sg-padded" layout="row" layout-align="space-between start">
           <var:component className="UIxTopnavToolbarTemplate" />
-          <div class="sg-toolbar-group-last">
-            <md-button class="sg-icon-button" label:aria-label="Menu">
-              <md-icon>more_vert</md-icon>
-            </md-button>
-          </div>
         </div>
       </md-toolbar>
 

UI/Templates/UIxPageFrame.wox

@@ -6,13 +6,11 @@
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
     xmlns:rsrc="OGo:url"
-    xmlns:label="OGo:label"
-    >
+    xmlns:label="OGo:label">
+
   <var:string var:value="doctype" const:escapeHTML="NO" />
-  <var:if condition="hideFrame" const:negate="YES"
-      >
-    <html const:xmlns="http://www.w3.org/1999/xhtml"
-          xml:lang="en" const:lang="en">
+  <var:if condition="hideFrame" const:negate="YES">
+    <html const:xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" const:lang="en">
       <head>
         <title>
           <var:string value="title" />
@@ -26,18 +24,13 @@
         <link href="mailto:support@inverse.ca" rev="made" />
         <link rel="shortcut icon" var:href="siteFavicon" type="image/x-icon" />
         <link type="text/css" rel="stylesheet" rsrc:href="css/styles.css" />
-        <var:if condition="hasPageSpecificCSS"
-            >
-          <link type="text/css" rel="stylesheet" var:href="pageCSSURL"
-              />
+        <var:if condition="hasPageSpecificCSS">
+          <link type="text/css" rel="stylesheet" var:href="pageCSSURL"/>
         </var:if>
-        <var:foreach list="additionalCSSFiles" item="item"
-            >
-          <link type="text/css" rel="stylesheet" var:href="item"
-              />
+        <var:foreach list="additionalCSSFiles" item="item">
+          <link type="text/css" rel="stylesheet" var:href="item"/>
         </var:foreach>
-        <var:if-ie const:lte="9"
-            >
+        <var:if-ie const:lte="9">
           <link type="text/css" rel="stylesheet" rsrc:href="iefixes.css" />
           <script type="text/javascript" rsrc:src="XMLHttpRequest.js"><!-- space --></script>
         </var:if-ie>
@@ -49,152 +42,26 @@
             <div id="popupFrame" style="display: none;">
               <iframe width="100%" height="100%" src="/SOGo/loading"><!-- space --></iframe>
             </div>
-          </var:if
-              >
-          <var:if condition="shortUserNameForDisplay" const:value="anonymous"
-              const:negate="YES">
-            <var:if condition="hasUserSettingsKeys"
-                >
+          </var:if>
+          <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
+            <var:if condition="hasUserSettingsKeys">
               <script type="text/javascript">
                 var UserSettings =<var:string value="userSettings" const:escapeHTML="NO" />;
-              </script
-                  >
+              </script>
             </var:if>
             <var:if condition="hasUserDefaultsKeys">
               <script type="text/javascript">
                 var UserDefaults =<var:string value="userDefaults" const:escapeHTML="NO" />;
-              </script
-                  >
-            </var:if
-                >
-          </var:if
-              >
-          <var:if condition="isPopup" const:negate="YES"
-              >
-            <var:if condition="isUIxDebugEnabled"
-                ><!-- space --></var:if>
+              </script>
+            </var:if>
+          </var:if>
+          <var:if condition="isPopup" const:negate="YES">
+            <var:if condition="isUIxDebugEnabled"><!-- space --></var:if>
           </var:if>
-<!-- MAIN CONTENT ROW -->
 
+          <!-- MAIN CONTENT ROW -->
           <var:component-content />
 
-          <!-- BOTTOM-SHEET -->
-          <script type="text/ng-template" id="bottomSheetTemplate.html">
-            <md-bottom-sheet class="md-list">
-              <md-list>
-                <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
-
-                  <!-- CALENDAR -->
-                  <var:if condition="userHasCalendarAccess">
-                    <var:if condition="isCalendar">
-                      <md-list-item>
-                        <md-button class="md-list-item-content" ng-disabled="true">
-                          <md-icon>event</md-icon>
-                          <var:string label:value="Calendar"/>
-                        </md-button>
-                      </md-list-item>
-                    </var:if>
-                    <var:if condition="isCalendar" const:negate="YES">
-                      <md-list-item>
-                        <md-button class="md-list-item-content" var:href="relativeCalendarPath">
-                          <md-icon>event</md-icon>
-                          <var:string label:value="Calendar"/>
-                        </md-button>
-                      </md-list-item>
-                    </var:if>
-                  </var:if>
-
-                  <!-- CONTACTS -->
-                  <var:if condition="isContacts">
-                    <md-list-item>
-                      <md-button class="md-list-item-content" ng-disabled="true">
-                        <md-icon>contacts</md-icon>
-                        <var:string label:value="Address Book"/>
-                      </md-button>
-                    </md-list-item>
-                  </var:if>
-                  <var:if condition="isContacts" const:negate="YES">
-                    <md-list-item>
-                      <md-button class="md-list-item-content" var:href="relativeContactsPath">
-                        <md-icon>contacts</md-icon>
-                        <var:string label:value="Address Book"/>
-                      </md-button>
-                    </md-list-item>
-                  </var:if>
-
-                  <!-- MAIL -->
-                  <var:if condition="userHasMailAccess">
-                    <var:if condition="isMail">
-                      <md-list-item>
-                        <md-button class="md-list-item-content" ng-disabled="true">
-                          <md-icon>email</md-icon>
-                          <var:string label:value="Mail"/>
-                        </md-button>
-                      </md-list-item>
-                    </var:if>
-                    <var:if condition="isMail" const:negate="YES">
-                      <md-list-item>
-                        <md-button class="md-list-item-content" var:href="relativeMailPath">
-                          <md-icon>email</md-icon>
-                          <var:string label:value="Mail"/>
-                        </md-button>
-                      </md-list-item>
-                    </var:if>
-                  </var:if>
-
-                  <!-- PREFERENCES -->
-                  <var:if condition="isPreferences">
-                    <md-list-item>
-                      <md-button class="md-list-item-content" ng-disabled="true">
-                        <md-icon>settings</md-icon>
-                        <var:string label:value="Preferences"/>
-                      </md-button>
-                    </md-list-item>
-                  </var:if>
-                  <var:if condition="isPreferences" const:negate="YES">
-                    <md-list-item>
-                      <md-button class="md-list-item-content" var:ng-href="relativePreferencesPath">
-                        <md-icon>settings</md-icon>
-                        <var:string label:value="Preferences"/>
-                      </md-button>
-                    </md-list-item>
-                  </var:if>
-
-                  <!-- ADMINISTRATION -->
-                  <var:if condition="isSuperUser">
-                    <var:if condition="isAdministration">
-                      <md-list-item>
-                        <md-button class="md-list-item-content" ng-disabled="true">
-                          <md-icon>settings_applications</md-icon>
-                          <var:string label:value="Administration"/>
-                        </md-button>
-                      </md-list-item>
-                    </var:if>
-                    <var:if condition="isAdministration" const:negate="YES">
-                      <md-list-item>
-                        <md-button class="md-list-item-content" var:href="relativeAdministrationPath">
-                          <md-icon>settings_applications</md-icon>
-                          <var:string label:value="Administration"/>
-                        </md-button>
-                      </md-list-item>
-                    </var:if>
-                  </var:if>
-
-                  <!-- DISCONNECT -->
-                  <var:if condition="canLogoff">
-                    <md-list-item>
-                      <md-button class="md-list-item-content" var:ng-href="logoffPath">
-                        <md-icon>settings_power</md-icon>
-                        <var:string label:value="Disconnect"/>
-                      </md-button>
-                    </md-list-item>
-                  </var:if>
-                </var:if>
-                
-              </md-list>
-            </md-bottom-sheet>
-          </script>
-          
           <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
           </var:if>
           
@@ -202,31 +69,58 @@
           <script type="text/javascript">
             var ApplicationBaseURL = '<var:string value="modulePath" />';
             var ResourcesURL = '<var:string value="applicationPath" />.woa/WebServerResources';
-            var minimumSearchLength =<var:string value="minimumSearchLength" />;
-            <var:if condition="isSuperUser"
-                >var IsSuperUser = true;
+            var minimumSearchLength = <var:string value="minimumSearchLength" />;
+            <var:if condition="isSuperUser">
+              var IsSuperUser = true;
             </var:if>
-            <var:if condition="isSuperUser" const:negate="YES"
-                >var IsSuperUser = false;
+            <var:if condition="isSuperUser" const:negate="YES">
+              var IsSuperUser = false;
             </var:if>
-            <var:if condition="usesCASAuthentication"
-                >var usesCASAuthentication = true;
+            <var:if condition="usesCASAuthentication">
+              var usesCASAuthentication = true;
             </var:if>
-            <var:if condition="usesCASAuthentication" const:negate="YES"
-                >var usesCASAuthentication = false;
+            <var:if condition="usesCASAuthentication" const:negate="YES">
+              var usesCASAuthentication = false;
             </var:if>
-            <var:if condition="shortUserNameForDisplay" const:value="anonymous"
-                const:negate="YES"
-                >var UserFolderURL = '<var:string value="userFolderPath" const:escapeHTML="NO" />';
+            <var:if condition="shortUserNameForDisplay" const:value="anonymous" const:negate="YES">
+              var UserFolderURL = '<var:string value="userFolderPath" const:escapeHTML="NO" />';
               var UserLogin = '<var:string value="shortUserNameForDisplay" const:escapeHTML="NO" />';
               var UserIdentification = '<var:string value="userIdentification" const:escapeHTML="NO" />';
+              var UserEmail = '<var:string value="userEmail" const:escapeHTML="NO" />';
               var UserLanguage = '<var:string value="userLanguage" const:escapeHTML="NO" />';
+
+              // Application paths
+              var UserCalendarPath = '';
+              <var:if condition="userHasCalendarAccess">
+                UserCalendarPath = '<var:string value="relativeCalendarPath" const:escapeHTML="NO" />';
+              </var:if>
+
+              var UserContactsPath = '<var:string value="relativeContactsPath" const:escapeHTML="NO" />';
+
+              var UserMailPath = '';
+              <var:if condition="userHasMailAccess">
+                UserMailPath = '<var:string value="relativeMailPath" const:escapeHTML="NO" />';
+              </var:if>
+
+              var UserPreferencesPath = '<var:string value="relativePreferencesPath" const:escapeHTML="NO" />';
+
+              <var:if condition="isSuperUser">
+                var UserAdministrationPath = '<var:string value="relativeAdministrationPath" const:escapeHTML="NO" />';
+              </var:if>
+
+              var UserLogoffPath = '';
+              <var:if condition="canLogoff">
+                UserLogoffPath = '<var:string value="logoffPath" const:escapeHTML="NO" />';
+              </var:if>
+
             </var:if>
-              // This is the equivalent of an AJAX call to /SOGo/so/_UserLogin_/date
-              var currentDay = <var:string value="currentDayDescription" const:escapeHTML="NO"/>;
+
+            // This is the equivalent of an AJAX call to /SOGo/so/_UserLogin_/date
+            var currentDay = <var:string value="currentDayDescription" const:escapeHTML="NO"/>;
             <var:string value="commonLocalizableStrings" const:escapeHTML="NO" />
             <var:string value="productLocalizableStrings" const:escapeHTML="NO" />
           </script>
+
           <script type="text/javascript" rsrc:src="js/vendor/lodash.min.js"><!-- space --></script>
           <script type="text/javascript" rsrc:src="js/vendor/angular.min.js"><!-- space --></script>
           <script type="text/javascript" rsrc:src="js/vendor/angular-animate.min.js"><!-- space --></script>
@@ -236,40 +130,31 @@
           <script type="text/javascript" rsrc:src="js/vendor/angular-ui-router.min.js"><!-- space --></script>
 
           <var:if condition="hasProductSpecificJavaScript">
-            <script type="text/javascript"
-                var:src="productJavaScriptURL"><!-- space --></script>
+            <script type="text/javascript" var:src="productJavaScriptURL"><!-- space --></script>
           </var:if>
           <var:if condition="hasPageSpecificJavaScript">
-            <script type="text/javascript"
-                var:src="pageJavaScriptURL"><!-- space --></script>
+            <script type="text/javascript" var:src="pageJavaScriptURL"><!-- space --></script>
           </var:if>
-          <var:foreach list="additionalJSFiles" item="item"
-              >
+          <var:foreach list="additionalJSFiles" item="item">
             <script type="text/javascript" var:src="item"><!-- space --></script>
           </var:foreach>
-          <var:foreach list="systemAdditionalJSFiles" item="item"
-              >
+          <var:foreach list="systemAdditionalJSFiles" item="item">
             <script type="text/javascript" var:src="item"><!-- space --></script>
           </var:foreach>
         </var:if>
-        <var:if condition="isCompatibleBrowser" const:negate="YES"
-            >
-          <var:component className="SOGoBrowsersPanel"
-              />
+        <var:if condition="isCompatibleBrowser" const:negate="YES">
+          <var:component className="SOGoBrowsersPanel"/>
         </var:if>
+
         <noscript>
           <div class="javascriptPopupBackground">
           </div>
           <div class="javascriptMessagePseudoWindow noJavascriptErrorMessage">
-            <var:string label:value="noJavascriptError"
-                />
-            <br />
-            <br
-                />
-            <a class="button" var:href="page.context.uri"
-                >
-              <var:string label:value="noJavascriptRetry"
-                  />
+            <var:string label:value="noJavascriptError"/>
+            <br/>
+            <br/>
+            <a class="button" var:href="page.context.uri">
+              <var:string label:value="noJavascriptRetry"/>
             </a>
           </div>
         </noscript>

UI/Templates/UIxSidenavToolbarTemplate.wox

@@ -3,27 +3,14 @@
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
-    xmlns:label="OGo:label"
-    >
-      <md-toolbar class="md-tall">
-        <div class="md-toolbar-tools sg-padded" layout="row" layout-align="start start">
-          <md-button class="sg-icon-button"
-              label:aria-label="Apps"
-              ng-click="openBottomSheet()">
-            <md-icon>apps</md-icon>
-          </md-button>
-          <span class="sg-logo"><!-- logo.svg --></span>
-        </div>
-
-        <div class="md-toolbar-tools sg-padded" layout="row">
-          <div layout="column">
-            <p class="sg-md-title">{{activeUser.identification}}</p>
-            <!--fixme: implement this with the proper model and actions -->
-            <!-- <md-select class="sg-logout" ng-model="accounts.options" var:placeholder="shortUserNameForDisplay">
-              <md-option var:value="relativePreferencesPath"><var:string label:value="Preferences"/></md-option>
-              <var:if condition="canLogoff"><md-option var:value="logoffPath"><var:string label:value="Disconnect" /></md-option></var:if>
-            </md-select> -->
-          </div>
-        </div>
-      </md-toolbar>
+    xmlns:label="OGo:label">
+  <md-toolbar class="md-tall sg-padded">
+    <div layout="column" layout-align="center start">
+      <sg-avatar-image class="md-tile-left"
+                       sg-email="activeUser.email"
+                       size="48"><!-- avatar --></sg-avatar-image>
+      <p class="sg-md-title">{{activeUser.identification}}</p>
+        <p class="md-caption">{{activeUser.email}}</p>
+    </div>
+  </md-toolbar>
 </container>

UI/Templates/UIxTopnavToolbarTemplate.wox

@@ -3,8 +3,8 @@
     xmlns="http://www.w3.org/1999/xhtml"
     xmlns:var="http://www.skyrix.com/od/binding"
     xmlns:const="http://www.skyrix.com/od/constant"
-    xmlns:label="OGo:label"
-    >
+    xmlns:label="OGo:label">
+
   <div class="sg-toolbar-group-1" layout="row">
     <md-button ng-click="toggleLeft()"
                class="hide-gt-md sg-button-navicon sg-icon-button"
@@ -18,4 +18,53 @@
     </div>
     <p class="sg-md-display-3 sg-date-today" ng-bind="currentDay.day"><!-- day --></p>
   </div>
+
+  <div class="sg-toolbar-group-last">
+    <md-menu layout-fill="layout-fill">
+      <md-button aria-label="Open phone interactions menu"
+                 class="md-icon-button" ng-click="$mdOpenMenu($event)">
+        <md-icon>apps</md-icon>
+      </md-button>
+      <md-menu-content width="8">
+        <div class="md-toolbar-tools sg-padded" layout="row"
+             layout-align="space-around start">
+          <md-button class="sg-icon-button"
+                     ng-show="activeUser.path.calendar.length"
+                     ng-disabled="baseURL.endsWith('/Calendar')"
+                     ng-href="{{activeUser.path.calendar}}">
+            <md-icon>event</md-icon>
+            <md-tooltip><var:string label:value="Calendar"/></md-tooltip>
+          </md-button>
+          <md-button class="sg-icon-button"
+                     ng-disabled="baseURL.endsWith('/Contacts')"
+                     ng-href="{{activeUser.path.contacts}}">
+            <md-icon>contacts</md-icon>
+            <md-tooltip><var:string label:value="Address Book"/></md-tooltip>
+          </md-button>
+          <md-button class="sg-icon-button"
+                     ng-show="activeUser.path.mail.length"
+                     ng-disabled="baseURL.endsWith('/Mail')"
+                     ng-href="{{activeUser.path.mail}}">
+            <md-icon>email</md-icon>
+            <md-tooltip><var:string label:value="Mail"/></md-tooltip>
+          </md-button>
+          <md-button class="sg-icon-button"
+                     ng-disabled="baseURL.endsWith(activeUser.login)"
+                     ng-href="{{activeUser.path.preferences}}">
+            <md-icon>settings</md-icon>
+            <md-tooltip><var:string label:value="Preferences"/></md-tooltip>
+          </md-button>
+          <md-button class="sg-icon-button" ng-show="activeUser.isSuperUser" ng-href="{{activeUser.path.administration}}">
+            <md-icon>settings_applications</md-icon>
+            <md-tooltip><var:string label:value="Administration"/></md-tooltip>
+          </md-button>
+          <md-button class="sg-icon-button" ng-show="activeUser.path.logoff.length" ng-href="{{activeUser.path.logoff}}">
+            <md-icon>settings_power</md-icon>
+            <md-tooltip><var:string label:value="Disconnect"/></md-tooltip>
+          </md-button>
+           </div>
+      </md-menu-content>
+    </md-menu>
+  </div>
+
 </container>

UI/WebServerResources/js/Common/Common.app.js

@@ -12,9 +12,18 @@
         var settings = {
           login: UserLogin || null,
           identification: UserIdentification || null,
+          email: UserEmail || null,
           language: UserLanguage || null,
           folderURL: UserFolderURL || null,
-          isSuperUser: IsSuperUser || null
+          isSuperUser: IsSuperUser || null,
+          path: {
+            calendar: UserCalendarPath || null,
+            contacts: UserContactsPath || null,
+            mail: UserMailPath || null,
+            preferences: UserPreferencesPath || null,
+            administration: (IsSuperUser ? UserAdministrationPath : null),
+            logoff: UserLogoffPath || null
+          }
         };
         if (param)
           return settings[param];

UI/WebServerResources/js/Common/navController.js

@@ -13,6 +13,7 @@
   function navController($scope, $timeout, $interval, $http, $mdSidenav, $mdBottomSheet, $mdMedia, $log, sgConstant, sgSettings, Alarm) {
 
     $scope.activeUser = sgSettings.activeUser();
+    $scope.baseURL = sgSettings.baseURL();
 
     // Show current day in top bar
     $scope.currentDay = window.currentDay;