Improve login page

Used ngCloak directive to display the form only once AngularJS/Angular
Material is loaded and all components initialized.

UI/Templates/MainUI/SOGoRootPage.wox

@@ -47,7 +47,10 @@
             <img const:alt="*" id="splash" rsrc:src="img/sogo-full.svg"/>
           </div>
 
-          <form name="loginForm" layout="column" ng-controller="loginController" ng-submit="login(creds)">
+          <form name="loginForm" layout="column"
+                ng-cloak="ng-cloak"
+                ng-controller="loginController"
+                ng-submit="login(creds)">
             <var:if condition="hasLoginSuffix">
               <input type="hidden" ng-model="creds.loginSuffix" var:value="loginSuffix"/>
             </var:if>
@@ -111,12 +114,30 @@
             </div>
           </form>
           <div layout="row"  layout-align="end end">
-            <md-button class="iconButton" ng-click="showAbout()">
-              <i class="md-icon-info" ng-style="{'color': '#aaa'}"><!-- about --></i>
+            <md-button class="iconButton fg-sogoPaper-500"
+                       label:aria-label="About"
+                       ng-click="showAbout()">
+              <i class="md-icon-info"><!-- about --></i>
             </md-button>
           </div>
         </div>
       </div>
     </md-content>
   </main>
+
+  <script type="text/ng-template" id="aboutBox.html">
+    <md-dialog flex="50">
+      <md-dialog-content>
+        <p><a href="http://sogo.nu/" target="_new">sogo.nu</a></p>
+        <p>Version <var:string value="version"/> (<var:string value="buildDate" />)</p>
+        <br/>
+        <p><var:string label:value="AboutBox" const:escapeHTML="NO"/></p>
+        <!--<img class="full-image" const:alt="Inverse" rsrc:src="img/inverse.png"/>-->
+      </md-dialog-content>
+      <div class="md-actions">
+        <md-button ng-click="closeDialog()"><var:string label:value="Close"/></md-button>
+      </div>
+    </md-dialog>
+  </script>
+
 </var:component>

UI/WebServerResources/js/Main.app.js

@@ -21,18 +21,18 @@
         });
       return false;
     };
-    $scope.showAbout = function() {
-      var alert;
-      alert = $mdDialog.alert({
-        title: 'About SOGo',
-        content: 'This is SOGo v3!',
-        ok: 'OK'
+    $scope.showAbout = function($event) {
+      $mdDialog.show({
+        targetEvent: $event,
+        templateUrl: 'aboutBox.html',
+        controller: AboutDialogController
       });
-      $mdDialog
-        .show( alert )
-        .finally(function() {
-          alert = undefined;
-        });
+      AboutDialogController.$inject = ['scope', '$mdDialog'];
+      function AboutDialogController(scope, $mdDialog) {
+        scope.closeDialog = function() {
+          $mdDialog.hide();
+        };
+      }
     };
   }
 })();

UI/WebServerResources/scss/components/button/button.scss

@@ -73,7 +73,7 @@ $button-fab-height: 56px;
   overflow: hidden;
   //padding: $iconButton-padding 0;
   border-radius: 50%;
-  color: inherit;
+  //color: inherit;
   min-width: $iconButton-size;
   transition: $iconButton-transition;
 

UI/WebServerResources/scss/core/angular.scss

@@ -0,0 +1,6 @@
+/// styles.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
+
+// ngCloak directive
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+}

UI/WebServerResources/scss/styles.scss

@@ -13,6 +13,7 @@
 // CORE elements
 // ------------------------------------------------------------------------------
 @import 'core/functions';
+@import 'core/angular';
 
 /* Local overrides from angular-material src */
 // fixme : refactor all this to meet our practices