Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
Merge pull request #3 from Polymer/master
Browse files Browse the repository at this point in the history
6/17 master -> stable
  • Loading branch information
dfreedm committed Jun 17, 2013
2 parents 9c88633 + 88916c8 commit e7f9a65
Show file tree
Hide file tree
Showing 27 changed files with 479 additions and 71 deletions.
4 changes: 2 additions & 2 deletions polymer-ui-clock/polymer-ui-clock.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,12 +26,12 @@
seconds: -1,
minutes: -1,
hours: -1,
insertedCallback: function() {
inserted: function() {
// when we are inserted into DOM, start watching the time
this.updateTime();
this.interval = setInterval(this.updateTime.bind(this), 1000);
},
removedCallback: function() {
removed: function() {
// when we are removed from DOM, stop watching the time
clearInterval(this.interval);
},
Expand Down
4 changes: 2 additions & 2 deletions polymer-ui-icon/polymer-ui-icon.css
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ license that can be found in the LICENSE file.
background-repeat: no-repeat;
}

#icon.polymer-ui-light-theme {
#icon.polymer-ui-dark-icon, #icon.polymer-ui-light-theme {
background-position: -24px 0;
}

#icon.polymer-ui-dark-theme {
#icon.polymer-ui-light-icon, #icon.polymer-ui-dark-theme {
background-position: -72px 0;
}

Expand Down
8 changes: 4 additions & 4 deletions polymer-ui-icon/polymer-ui-icon.html
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@
*/
-->
<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
<element name="polymer-ui-icon" extends="polymer-ui-theme-aware" attributes="src size index icon theme">

<element name="polymer-ui-icon" extends="polymer-ui-theme-aware" attributes="src size index icon">
<link rel="stylesheet" href="polymer-ui-icon.css">
<template>
<div id="icon"></div>
Expand All @@ -48,7 +49,6 @@
* @default 24
*/
size: 24,
theme: '',
icon: '',
bx: 0,
by: 0,
Expand All @@ -67,10 +67,10 @@
themeChanged: function(old) {
this.$.icon.style.backgroundPosition = '';
this.$.icon.classList.switch(old, this.theme);
this.bx = parseFloat(getComputedStyle(this.$.icon).backgroundPosition.split(' ').shift());
this.updateIcon();
this.asyncMethod('updateIcon');
},
updateIcon: function() {
this.bx = parseFloat(getComputedStyle(this.$.icon).backgroundPosition.split(' ').shift());
this.$.icon.style.backgroundPosition = (this.bx + 'px') + ' ' + (this.by + 'px');
}
});
Expand Down
13 changes: 10 additions & 3 deletions polymer-ui-menu-item/polymer-ui-menu-item.css
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ license that can be found in the LICENSE file.
}

.polymer-ui-light-theme {
color: #333333;
color: #000;
}

.polymer-ui-dark-theme {
Expand Down Expand Up @@ -53,13 +53,20 @@ license that can be found in the LICENSE file.
}

.polymer-ui-light-theme.polymer-selected {
background: #fff;
background: #f2f2f2;
border: 1px solid rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.9);
}
}

polymer-ui-icon:not([showing]) {
display: none !important;
}

polymer-ui-icon {
margin-right: 20px;
}

#label {
margin: 0 10px 0 14px;
vertical-align: middle;
}
2 changes: 1 addition & 1 deletion polymer-ui-menu-item/polymer-ui-menu-item.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<element name="polymer-ui-menu-item" extends="polymer-ui-theme-aware" attributes="src label icon">
<link rel="stylesheet" href="polymer-ui-menu-item.css">
<template>
<polymer-ui-icon icon="{{icon}}"></polymer-ui-icon><span id="label">{{label}}<content></content></span>
<polymer-ui-icon icon="{{icon}}" showing?="{{icon}}"></polymer-ui-icon><span id="label">{{label}}<content></content></span>
</template>
<script>
Polymer.register(this, {
Expand Down
18 changes: 12 additions & 6 deletions polymer-ui-menu/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,21 @@
<body class="polymer-ui-body-text">
<h2>polymer-ui-dark-theme</h2>
<polymer-ui-menu selected="0" theme="polymer-ui-dark-theme">
<polymer-ui-menu-item icon="menu">Menu</polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog">Dialog</polymer-ui-menu-item>
<polymer-ui-menu-item icon="search">Search</polymer-ui-menu-item>
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
</polymer-ui-menu>
<h2>polymer-ui-light-theme</h2>
<polymer-ui-menu selected="0" theme="polymer-ui-light-theme">
<polymer-ui-menu-item icon="menu">Menu</polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog">Dialog</polymer-ui-menu-item>
<polymer-ui-menu-item icon="search">Search</polymer-ui-menu-item>
<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
</polymer-ui-menu>
<h2>polymer-ui-dark-theme (no icons)</h2>
<polymer-ui-menu selected="0" theme="polymer-ui-dark-theme">
<polymer-ui-menu-item label="Settings"></polymer-ui-menu-item>
<polymer-ui-menu-item label="Dialog"></polymer-ui-menu-item>
<polymer-ui-menu-item label="Search"></polymer-ui-menu-item>
</polymer-ui-menu>
</body>
</html>
3 changes: 0 additions & 3 deletions polymer-ui-menu/polymer-ui-menu.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,6 @@ license that can be found in the LICENSE file.
}

.polymer-ui-light-theme {
background: #f2f2f2 -webkit-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
background: #f2f2f2 -moz-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
background: #f2f2f2 -ms-linear-gradient(left, rgba(197,197,197,0), rgba(197,197,197,0.05));
color: #333333;
}

Expand Down
4 changes: 2 additions & 2 deletions polymer-ui-menu/polymer-ui-menu.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
*/
-->

<link rel="import" href="../../polymer-elements/polymer-selector.html">
<link rel="import" href="../../polymer-elements/polymer-selector/polymer-selector.html">
<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">

<element name="polymer-ui-menu" extends="polymer-selector" attributes="theme">
Expand All @@ -25,7 +25,7 @@
</template>
<script>
Polymer.register(this, {
insertedCallback: function() {
inserted: function() {
if (!this.theme) {
this.findTheme();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,29 @@
@host {
* {
position: absolute;
margin-top: -8px;
top: -100px;
top: 0;
right: 0;
width: 0;
height: 0;
margin-top: -8px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid white;
-webkit-transition: top 0.5s;
transition: top 0.5s;
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}
}
</style>
</template>
<script>
Polymer.register(this, {
targetChanged: function() {
var t = this.target
var t = this.target;
if (t) {
this.style.top = t.offsetTop + t.offsetHeight/2 + 'px';
var s = this.style;
var y = t.offsetTop + t.offsetHeight/2;
s.webkitTransform = s.mozTransform = s.msTransform = s.transform =
'translate3d(0,' + y + 'px,0)';
}
}
});
Expand Down
23 changes: 23 additions & 0 deletions polymer-ui-ratings/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@

<!doctype html>
<!--
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.
-->
<html>
<head>
<title>polymer-ui-ratings</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- load toolkit -->
<script src="../../polymer/polymer.js"></script>
<!-- import elements-->
<link rel="import" href="polymer-ui-ratings.html">
</head>
<body>
<polymer-ui-ratings value="3"></polymer-ui-ratings>
<br><br>
<polymer-ui-ratings value="5" count="10"></polymer-ui-ratings>
</body>
</html>
29 changes: 29 additions & 0 deletions polymer-ui-ratings/polymer-ui-ratings.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/*
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: inline-block;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
}
}

#star {
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
margin: 0 5px;
background-size: 100% 100%;
background-image: url('star_blank.png');
cursor: pointer;
}

#star.full {
background-image: url('star_full.png');
}
70 changes: 70 additions & 0 deletions polymer-ui-ratings/polymer-ui-ratings.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!--
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.
-->
<!--
/**
* @module Polymer UI Elements
*/
/**
* polymer-ratings allows users to rate items.
*
* Example:
*
* <polymer-ratings value="3"></polymer-ratings>
*
* By default g-ratings shows 5 stars but can be configured using "count" attribute:
*
* <polymer-ratings value="3" count="10"></polymer-ratings>
*
* @class g-ratings
*/
-->
<element name="polymer-ui-ratings" attributes="count value">
<link rel="stylesheet" href="polymer-ui-ratings.css">
<template>
<template repeat="{{stars}}">
<span id="star" index="{{index}}" class="{{starClass}}" touch-action="none" on-tap="updateValue"></span>
</template>
</template>
<script>
Polymer.register(this, {
/**
* Number of stars to display.
*
* @attribute count
* @type number
* @default 5
*/
count: 5,
/**
* Number of selected stars.
*
* @attribute value
* @type number
* @default 0
*/
value: 0,
ready: function() {
this.countChanged();
},
countChanged: function() {
this.stars = [];
for (var i = 0; i < this.count; i++) {
this.stars.push({index: i});
}
this.valueChanged();
},
valueChanged: function() {
this.stars && this.stars.forEach(function(s, i) {
s.starClass = i < this.value ? 'full' : '';
}.bind(this));
},
updateValue: function(event, detail, sender) {
var s = sender.templateInstance.model;
this.value = s.index + (s.starClass ? 0 : 1);
}
});
</script>
</element>
Binary file added polymer-ui-ratings/star_blank.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added polymer-ui-ratings/star_full.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions polymer-ui-sidebar-menu/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@
</style>
</head>
<body class="polymer-ui-body-text" theme="polymer-ui-dark-theme">
<polymer-ui-sidebar-menu selected="0" label="Polymer">
<polymer-ui-menu-item icon="settings">Home</polymer-ui-menu-item>
<polymer-ui-menu-item icon="settings">Explore</polymer-ui-menu-item>
<polymer-ui-menu-item icon="settings">Favorites</polymer-ui-menu-item>
<polymer-ui-sidebar-menu selected="Home" label="Polymer">
<polymer-ui-menu-item icon="settings" label="Home"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="settings" label="Explore"></polymer-ui-menu-item>
<polymer-ui-menu-item icon="settings" label="Favorites"></polymer-ui-menu-item>
</polymer-ui-sidebar-menu>
</body>
</html>
23 changes: 7 additions & 16 deletions polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,34 +10,25 @@ license that can be found in the LICENSE file.
box-shadow: inset -8px 0px 8px -4px rgba(0, 0, 0, 0.4);
padding: 0;
}

.polymer-ui-light-theme {
box-shadow: inset -8px 0px 8px -4px rgba(0, 0, 0, 0.15);
}
}

polymer-ui-toolbar {
/* override @host styles on polymer-ui-toolbar */
padding: 0 20px !important;
padding: 0 12px !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
}

.title {
font-size: 21px;
opacity: 0.8;
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
}

.menu {
padding: 10px 0;
}

/* #arrow {
position: absolute;
margin-top: -8px;
top: -100px;
right: 0;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-right: 9px solid white;
-webkit-transition: top 0.5s;
transition: top 0.5s;
}
*/
Loading

0 comments on commit e7f9a65

Please sign in to comment.