From 749f7645104e9511705341057758dd7aa81c003a Mon Sep 17 00:00:00 2001
From: Dimitris Kolovos <dimitris.kolovos@york.ac.uk>
Date: Mon, 17 Feb 2025 09:19:00 +0000
Subject: [PATCH] Minor ui tweaks and cleanups

---
 mkdocs/docs/playground/index.html             | 13 +++++--------
 mkdocs/docs/playground/js/DownloadDialog.js   |  3 ++-
 mkdocs/docs/playground/js/LiveShareDialog.js  |  3 ++-
 mkdocs/docs/playground/js/LiveShareManager.js | 15 ++++++++++-----
 mkdocs/docs/playground/js/OutputPanel.js      |  3 ++-
 mkdocs/docs/playground/js/Playground.js       |  3 ++-
 mkdocs/docs/playground/js/SettingsDialog.js   |  3 ++-
 7 files changed, 25 insertions(+), 18 deletions(-)
diff --git a/mkdocs/docs/playground/index.html b/mkdocs/docs/playground/index.html
index 92fd8e35b..9a570fce4 100644
--- a/mkdocs/docs/playground/index.html
+++ b/mkdocs/docs/playground/index.html
@@ -13,21 +13,18 @@
 
 <body class="h-100" onresize="fit()" onload="fit();updateGutterVisibility();">
     <div id="preloader"><img src="images/preloader.gif" width="100px"><div id="preloader-message"></div></div>
-    <!-- <div id="liveShareBar" style="position:absolute;top:0px;left:60px;padding:4px;width:100px;height:30px;background-color:#41A030;color:white;z-index: 1000">Live Sharing</div> -->
     <div id="navview" data-role="navview" style="display:none">
         <div class="navview-pane">
             <button class="pull-button">
                 <span class="default-icon-menu" id="toggleNavViewPane"></span>
             </button>
             <ul class="navview-menu">
-                <li class="item-header">Epsilon Playground</li>
-                <li class="item-separator"></li>
-                <li id="liveShareStatus">
-                    <a href="#" onclick="showLiveShare(event)">
-                        <span class="icon"><span class="mif-example-16 mif-liveshare"></span></span>
-                        <span class="caption">Live Sharing</span>
-                    </a>
+                <li class="item-header">Epsilon Playground
+                    <span class="badges" style="display:none;float:right;position:relative;top:-2px" id="liveShareTitleBadges">
+                        <span class="badge inline" style="font-size:12px; background-color:#41A030;color:white">LIVE</span>
+                    </span>
                 </li>
+                <li class="item-separator"></li>
                 <li class="item-separator" id="examplesEnd"></li>                
                 <li>
                     <a href="#" onclick="showLiveShare(event)" id="liveShare">
diff --git a/mkdocs/docs/playground/js/DownloadDialog.js b/mkdocs/docs/playground/js/DownloadDialog.js
index 5260d4f24..5ad3853af 100644
--- a/mkdocs/docs/playground/js/DownloadDialog.js
+++ b/mkdocs/docs/playground/js/DownloadDialog.js
@@ -111,7 +111,8 @@ class DownloadDialog {
                     caption: "Cancel",
                     cls: "js-dialog-close"
                 }
-            ]
+            ],
+            closeButton: true
         });
     }
 
diff --git a/mkdocs/docs/playground/js/LiveShareDialog.js b/mkdocs/docs/playground/js/LiveShareDialog.js
index 9dfb29a2d..fc253dc68 100644
--- a/mkdocs/docs/playground/js/LiveShareDialog.js
+++ b/mkdocs/docs/playground/js/LiveShareDialog.js
@@ -39,7 +39,8 @@ class LiveShareDialog {
                         cls: "js-dialog-close"
                     }
                     
-                ]
+                ],
+                closeButton: true
             });
         });
     }
diff --git a/mkdocs/docs/playground/js/LiveShareManager.js b/mkdocs/docs/playground/js/LiveShareManager.js
index bf0bd1111..b510d25de 100644
--- a/mkdocs/docs/playground/js/LiveShareManager.js
+++ b/mkdocs/docs/playground/js/LiveShareManager.js
@@ -51,11 +51,16 @@ class LiveShareManager {
 
     showLiveShareStatus(status) {
         var liveShareBadges = document.getElementById("liveShareBadges");
-        if (status) liveShareBadges.style.display = "block";
-        else liveShareBadges.style.display = "none";
-
-        var liveShareStatus = document.getElementById("liveShareStatus");
-        liveShareStatus.style.display = liveShareBadges.style.display;
+        var liveShareTitleBadges = document.getElementById("liveShareTitleBadges");
+        
+        if (status) {
+            liveShareBadges.style.display = "block";
+            liveShareTitleBadges.style.display = "inline";
+        }
+        else {
+            liveShareBadges.style.display = "none";
+            liveShareTitleBadges.style.display = "none";
+        }
     }
 
     startSession() {
diff --git a/mkdocs/docs/playground/js/OutputPanel.js b/mkdocs/docs/playground/js/OutputPanel.js
index 8bc71461d..bac8a76f0 100644
--- a/mkdocs/docs/playground/js/OutputPanel.js
+++ b/mkdocs/docs/playground/js/OutputPanel.js
@@ -72,7 +72,8 @@ class OutputPanel extends ModelPanel {
                     caption: "Cancel",
                     cls: "js-dialog-close"
                 }
-            ]
+            ],
+            closeButton: true
         });
     }
 
diff --git a/mkdocs/docs/playground/js/Playground.js b/mkdocs/docs/playground/js/Playground.js
index ce63f69ae..9c22cd801 100644
--- a/mkdocs/docs/playground/js/Playground.js
+++ b/mkdocs/docs/playground/js/Playground.js
@@ -140,7 +140,8 @@ function copyShortenedLink(event) {
                         onclick: function(){
                             copyToClipboard(baseUrl + "?" + json.shortened);
                         }
-                    }]
+                    }],
+                    closeButton: true
                 });
             }
             Metro.notify.killAll();
diff --git a/mkdocs/docs/playground/js/SettingsDialog.js b/mkdocs/docs/playground/js/SettingsDialog.js
index f8e277759..59798609a 100644
--- a/mkdocs/docs/playground/js/SettingsDialog.js
+++ b/mkdocs/docs/playground/js/SettingsDialog.js
@@ -46,7 +46,8 @@ class SettingsDialog {
                     caption: "Cancel",
                     cls: "js-dialog-close"
                 }
-            ]
+            ],
+            closeButton: true
         });
     }
 
