Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 Use Interactive wrapper for search option buttons

Browse source
This commit is contained in:
Max Brunsfeld 2022-04-28 15:29:03 -07:00
parent 8481834847
commit d9497d49de
12 changed files with 226 additions and 584 deletions
Download patch file Download diff file Expand all files Collapse all files

87
assets/themes/cave-dark.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#955ae780", "match_background": "#955ae780",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#efecf4", "color": "#8b8792",
"size": 14, "size": 14,
"background": "#655f6d", "background": "#26232a",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#655f6d", "color": "#26232a",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#655f6d",
"corner_radius": 4,
"border": {
"color": "#655f6d",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#efecf4",
"size": 14,
"background": "#655f6d",
"border": {
"color": "#655f6d",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#efecf4",
"right": 8, "size": 14,
"top": 3 "background": "#655f6d",
"border": {
"color": "#655f6d",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#efecf4",
"size": 14,
"background": "#26232a",
"corner_radius": 4,
"border": {
"color": "#655f6d",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#19171c", "background": "#19171c",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#8b8792",
"size": 14,
"background": "#26232a",
"corner_radius": 4,
"border": {
"color": "#26232a",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

87
assets/themes/cave-light.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#955ae780", "match_background": "#955ae780",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#19171c", "color": "#585260",
"size": 14, "size": 14,
"background": "#7e7887", "background": "#e2dfe7",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#7e7887", "color": "#e2dfe7",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#7e7887",
"corner_radius": 4,
"border": {
"color": "#7e7887",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#19171c",
"size": 14,
"background": "#7e7887",
"border": {
"color": "#7e7887",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#19171c",
"right": 8, "size": 14,
"top": 3 "background": "#7e7887",
"border": {
"color": "#7e7887",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#19171c",
"size": 14,
"background": "#e2dfe7",
"corner_radius": 4,
"border": {
"color": "#7e7887",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#efecf4", "background": "#efecf4",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#585260",
"size": 14,
"background": "#e2dfe7",
"corner_radius": 4,
"border": {
"color": "#e2dfe7",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

87
assets/themes/dark.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#3f15a380", "match_background": "#3f15a380",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#ffffff", "color": "#9c9c9c",
"size": 14, "size": 14,
"background": "#232323", "background": "#0e0e0e",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#404040", "color": "#232323",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#ffffff",
"size": 14,
"background": "#232323",
"corner_radius": 4,
"border": {
"color": "#404040",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#ffffff",
"size": 14,
"background": "#232323",
"border": {
"color": "#404040",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#ffffff",
"right": 8, "size": 14,
"top": 3 "background": "#1c1c1c",
"border": {
"color": "#404040",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#ffffff",
"size": 14,
"background": "#0e0e0e",
"corner_radius": 4,
"border": {
"color": "#404040",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#000000", "background": "#000000",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#9c9c9c",
"size": 14,
"background": "#0e0e0e",
"corner_radius": 4,
"border": {
"color": "#232323",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

87
assets/themes/light.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#fce9b7", "match_background": "#fce9b7",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#000000", "color": "#474747",
"size": 14, "size": 14,
"background": "#ffffff", "background": "#f1f1f1",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#e3e3e3", "color": "#d5d5d5",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#000000",
"size": 14,
"background": "#ffffff",
"corner_radius": 4,
"border": {
"color": "#e3e3e3",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#000000",
"size": 14,
"background": "#ffffff",
"border": {
"color": "#e3e3e3",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#000000",
"right": 8, "size": 14,
"top": 3 "background": "#f8f8f8",
"border": {
"color": "#e3e3e3",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#000000",
"size": 14,
"background": "#f1f1f1",
"corner_radius": 4,
"border": {
"color": "#e3e3e3",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#ffffff", "background": "#ffffff",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#474747",
"size": 14,
"background": "#f1f1f1",
"corner_radius": 4,
"border": {
"color": "#d5d5d5",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

87
assets/themes/solarized-dark.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#6c71c480", "match_background": "#6c71c480",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#fdf6e3", "color": "#93a1a1",
"size": 14, "size": 14,
"background": "#657b83", "background": "#073642",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#657b83", "color": "#073642",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#657b83",
"corner_radius": 4,
"border": {
"color": "#657b83",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#fdf6e3",
"size": 14,
"background": "#657b83",
"border": {
"color": "#657b83",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#fdf6e3",
"right": 8, "size": 14,
"top": 3 "background": "#657b83",
"border": {
"color": "#657b83",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#fdf6e3",
"size": 14,
"background": "#073642",
"corner_radius": 4,
"border": {
"color": "#657b83",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#002b36", "background": "#002b36",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#93a1a1",
"size": 14,
"background": "#073642",
"corner_radius": 4,
"border": {
"color": "#073642",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

87
assets/themes/solarized-light.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#6c71c480", "match_background": "#6c71c480",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#002b36", "color": "#586e75",
"size": 14, "size": 14,
"background": "#839496", "background": "#eee8d5",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#839496", "color": "#eee8d5",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#839496",
"corner_radius": 4,
"border": {
"color": "#839496",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#002b36",
"size": 14,
"background": "#839496",
"border": {
"color": "#839496",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#002b36",
"right": 8, "size": 14,
"top": 3 "background": "#839496",
"border": {
"color": "#839496",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#002b36",
"size": 14,
"background": "#eee8d5",
"corner_radius": 4,
"border": {
"color": "#839496",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#fdf6e3", "background": "#fdf6e3",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#586e75",
"size": 14,
"background": "#eee8d5",
"corner_radius": 4,
"border": {
"color": "#eee8d5",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

87
assets/themes/sulphurpool-dark.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#6679cc80", "match_background": "#6679cc80",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#f5f7ff", "color": "#979db4",
"size": 14, "size": 14,
"background": "#6b7394", "background": "#293256",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#6b7394", "color": "#293256",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#6b7394",
"corner_radius": 4,
"border": {
"color": "#6b7394",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#f5f7ff",
"size": 14,
"background": "#6b7394",
"border": {
"color": "#6b7394",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#f5f7ff",
"right": 8, "size": 14,
"top": 3 "background": "#6b7394",
"border": {
"color": "#6b7394",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#f5f7ff",
"size": 14,
"background": "#293256",
"corner_radius": 4,
"border": {
"color": "#6b7394",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#202746", "background": "#202746",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#979db4",
"size": 14,
"background": "#293256",
"corner_radius": 4,
"border": {
"color": "#293256",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

87
assets/themes/sulphurpool-light.json
View file

@ -1304,14 +1304,14 @@
"match_background": "#6679cc80", "match_background": "#6679cc80",
"tab_icon_spacing": 8, "tab_icon_spacing": 8,
"tab_icon_width": 14, "tab_icon_width": 14,
"active_hovered_option_button": { "option_button": {
"family": "Zed Mono", "family": "Zed Mono",
"color": "#202746", "color": "#5e6687",
"size": 14, "size": 14,
"background": "#898ea4", "background": "#dfe2f1",
"corner_radius": 4, "corner_radius": 4,
"border": { "border": {
"color": "#898ea4", "color": "#dfe2f1",
"width": 1 "width": 1
}, },
"margin": { "margin": {
@ -1323,27 +1323,26 @@
"left": 8, "left": 8,
"right": 8, "right": 8,
"top": 3 "top": 3
}
},
"active_option_button": {
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#898ea4",
"corner_radius": 4,
"border": {
"color": "#898ea4",
"width": 1
}, },
"margin": { "active": {
"left": 2, "family": "Zed Mono",
"right": 2 "color": "#202746",
"size": 14,
"background": "#898ea4",
"border": {
"color": "#898ea4",
"width": 1
}
}, },
"padding": { "hover": {
"bottom": 3, "family": "Zed Mono",
"left": 8, "color": "#202746",
"right": 8, "size": 14,
"top": 3 "background": "#898ea4",
"border": {
"color": "#898ea4",
"width": 1
}
} }
}, },
"editor": { "editor": {
@ -1379,27 +1378,6 @@
"right": 8 "right": 8
} }
}, },
"hovered_option_button": {
"family": "Zed Mono",
"color": "#202746",
"size": 14,
"background": "#dfe2f1",
"corner_radius": 4,
"border": {
"color": "#898ea4",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"invalid_editor": { "invalid_editor": {
"background": "#f5f7ff", "background": "#f5f7ff",
"corner_radius": 8, "corner_radius": 8,
@ -1439,27 +1417,6 @@
"size": 14, "size": 14,
"padding": 6 "padding": 6
}, },
"option_button": {
"family": "Zed Mono",
"color": "#5e6687",
"size": 14,
"background": "#dfe2f1",
"corner_radius": 4,
"border": {
"color": "#dfe2f1",
"width": 1
},
"margin": {
"left": 2,
"right": 2
},
"padding": {
"bottom": 3,
"left": 8,
"right": 8,
"top": 3
}
},
"option_button_group": { "option_button_group": {
"padding": { "padding": {
"left": 4, "left": 4,

25
crates/search/src/buffer_search.rs
View file

@ -281,13 +281,12 @@ impl BufferSearchBar {
) -> ElementBox { ) -> ElementBox {
let is_active = self.is_search_option_enabled(search_option); let is_active = self.is_search_option_enabled(search_option);
MouseEventHandler::new::<Self, _, _>(search_option as usize, cx, |state, cx| { MouseEventHandler::new::<Self, _, _>(search_option as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search; let style = &cx
let style = match (is_active, state.hovered) { .global::<Settings>()
(false, false) => &theme.option_button, .theme
(false, true) => &theme.hovered_option_button, .search
(true, false) => &theme.active_option_button, .option_button
(true, true) => &theme.active_hovered_option_button, .style_for(state, is_active);
};
Label::new(icon.to_string(), style.text.clone()) Label::new(icon.to_string(), style.text.clone())
.contained() .contained()
.with_style(style.container) .with_style(style.container)
@ -306,12 +305,12 @@ impl BufferSearchBar {
) -> ElementBox { ) -> ElementBox {
enum NavButton {} enum NavButton {}
MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| { MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search; let style = &cx
let style = if state.hovered { .global::<Settings>()
&theme.hovered_option_button .theme
} else { .search
&theme.option_button .option_button
}; .style_for(state, false);
Label::new(icon.to_string(), style.text.clone()) Label::new(icon.to_string(), style.text.clone())
.contained() .contained()
.with_style(style.container) .with_style(style.container)

25
crates/search/src/project_search.rs
View file

@ -655,12 +655,12 @@ impl ProjectSearchBar {
) -> ElementBox { ) -> ElementBox {
enum NavButton {} enum NavButton {}
MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| { MouseEventHandler::new::<NavButton, _, _>(direction as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search; let style = &cx
let style = if state.hovered { .global::<Settings>()
&theme.hovered_option_button .theme
} else { .search
&theme.option_button .option_button
}; .style_for(state, false);
Label::new(icon.to_string(), style.text.clone()) Label::new(icon.to_string(), style.text.clone())
.contained() .contained()
.with_style(style.container) .with_style(style.container)
@ -682,13 +682,12 @@ impl ProjectSearchBar {
) -> ElementBox { ) -> ElementBox {
let is_active = self.is_option_enabled(option, cx); let is_active = self.is_option_enabled(option, cx);
MouseEventHandler::new::<ProjectSearchBar, _, _>(option as usize, cx, |state, cx| { MouseEventHandler::new::<ProjectSearchBar, _, _>(option as usize, cx, |state, cx| {
let theme = &cx.global::<Settings>().theme.search; let style = &cx
let style = match (is_active, state.hovered) { .global::<Settings>()
(false, false) => &theme.option_button, .theme
(false, true) => &theme.hovered_option_button, .search
(true, false) => &theme.active_option_button, .option_button
(true, true) => &theme.active_hovered_option_button, .style_for(state, is_active);
};
Label::new(icon.to_string(), style.text.clone()) Label::new(icon.to_string(), style.text.clone())
.contained() .contained()
.with_style(style.container) .with_style(style.container)

5
crates/theme/src/theme.rs
View file

@ -114,10 +114,7 @@ pub struct Search {
pub editor: FindEditor, pub editor: FindEditor,
pub invalid_editor: ContainerStyle, pub invalid_editor: ContainerStyle,
pub option_button_group: ContainerStyle, pub option_button_group: ContainerStyle,
pub option_button: ContainedText, pub option_button: Interactive<ContainedText>,
pub active_option_button: ContainedText,
pub hovered_option_button: ContainedText,
pub active_hovered_option_button: ContainedText,
pub match_background: Color, pub match_background: Color,
pub match_index: ContainedText, pub match_index: ContainedText,
pub results_status: TextStyle, pub results_status: TextStyle,

59
styles/src/styleTree/search.ts
View file

@ -2,23 +2,6 @@ import Theme from "../themes/theme";
import { backgroundColor, border, player, text } from "./components"; import { backgroundColor, border, player, text } from "./components";
export default function search(theme: Theme) { export default function search(theme: Theme) {
const optionButton = {
...text(theme, "mono", "secondary"),
background: backgroundColor(theme, "on500"),
cornerRadius: 4,
border: border(theme, "secondary"),
margin: {
left: 2,
right: 2,
},
padding: {
bottom: 3,
left: 8,
right: 8,
top: 3,
},
};
const editor = { const editor = {
background: backgroundColor(theme, 500), background: backgroundColor(theme, 500),
cornerRadius: 8, cornerRadius: 8,
@ -43,24 +26,33 @@ export default function search(theme: Theme) {
matchBackground: theme.editor.highlight.match.value, matchBackground: theme.editor.highlight.match.value,
tabIconSpacing: 8, tabIconSpacing: 8,
tabIconWidth: 14, tabIconWidth: 14,
activeHoveredOptionButton: { optionButton: {
...optionButton, ...text(theme, "mono", "secondary"),
...text(theme, "mono", "active"), background: backgroundColor(theme, "on500"),
background: backgroundColor(theme, "on500", "active"), cornerRadius: 4,
border: border(theme, "muted"), border: border(theme, "secondary"),
}, margin: {
activeOptionButton: { left: 2,
...optionButton, right: 2,
...text(theme, "mono", "active"), },
background: backgroundColor(theme, "on500", "active"), padding: {
border: border(theme, "muted"), bottom: 3,
left: 8,
right: 8,
top: 3,
},
active: {
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "active"),
border: border(theme, "muted"),
},
hover: {
...text(theme, "mono", "active"),
background: backgroundColor(theme, "on500", "hovered"),
border: border(theme, "muted"),
}
}, },
editor, editor,
hoveredOptionButton: {
...optionButton,
...text(theme, "mono", "active"),
border: border(theme, "muted"),
},
invalidEditor: { invalidEditor: {
...editor, ...editor,
border: border(theme, "error"), border: border(theme, "error"),
@ -69,7 +61,6 @@ export default function search(theme: Theme) {
...text(theme, "mono", "muted"), ...text(theme, "mono", "muted"),
padding: 6, padding: 6,
}, },
optionButton,
optionButtonGroup: { optionButtonGroup: {
padding: { padding: {
left: 4, left: 4,