Skip to content

F
Front-End
Commit d5a089fd authored by Eric Seidel's avatar Eric Seidel
Browse files
Options

Remove custom elements examples, they are no longer maintained 

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1022613002
parent 54573470
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 5490 deletions
examples/custom-element/example-element.sky deleted 100644 → 0
View file @ 54573470
<!--
// 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>
examples/custom-element/index.sky deleted 100644 → 0
View file @ 54573470
<!--
// 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>
examples/data/cities.dart deleted 100644 → 0
View file @ 54573470
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/scrolling/index.sky deleted 100644 → 0
View file @ 54573470
#!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>
examples/scrolling/scrolling.sky deleted 100644 → 0
View file @ 54573470
<!--
// 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>
examples/stocks/index.sky deleted 100644 → 0
View file @ 54573470
#!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 />
examples/stocks/stock-arrow.sky deleted 100644 → 0
View file @ 54573470
<!--
// 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>
examples/stocks/stock.sky deleted 100644 → 0
View file @ 54573470
<!--
// 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>
examples/stocks/stocks.sky deleted 100644 → 0
View file @ 54573470
<!--
// 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 &amp; 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>
examples/widgets/index.sky deleted 100644 → 0
View file @ 54573470
#!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 />
examples/widgets/widget-root.sky deleted 100644 → 0
View file @ 54573470
<!--
// 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab