CommunityToolkit / CommunityToolkit/Windows

Spacing issue in ColorPicker-Flyout from ColorPickerButton

Offen
#448 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug components::controls::colorpicker ux 🖌️
Vorherrschende Sprache
C#
Sterne
1.1k
Forks
166
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### Describe the bug

Hi,
In moving from Toolkit 7 to 8 I encountered the issue that the size of the Flyout on the first page is too tall. Likely because the second palette page is longer than in the 7.1 design?

I made this screen recording to show the issue:
https://github.com/CommunityToolkit/Windows/assets/471338/743fa89b-aaa3-484d-8db6-64e6eb3825a7

### Steps to reproduce

Starting from an empty WinUI3 template, I added a ColorPickerButton and the CommunityToolkit.WinUI.Controls.ColorPicker nuget package.

MainWindow.xaml
```xaml
xmlns:controls="using:CommunityToolkit.WinUI.Controls"
[...]

```

App6.csproj
```xml
net8.0-windows10.0.22621.0
10.0.17763.0
[...]




```

### Expected behavior

The old design had two pages that where the same height.

I think the spacing of the initial page with the color spectrum can be improved, or the palette page can be condensed a bit so that both pages are of similar height.

### Screenshots

See screen recording above.

### Code Platform

- [ ] UWP
- [X] WinAppSDK / WinUI 3
- [ ] Web Assembly (WASM)
- [ ] Android
- [ ] iOS
- [ ] MacOS
- [ ] Linux / GTK

### Windows Build Number

- [ ] Windows 10 1809 (Build 17763)
- [ ] Windows 10 1903 (Build 18362)
- [ ] Windows 10 1909 (Build 18363)
- [ ] Windows 10 2004 (Build 19041)
- [ ] Windows 10 20H2 (Build 19042)
- [ ] Windows 10 21H1 (Build 19043)
- [ ] Windows 10 21H2 (Build 19044)
- [ ] Windows 10 22H2 (Build 19045)
- [X] Windows 11 21H2 (Build 22000)
- [ ] Other (specify)

### Other Windows Build number

_No response_

### App minimum and target SDK version

- [X] Windows 10, version 1809 (Build 17763)
- [ ] Windows 10, version 1903 (Build 18362)
- [ ] Windows 10, version 1909 (Build 18363)
- [ ] Windows 10, version 2004 (Build 19041)
- [ ] Windows 10, version 2104 (Build 20348)
- [ ] Windows 11, version 22H2 (Build 22000)
- [ ] Other (specify)

### Other SDK version

_No response_

### Visual Studio Version

2022

### Visual Studio Build Number

VisualStudio.17.Release/17.10.3+35013.160

### Device form factor

Desktop

### Additional context

I did not follow the redesign of this component closely, maybe this was an intentional design change? I can see multiple ways to fix this issue.

### Help us help you

No, I'm unable to contribute a solution.

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der minimalen WinUI 3-Reproduktion in MainWindow.xaml und App6.csproj und verwende ColorPickerButton aus dem CommunityToolkit.WinUI.Controls.ColorPicker-Paket. Vergleiche die anfängliche Spektrumseite des ColorPicker-Flyout mit seiner Palettenseite und dem alten Design. Erledigt ist es, wenn die beiden Seiten ähnliche Höhen ohne übermäßigen Abstand auf der anfänglichen Seite haben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
csharp
Bereich
design, frontend
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.