Javascript improvements: add local storage, improve caching using URI fragments instead of query strings, simplify component layout and optimize some of the Javascript functions, and add the ability to clone components.

git-svn-id: http://svn.us.apache.org/repos/asf/tuscany@1154447 13f79535-47bb-0310-9956-ffa450edef68

1 files changed, 91 insertions, 42 deletions

diff --git a/sca-cpp/trunk/modules/js/htdocs/ui.css b/sca-cpp/trunk/modules/js/htdocs/ui.css
index 0842523bf2..b4c27a54e8 100644
--- a/sca-cpp/trunk/modules/js/htdocs/ui.css
+++ b/sca-cpp/trunk/modules/js/htdocs/ui.css
@@ -18,10 +18,10 @@
  */
 
 body {
-margin: 2px; font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
+margin-top: 0px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px;
+font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 13px;
 -webkit-text-size-adjust: none;
 -webkit-touch-callout: none;
--webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-user-select: none;
 }
 
@@ -30,7 +30,43 @@ visibility: hidden;
 }
 
 .devicewidth {
-position: absolute; top: 0px; left: 0px; right: 0px; height: 5000px; overflow: hidden;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+}
+
+.bodydiv {
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+}
+
+.bodydivloading {
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+-webkit-transform: translate(100%, 0px); -webkit-backface-visibility: hidden;
+-moz-transform: translate(100%, 0px);
+-ms-transform: translate(100%, 0px);
+transform: translate(100%, 0px);
+}
+
+.bodydivloaded {
+-webkit-transition: -webkit-transform 0.4s linear;
+-moz-transition: -moz-transform 0.4s linear;
+-ms-transition: -ms-transform 0.4s linear;
+transition: transform 0.4s linear;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+-webkit-transform: translate3d(0px, 0px, 0px); -webkit-backface-visibility: hidden;
+-moz-transform: translate(0px, 0px);
+-ms-transform: translate(0px, 0px);
+transform: translate(0px, 0px);
+}
+
+.bodydivunloaded {
+-webkit-transition: -webkit-transform 0.4s linear;
+-moz-transition: -moz-transform 0.4s linear;
+-ms-transition: -ms-transform 0.4s linear;
+transition: transform 0.4s linear;
+position: absolute; top: 0px; left: 0px; width: 100%; height: 5000px; overflow: hidden;
+-webkit-transform: translate3d(-100%, 0px, 0px); -webkit-backface-visibility: hidden;
+-moz-transform: translate(-100%, 0px);
+-ms-transform: translate(-100%, 0px);
+transform: translate(-100%, 0px);
 }
 
 table {
@@ -44,31 +80,31 @@ border-bottom: 1px; border-bottom-style: solid; border-color: #dcdcdc;
 }
 
 th {
-font-weight: bold; background-color: #e5ecf9; color: #000000; height: 18px;
+font-weight: bold; background-color: #d4e6fc; color: #000000; height: 18px;
 text-align: left; padding-left: 2px; padding-right: 8px; padding-top: 0px; padding-bottom: 0px; vertical-align: middle; white-space: nowrap;
 border-top: 1px; border-bottom: 1px; border-left: 1px; border-right: 1px; border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #a2bae7; border-right-color: #a2bae7;
 overflow: hidden;
 }
 
 .section {
-font-weight: bold; background-color: #e5ecf9; color: #000000; height: 24px; padding-top: 1px; padding-bottom: 0px; padding-left: 2px; padding-right: 2px;
+font-weight: bold; background-color: #d4e6fc; color: #000000; height: 24px; padding-top: 1px; padding-bottom: 0px; padding-left: 2px; padding-right: 2px;
 border-top: 1px; border-bottom: 1px; border-left: 0px; border-right: 0px; border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #a2bae7; border-right-color: #a2bae7;
 overflow: hidden;
 }
 
 .hsection {
 width: 100%; height: 50px;
-border-top: 0px; border-bottom: 1px; border-left: 0px; border-right: 0px; border-style: solid; border-bottom-color: #000000; background-color: #ffffff;
-padding: 0px; margin-bottom: 4px; margin-left: auto; margin-right: auto; text-align: center;
+border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px; border-style: solid; border-bottom-color: #000000; background-color: #ffffff;
+padding: 0px; margin-bottom: 0px; margin-left: auto; margin-right: auto; text-align: center;
 }
 
 .fsection{
 width: 100%; height: 50px; border-top: 0px; border-bottom: 0px; border-left: 0px; border-right: 0px; border-style: solid; border-top-color: #a2bae7;
-padding: 0px; margin-top: 4px; margin-left: auto; margin-right: auto; text-align: center;
+padding: 0px; margin-top: 0px; margin-left: auto; margin-right: auto; text-align: center;
 }
 
 .text {
-padding-top: 3px; padding-bottom: 4px; vertical-align: middle;
+padding-top: 3px; padding-bottom: 4px; vertical-align: middle; white-space: nowrap;
 }
 
 .thl {
@@ -156,35 +192,35 @@ border: 0px;
 }
 
 a:link {
-color: #598edd; text-decoration: none;
+color: #598edd; text-decoration: none; white-space: nowrap;
 }
 
 a:visited {
-color: #598edd; text-decoration: none;
+color: #598edd; text-decoration: none; white-space: nowrap;
 }
 
 .amenu {
-color: #598edd; text-decoration: none;
+color: #598edd; text-decoration: none; white-space: nowrap;
 }
 
 .smenu {
-font-weight: bold; color: #000000; text-decoration: none;
+font-weight: bold; color: #000000; text-decoration: none; white-space: nowrap;
 }
 
 h1 {
-font-size: 150%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px;
+font-size: 150%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px; white-space: nowrap;
 }
 
 h2 {
-font-size: 120%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px;
+font-size: 120%; font-weight: bold; vertical-align: middle; margin-top: 5px; margin-bottom: 5px; margin-left: 2px; margin-right: 2px; white-space: nowrap;
 }
 
 .hd1 {
-font-size: 150%; font-weight: bold;
+font-size: 150%; font-weight: bold; white-space: nowrap;
 }
 
 .hd2 {
-font-size: 120%; font-weight: bold;
+font-size: 120%; font-weight: bold; white-space: nowrap;
 }
 
 img {
@@ -206,10 +242,10 @@ padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #96d333;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));
+background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 80%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#96d333));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);
+background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 80%);
 border: 1px outset #dcdcdc;
 padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
 cursor: pointer;
@@ -219,10 +255,10 @@ cursor: pointer;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #96d333;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#96d333));
+background: -moz-linear-gradient(top, #f8f8f8 0%, #96d333 80%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#96d333));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#96d333',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 100%);
+background: -o-linear-gradient(top, #f8f8f8 0%,#96d333 80%);
 border: 1px outset #dcdcdc;
 padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
 cursor: pointer;
@@ -232,10 +268,10 @@ cursor: pointer;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #598edd;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #598edd 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#598edd));
+background: -moz-linear-gradient(top, #f8f8f8 0%, #598edd 80%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#598edd));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#598edd',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#598edd 100%);
+background: -o-linear-gradient(top, #f8f8f8 0%,#598edd 80%);
 border: 1px outset #dcdcdc;
 padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
 cursor: pointer;
@@ -245,10 +281,10 @@ cursor: pointer;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #d03f41;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #d03f41 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#d03f41));
+background: -moz-linear-gradient(top, #f8f8f8 0%, #d03f41 80%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#d03f41));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#d03f41',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#d03f41 100%);
+background: -o-linear-gradient(top, #f8f8f8 0%,#d03f41 80%);
 border: 1px outset #dcdcdc;
 padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
 cursor: pointer;
@@ -258,10 +294,10 @@ cursor: pointer;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #ffbb00;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #ffbb00 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#ffbb00));
+background: -moz-linear-gradient(top, #f8f8f8 0%, #ffbb00 80%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#ffbb00));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#ffbb00',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#ffbb00 100%);
+background: -o-linear-gradient(top, #f8f8f8 0%,#ffbb00 80%);
 border: 1px outset #dcdcdc;
 padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
 cursor: pointer;
@@ -271,10 +307,10 @@ cursor: pointer;
 -webkit-border-radius: 4px;
 border-radius: 4px;
 background: #dcdcdc;
-background: -moz-linear-gradient(top, #f8f8f8 0%, #dcdcdc 100%);
-background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dcdcdc));
+background: -moz-linear-gradient(top, #f8f8f8 0%, #dcdcdc 80%);
+background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(80%,#dcdcdc));
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#dcdcdc',GradientType=0 );
-background: -o-linear-gradient(top, #f8f8f8 0%,#dcdcdc 100%);
+background: -o-linear-gradient(top, #f8f8f8 0%,#dcdcdc 80%);
 border: 1px outset #dcdcdc;
 padding-left: 4px; padding-right: 4px; padding-top: 2px; padding-bottom: 2px; margin: 2px;
 margin: 2px;
@@ -282,23 +318,32 @@ cursor: pointer;
 }
 
 .tbar {
-margin: 0px; width: 100%; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 3px; border-bottom: 1px solid #a2bae7; border-collapse: separate;
+margin: 0px; width: 100%; padding-top: 0px; padding-left: 0px; padding-right: 0px; padding-bottom: 0px; border-collapse: separate;
+background-color: #2c2c2c;
 }
 
 .ltbar {
-padding-left: 2px; padding-top: 2px; padding-right: 6px; white-space: nowrap; vertical-align: middle;
+padding-left: 2px; padding-right: 6px; padding-top: 3px; padding-bottom: 4px; white-space: nowrap; vertical-align: middle;
 }
 
 .dtbar {
-padding-left: 0px; padding-right: 0px; padding-top: 2px; white-space: nowrap; vertical-align: middle; text-align: right;
+padding-left: 0px; padding-right: 0px; padding-top: 3px; padding-bottom: 4px; white-space: nowrap; vertical-align: middle; text-align: right;
 }
 
 .rtbar {
-padding-left: 6px; padding-right: 2px; padding-top: 2px; white-space: nowrap; vertical-align: middle; text-align: right;
+padding-left: 6px; padding-right: 2px; padding-top: 3px; padding-bottom: 4px; white-space: nowrap; vertical-align: middle; text-align: right;
+}
+
+.tbaramenu {
+color: #cccccc; text-decoration: none; white-space: nowrap;
+}
+
+.tbarsmenu {
+font-weight: bold; color: #ffffff; text-decoration: none; white-space: nowrap;
 }
 
 .suggest {
-background-color: #e5ecf9; color: #598edd;
+background-color: #d4e6fc; color: #598edd;
 border-top: 1px; border-bottom: 1px; border-left: 1px; border-right: 1px; border-style: solid; border-top-color: #a2bae7; border-bottom-color: #d1d3d4; border-left-color: #d1d3d4; border-right-color: #d1d3d4;
 position: absolute; overflow: auto; overflow-x: hidden; padding: 0px; margin: 0px;
 cursor: default;
@@ -309,10 +354,14 @@ border: 0px; border-collapse: separate; padding-left: 5px; padding-right: 5px; p
 }
 
 .suggestItem {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #e5ecf9; color: #598edd;
+padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #d4e6fc; color: #598edd;
 }
 
 .suggestHilighted {
-padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #598edd; color: #e5ecf9;
+padding-left: 2px; padding-top: 0px; padding-bottom: 0px; padding-right: 2px; vertical-align: middle; background-color: #598edd; color: #d4e6fc;
+}
+
+.svgtitle {
+margin: 0px; padding: 0px; font-family: "Helvetica Neue", Helvetica; font-style: normal; font-variant: normal; font-size: 10px; cursor: default;
 }