feat(releases): UI for hiding prespective layers (#7678)

sanity-io · Oct 28, 2024 · 8480326 · 8480326
1 parent a017168
commit 8480326
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx b/packages/sanity/src/core/releases/navbar/GlobalPerspectiveMenuItem.tsx
@@ -1,8 +1,9 @@
 import {EyeOpenIcon} from '@sanity/icons'
-// eslint-disable-next-line no-restricted-imports -- custom use for MenuItem not supported by ui-components
-import {Box, Flex, MenuItem, Stack, Text} from '@sanity/ui'
+// eslint-disable-next-line no-restricted-imports -- custom use for MenuItem & Button not supported by ui-components
+import {Box, Button, Flex, MenuItem, Stack, Text} from '@sanity/ui'
 import {type MouseEvent, useCallback} from 'react'
 import {getReleaseTone, RelativeTime, ReleaseAvatar, type ReleaseDocument} from 'sanity'
+import {styled} from 'styled-components'
 
 import {usePerspective} from '../hooks/usePerspective'
 import {GlobalPerspectiveMenuItemIndicator} from './PerspectiveLayerIndicator'
@@ -17,6 +18,25 @@ export interface LayerRange {
   }
 }
 
+const ToggleLayerButton = styled(Button)`
+  --card-fg-color: inherit;
+  --card-icon-color: inherit;
+
+  background-color: inherit;
+  opacity: 1;
+
+  @media (hover: hover) {
+    &:not([data-disabled='true']):hover {
+      --card-fg-color: inherit;
+      --card-icon-color: inherit;
+    }
+  }
+
+  [data-ui='MenuItem']:hover & {
+    opacity: 1;
+  }
+`
+
 type rangePosition = 'first' | 'within' | 'last' | undefined
 
 export function getRangePosition(range: LayerRange, index: number): rangePosition {
@@ -106,24 +126,19 @@ export function GlobalPerspectiveMenuItem(props: {
               )}
           </Stack>
           <Box flex="none">
-            {!toggleable && (
-              <Box padding={2} style={{opacity: 0}}>
-                <Text size={1}>
-                  <EyeOpenIcon />
-                </Text>
-              </Box>
-            )}
-            {/* {toggleable && (
+            {inRange && (
               <ToggleLayerButton
-                $visible={!release.hidden}
+                tooltipProps={{placement: 'bottom', content: 'Hide release'}}
+                // $visible={!release.hidden}
                 forwardedAs="div"
                 disabled={!active}
-                icon={release.hidden ? EyeClosedIcon : EyeOpenIcon}
+                icon={EyeOpenIcon}
+                // icon={release.hidden ? EyeClosedIcon : EyeOpenIcon}
                 mode="bleed"
                 onClick={handleToggleReleaseVisibility}
                 padding={2}
               />
-            )} */}
+            )}
           </Box>
         </Flex>
       </MenuItem>

diff --git a/packages/sanity/src/core/releases/navbar/PerspectiveLayerIndicator.tsx b/packages/sanity/src/core/releases/navbar/PerspectiveLayerIndicator.tsx
@@ -82,7 +82,8 @@ export const GlobalPerspectiveMenuItemIndicator = styled.div<{
 export const GlobalPerspectiveMenuLabelIndicator = styled(Box)<{$withinRange: boolean}>(
   ({$withinRange}) => css`
     position: relative;
-    padding-left: 40px;
+    // 4px padding + 33px release indicator width + 4px gap
+    padding-left: 41px;
 
     ${$withinRange &&
     css`

diff --git a/packages/sanity/src/core/releases/navbar/ReleaseTypeMenuSection.tsx b/packages/sanity/src/core/releases/navbar/ReleaseTypeMenuSection.tsx
@@ -1,4 +1,4 @@
-import {Label} from '@sanity/ui'
+import {Flex, Label} from '@sanity/ui'
 import {type ReleaseDocument, type ReleaseType, useTranslation} from 'sanity'
 
 import {
@@ -42,14 +42,16 @@ export function ReleaseTypeSection({
           {t(RELEASE_TYPE_LABELS[releaseType])}
         </Label>
       </GlobalPerspectiveMenuLabelIndicator>
-      {releases.map((release, index) => (
-        <GlobalPerspectiveMenuItem
-          release={release}
-          key={release._id}
-          rangePosition={getRangePosition(range, releaseTypeOffset + index)}
-          toggleable={releaseTypeOffset < lastIndex}
-        />
-      ))}
+      <Flex direction="column" gap={1}>
+        {releases.map((release, index) => (
+          <GlobalPerspectiveMenuItem
+            release={release}
+            key={release._id}
+            rangePosition={getRangePosition(range, releaseTypeOffset + index)}
+            toggleable={releaseTypeOffset < lastIndex}
+          />
+        ))}
+      </Flex>
     </>
   )
 }