User Manager UI fixes

chrome/browser/resources/login/user_pod_row.js

 // Copyright 2014 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview User pod row implementation.
  */
 
 cr.define('login', function() {
   /**
    * Number of displayed columns depending on user pod count.
    * @type {Array.<number>}
    * @const
    */
   var COLUMNS = [0, 1, 2, 3, 4, 5, 4, 4, 4, 5, 5, 6, 6, 5, 5, 6, 6, 6, 6];
 
   /**
    * Mapping between number of columns in pod-row and margin between user pods
    * for such layout.
    * @type {Array.<number>}
    * @const
    */
   var MARGIN_BY_COLUMNS = [undefined, 40, 40, 40, 40, 40, 12];
 
   /**
+   * Mapping between number of columns in the desktop pod-row and margin
+   * between user pods for such layout.
+   * @type {Array.<number>}
+   * @const
+   */
+  var DESKTOP_MARGIN_BY_COLUMNS = [undefined, 32, 32, 32, 32, 32, 32];
+
+  /**
    * Maximal number of columns currently supported by pod-row.
    * @type {number}
    * @const
    */
   var MAX_NUMBER_OF_COLUMNS = 6;
 
   /**
    * Maximal number of rows if sign-in banner is displayed alonside.
    * @type {number}
    * @const
    */
   var MAX_NUMBER_OF_ROWS_UNDER_SIGNIN_BANNER = 2;
 
   /**
    * Variables used for pod placement processing. Width and height should be
    * synced with computed CSS sizes of pods.
    */
   var POD_WIDTH = 180;
   var PUBLIC_EXPANDED_WIDTH = 420;
   var CROS_POD_HEIGHT = 213;
   var DESKTOP_POD_HEIGHT = 216;
   var POD_ROW_PADDING = 10;
+  var DESKTOP_ROW_PADDING = 32;
 
   /**
    * Minimal padding between user pod and virtual keyboard.
    * @type {number}
    * @const
    */
   var USER_POD_KEYBOARD_MIN_PADDING = 20;
 
   /**
    * Whether to preselect the first pod automatically on login screen.
@@ skipping 913 matching lines @@
       return height;
     },
 
     set expanded(expanded) {
       if (this.expanded == expanded)
         return;
 
       this.resetTabOrder();
       this.classList.toggle('expanded', expanded);
       if (expanded) {
+        var isDesktopUserManager = Oobe.getInstance().displayType ==
+            DISPLAY_TYPE.DESKTOP_USER_MANAGER;
+        var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
+                                                POD_ROW_PADDING;
         this.usualLeft = this.left;
         this.usualTop = this.top;
         if (this.left + PUBLIC_EXPANDED_WIDTH >
-            $('pod-row').offsetWidth - POD_ROW_PADDING)
-          this.left = $('pod-row').offsetWidth - POD_ROW_PADDING -
+            $('pod-row').offsetWidth - rowPadding)
+          this.left = $('pod-row').offsetWidth - rowPadding -
               PUBLIC_EXPANDED_WIDTH;
         var expandedHeight = this.expandedHeight_;
         if (this.top + expandedHeight > $('pod-row').offsetHeight)
           this.top = $('pod-row').offsetHeight - expandedHeight;
       } else {
         if (typeof(this.usualLeft) != 'undefined')
           this.left = this.usualLeft;
         if (typeof(this.usualTop) != 'undefined')
           this.top = this.usualTop;
       }
@@ skipping 804 matching lines @@
 
       if (Oobe.getInstance().virtualKeyboardShown)
         this.scrollFocusedPodIntoView();
     },
 
     /**
      * Returns width of podrow having |columns| number of columns.
      * @private
      */
     columnsToWidth_: function(columns) {
-      var margin = MARGIN_BY_COLUMNS[columns];
-      return 2 * POD_ROW_PADDING + columns *
-          this.userPodWidth_ + (columns - 1) * margin;
+      var isDesktopUserManager = Oobe.getInstance().displayType ==
+          DISPLAY_TYPE.DESKTOP_USER_MANAGER;
+      var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] :
+                                          MARGIN_BY_COLUMNS[columns];
+      var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
+                                              POD_ROW_PADDING;
+      return 2 * rowPadding + columns * this.userPodWidth_ +
+          (columns - 1) * margin;
     },
 
     /**
      * Returns height of podrow having |rows| number of rows.
      * @private
      */
     rowsToHeight_: function(rows) {
-      return 2 * POD_ROW_PADDING + rows * this.userPodHeight_;
+      var isDesktopUserManager = Oobe.getInstance().displayType ==
+          DISPLAY_TYPE.DESKTOP_USER_MANAGER;
+      var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
+                                              POD_ROW_PADDING;
+      return 2 * rowPadding + rows * this.userPodHeight_;
     },
 
     /**
      * Calculates number of columns and rows that podrow should have in order to
      * hold as much its pods as possible for current screen size. Also it tries
      * to choose layout that looks good.
      * @return {{columns: number, rows: number}}
      */
     calculateLayout_: function() {
       var preferredColumns = this.pods.length < COLUMNS.length ?
@@ skipping 21 matching lines @@
 
     /**
      * Places pods onto their positions onto pod grid.
      * @private
      */
     placePods_: function() {
       var layout = this.calculateLayout_();
       var columns = this.columns = layout.columns;
       var rows = this.rows = layout.rows;
       var maxPodsNumber = columns * rows;
-      var margin = MARGIN_BY_COLUMNS[columns];
+      var isDesktopUserManager = Oobe.getInstance().displayType ==
+          DISPLAY_TYPE.DESKTOP_USER_MANAGER;
+      var margin = isDesktopUserManager ? DESKTOP_MARGIN_BY_COLUMNS[columns] :
+                                          MARGIN_BY_COLUMNS[columns];
       this.parentNode.setPreferredSize(
           this.columnsToWidth_(columns), this.rowsToHeight_(rows));
       var height = this.userPodHeight_;
       var width = this.userPodWidth_;
       this.pods.forEach(function(pod, index) {
         if (pod.offsetHeight != height) {
           console.error('Pod offsetHeight (' + pod.offsetHeight +
               ') and POD_HEIGHT (' + height + ') are not equal.');
         }
         if (pod.offsetWidth != width) {
           console.error('Pod offsetWidth (' + pod.offsetWidth +
               ') and POD_WIDTH (' + width + ') are not equal.');
         }
         if (index >= maxPodsNumber) {
            pod.hidden = true;
            return;
         }
         pod.hidden = false;
         var column = index % columns;
         var row = Math.floor(index / columns);
-        pod.left = POD_ROW_PADDING + column * (width + margin);
-        pod.top = POD_ROW_PADDING + row * height;
+        var rowPadding = isDesktopUserManager ? DESKTOP_ROW_PADDING :
+                                                POD_ROW_PADDING;
+        pod.left = rowPadding + column * (width + margin);
+        pod.top = row * (height + rowPadding);

[Nikita (slow), 2014/06/16 15:28:10]

Should be
pod.top = rowPadding + row * height

[noms (inactive), 2014/06/16 18:10:56]

So I think on desktop we want the spacing to always be equal, regardless of how
many rows there are, which means the padding needs to be added to each row. I
think on CrOS the intention is to adjust the padding based on how many rows
there are. I've added an if statement to pick the right approach based on the
platform.

On 2014/06/16 15:28:10, Nikita Kostylev wrote:

       });
       Oobe.getInstance().updateScreenSize(this.parentNode);
     },
 
     /**
      * Number of columns.
      * @type {?number}
      */
     set columns(columns) {
       // Cannot use 'columns' here.
@@ skipping 51 matching lines @@
       }
       this.insideFocusPod_ = true;
 
       for (var i = 0, pod; pod = this.pods[i]; ++i) {
         if (!this.alwaysFocusSinglePod) {
           pod.isActionBoxMenuActive = false;
         }
         if (pod != podToFocus) {
           pod.isActionBoxMenuHovered = false;
           pod.classList.remove('focused');
-          pod.classList.remove('faded');
+          // On Desktop, the faded style is not set correctly, so we should
+          // manually fade out non-focused pods.
+          if (pod.user.isDesktopUser)
+            pod.classList.add('faded');
+          else
+            pod.classList.remove('faded');
           pod.reset(false);
         }
       }
 
       // Clear any error messages for previous pod.
       if (!this.isFocused(podToFocus))
         Oobe.clearErrors();
 
       var hadFocus = !!this.focusedPod_;
       this.focusedPod_ = podToFocus;
@@ skipping 340 matching lines @@
       if (this.podsWithPendingImages_.length == 0) {
         this.classList.remove('images-loading');
       }
     }
   };
 
   return {
     PodRow: PodRow
   };
 });