mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
5f719fecde
Displays the last six selected colors. BUG= R=abarth@chromium.org Review URL: https://codereview.chromium.org/897683002
47 lines
1.3 KiB
Plaintext
47 lines
1.3 KiB
Plaintext
<!--
|
|
// Copyright 2015 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
-->
|
|
<sky>
|
|
<import src="/sky/framework/sky-box.sky"/>
|
|
<import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
|
|
<import src="color-wheel.sky" />
|
|
<import src="color-samples.sky" />
|
|
|
|
<sky-element name="color-picker" on-color-change="updateColorSamples">
|
|
<template>
|
|
<style>
|
|
color-samples {
|
|
height: 80px;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
<sky-box title='Choose a Color'>
|
|
<color-wheel id="color-wheel-element" color="{{ inputColor }}"/>
|
|
<color-samples id="color-samples-element"/>
|
|
</sky-box>
|
|
</template>
|
|
<script>
|
|
module.exports = class extends SkyElement {
|
|
created() {
|
|
this.inputColor = "#FFFFFF";
|
|
this.colorSamplesElt = null;
|
|
// Show the 6 most recently selected colors
|
|
var colorSample = {cssColor: this.inputColor};
|
|
this.colorSamples = new Array(6);
|
|
this.colorSamples.fill({cssColor: this.inputColor});
|
|
}
|
|
shadowRootReady() {
|
|
this.colorSamplesElt = this.shadowRoot.getElementById('color-samples-element');
|
|
}
|
|
updateColorSamples(e) {
|
|
this.colorSamples.push({cssColor: e.detail});
|
|
this.colorSamples.shift();
|
|
this.colorSamplesElt.colors = this.colorSamples;
|
|
}
|
|
}.register();
|
|
</script>
|
|
</sky-element>
|
|
</sky>
|