guise-ui 1.5.2

A component library for gpui, Zed's GPU-accelerated UI framework: a themed palette, sizing tokens, 130+ composable components, a reactive state layer, and an in-app Safari-style inspector.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

//! `CopyButton` — copies text to the clipboard, with transient feedback.

use std::time::Duration;

use gpui::prelude::*;
use gpui::{div, px, ClickEvent, ClipboardItem, Context, IntoElement, SharedString, Window};

use crate::devtools::Probed;
use crate::theme::{theme, ColorName, Size};

/// A small button that writes `text` to the system clipboard when clicked, then
/// shows a "Copied" state for a moment. A gpui entity — create with
/// `cx.new(|_| CopyButton::new("…"))`.
pub struct CopyButton {
  text: SharedString,
  label: SharedString,
  copied_label: SharedString,
  copied: bool,
}

impl CopyButton {
  pub fn new(text: impl Into<SharedString>) -> Self {
    CopyButton {
      text: text.into(),
      label: SharedString::new_static("Copy"),
      copied_label: SharedString::new_static("\u{2713} Copied"),
      copied: false,
    }
  }

  /// Override the idle label (default "Copy").
  pub fn label(mut self, label: impl Into<SharedString>) -> Self {
    self.label = label.into();
    self
  }

  /// The text this button copies.
  pub fn text(&self) -> SharedString {
    self.text.clone()
  }

  /// Replace the text to copy.
  pub fn set_text(&mut self, text: impl Into<SharedString>) {
    self.text = text.into();
  }

  fn copy(&mut self, _: &ClickEvent, _: &mut Window, cx: &mut Context<Self>) {
    cx.write_to_clipboard(ClipboardItem::new_string(self.text.to_string()));
    self.copied = true;
    cx.notify();

    // Revert the "Copied" state after a beat.
    cx.spawn(async move |this, cx| {
      cx.background_executor()
        .timer(Duration::from_millis(1200))
        .await;
      this
        .update(cx, |this, cx| {
          this.copied = false;
          cx.notify();
        })
        .ok();
    })
    .detach();
  }
}

impl Render for CopyButton {
  fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let t = theme(cx);
    let dark = t.scheme.is_dark();
    let copied = self.copied;

    let (bg, fg) = if copied {
      (
        t.color(ColorName::Teal, if dark { 8 } else { 0 }).hsla(),
        t.color(ColorName::Teal, if dark { 3 } else { 7 }).hsla(),
      )
    } else {
      (t.surface_hover().hsla(), t.dimmed().hsla())
    };
    let hover_bg = t.color(ColorName::Gray, if dark { 6 } else { 2 }).hsla();
    let label = if copied {
      self.copied_label.clone()
    } else {
      self.label.clone()
    };

    let mut el = div()
      .id("guise-copy-button")
      .flex()
      .items_center()
      .h(px(24.0))
      .px(px(8.0))
      .rounded(px(t.radius(Size::Sm)))
      .bg(bg)
      .text_color(fg)
      .text_size(px(12.0))
      .child(label)
      .on_click(cx.listener(Self::copy));
    if !copied {
      el = el.hover(move |s| s.bg(hover_bg));
    }
    el.probe("CopyButton")
  }
}