Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-04-15 01:16:22 +02:00
Code Issues Projects Releases Wiki Activity

fix: small fixes for the interactive demo guide (#3713)

Browse Source 
https://linear.app/unleash/issue/2-1005/small-ui-improvements

https://linear.app/unleash/issue/2-1020/fix-issues-with-interactive-demo-guide

Tackles the 2 tasks above, which include items such as:
 - Change drop-shadow of step tooltips;
 - Change transparency of overlay;
 - Change box-shadow of topics "widget";
 - Gradual rollout should use `default` stickiness;
 - Improve last step behavior when redirecting (add optional delay);

Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537
This commit is contained in:
Nuno Góis 2023-05-09 08:04:39 +01:00 committed by GitHub
parent f153f632c0
commit 0c620656ef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/component/demo/DemoSteps/DemoSteps.tsx
View File

@ -212,14 +212,15 @@ export const DemoSteps = ({
const currentStep = currentTopic.steps[step]; const currentStep = currentTopic.steps[step];
if (!currentStep) return; if (!currentStep) return;
if ( setTimeout(() => {
currentStep.href && if (
!location.pathname.endsWith(currentStep.href.split('?')[0]) currentStep.href &&
) { !location.pathname.endsWith(currentStep.href.split('?')[0])
navigate(currentStep.href); ) {
} navigate(currentStep.href);
}
waitForLoad(currentStep); waitForLoad(currentStep);
}, currentStep.delay ?? 0);
}, [topic, step]); }, [topic, step]);
useEffect(() => { useEffect(() => {
@ -247,7 +248,7 @@ export const DemoSteps = ({
disableAnimation: true, disableAnimation: true,
styles: { styles: {
floater: { floater: {
filter: `drop-shadow(${theme.palette.primary.main} 0px 0px 3px)`, filter: `drop-shadow(rgba(32, 32, 33, .2) 0px 4px 12px)`,
}, },
}, },
}} }}
@ -263,7 +264,7 @@ export const DemoSteps = ({
animation: 'pulse 2s infinite', animation: 'pulse 2s infinite',
}, },
overlay: { overlay: {
backgroundColor: 'rgba(0, 0, 0, 0.3)', backgroundColor: 'rgba(0, 0, 0, 0.4)',
}, },
}} }}
tooltipComponent={( tooltipComponent={(

1
frontend/src/component/demo/DemoTopics/DemoTopics.tsx
View File

@ -21,6 +21,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
width: '100%', width: '100%',
maxWidth: theme.spacing(30), maxWidth: theme.spacing(30),
zIndex: theme.zIndex.fab, zIndex: theme.zIndex.fab,
boxShadow: theme.boxShadows.popup,
'&&&': { '&&&': {
borderRadius: 0, borderRadius: 0,
borderTopLeftRadius: theme.shape.borderRadiusLarge, borderTopLeftRadius: theme.shape.borderRadiusLarge,

2
frontend/src/component/demo/demo-setup.ts
View File

@ -31,7 +31,7 @@ export const gradualRollout = async () => {
constraints: [], constraints: [],
parameters: { parameters: {
rollout: '50', rollout: '50',
stickiness: 'userId', stickiness: 'default',
groupId: featureId, groupId: featureId,
}, },
}), }),

4
frontend/src/component/demo/demo-topics.tsx
View File

@ -14,6 +14,7 @@ export interface ITutorialTopicStep extends Step {
anyClick?: boolean; anyClick?: boolean;
optional?: boolean; optional?: boolean;
focus?: boolean | string; focus?: boolean | string;
delay?: number;
} }
export interface ITutorialTopic { export interface ITutorialTopic {
@ -252,6 +253,7 @@ export const TOPICS: ITutorialTopic[] = [
</> </>
), ),
nextButton: true, nextButton: true,
delay: 500,
}, },
], ],
}, },
@ -355,6 +357,7 @@ export const TOPICS: ITutorialTopic[] = [
</> </>
), ),
nextButton: true, nextButton: true,
delay: 500,
}, },
], ],
}, },
@ -521,6 +524,7 @@ export const TOPICS: ITutorialTopic[] = [
</> </>
), ),
nextButton: true, nextButton: true,
delay: 500,
}, },
], ],
}, },