Merge "Task UI: Add links to see full view of all tasks" into stable-2.16
diff --git a/gr-task-plugin/gr-task-plugin.html b/gr-task-plugin/gr-task-plugin.html
index d03473b..7125ee1 100644
--- a/gr-task-plugin/gr-task-plugin.html
+++ b/gr-task-plugin/gr-task-plugin.html
@@ -19,13 +19,47 @@
<style>
ul { padding-left: 0.5em; }
h3 { padding-left: 0.1em; }
+ .cursor { cursor: pointer; }
+ #tasks_header {
+ align-items: center;
+ background-color: #fafafa;
+ border-top: 1px solid #ddd;
+ display: flex;
+ padding: 6px 1rem;
+ }
</style>
<div id="tasks" hidden$="[[!_tasks.length]]">
- <h3>Tasks: (Needs + Blocked)</h3>
- <ul style="list-style-type:none;">
- <gr-task-plugin-tasks tasks="[[_tasks]]"></gr-task-plugin-tasks>
- </ul>
+ <div id="tasks_header" style="display: flex;">
+ <iron-icon
+ icon="gr-icons:expand-less"
+ hidden$="[[!_expand_all]]"
+ on-tap="_switch_expand"
+ class="cursor"> </iron-icon>
+ <iron-icon
+ icon="gr-icons:expand-more"
+ hidden$="[[_expand_all]]"
+ on-tap="_switch_expand"
+ class="cursor"> </iron-icon>
+ <div style="display: flex; align-items: center; column-gap: 1em;">
+ <h3 on-tap="_switch_expand" class="cursor"> Tasks </h3>
+ <template is="dom-if" if="[[_expand_all]]">
+ <gr-button
+ on-tap="_show_all_tap"
+ disabled="[[_is_show_all(_show_all)]]"> Show All </gr-button>
+ <gr-button
+ on-tap="_needs_and_blocked_tap"
+ disabled="[[!_is_show_all(_show_all)]]"> Needs + Blocked</gr-button>
+ </template>
+ </div>
+ </div>
+ <div hidden$="[[!_expand_all]]">
+ <ul style="list-style-type:none;">
+ <gr-task-plugin-tasks
+ tasks="[[_tasks]]"
+ show_all$="[[_show_all]]"> </gr-task-plugin-tasks>
+ </ul>
+ </div>
</div>
</template>
<script src="gr-task-plugin.js"></script>
@@ -34,14 +68,15 @@
<dom-module id="gr-task-plugin-tasks">
<template>
<template is="dom-repeat" as="task" items="[[tasks]]">
- <template is="dom-if" if="[[task.message]]">
+ <template is="dom-if" if="[[_can_show(show_all, task)]]">
<li>
<style>
+ /* Matching colors with core code. */
.green {
- color: greenyellow
+ color: #9fcc6b;
}
.red {
- color: chocolate
+ color: #FFA62F;
}
</style>
<template is="dom-if" if="[[task.icon.id]]">
@@ -66,7 +101,9 @@
[[task.message]]
</li>
</template>
- <gr-task-plugin-tasks tasks="[[task.sub_tasks]]"></gr-task-plugin-tasks>
+ <gr-task-plugin-tasks
+ tasks="[[task.sub_tasks]]"
+ show_all$="[[show_all]]"> </gr-task-plugin-tasks>
</template>
</template>
<script>
@@ -78,6 +115,15 @@
notify: true,
value() { return []; },
},
+
+ show_all: {
+ type: String,
+ notify: true,
+ },
+ },
+
+ _can_show(show, task) {
+ return show === 'true' || task.showOnFilter;
},
});
</script>
diff --git a/gr-task-plugin/gr-task-plugin.js b/gr-task-plugin/gr-task-plugin.js
index 47e15c8..a58623c 100644
--- a/gr-task-plugin/gr-task-plugin.js
+++ b/gr-task-plugin/gr-task-plugin.js
@@ -39,6 +39,22 @@
notify: true,
value() { return []; },
},
+
+ _show_all: {
+ type: String,
+ notify: true,
+ value: 'false',
+ },
+
+ _expand_all: {
+ type: Boolean,
+ notify: true,
+ value: true,
+ },
+ },
+
+ _is_show_all(show_all) {
+ return show_all === 'true';
},
attached() {
@@ -64,45 +80,69 @@
});
},
- _getTaskDescription(task) {
- let inProgress = task.in_progress ? " (IN PROGRESS)" : "";
- return (task.hint || task.name) + inProgress;
- },
-
- _computeMessage(task) {
- switch (task.status) {
- case 'FAIL':
- case 'READY':
- case 'INVALID':
- return this._getTaskDescription(task);
- }
- },
-
_computeIcon(task) {
const icon = {};
switch (task.status) {
case 'FAIL':
icon.id = 'gr-icons:close';
icon.color = 'red';
- icon.tooltip = 'Blocked';
+ icon.tooltip = 'Failed';
break;
case 'READY':
+ icon.id = 'gr-icons:rebase';
+ icon.color = 'green';
+ icon.tooltip = 'Ready';
+ break;
+ case 'INVALID':
+ icon.id = 'gr-icons:abandon';
+ icon.color = 'red';
+ icon.tooltip = 'Invalid';
+ break;
+ case 'WAITING':
+ icon.id = 'gr-icons:side-by-side';
+ icon.color = 'red';
+ icon.tooltip = 'Waiting';
+ break;
+ case 'PASS':
icon.id = 'gr-icons:check';
icon.color = 'green';
- icon.tooltip = 'Needs';
+ icon.tooltip = 'Passed';
break;
}
return icon;
},
+ _computeShowOnNeedsAndBlockedFilter(task) {
+ switch (task.status) {
+ case 'FAIL':
+ case 'READY':
+ case 'INVALID':
+ return true;
+ }
+ return false;
+ },
+
_addTasks(tasks) { // rename to process, remove DOM bits
if (!tasks) return [];
tasks.forEach(task => {
- task.message = this._computeMessage(task);
+ task.message = task.hint || task.name;
task.icon = this._computeIcon(task);
+ task.showOnFilter = this._computeShowOnNeedsAndBlockedFilter(task);
this._addTasks(task.sub_tasks);
});
return tasks;
},
+
+ _show_all_tap() {
+ this._show_all = 'true';
+ },
+
+ _needs_and_blocked_tap() {
+ this._show_all = 'false';
+ },
+
+ _switch_expand() {
+ this._expand_all = !this._expand_all;
+ },
});
})();
