feat: Improve Blink Cursor (#34)

* add cursor color to theme

* adjust
This commit is contained in:
reya
2025-05-13 13:26:02 +07:00
committed by GitHub
parent 4e24061817
commit 4f066b7c00
3 changed files with 14 additions and 6 deletions

View File

@@ -1,7 +1,7 @@
use std::ops::{Deref, DerefMut}; use std::ops::{Deref, DerefMut};
use colors::{brand, hsl, neutral}; use colors::{brand, hsl, neutral};
use gpui::{black, px, white, App, Global, Hsla, Pixels, SharedString, Window, WindowAppearance}; use gpui::{px, App, Global, Hsla, Pixels, SharedString, Window, WindowAppearance};
mod colors; mod colors;
mod scale; mod scale;
@@ -126,6 +126,8 @@ pub struct ThemeColor {
pub title_bar_border: Hsla, pub title_bar_border: Hsla,
/// Background color. Used for modal's overlay. /// Background color. Used for modal's overlay.
pub overlay: Hsla, pub overlay: Hsla,
/// Background color. Used for cursor.
pub cursor: Hsla,
/// Window border color. /// Window border color.
/// ///
/// # Platform specific: /// # Platform specific:
@@ -176,7 +178,7 @@ impl ThemeColor {
scrollbar_thumb_border: gpui::transparent_black(), scrollbar_thumb_border: gpui::transparent_black(),
scrollbar_track_background: gpui::transparent_black(), scrollbar_track_background: gpui::transparent_black(),
scrollbar_track_border: neutral().light().step_5(), scrollbar_track_border: neutral().light().step_5(),
panel_background: white(), panel_background: gpui::white(),
ring: brand().light().step_8(), ring: brand().light().step_8(),
tab_active_background: neutral().light().step_5(), tab_active_background: neutral().light().step_5(),
tab_hover_background: neutral().light().step_4(), tab_hover_background: neutral().light().step_4(),
@@ -184,6 +186,7 @@ impl ThemeColor {
title_bar: gpui::transparent_black(), title_bar: gpui::transparent_black(),
title_bar_border: gpui::transparent_black(), title_bar_border: gpui::transparent_black(),
overlay: neutral().light_alpha().step_3(), overlay: neutral().light_alpha().step_3(),
cursor: hsl(200., 100., 50.),
window_border: hsl(240.0, 5.9, 78.0), window_border: hsl(240.0, 5.9, 78.0),
} }
} }
@@ -226,7 +229,7 @@ impl ThemeColor {
scrollbar_thumb_border: gpui::transparent_black(), scrollbar_thumb_border: gpui::transparent_black(),
scrollbar_track_background: gpui::transparent_black(), scrollbar_track_background: gpui::transparent_black(),
scrollbar_track_border: neutral().dark().step_5(), scrollbar_track_border: neutral().dark().step_5(),
panel_background: black(), panel_background: gpui::black(),
ring: brand().dark().step_8(), ring: brand().dark().step_8(),
tab_active_background: neutral().dark().step_5(), tab_active_background: neutral().dark().step_5(),
tab_hover_background: neutral().dark().step_4(), tab_hover_background: neutral().dark().step_4(),
@@ -234,6 +237,7 @@ impl ThemeColor {
title_bar: gpui::transparent_black(), title_bar: gpui::transparent_black(),
title_bar_border: gpui::transparent_black(), title_bar_border: gpui::transparent_black(),
overlay: neutral().dark_alpha().step_3(), overlay: neutral().dark_alpha().step_3(),
cursor: hsl(200., 100., 50.),
window_border: hsl(240.0, 3.7, 28.0), window_border: hsl(240.0, 3.7, 28.0),
} }
} }

View File

@@ -50,8 +50,10 @@ impl BlinkCursor {
// Schedule the next blink // Schedule the next blink
let epoch = self.next_epoch(); let epoch = self.next_epoch();
cx.spawn(async move |this, cx| { cx.spawn(async move |this, cx| {
Timer::after(INTERVAL).await; Timer::after(INTERVAL).await;
if let Some(this) = this.upgrade() { if let Some(this) = this.upgrade() {
this.update(cx, |this, cx| this.blink(epoch, cx)).ok(); this.update(cx, |this, cx| this.blink(epoch, cx)).ok();
} }
@@ -71,6 +73,7 @@ impl BlinkCursor {
// delay 500ms to start the blinking // delay 500ms to start the blinking
let epoch = self.next_epoch(); let epoch = self.next_epoch();
cx.spawn(async move |this, cx| { cx.spawn(async move |this, cx| {
Timer::after(PAUSE_DELAY).await; Timer::after(PAUSE_DELAY).await;

View File

@@ -10,6 +10,7 @@ use super::TextInput;
const RIGHT_MARGIN: Pixels = px(5.); const RIGHT_MARGIN: Pixels = px(5.);
const BOTTOM_MARGIN: Pixels = px(20.); const BOTTOM_MARGIN: Pixels = px(20.);
const CURSOR_THICKNESS: Pixels = px(2.);
pub(super) struct TextElement { pub(super) struct TextElement {
input: Entity<TextInput>, input: Entity<TextInput>,
@@ -140,7 +141,7 @@ impl TextElement {
if input.show_cursor(window, cx) { if input.show_cursor(window, cx) {
// cursor blink // cursor blink
let cursor_height = let cursor_height =
window.text_style().font_size.to_pixels(window.rem_size()) + px(2.); window.text_style().font_size.to_pixels(window.rem_size()) + px(4.);
cursor = Some(fill( cursor = Some(fill(
Bounds::new( Bounds::new(
@@ -148,9 +149,9 @@ impl TextElement {
bounds.left() + cursor_pos.x, bounds.left() + cursor_pos.x,
bounds.top() + cursor_pos.y + ((line_height - cursor_height) / 2.), bounds.top() + cursor_pos.y + ((line_height - cursor_height) / 2.),
), ),
size(px(1.), cursor_height), size(CURSOR_THICKNESS, cursor_height),
), ),
cx.theme().element_active, cx.theme().cursor,
)) ))
}; };
} }