zed-industries/zed
1
1
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2024-09-20 02:47:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

WIP: Touch up git in project panel and scroll bar styling (#2504)

Browse Source 
This makes the different git locations individually style-able

Release Notes:

* Improve git contrast (preview only)
This commit is contained in:
Mikayla Maki 2023-05-22 15:11:10 -07:00 committed by GitHub
commit dcf4791182
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 90 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
crates/editor/src/editor.rs
View File

@ -7253,7 +7253,6 @@ impl View for Editor {
}
fn focus_in(&mut self, _: AnyViewHandle, cx: &mut ViewContext<Self>) {
dbg!("Editor Focus in");
if cx.is_self_focused() {
let focused_event = EditorFocused(cx.handle());
cx.emit(Event::Focused);

31
crates/project_panel/src/project_panel.rs
View File

@ -6,7 +6,7 @@ use gpui::{
actions,
anyhow::{anyhow, Result},
elements::{
AnchorCorner, ChildView, ComponentHost, ContainerStyle, Empty, Flex, MouseEventHandler,
AnchorCorner, ChildView, ContainerStyle, Empty, Flex, Label, MouseEventHandler,
ParentElement, ScrollTarget, Stack, Svg, UniformList, UniformListState,
},
geometry::vector::Vector2F,
@ -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.status.git.conflict,
})
.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)

21
crates/theme/src/theme.rs
View File

@ -446,6 +446,19 @@ 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,
pub conflict: Color,
}
#[derive(Clone, Debug, Deserialize, Default)]
@ -670,6 +683,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)]

57
crates/theme/src/ui.rs
View File

@ -1,10 +1,9 @@
use std::borrow::Cow;
use fs::repository::GitFileStatus;
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,
@ -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<GitFileStatus>,
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<GitFileStatus>, style: FileNameStyle) -> Self {
FileName {
filename,
git_status,
style,
}
}
pub fn style<I: Into<LabelStyle>>(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<V: View> gpui::elements::Component<V> for FileName {
fn render(&self, _: &mut V, _: &mut ViewContext<V>) -> AnyElement<V> {
// 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()
}
}

36
styles/src/styleTree/editor.ts
View File

@ -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,12 +98,18 @@ 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,
widthEm: 0.15,
cornerRadius: 0.05,
},
/** Highlights matching occurences of what is under the cursor
* as well as matched brackets
@ -234,12 +241,27 @@ 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"),
top: false,
right: true,
left: true,
bottom: false,
},
},
git: {
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: {
underline: {

19
styles/src/styleTree/projectPanel.ts
View File

@ -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 = {
@ -12,6 +13,20 @@ 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.45).hex()
: colorScheme.ramps.green(0.5).hex(),
conflict: isLight
? colorScheme.ramps.red(0.6).hex()
: colorScheme.ramps.red(0.5).hex()
}
}
let entry = {
...baseEntry,
text: text(layer, "mono", "variant", { size: "sm" }),
@ -28,6 +43,7 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "active"),
text: text(layer, "mono", "active", { size: "sm" }),
},
status
}
return {
@ -59,6 +75,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),
@ -79,6 +96,6 @@ export default function projectPanel(colorScheme: ColorScheme) {
background: background(layer, "on"),
text: text(layer, "mono", "on", { size: "sm" }),
selection: colorScheme.players[0],
},
}
}
}