dlite-config/src/colors-view.html

84 lines
2.4 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">
<dom-module id="colors-view">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
</style>
<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>
</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 {
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
});
}
}
}
window.customElements.define(MyView2.is, MyView2);
</script>
</dom-module>