fix(Navigation/DeleteModal): make header of deleting items list and "…

…permanently delete" checkbox is sticky [YTFRONT-4245]
ytsaurus · Nov 5, 2024 · 70598ef · 70598ef
1 parent 499b2de
commit 70598ef
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 7 deletions.
diff --git a/...src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js b/...src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js
@@ -155,11 +155,13 @@ export class DeleteObjectModal extends Component {
             <ErrorBoundary>
                 <div className={block({multiple: true})}>
                     <div className={block('table')}>
-                        <div className={block('preview-icon')} />
-                        <div className={block('preview-name')}>Name</div>
-                        <div className={block('preview-disk-space')}>Disk space</div>
-                        <div className={block('preview-node-count')}>Node count</div>
-                        <div className={block('preview-node-count')}>Row count</div>
+                        <div className={block('table-header')}>
+                            <div className={block('preview-icon')} />
+                            <div className={block('preview-name')}>Name</div>
+                            <div className={block('preview-disk-space')}>Disk space</div>
+                            <div className={block('preview-node-count')}>Node count</div>
+                            <div className={block('preview-node-count')}>Row count</div>
+                        </div>
 
                         {map_(multipleInfo, ({path, resourceUsage}, index) => {
                             const {type, titleUnquoted, rows, unmergedRows} = item[index];
@@ -265,6 +267,7 @@ export class DeleteObjectModal extends Component {
                 confirmText="Delete"
                 content={this.content}
                 footerContent={helpLink}
+                contentClassName={block('content')}
                 onCancel={closeDeleteModal}
                 onConfirm={this.handleDeleteClick}
             />

diff --git a/...c/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss b/...c/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss
@@ -7,14 +7,29 @@
         font-weight: bold;
     }
 
+    &__content {
+        padding: 0 30px;
+    }
+
     &__table {
         display: grid;
         grid-template-columns: 10px 1fr 70px 80px 75px;
-        grid-template-rows: 20px;
+        grid-template-rows: auto 20px;
         grid-gap: 12px 20px;
         align-items: center;
     }
 
+    &__table-header {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        position: sticky;
+        top: 0;
+        padding-top: 15px;
+        background-color: var(--g-color-base-modal);
+        z-index: 1;
+    }
+
     &__object {
         margin-bottom: 15px;
         display: flex;
@@ -38,8 +53,12 @@
     }
 
     &__delete {
+        position: sticky;
+        bottom: 0;
+        padding: 16px 0;
         margin: 0;
-        margin-top: 30px;
+        margin-top: 14px;
+        background: var(--g-color-base-modal);
         display: flex;
         justify-content: space-between;