Start re-styling diagnostic indicator in status bar

This commit is contained in:
Max Brunsfeld 2022-04-27 12:14:34 -07:00
parent b23ff7c3ad
commit 9e87be722e
15 changed files with 1245 additions and 354 deletions

View file

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 4.51472 9.48528 2.5 7 2.5C4.51472 2.5 2.5 4.51472 2.5 7C2.5 9.48528 4.51472 11.5 7 11.5ZM4.91475 5.71025L6.2045 7L4.91475 8.28975L5.71025 9.08525L7 7.79549L8.28975 9.08525L9.08525 8.28975L7.79549 7L9.08525 5.71025L8.28975 4.91475L7 6.2045L5.71025 4.91475L4.91475 5.71025Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 486 B

View file

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 4.51472 9.48528 2.5 7 2.5C4.51472 2.5 2.5 4.51472 2.5 7C2.5 9.48528 4.51472 11.5 7 11.5ZM9.64775 5.71025L8.85225 4.91475L6.15625 7.61076L5.14775 6.60225L4.35225 7.39775L6.15625 9.20174L9.64775 5.71025Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 416 B

View file

@ -0,0 +1,3 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 11.5H2.5V9.7L6.4375 2.5H7.5625L11.5 9.7V11.5ZM6.4375 4.9H7.5625V7.9H6.4375V4.9ZM6.4375 9.1H7.5625V10.3H6.4375V9.1Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 289 B

View file

@ -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"
},

View file

@ -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"
},

View file

@ -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"
},

View file

@ -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"
},

View file

@ -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"
},

View file

@ -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"
},

View file

@ -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"
},

View file

@ -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"
},

View file

@ -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::<Tag, _, _>(0, cx, |_, cx| {
let theme = &cx.global::<Settings>().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::<Tag, _, _>(0, cx, |state, cx| {
let style = &cx
.global::<Settings>()
.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))

View file

@ -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)]

View file

@ -175,16 +175,21 @@ impl View for SidebarButtons {
}
fn render(&mut self, cx: &mut RenderContext<Self>) -> ElementBox {
let theme = &cx.global::<Settings>().theme.workspace.status_bar;
let theme = &cx
.global::<Settings>()
.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()

View file

@ -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,