This repository has been archived by the owner on Mar 13, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add 'basic-app' experimental element(s)
- Loading branch information
Scott J. Miles
committed
Oct 3, 2013
1 parent
2a4dc0e
commit 022cdb3
Showing
4 changed files
with
251 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| <!doctype html> | ||
| <html> | ||
| <head> | ||
| <title>polymer-ui-basic-app</title> | ||
| <script src="../../polymer/polymer.js"></script> | ||
| <link rel="import" href="polymer-ui-basic-app.html"> | ||
| <link rel="import" href="../elements.html"> | ||
| <style> | ||
| body { | ||
| font-family: Neue Helvetica, Roboto, Arial; | ||
| } | ||
| [main] { | ||
| padding: 8px; | ||
| position: absolute; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| border: 3px solid magenta; | ||
| } | ||
| [navigation] { | ||
| width: 256px; | ||
| height: 100%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h2>basic-app</h2> | ||
| <polymer-ui-basic-app theme="polymer-ui-dark-theme" style="display: block; position: relative; height: 400px;"> | ||
|
|
||
| <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button> | ||
| <polymer-ui-icon-button tool icon="marker"></polymer-ui-icon-button> | ||
| <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button> | ||
| <polymer-ui-menu-button tool icon="dots" Xtheme="polymer-ui-light-theme"> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu-button> | ||
|
|
||
| <div main> | ||
| Content. | ||
| </div> | ||
|
|
||
| <polymer-ui-sidebar-menu navigation label="Navigimation" offscreen="basement"> | ||
| <polymer-ui-menu> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu> | ||
| </polymer-ui-sidebar-menu> | ||
|
|
||
| </polymer-ui-basic-app> | ||
|
|
||
| <h2>basic-app2 (same content)</h2> | ||
| <polymer-ui-basic-app2 theme="polymer-ui-dark-theme" style="display: block; position: relative; height: 400px;"> | ||
|
|
||
| <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button> | ||
| <polymer-ui-icon-button tool icon="marker"></polymer-ui-icon-button> | ||
| <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button> | ||
| <polymer-ui-menu-button tool icon="dots" Xtheme="polymer-ui-light-theme"> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu-button> | ||
|
|
||
| <div main> | ||
| Content. | ||
| </div> | ||
|
|
||
| <polymer-ui-sidebar-menu navigation label="Navigimation" offscreen="basement"> | ||
| <polymer-ui-menu> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu> | ||
| </polymer-ui-sidebar-menu> | ||
|
|
||
| </polymer-ui-basic-app2> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| <x-meta id="polymer-ui-basic-app" label="Basic App Scaffold" isContainer> | ||
| <template> | ||
| <polymer-ui-basic-app theme="polymer-ui-dark-theme" style="height: 400px; width: 500px;"> | ||
| <polymer-ui-icon-button tool icon="account"></polymer-ui-icon-button> | ||
| <polymer-ui-icon-button tool icon="marker"></polymer-ui-icon-button> | ||
| <polymer-ui-menu-button tool icon="dots"> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu-button> | ||
| <div main style="padding: 8px;"> | ||
| Content. | ||
| </div> | ||
| <polymer-ui-sidebar-menu navigation label="Navigimation" offscreen="basement" style="width: 256px; height: 100%;"> | ||
| <polymer-ui-menu> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu> | ||
| </polymer-ui-sidebar-menu> | ||
| </polymer-ui-basic-app> | ||
| </template> | ||
| <template id="imports"> | ||
| <link rel="import" href="polymer-ui-basic-app.html"> | ||
| <link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html"> | ||
| <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html"> | ||
| </template> | ||
| </x-meta> | ||
|
|
||
| <x-meta id="polymer-ui-basic-app2" label="Basic App Scaffold 2" isContainer> | ||
| <template> | ||
| <polymer-ui-basic-app2 theme="polymer-ui-light-theme" style="height: 400px; width: 400px;"> | ||
| <polymer-ui-icon-button tool icon="briefcase"></polymer-ui-icon-button> | ||
| <polymer-ui-icon-button tool icon="sort"></polymer-ui-icon-button> | ||
| <polymer-ui-menu-button tool icon="dots"> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu-button> | ||
| <div main style="padding: 8px;"> | ||
| Content. | ||
| </div> | ||
| <polymer-ui-sidebar-menu theme="polymer-ui-dark-theme" navigation label="Actions" offscreen="basement" style="width: 200px; height: 100%;"> | ||
| <polymer-ui-menu> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| <polymer-ui-menu-item>Item</polymer-ui-menu-item> | ||
| </polymer-ui-menu> | ||
| </polymer-ui-sidebar-menu> | ||
| </polymer-ui-basic-app2> | ||
| </template> | ||
| <template id="imports"> | ||
| <link rel="import" href="polymer-ui-basic-app.html"> | ||
| <link rel="import" href="../polymer-ui-menu-item/polymer-ui-menu-item.html"> | ||
| <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html"> | ||
| </template> | ||
| </x-meta> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /* | ||
| Copyright 2013 The Polymer Authors. All rights reserved. | ||
| Use of this source code is governed by a BSD-style | ||
| license that can be found in the LICENSE file. | ||
| */ | ||
| @host { | ||
| display: block; | ||
| position: relative; | ||
| } | ||
|
|
||
| .animate { | ||
| -webkit-transition: left ease-in 0.2s; | ||
| transition: left ease-in 0.2s; | ||
| } | ||
|
|
||
| polymer-ui-sidebar-menu { | ||
| width: 200px; | ||
| } | ||
|
|
||
| section { | ||
| background-color: white; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| <!-- | ||
| Copyright 2013 The Polymer Authors. All rights reserved. | ||
| Use of this source code is governed by a BSD-style | ||
| license that can be found in the LICENSE file. | ||
| --> | ||
|
|
||
| <!-- | ||
| /** | ||
| * Polymer UI Elements | ||
| * | ||
| * @module Polymer UI Elements | ||
| */ | ||
| /** | ||
| * @class polymer-ui-basic-app | ||
| */ | ||
| --> | ||
|
|
||
| <link rel="import" href="../../polymer-elements/polymer-grid-layout/polymer-grid-layout.html"> | ||
| <link rel="import" href="../polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html"> | ||
| <link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html"> | ||
| <link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html"> | ||
|
|
||
| <polymer-element name="polymer-ui-basic-app" attributes=""> | ||
| <template> | ||
| <link rel="stylesheet" href="polymer-ui-basic-app.css"> | ||
| <polymer-grid-layout id="grid"></polymer-grid-layout> | ||
| <section class="animate" offscreen="basement"> | ||
| <content select="[navigation]"></content> | ||
| </section> | ||
| <polymer-ui-toolbar class="animate"> | ||
| <polymer-ui-icon-button icon="menu" on-tap="menuActionTap" active="{{menuActive}}"></polymer-ui-icon-button> | ||
| <content select="[tool]"></content> | ||
| </polymer-ui-toolbar> | ||
| <section class="animate"> | ||
| <content select="*"></content> | ||
| </section> | ||
| </template> | ||
| <script> | ||
| (function() { | ||
| Polymer('polymer-ui-basic-app', { | ||
| menuActive: false, | ||
| layouts: { | ||
| main:[ | ||
| [2, 2], | ||
| [3, 3], | ||
| [3, 3] | ||
| ], | ||
| menu: [ | ||
| [1, 2, 2], | ||
| [1, 3, 3], | ||
| [1, 3, 3] | ||
| ] | ||
| }, | ||
| ready: function() { | ||
| this.$.grid.layout = this.layouts.main; | ||
| }, | ||
| menuActionTap: function() { | ||
| this.menuActive = !this.menuActive; | ||
| Platform.flush(); | ||
| }, | ||
| menuActiveChanged: function() { | ||
| this.$.grid.layout = this.layouts[this.menuActive ? 'menu' : 'main']; | ||
| } | ||
| }); | ||
| })(); | ||
| </script> | ||
| </polymer-element> | ||
|
|
||
| <polymer-element name="polymer-ui-basic-app2" attributes=""> | ||
| <template> | ||
| <link rel="stylesheet" href="polymer-ui-basic-app.css"> | ||
| <polymer-grid-layout id="grid"></polymer-grid-layout> | ||
| <section> | ||
| <content select="[navigation]"></content> | ||
| </section> | ||
| <polymer-ui-toolbar class="animate"> | ||
| <content select="[tool]"></content> | ||
| </polymer-ui-toolbar> | ||
| <section class="animate"> | ||
| <content select="[main]"></content> | ||
| </section> | ||
| </template> | ||
| <script> | ||
| (function() { | ||
| Polymer('polymer-ui-basic-app2', { | ||
| menuActive: false, | ||
| layouts: { | ||
| main:[ | ||
| [2, 2, 1], | ||
| [3, 3, 1], | ||
| [3, 3, 1] | ||
| ] | ||
| }, | ||
| ready: function() { | ||
| this.$.grid.layout = this.layouts.main; | ||
| }, | ||
| }); | ||
| })(); | ||
| </script> | ||
| </polymer-element> |