This is an automated email from the ASF dual-hosted git repository.
nicholasjiang pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/paimon-webui.git
The following commit(s) were added to refs/heads/main by this push:
new cc1e5435 [Improvement] Support left navigation bar of metadata with
dragging and resizing (#304)
cc1e5435 is described below
commit cc1e54356b31335be5230d97738a66138dbbde65
Author: s7monk <[email protected]>
AuthorDate: Thu Jun 6 16:00:47 2024 +0800
[Improvement] Support left navigation bar of metadata with dragging and
resizing (#304)
---
.../components/menu-tree/index.module.scss | 2 +-
paimon-web-ui/src/views/metadata/index.module.scss | 21 +++++++++++-
paimon-web-ui/src/views/metadata/index.tsx | 39 ++++++++++++++--------
3 files changed, 46 insertions(+), 16 deletions(-)
diff --git
a/paimon-web-ui/src/views/metadata/components/menu-tree/index.module.scss
b/paimon-web-ui/src/views/metadata/components/menu-tree/index.module.scss
index 9c58b31c..b29f30da 100644
--- a/paimon-web-ui/src/views/metadata/components/menu-tree/index.module.scss
+++ b/paimon-web-ui/src/views/metadata/components/menu-tree/index.module.scss
@@ -16,7 +16,7 @@ specific language governing permissions and limitations
under the License. */
.container {
- width: 20%;
+ width: 100%;
height: 100%;
box-sizing: border-box;
background-color: var(--n-color);
diff --git a/paimon-web-ui/src/views/metadata/index.module.scss
b/paimon-web-ui/src/views/metadata/index.module.scss
index 2e75ae1d..a2fb7321 100644
--- a/paimon-web-ui/src/views/metadata/index.module.scss
+++ b/paimon-web-ui/src/views/metadata/index.module.scss
@@ -20,13 +20,32 @@ under the License. */
width: 100%;
height: 100%;
+ .split {
+ position: relative;
+ width: 0;
+ height: 100%;
+ flex: none;
+ cursor: col-resize;
+
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: -5px;
+ bottom: 0;
+ left: -5px;
+ background: transparent;
+ z-index: 1;
+ }
+ }
+
.content {
display: flex;
flex-direction: column;
flex-grow: 1;
overflow-x: auto;
- width: calc(100% - 60px);
+ width: calc(100% - 40px);
padding: 14px 20px;
diff --git a/paimon-web-ui/src/views/metadata/index.tsx
b/paimon-web-ui/src/views/metadata/index.tsx
index 0be298c8..8461fdb0 100644
--- a/paimon-web-ui/src/views/metadata/index.tsx
+++ b/paimon-web-ui/src/views/metadata/index.tsx
@@ -34,21 +34,32 @@ export default defineComponent({
render() {
return (
<div class={styles.container}>
- <MenuTree />
- <div class={styles.content}>
- {this.currentTable
- ? (
- <>
- <Breadcrumb />
- <Tabs />
- </>
- )
- : (
- <div class={styles.empty}>
- <n-empty description="Select the table. Please"></n-empty>
+ <n-split direction="horizontal" max={0.45} min={0.12}
resize-trigger-size={0} default-size={0.168}>
+ {{
+ '1': () => (
+ <MenuTree />
+ ),
+ '2': () => (
+ <div class={styles.content}>
+ {this.currentTable
+ ? (
+ <>
+ <Breadcrumb />
+ <Tabs />
+ </>
+ )
+ : (
+ <div class={styles.empty}>
+ <n-empty description="Please choose a table."></n-empty>
+ </div>
+ )}
</div>
- )}
- </div>
+ ),
+ 'resize-trigger': () => (
+ <div class={styles.split} />
+ ),
+ }}
+ </n-split>
</div>
)
},
