UI plugin: Show custom icon Show custom icon '<pluginName>/icon.png' on side nav bar (if plugin added new section), and on plugin listing.
Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/690dd66d Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/690dd66d Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/690dd66d Branch: refs/heads/master Commit: 690dd66d3ed9e605e5f010578139f2971f61a178 Parents: 0f6eb2f Author: Brian Federle <[email protected]> Authored: Tue Jan 29 16:05:40 2013 -0800 Committer: Brian Federle <[email protected]> Committed: Tue Jan 29 16:05:48 2013 -0800 ---------------------------------------------------------------------- ui/css/cloudstack3.css | 34 ++++++++++++++++++++++++++++++---- ui/plugins/testPlugin/icon.png | Bin 0 -> 7943 bytes ui/scripts/plugins.js | 4 +++- ui/scripts/ui-custom/plugins.js | 8 ++++++-- ui/scripts/ui/core.js | 7 +++++++ 5 files changed, 46 insertions(+), 7 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/690dd66d/ui/css/cloudstack3.css ---------------------------------------------------------------------- diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 0b954a6..a0ce15f 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -2336,6 +2336,28 @@ div.detail-group.actions td { top: 18px; } +#navigation ul li.custom-icon span.icon { + display: block; + width: 50px; + height: 50px; + position: relative; + float: left; + margin-right: -47px; + background: none; +} + +#navigation ul li.custom-icon span.icon img { + width: 50px; + height: 50px; + float: left; + /*+placement:shift -6px -17px;*/ + position: relative; + left: -6px; + top: -17px; + position: absolute; + margin-right: -14px; +} + #navigation ul li.last.active, #navigation ul li.last:hover { height: 52px; @@ -10988,12 +11010,16 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it } .plugins-listing ul li .icon { - background: #BDBDBD; display: block; - width: 40px; - height: 40px; + width: 50px; + height: 50px; float: left; - margin: 13px 13px 13px 11px; + margin: 8px 13px 13px 11px; +} + +.plugins-listing ul li .icon img { + width: 100%; + height: 100%; } /*Action icons*/ http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/690dd66d/ui/plugins/testPlugin/icon.png ---------------------------------------------------------------------- diff --git a/ui/plugins/testPlugin/icon.png b/ui/plugins/testPlugin/icon.png new file mode 100644 index 0000000..a313d35 Binary files /dev/null and b/ui/plugins/testPlugin/icon.png differ http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/690dd66d/ui/scripts/plugins.js ---------------------------------------------------------------------- diff --git a/ui/scripts/plugins.js b/ui/scripts/plugins.js index c1d0269..f40d0fa 100644 --- a/ui/scripts/plugins.js +++ b/ui/scripts/plugins.js @@ -13,7 +13,9 @@ var pluginAPI = { addSection: function(section) { - cloudStack.sections[section.id] = section; + cloudStack.sections[section.id] = $.extend(section, { + customIcon: 'plugins/' + section.id + '/icon.png' + }); }, extend: function(obj) { $.extend(true, cloudStack, obj); http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/690dd66d/ui/scripts/ui-custom/plugins.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui-custom/plugins.js b/ui/scripts/ui-custom/plugins.js index ba61f74..4e6fbb2 100644 --- a/ui/scripts/ui-custom/plugins.js +++ b/ui/scripts/ui-custom/plugins.js @@ -4,10 +4,13 @@ var id = args.id; var title = args.title; var desc = args.desc; + var iconURL = args.iconURL; var $pluginItem = $('<li>').addClass('plugin-item').addClass(id); var $title = $('<span>').addClass('title').html(title); var $desc = $('<span>').addClass('desc').html(desc); - var $icon = $('<span>').addClass('icon'); + var $icon = $('<span>').addClass('icon').append( + $('<img>').attr({ src: iconURL }) + ); $pluginItem.append( $icon, $title, $desc @@ -25,7 +28,8 @@ var $plugin = elems.pluginItem({ id: plugin.id, title: plugin.title, - desc: plugin.desc + desc: plugin.desc, + iconURL: 'plugins/' + plugin.id + '/icon.png' }); var $browser = $('#browser .container'); http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/690dd66d/ui/scripts/ui/core.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js index 30cd75b..b2be379 100644 --- a/ui/scripts/ui/core.js +++ b/ui/scripts/ui/core.js @@ -45,6 +45,7 @@ } } + var $li = $('<li>') .addClass('navigation-item') .addClass(sectionID) @@ -52,6 +53,12 @@ .append($('<span>').html(_l(args.title))) .data('cloudStack-section-id', sectionID); + if (args.customIcon) { + $li.addClass('custom-icon').find('span.icon').html('').append( + $('<img>').attr({ src: args.customIcon }) + ); + } + $li.appendTo($navList); return true;
