Updating css for show/hide all

getgauge · Jun 19, 2017 · c59bbaf · c59bbaf
1 parent 28ab1db
commit c59bbaf
Showing 1 changed file with 31 additions and 11 deletions.
diff --git a/listener/html.go b/listener/html.go
@@ -12,7 +12,7 @@ var html = `
 <body>
     <div class="statusContainer"><span id="status">Execution Status: Running</span><span class="info">Generated by Gauge on {{ .Timestamp }}</span></div>
     <div class="menu">
-        <div class="toggleCheck"><input id="collapse" type="checkbox" onclick="toggleAll(this)" /> <label for="collapse">Collapse All</label></div>
+        <div class="toggleAll"><input id="collapse" type="button" onclick="toggleAll(this)" value="Hide all" /></div>
         <div class="statsContainer">
             <p>
                 <span>
@@ -28,21 +28,28 @@ var html = `
     <ul id="specs"></ul>
     <script type="text/javascript">
         const toggleAll = (element) => {
+            let hide = false;
+            let value = "Hide all";
+            if (element.value == "Hide all") {
+                hide = true;
+                value = "Show all"
+            }
             document.querySelectorAll(".scenarios").forEach(function(e) {
-                if (element.checked) e.hidden = true;
+                if (hide) e.hidden = true;
                 else e.hidden = false;
             });
             document.querySelectorAll(".toggle").forEach(function(e) {
-                if (element.checked) e.innerHTML = " show";
-                else e.innerHTML = " hide";
+                if (hide) e.innerHTML = "show";
+                else e.innerHTML = "hide";
             });
+            element.value = value
         };
 
         const toggle = (id) => {
             var element = document.getElementById(id);
             var toggleElement = document.getElementById("toggle" + id);
-            if (element.hidden) toggleElement.innerHTML = " hide";
-            else toggleElement.innerHTML = " show";
+            if (element.hidden) toggleElement.innerHTML = "hide";
+            else toggleElement.innerHTML = "show";
             element.hidden = !element.hidden;
         };
 
@@ -79,7 +86,7 @@ var html = `
             const specs = document.getElementById("specs"),
                 scnId = getID();
             const hideScenarios = document.getElementById("collapse").checked;
-            specs.innerHTML += "<div class=\"spec\" id=\"" + id + "\"><li class=\"" + statusClass + "\"><span class=\"specName\"># " + data.Name + "</span><span class=\"toggle\" id=\"toggle" + scnId + "\" onClick=\"toggle('" + scnId + "')\"> hide</span><ul" + (hideScenarios ? " hidden" : " ") + " class=\"scenarios\" id=\"" + scnId + "\"></ul></li></div>";
+            specs.innerHTML += "<div class=\"spec\" id=\"" + id + "\"><li class=\"" + statusClass + "\"><span class=\"specName\"># " + data.Name + "</span><span class=\"toggle\" id=\"toggle" + scnId + "\" onClick=\"toggle('" + scnId + "')\">hide</span><ul" + (hideScenarios ? " hidden" : " ") + " class=\"scenarios\" id=\"" + scnId + "\"></ul></li></div>";
             specMap[data.FileName] = {
                 "id": id,
                 "scenarios": {},
@@ -184,6 +191,7 @@ var html = `
             margin-left: 15px;
             display: none;
             padding-right: 5px;
+            padding-left: 5px;
             border: 0.5px solid #cccccc;
             line-height: 0px;
         }
@@ -200,11 +208,23 @@ var html = `
             display: inline-block;
         }
 
-        .toggleCheck {
-            color: #e2e2e2;
-            font-weight: 100;
+        .toggleAll {
+            margin-right: 5px;
+            font-size: 13px;
             float: right;
-            padding-right: 5px;
+        }
+
+        #collapse {
+            cursor: pointer;
+            color: #ececec;
+            border: 0.5px solid #ececec;
+            border-radius: 5px;
+            background: transparent;
+            min-width: 60px;
+        }
+
+        #collapse:focus {
+            outline: 0;
         }
 
         .menu {