Start on adding icon for requesting contacts

Antonio Scandurra created 3 years ago

Change summary

assets/icons/add-contact.svg                |  3 +++
assets/themes/cave-dark.json                | 10 ++++++++--
assets/themes/cave-light.json               | 10 ++++++++--
assets/themes/dark.json                     | 10 ++++++++--
assets/themes/light.json                    | 10 ++++++++--
assets/themes/solarized-dark.json           | 10 ++++++++--
assets/themes/solarized-light.json          | 10 ++++++++--
assets/themes/sulphurpool-dark.json         | 10 ++++++++--
assets/themes/sulphurpool-light.json        | 10 ++++++++--
crates/contacts_panel/src/contacts_panel.rs | 22 ++++++++++++++++++++--
crates/theme/src/theme.rs                   |  8 ++++++++
styles/src/styleTree/contactsPanel.ts       | 10 +++++++---
12 files changed, 102 insertions(+), 21 deletions(-)

Detailed changes

assets/icons/add-contact.svg

@@ -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>

assets/themes/cave-dark.json

@@ -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,

assets/themes/cave-light.json

@@ -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,

assets/themes/dark.json

@@ -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,

assets/themes/light.json

@@ -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,

assets/themes/solarized-dark.json

@@ -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,

assets/themes/solarized-light.json

@@ -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,

assets/themes/sulphurpool-dark.json

@@ -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,

assets/themes/sulphurpool-light.json

@@ -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,

crates/contacts_panel/src/contacts_panel.rs

@@ -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())

crates/theme/src/theme.rs

@@ -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)]

styles/src/styleTree/contactsPanel.ts

@@ -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,