mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-24 19:10:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

Update spacing, button heights

Browse source
This commit is contained in:
Nate Butler 2023-08-29 13:28:06 -04:00
parent a5b12d535f
commit 05da4b740a
1 changed files with 51 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
styles/src/style_tree/search.ts
View file

@ -3,8 +3,21 @@ import { background, border, foreground, text } from "./components"
import { interactive, toggleable } from "../element"
import { useTheme } from "../theme"
const search_results = () => {
const theme = useTheme()
return {
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
match_background: with_opacity(
foreground(theme.highest, "accent"),
0.4
),
}
}
export default function search(): any {
const theme = useTheme()
const SEARCH_ROW_SPACING = 12
// Search input
const editor = {
@ -35,11 +48,7 @@ export default function search(): any {
return {
padding: { top: 4, bottom: 4 },
// TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
match_background: with_opacity(
foreground(theme.highest, "accent"),
0.4
),
option_button: toggleable({
base: interactive({
base: {
@ -167,7 +176,9 @@ export default function search(): any {
// top: 2,
},
margin: {
right: 9,
top: 1,
bottom: 1,
right: SEARCH_ROW_SPACING
}
},
state: {
@ -210,13 +221,13 @@ export default function search(): any {
...text(theme.highest, "mono", "variant"),
padding: {
left: 9,
right: 9,
right: SEARCH_ROW_SPACING,
},
},
option_button_group: {
padding: {
left: 12,
right: 12,
left: SEARCH_ROW_SPACING,
right: SEARCH_ROW_SPACING,
},
},
include_exclude_inputs: {
@ -233,24 +244,26 @@ export default function search(): any {
...text(theme.highest, "mono", "variant"),
size: 13,
},
// Input Icon
editor_icon: {
icon: {
color: foreground(theme.highest, "variant"),
asset: "icons/magnifying_glass_12.svg",
color: foreground(theme.highest, "disabled"),
asset: "icons/magnifying_glass.svg",
dimensions: {
width: 12,
height: 12,
width: 14,
height: 14,
}
},
container: {
margin: { right: 6 },
padding: { left: 2, right: 2 },
margin: { right: 4 },
padding: { left: 1, right: 1 },
}
},
// Toggle group buttons - Text | Regex | Semantic
mode_button: toggleable({
base: interactive({
base: {
...text(theme.highest, "mono", "variant"),
...text(theme.highest, "mono", "variant", { size: "sm" }),
background: background(theme.highest, "variant"),
border: {
@ -258,21 +271,24 @@ export default function search(): any {
left: false,
right: false
},
margin: {
top: 1,
bottom: 1,
},
padding: {
left: 10,
right: 10,
left: 12,
right: 12,
},
corner_radius: 6,
},
state: {
hovered: {
...text(theme.highest, "mono", "variant", "hovered"),
...text(theme.highest, "mono", "variant", "hovered", { size: "sm" }),
background: background(theme.highest, "variant", "hovered"),
border: border(theme.highest, "on", "hovered"),
},
clicked: {
...text(theme.highest, "mono", "variant", "pressed"),
...text(theme.highest, "mono", "variant", "pressed", { size: "sm" }),
background: background(theme.highest, "variant", "pressed"),
border: border(theme.highest, "on", "pressed"),
},
@ -281,20 +297,21 @@ export default function search(): any {
state: {
active: {
default: {
...text(theme.highest, "mono", "on"),
...text(theme.highest, "mono", "on", { size: "sm" }),
background: background(theme.highest, "on")
},
hovered: {
...text(theme.highest, "mono", "on", "hovered"),
...text(theme.highest, "mono", "on", "hovered", { size: "sm" }),
background: background(theme.highest, "on", "hovered")
},
clicked: {
...text(theme.highest, "mono", "on", "pressed"),
...text(theme.highest, "mono", "on", "pressed", { size: "sm" }),
background: background(theme.highest, "on", "pressed")
},
},
},
}),
// Next/Previous Match buttons
nav_button: toggleable({
state: {
inactive: interactive({
@ -307,7 +324,10 @@ export default function search(): any {
left: false,
right: false,
},
margin: {
top: 1,
bottom: 1,
},
padding: {
left: 10,
right: 10,
@ -327,7 +347,10 @@ export default function search(): any {
left: false,
right: false,
},
margin: {
top: 1,
bottom: 1,
},
padding: {
left: 10,
right: 10,
@ -351,6 +374,7 @@ export default function search(): any {
search_bar_row_height: 34,
search_row_spacing: 8,
option_button_height: 22,
modes_container: {}
modes_container: {},
...search_results()
}
}