improve application editor view
Project: http://git-wip-us.apache.org/repos/asf/stratos/repo Commit: http://git-wip-us.apache.org/repos/asf/stratos/commit/2b600ea2 Tree: http://git-wip-us.apache.org/repos/asf/stratos/tree/2b600ea2 Diff: http://git-wip-us.apache.org/repos/asf/stratos/diff/2b600ea2 Branch: refs/heads/master-deployment-policy-fix-merge Commit: 2b600ea2df71ec47594f8bc318b7a2eb579c04cf Parents: 53646a5 Author: Dakshika Jayathilaka <[email protected]> Authored: Thu Mar 12 06:03:25 2015 +0530 Committer: Dakshika Jayathilaka <[email protected]> Committed: Thu Mar 12 06:03:25 2015 +0530 ---------------------------------------------------------------------- .../theme0/css/custom/application_editor.css | 12 +++++++++++- .../themes/theme0/js/custom/applications-editor.js | 17 +++++++++++++---- 2 files changed, 24 insertions(+), 5 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/stratos/blob/2b600ea2/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css index 127c3df..31d6c86 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/css/custom/application_editor.css @@ -27,9 +27,15 @@ padding-top: 24px; text-align: center; cursor: pointer; +} + +.stepnode span{ + position: absolute; + width: 4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + margin-left: -27px; } .block-cartridge { @@ -58,6 +64,9 @@ word-wrap: break-word; padding-top: 24px; cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .app-creator { @@ -145,8 +154,9 @@ #component-data{margin-top: 20px} .stepnode i { - margin-top: 2px; + margin-top: 0px; color: #e67e22; + margin-left: -7px; } .notification { http://git-wip-us.apache.org/repos/asf/stratos/blob/2b600ea2/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js ---------------------------------------------------------------------- diff --git a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js index ab09072..2e93aeb 100644 --- a/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js +++ b/components/org.apache.stratos.manager.console/console/themes/theme0/js/custom/applications-editor.js @@ -90,9 +90,11 @@ var cartridgeCounter=0; function addJsplumbCartridge(idname, cartridgeCounter) { var Div = $('<div>').attr({'id':cartridgeCounter+'-'+idname, 'data-type':'cartridge', 'data-ctype':idname } ) - .text(idname) .addClass('input-false') + .attr('data-toggle', 'tooltip') + .attr('title',idname) .appendTo('#whiteboard'); + $(Div).append('<span>'+idname+'</span>'); $(Div).addClass('stepnode'); jsPlumb.addEndpoint($(Div), { anchor: "TopCenter" @@ -107,10 +109,12 @@ function addJsplumbCartridge(idname, cartridgeCounter) { function addJsplumbGroup(groupJSON, cartridgeCounter){ var divRoot = $('<div>').attr({'id':cartridgeCounter+'-'+groupJSON.name,'data-type':'group','data-ctype':groupJSON.name}) - .text(groupJSON.name) .addClass('input-false') + .attr('data-toggle', 'tooltip') + .attr('title',groupJSON.name) .addClass('stepnode') .appendTo('#whiteboard'); + $(divRoot).append('<span>'+groupJSON.name+'</span>'); $(divRoot).append('<div class="notification"><i class="fa fa-exclamation-circle fa-2x"></i></div>'); jsPlumb.addEndpoint($(divRoot), { anchor:"BottomCenter" @@ -134,10 +138,12 @@ function addJsplumbGroup(groupJSON, cartridgeCounter){ for (var i = 0; i < item.length; i++) { var id = item[i]; var divCartridge = $('<div>').attr({'id':cartridgeCounter+'-'+parentName+'-'+item[i],'data-type':'cartridge','data-ctype':item[i]} ) - .text(item[i]) .addClass('input-false') + .attr('data-toggle', 'tooltip') + .attr('title',item[i]) .addClass('stepnode') .appendTo('#whiteboard'); + $(divCartridge).append('<span>'+item[i]+'</span>'); $(divCartridge).append('<div class="notification"><i class="fa fa-exclamation-circle fa-2x"></i></div>'); jsPlumb.addEndpoint($(divCartridge), { anchor: "TopCenter" @@ -160,10 +166,12 @@ function addJsplumbGroup(groupJSON, cartridgeCounter){ function genJsplumbGroups(item, currentParent, parentName) { for (var prop in item) { var divGroup = $('<div>').attr({'id':cartridgeCounter+'-'+parentName+'-'+item[prop]['name'],'data-type':'group','data-ctype':item[prop]['name'] }) - .text(item[prop]['name']) .addClass('stepnode') + .attr('data-toggle', 'tooltip') + .attr('title',item[prop]['name']) .addClass('input-false') .appendTo('#whiteboard'); + $(divGroup).append('<span>'+item[prop]['name']+'</span>'); $(divGroup).append('<div class="notification"><i class="fa fa-exclamation-circle fa-2x"></i></div>'); jsPlumb.addEndpoint($(divGroup), { anchor:"BottomCenter" @@ -633,6 +641,7 @@ function generateGroups(data){ var groupData = data[group]; groupListHtml += '<div class="block-group" ' + ' data-info="' + encodeURIComponent(JSON.stringify(groupData)) + '"' + + 'data-toggle="tooltip" data-placement="bottom" title="'+groupData.name+'"'+ 'id="' + groupData.name + '">' + groupData.name + '</div>'
