Move elements/ to ui/

appengine/swarming/elements/res/imp/common/swarming-app.html

-<!--
-  Copyright 2016 The LUCI Authors. All rights reserved.
-  Use of this source code is governed under the Apache License, Version 2.0
-  that can be found in the LICENSE file.
-
-  This in an HTML Import-able file that contains the definition
-  of the following elements:
-
-    <swarming-app>
-
-  <swarming-app> is meant to be used in top level elements to provide the header
-      toolbar and authentication.
-
-  It contains the definition of the following style modules:
-
-    swarming-app-style
-
-  <style include="shared-style"> contains styles to be shared among all
-      apps, such as colors.
-
-  Properties:
-    busy: Boolean, If the busy spinner should be active.
-    client_id: String, Oauth 2.0 client id.  It will be set by server-side
-        template evaluation.
-    name: String, the name of the app to be displayed.
-
-    auth_headers: Object, Use this as an argument to sk.request to set oauth2 headers.
-    permissions: Object, {String:Boolean} of permissions to perform various
-        behaviors, such as terminate_bot.
-    server_details: Object, containing mutliple Strings including:
-        server_version: what git revision the server is using.
-        bot_version: A hash of the bot code being distributed. Isn't associated
-            with any git revisions
-    signed_in: Boolean, if the user is signed in.
-  Methods:
-    None.
-
-  Events:
-    None.
--->
-
-<link rel="import" href="/res/imp/bower_components/app-layout/app-layout.html">
-<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html" >
-<link rel="import" href="/res/imp/bower_components/paper-fab/paper-fab.html" >
-<link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner-lite.html">
-
-
-<link rel="import" href="auth-signin.html">
-<link rel="import" href="common-behavior.html">
-
-<dom-module id="swarming-app">
-  <template>
-    <style include="iron-flex">
-      :host {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-      }
-
-      app-toolbar {
-        background-color: #1F78B4;
-        color: #fff;
-      }
-
-      app-toolbar a {
-        color: #fff;
-      }
-      .left {
-        margin-right:15px;
-      }
-      .right {
-        margin-left:15px;
-      }
-      .main-content {
-        padding: 3px;
-      }
-
-      .main-content a {
-        color: #1F78B4;
-      }
-
-      auth-signin, .small {
-        font-size: .7em;
-      }
-
-      paper-fab {
-        position: fixed;
-        bottom: 5px;
-        right: 5px;
-        background-color: #1F78B4;
-      }
-
-      paper-spinner-lite {
-        --paper-spinner-color: var(--google-yellow-500);
-      }
-    </style>
-    <app-header-layout>
-      <app-header fixed>
-        <app-toolbar>
-          <div class="title left">[[name]]</div>
-          <paper-spinner-lite class="left" active="[[_or(busy,_busy1,_busy2)]]"></paper-spinner-lite>
-
-          <a class="left" href="/newui/">Home</a>
-          <a class="left" href="/newui/botlist">Bot List</a>
-          <a class="left" href="/newui/tasklist">Task List</a>
-          <div class="flex"></div>
-          <div class="small right">
-            Server:
-            <a href$="[[_versionLink(server_details)]]">
-              [[server_details.server_version]]
-            </a>
-          </div>
-          <auth-signin
-              class="right"
-              client_id="[[client_id]]"
-              auth_headers="{{auth_headers}}"
-              profile="{{profile}}"
-              signed_in="{{signed_in}}">
-          </auth-signin>
-        </app-toolbar>
-      </app-header>
-      <div class="main-content">
-        <content></content>
-      </div>
-        <a target="_blank" rel="noopener" href="https://bugs.chromium.org/p/chromium/issues/entry?components=Infra%3EPlatform%3ESwarming&owner=kjlubick@chromium.org&status=Assigned">
-          <paper-fab mini icon="icons:bug-report"></paper-fab>
-        </a>
-    </app-header-layout>
-
-  </template>
-  <script>
-    Polymer({
-      is: 'swarming-app',
-
-      behaviors: [
-          SwarmingBehaviors.CommonBehavior,
-      ],
-
-      properties: {
-        // input
-        busy: {
-          type: Boolean,
-        },
-        client_id: {
-          type: String,
-        },
-        name: {
-          type: String,
-        },
-        // outputs
-        auth_headers: {
-          type: Object,
-          notify: true,
-          observer: "_load"
-        },
-
-        permissions: {
-          type: Object,
-          value: function() {
-            // If we aren't logged in, default to no permissions.
-            return {};
-          },
-          notify: true,
-        },
-        profile: {
-          type: Object,
-          notify: true,
-        },
-
-        server_details: {
-          type: Object,
-          notify: true,
-        },
-
-        signed_in: {
-          type: Boolean,
-          value: false,
-          notify: true,
-        },
-
-        // private
-        _busy1: {
-          type: Boolean,
-          value: false,
-        },
-        _busy2: {
-          type: Boolean,
-          value: false,
-        }
-
-      },
-
-      _load: function() {
-        this._getJsonAsync("permissions", "/_ah/api/swarming/v1/server/permissions",
-          "_busy1", this.auth_headers);
-        this._getJsonAsync("server_details", "/_ah/api/swarming/v1/server/details",
-          "_busy2", this.auth_headers)
-      },
-
-      _versionLink: function(version) {
-        if (!version || !version.server_version) {
-          return undefined;
-        }
-        var split = version.server_version.split("-");
-        if (split.length !== 2) {
-          return undefined;
-        }
-        return "https://github.com/luci/luci-py/commit/"+split[1];
-      }
-
-    });
-  </script>
-</dom-module>
-
-<dom-module id="swarming-app-style">
-  <style>
-      * {
-        font-family: sans-serif;
-      }
-      /* Only style anchor tags that are actually linking somewhere.*/
-      a[href] {
-        color: #1F78B4;
-      }
-
-      /*
-       * A set of styles to make buttons and select/options look more Material
-       * Design-ish.
-       */
-      button {
-        min-width: 5.14em;
-        background-color: #fff;
-        color: #1f78b4;
-        text-align: center;
-        text-transform: uppercase;
-        outline: none;
-        border-radius: 3px;
-        padding: 0.6em 1.2em;
-        border: solid lightgray 1px;
-        margin: 0.6em;
-        cursor: pointer;
-      }
-
-      button:hover {
-        background: #eee;
-      }
-
-      button:focus {
-        background-color: #ddd;
-        transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      button:active,
-      button.raised:active {
-        background-color: #999;
-        transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      button:disabled {
-        color: #999;
-      }
-
-      button:disabled:hover {
-        background: initial;
-        cursor: initial;
-      }
-
-      button.action:active {
-        background-color: #A6CEE3;
-        transition: background-color 0.1s color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      button.action {
-        color: white;
-        background: #1f78b4;
-        border: none;
-      }
-
-      button.action:disabled {
-        color: white;
-        background: #999;
-        border: none;
-      }
-
-      button.raised {
-        transition: box-shadow 0.1s cubic-bezier(0.4, 0, 0.2, 1);
-        box-shadow: 5px 5px 18px 0 rgba(0, 0, 0, 0.3);
-      }
-
-      button.raised:active {
-        box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);
-      }
-
-      select,
-      option {
-        padding: 0.4em 1.2em;
-        background-color: white;
-        border: none;
-        line-height: 20px;
-        vertical-align: middle;
-      }
-
-      select {
-        overflow-y: auto;
-      }
-  </style>
-</dom-module>