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

Polish styling of contacts popover

Browse source 
Co-Authored-By: Nathan Sobo <nathan@zed.dev>
This commit is contained in:
Antonio Scandurra 2022-10-11 16:52:20 +02:00
parent 4504b36c8f
commit eb711cde53
4 changed files with 13 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

13
crates/collab_ui/src/contact_list.rs
View file

@ -1087,14 +1087,11 @@ impl View for ContactList {
) )
.with_child( .with_child(
MouseEventHandler::<AddContact>::new(0, cx, |_, _| { MouseEventHandler::<AddContact>::new(0, cx, |_, _| {
Svg::new("icons/user_plus_16.svg") render_icon_button(
.with_color(theme.contact_list.add_contact_button.color) &theme.contact_list.add_contact_button,
.constrained() "icons/user_plus_16.svg",
.with_height(16.) )
.contained() .boxed()
.with_style(theme.contact_list.add_contact_button.container)
.aligned()
.boxed()
}) })
.with_cursor_style(CursorStyle::PointingHand) .with_cursor_style(CursorStyle::PointingHand)
.on_click(MouseButton::Left, |_, cx| { .on_click(MouseButton::Left, |_, cx| {

6
styles/src/styleTree/contactFinder.ts
View file

@ -3,7 +3,7 @@ import picker from "./picker";
import { backgroundColor, border, iconColor, player, text } from "./components"; import { backgroundColor, border, iconColor, player, text } from "./components";
export default function contactFinder(theme: Theme) { export default function contactFinder(theme: Theme) {
const sideMargin = 12; const sideMargin = 6;
const contactButton = { const contactButton = {
background: backgroundColor(theme, 100), background: backgroundColor(theme, 100),
color: iconColor(theme, "primary"), color: iconColor(theme, "primary"),
@ -33,8 +33,8 @@ export default function contactFinder(theme: Theme) {
top: 4, top: 4,
}, },
margin: { margin: {
left: 12, left: sideMargin,
right: 12, right: sideMargin,
} }
} }
}, },

8
styles/src/styleTree/contactList.ts
View file

@ -53,22 +53,20 @@ export default function contactList(theme: Theme) {
top: 4, top: 4,
}, },
margin: { margin: {
left: sidePadding, left: 6
right: sidePadding,
}, },
}, },
userQueryEditorHeight: 33, userQueryEditorHeight: 33,
addContactButton: { addContactButton: {
margin: { left: 6, right: 12 },
color: iconColor(theme, "primary"), color: iconColor(theme, "primary"),
buttonWidth: 16, buttonWidth: 28,
iconWidth: 16, iconWidth: 16,
}, },
rowHeight: 28, rowHeight: 28,
sectionIconSize: 8, sectionIconSize: 8,
headerRow: { headerRow: {
...text(theme, "mono", "secondary", { size: "sm" }), ...text(theme, "mono", "secondary", { size: "sm" }),
margin: { top: 14 }, margin: { top: 6 },
padding: { padding: {
left: sidePadding, left: sidePadding,
right: sidePadding, right: sidePadding,

4
styles/src/styleTree/contactsPopover.ts
View file

@ -8,7 +8,7 @@ export default function contactsPopover(theme: Theme) {
padding: { top: 6 }, padding: { top: 6 },
shadow: popoverShadow(theme), shadow: popoverShadow(theme),
border: border(theme, "primary"), border: border(theme, "primary"),
width: 250, width: 300,
height: 300, height: 400,
} }
} }