User Manager MD User Pods

chrome/browser/resources/md_user_manager/user_manager.css

 /* Copyright 2016 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. */
 
 body {
   font-family: Roboto;
 }
 
 /* Overrides for the desktop user manager screen. */
 
 .oobe-display {
   background-color: #eee;
 }
 
 #outer-container {
   min-height: 0;
+  overflow: auto;
+}
+
+#oobe {
+  margin-bottom: 10px;
+  margin-top: 40px;
+}
+
+#outer-container::-webkit-scrollbar {
+  height: 0;
+  width: 0;
 }
 
 .bubble.faded {
   opacity: 0;
 }
 
+control-bar {

[tommycli, 2016/02/20 00:36:39]

Absolute positioning is generally speaking a last resort - only if you must
overlay an element over another.

Given the mocks, I think it's possible to put the control-bar at the
fixed-bottom of the screen without using it. Perhaps with CSS flexbox?

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  z-index: 1;
+}
+
+#login-header-bar.shadow {
+  box-shadow: 0 -1px 3px rgba(0, 0, 0, .2);
+}
+
 .pod {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  height: 226px;
-  /* On non-retina desktop, the text is blurry if we use the scale3d()
-  inherited from user_pod_row.js */
-  transform: scale(0.9);
-}
-
-podrow[ncolumns='6'] .pod {
-  transform: scale(0.8);
-}
-
-/* Because of crbug.com/406529, the text in the .name div is janky if there's
-both a transform:scale and a transition:opacity applied to a div, so we must
-apply the opacity change to the children instead. */
+  box-shadow:
+    0 2px 2px 0 rgba(0, 0, 0, .24),

[tommycli, 2016/03/03 19:49:40]

Can all these shadows (in the whole file) be normalized to use the shadows
within paper-styles?

I think if you're making it Material design it needs to follow these standard
shadows anyways.

https://code.google.com/p/chromium/codesearch#chromium/src/third_party/polyme...

+    0 0 2px 0 rgba(0, 0, 0, .12);
+  cursor: default;

[tommycli, 2016/02/20 00:36:38]

Is this necessary?

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+  height: auto;
+  transform: none;

[tommycli, 2016/02/20 00:36:38]

And this?

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+  width: auto;
+}
+
 .pod.faded {
   opacity: 1;
 }
 
-.pod.faded .user-image-pane,
-.pod.faded .main-pane {
-  opacity: .4;
-}
-
-.pod.hovered:not(.focused) {
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-}
-
-.pod.focused {
-  box-shadow: 0 16px 21px rgba(0, 0, 0, 0.2);
-  transform: scale(1) !important;
+.pod.focused,
+.pod.hovered {
+  box-shadow:
+    0 10px 10px 0 rgba(0, 0, 0, .26),
+    0 14px 28px 0 rgba(0, 0, 0, .25) !important;
 }
 
 .pod.focused.locked {
-  box-shadow: 0 12px 21px rgba(0, 0, 0, 0.2);
-  height: 220px;
-}
-
-.user-image-pane {
+  box-shadow: 0 12px 21px rgba(0, 0, 0, .2);
+  height: auto;
+}
+
+.pod .user-image-pane {
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
-  height: 180px;
-  left: 0;
-  top: 0;
-  width: 180px;
-}
-
-html[dir=rtl] .user-image-pane {
-  right: 0;
-}
-
-.pod .name {
-  margin-top: 12px;
+  position: static;

[tommycli, 2016/02/20 00:36:38]

The default value is static right? Is this also necessary?

[Moe, 2016/02/22 14:46:45]

Acknowledged.

 }
 
 .pod .user-image {
-  height: 180px;
-  width: 180px;
-}
-
-.pod input[type='password'] {
-  height: 45px;  /* 1px shorter as to not overlap the pod's rounded corners */
-  top: 1px;
+  height: 160px;
+  width: 160px;
+}
+
+.pod .main-pane {
+  line-height: 20px;
+  padding: 10px;
+  position: static;

[tommycli, 2016/02/20 00:36:38]

same comment as above

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+}
+
+.pod .main-pane .name-container {
+  display: block;
+  position: static;

[tommycli, 2016/02/20 00:36:39]

and here

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+  width: auto;
+}
+
+.pod .main-pane .name-container .name {
+  color: #333;
+  font-size: 13px;
+  margin: 0;
+  padding: 0;
+  text-align: left;

[tommycli, 2016/02/20 00:36:38]

So I thought the default text-align is left if it's ltr, and right if it's rtl.

So is this necessary?

If it is because something else is causing it to be center, can you try using
text-align: initial and then removing the rtl clause below?

[Moe, 2016/02/22 14:46:45]

+1 Done!

+  width: 118px;
+}
+
+html[dir='rtl'] .pod .main-pane .name-container .name {
+  text-align: right;
 }
 
 .pod .indicator-container {
-  background-color: rgba(255, 255, 255, 0.85);
-  border-radius: 16px;
-  height: 32px;
-  left: 8px;
-  position: absolute;
-  top: 8px;
-}
-
-html[dir=rtl] .pod .indicators {
+  background-color: rgba(255, 255, 255, .85);
+  border-radius: 0;
+  bottom: 10px;
+  height: 20px;
   left: auto;
-  right: 8px;
-}
-
-.pod .indicator {
+  position: absolute;
+  right: 10px;
+  top: auto;
+  width: 20px;
+}
+
+html[dir='rtl'] .pod .indicator-container {
+  left: 10px;
+  right: auto;
+}
+
+/* Using -webkit-mask on the indicators allows us to tweak the color. */
+.pod .indicator-container > .indicator {
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 20px;
+  background-color: rgb(150, 150, 150);

[tommycli, 2016/02/20 00:36:38]

Can this be one of the standard --paper or --google colors? I know --paper has
--paper-gray etc.

[Moe, 2016/02/22 14:46:45]

unfortunately this one isn't one of those greys either.

[tommycli, 2016/03/03 19:49:40]

--paper-grey-500 is 9e9e9e aka rgb(158, 158, 158). That seems to be a pretty
close match. I'd imagine if you guys are following Material Design, you'd want
to use the paper grays right?

Did the designer have a specific reason to use 150 instead of 158?

   background-position: center;
   background-repeat: no-repeat;
   background-size: 18px;
   display: none;
   float: left;
-  height: 32px;
-  width: 32px;
-}
-
-/* Using -webkit-mask on the indicators allows us to tweak the color. */
-.pod .indicator-container > div {
-  -webkit-mask-position: center;
-  -webkit-mask-repeat: no-repeat;
-  -webkit-mask-size: 24px;
+  height: 20px;
+  width: 20px;
 }
 
 .pod.locked .locked-indicator {
   -webkit-mask-image: url(../../../../ui/webui/resources/images/lock.svg);
-  background-color: var(--paper-grey-600);
   display: initial;
 }
 
 .pod.legacy-supervised .legacy-supervised-indicator {
   -webkit-mask-image:
       url(../../../../ui/webui/resources/images/supervisor_account.svg);
-  background-color: var(--google-blue-500);
   display: initial;
 }
 
 .pod.child .child-indicator {
   -webkit-mask-image:
       url(../../../../ui/webui/resources/images/account_child_invert.svg);
-  background-color: var(--google-blue-500);
   display: initial;
 }
 
-.main-pane {
-  left: 0;
+.action-box-area {
+  background-color: transparent;
+  background-image: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 100%);
+  border-radius: 0;
+  height: 56px;
+  outline: none;
+  position: absolute;

[tommycli, 2016/02/20 00:36:38]

Can this be done without absolute positioning?

[Moe, 2016/02/22 14:46:45]

Acknowledged.

   top: 0;
-}
-
-html[dir=rtl] .main-pane {
-  right: 0;
-}
-
-.name-container,
-.pod.focused:not(.multiprofiles-policy-applied) .auth-container {
-  top: 180px;
-  width: 180px;
-}
-
-.pod.focused:not(.locked) .name-container {
-  display: block;
-}
-
-.pod .name {
-  color: rgb(54, 54, 54);
-  font-size: 15px;
-  margin-top: 11px;
-}
-
-.pod.focused:not(.locked) .auth-container {
-  display: none;
-}
-
-.pod[auth-type='offlinePassword'].focused.locked .password-entry-container {
-  display: flex;
-  flex: auto;
-}
-
-.action-box-area {
-  background-color: var(--google-grey-100);
-  height: 24px;
   /* Because of crbug.com/406529, the text in the .name div is janky if there's
   an opacity transition in this div. */
   transition: none;
-  width: 24px;
-}
-
-.action-box-button,
-.action-box-button:hover,
+  width: 100%;
+  z-index: 1;
+}
+
+.action-box-area.menu-moved-up {
+  -webkit-transform: none;
+}
+
+.action-box-area .action-box-button {
+  display: none;
+}
+
+.action-box-area .action-box-icon {
+  border: none;
+  color: #fff;

[tommycli, 2016/02/20 00:36:38]

just 'white' might be better here

[Moe, 2016/02/22 14:46:45]

Done.

+  display: inline-flex;
+  left: auto;
+  margin: 0;
+  position: absolute;
+  right: -1px;
+  top: 4px;
+}
+
+.pod.focused:not(.locked) .auth-container {
+  display: none;
+}
+
+.pod.focused:not(.multiprofiles-policy-applied) .auth-container {
+  left: 0;
+}
+
+.pod .auth-container {
+  font-size: 13px;
+}
+
+.pod .auth-container input[type='password'] {
+  height: 40px;
+  line-height: 20px;
+  padding: 10px;
+  top: 0;
+}
+
+.pod[auth-type='onlineSignIn'] .reauth-hint-container {
+  margin: 0;
+  padding: 10px 0;
+}
+
+.reauth-hint-container .reauth-warning {
+  height: 20px;
+  width: 20px;
+}
+
+.reauth-hint-container .reauth-name-hint {
+  color: #333;

[tommycli, 2016/02/20 00:36:38]

Does a --paper-grey work here?

[Moe, 2016/02/22 14:46:45]

I can't find this in paper-styles/color.html either.

[tommycli, 2016/03/03 19:49:40]

See above comment. I'm think material design requires conformance to one of the
set paper-greys

+  font-size: 13px;
+}
+
 .action-box-area.active .action-box-button {
-  background-image: none;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #989898;
-  height: 0;
-  left: 6px;
-  margin: 0;
-  position: absolute;
-  top: 9px;
-  width: 0;
-}
-
-.action-box-button:hover,
-.action-box-area.active .action-box-button {
-  border-top: 6px solid #4c4c4c;
-}
-
-.action-box-remove-user-warning .remove-warning-button {
-  height: 30px;
-}
-
-.action-box-remove-user-warning .remove-warning-button:focus {
-  /* Override the default blue border inherited from
-  button.custom-appearance:focus. */
-  border: 1px solid transparent !important;
-  box-shadow: inset 0 0 0 1px #fff;
-}
+  display: none;
+}
+
+.action-box-area.active ~ .action-box-menu:not(.menu-moved-up) {
+  top: 8px;
+}
+
+.action-box-area.active ~ .action-box-menu {
+  border: none;
+  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .19);
+  line-height: 20px;
+  right: 8px;
+  width: 224px;
+}
+
+html[dir=rtl] .action-box-area.active ~ .action-box-menu {
+  /* forcing the menu to be positioned as in ltr */
+  left: auto;
+  right: 8px;
+}
+
+.action-box-menu-title {
+  color: #333;

[tommycli, 2016/02/20 00:36:38]

paper-grey?

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+  padding: 16px 12px 10px 12px;
+}
+
+.action-box-menu-title-name,
+.action-box-menu-title-email {
+  height: auto;
+  line-height: 22px;
+}
+
+.action-box-menu-title-email {
+  color: rgb(103, 103, 103);

[tommycli, 2016/02/20 00:36:38]

paper-grey?

[Moe, 2016/02/22 14:46:45]

we have paper-grey for rgb(97,97,97) but not for rgb(103, 103, 103). perhaps
something designers should pay more attention to. I'll bring up the topic with
them.

+}
+
+.action-box-menu-remove {
+  border-top: 1px solid rgba(0, 0, 0, .12);
+  color: #333;

[tommycli, 2016/02/20 00:36:38]

and here

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+  line-height: 32px;
+  min-height: 0;
+  padding: 8px 12px;
+}
+
+.action-box-remove-user-warning {
+  border-top: 1px solid rgba(0, 0, 0, .12);
+  color: #333;

[tommycli, 2016/02/20 00:36:38]

and here

[Moe, 2016/02/22 14:46:45]

Acknowledged.

+  line-height: 20px;
+  padding: 12px;
+}
+
+.action-box-remove-user-warning {
+  text-align: center;
+}
+
+.action-box-remove-user-warning > div,
+.action-box-remove-user-warning > table {
+  text-align: left;

[tommycli, 2016/02/20 00:36:38]

same comment as above: does text-align: initial work?

[Moe, 2016/02/22 14:46:45]

Done.

+  word-wrap: break-word;
+}
+
+html[dir='rtl'] .action-box-remove-user-warning > div,
+html[dir='rtl'] .action-box-remove-user-warning > table {
+  text-align: right;
+}
+
+.pod:not(.synced) .action-box-remove-user-warning-text {
+  font-weight: bold;
+}
+
+.action-box-remove-user-warning paper-button.remove-warning-button {
+  font-size: 13px;
+  min-width: 52px;
+}