Olivier Combe
Igor Minar
parent
bd864fb274
commit
7f17c70fd0
|
|
@ -7,7 +7,7 @@
|
|||
*/
|
||||
import {LifecycleHooksFeature, renderComponent, whenRendered} from './component';
|
||||
import {defineBase, defineComponent, defineDirective, defineNgModule, definePipe} from './definition';
|
||||
import {getHostElement, getRenderedText} from './discovery_utils';
|
||||
import {getComponent, getHostElement, getRenderedText} from './discovery_utils';
|
||||
import {InheritDefinitionFeature} from './features/inherit_definition_feature';
|
||||
import {NgOnChangesFeature} from './features/ng_onchanges_feature';
|
||||
import {ProvidersFeature} from './features/providers_feature';
|
||||
|
|
@ -169,6 +169,7 @@ export {
|
|||
defineBase,
|
||||
definePipe,
|
||||
getHostElement,
|
||||
getComponent,
|
||||
getRenderedText,
|
||||
renderComponent,
|
||||
whenRendered,
|
||||
|
|
|
|||
|
|
@ -179,5 +179,4 @@ class ToDoAppComponent {
|
|||
class ToDoAppModule {
|
||||
}
|
||||
|
||||
// TODO(misko): create cleaner way to publish component into global location for tests.
|
||||
(window as any).toDoAppComponent = renderComponent(ToDoAppComponent);
|
||||
renderComponent(ToDoAppComponent);
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
import '@angular/compiler';
|
||||
import {ɵwhenRendered as whenRendered} from '@angular/core';
|
||||
import {getComponent} from '@angular/core/src/render3';
|
||||
import {withBody} from '@angular/private/testing';
|
||||
import * as path from 'path';
|
||||
|
||||
|
|
@ -22,8 +23,7 @@ describe('functional test for todo', () => {
|
|||
describe(bundle, () => {
|
||||
it('should render todo', withBody('<todo-app></todo-app>', async() => {
|
||||
require(path.join(PACKAGE, bundle));
|
||||
// TODO(misko): have cleaner way to do this for tests.
|
||||
const toDoAppComponent = (window as any).toDoAppComponent;
|
||||
const toDoAppComponent = getComponent(document.querySelector('todo-app') !);
|
||||
expect(document.body.textContent).toContain('todos');
|
||||
expect(document.body.textContent).toContain('Demonstrate Components');
|
||||
expect(document.body.textContent).toContain('4 items left');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,115 @@
|
|||
package(default_visibility = ["//visibility:public"])
|
||||
|
||||
load("//tools:defaults.bzl", "jasmine_node_test", "ng_module", "ng_rollup_bundle", "ts_library")
|
||||
load("//tools/http-server:http_server.bzl", "http_server")
|
||||
load("@build_bazel_rules_typescript//:defs.bzl", "ts_devserver")
|
||||
|
||||
ng_module(
|
||||
name = "todo_i18n",
|
||||
srcs = [
|
||||
"index.ts",
|
||||
"translations.ts",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [
|
||||
"//packages/common",
|
||||
"//packages/core",
|
||||
"//packages/core/test/bundling/util:reflect_metadata",
|
||||
],
|
||||
)
|
||||
|
||||
ng_rollup_bundle(
|
||||
name = "bundle",
|
||||
# TODO(alexeagle): This is inconsistent.
|
||||
# We try to teach users to always have their workspace at the start of a
|
||||
# path, to disambiguate from other workspaces.
|
||||
# Here, the rule implementation is looking in an execroot where the layout
|
||||
# has an "external" directory for external dependencies.
|
||||
# This should probably start with "angular/" and let the rule deal with it.
|
||||
entry_point = "packages/core/test/bundling/todo_i18n/index.js",
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [
|
||||
":todo_i18n",
|
||||
"//packages/common",
|
||||
"//packages/core",
|
||||
"//packages/core/test/bundling/util:reflect_metadata",
|
||||
],
|
||||
)
|
||||
|
||||
ts_library(
|
||||
name = "test_lib",
|
||||
testonly = True,
|
||||
srcs = glob(["*_spec.ts"]),
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [
|
||||
"//packages:types",
|
||||
"//packages/compiler",
|
||||
"//packages/core",
|
||||
"//packages/core/testing",
|
||||
"//packages/private/testing",
|
||||
],
|
||||
)
|
||||
|
||||
jasmine_node_test(
|
||||
name = "test",
|
||||
data = [
|
||||
":bundle",
|
||||
":bundle.js",
|
||||
":bundle.min.js",
|
||||
":bundle.min_debug.js",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [":test_lib"],
|
||||
)
|
||||
|
||||
genrule(
|
||||
name = "tslib",
|
||||
srcs = [
|
||||
"@ngdeps//node_modules/tslib:tslib.js",
|
||||
],
|
||||
outs = [
|
||||
"tslib.js",
|
||||
],
|
||||
cmd = "cp $< $@",
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
)
|
||||
|
||||
ts_devserver(
|
||||
name = "devserver",
|
||||
entry_module = "angular/packages/core/test/bundling/todo_i18n/index",
|
||||
serving_path = "/bundle.min.js",
|
||||
static_files = [
|
||||
"index.html",
|
||||
":tslib",
|
||||
"todo.css",
|
||||
"base.css",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
deps = [":todo_i18n"],
|
||||
)
|
||||
|
||||
http_server(
|
||||
name = "prodserver",
|
||||
data = [
|
||||
"base.css",
|
||||
"index.html",
|
||||
"todo.css",
|
||||
":bundle.min.js.br",
|
||||
":bundle.min_debug.js",
|
||||
],
|
||||
tags = [
|
||||
"ivy-only",
|
||||
],
|
||||
)
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
# Outstanding on the `Todo` app
|
||||
|
||||
## `Todo` app
|
||||
- [X] Clicking archive removes todo item.
|
||||
- [X] Update `Todo` app to match http://todomvc.com/.
|
||||
- [ ] Make it work with `[(ngModel)]`.
|
||||
- [ ] Make it work with `(keyup.Enter)`.
|
||||
|
||||
## Compiler
|
||||
- [ ] Remove ` tslib_1.__decorate([core_1.Input(), tslib_1.__metadata("design:type", Object)], TodoComponent.prototype, "todo", void 0);` from generated output.
|
||||
- [ ] Allow compilation of `@angular/common` through ivy.
|
||||
|
||||
## Ivy Runtime
|
||||
- [X] Work on `ViewContainerRef` needs to cause change detection so that `todo` app renders correctly on first render.
|
||||
- [X] The todo input value box is not correctly rendering to checked for completed tasks.
|
||||
- [ ] `ViewContainerRef` must separate creation mode from update mode otherwise {{todo.done}} fails for `NgFor` because `todo` is not set during creation mode.
|
||||
- [ ] Injector should be optional
|
||||
|
||||
## Testing
|
||||
- [ ] Create a debug mode which would publish components into DOM for easier writing of tests.
|
||||
|
||||
|
||||
## Bazel
|
||||
|
||||
- [ ] Have action verb on the `ng_rollup_bundle` to display source maps.
|
||||
|
||||
# NOTES
|
||||
|
||||
## Killing hung `iblaze` server
|
||||
|
||||
At times the `iblaze run packages/core/test/bundling/todo:devserver` keeps running and holding onto
|
||||
ports even after `ctrl-c`. This command kills the outstanding processes.
|
||||
|
||||
```
|
||||
kill -9 $(ps aux | grep ibazel\\\|devserver | cut -c 17-23)
|
||||
```
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
hr {
|
||||
margin: 20px 0;
|
||||
border: 0;
|
||||
border-top: 1px dashed #c5c5c5;
|
||||
border-bottom: 1px dashed #f7f7f7;
|
||||
}
|
||||
|
||||
.learn a {
|
||||
font-weight: normal;
|
||||
text-decoration: none;
|
||||
color: #b83f45;
|
||||
}
|
||||
|
||||
.learn a:hover {
|
||||
text-decoration: underline;
|
||||
color: #787e7e;
|
||||
}
|
||||
|
||||
.learn h3,
|
||||
.learn h4,
|
||||
.learn h5 {
|
||||
margin: 10px 0;
|
||||
font-weight: 500;
|
||||
line-height: 1.2;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.learn h3 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.learn h4 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.learn h5 {
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.learn ul {
|
||||
padding: 0;
|
||||
margin: 0 0 30px 25px;
|
||||
}
|
||||
|
||||
.learn li {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.learn p {
|
||||
font-size: 15px;
|
||||
font-weight: 300;
|
||||
line-height: 1.3;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#issue-count {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quote {
|
||||
border: none;
|
||||
margin: 20px 0 60px 0;
|
||||
}
|
||||
|
||||
.quote p {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.quote p:before {
|
||||
content: '“';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 3px;
|
||||
}
|
||||
|
||||
.quote p:after {
|
||||
content: '”';
|
||||
font-size: 50px;
|
||||
opacity: .15;
|
||||
position: absolute;
|
||||
bottom: -42px;
|
||||
right: 3px;
|
||||
}
|
||||
|
||||
.quote footer {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.quote footer img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.quote footer a {
|
||||
margin-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.speech-bubble {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
background: rgba(0, 0, 0, .04);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.speech-bubble:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 30px;
|
||||
border: 13px solid transparent;
|
||||
border-top-color: rgba(0, 0, 0, .04);
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
position: absolute;
|
||||
width: 272px;
|
||||
top: 8px;
|
||||
left: -300px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(255, 255, 255, .6);
|
||||
transition-property: left;
|
||||
transition-duration: 500ms;
|
||||
}
|
||||
|
||||
@media (min-width: 899px) {
|
||||
.learn-bar {
|
||||
width: auto;
|
||||
padding-left: 300px;
|
||||
}
|
||||
|
||||
.learn-bar > .learn {
|
||||
left: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!doctype html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Angular Todo Example</title>
|
||||
<link rel="stylesheet" href="base.css">
|
||||
<link rel="stylesheet" href="todo.css">
|
||||
<style>
|
||||
.done {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- The Angular application will be bootstrapped into this element. -->
|
||||
<todo-app></todo-app>
|
||||
|
||||
<!--
|
||||
Script tag which bootstraps the application. Use `?debug` in URL to select
|
||||
the debug version of the script.
|
||||
|
||||
There are two scripts sources: `bundle.min.js` and `bundle.min_debug.js` You can
|
||||
switch between which bundle the browser loads to experiment with the application.
|
||||
|
||||
- `bundle.min.js`: Is what the site would serve to their users. It has gone
|
||||
through rollup, build-optimizer, and uglify with tree shaking.
|
||||
- In `devserver` mode `bundle.min.js` is a bit misnamed since it is concatenated
|
||||
individual files which are not minified.
|
||||
- `bundle.min_debug.js`: Is what the developer would like to see when debugging
|
||||
the application. It has also gone through full pipeline of rollup, build-optimizer,
|
||||
and uglify, however special flags were passed to uglify to prevent inlining and
|
||||
property renaming.
|
||||
-->
|
||||
<script>
|
||||
document.write('<script src="' +
|
||||
(document.location.search.endsWith('debug') ? '/bundle.min_debug.js' : '/bundle.min.js.br') +
|
||||
'"></' + 'script>');
|
||||
</script>
|
||||
<script>
|
||||
if (typeof define === "function" && define.amd) {
|
||||
// If `define` is defined that we are in devserver mode. Dev server concatenates all of the
|
||||
// source files and than loads them using `require`. There is an issue with the way
|
||||
// `@angular/core` imports are generated which results in both `@angular/core` as well as `@angular/core/index`
|
||||
// This hack makes both of the exports available to the application.
|
||||
define("@angular/core", ["require", "exports", "tslib", "@angular/core/index"], function (require, exports) {
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", { value: true });
|
||||
var tslib = require("tslib");
|
||||
tslib.__exportStar(require("@angular/core/index"), exports);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import '@angular/core/test/bundling/util/src/reflect_metadata';
|
||||
import {CommonModule} from '@angular/common';
|
||||
import {Component, Injectable, NgModule, ViewEncapsulation, ɵmarkDirty as markDirty, ɵrenderComponent as renderComponent} from '@angular/core';
|
||||
// TODO(ocombe): replace this with the real runtime i18n service
|
||||
import {localize} from './translations';
|
||||
|
||||
class Todo {
|
||||
editing: boolean;
|
||||
|
||||
// TODO(issue/24571): remove '!'.
|
||||
private _title !: string;
|
||||
get title() { return this._title; }
|
||||
set title(value: string) { this._title = value.trim(); }
|
||||
|
||||
constructor(title: string, public completed: boolean = false) {
|
||||
this.editing = false;
|
||||
this.title = title;
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
class TodoStore {
|
||||
todos: Array<Todo> = [
|
||||
new Todo(localize('Demonstrate Components')),
|
||||
new Todo(localize('Demonstrate Structural Directives'), true),
|
||||
// Using a placeholder
|
||||
new Todo(localize('Demonstrate {$value}', {value: 'NgModules'})),
|
||||
new Todo(localize('Demonstrate zoneless change detection')),
|
||||
new Todo(localize('Demonstrate internationalization')),
|
||||
];
|
||||
|
||||
private getWithCompleted(completed: boolean) {
|
||||
return this.todos.filter((todo: Todo) => todo.completed === completed);
|
||||
}
|
||||
|
||||
allCompleted() { return this.todos.length === this.getCompleted().length; }
|
||||
|
||||
setAllTo(completed: boolean) { this.todos.forEach((t: Todo) => t.completed = completed); }
|
||||
|
||||
removeCompleted() { this.todos = this.getWithCompleted(false); }
|
||||
|
||||
getRemaining() { return this.getWithCompleted(false); }
|
||||
|
||||
getCompleted() { return this.getWithCompleted(true); }
|
||||
|
||||
toggleCompletion(todo: Todo) { todo.completed = !todo.completed; }
|
||||
|
||||
remove(todo: Todo) { this.todos.splice(this.todos.indexOf(todo), 1); }
|
||||
|
||||
add(title: string) { this.todos.push(new Todo(title)); }
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'todo-app',
|
||||
// TODO(misko): make this work with `[(ngModel)]`
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
template: `
|
||||
<section class="todoapp">
|
||||
<header class="header" i18n>
|
||||
<h1>todos</h1>
|
||||
<input class="new-todo" i18n-placeholder placeholder="What needs to be done?" autofocus=""
|
||||
[value]="newTodoText"
|
||||
(keyup)="$event.code == 'Enter' ? addTodo() : updateNewTodoValue($event.target.value)">
|
||||
</header>
|
||||
<section *ngIf="todoStore.todos.length > 0" class="main">
|
||||
<input *ngIf="todoStore.todos.length"
|
||||
#toggleall class="toggle-all" type="checkbox"
|
||||
[checked]="todoStore.allCompleted()"
|
||||
(click)="toggleAllTodos(toggleall.checked)">
|
||||
<ul class="todo-list">
|
||||
<li *ngFor="let todo of todoStore.todos"
|
||||
[class.completed]="todo.completed"
|
||||
[class.editing]="todo.editing">
|
||||
<div class="view">
|
||||
<input class="toggle" type="checkbox"
|
||||
(click)="toggleCompletion(todo)"
|
||||
[checked]="todo.completed">
|
||||
<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
|
||||
<button class="destroy" (click)="remove(todo)"></button>
|
||||
</div>
|
||||
<input *ngIf="todo.editing"
|
||||
class="edit" #editedtodo
|
||||
[value]="todo.title"
|
||||
(blur)="updateEditingTodo(todo, editedtodo.value)"
|
||||
(keyup)="updateEditedTodoValue($event.target.value)"
|
||||
(keyup)="$event.code == 'Enter' && updateEditingTodo(todo, editedtodo.value)"
|
||||
(keyup)="$event.code == 'Escape' && cancelEditingTodo(todo)">
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<footer *ngIf="todoStore.todos.length > 0" class="footer">
|
||||
<span class="todo-count" i18n>
|
||||
<strong>{{todoStore.getRemaining().length}}</strong> {todoStore.getRemaining().length, plural, =1 {item left} other {items left}}
|
||||
</span>
|
||||
<button *ngIf="todoStore.getCompleted().length > 0" class="clear-completed" (click)="removeCompleted()" i18n>
|
||||
Clear completed
|
||||
</button>
|
||||
</footer>
|
||||
</section>
|
||||
`,
|
||||
// TODO(misko): switch over to OnPush
|
||||
// changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
class ToDoAppComponent {
|
||||
newTodoText = '';
|
||||
|
||||
constructor(public todoStore: TodoStore) {}
|
||||
|
||||
cancelEditingTodo(todo: Todo) {
|
||||
todo.editing = false;
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
finishUpdatingTodo(todo: Todo, editedTitle: string) {
|
||||
editedTitle = editedTitle.trim();
|
||||
|
||||
if (editedTitle.length === 0) {
|
||||
this.remove(todo);
|
||||
}
|
||||
|
||||
todo.title = editedTitle;
|
||||
this.cancelEditingTodo(todo);
|
||||
}
|
||||
|
||||
editTodo(todo: Todo) {
|
||||
todo.editing = true;
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
removeCompleted() {
|
||||
this.todoStore.removeCompleted();
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
toggleCompletion(todo: Todo) {
|
||||
this.todoStore.toggleCompletion(todo);
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
remove(todo: Todo) {
|
||||
this.todoStore.remove(todo);
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
addTodo() {
|
||||
if (this.newTodoText.trim().length) {
|
||||
this.todoStore.add(this.newTodoText);
|
||||
this.newTodoText = '';
|
||||
}
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
toggleAllTodos(checked: boolean) {
|
||||
this.todoStore.setAllTo(checked);
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
updateEditedTodoValue(todo: Todo, value: string) {
|
||||
todo.title = value;
|
||||
markDirty(this);
|
||||
}
|
||||
|
||||
updateNewTodoValue(value: string) {
|
||||
this.newTodoText = value;
|
||||
markDirty(this);
|
||||
}
|
||||
}
|
||||
|
||||
@NgModule({declarations: [ToDoAppComponent], imports: [CommonModule]})
|
||||
class ToDoAppModule {
|
||||
}
|
||||
|
||||
renderComponent(ToDoAppComponent);
|
||||
|
|
@ -0,0 +1,378 @@
|
|||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
line-height: 1.4em;
|
||||
background: #f5f5f5;
|
||||
color: #4d4d4d;
|
||||
min-width: 230px;
|
||||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="checkbox"] {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todoapp {
|
||||
background: #fff;
|
||||
margin: 130px 0 40px 0;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.todoapp input::-webkit-input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::-moz-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp input::input-placeholder {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
color: #e6e6e6;
|
||||
}
|
||||
|
||||
.todoapp h1 {
|
||||
position: absolute;
|
||||
top: -155px;
|
||||
width: 100%;
|
||||
font-size: 80px;
|
||||
line-height: 80px;
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: rgba(175, 47, 47, 0.15);
|
||||
-webkit-text-rendering: optimizeLegibility;
|
||||
-moz-text-rendering: optimizeLegibility;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
.new-todo,
|
||||
.edit {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
padding: 6px;
|
||||
border: 1px solid #999;
|
||||
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
|
||||
box-sizing: border-box;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.new-todo {
|
||||
padding: 16px 16px 16px 60px;
|
||||
border: none;
|
||||
background: rgba(0, 0, 0, 0.003);
|
||||
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
label[for='toggle-all'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
position: absolute;
|
||||
top: -55px;
|
||||
left: -12px;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
text-align: center;
|
||||
border: none; /* Mobile Safari */
|
||||
}
|
||||
|
||||
.toggle-all:before {
|
||||
content: '❯';
|
||||
font-size: 22px;
|
||||
color: #e6e6e6;
|
||||
padding: 10px 27px 10px 27px;
|
||||
}
|
||||
|
||||
.toggle-all:checked:before {
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
.todo-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.todo-list li {
|
||||
position: relative;
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.todo-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.todo-list li.editing .edit {
|
||||
display: block;
|
||||
width: 506px;
|
||||
padding: 13px 17px 12px 17px;
|
||||
margin: 0 0 0 43px;
|
||||
}
|
||||
|
||||
.todo-list li.editing .view {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
text-align: center;
|
||||
width: 40px;
|
||||
/* auto, since non-WebKit browsers doesn't support input styling */
|
||||
height: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto 0;
|
||||
border: none; /* Mobile Safari */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle:after {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
|
||||
}
|
||||
|
||||
.todo-list li .toggle:checked:after {
|
||||
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
|
||||
}
|
||||
|
||||
.todo-list li label {
|
||||
white-space: pre-line;
|
||||
word-break: break-all;
|
||||
padding: 15px 60px 15px 15px;
|
||||
margin-left: 45px;
|
||||
display: block;
|
||||
line-height: 1.2;
|
||||
transition: color 0.4s;
|
||||
}
|
||||
|
||||
.todo-list li.completed label {
|
||||
color: #d9d9d9;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.todo-list li .destroy {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 10px;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: auto 0;
|
||||
font-size: 30px;
|
||||
color: #cc9a9a;
|
||||
margin-bottom: 11px;
|
||||
transition: color 0.2s ease-out;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:hover {
|
||||
color: #af5b5e;
|
||||
}
|
||||
|
||||
.todo-list li .destroy:after {
|
||||
content: '×';
|
||||
}
|
||||
|
||||
.todo-list li:hover .destroy {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.todo-list li .edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.todo-list li.editing:last-child {
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
color: #777;
|
||||
padding: 10px 15px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #e6e6e6;
|
||||
}
|
||||
|
||||
.footer:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
|
||||
0 8px 0 -3px #f6f6f6,
|
||||
0 9px 1px -3px rgba(0, 0, 0, 0.2),
|
||||
0 16px 0 -6px #f6f6f6,
|
||||
0 17px 2px -6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.todo-count {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.todo-count strong {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.filters {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.filters li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.filters li a {
|
||||
color: inherit;
|
||||
margin: 3px;
|
||||
padding: 3px 7px;
|
||||
text-decoration: none;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.filters li a.selected,
|
||||
.filters li a:hover {
|
||||
border-color: rgba(175, 47, 47, 0.1);
|
||||
}
|
||||
|
||||
.filters li a.selected {
|
||||
border-color: rgba(175, 47, 47, 0.2);
|
||||
}
|
||||
|
||||
.clear-completed,
|
||||
html .clear-completed:active {
|
||||
float: right;
|
||||
position: relative;
|
||||
line-height: 20px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.clear-completed:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.info {
|
||||
margin: 65px auto 0;
|
||||
color: #bfbfbf;
|
||||
font-size: 10px;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.info p {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.info a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.info a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*
|
||||
Hack to remove background from Mobile Safari.
|
||||
Can't use it globally since it destroys checkboxes in Firefox
|
||||
*/
|
||||
@media screen and (-webkit-min-device-pixel-ratio:0) {
|
||||
.toggle-all,
|
||||
.todo-list li .toggle {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.todo-list li .toggle {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.toggle-all {
|
||||
-webkit-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 430px) {
|
||||
.footer {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import '@angular/compiler';
|
||||
import {ɵwhenRendered as whenRendered} from '@angular/core';
|
||||
import {getComponent} from '@angular/core/src/render3';
|
||||
import {withBody} from '@angular/private/testing';
|
||||
import * as path from 'path';
|
||||
|
||||
const PACKAGE = 'angular/packages/core/test/bundling/todo_i18n';
|
||||
const BUNDLES = ['bundle.js', 'bundle.min_debug.js', 'bundle.min.js'];
|
||||
|
||||
describe('functional test for todo i18n', () => {
|
||||
BUNDLES.forEach(bundle => {
|
||||
describe(bundle, () => {
|
||||
it('should render todo i18n', withBody('<todo-app></todo-app>', async() => {
|
||||
require(path.join(PACKAGE, bundle));
|
||||
const toDoAppComponent = getComponent(document.querySelector('todo-app') !);
|
||||
expect(document.body.textContent).toContain('liste de tâches');
|
||||
expect(document.body.textContent).toContain('Démontrer les components');
|
||||
expect(document.body.textContent).toContain('Démontrer NgModules');
|
||||
expect(document.body.textContent).toContain('4 tâches restantes');
|
||||
expect(document.querySelector('.new-todo') !.getAttribute('placeholder'))
|
||||
.toEqual(`Qu'y a-t-il à faire ?`);
|
||||
document.querySelector('button') !.click();
|
||||
await whenRendered(toDoAppComponent);
|
||||
expect(document.body.textContent).toContain('3 tâches restantes');
|
||||
}));
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
declare var global: any;
|
||||
declare var window: any;
|
||||
|
||||
export const translations: {[key: string]: string} = {
|
||||
'What needs to be done?': `Qu'y a-t-il à faire ?`,
|
||||
'{$startHeadingLevel1}todos{$closeHeadingLevel1}{$tagInput}':
|
||||
'{$startHeadingLevel1}liste de tâches{$closeHeadingLevel1}{$tagInput}',
|
||||
'{VAR_PLURAL, plural, =1 {item left} other {items left}}':
|
||||
'{VAR_PLURAL, plural, =1 {tâche restante} other {tâches restantes}}',
|
||||
'{$startTagStrong}{$interpolation}{$closeTagStrong}{$icu}':
|
||||
'{$startTagStrong}{$interpolation}{$closeTagStrong} {$icu}',
|
||||
' Clear completed ': ' Effacer terminés ',
|
||||
'Demonstrate Components': 'Démontrer les components',
|
||||
'Demonstrate Structural Directives': 'Démontrer les directives structurelles',
|
||||
'Demonstrate {$value}': 'Démontrer {$value}',
|
||||
'Demonstrate zoneless change detection': 'Démontrer la détection des changements sans zonejs',
|
||||
'Demonstrate internationalization': `Démontrer l'internationalisation`
|
||||
};
|
||||
|
||||
// Runtime i18n uses Closure goog.getMsg for now
|
||||
// It will be replaced by the runtime service for external people
|
||||
const glob = typeof global !== 'undefined' ? global : window;
|
||||
glob.goog = glob.goog || {};
|
||||
glob.goog.getMsg =
|
||||
glob.goog.getMsg || function(input: string, placeholders: {[key: string]: string} = {}) {
|
||||
if (typeof translations[input] !== 'undefined') { // to account for empty string
|
||||
input = translations[input];
|
||||
}
|
||||
return Object.keys(placeholders).length ?
|
||||
input.replace(/\{\$(.*?)\}/g, (match, key) => placeholders[key] || '') :
|
||||
input;
|
||||
};
|
||||
|
||||
export const localize = goog.getMsg;
|
||||
|
|
@ -16,6 +16,7 @@ declare namespace goog {
|
|||
* as it is sometimes true.
|
||||
*/
|
||||
export const DEBUG: boolean;
|
||||
export const getMsg: (input: string, placeholders?: {[key: string]: string}) => string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -13,11 +13,14 @@
|
|||
* running outside of Closure Compiler. This method will not be needed once runtime translation
|
||||
* service support is introduced.
|
||||
*/
|
||||
export function polyfillGoogGetMsg(): void {
|
||||
export function polyfillGoogGetMsg(translations: {[key: string]: string} = {}): void {
|
||||
const glob = (global as any);
|
||||
glob.goog = glob.goog || {};
|
||||
glob.goog.getMsg =
|
||||
glob.goog.getMsg || function(input: string, placeholders: {[key: string]: string} = {}) {
|
||||
if (typeof translations[input] !== 'undefined') { // to account for empty string
|
||||
input = translations[input];
|
||||
}
|
||||
return Object.keys(placeholders).length ?
|
||||
input.replace(/\{\$(.*?)\}/g, (match, key) => placeholders[key] || '') :
|
||||
input;
|
||||
|
|
|
|||
Loading…
Reference in New Issue