activities rows are selectable, and show in same view (not a json pop-up). still would like to tidy activity detail, but dynamically updating is a big plus.
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/b4924ac0 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/b4924ac0 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/b4924ac0 Branch: refs/heads/0.5.0 Commit: b4924ac015de6d9721346f1e35ccfc75f6a9fc4c Parents: 70da4fb Author: Alex Heneveld <[email protected]> Authored: Sun Dec 2 08:19:14 2012 -0800 Committer: Alex Heneveld <[email protected]> Committed: Sun Dec 2 08:19:14 2012 -0800 ---------------------------------------------------------------------- .../src/main/webapp/assets/css/prettybrook.css | 16 +++--- .../webapp/assets/js/view/entity-activities.js | 51 +++++++++++--------- .../main/webapp/assets/tpl/apps/activities.html | 11 ++--- .../assets/tpl/apps/activity-details.html | 12 +---- .../webapp/assets/tpl/apps/activity-row.html | 6 +-- 5 files changed, 45 insertions(+), 51 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/b4924ac0/usage/jsgui/src/main/webapp/assets/css/prettybrook.css ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css index 7de2c22..3e1fa1f 100644 --- a/usage/jsgui/src/main/webapp/assets/css/prettybrook.css +++ b/usage/jsgui/src/main/webapp/assets/css/prettybrook.css @@ -625,10 +625,18 @@ table.nonDatatables { table.nonDatatables thead { border-bottom: 1px solid black; } +table.nonDatatables thead th { + background: #ffffff; + padding: 3px 18px 3px 5px; +} table.table.nonDatatables tbody > tr:first-child > td { /* need both bottom of head, and top of body, to support empty table and override non-empty row top border */ border-top: 1px black solid; } +table.table.nonDatatables tbody tr.selected, +table.table.nonDatatables tbody tr.selected td { + background: #AC8; +} /* we keep the thin gray line between rows for manual tables, subtle difference but seems nice */ div.for-empty-table { @@ -980,12 +988,12 @@ textarea { } .table-condensed th { - background-color: #f7f7f7 !important; + background-color: #f7f7f7; padding: 8px; } .table-bordered tr td { - background-color: #f7f7f7 !important; + background-color: #f7f7f7; padding: 8px; } @@ -1130,10 +1138,6 @@ textarea { border-top-color: #549e2b; border-bottom-color: #549e2b; } - -#effectors-table th { - background: #ffffff !important -} /*APP PAGE*/ /* END KROME STYLES */ http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/b4924ac0/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js b/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js index 4f9352f..9c20ec6 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/entity-activities.js @@ -10,7 +10,7 @@ define([ template:_.template(ActivitiesHtml), taskRow:_.template(ActivityRowHtml), events:{ - "click button.details":"showFullActivity" + "click #activities-table tr":"rowClick" }, initialize:function () { var that = this @@ -23,7 +23,6 @@ define([ }, 5000) }, beforeClose:function () { - if (this.detailsModal) this.detailsModal.close() this.collection.off("reset", this.render) }, render:function () { @@ -35,7 +34,7 @@ define([ this.$(".has-no-activities").hide(); this.collection.each(function (task) { $tbody.append(that.taskRow({ - cid:task.cid, + cid:task.get("id"), displayName:task.get("displayName"), submitTimeUtc:task.get("submitTimeUtc"), startTimeUtc:task.get("startTimeUtc"), @@ -43,34 +42,40 @@ define([ currentStatus:task.get("currentStatus"), entityDisplayName:task.get("entityDisplayName") })) + if (that.activeTask) { + $("#activities-table tr[id="+that.activeTask+"]").addClass("selected") + that.showFullActivity(that.activeTask) + } }) } return this }, - showFullActivity:function (eventName) { - var cid = $(eventName.currentTarget).attr("id"), - task = this.collection.getByCid(cid) - // clean the old modal view !! - if (this.detailsModal) this.detailsModal.close() - this.detailsModal = new ActivitiesView.Modal({ - model:task - }) - this.$("#activity-modal").html(this.detailsModal.render().el) - // show the big fat modal - this.$("#activity-modal .modal").modal("show").css({ - "min-width":500, - "max-width":940, - width:function () { - return ($(document).width() * .9) + "px"; - }, - "margin-left":function () { - return -($(this).width() / 2) - } + rowClick: function(evt) { + var row = $(evt.currentTarget).closest("tr") + var id = row.attr("id") + $("#activities-table tr").removeClass("selected") + if (this.activeTask == id) { + // deselected + this.activeTask = null + this.$("#activity-details").hide(100) + } else { + row.addClass("selected") + this.activeTask = id + this.showFullActivity(id) + } + }, + showFullActivity:function (id) { + var task = this.collection.get(id) + var html = _.template(ActivityDetailsHtml, { + displayName:this.model.get("displayName"), + description:FormatJSON(task.toJSON()) }) + this.$("#activity-details").html(html) + this.$("#activity-details").show(100) } }) - ActivitiesView.Modal = Backbone.View.extend({ + ActivitiesView.Details = Backbone.View.extend({ tagName:"div", className:"modal hide", template:_.template(ActivityDetailsHtml), http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/b4924ac0/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html index 88322d3..8dbe3ec 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activities.html @@ -1,11 +1,9 @@ <table id="activities-table" class="table table-striped table-condensed nonDatatables"> <thead> <tr> - <th width="30%">Entity</th> - <th width="30%">Task</th> - <th>Submitted</th> - <th>Status</th> - <th>Details</th> + <th width="40%">Task</th> + <th width="30%">Submitted</th> + <th width="30%">Status</th> </tr> </thead> <tbody></tbody> @@ -13,4 +11,5 @@ <div class="has-no-activities for-empty-table hide"> <i>No activities currently available on this entity</i> </div> -<div id="activity-modal"></div> + +<div id="activity-details"></div> http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/b4924ac0/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html index c249cb2..83faca7 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-details.html @@ -1,13 +1,3 @@ -<div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> - <h3>Details for task <span class="displayName"><%= displayName %></span> - </h3> -</div> - -<div class="modal-body"> +<div> <textarea readonly="readonly" rows="16" style="width:100%;"><%= description %></textarea> </div> - -<div class="modal-footer"> - <button type="button" class="btn btn-info btn-mini" data-dismiss="modal">Close</button> -</div> \ No newline at end of file http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/b4924ac0/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row.html index 151b1a6..7f1dca7 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/activity-row.html @@ -1,9 +1,5 @@ -<tr class="activity-row"> - <td class="entity-display-name"><%= entityDisplayName %></td> +<tr class="activity-row" id="<%= cid %>"> <td class="task-display-name"><%= displayName %></td> <td class="submit-time"><%= submitTimeUtc %></td> <td class="current-status"><%= currentStatus %></td> - <td> - <button id="<%= cid %>" type="button" class="btn btn-mini btn-info details">Details</button> - </td> </tr> \ No newline at end of file
