Libdoc: Fine-tune shortcut list style toggle

pekkaklarck · pekkaklarck · commit ab04045095f5 · 2020-08-28T12:09:10.000+03:00
- Make the switch and the text around it a bit smaller. - Change text to: `List style: Compact [x ] Expanded` - Keep same background color regardless the switch position. - Add same functionality to tags. - Toggle separator between items (`&middot;` or `<br>`) instead of rendering both lists and toggling which is shown. This is an update to PR robotframework#3634 related to issue robotframework#3635.
diff --git a/src/robot/htmldata/libdoc/libdoc.css b/src/robot/htmldata/libdoc/libdoc.css
@@ -39,44 +39,37 @@ a:hover {
     font-weight: bold;
     letter-spacing: 0.1em;
 }
-label.switch {
-    background-color: white;
-    cursor: pointer;
-    position: relative;
+.normal-first-letter::first-letter {
+    font-weight: normal !important;
+    letter-spacing: 0 !important;
+}
+.list-style-toggle {
+    margin-bottom: 1em;
+    font-size: 0.9em;
 }
 input.switch {
     display: none;
 }
 .slider {
     background-color: grey;
     display: inline-block;
-    height: 20px;
     position: relative;
     top: 5px;
-    width: 40px;
+    height: 18px;
+    width: 36px;
 }
 .slider:before {
     background-color: white;
     content: "";
-    height: 14px;
-    left: 3px;
     position: absolute;
     top: 3px;
-    width: 14px;
+    left: 3px;
+    height: 12px;
+    width: 12px;
 }
 input.switch:checked + .slider::before {
     background-color: white;
-    left: 22px;
-}
-input.switch:checked + .slider {
-    background-color: #c30;
-}
-.shortcuts .one-per-line {
-    display: none;
-}
-.normal-first-letter::first-letter {
-    font-weight: normal !important;
-    letter-spacing: 0 !important;
+    left: 21px;
 }
 .keywords {
     border: 1px solid #ccc;
diff --git a/src/robot/htmldata/libdoc/libdoc.html b/src/robot/htmldata/libdoc/libdoc.html
@@ -81,6 +81,11 @@ <h1>Opening library documentation failed</h1>
         $('.shortcuts a').width('max-content');
     }
 
+    function toggleListStyle(locator) {
+        var separator = $(locator).text()[0];
+        $(locator).html(separator == '\u00b7' ? '<br>' : '&middot;');
+    }
+
     function handleKeyDown(event) {
         event = event || window.event;
         var keyCode = event.keyCode || event.which;
@@ -320,39 +325,44 @@ <h2 id="Importing">Importing</h2>
 <script type="text/x-jquery-tmpl" id="shortcuts-template">
     <h2 id="Shortcuts">Shortcuts</h2>
     {{if keywords.length > 3}}
-        <span>Expanded shortcut list</span>
-        <label class="switch" title="Switch between compact list or expanded list">
-            <input type="checkbox" class="switch" onclick="$('.shortcuts .all-in-one').toggle();$('.shortcuts .one-per-line').toggle();">
+    <div class="list-style-toggle">
+        <b>List style:</b>&nbsp; Compact
+        <label title="Switch between compact list and expanded list">
+            <input type="checkbox" class="switch" onclick="toggleListStyle('.shortcut-separator');">
             <span class="slider"></span>
         </label>
+        Expanded
+    </div>
     {{/if}}
     <div class='shortcuts'>
-        <div class='all-in-one'>
-            {{each keywords}}
-            <a href="#${encodeURIComponent($value.name)}"
-            class="{{if $value.matched === false}}no-{{/if}}match"
-            title="${$value.shortdoc}">${$value.name}</a>
-            {{if $index < keywords.length-1}}&middot;{{/if}}
-            {{/each}}
-        </div>
-        <div class='one-per-line'>
-            {{each keywords}}
-            <a href="#${encodeURIComponent($value.name)}"
-            class="{{if $value.matched === false}}no-{{/if}}match"
-            title="${$value.shortdoc}">${$value.name}</a>
-            {{if $index < keywords.length-1}}<br>{{/if}}
-            {{/each}}
-        </div>
+        {{each keywords}}
+        <a href="#${encodeURIComponent($value.name)}"
+        class="{{if $value.matched === false}}no-{{/if}}match"
+        title="${$value.shortdoc}">${$value.name}</a>
+        {{if $index < keywords.length-1}}
+        <span class="shortcut-separator">&middot;</span>
+        {{/if}}
+        {{/each}}
     </div>
 </script>
 
 <script type="text/x-jquery-tmpl" id="tags-template">
     <h2 id="Tags">Tags</h2>
+    {{if all_tags.length > 3}}
+    <div class="list-style-toggle">
+        <b>List style:</b>&nbsp; Compact
+        <label title="Switch between compact list and expanded list">
+            <input type="checkbox" class="switch" onclick="toggleListStyle('.tag-separator');">
+            <span class="slider"></span>
+        </label>
+        Expanded
+    </div>
+    {{/if}}
     <div class='shortcuts'>
         {{each all_tags}}
         <a href="javascript:tagSearch('${$value}')"
            title="Show keywords with this tag">${$value}</a>
-        &middot;
+        <span class="tag-separator">&middot;</span>
         {{/each}}
         <a href="javascript:resetKeywords()" class="normal-first-letter"
            title="Show all keywords">[Reset]</a>
