inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Demo project cleanup

Browse Source 
Removed all obsolete stuff from the ng2 demo project
This commit is contained in:
Denys Vuika
2016-04-16 11:14:32 +01:00
parent 549755ecf4
commit 088f365355
35 changed files with 82 additions and 1662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
demo-shell-ng2/app/app.component.html
View File

@@ -1,115 +1,46 @@
<side-menu #elementsMenu title="Elements">
<form-design-toolbar></form-design-toolbar>
</side-menu>
<side-menu #actionMenu title="Actions">
<div class="p-10">
<file-upload accept="{{accept}}" dropaction="inside" droppable="{{droppable}}" target="{{target}}" multi="false" >Choose File</file-upload>
<button type="button" class="btn btn-success btn-block">
Upload <i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-default btn-block">
Folder <i class="fa fa-plus"></i>
</button>
</div>
</side-menu>
<side-menu #propertiesMenu title="Properties" direction="right">
<a href="#">Property 1</a>
<a href="#">Property 2</a>
<a href="#">Property 3</a>
<a href="#">Property 4</a>
<a href="#">Property 5</a>
<a href="#">Property 6</a>
</side-menu>
<app-navbar>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-alfresco-logo" [routerLink]="['Home']">
<img src="app/img/blank.gif">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li [class.active]="actionMenu.isOpen">
<a href="#" (click)="toggleMenu(actionMenu, $event)" class="image-button">
<i class="fa fa-tasks fa-2x"></i>
</a>
</li>
<li [class.active]="isActive(['Home'])">
<a [routerLink]="['Home']">Home <span class="sr-only">(current)</span></a>
</li>
<!--
<li [class.active]="isActive(['Child1', {id: 1}])">
<a [routerLink]="['Child1', {id: 1}]">Child 1</a>
</li>
<li [class.active]="isActive(['Child2'])">
<a [routerLink]="['Child2']">Child 2</a>
</li>
-->
<li [class.active]="isActive(['Page1'])">
<a [routerLink]="['Page1']">Native</a>
</li>
<li [class.active]="isActive(['Page2'])">
<a [routerLink]="['Page2']">WebComponents</a>
</li>
<li [class.active]="isActive(['Forms'])">
<a [routerLink]="['Forms']">Forms</a>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" style="width: 600px;" placeholder="Search files and folders">
</div>
<button type="submit" class="btn btn-default">
<i class="fa fa-search"></i>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</form>
<a class="navbar-brand navbar-alfresco-logo" [routerLink]="['Home']">
<img src="app/img/blank.gif">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li [class.active]="isActive(['Home'])">
<a [routerLink]="['Home']">Home <span class="sr-only">(current)</span></a>
</li>
<li [class.active]="isActive(['Page1'])">
<a [routerLink]="['Page1']">Page 1</a>
</li>
<li [class.active]="isActive(['Page2'])">
<a [routerLink]="['Page2']">Page 2</a>
</li>
</ul>
<!--<div>
<img classname="nav-logo" src="https://angular.io/resources/images/logos/standard/logo-nav@2x.png" height="50" style="float: left;">
</div>-->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a *ngIf="!isLoggedIn()" [routerLink]="['Login']">Login</a></li>
<li><a *ngIf="isLoggedIn()" href="#" (click)="onLogout($event)">Logout</a></li>
</ul>
</li>
</ul>
<ul *ngIf="isActive(['Forms'])" class="nav navbar-nav navbar-right">
<li [class.active]="elementsMenu.isOpen">
<a href="#" (click)="toggleMenu(elementsMenu, $event)" class="image-button">
<i class="fa fa-cubes fa-2x"></i>
</a>
</li>
<li [class.active]="propertiesMenu.isOpen">
<a href="#" (click)="toggleMenu(propertiesMenu, $event)" class="image-button">
<i class="fa fa-edit fa-2x"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a *ngIf="!isLoggedIn()" [routerLink]="['Login']">Login</a></li>
<li><a *ngIf="isLoggedIn()" href="#" (click)="onLogout($event)">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</app-navbar>
</nav>
<!--<router-outlet></router-outlet>-->
<auth-router-outlet></auth-router-outlet>
<!-- Caches -->
<div id="drag-images-cache"></div>

34
demo-shell-ng2/app/app.component.ts
View File

@@ -1,52 +1,30 @@
import {Component} from 'angular2/core';
import {FormService} from './services/form-service';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from "angular2/router";
import {Login} from "./components/login";
import {Authentication} from "./services/authentication";
import {AuthRouterOutlet} from "./components/AuthRouterOutlet";
import {SideMenu} from "./components/core/SideMenu";
import {AppNavBar} from "./components/core/navbar.component";
import {FormDesignToolbar} from "./components/form-design-toolbar.component";
import {SingleComponent} from "./single.component";
import {HomeView} from "./components/home.view";
import {FormsView} from "./components/forms.view";
import {Page1View} from "./components/page1.view";
import {Page2View} from "./components/page2.view";
@Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
directives: [ROUTER_DIRECTIVES, AuthRouterOutlet, SideMenu, AppNavBar, FormDesignToolbar],
providers: [FormService]
directives: [ROUTER_DIRECTIVES, AuthRouterOutlet]
})
@RouteConfig([
{path: '/', name: 'Home', component: SingleComponent, useAsDefault: true},
{path: '/', name: 'Home', component: HomeView, useAsDefault: true},
{path: '/login', name: 'Login', component: Login},
{path: '/forms', name: 'Forms', component: FormsView},
{path: '/page1', name: 'Page1', component: Page1View},
{path: '/page2', name: 'Page2', component: Page2View}
])
export class AppComponent {
target: string = 'http://192.168.99.100:8080/alfresco/service/api/upload';
multi: string = 'true';
accept: string ='image/*';
droppable: boolean = false;
constructor(
public auth: Authentication,
public router: Router
){}
toggleMenu(menu: SideMenu, $event) {
if (menu) {
menu.toggle();
}
if ($event) {
$event.preventDefault();
}
}
isActive(instruction: any[]): boolean {
return this.router.isRouteActive(this.router.generate(instruction));
}
@@ -62,12 +40,4 @@ export class AppComponent {
() => this.router.navigate(['Login'])
);
}
/*
hideMenu(menu: SideMenu) {
if (menu && menu.isOpen) {
menu.close();
}
}
*/
}

47
demo-shell-ng2/app/components/core/SideMenu.ts
View File

@@ -1,47 +0,0 @@
import {Component, Input, ElementRef} from "angular2/core";
@Component({
selector: 'side-menu',
host: {
'(click)': 'onClick($event)',
//'(document:click)': 'onOutsideClick($event)'
},
template: `
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-{{direction}} inline-menu"
[ngClass]="{ 'cbp-spmenu-open': isOpen }">
<h3>
{{title}}
<a href="#" class="menu-close pull-right" (click)="close()">
<i class="glyphicon glyphicon-remove"></i>
</a>
</h3>
<ng-content></ng-content>
</nav>
`
})
export class SideMenu {
@Input() title: string = '';
@Input() direction: string = 'left';
isOpen: boolean = false;
constructor(private el: ElementRef) {
}
onClick(event) {
event.preventDefault();
event.stopPropagation();
}
toggle() {
this.isOpen = !this.isOpen;
}
open() {
this.isOpen = true;
}
close() {
this.isOpen = false;
}
}

24
demo-shell-ng2/app/components/core/navbar.component.ts
View File

@@ -1,24 +0,0 @@
import {Component} from "angular2/core";
@Component({
selector: 'app-navbar',
template: `
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<ng-content></ng-content>
</div>
</nav>
`,
styles: [
`
:host .image-button {
padding-bottom: 10px;
padding-top: 12px;
max-height: 50px;
}
`
]
})
export class AppNavBar {
}

51
demo-shell-ng2/app/components/core/tabs.ts
View File

@@ -1,51 +0,0 @@
import {Component, Input} from 'angular2/core';
@Component({
selector: 'tabs',
template: `
<ul class="nav nav-tabs">
<li *ngFor="#tab of tabs" (click)="selectTab(tab, $event)" [class.active]="tab.active">
<a href="#">{{tab.title}}</a>
</li>
</ul>
<ng-content></ng-content>
`
})
export class Tabs {
tabs: Tab[] = [];
selectTab(tab:Tab, $event) {
this.tabs.forEach(tab => {
tab.active = false;
});
tab.active = true;
if ($event) {
$event.preventDefault();
}
}
addTab(tab:Tab) {
if (this.tabs.length === 0) {
tab.active = true;
}
this.tabs.push(tab);
}
}
@Component({
selector: 'tab',
template: `
<div [hidden]="!active">
<ng-content></ng-content>
</div>
`
})
export class Tab {
@Input('tabTitle') title;
active: Boolean;
constructor(tabs: Tabs) {
tabs.addTab(this);
}
}

96
demo-shell-ng2/app/components/form-design-surface.component.ts
View File

@@ -1,96 +0,0 @@
import {Component, ElementRef, OnInit} from "angular2/core";
declare var dropZone: any;
declare var widgets: any;
@Component({
selector: 'form-design-surface',
template: '<div></div>'
})
export class FormDesignSurface implements OnInit {
private _selectedWidget: Element;
constructor(public elementRef: ElementRef) {
//el.nativeElement.style.backgroundColor = 'yellow';
}
get selectedWidget(): Element {
return this._selectedWidget;
}
set selectedWidget(val: Element) {
if (this.selectedWidget && this.selectedWidget != val) {
this._selectedWidget.classList.remove('selected');
}
this._selectedWidget = val;
if (this._selectedWidget) {
this._selectedWidget.classList.add('selected');
}
}
ngOnInit() {
// Create root container
var container = widgets.container.create();
container.dataset.widgetType = 'container';
this.setupWidget(container);
this.elementRef.nativeElement.appendChild(container);
}
private setupWidget(widget: HTMLElement) {
// initialize all drop placeholders
var dropPlaceholders = widget.querySelectorAll('.drop-zone');
for (var i = 0; i < dropPlaceholders.length; i++) {
var placeholder = dropPlaceholders[i];
var z = new dropZone({
element: placeholder,
onDrop: this.onWidgetDrop.bind(this)
});
}
// initialize clicks
if (widget.dataset['widgetId']) {
widget.addEventListener('mouseup', this.onWidgetMouseUp.bind(this), false);
}
// wire child element clicks
var nested = widget.querySelectorAll('[data-widget-id]');
for (var x = 0; x < nested.length; x++) {
nested[x].addEventListener('mouseup', this.onWidgetMouseUp.bind(this), false);
}
}
private onWidgetMouseUp(e) {
var wid = e.currentTarget.dataset.widgetId;
if (wid) {
console.log('Selected Widget Id: ' + wid);
this.selectedWidget = e.currentTarget;
e.stopPropagation();
}
}
private onWidgetDrop(dz, opts) {
var widgetType = opts.widgetType;
if (widgetType) {
var component = widgets[widgetType];
if (component) {
var widget = component.create();
if (widget) {
widget.dataset.widgetType = widgetType;
this.setupWidget(widget);
// insert widget before drop zone
var container = dz.parentElement;
container.insertBefore(widget, dz);
// create new drop zone
var zone = new dropZone({
onDrop: this.onWidgetDrop.bind(this),
minHeight: '5px'
});
// insert new drop zone before widget
container.insertBefore(zone.element, widget);
}
}
}
}
}

91
demo-shell-ng2/app/components/form-design-toolbar.component.ts
View File

@@ -1,91 +0,0 @@
import {Component, OnInit} from "angular2/core";
import {FormService} from "../services/form-service";
@Component({
selector: 'form-design-toolbar',
providers: [FormService],
//encapsulation: ViewEncapsulation.Native,
styles: [`
.category-header {
color: #555;
padding: 11px;
margin: 0;
background: #e7e7e7;
cursor: default;
font-size: 14px;
font-weight: bold;
}
a.toolbar-item {
cursor: move;
display: block;
color: #777;
font-size: 1.1em;
font-weight: 300;
text-decoration: none;
border-bottom: 1px solid #e7e7e7;
padding: 1em;
}
a.toolbar-item:hover {
color: #555;
background: #f8f8f8;
}
a.toolbar-item:active, a.toolbar-item.active {
color: #fff;
border-color: #428bca;
background-color: #428bca;
}
`],
template: `
<template ngFor #category [ngForOf]="categories">
<h3 class="category-header">{{category.name}}</h3>
<a *ngFor="#widget of category.widgets" class="toolbar-item" attr.data-widget-type="{{widget.type}}" draggable="true"
(dragstart)="onElementDragStart($event)" (dragend)="onElementDragEnd($event)">
<i class="{{widget.iconClass || 'fa fa-puzzle-piece'}}"></i> {{widget.name}}
</a>
</template>
`
})
export class FormDesignToolbar implements OnInit {
categories: any[];
private dragCache;
constructor(
private _formService: FormService
) {}
ngOnInit() {
this.categories = this._formService.getWidgetCategories();
// Stores drag ghost elements
this.dragCache = document.getElementById('drag-images-cache');
}
onElementDragStart(e) {
e.dataTransfer.effectAllowed = 'move';
var widgetType = e.target.dataset.widgetType;
var payload = { "widgetType": widgetType };
e.dataTransfer.setData('text', JSON.stringify(payload));
//var dragImage = getDragImage(widgetType);
var dragImage = this._formService.getDragImage(widgetType);
this.dragCache.appendChild(dragImage);
//e.dataTransfer.setDragImage(dragImage, dragImage.offsetWidth / 2, 0);
e.dataTransfer.setDragImage(dragImage, 0, 0);
e.stopPropagation();
}
onElementDragEnd(e) {
if (this.dragCache) {
this.dragCache.innerHTML = '';
}
}
}

23
demo-shell-ng2/app/components/forms.view.ts
View File

@@ -1,23 +0,0 @@
import {Component} from 'angular2/core';
import {FormDesignSurface} from "./form-design-surface.component";
@Component({
selector: 'forms-view',
template: `
<div class="container" style="width:970px;">
<div class="row">
<div class="col-md-12">
<!-- Design surface -->
<form-design-surface></form-design-surface>
</div>
</div>
</div>
`,
directives: [FormDesignSurface]
})
export class FormsView {
/*
@ViewChild(FormDesignSurface)
private _surface: FormDesignSurface;
*/
}

26
demo-shell-ng2/app/components/home.view.ts
View File

@@ -1,17 +1,35 @@
import {Component} from 'angular2/core';
import {DocumentList} from "./document-list.component";
@Component({
selector: 'home-view',
template: `
<div class="container">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1>Home View</h1>
<div class="col-md-2">
<ul class="list-unstyled">
<li><label><input type="checkbox" [(ngModel)]="thumbnails"> Thumbnails</label></li>
<li><label><input type="checkbox" [(ngModel)]="breadcrumb"> Breadcrumb</label></li>
<li><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></li>
<li><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></li>
</ul>
</div>
<div class="col-md-10">
<alfresco-document-list #list
[thumbnails]="thumbnails"
[breadcrumb]="breadcrumb"
[navigate]="navigation"
[downloads]="downloads">
</alfresco-document-list>
</div>
</div>
</div>
`,
directives: []
directives: [DocumentList]
})
export class HomeView {
thumbnails: boolean = true;
breadcrumb: boolean = false;
navigation: boolean = true;
downloads: boolean = true;
}

5
demo-shell-ng2/app/components/login.ts
View File

@@ -7,6 +7,11 @@ import {Authentication} from "../services/authentication";
selector: 'login',
directives: [ROUTER_DIRECTIVES, FORM_DIRECTIVES],
template: `
<div class="row">
<div class="col-md-4 col-md-offset-4">
<small>Use test:test credentials to log in</small>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form [ngFormModel]="form" (submit)="onSubmit(form.value, $event)">

20
demo-shell-ng2/app/components/page1.view.ts
View File

@@ -1,30 +1,14 @@
import {Component} from "angular2/core";
import {DocumentList} from "./document-list.component";
@Component({
selector: 'page1-view',
template: `
<div class="container">
<div class="row">
<div><label><input type="checkbox" [(ngModel)]="thumbnails"> Thumbnails</label></div>
<div><label><input type="checkbox" [(ngModel)]="breadcrumb"> Breadcrumb</label></div>
<div><label><input type="checkbox" [(ngModel)]="navigation"> Navigation</label></div>
<div><label><input type="checkbox" [(ngModel)]="downloads"> Downloads</label></div>
</div>
<div class="row">
<alfresco-document-list #list
[thumbnails]="thumbnails"
[breadcrumb]="breadcrumb"
[navigate]="navigation"
[downloads]="downloads">
</alfresco-document-list>
<h2>Page 1</h2>
</div>
</div>
`,
directives: [DocumentList]
directives: []
})
export class Page1View {
thumbnails: boolean = true;
breadcrumb: boolean = false;
navigation: boolean = true;
downloads: boolean = true;
}

25
demo-shell-ng2/app/components/page2.view.ts
View File

@@ -4,34 +4,11 @@ import {Component} from "angular2/core";
template: `
<div class="container">
<div class="row">
<input [(ngModel)]="username">
<span>Username: {{username}}</span>
<hello-world [text]="username">
<button>{{'interpolation: ' + username}}</button>
</hello-world>
<hello-world text="test user"></hello-world>
</div>
<div class="row">
<p>
List below is a web component bound to array of items coming from angular.<br>
Add/remove buttons control angular array and web component reacts on changes.
</p>
<simple-list [items]="items" class="list-unstyled"></simple-list>
<button (click)="addItem()">add item</button>
<button (click)="removeItem()">remove item</button>
<h2>Page 2</h2>
</div>
</div>
`
})
export class Page2View {
username: string = 'Unicorn';
items = ['one', 'two', 'three'];
addItem() {
this.items.push(new Date());
}
removeItem() {
this.items.pop();
}
}

116
demo-shell-ng2/app/css/designer.css
View File

@@ -1,116 +0,0 @@
/* Generated by less 2.2.0 */
.drag-image {
left: 0;
position: absolute;
top: 0;
z-index: -1;
}
.drop-zone {
border-radius: 4px;
visibility: visible;
}
.drop-zone.over {
outline: 1px dashed #ddd;
}
.widget-button {
cursor: default;
}
.widget-button[contenteditable="true"] {
cursor: text;
}
.widget-input:read-only {
background-color: #ffffff;
cursor: default;
}
.widget-row {
background-color: #F5F5F5;
border: 1px solid #dddddd;
border-radius: 4px;
margin: 5px 0;
padding: 25px 14px 0;
position: relative;
}
.widget-row:before {
background-color: #F5F5F5;
border: 1px solid #dddddd;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Row";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
.widget-row.selected {
border-color: green;
transition: border-color 0.5s;
}
.widget-row.selected:before {
background-color: green;
border-color: green;
color: white;
}
.widget-col {
background-color: #ffffff;
border: 1px solid #dddddd;
border-radius: 4px;
margin: 15px 0;
padding: 39px 19px 24px;
position: relative;
}
.widget-col:before {
background-color: #F5F5F5;
border: 1px solid #dddddd;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Column";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
.widget-col.selected {
border-color: green;
transition: border-color 0.5s;
}
.widget-col.selected:before {
background-color: green;
border-color: green;
color: white;
}
.widget-container {
border: 1px solid #dddddd;
border-radius: 4px;
margin-left: 0;
margin-top: 10px;
padding: 30px 15px 15px;
position: relative;
width: 100%;
word-wrap: break-word;
}
.widget-container:before {
background-color: #F5F5F5;
border: 1px solid #dddddd;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Container";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
.widget-container.selected {
border-color: green;
transition: border-color 0.5s;
}
.widget-container.selected:before {
background-color: green;
border-color: green;
color: white;
}

201
demo-shell-ng2/app/css/menu.css
View File

@@ -1,201 +0,0 @@
/* General styles for all menus */
.cbp-spmenu {
background-color: #fff;
position: fixed;
border-color: #e7e7e7;
}
.cbp-spmenu > h3 {
color: #555;
font-size: 1.9em;
padding: 11px;
margin: 0;
font-weight: 300;
background: #e7e7e7;
cursor: default;
}
.cbp-spmenu > a {
display: block;
color: #777;
font-size: 1.1em;
font-weight: 300;
text-decoration: none;
}
.cbp-spmenu > a:hover {
color: #555;
background: #f8f8f8;
}
.cbp-spmenu > a:active,
.cbp-spmenu > a.active {
color: #fff;
border-color: #428bca;
background-color: #428bca;
}
/* Orientation-dependent styles for the content of the menu */
.cbp-spmenu-vertical {
width: 240px;
height: 100%;
top: 0;
/*z-index: 1000;*/
z-index: 1040; /* default TBS navbar index is 1030 */
overflow-y: auto; /* vertical scrollbar */
overflow-x: hidden;
}
.cbp-spmenu-vertical > a {
border-bottom: 1px solid #e7e7e7;
padding: 1em;
}
.cbp-spmenu-horizontal {
width: 100%;
height: 150px;
left: 0;
z-index: 1000;
overflow: hidden;
}
.cbp-spmenu-horizontal > h3 {
height: 100%;
width: 20%;
float: left;
}
.cbp-spmenu-horizontal > a {
float: left;
width: 20%;
padding: 0.8em;
border-left: 1px solid #258ecd;
}
/* Vertical menu that slides from the left or right */
.cbp-spmenu-left {
left: -240px;
border-right: 1px solid #e7e7e7;
}
.cbp-spmenu-right {
right: -240px;
border-left: 1px solid #e7e7e7;
}
.cbp-spmenu-left.cbp-spmenu-open {
left: 0;
}
.cbp-spmenu-right.cbp-spmenu-open {
right: 0;
}
/* Horizontal menu that slides from the top or bottom */
.cbp-spmenu-top {
top: -150px;
}
.cbp-spmenu-bottom {
bottom: -150px;
}
.cbp-spmenu-top.cbp-spmenu-open {
top: 0;
}
.cbp-spmenu-bottom.cbp-spmenu-open {
bottom: 0;
}
/* Push classes applied to the body */
.cbp-spmenu-push {
overflow-x: hidden;
position: relative;
left: 0;
}
.cbp-spmenu-push-toright {
left: 240px;
}
.cbp-spmenu-push-toleft {
left: -240px;
}
/* Transitions */
.cbp-spmenu,
.cbp-spmenu-push {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/* Example media queries */
@media screen and (max-width: 55.1875em){
.cbp-spmenu-horizontal {
font-size: 75%;
height: 110px;
}
.cbp-spmenu-top {
top: -110px;
}
.cbp-spmenu-bottom {
bottom: -110px;
}
}
@media screen and (max-height: 26.375em){
.cbp-spmenu-vertical {
font-size: 90%;
width: 190px;
}
.cbp-spmenu-left,
.cbp-spmenu-push-toleft {
left: -190px;
}
.cbp-spmenu-right {
right: -190px;
}
.cbp-spmenu-push-toright {
left: 190px;
}
}
/* Extra stuff */
/* move scrollbar for right menu to the right */
.cbp-spmenu-right { direction: rtl; }
.cbp-spmenu-right > * { direction: ltr; }
/* misc */
a.menu-close {
color: #555;
}
/* Show menu inside main content rather than page */
.inline-menu {
padding-bottom: 50px;
margin-top: 50px;
}
.inline-menu > h3 {
font-size: 14px;
font-weight: bold;
}

12
demo-shell-ng2/app/css/theme/navbar.css
View File

File diff suppressed because one or more lines are too long

148
demo-shell-ng2/app/css/widgets.css
View File

@@ -1,148 +0,0 @@
/* Layout */
.drag-image {
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.drop-zone {
border-radius: 4px;
/*height: 20px;*/
visibility: visible /*!Important*/;
}
.drop-zone.over {
/*height: 100px;*/
outline: 1px dashed #ddd;
}
ul.toolbar {
list-style: none;
margin: 0 0 1em;
padding: 0;
}
ul.toolbar li {
background: #F7F7F7;
border: 1px solid #D9D9D9;
border-radius: 3px;
display: inline-block;
margin: 0 1em 1em 0;
padding: 0.5em 1em;
}
/* Widgets */
/*.widget {}*/
.widget.widget-button {
cursor: default;
}
.widget.widget-button[contentEditable="true"] {
cursor: text;
}
/*.widget.widget-input {}*/
.widget.widget-input:read-only {
background-color: #fff;
cursor: default;
}
/*.widget.widget-input.drag:before {
content: "Input";
}*/
.widget.widget-input:before {
content: "Input";
}
.widget.widget-row {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px;
margin: 5px 0;
padding: 25px 14px 0;
position: relative;
}
.widget.widget-row:before {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Row";
font-size: 12px;
font-weight: bold;
left: -1px;
line-height: 2;
padding: 3px 7px;
position: absolute;
top: -1px;
}
.widget.widget-col {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px;
margin: 15px 0;
padding: 39px 19px 24px;
position: relative;
}
.widget.widget-col:before {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Column";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
.widget.widget-container {
margin-left: 0;
margin-top: 10px;
padding: 30px 15px 15px;
border: 1px solid #DDDDDD;
border-radius: 4px;
position: relative;
width: 100%;
word-wrap: break-word;
}
.widget.widget-container:before {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "Container";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
.widget.widget-row.selected,
.widget.widget-container.selected,
.widget.widget-col.selected {
border-color: green;
transition: border-color .5s;
}
.widget.widget-row.selected:before,
.widget.widget-container.selected:before,
.widget.widget-col.selected:before {
border-color: green;
background-color: green;
color: white;
}

60
demo-shell-ng2/app/js/dropZone.js
View File

@@ -1,60 +0,0 @@
function dropZone(opts) {
var options = opts || {},
element = opts.element || document.createElement('div'),
minHeight = opts.minHeight || '20px',
maxHeight = opts.maxHeight || '100px';
element.className = 'drop-zone';
element.style.height = minHeight;
element.textAlign = 'center';
// Event listener for when the dragged element enters the drop zone.
element.addEventListener('dragenter', function (e) {
this.classList.add('over');
this.style.height = maxHeight;
});
// Event listener for when the dragged element is over the drop zone.
element.addEventListener('dragover', function (e) {
if (e.preventDefault) {
e.preventDefault();
}
e.dataTransfer.dropEffect = 'move';
return false;
});
// Event listener for when the dragged element leaves the drop zone.
element.addEventListener('dragleave', function (e) {
this.classList.remove('over');
this.style.height = minHeight;
});
// Event listener for when the dragged element dropped in the drop zone.
element.addEventListener('drop', function (e) {
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
this.classList.remove('over');
this.style.height = minHeight;
if (typeof opts.onDrop === 'function') {
var dropData = e.dataTransfer.getData('text');
var payload = {};
if (dropData) {
try {
payload = JSON.parse(dropData);
} catch (err) {
payload = {};
}
}
opts.onDrop(this, payload);
}
return false;
});
return {
"element": element
};
}

55
demo-shell-ng2/app/services/form-service.ts
View File

@@ -1,55 +0,0 @@
import {Injectable} from 'angular2/core';
// TODO: move to some namespace
declare var widgets: any;
@Injectable()
export class FormService {
getWidgetCategories() {
var result = [];
var categories = {};
var keys = Object.keys(widgets);
keys.forEach(function (key) {
var w = widgets[key];
var categoryName = w.category || 'Misc';
var category = categories[categoryName];
if (!category) {
category = {
name: categoryName,
widgets: []
};
categories[categoryName] = category;
//result.push(category);
}
category.widgets.push({
type: key,
name: w.name,
iconClass: w.iconClass
});
});
Object.keys(categories).sort().forEach(function (key) {
result.push(categories[key]);
});
return result;
}
getDragImage(widgetType: string): Element {
var w = widgets[widgetType];
// try getting exported drag image
if (w && typeof w.getDragImage === 'function') {
var img = w.getDragImage();
if (img) {
return img;
}
}
// create default drag image
var dragImage = document.createElement('button');
dragImage.className = 'btn btn-default drag-image';
dragImage.textContent = w.name;
dragImage.style.minWidth = '100px';
return dragImage;
}
}

14
demo-shell-ng2/app/single.component.ts
View File

@@ -1,14 +0,0 @@
import {Component} from 'angular2/core';
@Component({
selector: 'my-app',
templateUrl: 'app/template/single.component.html'
})
export class SingleComponent {
target: string = 'http://192.168.99.100:8080/alfresco/service/api/upload';
multi: string = 'true';
accept: string ='image/*';
droppable: boolean = false;
}

8
demo-shell-ng2/app/template/single.component.html
View File

@@ -1,8 +0,0 @@
<div>
<div>
<file-upload accept="{{accept}}" droppable="{{droppable}}" target="{{target}}" multi="false" ></file-upload>
</div>
<div >
<alfresco-file-list></alfresco-file-list>
</div>
</div>

69
demo-shell-ng2/app/web-components/helloworld/helloworld.html
View File

@@ -1,69 +0,0 @@
<!-- Defines element markup -->
<template>
<p>Hello <strong></strong> :)</p>
<content></content>
</template>
<script>
(function (window, document, undefined) {
// Refers to the "importer", which is index.html
var thatDoc = document;
// Refers to the "importee", which is src/hello-world.html
var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
// Gets content from <template>
var template = thisDoc.querySelector('template').content;
// Creates an object based in the HTML Element prototype
var _text = '_text';
var MyElementProto = Object.create(HTMLElement.prototype, {
text: {
get: function() { return _text; },
set: function(newValue) {
_text = newValue;
this.setText(newValue);
}
}
});
// Fires when an instance of the element is created
MyElementProto.createdCallback = function() {
// Creates the shadow root
var shadowRoot = this.createShadowRoot();
// Adds a template clone into shadow root
var clone = thatDoc.importNode(template, true);
shadowRoot.appendChild(clone);
// Caches <strong> DOM query
this.strong = shadowRoot.querySelector('strong');
// Checks if the "text" attribute has been overwritten
/*
if (this.hasAttribute('text')) {
var text = this.getAttribute('text');
this.setText(text);
}
else {
this.setText(this.text);
}
*/
};
// Fires when an attribute was added, removed, or updated
MyElementProto.attributeChangedCallback = function(attr, oldVal, newVal) {
if (attr === 'text') {
this.setText(newVal);
}
};
MyElementProto.setText = function(val) {
_text = val;
this.strong.textContent = val;
};
// Registers <hello-world> in the main document
window.MyElement = thatDoc.registerElement('hello-world', {
prototype: MyElementProto
});
})(window, document);
</script>

87
demo-shell-ng2/app/web-components/simple-list/simple-list.html
View File

@@ -1,87 +0,0 @@
<script src="/bower_components/underscore/underscore-min.js"></script>
<script src="/bower_components/underscore-observable-arrays/underscore-observe.js"></script>
<!-- Defines element markup -->
<template>
<ul id="list"></ul>
</template>
<script>
(function (window, document, undefined) {
// Refers to the "importer", which is index.html
var thatDoc = document;
// Refers to the "importee", which is src/hello-world.html
var thisDoc = (thatDoc._currentScript || thatDoc.currentScript).ownerDocument;
// Gets content from <template>
var template = thisDoc.querySelector('template').content;
var _items;
// Creates an object based in the HTML Element prototype
var element = Object.create(HTMLElement.prototype, {
items: {
get: function() { return _items; },
set: function(newValue) {
_items = newValue || [];
/*
var self = this;
_items.push = function () {
Array.prototype.push.apply(this, arguments);
self._render();
};
*/
var self = this;
// TODO: unobserve for old _items value if needed
_.observe(_items, function(new_array, old_array) {
_items = new_array || [];
self._render();
});
this._render();
}
}
});
// Fires when an instance of the element is created
element.createdCallback = function() {
// Creates the shadow root
var shadowRoot = this.createShadowRoot();
// Adds a template clone into shadow root
var clone = thatDoc.importNode(template, true);
shadowRoot.appendChild(clone);
this.list = shadowRoot.getElementById('list');
// Caches <strong> DOM query
//this.strong = shadowRoot.querySelector('strong');
this._render()
};
// Fires when an attribute was added, removed, or updated
element.attributeChangedCallback = function(attr, oldVal, newVal) {
// if (attr === 'text') {
// this.setText(newVal);
// }
};
element._render = function() {
this.list.innerHTML = '';
if (_items && _items.length > 0) {
for (var i = 0; i < _items.length; i++) {
var item = document.createElement('li');
item.textContent = _items[i];
this.list.appendChild(item);
}
}
};
// Registers <hello-world> in the main document
window.SimpleList = thatDoc.registerElement('simple-list', {
prototype: element
});
})(window, document);
</script>

16
demo-shell-ng2/app/widgets/template.js
View File

@@ -1,16 +0,0 @@
var widgets = (function (widgets) {
widgets.COMPONENT = {
create: createComponent,
name: 'COMPONENT NAME',
iconClass: 'fa fa-puzzle-piece'
};
function createComponent() {
var widget = document.createElement('button');
widget.textContent = 'Button';
widget.classList.add('btn', 'btn-default', 'widget', 'widget-button');
return widget;
}
return widgets;
})(widgets || {});

30
demo-shell-ng2/app/widgets/widgetUtils.js
View File

@@ -1,30 +0,0 @@
var widgetUtils = (function (utils) {
utils.col = function(className) {
var col = document.createElement('div');
col.dataset.widgetId = utils.uid();
col.classList.add(className, 'widget', 'widget-col');
var dropPlaceholder = document.createElement('div');
dropPlaceholder.className = 'drop-zone';
col.appendChild(dropPlaceholder);
return col;
};
utils.getRandomColor = function () {
var color = '#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);
return color;
};
utils.uid = (function(){
var id = 0;
return function(){
if (arguments[0] === 0) {
id = 0;
}
return id++;
};
})();
return utils;
})(widgetUtils || {});

95
demo-shell-ng2/app/widgets/widgets-button.js
View File

@@ -1,95 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.button = {
create: createComponent,
name: 'Button',
iconClass: 'fa fa-square',
category: 'Components'
};
function createComponent() {
var widget = document.createElement('button');
widget.textContent = 'Button';
widget.classList.add('btn', 'btn-default', 'widget', 'widget-button');
widget.dataset.widgetId = utils.uid();
widget.addEventListener('dblclick', function (e) {
if (this.contentEditable !== 'true') {
this.dataset.originalValue = this.textContent;
}
this.contentEditable = true;
selectElementContents(this);
});
widget.addEventListener('blur', function (e) {
if (!this.textContent) {
this.textContent = 'Button';
}
this.contentEditable = false;
});
widget.addEventListener('input', function (e) {
// when button has no text - place the stub and autoselect it
if (!this.textContent) {
this.textContent = 'Button';
selectElementContents(this);
}
});
widget.addEventListener('keydown', function (e) {
// special handling of 'spacebar' key
if (e.keyCode == 32) {
insertHtmlAtCursor('&nbsp;');
e.stopPropagation();
e.preventDefault();
return false;
}
// 'Enter' key
if (e.keyCode == 13) {
e.stopPropagation();
e.preventDefault();
this.blur();
return false;
}
// 'Esc' key
if (e.keyCode == 27) {
var originalValue = this.dataset.originalValue || 'Button';
this.textContent = originalValue;
delete this.dataset.originalValue;
this.blur();
return false;
}
});
return widget;
}
// TODO: move to shared library
function selectElementContents(el) {
var range = document.createRange();
range.selectNodeContents(el);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
// TODO: move to shared library
function insertHtmlAtCursor(html) {
var range, node;
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(html);
range.insertNode(node);
window.getSelection().collapseToEnd();
window.getSelection().modify('move', 'forward', 'character');
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(html);
document.selection.collapseToEnd();
document.selection.modify('move', 'forward', 'character');
}
}
return widgets;
})(widgets || {}, widgetUtils);

18
demo-shell-ng2/app/widgets/widgets-col-12.js
View File

@@ -1,18 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.col12 = {
create: createComponent,
name: 'column 12',
iconClass: 'fa fa-puzzle-piece',
category: 'Grid system'
};
function createComponent() {
var widget = document.createElement('div');
widget.dataset.widgetId = utils.uid();
widget.classList.add('row', 'widget', 'widget-row');
widget.appendChild(utils.col('col-md-12'));
return widget;
}
return widgets;
})(widgets || {}, widgetUtils);

20
demo-shell-ng2/app/widgets/widgets-col-2x6x4.js
View File

@@ -1,20 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.col2x6x4 = {
create: createComponent,
name: 'column 2:6:4',
iconClass: 'fa fa-puzzle-piece',
category: 'Grid system'
};
function createComponent() {
var widget = document.createElement('div');
widget.dataset.widgetId = utils.uid();
widget.classList.add('row', 'widget', 'widget-row');
widget.appendChild(utils.col('col-md-2'));
widget.appendChild(utils.col('col-md-6'));
widget.appendChild(utils.col('col-md-4'));
return widget;
}
return widgets;
})(widgets || {}, widgetUtils);

20
demo-shell-ng2/app/widgets/widgets-col-4x4x4.js
View File

@@ -1,20 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.col4x4x4 = {
create: createComponent,
name: 'column 4:4:4',
iconClass: 'fa fa-puzzle-piece',
category: 'Grid system'
};
function createComponent() {
var widget = document.createElement('div');
widget.dataset.widgetId = utils.uid();
widget.classList.add('row', 'widget', 'widget-row');
widget.appendChild(utils.col('col-md-4'));
widget.appendChild(utils.col('col-md-4'));
widget.appendChild(utils.col('col-md-4'));
return widget;
}
return widgets;
})(widgets || {}, widgetUtils);

19
demo-shell-ng2/app/widgets/widgets-col-6x6.js
View File

@@ -1,19 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.col6x6 = {
create: createComponent,
name: 'column 6:6',
iconClass: 'fa fa-puzzle-piece',
category: 'Grid system'
};
function createComponent() {
var widget = document.createElement('div');
widget.dataset.widgetId = utils.uid();
widget.classList.add('row', 'widget', 'widget-row');
widget.appendChild(utils.col('col-md-6'));
widget.appendChild(utils.col('col-md-6'));
return widget;
}
return widgets;
})(widgets || {}, widgetUtils);

20
demo-shell-ng2/app/widgets/widgets-col-8x4.js
View File

@@ -1,20 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.col8x4 = {
create: createComponent,
name: 'column 8:4',
iconClass: 'fa fa-puzzle-piece',
category: 'Grid system'
};
function createComponent() {
var widget = document.createElement('div');
widget.dataset.widgetId = utils.uid();
widget.classList.add('row', 'widget', 'widget-row');
widget.appendChild(utils.col('col-md-8'));
widget.appendChild(utils.col('col-md-4'));
return widget;
}
return widgets;
})(widgets || {}, widgetUtils);

22
demo-shell-ng2/app/widgets/widgets-container.js
View File

@@ -1,22 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.container = {
create: createComponent,
name: 'container',
iconClass: 'fa fa-puzzle-piece'
};
function createComponent() {
var widget = document.createElement('div');
widget.className = 'container widget widget-container';
widget.dataset.widgetId = utils.uid();
//widget.style.borderColor = utils.getRandomColor();
var dropPlaceholder = document.createElement('div');
dropPlaceholder.className = 'drop-zone';
widget.appendChild(dropPlaceholder);
return widget;
}
return widgets;
})(widgets || {}, widgetUtils);

71
demo-shell-ng2/app/widgets/widgets-input.js
View File

@@ -1,71 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.input = {
create: createComponent,
name: 'Input',
iconClass: 'fa fa-file-text-o',
category: 'Components',
getDragImage: getDragImage
};
function createComponent() {
var widget = document.createElement('input');
widget.type = 'text';
widget.readOnly = true;
widget.classList.add('form-control', 'widget', 'widget-input');
widget.dataset.widgetId = utils.uid();
return widget;
}
/*function getDragImage() {
var container = document.createElement('div');
container.style.width = '200px';
var label = document.createElement('label');
label.textContent = "Input";
label.style.display = 'block';
label.style.margin = '0';
label.style.fontSize = '12px';
container.appendChild(label);
var element = document.createElement('input');
element.className = 'form-control';
element.style.display = 'block';
container.appendChild(element);
return container;
}*/
function getDragImage() {
var element = document.createElement('input');
element.style.width = '200px';
element.className = 'form-control';
return element;
}
// TODO: move to shared library
function moveCaretToEnd(el) {
if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length;
} else if (typeof el.createTextRange != "undefined") {
el.focus();
var range = el.createTextRange();
range.collapse(false);
range.select();
}
}
// TODO: move to shared library
function setCursorPosition (element, pos) {
if (element.setSelectionRange) {
element.setSelectionRange(pos, pos);
} else if (element.createTextRange) {
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
return widgets;
})(widgets || {}, widgetUtils);

18
demo-shell-ng2/app/widgets/widgets-row.js
View File

@@ -1,18 +0,0 @@
var widgets = (function (widgets, utils) {
widgets.row = {
create: createComponent,
name: 'row',
iconClass: 'fa fa-puzzle-piece',
category: 'Grid system'
};
function createComponent() {
var widget = document.createElement('div');
widget.classList.add('row', 'widget', 'widget-row');
widget.dataset.widgetId = utils.uid();
widget.appendChild(utils.col('col-md-12'));
return widget;
}
return widgets;
})(widgets || {}, widgetUtils);

4
demo-shell-ng2/bower.json
View File

@@ -31,8 +31,6 @@
"paper-toolbar": "~1.1.4",
"iron-signals": "~1.0.3",
"paper-item": "~1.1.4",
"paper-dropdown-menu": "~1.1.3",
"underscore": "^1.8.3",
"underscore-observable-arrays": "*"
"paper-dropdown-menu": "~1.1.3"
}
}

28
demo-shell-ng2/index.html
View File

@@ -5,21 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="app/css/menu.css" rel="stylesheet">
<link href="app/css/widgets.css" rel="stylesheet">
<link href="app/css/app.css" rel="stylesheet">
<link href="app/css/designer.css" rel="stylesheet">
<!-- Custom theme -->
<link rel="stylesheet" href="app/css/theme/navbar.css">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!--ALFRESCO CUSTOM WEBCOMPONENTS-->
<link rel="import" href="webcomponents/file-upload/file-upload.html">
<link rel="import" href="webcomponents/alfresco-file-list/src/alfresco-file-list.html">
<link rel="import" href="app/web-components/helloworld/helloworld.html">
<link rel="import" href="app/web-components/simple-list/simple-list.html">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
@@ -34,17 +23,6 @@
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app/js/dropZone.js"></script>
<script src="app/widgets/widgetUtils.js"></script>
<script src="app/widgets/widgets-container.js"></script>
<script src="app/widgets/widgets-button.js"></script>
<script src="app/widgets/widgets-input.js"></script>
<script src="app/widgets/widgets-row.js"></script>
<script src="app/widgets/widgets-col-12.js"></script>
<script src="app/widgets/widgets-col-6x6.js"></script>
<script src="app/widgets/widgets-col-8x4.js"></script>
<script src="app/widgets/widgets-col-4x4x4.js"></script>
<script src="app/widgets/widgets-col-2x6x4.js"></script>
<!-- 2. Configure SystemJS -->
<script>
@@ -61,10 +39,8 @@
</script>
</head>
<!-- 3. Display the application -->
<body class="cbp-spmenu-push">
<template is="dom-bind" id="alfresco-app">
<iron-signals on-iron-signal-uploaded="uploadedSignal"></iron-signals>
</template>
<body>
<my-app>Loading...</my-app>
</body>