From b80cb737452fe5fd84d4d295c1cfcb826496070f Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 22 May 2023 12:09:54 -0400 Subject: [PATCH 1/8] Add git to project panel in theme, use different values for dark and light --- styles/src/styleTree/editor.ts | 15 +++++++++++---- styles/src/styleTree/projectPanel.ts | 13 ++++++++++++- 2 files changed, 23 insertions(+), 5 deletions(-) diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 7caa8b1c67..2443717e4d 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -3,9 +3,10 @@ import { ColorScheme, Layer, StyleSets } from "../themes/common/colorScheme" import { background, border, borderColor, foreground, text } from "./components" import hoverPopover from "./hoverPopover" -import { SyntaxHighlightStyle, buildSyntax } from "../themes/common/syntax" +import { buildSyntax } from "../themes/common/syntax" export default function editor(colorScheme: ColorScheme) { + const { isLight } = colorScheme let layer = colorScheme.highest const autocompleteItem = { @@ -97,9 +98,15 @@ export default function editor(colorScheme: ColorScheme) { foldBackground: foreground(layer, "variant"), }, diff: { - deleted: foreground(layer, "negative"), - modified: foreground(layer, "warning"), - inserted: foreground(layer, "positive"), + deleted: isLight + ? colorScheme.ramps.red(0.5).hex() + : colorScheme.ramps.red(0.4).hex(), + modified: isLight + ? colorScheme.ramps.yellow(0.3).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), removedWidthEm: 0.275, widthEm: 0.22, cornerRadius: 0.2, diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 3d06a683ab..0c32ee7132 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -3,6 +3,7 @@ import { withOpacity } from "../utils/color" import { background, border, foreground, text } from "./components" export default function projectPanel(colorScheme: ColorScheme) { + const { isLight } = colorScheme let layer = colorScheme.middle let baseEntry = { @@ -28,6 +29,16 @@ export default function projectPanel(colorScheme: ColorScheme) { background: background(layer, "active"), text: text(layer, "mono", "active", { size: "sm" }), }, + status: { + git: { + modified: isLight + ? colorScheme.ramps.yellow(0.6).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + } + } } return { @@ -79,6 +90,6 @@ export default function projectPanel(colorScheme: ColorScheme) { background: background(layer, "on"), text: text(layer, "mono", "on", { size: "sm" }), selection: colorScheme.players[0], - }, + } } } From 2200a22c07c4939e1f9f3370442e25531521335c Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Mon, 22 May 2023 09:55:59 -0700 Subject: [PATCH 2/8] Wire project panel themes into rust --- crates/project_panel/src/project_panel.rs | 33 ++++++++------ crates/theme/src/theme.rs | 12 +++++ crates/theme/src/ui.rs | 55 +---------------------- styles/src/styleTree/projectPanel.ts | 23 +++++----- 4 files changed, 47 insertions(+), 76 deletions(-) diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs index ce0dd9e222..dd28bdd73e 100644 --- a/crates/project_panel/src/project_panel.rs +++ b/crates/project_panel/src/project_panel.rs @@ -6,8 +6,8 @@ use gpui::{ actions, anyhow::{anyhow, Result}, elements::{ - AnchorCorner, ChildView, ComponentHost, ContainerStyle, Empty, Flex, MouseEventHandler, - ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState, + AnchorCorner, ChildView, ContainerStyle, Empty, Flex, Label, + MouseEventHandler, ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState, }, geometry::vector::Vector2F, keymap_matcher::KeymapContext, @@ -28,7 +28,7 @@ use std::{ path::Path, sync::Arc, }; -use theme::{ui::FileName, ProjectPanelEntry}; +use theme::ProjectPanelEntry; use unicase::UniCase; use workspace::Workspace; @@ -1079,6 +1079,17 @@ impl ProjectPanel { let kind = details.kind; let show_editor = details.is_editing && !details.is_processing; + let mut filename_text_style = style.text.clone(); + filename_text_style.color = details + .git_status + .as_ref() + .map(|status| match status { + GitFileStatus::Added => style.status.git.inserted, + GitFileStatus::Modified => style.status.git.modified, + GitFileStatus::Conflict => style.text.color, + }) + .unwrap_or(style.text.color); + Flex::row() .with_child( if kind == EntryKind::Dir { @@ -1106,16 +1117,12 @@ impl ProjectPanel { .flex(1.0, true) .into_any() } else { - ComponentHost::new(FileName::new( - details.filename.clone(), - details.git_status, - FileName::style(style.text.clone(), &theme::current(cx)), - )) - .contained() - .with_margin_left(style.icon_spacing) - .aligned() - .left() - .into_any() + Label::new(details.filename.clone(), filename_text_style) + .contained() + .with_margin_left(style.icon_spacing) + .aligned() + .left() + .into_any() }) .constrained() .with_height(style.height) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index eb404cdaad..5a79946589 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -446,6 +446,18 @@ pub struct ProjectPanelEntry { pub icon_color: Color, pub icon_size: f32, pub icon_spacing: f32, + pub status: EntryStatus, +} + +#[derive(Clone, Debug, Deserialize, Default)] +pub struct EntryStatus { + pub git: GitProjectStatus, +} + +#[derive(Clone, Debug, Deserialize, Default)] +pub struct GitProjectStatus { + pub modified: Color, + pub inserted: Color, } #[derive(Clone, Debug, Deserialize, Default)] diff --git a/crates/theme/src/ui.rs b/crates/theme/src/ui.rs index e4df24c89f..1799f37aed 100644 --- a/crates/theme/src/ui.rs +++ b/crates/theme/src/ui.rs @@ -1,6 +1,5 @@ use std::borrow::Cow; -use fs::repository::GitFileStatus; use gpui::{ color::Color, elements::{ @@ -12,11 +11,11 @@ use gpui::{ platform, platform::MouseButton, scene::MouseClick, - Action, AnyElement, Element, EventContext, MouseState, View, ViewContext, + Action, Element, EventContext, MouseState, View, ViewContext, }; use serde::Deserialize; -use crate::{ContainedText, Interactive, Theme}; +use crate::{ContainedText, Interactive}; #[derive(Clone, Deserialize, Default)] pub struct CheckboxStyle { @@ -253,53 +252,3 @@ where .constrained() .with_height(style.dimensions().y()) } - -pub struct FileName { - filename: String, - git_status: Option, - style: FileNameStyle, -} - -pub struct FileNameStyle { - template_style: LabelStyle, - git_inserted: Color, - git_modified: Color, - git_deleted: Color, -} - -impl FileName { - pub fn new(filename: String, git_status: Option, style: FileNameStyle) -> Self { - FileName { - filename, - git_status, - style, - } - } - - pub fn style>(style: I, theme: &Theme) -> FileNameStyle { - FileNameStyle { - template_style: style.into(), - git_inserted: theme.editor.diff.inserted, - git_modified: theme.editor.diff.modified, - git_deleted: theme.editor.diff.deleted, - } - } -} - -impl gpui::elements::Component for FileName { - fn render(&self, _: &mut V, _: &mut ViewContext) -> AnyElement { - // Prepare colors for git statuses - let mut filename_text_style = self.style.template_style.text.clone(); - filename_text_style.color = self - .git_status - .as_ref() - .map(|status| match status { - GitFileStatus::Added => self.style.git_inserted, - GitFileStatus::Modified => self.style.git_modified, - GitFileStatus::Conflict => self.style.git_deleted, - }) - .unwrap_or(self.style.template_style.text.color); - - Label::new(self.filename.clone(), filename_text_style).into_any() - } -} diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 0c32ee7132..976cdede5c 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -13,6 +13,17 @@ export default function projectPanel(colorScheme: ColorScheme) { iconSpacing: 8, } + let status = { + git: { + modified: isLight + ? colorScheme.ramps.yellow(0.6).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + } + } + let entry = { ...baseEntry, text: text(layer, "mono", "variant", { size: "sm" }), @@ -29,16 +40,7 @@ export default function projectPanel(colorScheme: ColorScheme) { background: background(layer, "active"), text: text(layer, "mono", "active", { size: "sm" }), }, - status: { - git: { - modified: isLight - ? colorScheme.ramps.yellow(0.6).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.4).hex() - : colorScheme.ramps.green(0.5).hex(), - } - } + status } return { @@ -70,6 +72,7 @@ export default function projectPanel(colorScheme: ColorScheme) { entry, draggedEntry: { ...baseEntry, + status, text: text(layer, "mono", "on", { size: "sm" }), background: withOpacity(background(layer, "on"), 0.9), border: border(layer), From af73c1af06b6165550d32dab9d9c5b980e4bbace Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Mon, 22 May 2023 10:03:02 -0700 Subject: [PATCH 3/8] Add seperate scrollbar styling --- crates/editor/src/element.rs | 2 +- crates/theme/src/theme.rs | 8 ++++++++ crates/theme/src/ui.rs | 2 +- styles/src/styleTree/editor.ts | 11 +++++++++++ 4 files changed, 21 insertions(+), 2 deletions(-) diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index 57dc3293f6..502975c144 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -1052,7 +1052,7 @@ impl EditorElement { ..Default::default() }); - let diff_style = theme::current(cx).editor.diff.clone(); + let diff_style = &theme::current(cx).editor.scrollbar.git; for hunk in layout .position_map .snapshot diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index 5a79946589..c589137e73 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -682,6 +682,14 @@ pub struct Scrollbar { pub thumb: ContainerStyle, pub width: f32, pub min_height_factor: f32, + pub git: GitDiffColors +} + +#[derive(Clone, Deserialize, Default)] +pub struct GitDiffColors { + pub inserted: Color, + pub modified: Color, + pub deleted: Color } #[derive(Clone, Deserialize, Default)] diff --git a/crates/theme/src/ui.rs b/crates/theme/src/ui.rs index 1799f37aed..b86bfca8c4 100644 --- a/crates/theme/src/ui.rs +++ b/crates/theme/src/ui.rs @@ -3,7 +3,7 @@ use std::borrow::Cow; use gpui::{ color::Color, elements::{ - ConstrainedBox, Container, ContainerStyle, Empty, Flex, KeystrokeLabel, Label, LabelStyle, + ConstrainedBox, Container, ContainerStyle, Empty, Flex, KeystrokeLabel, Label, MouseEventHandler, ParentElement, Stack, Svg, }, fonts::TextStyle, diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 2443717e4d..a13ae49c7d 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -247,6 +247,17 @@ export default function editor(colorScheme: ColorScheme) { color: borderColor(layer, "variant"), }, }, + git: { + deleted: isLight + ? colorScheme.ramps.red(0.5).hex() + : colorScheme.ramps.red(0.4).hex(), + modified: isLight + ? colorScheme.ramps.yellow(0.3).hex() + : colorScheme.ramps.yellow(0.5).hex(), + inserted: isLight + ? colorScheme.ramps.green(0.4).hex() + : colorScheme.ramps.green(0.5).hex(), + } }, compositionMark: { underline: { From a355b4c135c1c9f656bc3c3fa3057a052ffea196 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Mon, 22 May 2023 10:09:55 -0700 Subject: [PATCH 4/8] Add conflict styles to project panel --- crates/theme/src/theme.rs | 1 + styles/src/styleTree/projectPanel.ts | 3 +++ 2 files changed, 4 insertions(+) diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index c589137e73..b5ac126a69 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -458,6 +458,7 @@ pub struct EntryStatus { pub struct GitProjectStatus { pub modified: Color, pub inserted: Color, + pub conflict: Color, } #[derive(Clone, Debug, Deserialize, Default)] diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 976cdede5c..81dded151e 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -21,6 +21,9 @@ export default function projectPanel(colorScheme: ColorScheme) { inserted: isLight ? colorScheme.ramps.green(0.4).hex() : colorScheme.ramps.green(0.5).hex(), + conflict: isLight + ? colorScheme.ramps.red(0.4).hex() + : colorScheme.ramps.red(0.5).hex(), } } From ef81813d569fb1d815eaba2f5aebaa7a4157610f Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Mon, 22 May 2023 10:10:47 -0700 Subject: [PATCH 5/8] Wire in conflict styling --- crates/project_panel/src/project_panel.rs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs index dd28bdd73e..22b6b3fd75 100644 --- a/crates/project_panel/src/project_panel.rs +++ b/crates/project_panel/src/project_panel.rs @@ -1086,7 +1086,7 @@ impl ProjectPanel { .map(|status| match status { GitFileStatus::Added => style.status.git.inserted, GitFileStatus::Modified => style.status.git.modified, - GitFileStatus::Conflict => style.text.color, + GitFileStatus::Conflict => style.status.git.conflict, }) .unwrap_or(style.text.color); From 11eb9b17c998dc436a6d3a3cebc91a57fccb6110 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Mon, 22 May 2023 17:47:52 -0400 Subject: [PATCH 6/8] Update project panel & scroll bar git colors --- styles/src/styleTree/editor.ts | 24 ++++++++++++------------ styles/src/styleTree/projectPanel.ts | 6 +++--- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index a13ae49c7d..786f010242 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -108,8 +108,8 @@ export default function editor(colorScheme: ColorScheme) { ? colorScheme.ramps.green(0.4).hex() : colorScheme.ramps.green(0.5).hex(), removedWidthEm: 0.275, - widthEm: 0.22, - cornerRadius: 0.2, + widthEm: 0.15, + cornerRadius: 0.05, }, /** Highlights matching occurences of what is under the cursor * as well as matched brackets @@ -241,22 +241,22 @@ export default function editor(colorScheme: ColorScheme) { border: border(layer, "variant", { left: true }), }, thumb: { - background: withOpacity(background(layer, "inverted"), 0.4), + background: withOpacity(background(layer, "inverted"), 0.3), border: { width: 1, color: borderColor(layer, "variant"), }, }, git: { - deleted: isLight - ? colorScheme.ramps.red(0.5).hex() - : colorScheme.ramps.red(0.4).hex(), - modified: isLight - ? colorScheme.ramps.yellow(0.3).hex() - : colorScheme.ramps.yellow(0.5).hex(), - inserted: isLight - ? colorScheme.ramps.green(0.4).hex() - : colorScheme.ramps.green(0.5).hex(), + deleted: isLight + ? withOpacity(colorScheme.ramps.red(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.red(0.4).hex(), 0.8), + modified: isLight + ? withOpacity(colorScheme.ramps.yellow(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.yellow(0.4).hex(), 0.8), + inserted: isLight + ? withOpacity(colorScheme.ramps.green(0.5).hex(), 0.8) + : withOpacity(colorScheme.ramps.green(0.4).hex(), 0.8), } }, compositionMark: { diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 81dded151e..7af5952154 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -19,11 +19,11 @@ export default function projectPanel(colorScheme: ColorScheme) { ? colorScheme.ramps.yellow(0.6).hex() : colorScheme.ramps.yellow(0.5).hex(), inserted: isLight - ? colorScheme.ramps.green(0.4).hex() + ? colorScheme.ramps.green(0.45).hex() : colorScheme.ramps.green(0.5).hex(), conflict: isLight - ? colorScheme.ramps.red(0.4).hex() - : colorScheme.ramps.red(0.5).hex(), + ? colorScheme.ramps.red(0.6).hex() + : colorScheme.ramps.red(0.5).hex() } } From 5dfb0e36910afa9738fc9ee9346b249d295413af Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Mon, 22 May 2023 14:56:35 -0700 Subject: [PATCH 7/8] remove border from thumb --- styles/src/styleTree/editor.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 786f010242..91c1318359 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -245,6 +245,10 @@ export default function editor(colorScheme: ColorScheme) { border: { width: 1, color: borderColor(layer, "variant"), + top: false, + right: true, + left: true, + bottom: false, }, }, git: { From 9bec74f1d4cd4b147918f49d1402545b587edd28 Mon Sep 17 00:00:00 2001 From: Mikayla Maki Date: Mon, 22 May 2023 15:04:51 -0700 Subject: [PATCH 8/8] fmt --- crates/editor/src/editor.rs | 1 - crates/editor/src/element.rs | 1 - crates/project_panel/src/project_panel.rs | 4 ++-- crates/theme/src/theme.rs | 4 ++-- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/crates/editor/src/editor.rs b/crates/editor/src/editor.rs index 57d5ec6e95..ce67a59bd3 100644 --- a/crates/editor/src/editor.rs +++ b/crates/editor/src/editor.rs @@ -7253,7 +7253,6 @@ impl View for Editor { } fn focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext) { - dbg!("Editor Focus in"); if cx.is_self_focused() { let focused_event = EditorFocused(cx.handle()); cx.emit(Event::Focused); diff --git a/crates/editor/src/element.rs b/crates/editor/src/element.rs index ba9adfdd16..13a24bfc2c 100644 --- a/crates/editor/src/element.rs +++ b/crates/editor/src/element.rs @@ -1052,7 +1052,6 @@ impl EditorElement { ..Default::default() }); - if layout.is_singleton && settings::get::(cx).scrollbar.git_diff { let diff_style = theme::current(cx).editor.diff.clone(); for hunk in layout diff --git a/crates/project_panel/src/project_panel.rs b/crates/project_panel/src/project_panel.rs index 22b6b3fd75..a7895172d5 100644 --- a/crates/project_panel/src/project_panel.rs +++ b/crates/project_panel/src/project_panel.rs @@ -6,8 +6,8 @@ use gpui::{ actions, anyhow::{anyhow, Result}, elements::{ - AnchorCorner, ChildView, ContainerStyle, Empty, Flex, Label, - MouseEventHandler, ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState, + AnchorCorner, ChildView, ContainerStyle, Empty, Flex, Label, MouseEventHandler, + ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState, }, geometry::vector::Vector2F, keymap_matcher::KeymapContext, diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs index b5ac126a69..cd2bf90b7e 100644 --- a/crates/theme/src/theme.rs +++ b/crates/theme/src/theme.rs @@ -683,14 +683,14 @@ pub struct Scrollbar { pub thumb: ContainerStyle, pub width: f32, pub min_height_factor: f32, - pub git: GitDiffColors + pub git: GitDiffColors, } #[derive(Clone, Deserialize, Default)] pub struct GitDiffColors { pub inserted: Color, pub modified: Color, - pub deleted: Color + pub deleted: Color, } #[derive(Clone, Deserialize, Default)]