From e77d313839b382760a5d24c550e2ab795a1fac27 Mon Sep 17 00:00:00 2001 From: Bennet Bo Fenner <53836821+bennetbo@users.noreply.github.com> Date: Mon, 25 Mar 2024 09:43:17 +0100 Subject: [PATCH] markdown preview: Improve task list visuals (#9695) Instead of using some arbitrary unicode characters to render a task as completed/not completed, I feel that using an actual checkbox from the components crate makes it look more polished. Before: ![image](https://github.com/zed-industries/zed/assets/53836821/700de8f8-2e01-4e03-b237-e3da2971f039) After: image Release Notes: - Improved visuals of task lists inside the markdown preview --- .../markdown_preview/src/markdown_renderer.rs | 20 ++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/crates/markdown_preview/src/markdown_renderer.rs b/crates/markdown_preview/src/markdown_renderer.rs index 1907664e5bf74e6f06c5341fc6ec545522496b85..597b2bd39d56aa78f663d2bceeb0187751b6ca7f 100644 --- a/crates/markdown_preview/src/markdown_renderer.rs +++ b/crates/markdown_preview/src/markdown_renderer.rs @@ -13,7 +13,7 @@ use std::{ sync::Arc, }; use theme::{ActiveTheme, SyntaxTheme}; -use ui::{h_flex, v_flex, Label}; +use ui::{h_flex, v_flex, Checkbox, Selection}; use workspace::Workspace; pub struct RenderContext { @@ -139,11 +139,21 @@ fn render_markdown_list(parsed: &ParsedMarkdownList, cx: &mut RenderContext) -> let padding = rems((item.depth - 1) as f32 * 0.25); let bullet = match item.item_type { - Ordered(order) => format!("{}.", order), - Unordered => "•".to_string(), - Task(checked) => if checked { "☑" } else { "☐" }.to_string(), + Ordered(order) => format!("{}.", order).into_any_element(), + Unordered => "•".into_any_element(), + Task(checked) => div() + .mt(px(3.)) + .child(Checkbox::new( + "checkbox", + if checked { + Selection::Selected + } else { + Selection::Unselected + }, + )) + .into_any_element(), }; - let bullet = div().mr_2().child(Label::new(bullet)); + let bullet = div().mr_2().child(bullet); let contents: Vec = item .contents