Эх сурвалжийг харах

[ui-storageBrowser] Fix height layout issues in storage browser (#3813)

Nidhi Bhat G 1 жил өмнө
parent
commit
ce08dccb5b

+ 1 - 9
apps/filebrowser/src/filebrowser/templates/storage_browser.mako

@@ -24,12 +24,4 @@
     ${ render_bundle(bundle) | n,unicode }
 % endfor
 
-<script type="text/javascript">
-  (function () {
-    window.createReactComponents('#storageBrowser');
-  })();
-</script>
-
-<div id="storageBrowser">
-  <StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>
-</div>
+<StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>

+ 12 - 11
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.scss

@@ -17,22 +17,23 @@
 @use 'variables' as vars;
 @import '../../../components/styles/mixins';
 
-.antd.cuix {
-  .hue-storage-browser {
-    @include fillAbsolute;
-    @include flexRowLayout;
+.hue-storage-browser.antd.cuix {
+  @include fillAbsolute;
+  @include flexRowLayout;
 
-    display: flex;
+  height: 100%;
+
+  .ant-spin-nested-loading {
+    height: 100%;
+
+    .ant-spin-container {
+      height: 100%;
+    }
   }
 
   .hue-storage-browser__tab {
     background-color: vars.$fluidx-gray-100;
     padding: 0 16px;
-    //TODO: Find fix so the flex is applied
-    flex: 0 0 100%;
-
-    .ant-tabs-content-holder {
-      height: 100vh;
-    }
+    height: 100%;
   }
 }

+ 4 - 0
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss

@@ -30,6 +30,10 @@ $icon-margin: 5px;
 
   .hue-storage-browser__search {
     width: 30%;
+
+    .ant-input {
+      box-shadow: none;
+    }
   }
 
   .hue-storage-browser__actions-bar-right {

+ 4 - 2
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.tsx

@@ -195,7 +195,7 @@ const StorageBrowserTable = ({
         key: `${key}`
       };
       if (key === 'name') {
-        column.width = '45%';
+        column.width = '40%';
         //TODO: Apply tooltip only for truncated values
         column.render = (_, record: StorageBrowserTableData) => (
           <Tooltip title={record.name}>
@@ -206,7 +206,9 @@ const StorageBrowserTable = ({
           </Tooltip>
         );
       } else if (key === 'mtime') {
-        column.width = '15%';
+        column.width = '20%';
+      } else if (key === 'permission') {
+        column.width = '12%';
       }
       columns.push(column);
     }