bulb: Tweaked styles for sidebar labels

Author: DougLau

bulb/index.html

@@ -54,8 +54,8 @@
             <option id="opt_system" class="no-display" value="system_attribute">📃 System</option>
             <option id="opt_toll_zone" class="no-display" value="tag_reader">🏷️ Tag Reader</option>
           </select>
-          <label id="sb_monitor" class="sb_label">📺 </label>
-          <label id="sb_notify" class="sb_label">⚪ </label>
+          <label id="sb_monitor" class="sb_label">📺</label>
+          <label id="sb_notify" class="sb_label">⚪</label>
           <input id="sb_fullscreen" class="toggle" type="checkbox" aria-label="Toggle fullscreen">
           <label for="sb_fullscreen"> ⛶ </label>
         </div>

bulb/src/sse.rs

@@ -14,7 +14,6 @@ use crate::app::{self, DeferredAction};
 use crate::fetch::Uri;
 use crate::start::handle_notification;
 use crate::util::Doc;
-use hatmil::{Page, html};
 use js_sys::JsString;
 use resources::Res;
 use std::cell::RefCell;
@@ -33,8 +32,8 @@ pub enum NotifyState {
     Connecting,
     /// Updating after event receipt
     Updating,
-    /// Good / connected
-    Good,
+    /// Connected to SSE server
+    Connected,
 }
 
 impl NotifyState {
@@ -45,30 +44,9 @@ impl NotifyState {
             Self::Disconnected => "⚫",
             Self::Connecting => "🟠",
             Self::Updating => "🟡",
-            Self::Good => "🟢",
+            Self::Connected => "🟢",
         }
     }
-
-    /// Get description of a state
-    pub const fn description(self) -> &'static str {
-        match self {
-            Self::Starting => "Starting",
-            Self::Disconnected => "Disconnected",
-            Self::Connecting => "Connecting",
-            Self::Updating => "Updating",
-            Self::Good => "Good",
-        }
-    }
-
-    /// Build state HTML
-    pub fn build_html(self) -> String {
-        let mut page = Page::new();
-        let mut div = page.frag::<html::Div>();
-        div.class("tooltip").cdata(self.symbol());
-        div.span().class("right").cdata(self.description()).close();
-        div.cdata(" ");
-        String::from(page)
-    }
 }
 
 /// SSE event listener
@@ -178,7 +156,7 @@ fn build_list(res: Option<Res>) -> String {
 /// Set refresh button text
 pub fn set_notify_state(ns: NotifyState) {
     let sb_notify = Doc::get().elem::<HtmlElement>("sb_notify");
-    sb_notify.set_inner_html(&ns.build_html());
+    sb_notify.set_inner_html(&ns.symbol());
     if NotifyState::Disconnected == ns {
         app::defer_action(DeferredAction::MakeEventSource, 5000);
     }
@@ -194,5 +172,8 @@ fn handle_notify(payload: JsString) {
         let name = chan.find('$').map(|i| chan.split_off(i));
         handle_notification(chan, name);
     }
-    app::defer_action(DeferredAction::SetNotifyState(NotifyState::Good), 600);
+    app::defer_action(
+        DeferredAction::SetNotifyState(NotifyState::Connected),
+        600,
+    );
 }

bulb/src/videomonitor.rs

@@ -152,7 +152,7 @@ impl VideoMonitor {
     fn set_selected(&self) {
         app::set_mon_num(Some(self.mon_num));
         let mon_num = match app::mon_num() {
-            Some(num) => format!("📺 #{num} "),
+            Some(num) => format!("📺 #{num}"),
             None => "📺".to_string(),
         };
         let t = Doc::get().elem::<HtmlElement>("sb_monitor");

bulb/static/bulb.css

@@ -122,7 +122,7 @@ th, td {
   border: 1px solid #888;
   border-radius: 0.2rem;
   padding: 0.3rem;
-  text-indent: 0;
+  text-indent: unset;
   color: black;
   cursor: pointer;
 }
@@ -203,9 +203,12 @@ label:has(+ #sb_resource) {
   margin-left: 0.1rem;
 }
 .sb_label {
+  text-indent: unset;
   color: black;
   background-color: #888;
   align-content: center;
+  margin: 0.1rem;
+  padding: 0.2rem;
   border-radius: 0.5rem;
 }
 #sb_search {
@@ -603,7 +606,7 @@ label:has(+ #sb_resource) {
 .signal-housing {
   align-self: start;
   background-color: black;
-  text-indent: 0;
+  text-indent: unset;
   padding: 0.2rem 0.2rem 0 0.2rem;
   border-radius: 0.2rem;
   border: 1px solid black;