Commit graph

86 commits

Author SHA1 Message Date
Jason Lee
8ae4ffbb0c
dropdown: Fix dropdown menu width align to input width. (#1159)
This caused by the `bounds` of `canvas` prepaint callback now is not
including the border widths.

## Before

<img width="1070" height="967" alt="image"
src="https://github.com/user-attachments/assets/9ad963bb-c2b0-4b21-bbd6-8e961f779d2f"
/>

## After

<img width="1229" height="1097" alt="image"
src="https://github.com/user-attachments/assets/568f71be-932f-4126-b37a-b92aea3bf88a"
/>
2025-08-20 11:36:42 +08:00
Jason Lee
880d023834
virtual_list: Fix scroll to item not align to paddings. (#1122)
- Fixed List scroll to item at first time rendering.
2025-08-08 11:56:18 +08:00
Jason Lee
9a040eaaac
list: Refactor List, Dropdown delegate API to support section. (#1107)
Ref UITableView API:

https://developer.apple.com/documentation/uikit/uitableviewdatasource

## Changes

- Added some section related API to `ListDelegeate` and
`DropdownDelegate` with default implement, so if you don't need section
that you can just keep the default.
- Added `sections_count` method to get the number of sections, default
is 1.
- Added `render_section_header` for special the section header by if
needed, default return None.
- Added `render_section_footer` for special the section footer by if
needed, default return None.

## Break Changes

- The `DropdownState` have change new method to use IndexPath type:

  ```diff
  - DropdownState::new(vec![], Some(1), window, cx);
  + DropdownState::new(vec![], Some(IndexPath::new(1)), window, cx);
  ```

- The `ListDelegeate`, `DropdownDelegate` has changed API:
  - The `ix` are change from `usize` to `IndexPath`.

  ```diff
- fn render_item(&self, ix: usize, window: &mut Window, cx: &mut
Context<List<Self>>) -> Option<Self::Item>
+ fn render_item(&self, ix: IndexPath, window: &mut Window, cx: &mut
Context<List<Self>>) -> Option<Self::Item>

- fn set_selected_index(&mut self, ix: Option<usize>, window: &mut
Window, cx: &mut Context<List<Self>>)
+ fn set_selected_index(&mut self, ix: Option<IndexPath>, window: &mut
Window, cx: &mut Context<List<Self>>)
  ```

- The `items_count` method have added `section` argument to support list
section.
  
  ```diff
  - fn items_count(&self, cx: &App) -> usize
  + fn items_count(&self, section: usize, cx: &App) -> usize
  ```

- The `can_load_more` method has renamed to `is_eof` in `ListDelegate`
and `TableDelegate`.

  ```diff
  - fn can_load_more(&self, cx: &App) -> bool
  + fn is_eof(&self, cx: &App) -> bool
  ```

- The `can_search` method has renamed to `searchable` in `ListDelegate`.

  ```diff
  - fn can_search(&self) -> bool
  + fn searchable(&self) -> bool
  ```

## Showcase

<img width="1196" height="925" alt="image"
src="https://github.com/user-attachments/assets/22750abe-cc3f-427e-903b-51758bd4e027"
/>

<img width="1214" height="934" alt="image"
src="https://github.com/user-attachments/assets/52d42546-e6e7-4448-9c0f-43cd659fb630"
/>

---------

Co-authored-by: Floyd Wang <gassnake999@gmail.com>
2025-08-05 19:23:32 +08:00
Jason Lee
93b578294c
list: Update ListItem and DropdownListItem style. (#1095)
## Break Change

- The `Selectable` trait has been removed `element_id` method, this is
necessary.
- The `item` of `List` now must impl `Selectable` trait.

## List

> NOTE: The default ListItem is no rounded and paddings.

<img width="1144" height="762" alt="image"
src="https://github.com/user-attachments/assets/32348682-f89a-487a-af9f-5ed379a7f2d8"
/>

## Dropdown

<img width="537" height="387" alt="image"
src="https://github.com/user-attachments/assets/3cc99d9f-3714-4d10-b467-6c91917bcbf0"
/>
2025-07-28 18:38:39 +08:00
Jason Lee
6508927e7f
input: Add appearance option to NumberInput, Dropdown, DatePicker to render without style. (#1054)
<img width="1100" height="935" alt="image"
src="https://github.com/user-attachments/assets/b213c778-eef0-4d63-8d07-b68da9a078b1"
/>
2025-07-14 19:57:56 +08:00
Jason Lee
c8481bee19
theme: Update theme details to match Shadcn. (#1009)
## Light

<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/b1893648-5994-4c08-a79a-30b10dc62c47"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/de5b4e13-7889-473b-b0c0-9ac11de0a4b0"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/9f17c2a1-3a71-4d56-be6c-49f26f5e7406"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/a4e99a61-a618-4c3b-a237-93bbc17d4cae"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/64313ae5-8284-46ff-a75f-5a14a1e3b339"
/>
<img width="1193" alt="image"
src="https://github.com/user-attachments/assets/5c134172-0ab6-4299-950d-bac3dda7b61d"
/>
<img width="1374" alt="image"
src="https://github.com/user-attachments/assets/c8816288-d008-490d-9db3-4fa796278001"
/>
<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/d903a854-15e3-48aa-8ebd-969c1c91c624"
/>



## Dark

<img width="1467" alt="image"
src="https://github.com/user-attachments/assets/720418b4-8a9b-42c9-814b-a0be660e8eba"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/4ca20f31-c998-40bb-b4bf-6079c506f9ec"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/ae828624-55b3-4d33-8a20-2c71a0a838cc"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/7014c76c-5e18-4cd5-9cf1-6bccbb58e56a"
/>
<img width="1393" alt="image"
src="https://github.com/user-attachments/assets/6e1c514d-5f76-460a-9c7e-a38f2f0e712a"
/>
<img width="1374" alt="image"
src="https://github.com/user-attachments/assets/07ad8c20-317b-4209-9f92-b500f53dd4c0"
/>
<img width="1428" alt="image"
src="https://github.com/user-attachments/assets/6bd2969d-9bec-4ed7-9280-109a81144dfa"
/>
2025-06-25 16:40:27 +08:00
Jason Lee
ed0887420f
chore: Impl Styled for more elements. (#1007)
This PR for continuing #1005 was missed commits.
2025-06-24 19:36:42 +08:00
Jason Lee
9aa593ce0b
chore: Apply Styled to elements to support flexable style refinement. (#1005)
## Break Changes

- date_picker, dropdown: Removed `width` method, use `w`, `w_full`
instead.

    ```diff
    - .width(px(100.))
    + .w(px(100.))
    ```

- calendar: Removed `bordered` method, use `border` method from GPUI
instead.

    ```diff
    - .bordered(false)
    + .border_0()
    ```
2025-06-24 18:56:35 +08:00
stayhydated
0aceb02302
dropdown: Replace specialized impl From Vec<SharedString> to Vec<T: DropdownItem + Clone> (#935)
Needed for a proc macro i plan to publish when ready
```rs
#[derive(Clone, DropdownItemFtl, EsFluent, EnumIter, EnumString)]
#[fluent(enumerable)]
pub enum PreferedLanguage {
    English,
    French,
    Chinese,
}

#[derive(Clone, DropdownItemFtl, EsFluent, EnumIter, EnumString)]
#[fluent(enumerable)]
pub enum Country {
    UnitedStates,
    France,
    China,
}

#[derive(GpuiForm)]
pub struct User {
    #[gpui_form(component(input))]
    pub username: Option<String>,

    #[gpui_form(component(input))]
    pub email: String,

    #[gpui_form(component(number_input))]
    pub age: Option<u32>,

    #[gpui_form(component(number_input))]
    pub balance: Decimal,

    #[gpui_form(component(check_box))]
    pub subscribe_newsletter: bool,

    #[gpui_form(component(switch))]
    pub enable_notifications: bool,

    #[gpui_form(component(dropdown(searchable)))]
    pub country: Option<Country>,

    #[gpui_form(component(dropdown()))]
    pub preferred_language: PreferedLanguage,

    #[gpui_form(component(calendar))]
    pub birth_date: chrono::NaiveDate,

    #[gpui_form(component(date_picker))]
    pub appointment_date: chrono::NaiveDate,

    #[gpui_form(component(progress))]
    pub completion_percentage: f32,

    #[gpui_form(skip)]
    pub skip_me: bool,
}
```
2025-06-10 10:08:42 +08:00
Jason Lee
bc398adbf3
input: Refactor Input, Picker as stateless mode. (#858) 2025-05-16 23:41:26 +08:00
Ratazzi
f3d97bf8e2
chore: Unify icon parameter types in ListItem and Dropdown. (#857)
## Changes

This PR unifies icon parameter types in UI components:

- Changed `ListItem.check_icon` parameter type from `IconName` to `impl
Into<Icon>`
- Changed `Dropdown.icon` parameter type from `impl Into<IconName>` to
`impl Into<Icon>`
- Updated related rendering logic

## Impact

- **API Consistency**: All components now accept the same icon parameter
type
- **Backward Compatible**: Existing code using `IconName` continues to
work
- **Enhanced Flexibility**: Components can now accept custom `Icon`
instances directly
2025-05-15 16:13:30 +08:00
Floyd Wang
a5e5fc52b4
dropdown: Support change options for the dropdown (#824) 2025-04-30 10:33:21 +08:00
Ylin
f946560837
dropdown: Add display_title to DropdownItem to support custom title to dropdown input. (#816)
Co-authored-by: Jason Lee <huacnlee@gmail.com>
2025-04-25 19:05:24 +08:00
Jason Lee
a9d145dd50
Update disabled menu, button, dropdown etc. to use default cursor. (#814)
To follow macOS UX design.
2025-04-24 21:28:15 +08:00
Jason Lee
b4449f10cf
dropdown: Avoid selected value text wrap. (#808) 2025-04-22 21:19:20 +08:00
Jason Lee
a60acd7e4d
list: Add secondary confirm support to list. (#769) 2025-04-02 16:45:27 +08:00
Jason Lee
ebe93210af
Use normal cursor for buttons. (#760)
This change to follow native UI to use normal cursor for all buttons,
items.

Only use `pointer` for link item.
2025-04-01 17:59:27 +08:00
Jason Lee
75212c3aba
chore: Fix focusd_border typo in #635 (#637) 2025-02-17 17:29:40 +08:00
Jason Lee
4c554580c9
chore: Rename outline styled method to focused_border. (#635)
This change to avoid conflict with `outline` method in Button.

## Break changes:

- The `outline` method in `StyledExt` now renamed to `focused_border`.
2025-02-17 14:34:54 +08:00
Floyd Wang
d95cbabcc3
dropdown: Do not reset the selected index when cancelling (#618)
## Before


https://github.com/user-attachments/assets/e33c2324-94f0-42b0-99cc-9e2dcdee3f3d



## After


https://github.com/user-attachments/assets/7c5c6fee-b0f6-4cd5-986e-ea8f6f0e7f9d
2025-02-11 18:54:52 +08:00
Jason Lee
155f2ee3b9
chore: Refactor ClearButton to as method. (#598) 2025-02-04 17:34:26 +08:00
Jason Lee
dffb419145
chore: Fix subscriptions leak. (#597) 2025-02-04 15:43:26 +08:00
Jason Lee
3ffbbb0688
theme: Ensure all elements to use radius. (#596)
- Fix menu dispatch action.
2025-02-03 19:03:16 +08:00
Jason Lee
6fa1888ee6
chore: Upgrade for GPUI API changes. (#589) 2025-01-29 16:49:17 +08:00
Jason Lee
327d40e0e0
chore: Upgrade GPUI 3 (#587)
The pervious version has keep on
[gpui2](https://github.com/longbridge/gpui-component/tree/gpui2) branch,
if there need to use.

Ref https://github.com/zed-industries/zed/pull/22632

## Prepare

### Generate index.scip

```bash
rust-analyzer scip ./ > index.scip
```

### Get [refactor](https://github.com/zed-industries/refactor)

```bash
https://github.com/zed-industries/refactor.git
```

## Refactor exist code

```bash
cd refactor
cargo run -- ~/work/gpui-component
```

Then will get result if successed:

```
    Finished `dev` profile [unoptimized + debuginfo] target(s) in 0.03s
     Running `target/debug/refactor /Users/jason/work/gpui-component`
Loaded 115 SCIP documents
Processing files starting with focus path: ""
Changed 90 files
```

-------------

## Changes

```diff
- View<T>
- Model<T>
+ Entity<T>

- WeakView<T>
+ WeakEntity<T>

- FocusableView
+ Focusable

- cx.bounds()
+ window.bounds()
- cx.refresh()
+ window.refresh()
- cx.focused()
+ window.focused(cx)
- cx.with_optional_element_state
- window.with_optional_element_state
```

```diff
- &mut WindowContext
+ &mut Window, &mut App

- cx: &mut WindowContext
+ window: &mut Window, cx: &mut App

- &mut ViewContext<
+ &mut Window, &mut Context<

- cx: &mut ViewContext<
+ window: &mut Window, cx: &mut Context<
```

```diff
- cx.spawn(|_, mut cx| async move { 
+ cx.spawn_in(window, |_, mut cx| async move {
- cx.dispatch_action(Box::new(...))
+ window.dispatch_action(Box::new(...), cx)
```

`cx.spawn`

```diff
- cx.spawn(|view, mut cx| async move {
+ cx.spawn_in(window, |view, mut window| async move {
+     _ = view.update_in(&mut window, move |view, window, cx| {
```
2025-01-27 03:58:48 +08:00
Jason Lee
9f2cd84b23
color: Add mix method and merge ColorExt to Colorize. (#561)
- Add `mix` method to mix two color.
- Export `ui::theme::*` to crate root, before `use
ui:theme::ActiveTheme` to `use ui::ActiveTheme`.

## Break Changes

- Moved `ui::theme::Colorize` to `ui::Colorize`.
- Merged `ColorExt` to `Colorize`.
- Renamed `to_hex_string` to `to_hex`, `parse_hex_string` to
`parse_hex`.
2025-01-21 18:31:01 +08:00
Jason Lee
f41edfd318
list: Add ListEvent to List. (#552)
- Add `ListEvent` and emit event for List with `Select`, `Confirm`,
`Cancel` events.

## Break Changes

- Removed useless `ListDelegate::confirmed_index` method.
- Updated `ListDelegate::confirm` method, to change `ix: Option<usize>`
to `ix: usize`.
2025-01-17 16:00:28 +08:00
Jason Lee
d4819b34aa
chore: Update GPUI with AnchorCorner renamed to Corner. (#497)
Ref https://github.com/zed-industries/zed/pull/22119
2024-12-18 18:02:47 +08:00
Jason Lee
c02cb802cb
list: Add cx argument to ListDelegate. (#361)
Following #360 TableDelegate changes.
2024-10-18 10:17:59 +08:00
Jason Lee
41c64e2912
chore: Update controls detail. (#352)
- Better icon style in Input, Dropdown, DatePicker.
2024-10-16 17:51:39 +08:00
Floyd Wang
000c0bec57
dropdown: Add set_disabled for &mut self (#351) 2024-10-16 17:33:46 +08:00
Jason Lee
b18207728b
dropdown: Use difference chevron icon color for enabled/disabled dropdown. (#336)
<img width="547" alt="image"
src="https://github.com/user-attachments/assets/07239a63-b1ae-4462-b8ba-d30d7e7e66f5">
2024-10-14 10:19:58 +08:00
Jason Lee
2a331fcb79
theme: Add shadow option to support toggle shadow for base controls, default: true. (#268)
- Add shadow to Button if it enabled.
2024-09-24 10:52:01 +08:00
Jason Lee
8f0ba2e5c3
modal: Only focus modal when it not focused on. (#250)
- Fix dropdown to mouse down out to dismiss.


https://github.com/user-attachments/assets/f5ab4aca-bfdc-460e-ae5a-cd0a31a30906
2024-09-17 18:48:06 +08:00
Jason Lee
0e16d742bb
list: Add set_size method to List and fix input size in small dropdown. (#246) 2024-09-16 19:57:49 +08:00
Jason Lee
a0d3d35be4
modal: Add to support open multiple Modals. (#232)
- Add `Esc` to close modal.
2024-09-10 16:58:22 +08:00
Jason Lee
821487bed5
Improve popup snap to window with margin. (#225)
- Also update GPUI.

Ref: https://github.com/zed-industries/zed/pull/17159

<img width="866" alt="image"
src="https://github.com/user-attachments/assets/0737e4e4-7069-4554-a766-b9fc7b487fd6">
2024-09-07 11:50:38 +08:00
Jason Lee
2c469da55a
Update GPUI and apply opacity feature. (#215) 2024-09-04 19:29:51 +08:00
Jason Lee
f611b599aa
dropdown: Fix Dropdown placeholder to support change locale. (#203) 2024-09-02 14:57:53 +08:00
Jason Lee
f5cae46e42
Improve ColorPicker to support input hex color. (#201)
https://github.com/user-attachments/assets/be5fc290-0464-4356-9f97-c35720e3e11d
2024-09-02 13:56:19 +08:00
Floyd Wang
ef49753d32
Improve dropdown disabled state (#192) 2024-08-30 15:26:56 +08:00
Floyd Wang
14af8998bf
Add disabled state for the dropdown (#190) 2024-08-30 09:56:12 +08:00
Jason Lee
9768755eab
Fix panel resize when window resized. (#181)
Co-authored-by: Floyd Wang <gassnake999@gmail.com>
2024-08-28 19:40:35 +08:00
Jason Lee
e86f90d309
Close Dropdown menu on blur. (#157)
Closes #156
2024-08-16 14:03:45 +08:00
Floyd Wang
a02a6ed6b8
Set default true for cleanable & trigger event when dropdown clean (#152) 2024-08-15 18:01:43 +08:00
Floyd Wang
ccad5cd98e
TableDelegate support render_empty (#142) 2024-08-14 11:01:57 +08:00
Jason Lee
70bc526fbb
Fix Dropdown and DatePicker anchor to snap to window. (#139)
<img width="786" alt="image"
src="https://github.com/user-attachments/assets/c40fab1d-2cbe-4750-b05e-ed42cb43dd3c">
2024-08-13 18:10:30 +08:00
Jason Lee
bb6d8d8f60
Cleanup first version impls (#132) 2024-08-11 14:46:55 +08:00
Jason Lee
ebdcf244e2
Add Calendar and DatePicker. (#117)
https://github.com/user-attachments/assets/dda87fa7-f080-418a-8dd7-ab8581eb3beb
2024-08-07 20:25:11 +08:00
Jason Lee
827f57fb6a
Add Sizable trait to impl small, xsmall, large and apply to Button, Input, Dropdown, Switch. (#113) 2024-08-06 17:19:54 +08:00