From 690dd66d3ed9e605e5f010578139f2971f61a178 Mon Sep 17 00:00:00 2001 From: Brian Federle Date: Tue, 29 Jan 2013 16:05:40 -0800 Subject: [PATCH] UI plugin: Show custom icon Show custom icon '/icon.png' on side nav bar (if plugin added new section), and on plugin listing. --- 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(-) create mode 100644 ui/plugins/testPlugin/icon.png diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 0b954a6e3ac..a0ce15f4263 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*/ diff --git a/ui/plugins/testPlugin/icon.png b/ui/plugins/testPlugin/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..a313d35328c4e2fb74ca7922661c45ff2d122720 GIT binary patch literal 7943 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').addClass('plugin-item').addClass(id); var $title = $('').addClass('title').html(title); var $desc = $('').addClass('desc').html(desc); - var $icon = $('').addClass('icon'); + var $icon = $('').addClass('icon').append( + $('').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'); diff --git a/ui/scripts/ui/core.js b/ui/scripts/ui/core.js index 30cd75be180..b2be37998a1 100644 --- a/ui/scripts/ui/core.js +++ b/ui/scripts/ui/core.js @@ -45,6 +45,7 @@ } } + var $li = $('
  • ') .addClass('navigation-item') .addClass(sectionID) @@ -52,6 +53,12 @@ .append($('').html(_l(args.title))) .data('cloudStack-section-id', sectionID); + if (args.customIcon) { + $li.addClass('custom-icon').find('span.icon').html('').append( + $('').attr({ src: args.customIcon }) + ); + } + $li.appendTo($navList); return true;