Add Kano User Summary for use in the nav bar for new gamification cha…

…nges Trello card: https://trello.com/c/ezoWdvLU/1581-3-show-users-level-next-to-the-user-name-in-nav
KanoComputing · Jan 13, 2017 · 4bff7d2 · 4bff7d2
1 parent 606264b
commit 4bff7d2
Show file tree

Hide file tree

Showing 4 changed files with 410 additions and 1 deletion.
diff --git a/bower.json b/bower.json
@@ -21,6 +21,7 @@
     "tests"
   ],
   "dependencies": {
+    "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
     "iron-image": "PolymerElements/iron-image#^1.2.5",
     "iron-pages": "PolymerElements/iron-pages#^1.0.8",
     "paper-dialog": "PolymerElements/paper-dialog#^1.1.0",

diff --git a/kano-user-summary/demo/kano-user-summary.html b/kano-user-summary/demo/kano-user-summary.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<html>
+    <head>
+        <title>kano-user-summary demo</title>
+        <meta charset="utf-8">
+        <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+        <link rel="import" href="../../../iron-demo-helpers/demo-snippet.html">
+        <link rel="import" href="../../../iron-demo-helpers/demo-pages-shared-styles.html">
+        <link rel="import" href="../../kano-style/typography.html">
+        <link rel="import" href="../kano-user-summary.html">
+        <style is="custom-style">
+            html {
+                width: 100%;
+                height: 100%;
+            }
+            kano-user-summary {
+                margin-bottom: 60px;
+            }
+        </style>
+    </head>
+    <body>
+        <h3>Kano User Summary demo</h3>
+        <demo-snippet>
+            <template is="dom-bind" id="bind">
+                <kano-user-summary user="[[user1]]" default-avatar="../../demo-assets/avatar/judoka-face.svg" stroke-width="4" radius="50"></kano-user-summary>
+                <kano-user-summary user="[[user2]]" default-avatar="../../demo-assets/avatar/judoka-face.svg"></kano-user-summary>
+                <kano-user-summary user="[[user3]]" default-avatar="../../demo-assets/avatar/judoka-face.svg"></kano-user-summary>
+            </template>
+            <script type="text/javascript">
+            var bind = document.getElementById('bind');
+            bind.user1 = {
+                avatar: {
+                    urls: {
+                        circle: '../../demo-assets/avatar/judoka-face.svg'
+                    }
+                },
+                profile: {
+                  xp: 220259
+                },
+                username: 'roughsun4806'
+            };
+            bind.user2 = {
+              avatar: {
+                urls: {}
+              },
+              profile: {
+                xp: 5000
+              },
+              username: 'yellowwildflower4248'
+            };
+            bind.user3 = {
+              avatar: {
+                urls: {},
+              },
+              profile: {
+                xp: 200
+              },
+              username: 'jollydream2802'
+            };
+            </script>
+        </demo-snippet>
+    </body>
+</html>