diff --git a/Cargo.lock b/Cargo.lock index 6d7ce98341f0dab435d1148710f2134ebae582d2..0277e1b47680c2572d3ef95ea866c5974953404e 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -930,6 +930,7 @@ name = "contacts_panel" version = "0.1.0" dependencies = [ "client", + "editor", "gpui", "postage", "settings", diff --git a/assets/themes/cave-dark.json b/assets/themes/cave-dark.json index 3b19c2e63eef855981632972fe933324dd677902..28d0e771ad46d3df2ff776a569a2059d7a09b8f9 100644 --- a/assets/themes/cave-dark.json +++ b/assets/themes/cave-dark.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#19171c", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#e2dfe7", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#7e7887", + "size": 14 + }, + "selection": { + "cursor": "#576ddb", + "selection": "#576ddb3d" + }, + "border": { + "color": "#26232a", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#655f6d", "tree_branch_width": 1, diff --git a/assets/themes/cave-light.json b/assets/themes/cave-light.json index 2e33fb774fe95b06c4da7d8d7d6209c20673b592..505888f2b390742a14e732a890f8f7714801d833 100644 --- a/assets/themes/cave-light.json +++ b/assets/themes/cave-light.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#efecf4", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#26232a", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#655f6d", + "size": 14 + }, + "selection": { + "cursor": "#576ddb", + "selection": "#576ddb3d" + }, + "border": { + "color": "#e2dfe7", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#7e7887", "tree_branch_width": 1, diff --git a/assets/themes/dark.json b/assets/themes/dark.json index ba9b7189d35fada8abcc2b42bace6c9f5a81fd19..060b8a12789de5068f5df2aeb2a25cdcb83b6d6c 100644 --- a/assets/themes/dark.json +++ b/assets/themes/dark.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#000000", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#f1f1f1", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#474747", + "size": 14 + }, + "selection": { + "cursor": "#2472f2", + "selection": "#2472f23d" + }, + "border": { + "color": "#232323", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#404040", "tree_branch_width": 1, diff --git a/assets/themes/light.json b/assets/themes/light.json index 7cbd315c8a41ff3572cb414727618607ae3e8875..f15f232b92058fcb6b5ff7f36f4945013ab7d88b 100644 --- a/assets/themes/light.json +++ b/assets/themes/light.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#ffffff", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#2b2b2b", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#808080", + "size": 14 + }, + "selection": { + "cursor": "#2472f2", + "selection": "#2472f23d" + }, + "border": { + "color": "#d5d5d5", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#e3e3e3", "tree_branch_width": 1, diff --git a/assets/themes/solarized-dark.json b/assets/themes/solarized-dark.json index 8672518b4cf3ef8a93cc9ad4793a6ba0106c2faa..f4e323edf9d1cae57356fe3805bf22a77109369b 100644 --- a/assets/themes/solarized-dark.json +++ b/assets/themes/solarized-dark.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#002b36", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#eee8d5", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#839496", + "size": 14 + }, + "selection": { + "cursor": "#268bd2", + "selection": "#268bd23d" + }, + "border": { + "color": "#073642", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#657b83", "tree_branch_width": 1, diff --git a/assets/themes/solarized-light.json b/assets/themes/solarized-light.json index 66b43e613dc725687d3f34c3ab427d7a1311ae61..84eb135c9aa282b4c5e95ec473557ff7c82a7a92 100644 --- a/assets/themes/solarized-light.json +++ b/assets/themes/solarized-light.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#fdf6e3", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#073642", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#657b83", + "size": 14 + }, + "selection": { + "cursor": "#268bd2", + "selection": "#268bd23d" + }, + "border": { + "color": "#eee8d5", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#839496", "tree_branch_width": 1, diff --git a/assets/themes/sulphurpool-dark.json b/assets/themes/sulphurpool-dark.json index 66f5182172e01e14902e28566600bbd7084de1de..63da853e8b887c072a1a2e67b21a5aae7f829d84 100644 --- a/assets/themes/sulphurpool-dark.json +++ b/assets/themes/sulphurpool-dark.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#202746", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#dfe2f1", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#898ea4", + "size": 14 + }, + "selection": { + "cursor": "#3d8fd1", + "selection": "#3d8fd13d" + }, + "border": { + "color": "#293256", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#6b7394", "tree_branch_width": 1, diff --git a/assets/themes/sulphurpool-light.json b/assets/themes/sulphurpool-light.json index 34a33897288143e9e5c8492d5c753232ac1422b9..cc6bc705a07e3e616f275b172fd7f3a238d382a9 100644 --- a/assets/themes/sulphurpool-light.json +++ b/assets/themes/sulphurpool-light.json @@ -1212,6 +1212,34 @@ "bottom": 12, "right": 12 }, + "user_query_editor": { + "background": "#f5f7ff", + "corner_radius": 6, + "text": { + "family": "Zed Mono", + "color": "#293256", + "size": 14 + }, + "placeholder_text": { + "family": "Zed Mono", + "color": "#6b7394", + "size": 14 + }, + "selection": { + "cursor": "#3d8fd1", + "selection": "#3d8fd13d" + }, + "border": { + "color": "#dfe2f1", + "width": 1 + }, + "padding": { + "bottom": 7, + "left": 8, + "right": 8, + "top": 7 + } + }, "host_row_height": 28, "tree_branch_color": "#898ea4", "tree_branch_width": 1, diff --git a/crates/contacts_panel/Cargo.toml b/crates/contacts_panel/Cargo.toml index 6a4dbf653dbb1751ca1a41303cf2fec08fb6f09e..8e843b0f39941593c26a90daa6fc493eb29c7b15 100644 --- a/crates/contacts_panel/Cargo.toml +++ b/crates/contacts_panel/Cargo.toml @@ -9,6 +9,7 @@ doctest = false [dependencies] client = { path = "../client" } +editor = { path = "../editor" } gpui = { path = "../gpui" } settings = { path = "../settings" } theme = { path = "../theme" } diff --git a/crates/contacts_panel/src/contacts_panel.rs b/crates/contacts_panel/src/contacts_panel.rs index 171b4194960fc54f7c61b5d50e5e46d2a4b69c81..087f169da2f491ab41ed72c37d54cd271b933f54 100644 --- a/crates/contacts_panel/src/contacts_panel.rs +++ b/crates/contacts_panel/src/contacts_panel.rs @@ -1,10 +1,11 @@ use client::{Contact, UserStore}; +use editor::Editor; use gpui::{ elements::*, geometry::{rect::RectF, vector::vec2f}, platform::CursorStyle, Element, ElementBox, Entity, LayoutContext, ModelHandle, RenderContext, Subscription, View, - ViewContext, + ViewContext, ViewHandle, }; use settings::Settings; use std::sync::Arc; @@ -13,6 +14,7 @@ use workspace::{AppState, JoinProject}; pub struct ContactsPanel { contacts: ListState, user_store: ModelHandle, + user_query_editor: ViewHandle, _maintain_contacts: Subscription, } @@ -38,6 +40,12 @@ impl ContactsPanel { } }, ), + user_query_editor: cx.add_view(|cx| { + Editor::single_line( + Some(|theme| theme.contacts_panel.user_query_editor.clone()), + cx, + ) + }), _maintain_contacts: cx.observe(&app_state.user_store, Self::update_contacts), user_store: app_state.user_store.clone(), } @@ -237,8 +245,17 @@ impl View for ContactsPanel { fn render(&mut self, cx: &mut RenderContext) -> ElementBox { let theme = &cx.global::().theme.contacts_panel; - Container::new(List::new(self.contacts.clone()).boxed()) - .with_style(theme.container) - .boxed() + Container::new( + Flex::column() + .with_child( + Container::new(ChildView::new(self.user_query_editor.clone()).boxed()) + .with_style(theme.user_query_editor.container) + .boxed(), + ) + .with_child(List::new(self.contacts.clone()).flex(1., false).boxed()) + .boxed(), + ) + .with_style(theme.container) + .boxed() } } diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index d64c093144d752c1cb6a88105c3bd7cfea18be7c..d9fa771c433cb358aec0486e48a359b9eb52b0ba 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -234,6 +234,7 @@ pub struct CommandPalette { pub struct ContactsPanel { #[serde(flatten)] pub container: ContainerStyle, + pub user_query_editor: FieldEditor, pub host_row_height: f32, pub host_avatar: ImageStyle, pub host_username: ContainedText, diff --git a/styles/src/styleTree/contactsPanel.ts b/styles/src/styleTree/contactsPanel.ts index e22a09e25f5db3c3ab5fb027b563d834913a3180..23ad7926454f09358f51035303ae5829e25aa1cd 100644 --- a/styles/src/styleTree/contactsPanel.ts +++ b/styles/src/styleTree/contactsPanel.ts @@ -1,6 +1,6 @@ import Theme from "../themes/theme"; import { panel } from "./app"; -import { backgroundColor, borderColor, text } from "./components"; +import { backgroundColor, border, borderColor, player, text } from "./components"; export default function(theme: Theme) { const project = { @@ -33,6 +33,20 @@ export default function(theme: Theme) { return { ...panel, + userQueryEditor: { + background: backgroundColor(theme, 500), + cornerRadius: 6, + text: text(theme, "mono", "primary"), + placeholderText: text(theme, "mono", "placeholder", { size: "sm" }), + selection: player(theme, 1).selection, + border: border(theme, "secondary"), + padding: { + bottom: 7, + left: 8, + right: 8, + top: 7, + }, + }, hostRowHeight: 28, treeBranchColor: borderColor(theme, "muted"), treeBranchWidth: 1,