UI: adapt to core changes
* Update task and show_all/hide_all icons names
* Fix _onChipClick() to change focus to tasks tab
* Fix tasks failing to render task-hints
Screenshots: https://imgur.com/a/RBB2qtd
Change-Id: I6b212ff1a86e0fc330a98e9fda17c289cd91186d
diff --git a/gr-task-plugin/gr-task-chip.js b/gr-task-plugin/gr-task-chip.js
index a0c5b94..81489f5 100644
--- a/gr-task-plugin/gr-task-chip.js
+++ b/gr-task-plugin/gr-task-chip.js
@@ -43,7 +43,7 @@
.shadowRoot.querySelector('main')
.querySelector('gr-change-view')
.shadowRoot.querySelector('#mainContent')
- .querySelector('#primaryTabs');
+ .querySelector('#tabs');
}
_setTasksTabActive() {
diff --git a/gr-task-plugin/gr-task-plugin-tasks_html.js b/gr-task-plugin/gr-task-plugin-tasks_html.js
index 60fbd32..f0f1541 100644
--- a/gr-task-plugin/gr-task-plugin-tasks_html.js
+++ b/gr-task-plugin/gr-task-plugin-tasks_html.js
@@ -35,24 +35,39 @@
cursor: pointer;
text-decoration: underline;
}
+ gr-icon.close {
+ color: var(--error-foreground);
+ }
+ gr-icon.block {
+ color: var(--error-foreground);
+ }
+ gr-icon.pause {
+ color: var(--warning-foreground);
+ }
+ gr-icon.play_arrow {
+ color: var(--success-foreground);
+ }
+ gr-icon.check_circle {
+ color: var(--success-foreground);
+ }
+ li {
+ margin: 3px 0;
+ }
</style>
<template is="dom-if" if="[[task.icon.id]]">
<gr-tooltip-content
has-tooltip
- title="In Progress">
- <iron-icon
- icon="gr-icons:hourglass"
- class="green"
- hidden$="[[!task.in_progress]]">
- </iron-icon>
+ title="In Progress"
+ hidden="[[!task.in_progress]]">
+ <gr-icon
+ icon="hourglass_empty"
+ class="hourglass_empty">
+ </gr-icon>
</gr-tooltip-content>
<gr-tooltip-content
has-tooltip
title$="[[task.icon.tooltip]]">
- <iron-icon
- icon="[[task.icon.id]]"
- class$="[[task.icon.color]]">
- </iron-icon>
+ <gr-icon class$="[[task.icon.id]]" filled icon="[[task.icon.id]]"></gr-icon>
</gr-tooltip-content>
</template>
<template is="dom-if" if="[[task.change]]">
@@ -64,11 +79,11 @@
</template>
</template>
<template is="dom-if" if="[[task.hint]]">
- <gr-linked-text style="display: -webkit-inline-box;"
+ <gr-formatted-text style="display: -webkit-inline-box;"
pre=""
content="[[task.hint]]"
config="[[config]]">
- </gr-linked-text>
+ </gr-formatted-text>
</template>
</li>
</template>
diff --git a/gr-task-plugin/gr-task-plugin.js b/gr-task-plugin/gr-task-plugin.js
index 2bff130..97eb5de 100644
--- a/gr-task-plugin/gr-task-plugin.js
+++ b/gr-task-plugin/gr-task-plugin.js
@@ -135,33 +135,27 @@
const icon = {};
switch (task.status) {
case 'FAIL':
- icon.id = 'gr-icons:close';
- icon.color = 'red';
+ icon.id = 'close';
icon.tooltip = 'Failed';
break;
case 'READY':
- icon.id = 'gr-icons:playArrow';
- icon.color = 'green';
+ icon.id = 'play_arrow';
icon.tooltip = 'Ready';
break;
case 'INVALID':
- icon.id = 'gr-icons:abandon';
- icon.color = 'red';
+ icon.id = 'block';
icon.tooltip = 'Invalid';
break;
case 'WAITING':
- icon.id = 'gr-icons:pause';
- icon.color = 'orange';
+ icon.id = 'pause';
icon.tooltip = 'Waiting';
break;
case 'DUPLICATE':
- icon.id = 'gr-icons:check';
- icon.color = 'green';
+ icon.id = 'check_circle';
icon.tooltip = 'Duplicate';
break;
case 'PASS':
- icon.id = 'gr-icons:check-circle';
- icon.color = 'green';
+ icon.id = 'check_circle';
icon.tooltip = 'Passed';
break;
}
diff --git a/gr-task-plugin/gr-task-plugin_html.js b/gr-task-plugin/gr-task-plugin_html.js
index e0ea9cd..015fb45 100644
--- a/gr-task-plugin/gr-task-plugin_html.js
+++ b/gr-task-plugin/gr-task-plugin_html.js
@@ -64,10 +64,10 @@
cursor: pointer;
text-decoration: underline;
}
- .show-all-button iron-icon {
+ .show-all-button gr-icon {
color: inherit;
- --iron-icon-height: 18px;
- --iron-icon-width: 18px;
+ --gr-icon-height: 18px;
+ --gr-icon-width: 18px;
}
.no-margins { margin: 0 0 0 0; }
.task-list-item {
@@ -96,16 +96,10 @@
on-click="_show_all_tap">All ([[_all_count]])</span>
| Needed + Blocked ([[_ready_count]], [[_fail_count]])</p>
</template>
- <gr-button link="" class="show-all-button" on-click="_switch_expand"
- >[[_computeShowAllLabelText(_expand_all)]]
- <iron-icon
- icon="gr-icons:expand-more"
- hidden$="[[_expand_all]]"
- ></iron-icon
- ><iron-icon
- icon="gr-icons:expand-less"
- hidden$="[[!_expand_all]]"
- ></iron-icon>
+ <gr-button link="" class="show-all-button" on-click="_switch_expand">
+ [[_computeShowAllLabelText(_expand_all)]]
+ <gr-icon icon="expand_more" hidden$="[[_expand_all]]"></gr-icon>
+ <gr-icon icon="expand_less" hidden$="[[!_expand_all]]"></gr-icon>
</gr-button>
</div>
<div hidden$="[[!_expand_all]]" style="padding-bottom: 12px">
