Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-03-18 00:19:49 +01:00
Code Issues Projects Releases Wiki Activity

fix: improve hidden envs UI/UX (#2887)

Browse Source 
Some small UI/UX fixes related to user-scoped hidden environments in the
feature overview after aligning with @NicolaeUnleash


![image](https://user-images.githubusercontent.com/14320932/212077468-ee830ccf-7a82-4006-bd12-b87116160574.png)
This commit is contained in:
Nuno Góis 2023-01-12 13:29:38 +00:00 committed by GitHub
parent a52d3b0f77
commit b12962e7d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
View File

@ -25,9 +25,10 @@ interface IFeatureOverviewEnvSwitchProps {
setHiddenEnvironments: (environment: string) => void;
}
const StyledContainer = styled('div')(({ theme }) => ({
const StyledContainer = styled('div')({
display: 'flex',
}));
alignItems: 'center',
});
const StyledLabel = styled('label')({
display: 'inline-flex',

1
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
View File

@ -6,7 +6,6 @@ import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverview
import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { styled } from '@mui/material';
import { IFeatureToggle } from '../../../../../interfaces/featureToggle';
const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge,

37
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
View File

@ -1,23 +1,19 @@
import { IFeatureEnvironment } from 'interfaces/featureToggle';
import { styled } from '@mui/material';
import { IconButton, styled } from '@mui/material';
import { Visibility, VisibilityOff } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const Visible = styled(Visibility)(({ theme }) => ({
cursor: 'pointer',
const StyledVisibilityToggle = styled(IconButton, {
shouldForwardProp: prop => prop !== 'highlighted',
})<{ visibilityOff: boolean }>(({ theme, visibilityOff }) => ({
marginLeft: 'auto',
marginTop: theme.spacing(0.5),
color: theme.palette.neutral.main,
marginRight: theme.spacing(-1),
color: visibilityOff
? theme.palette.neutral.main
: theme.palette.tertiary.main,
'&:hover': {
opacity: 1,
color: theme.palette.neutral.main,
},
opacity: 0,
}));
const VisibleOff = styled(VisibilityOff)(({ theme }) => ({
cursor: 'pointer',
marginLeft: 'auto',
color: theme.palette.neutral.main,
}));
interface IFeatureOverviewSidePanelEnvironmentHiderProps {
@ -36,10 +32,15 @@ export const FeatureOverviewSidePanelEnvironmentHider = ({
};
return (
<ConditionallyRender
condition={hiddenEnvironments.has(environment.name)}
show={<VisibleOff onClick={toggleHiddenEnvironments} />}
elseShow={<Visible onClick={toggleHiddenEnvironments} />}
/>
<StyledVisibilityToggle
onClick={toggleHiddenEnvironments}
visibilityOff={hiddenEnvironments.has(environment.name)}
>
<ConditionallyRender
condition={hiddenEnvironments.has(environment.name)}
show={<VisibilityOff />}
elseShow={<Visibility />}
/>
</StyledVisibilityToggle>
);
};

2
frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx
View File

@ -13,7 +13,6 @@ import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfi
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { styled } from '@mui/material';
import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { RemoveRedEye, Star } from '@mui/icons-material';
import { FeatureOverviewSidePanelEnvironmentHider } from './FeatureOverviewSidePanelEnvironmentHider';
const StyledContainer = styled('div')(({ theme }) => ({
@ -22,6 +21,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(2),
},
display: 'flex',
alignItems: 'center',
}));
const StyledLabel = styled('label')(() => ({