BUG 000 Improvements in the layout of the dashlets

This commit is contained in:
Julio Cesar Laura
2011-12-14 16:56:31 -04:00
committed by Erik Amaru Ortiz
parent 595135b174
commit b0d8b797e3
3 changed files with 63 additions and 56 deletions

View File

@@ -36,6 +36,8 @@ class dashletProcessMakerCommunity implements DashletInterface {
#container{ #container{
margin: 0 auto; margin: 0 auto;
} }
.clearf{ .clearf{
@@ -49,19 +51,20 @@ class dashletProcessMakerCommunity implements DashletInterface {
.icon{ .icon{
float:left; float:left;
margin-left: 0.5em; margin-left: 5%;
width: 2.5em; width: 13%;
} }
.description{ .description{
float: right; float: right;
margin-right: 0.5em; margin-right: 1%;
width: 26em; width: 79.5%;
font-size: 0.8em; font-size: 64%;
text-align : justify;
} }
.icon img{ .icon img{
@@ -85,11 +88,11 @@ class dashletProcessMakerCommunity implements DashletInterface {
<body> <body>
<div id=\"container\"> <div id=\"container\">
<div class=\"icon\"><img src=\"/images/dashlets/community_forum.png\" /></div> <div class=\"icon\"><img src=\"/images/dashlets/community_forum.png\"/></div>
<div class=\"description\"> <div class=\"description\">
<strong>FORUM - </strong><a href=\"http://forum.processmaker.com/\" target=\"_blank\" title=\"http://forum.processmaker.com\">http://forum.processmaker.com</a> <strong>FORUM - </strong><a href=\"http://forum.processmaker.com/\" target=\"_blank\" title=\"http://forum.processmaker.com\">http://forum.processmaker.com</a>
<br /> <br />
Discuss ProcessMaker issues, interact with the PMOS community, and get support from fellow developers and community members in the ProcessMaker Forum. Discuss Processker issues, interact with the PMOS community, and get support from fellow developers and community members in the ProcessMaker Forum.
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>

View File

@@ -23,7 +23,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" /> <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title></title> <title></title>
<style type=\"text/css\"> <style type=\"text/css\">
body{ body{
margin: 0; margin: 0;
@@ -37,7 +37,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
#container{ #container{
margin: 0 auto; margin: 0 auto;
} }
.clearf{ .clearf{
clear: both; clear: both;
@@ -45,61 +45,62 @@ class dashletProcessMakerEnterprise implements DashletInterface {
line-height: 0; line-height: 0;
font-size: 0; font-size: 0;
} }
.dnone{ .dnone{
display:none; display:none;
} }
.icon{ .icon{
float:left; float:left;
margin-left: 0.5em; margin-left: 4.5%;
width: 2.5em; width: 12%;
} }
.description{ .description{
float: right; float: right;
margin-right: 0.5em; margin-right: 1%;
width: 26em; width: 80.5%;
font-size: 0.8em; font-size: 64%;
text-align : justify;
} }
.icon img{ .icon img{
width: 35px; width: 35px;
} }
.description a{ .description a{
color: #1A4897; color: #1A4897;
font-weight: bold; font-weight: bold;
} }
.icon, .description{ .icon, .description{
margin-top: 0.65em; margin-top: 0.65em;
} }
</style> </style>
<script type=\"text/javascript\"> <script type=\"text/javascript\">
function pageHide(p) function pageHide(p)
{ //document.body.scrollTop = 0; { //document.body.scrollTop = 0;
//document.getElementById(\"container\").scrollIntoView(true); //document.getElementById(\"container\").scrollIntoView(true);
window.scroll(0, 0); window.scroll(0, 0);
document.getElementById(\"page1\").style.display = \"none\"; document.getElementById(\"page1\").style.display = \"none\";
document.getElementById(\"page2\").style.display = \"none\"; document.getElementById(\"page2\").style.display = \"none\";
document.getElementById(\"page1Label\").innerHTML = \"&nbsp;1&nbsp;\"; document.getElementById(\"page1Label\").innerHTML = \"&nbsp;1&nbsp;\";
document.getElementById(\"page2Label\").innerHTML = \"&nbsp;2&nbsp;\"; document.getElementById(\"page2Label\").innerHTML = \"&nbsp;2&nbsp;\";
document.getElementById(\"page\" + p).style.display = \"inline\"; document.getElementById(\"page\" + p).style.display = \"inline\";
document.getElementById(\"page\" + p + \"Label\").innerHTML = \"[&nbsp;\" + p + \"&nbsp;]\"; document.getElementById(\"page\" + p + \"Label\").innerHTML = \"[&nbsp;\" + p + \"&nbsp;]\";
} }
</script> </script>
</head> </head>
<body> <body>
<div id=\"container\"> <div id=\"container\">
<div id=\"page1\"> <div id=\"page1\">
<div class=\"icon\"> <div class=\"icon\">
@@ -113,7 +114,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
<a href=\"http://processmaker.com/workflow-inbox-and-bpm-inbox\" target=\"_blank\">Read More&gt;&gt;</a> <a href=\"http://processmaker.com/workflow-inbox-and-bpm-inbox\" target=\"_blank\">Read More&gt;&gt;</a>
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
<div class=\"icon\"> <div class=\"icon\">
<a href=\"http://processmaker.com/bpm-ldap-and-bpm-active-directory\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_ldap.png\" /></a> <a href=\"http://processmaker.com/bpm-ldap-and-bpm-active-directory\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_ldap.png\" /></a>
</div> </div>
@@ -149,7 +150,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
<a href=\"http://processmaker.com/knowledgetree-workflow-document-management\" target=\"_blank\">Read More&gt;&gt;</a> <a href=\"http://processmaker.com/knowledgetree-workflow-document-management\" target=\"_blank\">Read More&gt;&gt;</a>
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
<div class=\"icon\"> <div class=\"icon\">
<a href=\"http://processmaker.com/electronic-signatures-with-sigplus-signature-pads\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_digital.png\" /></a> <a href=\"http://processmaker.com/electronic-signatures-with-sigplus-signature-pads\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_digital.png\" /></a>
</div> </div>
@@ -162,20 +163,20 @@ class dashletProcessMakerEnterprise implements DashletInterface {
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
</div> </div>
<div id=\"page2\" class=\"dnone\"> <div id=\"page2\" class=\"dnone\">
<div class=\"icon\"> <div class=\"icon\">
<a href=\"http://processmaker.com/digitally-sign-web-forms-elock\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_elock.png\" /></a> <a href=\"http://processmaker.com/digitally-sign-web-forms-elock\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_elock.png\" /></a>
</div> </div>
<div class=\"description\"> <div class=\"description\">
<a href=\"http://processmaker.com/digitally-sign-web-forms-elock\" target=\"_blank\">Elock PKI Certified Digital Signature mobiSigner Connector Plug-in</a> <a href=\"http://processmaker.com/digitally-sign-web-forms-elock\" target=\"_blank\"><div align= left>Elock PKI Certified Digital Signature mobiSigner Connector Plug-in</div></a>
<br />
Plug-in which creates an integration with an Elock Digital Signature server and creates a digital signature field which can be added to web forms or can be used to digitally sign PDFs. This creates true PKI certified digital signatures with SHA encryption. <div align= justify>Plug-in which creates an integration with an Elock Digital Signature server and creates a digital signature field which can be added to web forms or can be used to digitally sign PDFs. This creates true PKI certified digital signatures with SHA encryption.</div>
<br /> <br />
<a href=\"http://processmaker.com/digitally-sign-web-forms-elock\" target=\"_blank\">Read More&gt;&gt;</a> <a href=\"http://processmaker.com/digitally-sign-web-forms-elock\" target=\"_blank\">Read More&gt;&gt;</a>
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
<div class=\"icon\"> <div class=\"icon\">
<a href=\"http://processmaker.com/multi-tenant-management\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_multitenant.png\" /></a> <a href=\"http://processmaker.com/multi-tenant-management\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_multitenant.png\" /></a>
</div> </div>
@@ -187,7 +188,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
<a href=\"http://processmaker.com/multi-tenant-management\" target=\"_blank\">Read More&gt;&gt;</a> <a href=\"http://processmaker.com/multi-tenant-management\" target=\"_blank\">Read More&gt;&gt;</a>
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
<div class=\"icon\"> <div class=\"icon\">
<a href=\"http://processmaker.com/batch-routing-plugin\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_batch.png\" /></a> <a href=\"http://processmaker.com/batch-routing-plugin\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_batch.png\" /></a>
</div> </div>
@@ -199,7 +200,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
<a href=\"http://processmaker.com/batch-routing-plugin\" target=\"_blank\">Read More&gt;&gt;</a> <a href=\"http://processmaker.com/batch-routing-plugin\" target=\"_blank\">Read More&gt;&gt;</a>
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
<div class=\"icon\"> <div class=\"icon\">
<a href=\"http://www.processmaker.com/bpm-outlook-integration\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_outlook.jpg\" /></a> <a href=\"http://www.processmaker.com/bpm-outlook-integration\" target=\"_blank\"><img src=\"/images/dashlets/enterprise_outlook.jpg\" /></a>
</div> </div>
@@ -211,7 +212,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
<a href=\"http://www.processmaker.com/bpm-outlook-integration\" target=\"_blank\">Read More&gt;&gt;</a> <a href=\"http://www.processmaker.com/bpm-outlook-integration\" target=\"_blank\">Read More&gt;&gt;</a>
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
<div class=\"icon\"> <div class=\"icon\">
</div> </div>
<div class=\"description\"> <div class=\"description\">
@@ -223,7 +224,7 @@ class dashletProcessMakerEnterprise implements DashletInterface {
</div> </div>
<div class=\"clearf\"></div> <div class=\"clearf\"></div>
</div> </div>
<div class=\"icon\"> <div class=\"icon\">
</div> </div>
<div class=\"description\"> <div class=\"description\">

View File

@@ -24,10 +24,13 @@ Ext.onReady(function(){
handler : function(a) { handler : function(a) {
var vp = Ext.getCmp('viewportDashboard'); var vp = Ext.getCmp('viewportDashboard');
var pd = Ext.getCmp('portalDashboard'); var pd = Ext.getCmp('portalDashboard');
while (pd.items.items[0].items.items[1]) {
pd.items.items[2].add(pd.items.items[0].items.items[1]);
}
pd.items.items[0].columnWidth = 0.33; pd.items.items[0].columnWidth = 0.33;
pd.items.items[1].columnWidth = 0.33; pd.items.items[1].columnWidth = 0.33;
pd.items.items[2].columnWidth = 0.33; pd.items.items[2].columnWidth = 0.33;
pd.doLayout(); pd.doLayout();
} }
}, },
{ {
@@ -42,7 +45,7 @@ Ext.onReady(function(){
pd.items.items[0].add( pd.items.items[2].items.items[0] ); pd.items.items[0].add( pd.items.items[2].items.items[0] );
} }
pd.items.items[2].columnWidth = 0.01; pd.items.items[2].columnWidth = 0.01;
pd.doLayout(); pd.doLayout();
} }
}, },
{ {
@@ -54,8 +57,8 @@ Ext.onReady(function(){
pd.items.items[0].columnWidth = 0.40; pd.items.items[0].columnWidth = 0.40;
pd.items.items[1].columnWidth = 0.40; pd.items.items[1].columnWidth = 0.40;
pd.items.items[2].columnWidth = 0.20; pd.items.items[2].columnWidth = 0.20;
pd.doLayout(); pd.doLayout();
//vp.doLayout(); //vp.doLayout();
} }
} /* , } /* ,
{ {
@@ -83,12 +86,12 @@ Ext.onReady(function(){
} }
} }
}); });
var vp = Ext.getCmp('viewportDashboard'); var vp = Ext.getCmp('viewportDashboard');
var pd = Ext.getCmp('portalDashboard'); var pd = Ext.getCmp('portalDashboard');
pd.items.items[0].add( np ); pd.items.items[0].add( np );
pd.doLayout(); pd.doLayout();
//vp.doLayout(); //vp.doLayout();
} }
} */ } */
] ]
@@ -118,29 +121,29 @@ Ext.onReady(function(){
style:'padding:10px', style:'padding:10px',
items:[] items:[]
}] }]
/* /*
* Uncomment this block to test handling of the drop event. You could use this * Uncomment this block to test handling of the drop event. You could use this
* to save portlet position state for example. The event arg e is the custom * to save portlet position state for example. The event arg e is the custom
* event defined in Ext.ux.Portal.DropZone. * event defined in Ext.ux.Portal.DropZone.
*/ */
// ,listeners: { // ,listeners: {
// 'drop': function(e){ // 'drop': function(e){
// Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' + // Ext.Msg.alert('Portlet Dropped', e.panel.title + '<br />Column: ' +
// e.columnIndex + '<br />Position: ' + e.position); // e.columnIndex + '<br />Position: ' + e.position);
// } // }
// } // }
}] }]
}); });
//var dashletsInstances = [{"DAS_INS_UID":"00000000000000000000000000000001","DAS_TITLE":"Open Cases VS Complete Cases"}]; //var dashletsInstances = [{"DAS_INS_UID":"00000000000000000000000000000001","DAS_TITLE":"Open Cases VS Complete Cases"}];
var pd = Ext.getCmp('portalDashboard'); var pd = Ext.getCmp('portalDashboard');
var dashletClass = ""; var dashletClass = "";
for ( var i = 0; i < dashletsInstances.length; i++ ) { for ( var i = 0; i < dashletsInstances.length; i++ ) {
dashletClass = dashletsInstances[i].DAS_CLASS; dashletClass = dashletsInstances[i].DAS_CLASS;
switch (dashletClass) { switch (dashletClass) {
case "dashletOpenVSCompleted": case "dashletOpenVSCompleted":
var np = new Ext.ux.Portlet({ var np = new Ext.ux.Portlet({
@@ -183,13 +186,13 @@ Ext.onReady(function(){
page: "dashboard/renderDashletInstance", page: "dashboard/renderDashletInstance",
id: p.dasInsUid id: p.dasInsUid
}) })
p.update(img); p.update(img);
} }
} }
}); });
break; break;
case "dashletProcessMakerEnterprise": case "dashletProcessMakerEnterprise":
var np = new Ext.ux.Portlet({ var np = new Ext.ux.Portlet({
title: dashletsInstances[i].DAS_TITLE, title: dashletsInstances[i].DAS_TITLE,
@@ -208,17 +211,17 @@ Ext.onReady(function(){
page: "dashboard/renderDashletInstance", page: "dashboard/renderDashletInstance",
id: p.dasInsUid id: p.dasInsUid
}) })
p.update(img); p.update(img);
} }
} }
}); });
break; break;
} }
pd.items.items[i % 3].add( np ); pd.items.items[i % 3].add( np );
} //for } //for
pd.doLayout(); pd.doLayout();
}); });