Make toolbar horizontal padding more consistent
* increase horizontal padding of toolbar itself, remove padding that was added to individual toolbar items like feedback button. * make feedback info text and breadcrumbs have the same additional padding as quick action buttons.
This commit is contained in:
parent
5b0f4ac9e8
commit
56d9a578bd
3 changed files with 19 additions and 14 deletions
|
@ -42,14 +42,14 @@ impl View for FeedbackInfoText {
|
||||||
)
|
)
|
||||||
.with_child(
|
.with_child(
|
||||||
MouseEventHandler::new::<OpenZedCommunityRepo, _>(0, cx, |state, _| {
|
MouseEventHandler::new::<OpenZedCommunityRepo, _>(0, cx, |state, _| {
|
||||||
let contained_text = if state.hovered() {
|
let style = if state.hovered() {
|
||||||
&theme.feedback.link_text_hover
|
&theme.feedback.link_text_hover
|
||||||
} else {
|
} else {
|
||||||
&theme.feedback.link_text_default
|
&theme.feedback.link_text_default
|
||||||
};
|
};
|
||||||
|
Label::new("community repo", style.text.clone())
|
||||||
Label::new("community repo", contained_text.text.clone())
|
|
||||||
.contained()
|
.contained()
|
||||||
|
.with_style(style.container)
|
||||||
.aligned()
|
.aligned()
|
||||||
.left()
|
.left()
|
||||||
.clipped()
|
.clipped()
|
||||||
|
@ -64,6 +64,8 @@ impl View for FeedbackInfoText {
|
||||||
.with_soft_wrap(false)
|
.with_soft_wrap(false)
|
||||||
.aligned(),
|
.aligned(),
|
||||||
)
|
)
|
||||||
|
.contained()
|
||||||
|
.with_style(theme.feedback.info_text_default.container)
|
||||||
.aligned()
|
.aligned()
|
||||||
.left()
|
.left()
|
||||||
.clipped()
|
.clipped()
|
||||||
|
|
|
@ -12,9 +12,6 @@ export default function feedback(): any {
|
||||||
background: background(theme.highest, "on"),
|
background: background(theme.highest, "on"),
|
||||||
corner_radius: 6,
|
corner_radius: 6,
|
||||||
border: border(theme.highest, "on"),
|
border: border(theme.highest, "on"),
|
||||||
margin: {
|
|
||||||
right: 4,
|
|
||||||
},
|
|
||||||
padding: {
|
padding: {
|
||||||
bottom: 2,
|
bottom: 2,
|
||||||
left: 10,
|
left: 10,
|
||||||
|
@ -41,9 +38,15 @@ export default function feedback(): any {
|
||||||
},
|
},
|
||||||
}),
|
}),
|
||||||
button_margin: 8,
|
button_margin: 8,
|
||||||
info_text_default: text(theme.highest, "sans", "default", {
|
info_text_default: {
|
||||||
size: "xs",
|
padding: {
|
||||||
}),
|
left: 4,
|
||||||
|
right: 4,
|
||||||
|
},
|
||||||
|
...text(theme.highest, "sans", "default", {
|
||||||
|
size: "xs",
|
||||||
|
})
|
||||||
|
},
|
||||||
link_text_default: text(theme.highest, "sans", "default", {
|
link_text_default: text(theme.highest, "sans", "default", {
|
||||||
size: "xs",
|
size: "xs",
|
||||||
underline: true,
|
underline: true,
|
||||||
|
|
|
@ -2,14 +2,14 @@ import { useTheme } from "../common"
|
||||||
import { toggleable_icon_button } from "../component/icon_button"
|
import { toggleable_icon_button } from "../component/icon_button"
|
||||||
import { interactive, toggleable } from "../element"
|
import { interactive, toggleable } from "../element"
|
||||||
import { background, border, foreground, text } from "./components"
|
import { background, border, foreground, text } from "./components"
|
||||||
import { text_button } from "../component";
|
import { text_button } from "../component"
|
||||||
|
|
||||||
export const toolbar = () => {
|
export const toolbar = () => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
|
|
||||||
return {
|
return {
|
||||||
height: 42,
|
height: 42,
|
||||||
padding: { left: 4, right: 4 },
|
padding: { left: 8, right: 8 },
|
||||||
background: background(theme.highest),
|
background: background(theme.highest),
|
||||||
border: border(theme.highest, { bottom: true }),
|
border: border(theme.highest, { bottom: true }),
|
||||||
item_spacing: 4,
|
item_spacing: 4,
|
||||||
|
@ -24,9 +24,9 @@ export const toolbar = () => {
|
||||||
...text(theme.highest, "sans", "variant"),
|
...text(theme.highest, "sans", "variant"),
|
||||||
corner_radius: 6,
|
corner_radius: 6,
|
||||||
padding: {
|
padding: {
|
||||||
left: 6,
|
left: 4,
|
||||||
right: 6,
|
right: 4,
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
state: {
|
state: {
|
||||||
hovered: {
|
hovered: {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue