mirror of
https://github.com/excalidraw/excalidraw.git
synced 2025-05-03 10:00:07 -04:00
feat: color picker redesign (#6216)
Co-authored-by: Maielo <maielo.mv@gmail.com> Co-authored-by: dwelle <luzar.david@gmail.com> Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
This commit is contained in:
parent
6977c32631
commit
5b7596582f
55 changed files with 4010 additions and 2699 deletions
|
@ -7,7 +7,7 @@ exports[`<Excalidraw/> <MainMenu/> should render main menu with host menu items
|
|||
>
|
||||
<div
|
||||
class="Island dropdown-menu-container"
|
||||
style="--padding: 2; z-index: 1;"
|
||||
style="--padding: 2; z-index: 2;"
|
||||
>
|
||||
<button
|
||||
class="dropdown-menu-item dropdown-menu-item-base"
|
||||
|
@ -115,7 +115,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
|
|||
>
|
||||
<div
|
||||
class="Island dropdown-menu-container"
|
||||
style="--padding: 2; z-index: 1;"
|
||||
style="--padding: 2; z-index: 2;"
|
||||
>
|
||||
<button
|
||||
aria-label="Open"
|
||||
|
@ -523,38 +523,84 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
|
|||
<div
|
||||
style="padding: 0px 0.625rem;"
|
||||
>
|
||||
<div
|
||||
style="position: relative;"
|
||||
>
|
||||
<div>
|
||||
<div>
|
||||
<div
|
||||
aria-modal="true"
|
||||
class="color-picker-container"
|
||||
role="dialog"
|
||||
>
|
||||
<div
|
||||
class="color-picker-control-container"
|
||||
class="color-picker__top-picks"
|
||||
>
|
||||
<div
|
||||
class="color-picker-label-swatch-container"
|
||||
>
|
||||
<button
|
||||
aria-label="Canvas background"
|
||||
class="color-picker-label-swatch"
|
||||
style="--swatch-color: #ffffff;"
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
class="color-input-container"
|
||||
<button
|
||||
class="color-picker__button active"
|
||||
style="--swatch-color: #ffffff;"
|
||||
title="#ffffff"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="color-picker-hash"
|
||||
>
|
||||
#
|
||||
</div>
|
||||
<input
|
||||
aria-label="Canvas background"
|
||||
class="color-picker-input"
|
||||
spellcheck="false"
|
||||
value="ffffff"
|
||||
class="color-picker__button-outline"
|
||||
/>
|
||||
</label>
|
||||
</button>
|
||||
<button
|
||||
class="color-picker__button"
|
||||
style="--swatch-color: #f8f9fa;"
|
||||
title="#f8f9fa"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="color-picker__button-outline"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="color-picker__button"
|
||||
style="--swatch-color: #f5faff;"
|
||||
title="#f5faff"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="color-picker__button-outline"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="color-picker__button"
|
||||
style="--swatch-color: #fffce8;"
|
||||
title="#fffce8"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="color-picker__button-outline"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="color-picker__button"
|
||||
style="--swatch-color: #fdf8f6;"
|
||||
title="#fdf8f6"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="color-picker__button-outline"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
style="width: 1px; height: 100%; margin: 0px auto;"
|
||||
/>
|
||||
<button
|
||||
aria-controls="radix-:r0:"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="dialog"
|
||||
aria-label="Canvas background"
|
||||
class="color-picker__button active-color"
|
||||
data-state="closed"
|
||||
style="--swatch-color: #ffffff;"
|
||||
title="Show background color picker"
|
||||
type="button"
|
||||
>
|
||||
<div
|
||||
class="color-picker__button-outline"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue