wip bulb list

frontend/src/page/lights.rs

@@ -3,7 +3,7 @@ use crate::css::C;
 use chrono::{NaiveTime, Weekday};
 use common::{BulbGroup, BulbGroupShape, BulbMap, ClientMessage, ServerMessage};
 use lighter_lib::{BulbId, BulbMode};
-use seed::{attrs, button, div, h1, h2, h3, input, label, span, table, td, tr, C};
+use seed::{attrs, button, div, h2, h3, input, label, span, table, td, tr, C};
 use seed::{prelude::*, IF};
 use seed_router::Page;
 use std::collections::{BTreeMap, HashMap, HashSet};
@@ -55,8 +55,9 @@ pub enum Msg {
 
 #[derive(Debug, Clone, Default, PartialEq, Eq)]
 pub enum SelectMode {
-    #[default]
+    //#[default]
     Map,
+    #[default]
     List,
 }
 
@@ -220,30 +221,18 @@ impl Page for Model {
             ]
         };
 
-        let bulb_group_list = |(_i, group): (usize, &BulbGroup)| {
+        let bulb_group_list = |(i, group): (usize, &BulbGroup)| {
             div![
-                C![C.bulb_list_group],
+                h3![&group.name[..1]],
-                h1![&group.name],
                 group.bulbs.iter().map(|bulb| {
-                    let select_ev = || {
+                    div![
-                        let bulb = bulb.clone();
+                        input![
-                        ev(Ev::Click, |_| Msg::SelectBulb(bulb))
+                            attrs! { At::Type => "checkbox" },
-                    };
+                            IF!(self.selected_bulbs.contains(bulb) => attrs! { At::Checked => true }),
-
+                            {
-                    button![
+                                let bulb = bulb.clone();
-                        C![C.bulb_list_bulb],
+                                ev(Ev::Change, |_| Msg::SelectBulb(bulb))
-                        select_ev(),
+                            },
-                        div![
-                            C![C.bulb_list_checkbox],
-                            label![
-                                C![C.container],
-                                input![
-                                    attrs! { At::Type => "checkbox" },
-                                    IF!(self.selected_bulbs.contains(bulb) => attrs! { At::Checked => true }),
-                                    select_ev(),
-                                ],
-                                div![C![C.checkmark]],
-                            ],
                         ],
                         span![bulb],
                     ]
@@ -286,15 +275,15 @@ impl Page for Model {
             C![C.bulb_box],
             div![
                 C![C.selector_selector],
+                div![
+                    C![C.selector_selector_highlight],
+                    IF!(self.select_mode == SelectMode::List =>
+                        attrs! { At::Style => "margin-left: 10rem;"}),
+                ],
                 button![
                     "Map",
                     ev(Ev::Click, move |_| Msg::SetSelectMode(SelectMode::Map))
                 ],
-                div![
-                    C![C.selector_selector_arrow],
-                    IF!(self.select_mode == SelectMode::Map =>
-                        attrs! { At::Style => "transform: rotateY(180deg);"}),
-                ],
                 button![
                     "List",
                     ev(Ev::Click, move |_| Msg::SetSelectMode(SelectMode::List))

frontend/static/images/circle-arrow.svg

@@ -1,5 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:bx="https://boxy-svg.com">
-  <ellipse style="vector-effect: non-scaling-stroke; stroke-width: 0px; stroke: rgb(245, 222, 179); fill: rgb(245, 222, 179);" cx="250" cy="250" rx="250" ry="250"/>
-  <path d="M 59.4 209.201 H 308.253 L 274.16 131.459 L 447.051 254.953 L 274.16 378.446 L 308.253 300.704 H 59.4 V 209.201 Z" style="transform-origin: 447.051px 254.952px; stroke-width: 16px; stroke: rgb(193, 168, 123);" bx:shape="arrow 59.4 131.459 387.651 246.987 91.503 172.891 34.093 1@d4e47a6f"/>
-</svg>

frontend/static/styles/common.scss

@@ -106,36 +106,26 @@ body {
 .selector_selector {
 	margin-bottom: 0;
 	display: flex;
+	border: solid 0.1rem wheat;
 	justify-content: center;
-	//background: #534f44;
+	background: #534f44;
 }
 .selector_selector > button {
 	width: 10rem;
-	border: solid 0.1rem wheat;
+	border: unset;
-	background-color: #3a3743;
+	background: unset;
 	color: white;
 	font-size: 1.5rem;
 	border-left: solid white 0.1rem;
 	border-right: solid white 0.1rem;
 }
-.selector_selector > button:hover {
+.selector_selector_highlight {
-	background-color: #4c4858;
-}
-.selector_selector > button:active {
-	background-color: #312e38;
-}
-.selector_selector > button:first-child {
-	border-top-left-radius: 0.5rem;
-}
-.selector_selector > button:last-child {
-	border-top-right-radius: 0.5rem;
-}
-.selector_selector_arrow {
 	position: absolute;
-	width: 2.15rem;
+	width: 10rem;
-	height: 2.15rem;
+	height: 2rem;
-	background: url("/images/circle-arrow.svg");
+	background: #ffd70069;
-	transition: transform 0.5s ease-in-out;
+	margin-left: -10rem;
+	transition: margin-left 0.3s ease-out;
 }
 
 .bulb_controls {
@@ -187,44 +177,14 @@ body {
 @keyframes to_width_90 { to { width: 90%; } }
 
 .bulb_list {
-	display: flex;
+    color: green;
-	flex-direction: column;
 }
 
-.bulb_list_group {
+.bulb_list_checked {
-	display: flex;
+    color: green;
-	flex-direction: column;
 }
-
+.bulb_list_unchecked {
-.bulb_list_group > h1 {
+    color: green;
-	margin-top: 0.6em;
-	margin-bottom: 0;
-	font-size: 1.3em;
-	border-bottom: solid 1px;
-}
-
-.bulb_list_bulb {
-	font-family: Ubuntu Mono;
-	display: flex;
-	font-size: 0.8em;
-	padding-top: 0.5em;
-	padding-bottom: 0.5em;
-	margin-top: 0.3em;
-	background-color: #3a3743;
-	border: solid 0.2em #45374f;
-	border-radius: 0.5em;
-	color: wheat;
-}
-.bulb_list_bulb:hover {
-	background-color: #4c4858;
-}
-.bulb_list_bulb:active {
-	background-color: #312e38;
-}
-.bulb_list_bulb > span {
-	margin: auto;
-	flex-grow: 1;
-	padding-right: 1em;
 }
 
 .bulb_map {
@@ -414,65 +374,3 @@ body {
 	flex-shrink: 1;
 }
 
-.bulb_list_checkbox {}
-.bulb_list_checkbox input[type="checkbox"] {
-	visibility: hidden;
-	display: none;
-}
-
-.bulb_list_checkbox *,
-.bulb_list_checkbox ::after,
-.bulb_list_checkbox ::before {
-	box-sizing: border-box;
-}
-
-.bulb_list_checkbox .container {
-	display: block;
-	position: relative;
-	cursor: pointer;
-	font-size: 25px;
-	user-select: none;
-}
-
-  /* Create a custom checkbox */
-.bulb_list_checkbox .checkmark {
-	position: relative;
-	top: 0;
-	left: 0;
-	height: 1.3em;
-	width: 1.3em;
-	background: black;
-	border-radius: 50px;
-	transition: all 0.7s;
-	--spread: 10px;
-}
-
-  /* When the checkbox is checked, add a blue background */
-.bulb_list_checkbox .container input:checked ~ .checkmark {
-	background: black;
-	/* spawn a bunch of colored balls and blur them together */
-	box-shadow: -5px -5px var(--spread) 0px #5B51D8, 0 -5px var(--spread) 0px #833AB4, 5px -5px var(--spread) 0px #E1306C, 5px 0 var(--spread) 0px #FD1D1D, 5px 5px var(--spread) 0px #F77737, 0 5px var(--spread) 0px #FCAF45, -5px 5px var(--spread) 0px #FFDC80;
-}
-
-  /* Create the checkmark/indicator (hidden when not checked) */
-.bulb_list_checkbox .checkmark::after {
-	content: "";
-	position: absolute;
-	display: none;
-}
-
-  /* Show the checkmark when checked */
-.bulb_list_checkbox .container input:checked ~ .checkmark::after {
-	display: block;
-}
-
-  /* Style the checkmark/indicator */
-.bulb_list_checkbox .container .checkmark::after {
-	left: 0.5em;
-	top: 0.34em;
-	width: 0.25em;
-	height: 0.5em;
-	border: solid wheat;
-	border-width: 0 0.15em 0.15em 0;
-	transform: rotate(45deg);
-}