Use SVG icons for change requirements
Because U+29D7 is not supported on all browsers, change to icons.
Bug: Issue 8922
Change-Id: Ic1cf3d7d1788042a9dbcd049da3600162586d605
diff --git a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.html b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.html
index 536b943..2a33343 100644
--- a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.html
+++ b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.html
@@ -18,6 +18,7 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../behaviors/rest-client-behavior/rest-client-behavior.html">
<link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-icons/gr-icons.html">
<dom-module id="gr-change-requirements">
<template strip-whitespace>
@@ -26,16 +27,15 @@
display: inline-block;
font-weight: initial;
text-align: center;
- width: 1em;
}
- .unsatisfied .status {
+ .unsatisfied .icon {
color: #FFA62F;
}
- .satisfied .status {
+ .satisfied .icon {
color: #388E3C;
}
.requirement {
- padding: .1em .3em;
+ padding: .1em 0;
}
.requirementContainer:not(:first-of-type) {
margin-top: .25em;
@@ -46,7 +46,7 @@
</style>
<template is="dom-if" if="[[_showWip]]">
<div class="requirement unsatisfied changeIsWip">
- <span class="status">⧗</span>
+ <span class="status"><iron-icon class="icon" icon="gr-icons:hourglass"></iron-icon></span>
Work in Progress
</div>
</template>
@@ -55,7 +55,9 @@
is="dom-repeat"
items="[[labels]]">
<div class$="requirement [[item.style]]">
- <span class="status">[[item.status]]</span>
+ <span class="status">
+ <iron-icon class="icon" icon="[[item.icon]]"></iron-icon>
+ </span>
Label <span class="labelName">[[item.label]]</span>
</div>
</template>
@@ -65,7 +67,7 @@
items="[[requirements]]">
<div class$="requirement [[_computeRequirementClass(item.satisfied)]]">
<span class="status">
- [[_computeRequirementStatus(item.satisfied)]]
+ <iron-icon id="icon" icon="[[_computeRequirementIcon(item.satisfied)]]"></iron-icon>
</span>
[[item.fallback_text]]
</div>
diff --git a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.js b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.js
index 884e9cd..765f639 100644
--- a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.js
+++ b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements.js
@@ -75,9 +75,9 @@
const obj = labels[label];
if (obj.optional) { continue; }
- const status = this._computeRequirementStatus(obj.approved);
+ const icon = this._computeRequirementIcon(obj.approved);
const style = this._computeRequirementClass(obj.approved);
- _labels.push({label, status, style});
+ _labels.push({label, icon, style});
}
return _labels;
@@ -91,11 +91,11 @@
}
},
- _computeRequirementStatus(requirementStatus) {
+ _computeRequirementIcon(requirementStatus) {
if (requirementStatus) {
- return '✓';
+ return 'gr-icons:check';
} else {
- return '⧗';
+ return 'gr-icons:hourglass';
}
},
});
diff --git a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements_test.html b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements_test.html
index 560a33d..efac0c2 100644
--- a/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements_test.html
+++ b/polygerrit-ui/app/elements/change/gr-change-requirements/gr-change-requirements_test.html
@@ -51,8 +51,8 @@
assert.equal(element._computeRequirementClass(true), 'satisfied');
assert.equal(element._computeRequirementClass(false), 'unsatisfied');
- assert.equal(element._computeRequirementStatus(true), '✓');
- assert.equal(element._computeRequirementStatus(false), '⧗');
+ assert.equal(element._computeRequirementIcon(true), 'gr-icons:check');
+ assert.equal(element._computeRequirementIcon(false), 'gr-icons:hourglass');
});
test('properly converts satisfied labels', () => {
diff --git a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
index ae363ea..cbae987 100644
--- a/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
+++ b/polygerrit-ui/app/elements/shared/gr-icons/gr-icons.html
@@ -40,6 +40,8 @@
<g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></g>
<!-- This SVG is a copy from iron-icons https://github.com/PolymerElements/iron-icons/blob/master/iron-icons.html -->
<g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></g>
+ <!-- This SVG is a copy from material.io https://material.io/icons/#ic_hourglass_full-->
+ <g id="hourglass"><path d="M6 2v6h.01L6 8.01 10 12l-4 4 .01.01H6V22h12v-5.99h-.01L18 16l-4-4 4-3.99-.01-.01H18V2H6z"/><path d="M0 0h24v24H0V0z" fill="none"/></g>
<!-- This is a custom PolyGerrit SVG -->
<g id="side-by-side"><path d="M17.1578947,10.8888889 L2.84210526,10.8888889 C2.37894737,10.8888889 2,11.2888889 2,11.7777778 L2,17.1111111 C2,17.6 2.37894737,18 2.84210526,18 L17.1578947,18 C17.6210526,18 18,17.6 18,17.1111111 L18,11.7777778 C18,11.2888889 17.6210526,10.8888889 17.1578947,10.8888889 Z M17.1578947,2 L2.84210526,2 C2.37894737,2 2,2.4 2,2.88888889 L2,8.22222222 C2,8.71111111 2.37894737,9.11111111 2.84210526,9.11111111 L17.1578947,9.11111111 C17.6210526,9.11111111 18,8.71111111 18,8.22222222 L18,2.88888889 C18,2.4 17.6210526,2 17.1578947,2 Z M16.1973628,2 L2.78874238,2 C2.35493407,2 2,2.4 2,2.88888889 L2,8.22222222 C2,8.71111111 2.35493407,9.11111111 2.78874238,9.11111111 L16.1973628,9.11111111 C16.6311711,9.11111111 16.9861052,8.71111111 16.9861052,8.22222222 L16.9861052,2.88888889 C16.9861052,2.4 16.6311711,2 16.1973628,2 Z" id="Shape" transform="scale(1.2) translate(10.000000, 10.000000) rotate(-90.000000) translate(-10.000000, -10.000000)"/></g>
<!-- This is a custom PolyGerrit SVG -->
