zu: Impl Switch

RustVis · Nov 22, 2023 · aab5a99 · aab5a99
1 parent 3d15ec2
commit aab5a99
Show file tree

Hide file tree

Showing 6 changed files with 249 additions and 15 deletions.
diff --git a/crates/zu/src/breadcrumbs/style.scss b/crates/zu/src/breadcrumbs/style.scss
@@ -3,7 +3,7 @@
 
 // Styles applied to the root element.
 .ZuBreadcrumb-root {
-  color: var(--zu-palette-text-secondary);
+  color: $zu-palette-text-secondary;
 }
 
 // Styles applied to the ol element.
@@ -37,23 +37,23 @@
 
 .ZuBreadcrumbCollapsed-button {
   display: flex;
-  margin-left: calc(var(--zu-spacing-unit) * 0.5);
-  margin-right: calc(var(--zu-spacing-unit) * 0.5);
+  margin-left: calc($zu-spacing-unit * 0.5);
+  margin-right: calc($zu-spacing-unit * 0.5);
 
   border-radius: 2px;
 
-  background-color: var(--zu-colors-grey-100);
-  color: var(--zu-colors-grey-700);
+  background-color: $zu-colors-grey-100;
+  color: $zu-colors-grey-700;
 
   &:hover, &:focus {
-    background-color: var(--zu-colors-grey-200);
+    background-color: $zu-colors-grey-200;
   }
 
   &:active {
-    box-shadow: var(--zu-shadow-0);
+    box-shadow: $zu-shadow-0;
     // TODO(Shaohua): Fix emphasize() error.
     //background-color: emphasize(#{$zu-colors-grey-200}, 0.12);
-    background-color: var(--zu-colors-grey-200);
+    background-color: $zu-colors-grey-200;
   }
 
   // TODO(Shaohua): Add dark theme support.

diff --git a/crates/zu/src/switch/color.rs b/crates/zu/src/switch/color.rs
@@ -0,0 +1,18 @@
+// Copyright (c) 2023 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
+// Use of this source is governed by Lesser General Public License that can be
+// found in the LICENSE file.
+
+use crate::styles::color::Color;
+
+pub const fn color_class(color: Color) -> &'static str {
+    match color {
+        Color::Primary => "ZuSwitch-colorPrimary",
+        Color::Secondary => "ZuSwitch-colorSecondary",
+        Color::Success => "ZuSwitch-colorSuccess",
+        Color::Info => "ZuSwitch-colorInfo",
+        Color::Warning => "ZuSwitch-colorWarning",
+        Color::Error => "ZuSwitch-colorError",
+        Color::Inherit => "ZuSwitch-colorInherit",
+        Color::Default => "",
+    }
+}
diff --git a/crates/zu/src/switch/edge.rs b/crates/zu/src/switch/edge.rs
@@ -0,0 +1,14 @@
+// Copyright (c) 2023 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
+// Use of this source is governed by Lesser General Public License that can be
+// found in the LICENSE file.
+
+use crate::styles::edge::Edge;
+
+#[must_use]
+pub const fn css_class(edge: Option<Edge>) -> &'static str {
+    match edge {
+        Some(Edge::Start) => "ZuSwitch-edgeStart",
+        Some(Edge::End) => "ZuSwitch-edgeEnd",
+        _ => "",
+    }
+}
diff --git a/crates/zu/src/switch/mod.rs b/crates/zu/src/switch/mod.rs
@@ -2,13 +2,19 @@
 // Use of this source is governed by Lesser General Public License that can be
 // found in the LICENSE file.
 
+mod color;
+mod edge;
+mod size;
+
 use yew::{
-    function_component, html, AttrValue, Callback, Children, Classes, Html, MouseEvent, Properties,
+    classes, function_component, html, AttrValue, Callback, Children, Classes, Html, MouseEvent,
+    Properties,
 };
 
 use crate::styles::color::Color;
 use crate::styles::edge::Edge;
 use crate::styles::size::Size;
+use crate::switch_base::{SwitchBase, Variant};
 
 #[derive(Debug, Clone, PartialEq, Properties)]
 pub struct Props {
@@ -56,17 +62,54 @@ pub struct Props {
     #[prop_or(false)]
     pub required: bool,
 
-    #[prop_or_default]
+    #[prop_or(Size::Medium)]
     pub size: Size,
 
     #[prop_or_default]
     pub style: AttrValue,
 }
 
 #[function_component(Switch)]
-pub fn switch(_props: &Props) -> Html {
+pub fn switch(props: &Props) -> Html {
+    let root_cls = classes!(
+        "ZuSwitch-root",
+        edge::css_class(props.edge),
+        size::css_class(props.size),
+        props.classes.clone(),
+    );
+    let base_cls = classes!(
+        "ZuSwitch-switchBase",
+        color::color_class(props.color),
+        if props.checked {
+            "ZuSwitch-checked"
+        } else {
+            ""
+        },
+        if props.disabled {
+            "ZuSwitch-disabled"
+        } else {
+            ""
+        }
+    );
+    let base_input_cls = classes!("ZuSwitch-input");
+
+    let icon = html! {
+        <span class="ZuSwitch-thumb">
+        </span>
+    };
+
     html! {
-        <>
-        </>
+        <span class={root_cls}>
+            <SwitchBase
+                classes={base_cls}
+                input_classes={base_input_cls}
+                icon={icon.clone()}
+                checked_icon={icon}
+                variant={Variant::Checkbox}
+                >
+            </SwitchBase>
+             <span class="ZuSwitch-track">
+            </span>
+        </span>
     }
 }
diff --git a/crates/zu/src/switch/size.rs b/crates/zu/src/switch/size.rs
@@ -0,0 +1,14 @@
+// Copyright (c) 2023 Xu Shaohua <shaohua@biofan.org>. All rights reserved.
+// Use of this source is governed by Lesser General Public License that can be
+// found in the LICENSE file.
+
+use crate::styles::size::Size;
+
+#[must_use]
+pub const fn css_class(size: Size) -> &'static str {
+    match size {
+        Size::Small => "ZuSwitch-sizeSmall",
+        Size::Medium => "ZuSwitch-sizeMedium",
+        Size::Large => "",
+    }
+}
diff --git a/crates/zu/src/switch/style.scss b/crates/zu/src/switch/style.scss
@@ -3,7 +3,46 @@
 
 /* Styles applied to the root element. */
 .ZuSwitch-root {
-
+  display: inline-flex;
+  // 34 + 12 * 2
+  width: 58px;
+  // 14 + 12 * 2
+  height: 38px;
+  overflow: hidden;
+  padding: 12px;
+  box-sizing: border-box;
+  position: relative;
+  flex-shrink: 0;
+  // reset stack context.
+  z-index: 0;
+  vertical-align: middle;
+
+  &.ZuSwitch-edgeStart {
+    margin-left: -8xp;
+  }
+
+  &.ZuSwitch-edgeEnd {
+    margin-right: -8px;
+  }
+
+  &.ZuSwitch-sizeSmall {
+    width: 40px;
+    height: 24px;
+    padding: 7px;
+
+    &.ZuSwitch-thumb {
+      width: 16px;
+      height: 16px;
+    }
+
+    &.ZuSwitch-switchBase {
+      padding: 4px;
+
+      &.ZuSwitch-checked {
+        transform: translateX(16px);
+      }
+    }
+  }
 }
 
 /* Styles applied to the root element if edge="start". */
@@ -43,10 +82,116 @@
 
 /* Styles used to create the thumb passed to the internal `SwitchBase` component `icon` prop. */
 .ZuSwitch-thumb {
-
+  box-shadow: $zu-shadow-1;
+  background-color: currentColor;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
 }
 
 /* Styles applied to the track element. */
 .ZuSwitch-track {
+  height: 100%;
+  width: 100%;
+  border-radius: 7px;
+  z-index: -1;
+
+  transition: opacity $zu-duration-shortest $zu-easing-easeInOut 0ms,
+    background-color $zu-duration-shortest $zu-easing-easeInOut 0ms;
+
+  // TODO(Shaohua): onBackground variable.
+  background-color: black;
+  // TODO(Shaohua): switchTrack variable.
+  opacity: 0.38;
+}
 
+.ZuSwitch-switchBase {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;  // Render above the focus ripple.
+  // TODO(Shaohua): Change color based on theme.
+  color: white;
+
+  transition: left $zu-duration-shortest $zu-easing-easeInOut 0ms,
+    transform $zu-duration-shortest $zu-easing-easeInOut 0ms;
+
+  &.ZuSwitch-checked {
+    transform: translateX(20px);
+  }
+
+  &.ZuSwitch-checked + .ZuSwitch-track {
+    opacity: 0.5;
+  }
+
+  &.ZuSwitch-disabled {
+    // TODO(Shaohua): Based on theme.
+    color: $zu-colors-grey-100;
+  }
+
+  &.ZuSwitch-disabled + .ZuSwitch-track {
+    opacity: 0.2;
+  }
+
+  &.ZuSwitch-input {
+    left: -100%;
+    width: 300%;
+  }
+
+  &:hover {
+    // FIXME(Shaohua): hoverOpacity is undefined.
+    //background-color: alpha(var(--zu-palette-action-active), var(--zu-palette-action-hoverOpacity));
+
+    @media (hover:none) {
+      background-color: transparent;
+    }
+
+    &.ZuSwitch-colorPrimary {
+      &.ZuSwitch-checked {
+        color: $zu-palette-primary-main;
+
+        &:hover {
+          // FIXME(Shaohua):
+          //background-color: alpha(var(--zu-palette-primary-main), var(--zu-palette-action-hoverOpacity));
+
+          @media (hover:none) {
+            background-color: transparent;
+          }
+        }
+      }
+
+      &.ZuSwitch-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-primary-main;
+      }
+
+      &.ZuSwitch-checked + &.ZuSwitch-track {
+        background-color: $zu-palette-primary-main;
+      }
+    }
+
+    &.ZuSwitch-colorSecondary {
+      &.ZuSwitch-checked {
+        color: var(--zu-palette-secondary-main);
+
+        &:hover {
+          // FIXME(Shaohua):
+          //background-color: alpha(var(--zu-palette-secondary-main), var(--zu-palette-action-hoverOpacity));
+
+          @media (hover:none) {
+            background-color: transparent;
+          }
+        }
+      }
+
+      &.ZuSwitch-disabled {
+        // TODO(Shaohua): call lighten() for light theme.
+        color: $zu-palette-secondary-main;
+      }
+
+      &.ZuSwitch-checked + &.ZuSwitch-track {
+        background-color: $zu-palette-secondary-main;
+      }
+    }
+  }
 }