polyfora-user.html

<!--
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../../iron-selector/iron-selector.html">
<link rel="import" href="../../paper-styles/typography.html">

<link rel="import" href="../more-route.html">
<link rel="import" href="../more-route-selector.html">

<dom-module id="polyfora-user">

  <style>

    :host {
      display: block;
      padding: 16px;
    }

    header {
      @apply(--paper-font-headline);
    }

    /* faux-tabs until we have paper-tabs */
    iron-selector .tab {
      @apply(--paper-font-body1);
      display: inline-block;
      padding: 8px;
      border-bottom: 2px solid transparent;
      cursor: pointer;
    }

    iron-selector .tab.iron-selected {
      border-bottom-color: var(--theme-primary);
    }

  </style>

  <template>
    <more-route context name="user" params="{{params}}"></more-route>

    <header>[[_user.name]]</header>

    <!--
    If your more-route-selector contains routes without any params, it can also
    be driven in reverse! In this example, the user can tap a tab, and the URL
    will be automatically updated to match the active tab.
    -->
    <more-route-selector>
      <iron-selector>
        <span class="tab" route="/threads">Threads</span>
        <span class="tab" route="/stats">Statistics</span>
        <span class="tab" route="/">Stuff</span>
      </iron-selector>
    </more-route-selector>

  </template>

  <script>

    Polymer({

      is: 'polyfora-user',

      properties: {
        data: Object,
      },

      observers: [
        '_userChanged(params.userId, data)',
      ],

      _userChanged: function() {
        this._user = this.data && this.data.usersById[this.params.userId];
      },

    });

  </script>

</dom-module>