Skip to content

Toolbar: handle many features, tweak stagger anim #349

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
laander merged 12 commits into from
Feb 28, 2025
Merged

Toolbar: handle many features, tweak stagger anim #349

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
1979441
smarter stagger delays based on feature count, make list scrollable f…
laander Feb 27, 2025
1980a03
Merge branch 'main' into buc-3360-handle-lots-of-features
laander Feb 27, 2025
68909d9
format
laander Feb 27, 2025
2086df8
cap at max 15 visible features
laander Feb 27, 2025
b00028c
Merge branch 'main' into buc-3360-handle-lots-of-features
laander Feb 27, 2025
e821c15
sort alphabetically
laander Feb 27, 2025
6766581
tweak colors to be slightly darker, fix border contrast
laander Feb 27, 2025
aea38b1
Merge branch 'buc-3360-handle-lots-of-features' of https://github.com…
laander Feb 27, 2025
e9a807f
create new array
laander Feb 27, 2025
f437e3f
tweak animations further
laander Feb 28, 2025
1c661ba
cleanup
laander Feb 28, 2025
d854e48
Merge branch 'main' into buc-3360-handle-lots-of-features
laander Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions packages/browser-sdk/src/toolbar/Features.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,15 @@
opacity: 0;
transform: translateY(-7px);
transition-property: opacity, transform;
transition-duration: 0.1s;
transition-duration: 0.075s;
transition-timing-function: cubic-bezier(0.75, -0.015, 0.565, 1.055);

&.show {
opacity: 1;
transform: translateY(0);
transition-delay: calc(0.01s * var(--i));
/* stagger effect where first item (i=0) has no delay,
and delay is based on item count (n) so total animation time always is 509ms */
transition-delay: calc(0.05s * var(--i) / max(var(--n) - 1, 1));
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/browser-sdk/src/toolbar/Features.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export function FeaturesTable({
return <div style={{ color: "var(--gray500)" }}>No features found</div>;
}
return (
<table class="features-table">
<table class="features-table" style={{ "--n": features.length }}>
<tbody>
{features.map((feature, index) => (
<FeatureRow
Expand Down
43 changes: 40 additions & 3 deletions packages/browser-sdk/src/toolbar/Toolbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@
--gray500: #787c91;
--black: #1e1f24;

--bg-color: hsla(230, 9%, 13%, 0.85);
--bg-light-color: hsla(230, 9%, 11%, 0.85);
--border-color: hsl(227, 10%, 18%);
--bg-color: hsla(230, 9%, 8%, 0.85);
--bg-light-color: hsla(230, 9%, 6%, 0.85);
--border-color: hsla(0, 0%, 100%, 0.1);
--bg-blur: 3px;

--logo-color: white;
Expand Down Expand Up @@ -99,6 +99,43 @@
z-index: 999999;
min-width: 200px;
padding: 0;

--visible-features: 15;
max-height: min(
calc(100vh - 36px - 35px),
calc(45px + (var(--visible-features) * 27px))
);

&[open] {
display: flex;
flex-direction: column;
}
}

.dialog-content {
overflow-y: auto;
max-height: 100%;
flex-grow: 1;
margin: 3px 3px 3px 0;

&::-webkit-scrollbar {
width: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 999px;
transition: background-color 0.1s ease;

&:hover {
background-color: rgba(255, 255, 255, 0.3);
}
}
&::-webkit-scrollbar-button {
display: none;
}
}

.toolbar-toggle {
Expand Down
6 changes: 5 additions & 1 deletion packages/browser-sdk/src/toolbar/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ export default function Toolbar({
const searchedFeatures =
search === null ? features : features.filter((f) => f.key.includes(search));

const sortedFeatures = [...searchedFeatures].sort((a, b) =>
a.key.localeCompare(b.key),
);

const appBaseUrl = bucketClient.getConfig().appBaseUrl;

const { isOpen, close, toggle } = useDialog();
Expand Down Expand Up @@ -108,7 +112,7 @@ export default function Toolbar({
<DialogContent>
<FeaturesTable
appBaseUrl={appBaseUrl}
features={searchedFeatures}
features={sortedFeatures}
isOpen={isOpen}
setEnabledOverride={bucketClient.setFeatureOverride.bind(
bucketClient,
Expand Down
10 changes: 5 additions & 5 deletions packages/browser-sdk/src/ui/Dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,11 @@

&[open] {
animation: /* easeOutQuint */
scale 200ms cubic-bezier(0.22, 1, 0.36, 1),
fade 200ms cubic-bezier(0.22, 1, 0.36, 1);
scale 150ms cubic-bezier(0.22, 1, 0.36, 1),
fade 150ms cubic-bezier(0.22, 1, 0.36, 1);

&::backdrop {
animation: fade 200ms cubic-bezier(0.22, 1, 0.36, 1);
animation: fade 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
}
}
Expand All @@ -61,8 +61,8 @@

&[open] {
animation: /* easeOutQuint */
scale 200ms cubic-bezier(0.22, 1, 0.36, 1),
fade 200ms cubic-bezier(0.22, 1, 0.36, 1);
scale 150ms cubic-bezier(0.22, 1, 0.36, 1),
fade 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
&.bottom {
transform-origin: top center;
Expand Down