Commit graph

117 commits

Author SHA1 Message Date
Jason Lee
118a0f500e
scrollbar: Introduce overflow_scrollbar to adds Scrollbars to elements. (#1694)
## Description

1. Add `overflow_scrollbar`, `overflow_y_scrollbar`, `overflow_x_scroll`
to GPUI elements to let them has scrollbars. It is almost like the
`overscroll` but adds the Scrollbar.
2. And adjust the display scrollbar of margining 4px of the container.
3. Add `scrollbar`, `vertical_scrollbar`, `horizontal_scrollbar` with
your own scroll handle.

<img width="1181" height="911" alt="image"
src="https://github.com/user-attachments/assets/8b02cd54-d527-4f22-b9be-f762ede22122"
/>

## Break Changes

- There `Scrollable` trait and it `scrollable` method has been removed.

```diff
- div().id("contents").scrollable(Axis::Vertical)
+ div().id("contents").overflow_y_scrollbar()
```
2025-11-27 11:29:50 +00:00
Jason Lee
c8652f9010
setting: Add Settings component. (#1632)
https://github.com/user-attachments/assets/3c6315d9-1183-419c-bb17-a8f7ac0cf25c
2025-11-20 13:51:44 +00:00
Jason Lee
01082f11d2
button: Add dropdown_caret option to show a caret icon to end of button. (#1637)
<img width="658" height="162" alt="image"
src="https://github.com/user-attachments/assets/7c233982-04c3-408c-8ae4-f672f8b135a3"
/>
2025-11-18 16:41:16 +08:00
Jason Lee
f8a7dd71bf
dropdown_button: Add more button option methods to DropdownButton. (#1633)
- Fix to not handle `dropdown_menu` when Button is disabled.
- Split a single DropdownButtonStory.
2025-11-18 14:31:14 +08:00
Jason Lee
37d1678b6f
assets: Add gpui-component-assets crate. (#1601) 2025-11-14 15:03:26 +08:00
Jason Lee
69b21142dc
root: Improve new method argument to use into <AnyView>. (#1594) 2025-11-14 11:02:44 +08:00
Jason Lee
a176408d81
Revert "root: Render overlays inside Root element by default. (#1570)" (#1584)
Revert #1573, #1570
2025-11-13 13:37:05 +08:00
Jason Lee
1074f78fb0
root: Fix Root use text size may override default text color. (#1576) 2025-11-12 19:05:30 +08:00
Jason Lee
f26f01909e
root: Render overlays inside Root element by default. (#1570)
## Break Change

- The `Root::render_notification_layer`, `Root::render_sheet_layer`,
`Root::render_dialog_layer` has been removed, we don't need it now, the
Root element has default rendered them.
2025-11-12 08:04:54 +00:00
Jason Lee
b3c0188940
context_menu: Fix ContextMenu to cover parent element area. (#1566)
Close #1541
2025-11-12 06:19:52 +00:00
Jason Lee
945db0be56
dialog: Rename Modal to Dialog. (#1538)
## Break Change

- Renamed `Modal` to `Dialog`.

```diff
- window.open_modal(...)
+ window.open_dialog(...)

- window.close_modal(...);
+ window.close_dialog(...);
```

- Renamed `show_close` method to `close_button` in Dialog.
```diff
- .show_close(false)
+ .close_button(true)
```
2025-11-07 17:25:55 +08:00
Jason Lee
80689264e2
sheet: Rename Drawer to Sheet. (#1527)
## Break Change

- Renamed `Drawer` to `Sheet`, also renamed relative method contains
`drawer` to `sheet`.
- Renamed `ContextModal` to `WindowExt`.

```diff
- use gpui_component::drawer::Drawer
+ use gpui_component::sheet::Sheet

- use gpui_component::ContextModal
+ use gpui_component::WindowExt
```
2025-11-06 07:19:10 +00:00
Jason Lee
4dc10165fb
spinner: Rename Indicator to Spinner. (#1526)
## Break Change

- Renamed `Indicator` to `Spinner`.

```diff
- use gpui_component::indicator::Indicator;
+ use gpui_component::spinner::Spinner;
```
2025-11-06 11:36:39 +08:00
Jason Lee
c06e91101e
collapsible: Add Collapsible. (#1525)
Close #1479 

<img width="1171" height="791" alt="image"
src="https://github.com/user-attachments/assets/eac5cd9f-ef8c-4eb4-b93d-f63c9302c99a"
/>
2025-11-06 10:57:18 +08:00
Jason Lee
34ef0ff6d0
chore: Rename Dropdown to Select, TextInput to Input. (#1449)
## Break Change

- The `Dropdown` has been renamed to `Select`.
- The `TextInput` has been renamed to `Input`.

| Before | After |
| --- | --- |
| TextInput | Input |
| Dropdown | Select |
| DropdownItem | SelectItem |
| DropdownItemGroup | SelectGroup |
| DropdownState | SelectState |
| DropdownEvent | SelectEvent |
| DropdownDelegate | SelectDelegate |
| dropdown::ListEvent | ~~Removed~~ |

- Renamed `PopupMenuExt` to `DropdownMenu`.
- Removed pub mod `menu::popup_menu`, `menu::context_menu`, they are
moved into `menu` mod.
- Renamed `popup_menu` method to `dropdown_menu` for `DropdownMenu`,
`Panel`, `PanelView` and `DropdownButton`.

| Before | After |
| --- | --- |
| popup_menu::PopupMenuExt | menu::DropdownMenu |
| popup_menu | dropdown_menu |
| popup_menu_with_anchor | dropdown_menu_with_anchor |
2025-10-28 21:22:31 +08:00
Jason Lee
904c9f3fa7
theme: Export more theme options for schema. (#1442)
- Fix theme switch to support other UI settings (e.g.: radius, shadow,
font_size).
- Update `matrix` theme to use rounded 0px.

<img width="1380" height="1139" alt="image"
src="https://github.com/user-attachments/assets/24832fde-5b5e-4508-9b38-6c3c2890aedb"
/>
2025-10-28 03:28:18 +00:00
Jason Lee
1adaf3ec55
tree: Add Tree. (#1373)
Close #318 


https://github.com/user-attachments/assets/1fed12e2-df53-4213-a3f5-c57bd8b4cadb
2025-10-15 18:39:47 +08:00
Jason Lee
5b2fed0ccb
markdown: Use list for Markdown render and add scrollbar. (#1357) 2025-10-13 22:06:07 +08:00
Jason Lee
2574e7f812
story: Add open file to Markdown and Editor example. (#1363)
Close #1352
2025-10-13 11:52:16 +08:00
Jason Lee
6817c8d3cc
menu: Add AppMenuBar. (#1338)
- input: Change Input to not unselect when blur.
- popup_menu: Fix get key binding on PopupMenu with action context.

<img width="935" height="694" alt="image"
src="https://github.com/user-attachments/assets/295fa84e-f1d8-4f6f-8a77-601a45f8ad6d"
/>

## TODO

- [x] Keyboard support. 
- [x] Add submenu to example.
- [ ] ~~Icon~~ and check support. Wait
https://github.com/zed-industries/zed/pull/39876
2025-10-10 21:03:16 +08:00
Jason Lee
5e504d10bb
chore: Refactor tab key to switch focus. (#991)
Wait https://github.com/zed-industries/zed/pull/33008,
https://github.com/zed-industries/zed/pull/34804 to merge.


https://github.com/user-attachments/assets/3c21ebc9-44a0-4311-bb0f-5f63fe8d4bb3

- Improved `focus_ring` to render like an outline.
- Added to support press `Enter`, `Space` key to trigger Checkbox,
Button, Radio.

## Break Changes

- The `FocusableExt` has been changed to only for crate internal.
- The `FocusableCycle` has been removed, now GPUI has it own tab stop
implementation.
2025-09-29 16:48:24 +08:00
Jason Lee
a9953a9349
input: Use zed's Rope (#1214)
Now with 10K lines plain text, in release mode on macOS. The
`large-text` example can work with:

- 120 FPS for display.
- 90 FPS for update text.

```
MTL_HUD_ENABLED=1 cargo run --example large-text --release
```

- Fixed the cursor position at end of line, also support at start of
line.


https://github.com/user-attachments/assets/1de52f6c-e138-4ed3-a600-06372a807ed8

### Check list

- [x] Modifying Text with Rope
- [x] LineColumn, GoToLine
- [x] Code Highlight
- [x] Delete word, select word
- [x] Delete line
- [x] Move left, right, up, down
2025-09-08 16:44:52 +08:00
Jason Lee
02b432ed17
scrollbar: Fix scrollbar width on always show mode. (#1196)
And fixes #1192 render bug.
2025-09-02 15:48:06 +08:00
Jason Lee
4e5aca3842
group_box: Update GroupBox style. (#1167)
- Removed padding x of the Group Title.
- Added `fill` variant and change default to use no background and
paddings style.
 
<img width="1120" height="1337" alt="image"
src="https://github.com/user-attachments/assets/958e902f-3481-424c-a923-62746175aabf"
/>
2025-08-21 18:17:58 +08:00
Jason Lee
fb41e63ea8
input: Fix visible range when multi-line text have soft wrap. (#1155)
## Before

<img width="1130" height="783" alt="image"
src="https://github.com/user-attachments/assets/3e0db5f4-bb84-480f-8b38-dbe24e6c6214"
/>

## After


https://github.com/user-attachments/assets/fdaed71e-3ab8-4258-a1eb-b731181ca31c
2025-08-19 19:21:12 +08:00
Jason Lee
dcca730d65
group_box: Add GroupBox element. (#1146)
Close #1144 

## Break Changes

- Renamed used theme variable `card`, `card_foreground` to `group_box`,
`group_box_foreground` for GroupBox.

<img width="1088" height="958" alt="image"
src="https://github.com/user-attachments/assets/adb1cbe6-fd6f-4d22-a434-39455f57ce09"
/>
2025-08-18 11:36:07 +08:00
Floyd Wang
75af2b31ba
story: Fix the startup error in the dock example (#1093) 2025-07-28 09:43:29 +08:00
Jason Lee
579c7a3cbb
virtual_list: Fix scrollable size calculate in VirtualList. (#1087)
The `virtual_list` scroll range issue because recently GPUI changed the
`ScrollHandle` API, now we only get the `max_offset`.

So #1086 have fixed this to implementation a `content_size` method to
calculate `max_offset` and `bounds` of the `ScrollHandle`.

But I found that the `Interactivity` prepaint (This is used in
VirtualList) was not to update the `bounds` of the `ScrollHandle`.

Wait https://github.com/zed-industries/zed/pull/35013 to merge.

| Before | After |
| -- | --- |
| <img width="620" alt="image"
src="https://github.com/user-attachments/assets/6ffb8f30-93b4-42ec-a837-90f80ecb2bf5"
/> | <img width="620" alt="image"
src="https://github.com/user-attachments/assets/21466332-030c-495f-8c84-e3a2c6eeb403"
/> |
- Split `Scrollbale` and `VirtualList` story.

## Break Changes

- The `content_size` argument has been removed from `virtual_list`
callback.
2025-07-24 08:30:42 +00:00
Floyd Wang
6d28cce719
notification: Fix display issues caused by the taffy upgrade (#1084) 2025-07-23 19:12:13 +08:00
Jason Lee
44427afacb
theme: Add to support highlight color to theme config. (#1055)
<img width="1058" height="1026" alt="image"
src="https://github.com/user-attachments/assets/300fb16b-c5e4-4eef-9690-54fcabc4fe47"
/>
<img width="836" height="855" alt="image"
src="https://github.com/user-attachments/assets/3fdc8301-375d-4223-a2ea-8d4f411a90bd"
/>
2025-07-14 17:04:18 +08:00
Jason Lee
8bf66443b2
theme: Add theme schema to support JSON theme config. (#1050) 2025-07-07 19:40:00 +08:00
Jason Lee
6886ae746e
story: Add Indicator, Skeleton story. (#1038) 2025-07-03 18:54:23 +08:00
Jason Lee
d70d649a67
story: Move DescriptionList into main story. (#1037) 2025-07-03 18:09:30 +08:00
Jason Lee
66a9b3e9df
avatar: Add Avatar element. (#1028)
<img width="1384" alt="image"
src="https://github.com/user-attachments/assets/1e66aa8c-0c87-4d8d-abb7-38e5f616fe3e"
/>
<img width="1384" alt="image"
src="https://github.com/user-attachments/assets/bd32b6e0-aa0f-4d01-af9f-4bfaea1a3718"
/>
2025-07-02 18:58:06 +08:00
Jason Lee
deb1187c40
story: Fix #1017 duplicate action name error. (#1020) 2025-06-30 11:18:57 +08:00
Jason Lee
67f0ffbc9c
chore: Upgrade GPUI and fix action API changes. (#1008)
Ref https://github.com/zed-industries/zed/pull/33263
2025-06-25 11:06:12 +08:00
Jason Lee
a3a4f1942d
chart: Update Chart story by use JSON file data. (#947) 2025-06-11 21:34:22 +08:00
Floyd Wang
c333fd7106
notification: Add support for rendering custom content (#938)
## Break Change
You no longer need to pass a message when creating a new notification.
Instead, use the `message` method.

```diff 
- Notification::new("There was a problem with your request.");
+ Notification::new().message("There was a problem with your request.");
```

<img width="1023" alt="image"
src="https://github.com/user-attachments/assets/4b93f2bb-e130-45d6-974f-8b14efac58a4"
/>
2025-06-10 12:06:02 +08:00
Floyd Wang
a1bdd50735 story: Reorder story menu 2025-06-04 19:29:32 +08:00
Floyd Wang
516c8fada4
chart: Introduce chart (#878)
Add a new component called `plot`. It provides a low-level approach to
data analysis and visualization.
Chart is a collection of ready-to-use chart components built with
`plot`.

| Light | Dark |
| - | - |
| <img width="1712" alt="SCR-20250604-qhxb"
src="https://github.com/user-attachments/assets/bf7ce76e-ab7a-42c2-92e7-17cd135de66f"
/> | <img width="1712" alt="SCR-20250604-qhxr"
src="https://github.com/user-attachments/assets/dd3e44ea-bbb5-41a2-8cce-38b316d7d800"
/> |
2025-06-04 19:22:11 +08:00
Jason Lee
2b796c94e9
highlighter: Improve performance for large file. (#911)
Still need to improve.

This version can work smooth when the file lines are less than 5000
lines.

> cargo run --release on MacBook Pro, Apple M3 CPU

- Editing at 110 FPS+
- Display at 120 FPS.

<img width="977" alt="image"
src="https://github.com/user-attachments/assets/37958bcb-20d8-486b-8c50-2728d16f971b"
/>
2025-06-03 23:20:33 +08:00
Jason Lee
38d9c24af5
chore: Update getter method to return reference to view components. (#827) 2025-04-30 17:18:44 +08:00
Jason Lee
9085879795
gallery: Add DatePicker and Calendar. (#815) 2025-04-25 16:05:47 +08:00
Jason Lee
b4449f10cf
dropdown: Avoid selected value text wrap. (#808) 2025-04-22 21:19:20 +08:00
Jason Lee
bef1dd2544
story: Add ClipboardStory (#799) 2025-04-17 18:57:23 +08:00
Jason Lee
5b508d7219
gallery: Redesign the gallery. (#797)
Close #773

<img width="1712" alt="image"
src="https://github.com/user-attachments/assets/e27a28ca-cdd7-4970-8518-4fd0104bb3f8"
/>
2025-04-17 17:12:48 +08:00
Jason Lee
d0a73011de
tooltip: Add KeyBinding to tooltip and Button. (#783)
- Improve `Kbd::format` method.
- Add `tooltip_with_action` method to Button for display key binding in
tooltip.
- 
## Break change

- The `Tooltip::new` has been changed it argument and return type.
    
    ```diff
- pub fn new(text: impl Into<Text>, _: &mut Window, cx: &mut App) ->
AnyView
    + pub fn new(text: impl Into<Text>) -> Self
    ```
2025-04-14 16:40:40 +08:00
Jakku Sakura
4f0617e96f
example: Fix to hide WebView when switch tab. (#764)
fixes #763
it also prevent crashing on linux due to gtk not initialized

---------

Co-authored-by: Jason Lee <huacnlee@gmail.com>
2025-04-02 10:50:20 +08:00
Jason Lee
ffa36c1c5b input: Add focused_input, has_focused_input method to Root. #727
Add this to save current focused Input, this used to avoid some special keybinding conflict.

For example: `/` as ToggleSearch, if on this action, we can check is there `has_focused_input` to decide to ignore or handle action.

- dock: Rename toggle button visible method.
2025-03-21 17:34:32 +08:00
Jason Lee
a89f971108
chore: Update GPUI 2025/03/20 and fix spawn method. (#725)
- Update `resvg`, `usvg` to 0.45.0
2025-03-20 21:23:50 +08:00