Piotr OsiewiczandMax
a63b78d5a0
This PR addresses feedback from @maxbrunsfeld on new replace in buffer. It fixes: - missing padding surrounding replace input. - missing padding around replace buttons. - missing `.notify` call which made the replace fields not show up immediately sometimes. Release Notes: - N/A --------- Co-authored-by: Max <max@zed.dev>
439 lines
15 KiB
TypeScript
439 lines
15 KiB
TypeScript
import { with_opacity } from "../theme/color"
|
|
import { background, border, foreground, text } from "./components"
|
|
import { interactive, toggleable } from "../element"
|
|
import { useTheme } from "../theme"
|
|
import { text_button } from "../component/text_button"
|
|
|
|
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 = {
|
|
background: background(theme.highest),
|
|
corner_radius: 8,
|
|
min_width: 200,
|
|
max_width: 500,
|
|
placeholder_text: text(theme.highest, "mono", "disabled"),
|
|
selection: theme.players[0],
|
|
text: text(theme.highest, "mono", "default"),
|
|
border: border(theme.highest),
|
|
padding: {
|
|
top: 4,
|
|
bottom: 4,
|
|
left: 10,
|
|
right: 4,
|
|
},
|
|
margin: { right: SEARCH_ROW_SPACING }
|
|
}
|
|
|
|
const include_exclude_editor = {
|
|
...editor,
|
|
min_width: 100,
|
|
max_width: 250,
|
|
}
|
|
|
|
return {
|
|
padding: { top: 4, bottom: 4 },
|
|
|
|
option_button: toggleable({
|
|
base: interactive({
|
|
base: {
|
|
icon_width: 14,
|
|
button_width: 32,
|
|
color: foreground(theme.highest, "variant"),
|
|
background: background(theme.highest, "on"),
|
|
corner_radius: 2,
|
|
margin: { right: 2 },
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on"),
|
|
},
|
|
padding: {
|
|
left: 4,
|
|
right: 4,
|
|
top: 4,
|
|
bottom: 4,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(theme.highest, "mono", "variant", "hovered"),
|
|
background: background(theme.highest, "on", "hovered"),
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on", "hovered"),
|
|
},
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "mono", "variant", "pressed"),
|
|
background: background(theme.highest, "on", "pressed"),
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
state: {
|
|
active: {
|
|
default: {
|
|
icon_width: 14,
|
|
button_width: 32,
|
|
color: foreground(theme.highest, "variant"),
|
|
background: background(theme.highest, "accent"),
|
|
border: border(theme.highest, "accent"),
|
|
},
|
|
hovered: {
|
|
background: background(
|
|
theme.highest,
|
|
"accent",
|
|
"hovered"
|
|
),
|
|
border: border(theme.highest, "accent", "hovered"),
|
|
},
|
|
clicked: {
|
|
background: background(
|
|
theme.highest,
|
|
"accent",
|
|
"pressed"
|
|
),
|
|
border: border(theme.highest, "accent", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
option_button_component: toggleable({
|
|
base: interactive({
|
|
base: {
|
|
icon_size: 14,
|
|
color: foreground(theme.highest, "variant"),
|
|
|
|
button_width: 32,
|
|
background: background(theme.highest, "on"),
|
|
corner_radius: 6,
|
|
margin: { right: 2 },
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on"),
|
|
},
|
|
padding: {
|
|
left: 4,
|
|
right: 4,
|
|
top: 4,
|
|
bottom: 4,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(theme.highest, "mono", "variant", "hovered"),
|
|
background: background(theme.highest, "on", "hovered"),
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on", "hovered"),
|
|
},
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "mono", "variant", "pressed"),
|
|
background: background(theme.highest, "on", "pressed"),
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
state: {
|
|
active: {
|
|
default: {
|
|
icon_size: 14,
|
|
button_width: 32,
|
|
color: foreground(theme.highest, "variant"),
|
|
background: background(theme.highest, "accent"),
|
|
border: border(theme.highest, "accent"),
|
|
},
|
|
hovered: {
|
|
background: background(
|
|
theme.highest,
|
|
"accent",
|
|
"hovered"
|
|
),
|
|
border: border(theme.highest, "accent", "hovered"),
|
|
},
|
|
clicked: {
|
|
background: background(
|
|
theme.highest,
|
|
"accent",
|
|
"pressed"
|
|
),
|
|
border: border(theme.highest, "accent", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
editor,
|
|
invalid_editor: {
|
|
...editor,
|
|
border: border(theme.highest, "negative"),
|
|
},
|
|
include_exclude_editor,
|
|
invalid_include_exclude_editor: {
|
|
...include_exclude_editor,
|
|
border: border(theme.highest, "negative"),
|
|
},
|
|
match_index: {
|
|
...text(theme.highest, "mono", { size: "sm" }),
|
|
padding: {
|
|
left: SEARCH_ROW_SPACING,
|
|
right: SEARCH_ROW_SPACING,
|
|
},
|
|
},
|
|
option_button_group: {
|
|
padding: {
|
|
right: SEARCH_ROW_SPACING,
|
|
},
|
|
},
|
|
include_exclude_inputs: {
|
|
...text(theme.highest, "mono", "variant"),
|
|
padding: {
|
|
right: 6,
|
|
},
|
|
},
|
|
major_results_status: {
|
|
...text(theme.highest, "mono", "on"),
|
|
size: 15,
|
|
},
|
|
minor_results_status: {
|
|
...text(theme.highest, "mono", "variant"),
|
|
size: 13,
|
|
},
|
|
// Input Icon
|
|
editor_icon: {
|
|
icon: {
|
|
color: foreground(theme.highest, "disabled"),
|
|
asset: "icons/magnifying_glass.svg",
|
|
dimensions: {
|
|
width: 14,
|
|
height: 14,
|
|
},
|
|
},
|
|
container: {
|
|
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", { size: "sm" }),
|
|
background: background(theme.highest, "variant"),
|
|
|
|
border: {
|
|
...border(theme.highest, "on"),
|
|
left: false,
|
|
right: false,
|
|
},
|
|
margin: {
|
|
top: 1,
|
|
bottom: 1,
|
|
},
|
|
padding: {
|
|
left: 10,
|
|
right: 10,
|
|
},
|
|
corner_radius: 6,
|
|
},
|
|
state: {
|
|
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", {
|
|
size: "sm",
|
|
}),
|
|
background: background(
|
|
theme.highest,
|
|
"variant",
|
|
"pressed"
|
|
),
|
|
border: border(theme.highest, "on", "pressed"),
|
|
},
|
|
},
|
|
}),
|
|
state: {
|
|
active: {
|
|
default: {
|
|
...text(theme.highest, "mono", "on", { size: "sm" }),
|
|
background: background(theme.highest, "on"),
|
|
},
|
|
hovered: {
|
|
...text(theme.highest, "mono", "on", "hovered", {
|
|
size: "sm",
|
|
}),
|
|
background: background(theme.highest, "on", "hovered"),
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "mono", "on", "pressed", {
|
|
size: "sm",
|
|
}),
|
|
background: background(theme.highest, "on", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
// Next/Previous Match buttons
|
|
// HACK: This is not how disabled elements should be created
|
|
// Disabled elements should use a disabled state of an interactive element, not a toggleable element with the inactive state being disabled
|
|
nav_button: toggleable({
|
|
state: {
|
|
inactive: interactive({
|
|
base: {
|
|
background: background(theme.highest, "disabled"),
|
|
text: text(theme.highest, "mono", "disabled"),
|
|
corner_radius: 6,
|
|
border: {
|
|
...border(theme.highest, "disabled"),
|
|
left: false,
|
|
right: false,
|
|
},
|
|
margin: {
|
|
top: 1,
|
|
bottom: 1,
|
|
},
|
|
padding: {
|
|
left: 10,
|
|
right: 10,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {},
|
|
},
|
|
}),
|
|
active: interactive({
|
|
base: {
|
|
text: text(theme.highest, "mono", "on"),
|
|
background: background(theme.highest, "on"),
|
|
corner_radius: 6,
|
|
border: {
|
|
...border(theme.highest, "on"),
|
|
left: false,
|
|
right: false,
|
|
},
|
|
margin: {
|
|
top: 1,
|
|
bottom: 1,
|
|
},
|
|
padding: {
|
|
left: 10,
|
|
right: 10,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(theme.highest, "mono", "on", "hovered"),
|
|
background: background(
|
|
theme.highest,
|
|
"on",
|
|
"hovered"
|
|
),
|
|
border: border(theme.highest, "on", "hovered"),
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "mono", "on", "pressed"),
|
|
background: background(
|
|
theme.highest,
|
|
"on",
|
|
"pressed"
|
|
),
|
|
border: border(theme.highest, "on", "pressed"),
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
}),
|
|
search_bar_row_height: 34,
|
|
search_row_spacing: 8,
|
|
option_button_height: 22,
|
|
modes_container: {
|
|
padding: {
|
|
right: SEARCH_ROW_SPACING,
|
|
}
|
|
},
|
|
replace_icon: {
|
|
icon: {
|
|
color: foreground(theme.highest, "disabled"),
|
|
asset: "icons/replace.svg",
|
|
dimensions: {
|
|
width: 14,
|
|
height: 14,
|
|
},
|
|
},
|
|
container: {
|
|
margin: { right: 4 },
|
|
padding: { left: 1, right: 1 },
|
|
},
|
|
},
|
|
action_button: interactive({
|
|
base: {
|
|
icon_size: 14,
|
|
color: foreground(theme.highest, "variant"),
|
|
|
|
button_width: 32,
|
|
background: background(theme.highest, "on"),
|
|
corner_radius: 6,
|
|
margin: { right: 2 },
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on"),
|
|
},
|
|
padding: {
|
|
left: 4,
|
|
right: 4,
|
|
top: 4,
|
|
bottom: 4,
|
|
},
|
|
},
|
|
state: {
|
|
hovered: {
|
|
...text(theme.highest, "mono", "variant", "hovered"),
|
|
background: background(theme.highest, "on", "hovered"),
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on", "hovered"),
|
|
},
|
|
},
|
|
clicked: {
|
|
...text(theme.highest, "mono", "variant", "pressed"),
|
|
background: background(theme.highest, "on", "pressed"),
|
|
border: {
|
|
width: 1,
|
|
color: background(theme.highest, "on", "pressed"),
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
...search_results(),
|
|
}
|
|
}
|