show entity icon (from iconUrl) in the app-explorer tree view
Project: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/repo Commit: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/commit/3f0d54a6 Tree: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/tree/3f0d54a6 Diff: http://git-wip-us.apache.org/repos/asf/brooklyn-ui/diff/3f0d54a6 Branch: refs/heads/0.6.0 Commit: 3f0d54a6bc91f45bf1448c06cf5a0006d8b3f290 Parents: 2ef411f Author: Alex Heneveld <[email protected]> Authored: Mon Sep 16 21:42:04 2013 +0100 Committer: Alex Heneveld <[email protected]> Committed: Wed Sep 18 09:30:06 2013 +0100 ---------------------------------------------------------------------- .../src/main/webapp/assets/js/model/app-tree.js | 1 + .../webapp/assets/js/view/application-tree.js | 3 +++ .../main/webapp/assets/tpl/apps/tree-item.html | 18 ++++++++++++++---- 3 files changed, 18 insertions(+), 4 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/3f0d54a6/usage/jsgui/src/main/webapp/assets/js/model/app-tree.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/model/app-tree.js b/usage/jsgui/src/main/webapp/assets/js/model/app-tree.js index 2bd0226..91bc63d 100644 --- a/usage/jsgui/src/main/webapp/assets/js/model/app-tree.js +++ b/usage/jsgui/src/main/webapp/assets/js/model/app-tree.js @@ -9,6 +9,7 @@ define([ return { id:"", name:"", + iconUrl:"", children:[] } }, http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/3f0d54a6/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js index 61ea360..efbad8b 100644 --- a/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js +++ b/usage/jsgui/src/main/webapp/assets/js/view/application-tree.js @@ -80,6 +80,7 @@ define([ hasChildren: application.hasChildren(), parentApp:application.get("id"), displayName:application.get("name"), + iconUrl:application.get("iconUrl"), depth: 0 })), treeFromEntity = function (entity, depth) { @@ -92,6 +93,7 @@ define([ hasChildren: true, parentApp:application.get("id"), displayName:entity.getDisplayName(), + iconUrl:entity.get("iconUrl"), depth: depth })) var $parentTpl = $entityTpl.find("#children") @@ -105,6 +107,7 @@ define([ hasChildren: false, parentApp:application.get("id"), displayName:entity.getDisplayName(), + iconUrl:entity.get("iconUrl"), depth: depth })) } http://git-wip-us.apache.org/repos/asf/brooklyn-ui/blob/3f0d54a6/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html ---------------------------------------------------------------------- diff --git a/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html b/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html index f29c96b..1a2a380 100644 --- a/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html +++ b/usage/jsgui/src/main/webapp/assets/tpl/apps/tree-item.html @@ -2,10 +2,20 @@ <div class="tree-node"> <span class="entity_tree_node name entity" id="<%= id %>" data-entity-type="<%= type %>" data-parent-app="<%= parentApp %>"> <a href="#/v1/applications/<%= parentApp %>/entities/<%= id %>"> - - <div style="min-width: 16px; max-width: 16px; max-height: 16px; display: inline-block; margin-right: 6px;"> + + <% + var isApp = type == "application"; + var iconSize = isApp ? 36 : 24; + var iconsDivWidth = iconUrl ? iconSize * 3 / 2 : 16; + var chevronLeft = (iconUrl ? iconSize : 0) + 3; + var chevronTop = 3; + %> + <div style="min-width: <%= iconsDivWidth %>px; max-width: <%= iconsDivWidth %>px; max-height: <%= iconSize %>px; display: inline-block; margin-right: 6px;"> + <% if (iconUrl) { %> + <img src="<%= iconUrl %>" style="max-width: <%= iconSize %>px; max-height: <%= iconSize %>px;"> + <% } %> <% if (hasChildren) { %> - <div style="position: absolute; left: 3px; top: 3px;"> + <div style="position: absolute; left: <%= chevronLeft %>px; top: <%= chevronTop %>px;"> <div class="toggler-icon icon-chevron-right tree-node-state tree-change"> <div class="light-popup"> <div class="light-popup-body"> @@ -19,7 +29,7 @@ </div> </div> <% } else { %> - <div style="position: absolute; left: 39px; top: 24px;"> + <div style="position: absolute; left: <%= chevronLeft %>px; top: <%= chevronTop + 21 %>px;"> </div> <% } %>
