Remove custom elements examples, they are no longer maintained
R=abarth@chromium.org Review URL: https://codereview.chromium.org/1022613002
This commit is contained in:
Eric Seidel
parent
5457347032
commit
d5a089fd40
@ -1,25 +0,0 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="/sky/framework/elements/sky-element.sky" />
|
||||
<sky-element>
|
||||
<template>
|
||||
<style>
|
||||
div {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div>Hi</div>
|
||||
</template>
|
||||
<script>
|
||||
@Tagname('example')
|
||||
class ExampleElement extends SkyElement {
|
||||
}
|
||||
|
||||
_init(script) => register(script, ExampleElement);
|
||||
</script>
|
||||
</sky-element>
|
||||
@ -1,16 +0,0 @@
|
||||
<!--
|
||||
// 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="example-element.sky" />
|
||||
<style>
|
||||
example {
|
||||
border: 1px solid blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<example />
|
||||
</sky>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,10 +0,0 @@
|
||||
#!mojo mojo:sky_viewer
|
||||
<!--
|
||||
// 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="scrolling.sky" />
|
||||
<scrolling />
|
||||
</sky>
|
||||
@ -1,38 +0,0 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="/sky/framework/elements/sky-element.sky" />
|
||||
<import src="/sky/framework/elements/sky-scrollable.sky" />
|
||||
|
||||
<sky-element>
|
||||
<template>
|
||||
<style>
|
||||
sky-scrollable {
|
||||
margin: 20px;
|
||||
height: 400px;
|
||||
border: 2px solid blue;
|
||||
}
|
||||
</style>
|
||||
<sky-scrollable />
|
||||
</template>
|
||||
<script>
|
||||
import "dart:sky";
|
||||
import "../data/cities.dart" as cities;
|
||||
|
||||
@Tagname('scrolling')
|
||||
class Scrolling extends SkyElement {
|
||||
void shadowRootReady() {
|
||||
Element parent = shadowRoot.querySelector('sky-scrollable');
|
||||
for (Map city in cities.kData.getRange(0, 300)) {
|
||||
Element div = document.createElement('div');
|
||||
div.setChild(new Text(city['name']));
|
||||
parent.appendChild(div);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
_init(script) => register(script, Scrolling);
|
||||
</script>
|
||||
</sky-element>
|
||||
@ -1,8 +0,0 @@
|
||||
#!mojo mojo:sky_viewer
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="stocks.sky" />
|
||||
<stocks />
|
||||
@ -1,98 +0,0 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="/sky/framework/elements/sky-element.sky" />
|
||||
|
||||
<sky-element attributes="change:number">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 40px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
#arrow {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 9px solid transparent;
|
||||
border-right: 9px solid transparent;
|
||||
}
|
||||
.up {
|
||||
margin-bottom: 3px;
|
||||
border-bottom: 9px solid white;
|
||||
}
|
||||
.down {
|
||||
margin-top: 3px;
|
||||
border-top: 9px solid white;
|
||||
}
|
||||
</style>
|
||||
<div id="arrow" />
|
||||
</template>
|
||||
<script>
|
||||
import "dart:sky";
|
||||
import "dart:math";
|
||||
|
||||
final List<String> _kRedColors = [
|
||||
'#E57373',
|
||||
'#EF5350',
|
||||
'#F44336',
|
||||
'#E53935',
|
||||
'#D32F2F',
|
||||
'#C62828',
|
||||
'#B71C1C',
|
||||
];
|
||||
|
||||
final List<String> _kGreenColors = [
|
||||
'#81C784',
|
||||
'#66BB6A',
|
||||
'#4CAF50',
|
||||
'#43A047',
|
||||
'#388E3C',
|
||||
'#2E7D32',
|
||||
'#1B5E20',
|
||||
];
|
||||
|
||||
int _colorIndexForPercentChange(double percentChange) {
|
||||
// Currently the max is 10%.
|
||||
double maxPercent = 10.0;
|
||||
return max(0, ((percentChange.abs() / maxPercent) * _kGreenColors.length).floor());
|
||||
}
|
||||
|
||||
String _colorForPercentChange(double percentChange) {
|
||||
if (percentChange > 0)
|
||||
return _kGreenColors[_colorIndexForPercentChange(percentChange)];
|
||||
return _kRedColors[_colorIndexForPercentChange(percentChange)];
|
||||
}
|
||||
|
||||
@Tagname('stock-arrow')
|
||||
class StockArrow extends SkyElement {
|
||||
Element _arrow;
|
||||
|
||||
void _updateArrow(double percentChange) {
|
||||
String border = _colorForPercentChange(percentChange).toString();
|
||||
String type = percentChange > 0 ? 'bottom' : 'top';
|
||||
_arrow.style['border-$type-color'] = border;
|
||||
style['border-color'] = border;
|
||||
_arrow.setAttribute('class', percentChange > 0 ? 'up' : 'down');
|
||||
}
|
||||
|
||||
void shadowRootReady() {
|
||||
_arrow = shadowRoot.getElementById('arrow');
|
||||
_updateArrow(change);
|
||||
}
|
||||
|
||||
void changeChanged(double oldValue, double newValue) {
|
||||
if (_arrow != null)
|
||||
_updateArrow(newValue);
|
||||
}
|
||||
}
|
||||
|
||||
_init(script) => register(script, StockArrow);
|
||||
</script>
|
||||
</sky-element>
|
||||
@ -1,72 +0,0 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="/sky/framework/elements/material-element.sky" />
|
||||
<import src="/sky/framework/elements/sky-element.sky" />
|
||||
<import src="stock-arrow.sky" />
|
||||
|
||||
<sky-element>
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
// TODO(eseidel): Why does setting height here make this too big?
|
||||
// height: 48px;
|
||||
max-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
padding-top: 16px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
stock-arrow {
|
||||
margin-right: 16px;
|
||||
}
|
||||
#ticker {
|
||||
flex: 1;
|
||||
font-family: 'Roboto Medium', 'Helvetica';
|
||||
}
|
||||
#last-sale {
|
||||
text-align: right;
|
||||
padding-right: 16px;
|
||||
}
|
||||
#change {
|
||||
color: #8A8A8A;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
<stock-arrow id="arrow" />
|
||||
<div id="ticker" />
|
||||
<div id="last-sale" />
|
||||
<div id="change" />
|
||||
</template>
|
||||
<script>
|
||||
import "dart:sky";
|
||||
|
||||
@Tagname('stock')
|
||||
class Stock extends MaterialElement {
|
||||
var model; // model.Stock
|
||||
|
||||
void shadowRootReady() {
|
||||
shadowRoot.getElementById('ticker').textContent = model.symbol;
|
||||
|
||||
Element lastSale = shadowRoot.getElementById('last-sale');
|
||||
lastSale.textContent = "\$${model.lastSale.toStringAsFixed(2)}";
|
||||
|
||||
Element change = shadowRoot.getElementById('change');
|
||||
String changeString = "${model.percentChange.toStringAsFixed(2)}%";
|
||||
if (model.percentChange > 0)
|
||||
changeString = "+" + changeString;
|
||||
change.textContent = changeString;
|
||||
|
||||
StockArrow arrow = shadowRoot.getElementById('arrow');
|
||||
arrow.change = model.percentChange;
|
||||
}
|
||||
}
|
||||
|
||||
_init(script) => register(script, Stock);
|
||||
</script>
|
||||
</sky-element>
|
||||
@ -1,112 +0,0 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="/sky/framework/elements/sky-drawer-header.sky" />
|
||||
<import src="/sky/framework/elements/sky-drawer.sky" />
|
||||
<import src="/sky/framework/elements/sky-element.sky" />
|
||||
<import src="/sky/framework/elements/sky-icon.sky" />
|
||||
<import src="/sky/framework/elements/sky-menu-divider.sky" />
|
||||
<import src="/sky/framework/elements/sky-menu-item.sky" />
|
||||
<import src="/sky/framework/elements/sky-scrollable.sky" />
|
||||
<import src="/sky/framework/elements/sky-toolbar.sky" />
|
||||
<import src="stock.sky" as='view'/>
|
||||
|
||||
<sky-element>
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: -webkit-fill-available;
|
||||
font-family: 'Roboto Regular', 'Helvetica';
|
||||
font-size: 16px;
|
||||
}
|
||||
sky-drawer {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
sky-toolbar {
|
||||
z-index: 1;
|
||||
background-color: #3F51B5;
|
||||
color: white;
|
||||
}
|
||||
sky-icon {
|
||||
padding: 8px;
|
||||
margin: 0 4px;
|
||||
}
|
||||
#title {
|
||||
flex: 1;
|
||||
margin: 0 4px;
|
||||
}
|
||||
sky-scrollable {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
<sky-drawer id="drawer" level="3">
|
||||
<sky-drawer-header>
|
||||
Stocks
|
||||
</sky-drawer-header>
|
||||
<sky-menu-item icon="content/inbox">Inbox</sky-menu-item>
|
||||
<sky-menu-item icon="content/drafts">Drafts</sky-menu-item>
|
||||
<sky-menu-divider />
|
||||
<sky-menu-item icon="action/settings">Settings</sky-menu-item>
|
||||
<sky-menu-item icon="action/help">Help & feedback</sky-menu-item>
|
||||
</sky-drawer>
|
||||
<sky-toolbar level="2">
|
||||
<sky-icon id="menu" type="navigation/menu_white" size="24" />
|
||||
<div id="title">I am a stocks app</div>
|
||||
<sky-icon type="action/search_white" size="24" />
|
||||
<sky-icon type="navigation/more_vert_white" size="24" />
|
||||
</sky-toolbar>
|
||||
<sky-scrollable id='stock_list'>
|
||||
</sky-scrollable>
|
||||
</template>
|
||||
<script>
|
||||
import "dart:sky";
|
||||
import "dart:math";
|
||||
import "../stocks-fn/lib/stock_data.dart" as model;
|
||||
|
||||
List pick(List list, int count) {
|
||||
var rng = new Random();
|
||||
List picked = new List();
|
||||
for (int i = 0; i < count; i++) {
|
||||
picked.add(list[rng.nextInt(list.length)]);
|
||||
}
|
||||
return picked;
|
||||
}
|
||||
|
||||
@Tagname('stocks')
|
||||
class Stocks extends SkyElement {
|
||||
Element _drawer;
|
||||
|
||||
void shadowRootReady() {
|
||||
_drawer = shadowRoot.getElementById('drawer');
|
||||
Element menu = shadowRoot.getElementById('menu');
|
||||
menu.addEventListener('click', _handleMenuClick);
|
||||
populateStockList();
|
||||
}
|
||||
|
||||
void populateStockList() {
|
||||
Element stockList = shadowRoot.getElementById('stock_list');
|
||||
// Limit to 100 to avoid taking seconds to load.
|
||||
List<model.Stock> picked = pick(model.oracle.stocks, 100);
|
||||
picked.sort((a, b) => a.symbol.compareTo(b.symbol));
|
||||
for (model.Stock stock in picked) {
|
||||
stockList.appendChild(new view.Stock()..model = stock);
|
||||
}
|
||||
}
|
||||
|
||||
void _handleMenuClick(_) {
|
||||
_drawer.toggle();
|
||||
}
|
||||
}
|
||||
|
||||
_init(script) => register(script, Stocks);
|
||||
</script>
|
||||
</sky-element>
|
||||
@ -1,8 +0,0 @@
|
||||
#!mojo mojo:sky_viewer
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="widget-root.sky"/>
|
||||
<widget-root />
|
||||
@ -1,98 +0,0 @@
|
||||
<!--
|
||||
// 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.
|
||||
-->
|
||||
<import src="/sky/framework/elements/sky-box.sky" />
|
||||
<import src="/sky/framework/elements/sky-button.sky" />
|
||||
<import src="/sky/framework/elements/sky-checkbox.sky" />
|
||||
<import src="/sky/framework/elements/sky-element.sky" />
|
||||
<import src="/sky/framework/elements/sky-input.sky" />
|
||||
<import src="/sky/framework/elements/sky-radio.sky" />
|
||||
<import src="/sky/framework/elements/sky-scrollable.sky" />
|
||||
<sky-element>
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
font-family: 'Roboto Regular', 'Helvetica';
|
||||
}
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
sky-checkbox {
|
||||
margin: 5px;
|
||||
}
|
||||
.output {
|
||||
margin-left: 48px;
|
||||
}
|
||||
sky-scrollable {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
</style>
|
||||
<sky-scrollable>
|
||||
<sky-box title='Text'>
|
||||
<sky-input id="text" value="{{ inputValue }}" />
|
||||
<div>value = {{ inputValue }}</div>
|
||||
</sky-box>
|
||||
|
||||
<sky-box title='Buttons'>
|
||||
<div style="display: flex; flex-direction: horizontal">
|
||||
<div style="flex:1" />
|
||||
<sky-button level="1" id="button">CANCEL</sky-button>
|
||||
<sky-button level="1" primary>CONFIRM</sky-button>
|
||||
</div>
|
||||
</sky-box>
|
||||
|
||||
<sky-box title='Checkboxes'>
|
||||
<div><sky-checkbox id='checkbox' checked='{{ checked }}'/>Checkbox</div>
|
||||
<div class="output">highlight: {{ myCheckbox.highlight }}</div>
|
||||
<div class="output">checked: {{ myCheckbox.checked }}</div>
|
||||
<div><sky-checkbox id='checkbox' checked="true"/>Checkbox, default checked.</div>
|
||||
<div class="output">checked: {{ checked }}</div>
|
||||
</sky-box>
|
||||
|
||||
<sky-box title='Radios'>
|
||||
<sky-box title='Group One'>
|
||||
<div><sky-radio group='foo'/>one</div>
|
||||
<div><sky-radio group='foo' selected='true' />two</div>
|
||||
<div><sky-radio group='foo'/>three</div>
|
||||
</sky-box>
|
||||
<sky-box title='Group Two'>
|
||||
<div><sky-radio group='bar'/>A</div>
|
||||
<div><sky-radio group='bar'/>B</div>
|
||||
<div><sky-radio group='bar' selected='true' />C</div>
|
||||
</sky-box>
|
||||
</sky-box>
|
||||
</sky-scrollable>
|
||||
</template>
|
||||
<script>
|
||||
import "dart:sky";
|
||||
|
||||
@Tagname('widget-root')
|
||||
class WidgetRoot extends SkyElement {
|
||||
Element _button;
|
||||
Element _checkbox;
|
||||
Element _text;
|
||||
int _clickCount = 0;
|
||||
String _inputValue = "Ready";
|
||||
bool _checked = false;
|
||||
|
||||
void shadowRootReady() {
|
||||
_button = this.shadowRoot.getElementById('button');
|
||||
_checkbox = this.shadowRoot.getElementById('checkbox');
|
||||
_text = this.shadowRoot.getElementById('text');
|
||||
|
||||
_button.addEventListener('click', _handleClick);
|
||||
}
|
||||
|
||||
void _handleClick(_) {
|
||||
_clickCount++;
|
||||
_checked = !_checked;
|
||||
_inputValue = "Moar clicking ${_clickCount}";
|
||||
}
|
||||
}
|
||||
|
||||
_init(script) => register(script, WidgetRoot);
|
||||
</script>
|
||||
</sky-element>
|
||||
Loading…
x
Reference in New Issue
Block a user