Refactors profile avatar selector into a Polymer element to use in md-settings & md-user-manager

ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html

Index: ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
diff --git a/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html b/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
new file mode 100644
index 0000000000000000000000000000000000000000..5718eb16f3949c2377e85ca7a9ffcaa356da592b
--- /dev/null
+++ b/ui/webui/resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html
@@ -0,0 +1,59 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">

[michaelpg, 2016/06/20 17:01:10]

remove, just use native CSS

[Moe, 2016/06/20 18:48:56]

Done.

+<link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+
+<dom-module id="cr-profile-avatar-selector">
+  <template>
+    <style>
+      :host {
+        @apply(--layout-inline);

[michaelpg, 2016/06/20 17:01:10]

display: inline-flex;

[Moe, 2016/06/20 18:48:56]

Done.

+        --avatar-spacing: 24px;
+        @apply(--avatar-selector);

[michaelpg, 2016/06/20 17:01:10]

move to top

[Moe, 2016/06/20 18:48:56]

I'm applying a mixin here not defining it. Shouldn't it be the last statement in
the block in order to override previously set properties? Polymer source seems
to apply mixins this way.

[michaelpg, 2016/06/21 00:48:09]

Acknowledged.

+      }
+
+      #selector {
+        display: flex;
+        flex-wrap: wrap;
+        margin: calc(var(--avatar-spacing) / -2);
+      }
+
+      .avatar {
+        --paper-button: {
+          background-color: var(--paper-grey-300);
+        };
+        --paper-button-flat-keyboard-focus: {
+          background-color: var(--paper-grey-400);
+        };
+        @apply(--layout);

[michaelpg, 2016/06/20 17:01:10]

display: flex;

[Moe, 2016/06/20 18:48:56]

Done.

+        @apply(--layout-center-center);

[michaelpg, 2016/06/20 17:01:10]

align-items: center;
justify-content: center;

[Moe, 2016/06/20 18:48:56]

Done.

+        border-radius: 2px;
+        border: 1px solid rgba(0, 0, 0, .12);
+        height: 48px;
+        margin: calc(var(--avatar-spacing) / 2);
+        min-width: 0;
+        padding: 0;
+        width: 48px;
+        @apply(--avatar-selector-avatar);

[michaelpg, 2016/06/20 17:01:10]

move to 28

[Moe, 2016/06/20 18:48:56]

ditto

+      }
+
+      .avatar:hover {
+        @apply(--avatar-selector-avatar-hovered);
+      }
+
+      .avatar.iron-selected {
+        border: 1px solid var(--google-blue-500);
+        @apply(--avatar-selector-avatar-selected);

[michaelpg, 2016/06/20 17:01:10]

move to top

[Moe, 2016/06/20 18:48:56]

ditto.

+      }
+    </style>
+    <iron-selector id="selector" selected="{{selectedAvatarUrl}}"
+        attr-for-selected="data-avatar-url">
+      <template is="dom-repeat" items="[[avatars]]">
+        <paper-button class="avatar" data-avatar-url$="[[item.url]]">
+          <img src="[[item.url]]" alt="[[item.label]]">
+        </paper-button>
+      </template>
+    </iron-selector>
+  </template>
+  <script src="cr_profile_avatar_selector.js"></script>
+</dom-module>