Add button and drag to swap colors #227

jamesnw · 2024-12-11T17:17:12Z

Description

Currently not designed, this is to show possibilities.

Adds a button to swap
Supports dragging from one swatch to the other to swap

Related Issue(s)

#108

Todo

Style button on small screens
Reduce gutter

netlify · 2024-12-11T17:17:31Z

✅ Deploy Preview for oddcontrast ready!

Name	Link
🔨 Latest commit	`ad9a6f9`
🔍 Latest deploy log	https://app.netlify.com/sites/oddcontrast/deploys/67a3a43efd827a00085f2f83
😎 Deploy Preview	https://deploy-preview-227--oddcontrast.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

* main: lint Bump the dev-minor group across 1 directory with 15 updates Bump jsdom from 25.0.1 to 26.0.0 in the dev-major group Bump the dev-minor group with 6 updates upgrade node and yarn Bump the dev-minor group with 6 updates Bump the dev-minor group with 7 updates Bump the dev-minor group with 12 updates

src/lib/components/colors/Header.svelte

mirisuzanne · 2025-01-28T17:50:50Z

Functionality looks good. I think the button could use some more styling, especially around interactions – since it takes up a lot of space, but only has a small icon. @dvdherron is this something you'd be interested in looking at?

* main: upgrade stylelint Bump the dev-minor group with 11 updates upgrade all deps Bump the dev-major group with 3 updates

dvdherron · 2025-02-03T17:26:12Z

@mirisuzanne I decreased the size of the button target area and moved the button to be more centered in f2b0be1

It also rotates when the colors are stacked

Played around with some possible animations but couldn't come up with something that made sense in both orientations. Open to suggestions if you think an animation of some sort should happen. Maybe it just spins on hover or when the colors change?

mirisuzanne

Looking pretty good. A swap rotation animation could be fun, but what I was really trying to get at was something more noticeable on hover/focus - to make the click target more obvious. Looking closer, I wonder why we're removing focus rings on all icon buttons currently?

mirisuzanne · 2025-02-03T18:57:22Z

src/lib/components/colors/SwitchButton.svelte

+
+<button type="button" onclick={switchColors} data-btn="icon switch">
+  <Icon name="switch" />
+  <span class="sr-only">Click to swap colors</span></button


Suggested change

<span class="sr-only">Click to swap colors</span></button

<span class="sr-only">Swap colors</span></button

mirisuzanne · 2025-02-03T19:02:39Z

src/sass/initial/_layout.scss

+      'bginput switch fginput' auto
+      'bgslide . fgslide' auto / 1fr min-content 1fr;


I like having the button in the grid, but currently:

The column gaps seem quite large, with only that button in between the colors

The top (color form) and bottom (color formats/gamuts) grids no longer align

mirisuzanne

lgtm

jgerigmeyer · 2025-02-04T20:31:53Z

A swap rotation animation could be fun

I agree that a rotate-180 rotation animation would be cool here, but doesn't need to hold up merge if we don't want to mess with it.

…ap-colors

dvdherron · 2025-02-05T11:50:09Z

Looking pretty good. A swap rotation animation could be fun, but what I was really trying to get at was something more noticeable on hover/focus - to make the click target more obvious. Looking closer, I wonder why we're removing focus rings on all icon buttons currently?

I think we gave the icon buttons custom focus styles in b62fd12 ? @stacyk Might have more to say on that. They generally scale up and change color on keyboard focus.

I added an outline to swap-colors button for now but we can remove that if we want all the icon buttons to match.

dvdherron · 2025-02-05T11:52:23Z

Added a rotation animation to the button in 3a699a0 And there's now a thin outline on keyboard focus. Should be ready for a final review.

jamesnw · 2025-02-05T14:38:35Z

I like the animation! A couple questions-

Should we disable it for people with prefers-reduced-motion?
I was expecting it to animate on click, not hover- but I guess that would require JS, right? I'm fine either way.

mirisuzanne · 2025-02-05T16:52:05Z

src/sass/patterns/_buttons.scss

+  &:focus {
+    --outline-width: thin;
+
+    animation: swap var(--fast) var(--out-back);


The transform property already has a transition on it, so might be simpler to rotate rather than add a full animation:

Suggested change

animation: swap var(--fast) var(--out-back);

transform: rotate(180deg);

removed the full animation in ad9a6f9

src/sass/patterns/_buttons.scss

dvdherron · 2025-02-05T16:55:27Z

I like the animation! A couple questions-
* Should we disable it for people with `prefers-reduced-motion`?

Good call. I'll add a prefers-reduced-motion rule.

* I was expecting it to animate on click, not hover- but I guess that would require JS, right? I'm fine either way.

Yeah, that might make more sense for the animation to happen as the swap is happening. Would that be adding a temporary class to the button? @jamesnw I can clean up the css if you set up the JS.

mirisuzanne · 2025-02-05T16:58:23Z

Yeah, that might make more sense for the animation to happen as the swap is happening. Would that be adding a temporary class to the button?

@dvdherron @jamesnw - while I see the logic to it, I don't think that animating on active would be as helpful. At that point we've already taken the action. By doing it on hover, we tell you something about what the action is going to be.

dvdherron · 2025-02-05T17:50:31Z

* Should we disable it for people with `prefers-reduced-motion`?

Instead of rotating, it just scales a tiny bit for people with prefers-reduced-motion set.

mirisuzanne

looks great!

Add button and drag to swap colors

0619a74

jamesnw marked this pull request as ready for review December 11, 2024 17:17

Start styling switch button

6b88aa5

jamesnw assigned mirisuzanne and stacyk Dec 16, 2024

jamesnw linked an issue Dec 16, 2024 that may be closed by this pull request

I want to easily swap colors (background/foreground) #108

Closed

jgerigmeyer reviewed Jan 16, 2025

View reviewed changes

src/lib/components/colors/Header.svelte Outdated Show resolved Hide resolved

src/lib/components/colors/Header.svelte Outdated Show resolved Hide resolved

src/lib/components/colors/Header.svelte Outdated Show resolved Hide resolved

mirisuzanne assigned dvdherron Jan 28, 2025

Better handling of dragging

1461f17

jamesnw requested a review from jgerigmeyer January 28, 2025 19:46

dvdherron unassigned mirisuzanne and stacyk Jan 29, 2025

dvdherron and others added 3 commits January 30, 2025 17:31

initial style cleanup for color swap button

f2b0be1

Merge branch 'main' into swap-colors

9a77666

* main: upgrade stylelint Bump the dev-minor group with 11 updates upgrade all deps Bump the dev-major group with 3 updates

lint

80f3305

jgerigmeyer approved these changes Jan 30, 2025

View reviewed changes

dvdherron requested a review from mirisuzanne February 3, 2025 17:26

mirisuzanne reviewed Feb 3, 2025

View reviewed changes

dvdherron added 3 commits February 4, 2025 10:09

Merge branch 'main' into swap-colors

92b09b5

reduce space around switch button

36800c6

change sr-only text for switch button

88a1575

mirisuzanne approved these changes Feb 4, 2025

View reviewed changes

jamesnw and others added 3 commits February 4, 2025 17:01

Merge branch 'main' of https://github.com/oddbird/oddcontrast into sw…

e505247

…ap-colors

animate swap button

3a699a0

add outline to swap button

96e9d8e

cleanup

f2efd8f

dvdherron requested review from mirisuzanne and jgerigmeyer February 5, 2025 11:52

mirisuzanne reviewed Feb 5, 2025

View reviewed changes

clean up animation

ad9a6f9

mirisuzanne approved these changes Feb 5, 2025

View reviewed changes

jgerigmeyer approved these changes Feb 5, 2025

View reviewed changes

jgerigmeyer merged commit b653d98 into main Feb 5, 2025
7 checks passed

jgerigmeyer deleted the swap-colors branch February 5, 2025 19:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add button and drag to swap colors #227

Add button and drag to swap colors #227

jamesnw commented Dec 11, 2024 •

edited by dvdherron

Loading

netlify bot commented Dec 11, 2024 •

edited

Loading

mirisuzanne commented Jan 28, 2025

dvdherron commented Feb 3, 2025

mirisuzanne left a comment

mirisuzanne Feb 3, 2025

mirisuzanne Feb 3, 2025

mirisuzanne left a comment

jgerigmeyer commented Feb 4, 2025

dvdherron commented Feb 5, 2025

dvdherron commented Feb 5, 2025

jamesnw commented Feb 5, 2025

mirisuzanne Feb 5, 2025

dvdherron Feb 5, 2025

dvdherron commented Feb 5, 2025

mirisuzanne commented Feb 5, 2025

dvdherron commented Feb 5, 2025

mirisuzanne left a comment

	<span class="sr-only">Click to swap colors</span></button
	<span class="sr-only">Swap colors</span></button

		'bginput switch fginput' auto
		'bgslide . fgslide' auto / 1fr min-content 1fr;

	animation: swap var(--fast) var(--out-back);
	transform: rotate(180deg);

Add button and drag to swap colors #227

Add button and drag to swap colors #227

Conversation

jamesnw commented Dec 11, 2024 • edited by dvdherron Loading

Description

Related Issue(s)

Todo

netlify bot commented Dec 11, 2024 • edited Loading

✅ Deploy Preview for oddcontrast ready!

mirisuzanne commented Jan 28, 2025

dvdherron commented Feb 3, 2025

mirisuzanne left a comment

Choose a reason for hiding this comment

mirisuzanne Feb 3, 2025

Choose a reason for hiding this comment

mirisuzanne Feb 3, 2025

Choose a reason for hiding this comment

mirisuzanne left a comment

Choose a reason for hiding this comment

jgerigmeyer commented Feb 4, 2025

dvdherron commented Feb 5, 2025

dvdherron commented Feb 5, 2025

jamesnw commented Feb 5, 2025

mirisuzanne Feb 5, 2025

Choose a reason for hiding this comment

dvdherron Feb 5, 2025

Choose a reason for hiding this comment

dvdherron commented Feb 5, 2025

mirisuzanne commented Feb 5, 2025

dvdherron commented Feb 5, 2025

mirisuzanne left a comment

Choose a reason for hiding this comment

jamesnw commented Dec 11, 2024 •

edited by dvdherron

Loading

netlify bot commented Dec 11, 2024 •

edited

Loading