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; setHiddenEnvironments: (environment: string) => void;
} }
const StyledContainer = styled('div')(({ theme }) => ({ const StyledContainer = styled('div')({
display: 'flex', display: 'flex',
})); alignItems: 'center',
});
const StyledLabel = styled('label')({ const StyledLabel = styled('label')({
display: 'inline-flex', 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 { useRequiredPathParam } from 'hooks/useRequiredPathParam';
import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import { IFeatureToggle } from '../../../../../interfaces/featureToggle';
const StyledContainer = styled('div')(({ theme }) => ({ const StyledContainer = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge, 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 { IFeatureEnvironment } from 'interfaces/featureToggle';
import { styled } from '@mui/material'; import { IconButton, styled } from '@mui/material';
import { Visibility, VisibilityOff } from '@mui/icons-material'; import { Visibility, VisibilityOff } from '@mui/icons-material';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
const Visible = styled(Visibility)(({ theme }) => ({ const StyledVisibilityToggle = styled(IconButton, {
cursor: 'pointer', shouldForwardProp: prop => prop !== 'highlighted',
})<{ visibilityOff: boolean }>(({ theme, visibilityOff }) => ({
marginLeft: 'auto', marginLeft: 'auto',
marginTop: theme.spacing(0.5), marginRight: theme.spacing(-1),
color: theme.palette.neutral.main, color: visibilityOff
? theme.palette.neutral.main
: theme.palette.tertiary.main,
'&:hover': { '&: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 { interface IFeatureOverviewSidePanelEnvironmentHiderProps {
@ -36,10 +32,15 @@ export const FeatureOverviewSidePanelEnvironmentHider = ({
}; };
return ( return (
<ConditionallyRender <StyledVisibilityToggle
condition={hiddenEnvironments.has(environment.name)} onClick={toggleHiddenEnvironments}
show={<VisibleOff onClick={toggleHiddenEnvironments} />} visibilityOff={hiddenEnvironments.has(environment.name)}
elseShow={<Visible onClick={toggleHiddenEnvironments} />} >
/> <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 { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { styled } from '@mui/material'; import { styled } from '@mui/material';
import StringTruncator from 'component/common/StringTruncator/StringTruncator'; import StringTruncator from 'component/common/StringTruncator/StringTruncator';
import { RemoveRedEye, Star } from '@mui/icons-material';
import { FeatureOverviewSidePanelEnvironmentHider } from './FeatureOverviewSidePanelEnvironmentHider'; import { FeatureOverviewSidePanelEnvironmentHider } from './FeatureOverviewSidePanelEnvironmentHider';
const StyledContainer = styled('div')(({ theme }) => ({ const StyledContainer = styled('div')(({ theme }) => ({
@ -22,6 +21,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(2), marginBottom: theme.spacing(2),
}, },
display: 'flex', display: 'flex',
alignItems: 'center',
})); }));
const StyledLabel = styled('label')(() => ({ const StyledLabel = styled('label')(() => ({