Merge "PolyGerrit stylistic fixes"

This commit is contained in:
Dave Borowitz 2016-01-15 19:06:13 +00:00 committed by Gerrit Code Review
commit 6808f277cb
5 changed files with 31 additions and 21 deletions

View File

@ -27,7 +27,7 @@ limitations under the License.
display: flex; display: flex;
} }
:host([selected]) { :host([selected]) {
background-color: #d8EdF9; background-color: #ebf5fb;
} }
.cell { .cell {
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;

View File

@ -21,25 +21,28 @@ limitations under the License.
<template> <template>
<style> <style>
:host { :host {
display: inline; display: inline-block;
} }
.starButton { .starButton {
font-size: .95em;
margin-right: .25em;
cursor: pointer;
background-color: transparent; background-color: transparent;
border-color: transparent; border-color: transparent;
cursor: pointer;
font-size: 1.2em;
vertical-align: -.2em;
margin-right: .25em;
width: 1.2em;
outline: none;
} }
.star { .starButton svg {
color: #fbc02d; fill: #aab8c2;
} }
.unstar { .starButton-active svg {
color: #666; fill: #ffac33;
} }
</style> </style>
<button class="starButton" on-tap="_handleStarTap"> <button class$="[[_computeStarClass(change.starred)]]" on-tap="_handleStarTap">
<span class="star" hidden$="[[!change.starred]]">&#9733;</span> <!-- Public Domain image from the Noun Project: https://thenounproject.com/search/?q=star&i=25969 -->
<span class="unstar" hidden$="[[change.starred]]">&#9734;</span> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M26.439,95.601c-5.608,2.949-9.286,0.276-8.216-5.968l4.5-26.237L3.662,44.816c-4.537-4.423-3.132-8.746,3.137-9.657 l26.343-3.829L44.923,7.46c2.804-5.682,7.35-5.682,10.154,0l11.78,23.87l26.343,3.829c6.27,0.911,7.674,5.234,3.138,9.657 L77.277,63.397l4.501,26.237c1.07,6.244-2.608,8.916-8.216,5.968L50,83.215L26.439,95.601z"></path></svg>
</button> </button>
</template> </template>
<script> <script>
@ -58,6 +61,14 @@ limitations under the License.
_xhrPromise: Object, // Used for testing. _xhrPromise: Object, // Used for testing.
}, },
_computeStarClass: function(starred) {
var classes = ['starButton'];
if (starred) {
classes.push('starButton-active');
}
return classes.join(' ');
},
_handleStarTap: function() { _handleStarTap: function() {
var method = this.change.starred ? 'DELETE' : 'PUT'; var method = this.change.starred ? 'DELETE' : 'PUT';
this.set('change.starred', !this.change.starred); this.set('change.starred', !this.change.starred);

View File

@ -43,6 +43,7 @@ limitations under the License.
} }
.canComment .lineNum { .canComment .lineNum {
cursor: pointer; cursor: pointer;
text-decoration: underline;
} }
.canComment .lineNum:hover { .canComment .lineNum:hover {
background-color: #ccc; background-color: #ccc;

View File

@ -57,6 +57,7 @@ limitations under the License.
} }
.message { .message {
border: none; border: none;
width: 100%;
} }
.labelContainer:not(:first-of-type) { .labelContainer:not(:first-of-type) {
margin-top: .5em; margin-top: .5em;

View File

@ -71,19 +71,16 @@ limitations under the License.
server.restore(); server.restore();
}); });
function isVisible(el) {
assert.ok(el);
return getComputedStyle(el).getPropertyValue('display') != 'none';
}
test('star visibility states', function() { test('star visibility states', function() {
element.set('change.starred', true); element.set('change.starred', true);
assert.isTrue(isVisible(element.$$('.star')), 'star is visible'); assert.isTrue(element.$$('button').classList.contains('starButton'));
assert.isFalse(isVisible(element.$$('.unstar')), 'unstar is not visible'); assert.isTrue(
element.$$('button').classList.contains('starButton-active'));
element.set('change.starred', false); element.set('change.starred', false);
assert.isTrue(isVisible(element.$$('.unstar')), 'unstar is visible'); assert.isTrue(element.$$('button').classList.contains('starButton'));
assert.isFalse(isVisible(element.$$('.star')), 'star is not visible'); assert.isFalse(
element.$$('button').classList.contains('starButton-active'));
}); });
test('starring', function(done) { test('starring', function(done) {