dlite-config/src/colors-view.html

<!--
@license
Copyright (c) 2016 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="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/iron-input/iron-input.html">
<link rel="import" href="../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../bower_components/vaadin-grid/vaadin-grid.html">

<dom-module id="colors-view">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
      input[readonly] {
        border: 2px solid transparent;
      }

      input {
        font: inherit;
      }
      paper-checkbox {
        --primary-color: #ff5722;
      }
    </style>

    <!--<iron-ajax auto url="https://demo.vaadin.com/demo-data/1.0/people?count=200" handle-as="json" last-response="{{users}}"></iron-ajax>
    -->
    <div class="card">
      <div class="circle">3</div>
      <h1>Edit Color Definition</h1>
      <p>
      <paper-checkbox checked="{{editing}}">Enable Editing</paper-checkbox>
      <vaadin-grid aria-label="Color Definitions" items="[[colors]]">
        <vaadin-grid-column width="50px" flex-grow="0">
          <template class="header">#</template>
          <template>
            [[index]]
          </template>
        </vaadin-grid-column>
   
      <vaadin-grid-column>
          <template class="header">Color Name</template>
          <template>
            <input  type="text" maxLength="40" placeholder="Enter color name" value="{{item.name::input}}" readonly$="[[!editing]]">
          </template>
        </vaadin-grid-column>
  
        <vaadin-grid-column>
          <template class="header">Color Definition</template>
          <template>
            <input type="color" value="{{item.color::input}}" readonly$="[[!editing]]">
          </template>
        </vaadin-grid-column>
      </vaadin-grid>
      <br />
      <paper-button raised on-click="addColorsRow">Add Row</paper-button>
      </p>
    </div>
  </template>

  <script>
    class ColorsView extends Polymer.Element {
      static get is() { return 'colors-view'; }
      ready() {
        super.ready();
      }
      static get properties() {
        return {
          editing: { type: Boolean, value: false },
          colors: { type: Array, value: [{name: "", color: "#000000"}] }
        }
      }
      addColorsRow() {
        this.push('colors', {name: "", color: "#000000"});
      } 
  }

    window.customElements.define(ColorsView.is, ColorsView);

  </script>
</dom-module>