From 9e87be722edf6159692463b6fbeeb6b2ea19db20 Mon Sep 17 00:00:00 2001 From: Max Brunsfeld Date: Wed, 27 Apr 2022 12:14:34 -0700 Subject: [PATCH] Start re-styling diagnostic indicator in status bar --- assets/icons/error-solid-14.svg | 3 + assets/icons/no-error-solid-14.svg | 3 + assets/icons/warning-solid-14.svg | 3 + assets/themes/cave-dark.json | 171 +++++++++++++++++++++------ assets/themes/cave-light.json | 171 +++++++++++++++++++++------ assets/themes/dark.json | 171 +++++++++++++++++++++------ assets/themes/light.json | 171 +++++++++++++++++++++------ assets/themes/solarized-dark.json | 171 +++++++++++++++++++++------ assets/themes/solarized-light.json | 171 +++++++++++++++++++++------ assets/themes/sulphurpool-dark.json | 171 +++++++++++++++++++++------ assets/themes/sulphurpool-light.json | 171 +++++++++++++++++++++------ crates/diagnostics/src/items.rs | 95 +++++++++++++-- crates/theme/src/theme.rs | 35 +++++- crates/workspace/src/sidebar.rs | 17 ++- styles/src/styleTree/workspace.ts | 75 +++++++++--- 15 files changed, 1245 insertions(+), 354 deletions(-) create mode 100644 assets/icons/error-solid-14.svg create mode 100644 assets/icons/no-error-solid-14.svg create mode 100644 assets/icons/warning-solid-14.svg diff --git a/assets/icons/error-solid-14.svg b/assets/icons/error-solid-14.svg new file mode 100644 index 0000000000..a74b7e9419 --- /dev/null +++ b/assets/icons/error-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/no-error-solid-14.svg b/assets/icons/no-error-solid-14.svg new file mode 100644 index 0000000000..4d222aac73 --- /dev/null +++ b/assets/icons/no-error-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/warning-solid-14.svg b/assets/icons/warning-solid-14.svg new file mode 100644 index 0000000000..53dd5f7eae --- /dev/null +++ b/assets/icons/warning-solid-14.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 2d6b93a177..1b0ded6e8e 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -209,45 +209,138 @@ "color": "#8b8792", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#8b8792", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#8b8792", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#efecf4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } }, - "corner_radius": 5, - "background": "#5852607a" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#e2dfe7", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#8b8792", + "size": 14 + }, + "icon_color_ok": "#2a9292", + "icon_color_warning": "#a06e3b", + "icon_color_error": "#be4678", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#8b8792", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#8b8792", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#efecf4", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#5852607a" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#8b8792" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#58526052", "color": "#8b8792" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#58526052", "color": "#efecf4" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5852607a", "color": "#efecf4" }, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 1784bb8b54..61d89bb0dc 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -209,45 +209,138 @@ "color": "#585260", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#585260", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#585260", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#19171c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } }, - "corner_radius": 5, - "background": "#8b87922e" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#a06e3b26", + "border": { + "color": "#a06e3b26", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#26232a", + "size": 14, + "background": "#be467826", + "border": { + "color": "#be467826", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#585260", + "size": 14 + }, + "icon_color_ok": "#2a9292", + "icon_color_warning": "#a06e3b", + "icon_color_error": "#be4678", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#585260", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#585260", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#19171c", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#8b87922e" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#585260" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#8b87921f", "color": "#585260" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#8b87921f", "color": "#19171c" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#8b87922e", "color": "#19171c" }, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index 2b0d732958..6e72cfe2ae 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -209,45 +209,138 @@ "color": "#808080", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#9c9c9c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#9c9c9c", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#ffffff", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } }, - "corner_radius": 5, - "background": "#2b2b2b" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#f1f1f1", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#808080", + "size": 14 + }, + "icon_color_ok": "#1b9447", + "icon_color_warning": "#f6a724", + "icon_color_error": "#eb2d2d", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#9c9c9c", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#9c9c9c", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#ffffff", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#2b2b2b" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#9c9c9c" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#323232", "color": "#9c9c9c" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#323232", "color": "#ffffff" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#1c1c1c", "color": "#ffffff" }, diff --git a/assets/themes/light.json b/assets/themes/light.json index ae6036ccff..3312947f60 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -209,45 +209,138 @@ "color": "#636363", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#717171", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#717171", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#000000", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } }, - "corner_radius": 5, - "background": "#e3e3e3" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#f6a72426", + "border": { + "color": "#f6a72426", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#2b2b2b", + "size": 14, + "background": "#c9181826", + "border": { + "color": "#eb2d2d26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#636363", + "size": 14 + }, + "icon_color_ok": "#1b9447", + "icon_color_warning": "#f7bf17", + "icon_color_error": "#c91818", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#717171", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#717171", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#000000", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#e3e3e3" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#717171" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#e3e3e3", "color": "#717171" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#e3e3e3", "color": "#000000" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#d5d5d5", "color": "#000000" }, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index dffea6b231..6c05f73b01 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -209,45 +209,138 @@ "color": "#93a1a1", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#93a1a1", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#93a1a1", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#fdf6e3", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#586e757a" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#eee8d5", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#93a1a1", + "size": 14 + }, + "icon_color_ok": "#859900", + "icon_color_warning": "#b58900", + "icon_color_error": "#dc322f", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#93a1a1", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#93a1a1", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#fdf6e3", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#586e757a" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#93a1a1" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#586e7552", "color": "#93a1a1" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#586e7552", "color": "#fdf6e3" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#586e757a", "color": "#fdf6e3" }, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 912f160a83..289baa6dae 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -209,45 +209,138 @@ "color": "#586e75", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#586e75", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#586e75", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#002b36", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#93a1a12e" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#b5890026", + "border": { + "color": "#b5890026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#073642", + "size": 14, + "background": "#dc322f26", + "border": { + "color": "#dc322f26", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#586e75", + "size": 14 + }, + "icon_color_ok": "#859900", + "icon_color_warning": "#b58900", + "icon_color_error": "#dc322f", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#586e75", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#586e75", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#002b36", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#93a1a12e" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#586e75" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#93a1a11f", "color": "#586e75" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#93a1a11f", "color": "#002b36" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#93a1a12e", "color": "#002b36" }, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 8fe68d0526..371aac3517 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -209,45 +209,138 @@ "color": "#979db4", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#979db4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#979db4", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#f5f7ff", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#5e66877a" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#dfe2f1", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#979db4", + "size": 14 + }, + "icon_color_ok": "#ac9739", + "icon_color_warning": "#c08b30", + "icon_color_error": "#c94922", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#979db4", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#979db4", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#f5f7ff", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#5e66877a" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#979db4" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5e668752", "color": "#979db4" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5e668752", "color": "#f5f7ff" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#5e66877a", "color": "#f5f7ff" }, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index eea0851ad5..0d85195326 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -209,45 +209,138 @@ "color": "#5e6687", "size": 14 }, - "sidebar_item": { - "height": 32, - "icon_color": "#5e6687", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "diagnostics": { + "height": 16, + "summary_ok": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_hover": { - "height": 32, - "icon_color": "#5e6687", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_ok_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14 }, - "corner_radius": 5 - }, - "sidebar_item_active": { - "height": 32, - "icon_color": "#202746", - "icon_size": 18, - "padding": { - "left": 5, - "right": 5 + "summary_warning": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } }, - "corner_radius": 5, - "background": "#979db42e" + "summary_warning_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c08b3026", + "border": { + "color": "#c08b3026", + "width": 1 + } + }, + "summary_error": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "summary_error_hover": { + "corner_radius": 5, + "padding": { + "left": 5, + "right": 5 + }, + "family": "Zed Sans", + "color": "#293256", + "size": 14, + "background": "#c9492226", + "border": { + "color": "#c9492226", + "width": 1 + } + }, + "message": { + "family": "Zed Sans", + "color": "#5e6687", + "size": 14 + }, + "icon_color_ok": "#ac9739", + "icon_color_warning": "#c08b30", + "icon_color_error": "#c94922", + "icon_width": 14, + "icon_spacing": 4, + "summary_spacing": 8 }, - "sidebar_items_left": { - "margin": { - "right": 20 - } - }, - "sidebar_items_right": { - "margin": { - "left": 20 + "sidebar_buttons": { + "group_left": { + "margin": { + "right": 20 + } + }, + "group_right": { + "margin": { + "left": 20 + } + }, + "item": { + "icon_color": "#5e6687", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_hover": { + "icon_color": "#5e6687", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5 + }, + "item_active": { + "icon_color": "#202746", + "icon_size": 18, + "padding": { + "left": 5, + "right": 5 + }, + "corner_radius": 5, + "background": "#979db42e" } } }, @@ -323,37 +416,37 @@ } }, "share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "color": "#5e6687" }, "hovered_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#979db41f", "color": "#5e6687" }, "hovered_active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#979db41f", "color": "#202746" }, "active_share_icon": { + "corner_radius": 6, "margin": { "top": 3, "bottom": 2 }, - "corner_radius": 6, "background": "#979db42e", "color": "#202746" }, diff --git a/crates/diagnostics/src/items.rs b/crates/diagnostics/src/items.rs index 2f9a228256..9c6f415ab8 100644 --- a/crates/diagnostics/src/items.rs +++ b/crates/diagnostics/src/items.rs @@ -1,4 +1,3 @@ -use crate::render_summary; use gpui::{ elements::*, platform::CursorStyle, serde_json, Entity, ModelHandle, RenderContext, View, ViewContext, @@ -50,19 +49,91 @@ impl View for DiagnosticSummary { enum Tag {} let in_progress = self.in_progress; - MouseEventHandler::new::(0, cx, |_, cx| { - let theme = &cx.global::().theme.project_diagnostics; - if in_progress { - Label::new( - "Checking... ".to_string(), - theme.status_bar_item.text.clone(), - ) - .contained() - .with_style(theme.status_bar_item.container) - .boxed() + MouseEventHandler::new::(0, cx, |state, cx| { + let style = &cx + .global::() + .theme + .workspace + .status_bar + .diagnostics; + let summary_style = if self.summary.error_count > 0 { + if state.hovered { + &style.summary_error_hover + } else { + &style.summary_error + } + } else if self.summary.warning_count > 0 { + if state.hovered { + &style.summary_warning_hover + } else { + &style.summary_warning + } + } else if state.hovered { + &style.summary_ok_hover } else { - render_summary(&self.summary, &theme.status_bar_item.text, &theme) + &style.summary_ok + }; + + let mut row = Flex::row(); + if self.summary.error_count > 0 { + row.add_children([ + Svg::new("icons/error-solid-14.svg") + .with_color(style.icon_color_error) + .constrained() + .with_width(style.icon_width) + .aligned() + .contained() + .with_margin_right(style.icon_spacing) + .named("error-icon"), + Label::new( + self.summary.error_count.to_string(), + summary_style.text.clone(), + ) + .aligned() + .boxed(), + ]); } + + if self.summary.warning_count > 0 { + row.add_children([ + Svg::new("icons/warning-solid-14.svg") + .with_color(style.icon_color_warning) + .constrained() + .with_width(style.icon_width) + .aligned() + .contained() + .with_margin_right(style.icon_spacing) + .with_margin_left(if self.summary.error_count > 0 { + style.summary_spacing + } else { + 0. + }) + .named("warning-icon"), + Label::new( + self.summary.warning_count.to_string(), + summary_style.text.clone(), + ) + .aligned() + .boxed(), + ]); + } + + if self.summary.error_count == 0 && self.summary.warning_count == 0 { + row.add_child( + Svg::new("icons/no-error-solid-14.svg") + .with_color(style.icon_color_ok) + .constrained() + .with_width(style.icon_width) + .aligned() + .named("ok-icon"), + ); + } + + row.constrained() + .with_height(style.height) + .contained() + .with_style(summary_style.container) + .boxed() }) .with_cursor_style(CursorStyle::PointingHand) .on_click(|cx| cx.dispatch_action(crate::Deploy)) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 710069d90d..63774824e4 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -147,11 +147,35 @@ pub struct StatusBar { pub lsp_message: TextStyle, pub auto_update_progress_message: TextStyle, pub auto_update_done_message: TextStyle, - pub sidebar_items_left: ContainerStyle, - pub sidebar_items_right: ContainerStyle, - pub sidebar_item: SidebarItem, - pub sidebar_item_active: SidebarItem, - pub sidebar_item_hover: SidebarItem, + pub sidebar_buttons: StatusBarSidebarButtons, + pub diagnostics: StatusBarDiagnostics, +} + +#[derive(Deserialize, Default)] +pub struct StatusBarSidebarButtons { + pub group_left: ContainerStyle, + pub group_right: ContainerStyle, + pub item: SidebarItem, + pub item_active: SidebarItem, + pub item_hover: SidebarItem, +} + +#[derive(Deserialize, Default)] +pub struct StatusBarDiagnostics { + pub message: ContainedText, + pub summary_ok: ContainedText, + pub summary_ok_hover: ContainedText, + pub summary_warning: ContainedText, + pub summary_warning_hover: ContainedText, + pub summary_error: ContainedText, + pub summary_error_hover: ContainedText, + pub icon_color_ok: Color, + pub icon_color_error: Color, + pub icon_color_warning: Color, + pub height: f32, + pub icon_width: f32, + pub icon_spacing: f32, + pub summary_spacing: f32, } #[derive(Deserialize, Default)] @@ -165,7 +189,6 @@ pub struct SidebarItem { pub container: ContainerStyle, pub icon_color: Color, pub icon_size: f32, - pub height: f32, } #[derive(Deserialize, Default)] diff --git a/crates/workspace/src/sidebar.rs b/crates/workspace/src/sidebar.rs index d0b786ea2d..b3f9819764 100644 --- a/crates/workspace/src/sidebar.rs +++ b/crates/workspace/src/sidebar.rs @@ -175,16 +175,21 @@ impl View for SidebarButtons { } fn render(&mut self, cx: &mut RenderContext) -> ElementBox { - let theme = &cx.global::().theme.workspace.status_bar; + let theme = &cx + .global::() + .theme + .workspace + .status_bar + .sidebar_buttons; let sidebar = self.sidebar.read(cx); - let item_style = theme.sidebar_item; - let hover_item_style = theme.sidebar_item_hover; - let active_item_style = theme.sidebar_item_active; + let item_style = theme.item; + let hover_item_style = theme.item_hover; + let active_item_style = theme.item_active; let active_ix = sidebar.active_item_ix; let side = sidebar.side; let group_style = match side { - Side::Left => theme.sidebar_items_left, - Side::Right => theme.sidebar_items_right, + Side::Left => theme.group_left, + Side::Right => theme.group_right, }; let items = sidebar.items.clone(); Flex::row() diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index ce1bc05a81..6d5ec34d47 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,4 +1,5 @@ import Theme from "../themes/theme"; +import { color } from "../tokens"; import { backgroundColor, border, iconColor, text } from "./components"; export default function workspace(theme: Theme) { @@ -47,16 +48,20 @@ export default function workspace(theme: Theme) { }, }; - const sidebarItem = { - height: 32, + const diagnosticSummary = { + cornerRadius: 5, + padding: { left: 5, right: 5 }, + ...text(theme, "sans", "primary", { size: "sm" }), + }; + const sidebarButton = { iconColor: iconColor(theme, "secondary"), iconSize: 18, padding: { left: 5, right: 5 }, cornerRadius: 5, }; const shareIcon = { - margin: { top: 3, bottom: 2 }, cornerRadius: 6, + margin: { top: 3, bottom: 2 }, }; return { @@ -95,23 +100,57 @@ export default function workspace(theme: Theme) { lspMessage: text(theme, "sans", "muted"), autoUpdateProgressMessage: text(theme, "sans", "muted"), autoUpdateDoneMessage: text(theme, "sans", "muted"), - sidebarItem: { - ...sidebarItem + diagnostics: { + height: 16, + summaryOk: { + ...diagnosticSummary, + }, + summaryOkHover: { + ...diagnosticSummary, + }, + summaryWarning: { + ...diagnosticSummary, + background: backgroundColor(theme, "warning"), + border: border(theme, "warning"), + }, + summaryWarningHover: { + ...diagnosticSummary, + background: backgroundColor(theme, "warning"), + border: border(theme, "warning"), + }, + summaryError: { + ...diagnosticSummary, + background: backgroundColor(theme, "error"), + border: border(theme, "error"), + }, + summaryErrorHover: { + ...diagnosticSummary, + background: backgroundColor(theme, "error"), + border: border(theme, "error"), + }, + message: text(theme, "sans", "muted"), + iconColorOk: iconColor(theme, "ok"), + iconColorWarning: iconColor(theme, "warning"), + iconColorError: iconColor(theme, "error"), + iconWidth: 14, + iconSpacing: 4, + summarySpacing: 8, }, - sidebarItemHover: { - ...sidebarItem + sidebarButtons: { + groupLeft: { + margin: { right: 20 } + }, + groupRight: { + margin: { left: 20 } + }, + item: { ...sidebarButton }, + itemHover: { ...sidebarButton }, + itemActive: { + ...sidebarButton, + iconColor: iconColor(theme, "active"), + background: backgroundColor(theme, 300, "active"), + }, }, - sidebarItemActive: { - ...sidebarItem, - iconColor: iconColor(theme, "active"), - background: backgroundColor(theme, 300, "active"), - }, - sidebarItemsLeft: { - margin: { right: 20 } - }, - sidebarItemsRight: { - margin: { left: 20 } - } }, titlebar: { avatarWidth: 18,