From a8041e45f8e1fb7094ea43bc56cff237bdf30081 Mon Sep 17 00:00:00 2001
From: Marcus Weseloh <marcus@weseloh.cc>
Date: Mon, 2 Nov 2020 18:26:21 +0100
Subject: [PATCH] Updated XSL / styling for fluidsettings.xml

---
 doc/fluidsettings.xsl | 486 ++++++++++++++++++++++++------------------
 1 file changed, 283 insertions(+), 203 deletions(-)
diff --git a/doc/fluidsettings.xsl b/doc/fluidsettings.xsl
index 1c6b3966..4e6157ee 100644
--- a/doc/fluidsettings.xsl
+++ b/doc/fluidsettings.xsl
@@ -1,216 +1,296 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
-   <xsl:output method="html" doctype-system="about:legacy-compat"/>
-   <xsl:template match="/">
-      <html>
-         <head>
-            <style>
-table
-{
-    border: 3px solid black;
+    <xsl:output method="html" doctype-system="about:legacy-compat"/>
+    <xsl:template match="/">
+        <html>
+            <head>
+                <style>
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    background: #eee;
 }
 
-.first-row
-{
-    border-top: 3px solid black;
+#sidebar {
+    position: fixed;
+    width: 25em;
+    top: 0;
+    bottom: 0;
+    padding-bottom: 2em;
+    box-sizing: border-box;
+    overflow-y: auto;
+    color: white;
+    background: #333;
 }
 
-th
-{
-    font-weight: normal;
-    white-space: nowrap;
-    padding: 15px 5px 15px 5px;
-    border-top: 1px solid black;
-    border-left: 1px solid black;
-    border-right: 1px solid black;
+#sidebar ul li a {
+    display: block;
+    padding-left: 5%;
+    padding-top: 0.3em;
+    padding-bottom: 0.3em;
+    color: #fafafa;
 }
 
-
-td
-{
-    padding: 15px 5px 15px 5px;
+#sidebar a:hover {
+    background: #666;
 }
 
-.cell-def
-{
-    white-space: nowrap;
-    border-top: 1px solid black;
-}
-.cell-vals
-{
-    border-top: 1px solid black;
-}
-.cell-desc
-{
-    border-top: 1px solid black;
+#sidebar .muted {
+    color: #ccc !important;
 }
 
-.audio {background-color: hsl(170, 100%, 90%);}
-.midi {background-color: hsl(125, 100%, 90%);}
-.player {background-color: hsl(85, 100%, 85%);}
-.shell {background-color: hsl(60, 100%, 90%);}
-.synth {background-color: hsl(35, 100%, 90%);}
-.deprecated {background-color: hsl(0, 0%, 93%);}
-            </style>
-            <title>FluidSettings</title>
-         </head>
-         <body>
-            <h1>FluidSettings</h1>
-            
-            <ul>
-             <!-- Select the first setting of each group and use it for building up a TOC -->
-             <xsl:for-each select="fluidsettings/*/*[isFirst]">
-               <xsl:sort select="name(..)" />
-               <li style="margin-bottom: 15px">
-                <xsl:attribute name="class">
-                    <xsl:value-of select="name(..)" />
-                </xsl:attribute>
-                  <a>
-                    <xsl:attribute name="href"><![CDATA[#]]><xsl:value-of select="name(..)" /><![CDATA[.]]><xsl:value-of select="name" /></xsl:attribute>
-                    <xsl:value-of select="isFirst" />
-                  </a>
-               </li>
-             </xsl:for-each>
-            </ul>
-            
-            
-            <table>               
-               <!--print each and every setting row by row in the table-->
-               <xsl:for-each select="fluidsettings/*/*">
-                  <xsl:sort select="name(..)" />
-<!--                   <xsl:sort select="name" /> -->
-                  <tr>
-                     <!-- the class attribute of tr shall be the name of the settings group of the current setting, unless the setting is marked deprecated -->
-                     <xsl:attribute name="class">
-                        <xsl:choose>
-                            <xsl:when test="deprecated">
-                                deprecated
-                            </xsl:when>
-                            <xsl:otherwise>
-                                <xsl:value-of select="name(..)" />
-                            </xsl:otherwise>
-                        </xsl:choose>
-                     </xsl:attribute>
-                     
-                     <td class="cell-name first-row">
-                        <xsl:attribute name="id"><xsl:value-of select="name(..)" /><![CDATA[.]]><xsl:value-of select="name" /></xsl:attribute>
-                        <a>
-                            <xsl:attribute name="href"><![CDATA[#]]><xsl:value-of select="name(..)" /><![CDATA[.]]><xsl:value-of select="name" /></xsl:attribute>
-                            <xsl:value-of select="name(..)" />.<xsl:value-of select="name" />
-                        </a>
-                     </td>
-                    
-                    <th class="first-row">Type</th>
-                    
-                     <td class="cell-type first-row">
-                        <xsl:choose>
-                            <xsl:when test="type = 'bool'">
-                                int (bool)
-                            </xsl:when>
-                            <xsl:otherwise>
-                                <xsl:value-of select="type" />
-                            </xsl:otherwise>
-                        </xsl:choose>
-                     </td>
-                  </tr>
-                  
-                  <tr>
-                     <xsl:attribute name="class">
-                        <xsl:choose>
-                            <xsl:when test="deprecated">
-                                deprecated
-                            </xsl:when>
-                            <xsl:otherwise>
-                                <xsl:value-of select="name(..)" />
-                            </xsl:otherwise>
-                            
-                        </xsl:choose>
-                     </xsl:attribute>
-                     
-                     <td></td>
-                     <th>Default</th>
-                     <td class="cell-def">
-                        <xsl:copy-of select="def" />
-                     </td>
-                  </tr>
-                  
-                  <tr>
-                     <xsl:attribute name="class">
-                        <xsl:choose>
-                            <xsl:when test="deprecated">
-                                deprecated
-                            </xsl:when>
-                            <xsl:otherwise>
-                                <xsl:value-of select="name(..)" />
-                            </xsl:otherwise>
-                            
-                        </xsl:choose>
-                     </xsl:attribute>
-                     
-                     <td></td>
-                     <th>
-                     <xsl:choose>
-                        <xsl:when test="type = 'str'">
-                              Values
-                        </xsl:when>
-                        <xsl:when test="type = 'bool'">
-                              Values
-                        </xsl:when>
-                        <xsl:otherwise>
-                              Min
-                              -
-                              Max
-                        </xsl:otherwise>
-                     </xsl:choose>
-                     </th>
-                     
-                     <td class="cell-vals">
-                     <xsl:choose>
-                        <xsl:when test="type = 'str'">
-                              <xsl:value-of select="vals" />
-                        </xsl:when>
-                        <xsl:when test="type = 'bool'">
-                              1, 0
-                        </xsl:when>
-                        <xsl:otherwise>
-                              <xsl:value-of select="min" />
-                              -
-                              <xsl:value-of select="max" />
-                        </xsl:otherwise>
-                     </xsl:choose>
-                     </td>
-                   </tr>
-                   
-                   <tr>
-                     <xsl:attribute name="class">
-                        <xsl:choose>
-                            <xsl:when test="deprecated">
-                                deprecated
-                            </xsl:when>
-                            <xsl:otherwise>
-                                <xsl:value-of select="name(..)" />
-                            </xsl:otherwise>
-                            
-                        </xsl:choose>
-                     </xsl:attribute>
-                     
-                     <td></td>
-                     <th>Description</th>
-                     <td class="cell-desc">
-                        <xsl:copy-of select="desc" />
-                        <xsl:choose>
-                            <xsl:when test="deprecated">
-                                <br /><br />
-                                <strong style="color:red">DEPRECATED</strong><br /><br />
-                                <xsl:copy-of select="deprecated" />
-                            </xsl:when>
-                        </xsl:choose>
-                     </td>
-                  </tr>
-               </xsl:for-each>
-            </table>
-         </body>
-      </html>
-   </xsl:template>
+#sidebar h1 {
+    padding-top: 1em;
+    margin: 0;
+    padding-left: 5%;
+}
+
+#sidebar h2 {
+    padding-left: 5%;
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    color: lightblue;
+}
+
+#sidebar ul,
+#sidebar ul li
+{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+#sidebar li a {
+    text-decoration: none;
+}
+
+.deprecated-badge {
+    margin-left: 0.5em;
+    font-size: 80%;
+    font-weight: bold;
+    color: red;
+}
+
+#main {
+    margin-left: 25em;
+    padding: 1em 2em;
+    box-sizing: border-box;
+    max-width: 60em;
+    background: white;
+    color: #333;
+}
+
+#main h2 {
+    margin-top: 2em;
+}
+
+#main h2:first-child {
+    margin-top: 1em;
+}
+
+.setting {
+    padding: 0;
+    margin: 1em 0;
+    border-left: 1px solid #eee;
+    border-radius: 5px 0px 0px 0px;
+}
+
+@-webkit-keyframes flash-header {
+    from { background: lightblue; }
+    50% { background: #eee; }
+    to { background: lightblue; }
+}
+
+@keyframes flash-header {
+    from { background: lightblue; }
+    50% { background: #eee; }
+    to { background: lightblue; }
+}
+
+.setting:target .setting-header {
+    background: lightblue;
+    -webkit-animation: flash-header .5s 2 linear;
+    animation: flash-header .5s 2 linear;
+}
+
+.setting-header {
+    background: #eee;
+    border-radius: 5px 0px 0px 0px;
+    padding: 0.5em 1em;
+    position: relative;
+}
+
+.setting-body {
+    padding: 1em;
+}
+
+.setting-name {
+    font-weight: bold;
+    display: inline;
+    color: #333;
+}
+
+.setting-type {
+    color: #666;
+    font-weight: bold;
+    float: right;
+}
+
+.setting-attribute {
+    margin-bottom: 0.8em;
+    color: #666;
+}
+
+.setting-attribute .label {
+    display: inline-block;
+    vertical-align: top;
+    min-width: 6em;
+}
+
+.setting-attribute .value {
+    display: inline-block;
+    color: #333;
+}
+
+.setting-deprecated {
+    color: red;
+}
+
+.setting-description {
+    color: black;
+    margin-top: 1.5em;
+}
+
+a {
+    color: darkblue;
+}
+                </style>
+                <title>FluidSynth Settings</title>
+            </head>
+            <body>
+                <div id="sidebar">
+                    <h1>FluidSynth Settings</h1>
+
+                    <xsl:for-each select="fluidsettings/*">
+                        <xsl:sort select="setting[1]/isFirst" />
+
+                        <h2><xsl:value-of select="setting[1]/isFirst" /></h2>
+                        <ul>
+                            <xsl:for-each select="*">
+                                <li>
+                                    <a>
+                                        <xsl:attribute name="href"><![CDATA[#]]><xsl:value-of select="name(..)" /><![CDATA[.]]><xsl:value-of select="name" /></xsl:attribute>
+                                        <span class="muted"><xsl:value-of select="name(..)" /></span>.<xsl:value-of select="name" />
+                                        <xsl:if test="deprecated">
+                                            <span class="deprecated-badge">deprecated</span>
+                                        </xsl:if>
+                                    </a>
+                                </li>
+                            </xsl:for-each>
+                        </ul>
+                    </xsl:for-each>
+                </div>
+
+                <div id="main">
+                    <xsl:for-each select="fluidsettings/*">
+                        <xsl:sort select="setting[1]/isFirst" />
+
+                        <h2><xsl:value-of select="setting[1]/isFirst" /></h2>
+
+                        <xsl:for-each select="*">
+                            <xsl:sort select="name(..)" />
+                            <div class="setting">
+                                <xsl:attribute name="id">
+                                    <xsl:value-of select="name(..)" /><![CDATA[.]]><xsl:value-of select="name" />
+                                </xsl:attribute>
+
+                                <div class="setting-header">
+                                    <div class="setting-name">
+                                        <xsl:value-of select="name(..)" />.<xsl:value-of select="name" />
+                                    </div>
+
+                                    <div class="setting-type">
+                                    </div>
+                                </div>
+
+                                <div class="setting-body">
+
+                                    <div class="setting-attribute">
+                                        <div class="label">Type:</div>
+                                        <div class="value">
+                                            <xsl:choose>
+                                                <xsl:when test="type = 'bool'">
+                                                    Boolean (int)
+                                                </xsl:when>
+                                                <xsl:when test="type = 'int'">
+                                                    Integer (int)
+                                                </xsl:when>
+                                                <xsl:when test="type = 'str'">
+                                                    <xsl:choose>
+                                                        <xsl:when test="vals">
+                                                            Selection (str)
+                                                        </xsl:when>
+                                                        <xsl:otherwise>
+                                                            String (str)
+                                                        </xsl:otherwise>
+                                                    </xsl:choose>
+                                                </xsl:when>
+                                                <xsl:when test="type = 'num'">
+                                                    Float (num)
+                                                </xsl:when>
+                                                <xsl:otherwise>
+                                                    <xsl:value-of select="type" />
+                                                </xsl:otherwise>
+                                            </xsl:choose>
+                                        </div>
+                                    </div>
+
+                                    <xsl:choose>
+                                        <xsl:when test="type = 'str' and vals">
+                                            <div class="setting-attribute">
+                                                <div class="label">Choices:</div>
+                                                <div class="value"><xsl:value-of select="vals" /></div>
+                                            </div>
+                                        </xsl:when>
+                                        <xsl:when test="type = 'bool'">
+                                            <div class="setting-attribute">
+                                                <div class="label">Values:</div>
+                                                <div class="value">0, 1</div>
+                                            </div>
+                                        </xsl:when>
+                                        <xsl:when test="min or max">
+                                            <div class="setting-attribute">
+                                                <div class="label">Min - Max:</div>
+                                                <div class="value">
+                                                    <xsl:value-of select="min" />
+                                                    -
+                                                    <xsl:value-of select="max" />
+                                                </div>
+                                            </div>
+                                        </xsl:when>
+                                    </xsl:choose>
+
+                                    <div class="setting-attribute">
+                                        <div class="label">Default:</div>
+                                        <div class="value"><xsl:copy-of select="def" /></div>
+                                    </div>
+
+                                    <xsl:if test="deprecated">
+                                        <div class="setting-deprecated">
+                                            This setting is deprecated and might be removed in a future version of FluidSynth.
+                                        </div>
+                                    </xsl:if>
+
+                                    <div class="setting-description">
+                                        <xsl:copy-of select="desc" />
+                                    </div>
+                                </div>
+                            </div>
+                        </xsl:for-each>
+                    </xsl:for-each>
+                </div>
+            </body>
+        </html>
+    </xsl:template>
 </xsl:stylesheet>
-

- - - - . - -	Type	- - - int (bool) - - - - - -
	Default	- -
	- - - Values - - - Values - - - Min - - - Max - - -	- - - - - - 1, 0 - - - - - - - - -
	Description	- - - - - DEPRECATED - - - -