dirk/dlite-config
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Intermediate version not finished, implement dialogs for configurations instead of json_editor usage

Browse Source
This commit is contained in:
Dirk Jahnke
2018-01-10 19:35:17 +01:00
parent 59b24a92a1
commit 22c1f060be
10 changed files with 528 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/colors-view.html
View File

@@ -10,6 +10,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<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>
@@ -19,65 +26,71 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
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">2</div>
<h1>Color Definition</h1>
<p>Edit the color definitions here:</p>
<p></p>
<div id="editor_holder" name="editor_holder"></div>
<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 src="js/jsoneditor.js"></script>
<script>
var schema = {
"$schema": "http://json-schema.org/draft-06/schema#",
"description": "DLite color definition",
"type": "array",
"format": "table",
"uniqueItems": true,
"disable_collapse": true,
"items": {
"type": "object",
"description": "Color definition",
"properties": {
"name": {
"type": "string",
"description": "Color name used as identifier"
},
"color": {
"type": "string",
"format": "color",
"description": "Color definition"
}
}
}
};
class MyView2 extends Polymer.Element {
class ColorsView extends Polymer.Element {
static get is() { return 'colors-view'; }
ready() {
super.ready();
var element = this.$.editor_holder;
var editor;
if (!element) {
alert("Could not find editor_holder element!");
} else {
editor = new JSONEditor(element, {
schema: schema,
iconlib: "fontawesome4",
disable_properties: true,
no_additional_properties: false,
disable_edit_json: true
});
}
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(MyView2.is, MyView2);
window.customElements.define(ColorsView.is, ColorsView);
</script>
</dom-module>