Merge "PolyGerrit stylistic fixes"
This commit is contained in:
commit
6808f277cb
@ -27,7 +27,7 @@ limitations under the License.
|
||||
display: flex;
|
||||
}
|
||||
:host([selected]) {
|
||||
background-color: #d8EdF9;
|
||||
background-color: #ebf5fb;
|
||||
}
|
||||
.cell {
|
||||
border-bottom: 1px solid #eee;
|
||||
|
@ -21,25 +21,28 @@ limitations under the License.
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
}
|
||||
.starButton {
|
||||
font-size: .95em;
|
||||
margin-right: .25em;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
vertical-align: -.2em;
|
||||
margin-right: .25em;
|
||||
width: 1.2em;
|
||||
outline: none;
|
||||
}
|
||||
.star {
|
||||
color: #fbc02d;
|
||||
.starButton svg {
|
||||
fill: #aab8c2;
|
||||
}
|
||||
.unstar {
|
||||
color: #666;
|
||||
.starButton-active svg {
|
||||
fill: #ffac33;
|
||||
}
|
||||
</style>
|
||||
<button class="starButton" on-tap="_handleStarTap">
|
||||
<span class="star" hidden$="[[!change.starred]]">★</span>
|
||||
<span class="unstar" hidden$="[[change.starred]]">☆</span>
|
||||
<button class$="[[_computeStarClass(change.starred)]]" on-tap="_handleStarTap">
|
||||
<!-- Public Domain image from the Noun Project: https://thenounproject.com/search/?q=star&i=25969 -->
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
@ -58,6 +61,14 @@ limitations under the License.
|
||||
_xhrPromise: Object, // Used for testing.
|
||||
},
|
||||
|
||||
_computeStarClass: function(starred) {
|
||||
var classes = ['starButton'];
|
||||
if (starred) {
|
||||
classes.push('starButton-active');
|
||||
}
|
||||
return classes.join(' ');
|
||||
},
|
||||
|
||||
_handleStarTap: function() {
|
||||
var method = this.change.starred ? 'DELETE' : 'PUT';
|
||||
this.set('change.starred', !this.change.starred);
|
||||
|
@ -43,6 +43,7 @@ limitations under the License.
|
||||
}
|
||||
.canComment .lineNum {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.canComment .lineNum:hover {
|
||||
background-color: #ccc;
|
||||
|
@ -57,6 +57,7 @@ limitations under the License.
|
||||
}
|
||||
.message {
|
||||
border: none;
|
||||
width: 100%;
|
||||
}
|
||||
.labelContainer:not(:first-of-type) {
|
||||
margin-top: .5em;
|
||||
|
@ -71,19 +71,16 @@ limitations under the License.
|
||||
server.restore();
|
||||
});
|
||||
|
||||
function isVisible(el) {
|
||||
assert.ok(el);
|
||||
return getComputedStyle(el).getPropertyValue('display') != 'none';
|
||||
}
|
||||
|
||||
test('star visibility states', function() {
|
||||
element.set('change.starred', true);
|
||||
assert.isTrue(isVisible(element.$$('.star')), 'star is visible');
|
||||
assert.isFalse(isVisible(element.$$('.unstar')), 'unstar is not visible');
|
||||
assert.isTrue(element.$$('button').classList.contains('starButton'));
|
||||
assert.isTrue(
|
||||
element.$$('button').classList.contains('starButton-active'));
|
||||
|
||||
element.set('change.starred', false);
|
||||
assert.isTrue(isVisible(element.$$('.unstar')), 'unstar is visible');
|
||||
assert.isFalse(isVisible(element.$$('.star')), 'star is not visible');
|
||||
assert.isTrue(element.$$('button').classList.contains('starButton'));
|
||||
assert.isFalse(
|
||||
element.$$('button').classList.contains('starButton-active'));
|
||||
});
|
||||
|
||||
test('starring', function(done) {
|
||||
|
Loading…
Reference in New Issue
Block a user