Skip to content

fix: toolbar demo toggle buttons not toggling off #192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AnttiJalomaki wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: toolbar demo toggle buttons not toggling off #192

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion preview/src/components/toolbar/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,17 @@

.toolbar button:hover:not([disabled]),
.toolbar button:focus-visible {
background: var(--light, var(--primary-color-4))
background: var(--light, var(--primary-color-4))
var(--dark, var(--primary-color-7));
color: var(--secondary-color-1);
}

.toolbar button[data-state="on"] {
background: var(--light, var(--primary-color-5))
var(--dark, var(--primary-color-6));
color: var(--secondary-color-1);
}

.toolbar button:disabled {
color: var(--secondary-color-5);
cursor: not-allowed;
Expand Down
74 changes: 43 additions & 31 deletions preview/src/components/toolbar/variants/main/mod.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,49 +3,61 @@ use dioxus::prelude::*;

#[component]
pub fn Demo() -> Element {
let mut text_style = use_signal(Vec::new);
let mut text_align = use_signal(|| String::from("left"));
let mut toggle_style = move |style: &str| {
let mut current_styles = text_style.write();
current_styles.retain(|s| s != style);
current_styles.push(style.to_string());
};
let mut set_align = move |align: &str| {
text_align.set(align.to_string());
};
let text_styles = use_memo(move || {
let mut classes = Vec::new();
for style in text_style() {
match style.as_str() {
"bold" => classes.push("font-weight: bold;"),
"italic" => classes.push("font-style: italic;"),
"underline" => classes.push("text-decoration: underline;"),
_ => {}
}
}
classes.join(" ")
});
let text_align_style =
use_memo(move || format!("text-align: {}; {}", text_align(), text_styles()));
let mut is_bold = use_signal(|| false);
let mut is_italic = use_signal(|| false);
let mut is_underline = use_signal(|| false);
let mut text_align = use_signal(|| "left".to_string());

rsx! {
Toolbar { aria_label: "Text formatting",
ToolbarGroup {
ToolbarButton { index: 0usize, on_click: move |_| toggle_style("bold"), "Bold" }
ToolbarButton { index: 1usize, on_click: move |_| toggle_style("italic"), "Italic" }
ToolbarButton {
index: 0usize,
on_click: move |_| is_bold.toggle(),
"data-state": if is_bold() { "on" } else { "off" },
"Bold"
}
ToolbarButton {
index: 1usize,
on_click: move |_| is_italic.toggle(),
"data-state": if is_italic() { "on" } else { "off" },
"Italic"
}
ToolbarButton {
index: 2usize,
on_click: move |_| toggle_style("underline"),
on_click: move |_| is_underline.toggle(),
"data-state": if is_underline() { "on" } else { "off" },
"Underline"
}
}
ToolbarSeparator {}
ToolbarGroup {
ToolbarButton { index: 3usize, on_click: move |_| set_align("left"), "Align Left" }
ToolbarButton { index: 4usize, on_click: move |_| set_align("center"), "Align Center" }
ToolbarButton { index: 5usize, on_click: move |_| set_align("right"), "Align Right" }
ToolbarButton {
index: 3usize,
on_click: move |_| text_align.set("left".to_string()),
"data-state": if text_align() == "left" { "on" } else { "off" },
"Align Left"
}
ToolbarButton {
index: 4usize,
on_click: move |_| text_align.set("center".to_string()),
"data-state": if text_align() == "center" { "on" } else { "off" },
"Align Center"
}
ToolbarButton {
index: 5usize,
on_click: move |_| text_align.set("right".to_string()),
"data-state": if text_align() == "right" { "on" } else { "off" },
"Align Right"
}
}
}
p { style: text_align_style, max_width: "30rem",
p {
max_width: "30rem",
text_align: "{text_align}",
font_weight: if is_bold() { "bold" } else { "normal" },
font_style: if is_italic() { "italic" } else { "normal" },
text_decoration: if is_underline() { "underline" } else { "none" },
"This is a sample text that will be formatted according to the toolbar buttons you click. Try clicking the buttons above to see how the text formatting changes."
}
}
Expand Down
Loading