UI improvements.

	Moved search highligher to search tab.
	Added nice icons for navigation buttons etc.
	Removed footer navigation
	Corrected tree colorings
	Overall, some css magic

diff --git a/xsl/webhelp/template/common/css/ie.css b/xsl/webhelp/template/common/css/ie.css
new file mode 100755 (executable)
index 0000000..4c5f1c2
--- /dev/null
+++ b/xsl/webhelp/template/common/css/ie.css
@@ -0,0 +1,13 @@
+.statustext{
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)
+            progid:DXImageTransform.Microsoft.BasicImage(opacity=.5);  
+    width: 100%;
+    height: 30px;
+    right: -5px;
+    top:105px;
+    /* left: 280px; */ /* change to -12px; when sidebar is collapsed */
+}
+
+body #content{                      
+    padding-top: 136px;
+}

diff --git a/xsl/webhelp/template/common/css/positioning.css b/xsl/webhelp/template/common/css/positioning.css
index e5ac5ad093fea98cae18d7bb53d283a217a6d199..05e6c95a479595b89e2a334cd8563a007e54de93 100755 (executable)
--- a/xsl/webhelp/template/common/css/positioning.css
+++ b/xsl/webhelp/template/common/css/positioning.css
@@ -1,10 +1,29 @@
+tr th .added { color: #E6E6FA; } 
+tr th .changed {color: #99ff99; }
+div.added tr, div.added    { background-color: #E6E6FA; }
+div.deleted tr, div.deleted  { text-decoration: line-through;
+               background-color: #FF7F7F; }
+div.changed tr, div.changed  { background-color: #99ff99; }
+div.off      {  }
+
+span.added   { background-color: #E6E6FA; }
+span.deleted { text-decoration: line-through;
+               background-color: #FF7F7F; }
+span.changed { background-color: #99ff99; }
+span.off     {  }
+
+
 body { font: 12px Verdana, Geneva, sans-serif; }
 p, ul, ol, li { font: 10pt Verdana, Geneva, sans-serif; }
-h1 { font: bold 15pt Arial, Helvetica, geneva; }
-h2 { font: bold 14pt Arial, Helvetica, geneva; }
+h1 { font: 15pt Arial, Helvetica, geneva;
+     color: black!important!;
+}
+h2 { font: normal 12pt Arial, Helvetica, geneva;
+       color: black!important;
+}
 
 #header {
-    background: white url(../images/header-bg.gif) repeat-x;
+    background: #444444 url("../images/main_bg_fade.png") scroll top left no-repeat;
     position: fixed;
     width: 100%;
     height: 95px;
@@ -12,10 +31,30 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
     right: 0;
     bottom: auto;
     left: 0;
-    border-bottom: 2px solid #cccccc;
+    border-bottom: 1px solid #bbc4c5;
     z-index: 2000;
 }
 
+#header h1 {
+    color: #fff;
+    margin-left: 310px;
+}
+
+#header h1, p.breadcrumbs {
+    margin-top: 30px;
+    margin-left: 310px;
+}
+
+#header img {
+    float: left;
+    margin-left: 20px;
+    margin-top: 12px;
+}
+
+#header p.breadcrumbs a {
+    color: #bbb;
+}
+
 #leftnavigation {
 /* background-color:#91e7b3;*/
     overflow: auto;
@@ -26,7 +65,9 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
     left: 0;
     width: 280px;
     z-index: 1500;
-    border-right:2px solid #CCCCCC;
+    border-right:2px solid #bbc4c5;
+    padding: 0px;
+    background-color: #f0f0f0!important;
 }
 
 #treeDiv {
@@ -39,6 +80,7 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
     width: 243px;
     z-index: 1500;
     border-right:2px solid #CCCCCC;
+    background-color: #f0f0f0!important;
 }
 
 #searchDiv {
@@ -51,6 +93,7 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
     width: 243px;
     z-index: 1500;
     border-right:2px solid #CCCCCC;
+    background-color: #f0f0f0!important;
 }
 
 #content {
@@ -65,36 +108,82 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
     color: #000000;
     /*border-left: 2px solid #cccccc; overflow :scroll;*/
     z-index: 1000;
-
-    max-width: 70em;
     min-width:800px;
 }
 
 #navheader {
     position: fixed;
-    top: 65px;
-    right:4px;
+    background: #fff;
+    border-radius: 5px 0px 0px 5px;
+    padding-left: 10px;
+    right: 0px;
+    top: 37px;
 }
 
-#content h1, #content h2 { color: #cc0000; }
+#content h1, #content h2 { color: black; }
 .navfooter { bottom: 2%; }
 .highlight { background-color: #c5d3c3; }
 .highlightButton{ font-size: 0; }
 
+#content pre.literallayout, #content pre.programlisting 
+{
+    -x-system-font: none;
+    background-color: silver;
+    border-bottom-color: #DEDEDE !important;
+    border-bottom-style: solid !important;
+    border-bottom-width: 1px !important;
+    border-left-color-ltr-source: physical !important;
+    border-left-color-rtl-source: physical !important;
+    border-left-color-value: #DEDEDE !important;
+    border-left-style-ltr-source: physical !important;
+    border-left-style-rtl-source: physical !important;
+    border-left-style-value: solid !important;
+    border-left-width-ltr-source: physical !important;
+    border-left-width-rtl-source: physical !important;
+    border-left-width-value: 1px !important;
+    border-right-color-ltr-source: physical !important;
+    border-right-color-rtl-source: physical !important;
+    border-right-color-value: #DEDEDE !important;
+    border-right-style-ltr-source: physical !important;
+    border-right-style-rtl-source: physical !important;
+    border-right-style-value: solid !important;
+    border-right-width-ltr-source: physical !important;
+    border-right-width-rtl-source: physical !important;
+    border-right-width-value: 1px !important;
+    border-top-color: #DEDEDE !important;
+    border-top-style: solid !important;
+    border-top-width: 1px !important;
+    color: #23302D;
+    display: block;
+    font-family: Monaco,'Courier New','DejaVu Sans Mono','Bitstream Vera Sans Mono',monospace;
+    font-size: 12px !important;
+    font-size-adjust: none;
+    font-stretch: normal;
+    font-style: normal;
+    font-variant: normal;
+    font-weight: normal;
+    line-height: normal;
+    margin-bottom: 1em !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    margin-top: 1em !important;
+    overflow-x: scroll;
+    padding-bottom: 0.5em !important;
+    padding-left: 0.5em !important;
+    padding-right: 0.5em !important;
+    padding-top: 0.5em !important;
+    width: 100%;
+}
+
 /*  Show Hide TOC tree */
 .pointLeft {
-    background: url("../images/showHideTreeIcons.png") 0 0 no-repeat;
-    height: 28px;
-    width: 15px;
+    padding-right: 5px;
     display: block;
-    font-size: 0;
     cursor: pointer;
 }
 .pointRight {
-    background: url("../images/showHideTreeIcons.png") -15px 0 no-repeat;
-    height: 28px;
+    padding-right: 5px;
     display: block;
-    font-size: 0;
     cursor: pointer;
 }
 
@@ -132,6 +221,29 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
        font-weight: bold;
        }       
 
+p.breadcrumbs {
+        display: inline;
+       margin-bottom: 0px;
+       margin-top: 33px;
+}
+
+p.breadcrumbs a {
+       padding-right: 12px;
+       margin-right: 5px;
+       text-decoration: none;
+       color: #575757;
+       text-transform: uppercase;
+       font-size: 10px;
+}
+
+p.breadcrumbs a:first-child {
+    background: url(../images/breadcrumb-arrow-white.png) no-repeat right center;
+}
+
+p.breadcrumbs a:hover {
+       text-decoration: underline;
+}
+
 /* OXYGEN ADDITION FOR SEARCH RESULT RATING */
 
 #star ul.star { 
@@ -166,3 +278,167 @@ h2 { font: bold 14pt Arial, Helvetica, geneva; }
     FONT-SIZE: 1px; 
 }
 
+<!--
+#header h1 {
+       margin-top: 2px;
+}
+-->
+
+table.navLinks {
+       margin-right: 20px;
+}
+
+table.navLinks td a {
+       text-decoration: none;
+       text-transform: uppercase;
+       color: black;
+       font-size: 11px;
+}
+
+a.navLinkPrevious {
+       padding-left: 12px;
+       background: url(../images/previous-arrow.png) no-repeat left center;
+}
+
+a.navLinkNext {
+       padding-right: 12px;
+       background: url(../images/next-arrow.png) no-repeat right center;
+}
+
+a#showHideButton {
+       padding-left: 20px;
+       background: url(../images/sidebar.png) no-repeat left center;
+}
+
+       
+.filetree li span a { color: #777; }
+
+#treediv { -webkit-box-shadow: #CCC 0px 1px 2px 0px inset; }
+
+.legal, .legal *{
+ color: #555;
+ text-align: center;
+ padding-bottom: 10px;
+}
+
+.internal
+       {
+       color : #0000CC;
+       }
+
+.writeronly
+       {
+       color : red;
+       }
+
+.remark, .remark .added, .remark .changed, .remark .deleted{
+       background: yellow;
+       } 
+
+tr th, tr th .internal, tr th .added, tr th .changed
+       {
+       background: #00589E;
+       color: white;
+       font-weight: bold;
+       text-align: left;
+       }
+
+.statustext{
+    position:fixed;
+    top:105px;
+    width: 0%;
+    height: 0%;
+    opacity: .3;
+    -webkit-transform: rotate(90deg);
+    -moz-transform: rotate(90deg);
+    -o-transform: rotate(90deg);
+    white-space: nowrap;
+    color: red;
+    font-weight: bold;
+    font-size: 2em;
+    margin-top: 30px;
+    }
+
+#toolbar {
+       width: 100%;
+       height: 33px;
+       position: fixed;
+       top: 93px;
+       z-index: 99;
+       left: 280px;
+       color: #333;
+       line-height: 28px;
+       padding-left: 10px;
+}
+
+#toolbar-left {
+       position: relative;
+       left: 0px;
+}
+ 
+body p.breadcrumbs {
+       margin: 0px;
+       padding: 0px;
+       line-height: 28px;
+}
+
+body #content {
+       position: static;
+       margin-top: 126px;
+       top: 0px;
+}
+
+<!--
+#header h1 {
+    position: fixed;
+    top: 35px;
+    left: -15px;
+    color: white!important;
+}
+-->
+
+body.sidebar #toolbar{
+   left: 0px;
+}
+
+body.sidebar #toolbar-left{
+   left: 0px;
+}
+
+div#toolbar-left img {
+    vertical-align: text-top;
+}
+
+
+div.note *, div.caution *, div.important *, div.tip *, div.warning * {
+    background: inherit !important;
+    color: inherit !important;
+    border: inherit  !important;    
+}
+
+#content table thead, #content table th{
+    background: gray;
+    color: white;
+    font-weight: bold;
+}
+
+#content table caption{
+    font-weight: bold;
+}
+
+#content table td, #content table {
+       border: 1px solid black;
+}
+
+#content table td, #content table th {
+       padding: 5px;
+}
+
+#content table {
+       margin-bottom: 20px;
+
+}
+
+*[align = 'center']{
+    text-align: center;
+}

diff --git a/xsl/webhelp/template/common/images/main_bg_fade.png b/xsl/webhelp/template/common/images/main_bg_fade.png
new file mode 100755 (executable)
index 0000000..9423ed4
Binary files /dev/null and b/xsl/webhelp/template/common/images/main_bg_fade.png differ

diff --git a/xsl/webhelp/template/common/images/next-arrow.png b/xsl/webhelp/template/common/images/next-arrow.png
new file mode 100755 (executable)
index 0000000..db595f4
Binary files /dev/null and b/xsl/webhelp/template/common/images/next-arrow.png differ

diff --git a/xsl/webhelp/template/common/images/previous-arrow.png b/xsl/webhelp/template/common/images/previous-arrow.png
new file mode 100755 (executable)
index 0000000..347bc53
Binary files /dev/null and b/xsl/webhelp/template/common/images/previous-arrow.png differ

diff --git a/xsl/webhelp/template/common/images/sidebar.png b/xsl/webhelp/template/common/images/sidebar.png
new file mode 100755 (executable)
index 0000000..5492671
Binary files /dev/null and b/xsl/webhelp/template/common/images/sidebar.png differ

diff --git a/xsl/webhelp/template/common/main.js b/xsl/webhelp/template/common/main.js
index f3427a5372f3152f74a62cbf195f0576dbd77b58..3220a9309f0e51c8fd258e4f6dbc5cff06a9c9c2 100755 (executable)
--- a/xsl/webhelp/template/common/main.js
+++ b/xsl/webhelp/template/common/main.js
@@ -103,10 +103,10 @@ function syncToc() {
             var ulNode = a.getElementsByTagName("ul")[0];
             if (ulNode != undefined) {
                 if (ulNode.hasAttribute("style")) {
-                    ulNode.setAttribute("style", "display: block;");
+                    ulNode.setAttribute("style", "display: block; background-color: #D8D8D8 !important;");
                 } else {
                     var ulStyle = document.createAttribute("style");
-                    ulStyle.nodeValue = "display: block;";
+                    ulStyle.nodeValue = "display: block; background-color: #D8D8D8 !important;";
                     ulNode.setAttributeNode(ulStyle);
             }   }
             //adjust tree's + sign to -
@@ -128,15 +128,16 @@ function syncToc() {
             //Setting the background for selected node.
             var style = a.getAttribute("style", 2);
             if (style != null && !style.match(/background-color: Background;/)) {
-                a.setAttribute("style", "background-color: #6495ed;  " + style);
-                b.setAttribute("style", "color: white;");
+                a.setAttribute("style", "background-color: #D8D8D8;  " + style);
+                b.setAttribute("style", "color: black;");
             } else if (style != null || style != "") {
-                a.setAttribute("style", "background-color: #6495ed;  " + style);
-                b.setAttribute("style", "color: white;");
+                a.setAttribute("style", "background-color: #D8D8D8;  " + style);
+                b.setAttribute("style", "color: black;");
             } else {
-                a.setAttribute("style", "background-color: #6495ed;  ");
-                b.setAttribute("style", "color: white;");
-    }   }
+                a.setAttribute("style", "background-color: #D8D8D8;  ");
+                b.setAttribute("style", "color: black;");
+            }
+        }
 
         //shows the node related to current content.
         //goes a recursive call from current node to ancestor nodes, displaying all of them.
@@ -194,13 +195,13 @@ function showHideToc() {
     if (showHideButton != undefined && showHideButton.hasClass("pointLeft")) {
         //Hide TOC
         showHideButton.removeClass('pointLeft').addClass('pointRight');
-        content.css("margin", "0 0 0 0");
+        content.css("margin", "125px 0 0 0");
         leftNavigation.css("display", "none");
         showHideButton.attr("title", "Show the TOC tree");
     } else {
         //Show the TOC
         showHideButton.removeClass('pointRight').addClass('pointLeft');
-        content.css("margin", "0 0 0 280px");
+        content.css("margin", "125px 0 0 280px");
         leftNavigation.css("display", "block");
         showHideButton.attr("title", "Hide the TOC Tree");
     }

diff --git a/xsl/webhelp/xsl/webhelp.xsl b/xsl/webhelp/xsl/webhelp.xsl
index e8517ea25a49abcdc508084f33c7c08b4609e6b6..e96828e7c240d5eb539f56051a2f2cbbd6dd8c2f 100755 (executable)
--- a/xsl/webhelp/xsl/webhelp.xsl
+++ b/xsl/webhelp/xsl/webhelp.xsl
@@ -193,6 +193,16 @@ These problems go away when you add this IE=7 mode meta tag.
             padding-left: 20px;
             background: transparent url(<xsl:value-of select="$webhelp.common.dir"/>jquery/treeview/images/folder.gif) 0 0px no-repeat;
             }
+
+                       /* Overide jquery treeview's defaults for ul. */
+                       .treeview ul {
+                           background-color: #F0F0F0 !important;
+                           margin-top: 4px;
+                       }
+               
+                       #webhelp-currentid {
+                                background-color: #D8D8D8 !important;
+                       }
         </style>
        <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
         <link rel="stylesheet" type="text/css" href="{$webhelp.common.dir}css/positioning.css"/>
@@ -444,11 +454,15 @@ These problems go away when you add this IE=7 mode meta tag.
 
                     <xsl:call-template name="user.footer.content"/>
 
-                    <xsl:call-template name="footer.navigation">
+                                       <hr/>
+                                       <div class="legal"><a href="index.html">Legal notices</a></div>
+
+                                       <!-- Redundant since the upper navigation bar always visible -->
+                    <!--xsl:call-template name="footer.navigation">
                         <xsl:with-param name="prev" select="$prev"/>
                         <xsl:with-param name="next" select="$next"/>
                         <xsl:with-param name="nav.context" select="$nav.context"/>
-                    </xsl:call-template>
+                    </xsl:call-template-->
 
                    <xsl:call-template name="user.webhelp.content.footer"/>
                 </div>
@@ -473,8 +487,9 @@ These problems go away when you add this IE=7 mode meta tag.
         <xsl:variable name="up" select="parent::*"/>
 
         <div id="header">
-           <xsl:call-template name="webhelpheader.logo"/>
-
+           <!--xsl:call-template name="webhelpheader.logo"/-->
+               <img style='margin-right: 2px; height: 59px; padding-right: 25px; padding-top: 8px' align="right"
+                  src='{$webhelp.common.dir}images/logo.png' alt="Company Logo"/>
             <!-- Display the page title and the main heading(parent) of it-->
             <h1 align="center">
                 <xsl:apply-templates select="." mode="object.title.markup"/>
@@ -492,20 +507,20 @@ These problems go away when you add this IE=7 mode meta tag.
             <div id="navheader" align="right">
                 <xsl:comment>
                     <!-- KEEP this code. In case of neither prev nor next links are available, this will help to
-                    keep the integrity of the DOM tree-->
+                        keep the integrity of the DOM tree-->
                 </xsl:comment>
                 <!--xsl:with-param name="prev" select="$prev"/>
                 <xsl:with-param name="next" select="$next"/>
                 <xsl:with-param name="nav.context" select="$nav.context"/-->
-                <table>
+                <table class="navLinks">
                     <tr>
-                        <td style="height: 28px; width: 16px;">
+                        <td>
                             <a id="showHideButton" onclick="showHideToc();"
-                               class="pointLeft" title="Hide TOC tree">.
+                                class="pointLeft" title="Hide TOC tree">Sidebar
                             </a>
                         </td>
                         <td>
-                         <xsl:if test="$webhelp.include.search.tab = 'true'">
+                         <!--xsl:if test="$webhelp.include.search.tab = 'true'">
                             <img src="{$webhelp.common.dir}images/highlight-blue.gif" alt="H" height="25px"
                                  onclick="toggleHighlight()" id="showHideHighlight" style="cursor:pointer">
                                <xsl:attribute name="title">
@@ -514,16 +529,16 @@ These problems go away when you add this IE=7 mode meta tag.
                                  </xsl:call-template>                            
                                </xsl:attribute>
                            </img>
-                         </xsl:if>
+                         </xsl:if-->
                         </td>
                         <xsl:if test="count($prev) &gt; 0
-                                        or (count($up) &gt; 0
-                                        and generate-id($up) != generate-id($home)
-                                        and $navig.showtitles != 0)
-                                        or count($next) &gt; 0">
+                            or (count($up) &gt; 0
+                            and generate-id($up) != generate-id($home)
+                            and $navig.showtitles != 0)
+                            or count($next) &gt; 0">
                             <td>
                                 <xsl:if test="count($prev)>0">
-                                    <a accesskey="p" tabindex="5">
+                                    <a accesskey="p" class="navLinkPrevious" tabindex="5">
                                         <xsl:attribute name="href">
                                             <xsl:call-template name="href.target">
                                                 <xsl:with-param name="object" select="$prev"/>
@@ -540,7 +555,7 @@ These problems go away when you add this IE=7 mode meta tag.
                                     <xsl:when test="count($up)&gt;0
                                               and generate-id($up) != generate-id($home)">
                                         |
-                                        <a accesskey="u" tabindex="5">
+                                        <a accesskey="u" class="navLinkUp" tabindex="5">
                                             <xsl:attribute name="href">
                                                 <xsl:call-template name="href.target">
                                                     <xsl:with-param name="object" select="$up"/>
@@ -556,7 +571,7 @@ These problems go away when you add this IE=7 mode meta tag.
                                 
                                 <xsl:if test="count($next)>0">
                                     |
-                                    <a accesskey="n" tabindex="5">
+                                    <a accesskey="n" class="navLinkNext" tabindex="5">
                                         <xsl:attribute name="href">
                                             <xsl:call-template name="href.target">
                                                 <xsl:with-param name="object" select="$next"/>
@@ -702,6 +717,7 @@ These problems go away when you add this IE=7 mode meta tag.
                                     <div id="searchResults">
                                            <center> </center>
                                     </div>
+                                    <p class="searchHighlight"><a href="#" onclick="toggleHighlight()">Search Highlighter (On/Off)</a></p>
                                 </div>
                             </xsl:if>
                            <xsl:call-template name="user.webhelp.tabs.content"/>