Skip to content

Commit

Permalink
user x-drawer-panel2
Browse files Browse the repository at this point in the history
  • Loading branch information
@frankiefu
frankiefu committed Nov 12, 2014
1 parent ad11dbc commit 2bcbe27
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 76 deletions.
15 changes: 1 addition & 14 deletions projects/pica/elements/pi-app-style.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,8 @@
cursor: pointer;
}
#drawer {
position: absolute;
left: -256px;
top: 0;
width: 256px;
bottom: 0;
background-color: white;
z-index: 5;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
transition: left ease-out 200ms;
}
#drawer[open] {
left: 0;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
[header] {
height: 96px;
Expand Down Expand Up @@ -62,9 +52,6 @@

/* main */

#main x-repeater {
display: flex !important;
}
#main x-repeater > * {
display: inline-flex;
flex-direction: column;
Expand Down
123 changes: 62 additions & 61 deletions projects/pica/elements/pi-app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<link rel="import" href="../../../elements/x-repeater.html">
<link rel="import" href="../../../elements/x-selector.html">
<link rel="import" href="../../../elements/x-pages.html">
<link rel="import" href="../../../elements/x-drawer-panel2.html">
<link rel="import" href="x-route.html">
<link rel="import" href="x-style.html">
<link rel="import" href="google-apis/google-feeds.html">
Expand All @@ -18,70 +19,74 @@
<x-style ref="pi-app"></x-style>
<x-route route="{{page}}"></x-route>

<div id="drawer" vertical layout>
<x-drawer-panel2 id="drawerPanel" flex>

<div drawer id="drawer" vertical layout>

<div flex none header>
<div horizontal layout>
<span flex>Pica</span>
<div flex none header>
<div horizontal layout>
<span flex>Pica</span>
</div>
</div>
</div>

<div flex scroll vertical layout menu on-click="closeDrawerAction">
<item on-click="topicsAction"><x-icon icon="apps"></x-icon>Topics</item>
<item><x-icon icon="explore"></x-icon>Explore</item>
<item><x-icon icon="account-box"></x-icon>Accounts</item>
</div>

</div>

<x-pages flex vertical layout selected="{{page}}">

<div id="main" flex vertical layout>
<div flex none header horizontal layout>
<x-icon icon="menu" on-click="openDrawerAction"></x-icon>
<span flex>Topics</span>
<x-icon icon="refresh"></x-icon>
<x-icon icon="more-vert"></x-icon>
</div>
<div flex scroll style="overflow-y: scroll;">
<x-selector id="topicsSelector" selectable="pi-topic-item" on-click="topicAction">
<x-repeater id="topics" horizontal center-justified wrap layout kind="pi-topic-item" items="{{topics}}" xon-click="topicAction"></x-repeater>
</x-selector>

<div flex scroll vertical layout menu on-click="closeDrawerAction">
<item on-click="topicsAction"><x-icon icon="apps"></x-icon>Topics</item>
<item><x-icon icon="explore"></x-icon>Explore</item>
<item><x-icon icon="account-box"></x-icon>Accounts</item>
</div>

</div>

<div id="topic" flex vertical layout>
<div flex none header horizontal layout>
<x-icon icon="back" on-click="topicsAction"></x-icon>
<span flex>Topic</span>
<x-icon icon="apps" on-click="toggleLayoutAction"></x-icon>
<x-icon icon="refresh"></x-icon>
<x-icon icon="more-vert"></x-icon>
</div>
<div flex scroll>
<x-repeater id="articles" kind="pi-item" items="{{items}}" on-click="articleAction"></x-repeater>

<x-pages main flex vertical layout selected="{{page}}">

<div id="main" flex vertical layout>
<div flex none header horizontal layout>
<x-icon icon="menu" x-drawer-toggle></x-icon>
<span flex>Topics</span>
<x-icon icon="refresh"></x-icon>
<x-icon icon="more-vert"></x-icon>
</div>
<div flex scroll style="overflow-y: scroll;">
<x-selector id="topicsSelector" selectable="pi-topic-item" on-click="topicAction">
<x-repeater id="topics" horizontal center-justified wrap layout kind="pi-topic-item" items="{{topics}}" xon-click="topicAction"></x-repeater>
</x-selector>
</div>
</div>
</div>

<div id="article" flex vertical center layout>
<div flex none self-stretch header horizontal layout>
<x-icon icon="back" on-click="topicAction"></x-icon>
<span flex>Article</span>
<x-icon icon="refresh"></x-icon>
<x-icon icon="more-vert"></x-icon>

<div id="topic" flex vertical layout>
<div flex none header horizontal layout>
<x-icon icon="back" on-click="topicsAction"></x-icon>
<span flex>Topic</span>
<x-icon icon="apps" on-click="toggleLayoutAction"></x-icon>
<x-icon icon="refresh"></x-icon>
<x-icon icon="more-vert"></x-icon>
</div>
<div flex scroll vertical layout>
<x-repeater id="articles" kind="pi-item" items="{{items}}" on-click="articleAction"></x-repeater>
</div>
</div>
<div content flex vertical layout>
<a-title>Google's CEO is pushing for hyper-efficient airports and other moonshots</a-title>
<a-byline>by Chris Velazco on 9/17/2014 9:25:00 PM</a-byline>
<img src="http://o.aolcdn.com/hss/storage/midas/106f00785d3ab8a0310e90cb9f96aef8/200775546/larry-page_thumbnail.jpg">
<a-text>The Google we already know controls our pockets, makes sense
of the web and wants to understand our behavior. That one company
already has such extensive reach is pretty crazy, which also raises
a weighty question: What would a Google 2.0 look like? ...</a-text>

<div id="article" flex vertical center layout>
<div flex none self-stretch header horizontal layout>
<x-icon icon="back" on-click="topicAction"></x-icon>
<span flex>Article</span>
<x-icon icon="refresh"></x-icon>
<x-icon icon="more-vert"></x-icon>
</div>
<div content flex vertical layout>
<a-title>Google's CEO is pushing for hyper-efficient airports and other moonshots</a-title>
<a-byline>by Chris Velazco on 9/17/2014 9:25:00 PM</a-byline>
<img src="http://o.aolcdn.com/hss/storage/midas/106f00785d3ab8a0310e90cb9f96aef8/200775546/larry-page_thumbnail.jpg">
<a-text>The Google we already know controls our pockets, makes sense
of the web and wants to understand our behavior. That one company
already has such extensive reach is pretty crazy, which also raises
a weighty question: What would a Google 2.0 look like? ...</a-text>
</div>
</div>
</div>

</x-pages>

</x-pages>
</x-drawer-panel2>

</template>

Expand All @@ -97,13 +102,9 @@
this.topics = mock.items;
this.items = mock.technology;
this.quilt = false;
//populateFeeds();
},
openDrawerAction: function( ){
this.$.drawer.setAttribute('open', '');
},
closeDrawerAction: function() {
this.$.drawer.removeAttribute('open');
this.$.drawerPanel.closeDrawer();
},
topicsAction: function() {
this.page = 0;
Expand Down
1 change: 0 additions & 1 deletion projects/pica/elements/pi-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@
},
computeBackground: function(item) {
return item && item.thumb && 'url(assets/' + item.thumb + ')';
//return item && item.thumb && 'url(' + item.thumb + ')';
},
backgroundChanged: function() {
this.$.thumb.style.backgroundImage = this.background;
Expand Down

0 comments on commit 2bcbe27

Please sign in to comment.