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

Start on adding icon for requesting contacts

Browse source
This commit is contained in:
Antonio Scandurra 2022-05-10 12:09:24 +02:00
parent 52c36d3e3d
commit 09580516a0
12 changed files with 102 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

3
assets/icons/add-contact.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.2 5.0002C5.52563 5.0002 6.6 3.92563 6.6 2.6002C6.6 1.27476 5.52563 0.200195 4.2 0.200195C2.87438 0.200195 1.8 1.27476 1.8 2.6002C1.8 3.92563 2.87438 5.0002 4.2 5.0002ZM5.15063 5.9002H3.24938C1.45519 5.9002 0 7.3552 0 9.14957C0 9.50957 0.291 9.8002 0.649875 9.8002H7.7505C8.10938 9.8002 8.4 9.50957 8.4 9.14957C8.4 7.3552 6.945 5.9002 5.15063 5.9002ZM11.55 3.9502H10.65V3.0502C10.65 2.8027 10.4494 2.6002 10.2 2.6002C9.95063 2.6002 9.75 2.80176 9.75 3.0502V3.9502H8.85C8.6025 3.9502 8.4 4.1527 8.4 4.4002C8.4 4.6477 8.60156 4.8502 8.85 4.8502H9.75V5.7502C9.75 5.99957 9.9525 6.2002 10.2 6.2002C10.4475 6.2002 10.65 5.99863 10.65 5.7502V4.8502H11.55C11.7994 4.8502 12 4.64957 12 4.4002C12 4.15082 11.7994 3.9502 11.55 3.9502Z" fill="#9C9C9C"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 857 B

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

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#e2dfe7"
},
"row_height": 28,
"tree_branch_color": "#655f6d",
"tree_branch_width": 1,

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

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#26232a"
},
"row_height": 28,
"tree_branch_color": "#7e7887",
"tree_branch_width": 1,

10
assets/themes/dark.json
View file

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#c6c6c6"
},
"row_height": 28,
"tree_branch_color": "#404040",
"tree_branch_width": 1,

10
assets/themes/light.json
View file

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#393939"
},
"row_height": 28,
"tree_branch_color": "#e3e3e3",
"tree_branch_width": 1,

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

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#eee8d5"
},
"row_height": 28,
"tree_branch_color": "#657b83",
"tree_branch_width": 1,

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

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#073642"
},
"row_height": 28,
"tree_branch_color": "#839496",
"tree_branch_width": 1,

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

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#dfe2f1"
},
"row_height": 28,
"tree_branch_color": "#6b7394",
"tree_branch_width": 1,

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

@ -1234,12 +1234,18 @@
"width": 1
},
"padding": {
"bottom": 7,
"bottom": 4,
"left": 8,
"right": 8,
"top": 7
"top": 4
}
},
"add_contact_icon": {
"margin": {
"left": 6
},
"color": "#293256"
},
"row_height": 28,
"tree_branch_color": "#898ea4",
"tree_branch_width": 1,

22
crates/contacts_panel/src/contacts_panel.rs
View file

@ -711,8 +711,26 @@ impl View for ContactsPanel {
Container::new(
Flex::column()
.with_child(
Container::new(ChildView::new(self.user_query_editor.clone()).boxed())
.with_style(theme.user_query_editor.container)
Flex::row()
.with_child(
ChildView::new(self.user_query_editor.clone())
.contained()
.with_style(theme.user_query_editor.container)
.flex(1., true)
.boxed(),
)
.with_child(
Svg::new("icons/add-contact.svg")
.with_color(theme.add_contact_icon.color)
.constrained()
.with_height(12.)
.contained()
.with_style(theme.add_contact_icon.container)
.aligned()
.boxed(),
)
.constrained()
.with_height(32.)
.boxed(),
)
.with_child(List::new(self.list_state.clone()).flex(1., false).boxed())

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

@ -236,6 +236,7 @@ pub struct ContactsPanel {
pub container: ContainerStyle,
pub header: ContainedText,
pub user_query_editor: FieldEditor,
pub add_contact_icon: AddContactIcon,
pub row_height: f32,
pub contact_avatar: ImageStyle,
pub contact_username: ContainedText,
@ -248,6 +249,13 @@ pub struct ContactsPanel {
pub hovered_unshared_project: ProjectRow,
}
#[derive(Deserialize, Default)]
pub struct AddContactIcon {
#[serde(flatten)]
pub container: ContainerStyle,
pub color: Color,
}
#[derive(Deserialize, Default)]
pub struct ProjectRow {
#[serde(flatten)]

10
styles/src/styleTree/contactsPanel.ts
View file

@ -1,6 +1,6 @@
import Theme from "../themes/theme";
import { panel } from "./app";
import { backgroundColor, border, borderColor, player, text } from "./components";
import { backgroundColor, border, borderColor, iconColor, player, text } from "./components";
export default function(theme: Theme) {
const project = {
@ -41,12 +41,16 @@ export default function(theme: Theme) {
selection: player(theme, 1).selection,
border: border(theme, "secondary"),
padding: {
bottom: 7,
bottom: 4,
left: 8,
right: 8,
top: 7,
top: 4,
},
},
addContactIcon: {
margin: { left: 6 },
color: iconColor(theme, "primary")
},
rowHeight: 28,
treeBranchColor: borderColor(theme, "muted"),
treeBranchWidth: 1,