97 lines
3.3 KiB
HTML
97 lines
3.3 KiB
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>
|