#4369 - update delete button for list

Author: rsergeenko

redisinsight/ui/src/pages/browser/components/key-list/KeyList.tsx

@@ -325,7 +325,7 @@ const KeyList = forwardRef((props: Props, ref) => {
     {
       id: 'nameString',
       label: 'Key',
-      minWidth: 100,
+      minWidth: 94,
       truncateText: true,
       render: (cellData: string) => {
         if (isUndefined(cellData)) {
@@ -372,7 +372,7 @@ const KeyList = forwardRef((props: Props, ref) => {
         if (cellData === -1) {
           return (
             <EuiTextColor
-              className={cx('hideOnHover', { hide: deletePopoverIndex === rowIndex })}
+              className={cx('moveOnHover', { hide: deletePopoverIndex === rowIndex })}
               color="subdued"
               data-testid={`ttl-${name}`}
             >
@@ -382,7 +382,7 @@ const KeyList = forwardRef((props: Props, ref) => {
         }
         return (
           <EuiText
-            className={cx('hideOnHover', { hide: deletePopoverIndex === rowIndex })}
+            className={cx('moveOnHover', { hide: deletePopoverIndex === rowIndex })}
             color="subdued"
             size="s"
             style={{ maxWidth: '100%' }}
@@ -411,8 +411,8 @@ const KeyList = forwardRef((props: Props, ref) => {
     {
       id: 'size',
       label: 'Size',
-      absoluteWidth: 84,
-      minWidth: 84,
+      absoluteWidth: 90,
+      minWidth: 90,
       alignment: TableCellAlignment.Right,
       textAlignment: TableCellTextAlignment.Right,
       render: (
@@ -437,7 +437,7 @@ const KeyList = forwardRef((props: Props, ref) => {
             <EuiText
               color="subdued"
               size="s"
-              className={cx('hideOnHover', { hide: deletePopoverIndex === rowIndex })}
+              className={cx('moveOnHover', { hide: deletePopoverIndex === rowIndex })}
               style={{ maxWidth: '100%' }}
             >
               <div style={{ display: 'flex' }} className="truncateText" data-testid={`size-${name}`}>
@@ -457,7 +457,7 @@ const KeyList = forwardRef((props: Props, ref) => {
               </div>
             </EuiText>
             <EuiPopover
-              anchorClassName={cx('showOnHover', { show: deletePopoverIndex === rowIndex })}
+              anchorClassName={cx(styles.deleteAnchor, 'showOnHover', { show: deletePopoverIndex === rowIndex })}
               anchorPosition="rightUp"
               isOpen={deletePopoverIndex === rowIndex}
               closePopover={() => setDeletePopoverIndex(undefined)}

redisinsight/ui/src/pages/browser/components/key-list/styles.module.scss

@@ -20,12 +20,16 @@
 .table {
   height: 100%;
 
+  .deleteAnchor {
+    margin-right: -10px;
+  }
+
   :global {
     .ReactVirtualized__Table__row {
       .ReactVirtualized__Table__rowColumn {
-        .hideOnHover {
-          display: block;
-          &.hide { display: none !important; }
+        .moveOnHover {
+          transition: transform ease 0.3s;
+          &.hide { transform: translateX(-8px) }
         }
         .showOnHover {
           display: none;
@@ -34,7 +38,7 @@
 
       &:hover {
         .ReactVirtualized__Table__rowColumn {
-          .hideOnHover { display: none; }
+          .moveOnHover { transform: translateX(-8px) }
           .showOnHover { display: block; }
         }
       }