Extended new doxygen layout with version dropdown + minor cleanup. (#34)

* Extended new doxygen layout with version dropdown + minor cleanup. * Removed unnecessary reference to printComponentTabs.js
3 years ago · 5d43a377b6
parent da2a055e21
commit 5d43a377b6
6 changed files with 38 additions and 49 deletions
--- a/Documentation/dropdown.png
+++ b/Documentation/dropdown.png
--- a/Doxygen/dsp.dxy.in
+++ b/Doxygen/dsp.dxy.in
@ -1324,8 +1324,9 @@ HTML_EXTRA_FILES       = templates/tabs.css \
                         templates/search.css \
                         templates/navtree.css \
                         templates/tab_b.png \
-                         templates/printComponentTabs.js \
                         templates/navtree.js \
+                         templates/version.css \
+                         templates/dropdown.png \
                         ../LICENSE.txt

 # The HTML_COLORSTYLE_HUE tag controls the color of the HTML output. Doxygen
--- a/Doxygen/templates/dropdown.png
+++ b/Doxygen/templates/dropdown.png
--- a/Doxygen/templates/header.html
+++ b/Doxygen/templates/header.html
@ -16,13 +16,14 @@

 <script type="text/javascript" src="$relpath^jquery.js"></script>
 <script type="text/javascript" src="$relpath^dynsections.js"></script>
-<script type="text/javascript" src="$relpath^printComponentTabs.js"></script>
 <script type="text/javascript" src="$relpath^footer.js"></script>
 $treeview
 $search
 $mathjax
 <link href="$relpath^$extra_stylesheet" rel="stylesheet" type="text/css" />
 $extrastylesheet
+<link href="$relpath^version.css" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="../version.js"></script>
 </head>
 <body>
 <!--BEGIN DISABLE_INDEX-->
@ -43,7 +44,13 @@ $extrastylesheet
  <!--BEGIN PROJECT_NAME-->
   <div id="projectname">$projectname
   <!--END PROJECT_NAME-->
-   <!--BEGIN PROJECT_NUMBER-->&#160;<span id="projectnumber">$projectnumber</span><!--END PROJECT_NUMBER-->
+<!--BEGIN PROJECT_NUMBER-->&#160;<span id="projectnumber"><script type="text/javascript">
+     <!--
+     writeHeader.call(this);
+     writeVersionDropdown(this);
+     //-->
+    </script>
+   </span><!--END PROJECT_NUMBER-->
   </div>
   <!--BEGIN PROJECT_BRIEF--><div id="projectbrief">$projectbrief</div><!--END PROJECT_BRIEF-->
  </td>
@ -67,12 +74,3 @@ $extrastylesheet
 </div>
 <!--END TITLEAREA-->
 <!-- end header part -->
-<div id="Compnav" class="tabs1">
-    <ul class="tablist">
-      <script type="text/javascript">
-		<!--
-		writeComponentTabs.call(this);
-		//-->
-      </script>
-	  </ul>
-</div>
--- a/Doxygen/templates/printComponentTabs.js
+++ b/Doxygen/templates/printComponentTabs.js
@ -1,28 +0,0 @@
-var strgURL =   location.pathname;                      // path of current component
-
-// constuctor for the array of objects
-function tabElement(id, folderName, tabTxt )  {
-	this.id = id;                                       // elementID as needed in html;
-	this.folderName = folderName;                       // folder name of the component
-    this.tabTxt = tabTxt;                               // Text displayed as menu on the web
-	this.currentListItem = '<li id="' + this.id + '" class="current"> <a href="../..' + this.folderName + 'index.html"><span>' + this.tabTxt + '</span></a></li>';
-	this.listItem = '<li id="' + this.id + '"> <a href="../..' + this.folderName + 'index.html"><span>' + this.tabTxt + '</span></a></li>';
-};
-
-// array of objects
-var arr = [];
-
-// fill array
-// arr.push( new    tabElement( "GEN",    "/General/html/", "General"));
-
-// write tabs
-// called from the header file.
-function writeComponentTabs()  {
-  for ( var i=0; i < arr.length; i++ ) {
-    if (strgURL.search(arr[i].folderName) > 0) {                    // if this is the current folder
-      document.write(arr[i].currentListItem);                       // then print and highlight the tab
-    } else {
-      document.write(arr[i].listItem);                              // else, print the tab
-    }
-  }
-};
--- a/Doxygen/templates/version.css
+++ b/Doxygen/templates/version.css
@ -1,17 +1,33 @@
+:root {
+  --arm_light_blue: #00C1DE;
+  --arm_blue: #11809F;
+  --arm_blue1: #0091BD;
+  --arm_dark_blue: #002B49;
+  --arm_light_gray: #E5ECEB;
+  --arm_light_gray1: #EFF5F4;
+  --arm_light_gray2: #EBEBEB;
+  --arm_light_gray3: #F7F7F7;
+  --arm_dark_gray: #7D868C;
+  --arm_black: #333E48;
+  --arm_orange: #FF6B00;
+  --arm_yellow: #FFC700;
+}
+
 /* Dropdown Button */
 .dropbtn {
    margin: 0px;
-    padding: 0px 0px 0px 1em;
-    background-image: url(dropdown.png);
+    padding: 0px 20px 0px 0em;
+    background-image: url("dropdown.png");
    background-repeat: no-repeat;
-    background-size: 0.75em;
-    background-position: left center;
+    background-size: 0.5em;
+    background-position: right center;
+    cursor: pointer;
 }

 /* Dropdown button on hover & focus */
-.dropbtn:hover, .dropbtn:focus {
-  background-size: 0.8em;
-}
+#.dropbtn:hover, .dropbtn:focus {
+#  background-size: 0.7em;
+#}

 /* The container <div> - needed to position the dropdown content */
 .dropdown {
@ -23,16 +39,18 @@
 .dropdown-content {
  display: none;
  position: absolute;
-  background-color: #f1f1f1;
+  background-color: var(--arm_light_gray3);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
+  white-space: nowrap;
+  cursor: pointer;
  z-index: 1;
 }

 /* Links inside the dropdown */
 .dropdown-content a {
  # color: black;
-  color: #3A568E;
+  color: var(--arm_dark_gray);
  padding: 4px 6px;
  text-decoration: none;
  display: block;