style: improve layout

eclipse-jifa · Mar 14, 2024 · 5835455 · 5835455
1 parent 230ecc6
commit 5835455
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 37 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -1,5 +1,5 @@
 <!--
-    Copyright (c) 2023 Contributors to the Eclipse Foundation
+    Copyright (c) 2023, 2024 Contributors to the Eclipse Foundation
 
     See the NOTICE file(s) distributed with this work for additional
     information regarding copyright ownership.
@@ -66,7 +66,7 @@ onMounted(() => {
         />
 
         <template v-else-if="!env.loginRequired">
-          <Side />
+          <Side class="ej-side" />
           <div class="ej-main">
             <Main />
           </div>
@@ -81,18 +81,25 @@ onMounted(() => {
   width: 100%;
   height: 100vh;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: var(--ej-container-padding);
 }
 
 .ej-body {
-  margin-top: var(--ej-header-height);
-  height: calc(100vh - var(--ej-header-height));
+  flex-grow: 1;
   overflow: hidden;
+  display: flex;
+  margin-top: var(--ej-layout-margin);
+}
+
+.ej-side {
+  margin-right: var(--ej-layout-margin);
 }
 
 .ej-main {
-  margin-left: var(--ej-side-width);
   height: 100%;
-  padding: var(--ej-main-padding);
+  flex-grow: 1;
   overflow: hidden;
 }
 

diff --git a/frontend/src/components/forms/FileTransferForm.vue b/frontend/src/components/forms/FileTransferForm.vue
@@ -627,7 +627,7 @@ const dialogWidth = computed(() => {
         margin-top: 7px;
         width: 420px;
         padding: 8px 16px;
-        border-radius: var(--ej-common-border-radius);
+        border-radius: var(--el-border-radius-small);
         font-size: 12px;
         word-break: break-all;
         background-color: var(--el-color-error-light-9);

diff --git a/frontend/src/components/forms/LoginForm.vue b/frontend/src/components/forms/LoginForm.vue
@@ -1,5 +1,5 @@
 <!--
-    Copyright (c) 2023 Contributors to the Eclipse Foundation
+    Copyright (c) 2023, 2024 Contributors to the Eclipse Foundation
 
     See the NOTICE file(s) distributed with this work for additional
     information regarding copyright ownership.
@@ -281,7 +281,7 @@ function close(done) {
         style="
           width: 350px;
           padding: 8px 16px;
-          border-radius: var(--ej-common-border-radius);
+          border-radius: var(--el-border-radius-small);
           font-size: 12px;
           word-break: break-all;
           background-color: var(--el-color-error-light-9);

diff --git a/frontend/src/components/heapdump/HeapDump.vue b/frontend/src/components/heapdump/HeapDump.vue
@@ -1,5 +1,5 @@
 <!--
-    Copyright (c) 2023 Contributors to the Eclipse Foundation
+    Copyright (c) 2023, 2024 Contributors to the Eclipse Foundation
 
     See the NOTICE file(s) distributed with this work for additional
     information regarding copyright ownership.
@@ -129,7 +129,7 @@ watchEffect(() => {
   height: 100%;
   flex-grow: 1;
   background-color: var(--el-bg-color);
-  border-radius: var(--ej-common-border-radius);
+  border-radius: var(--el-border-radius-base);
   padding: 5px 8px;
   overflow: hidden;
 }
@@ -140,6 +140,6 @@ watchEffect(() => {
   display: flex;
   flex-direction: column;
   width: 400px;
-  margin-left: 7px;
+  margin-left: var(--ej-layout-margin);
 }
 </style>
diff --git a/frontend/src/components/heapdump/Inspector.vue b/frontend/src/components/heapdump/Inspector.vue
@@ -1,5 +1,5 @@
 <!--
-    Copyright (c) 2023 Contributors to the Eclipse Foundation
+    Copyright (c) 2023, 2024 Contributors to the Eclipse Foundation
 
     See the NOTICE file(s) distributed with this work for additional
     information regarding copyright ownership.
@@ -145,7 +145,10 @@ onMounted(() => load());
       </el-tab-pane>
     </el-tabs>
   </div>
-  <div class="ej-inspector-div" style="flex-grow: 1; margin-top: 7px; overflow: hidden">
+  <div
+    class="ej-inspector-div"
+    style="flex-grow: 1; margin-top: var(--ej-layout-margin); overflow: hidden"
+  >
     <el-tabs class="ej-tab" v-model="activeTab">
       <el-tab-pane name="Statics" :label="hdt('tab.statics')">
         <Fields static />
@@ -179,7 +182,7 @@ onMounted(() => load());
 <style scoped>
 .ej-inspector-div {
   background-color: var(--el-bg-color);
-  border-radius: var(--ej-common-border-radius);
+  border-radius: var(--el-border-radius-base);
   padding: 5px 8px;
 }
 

diff --git a/frontend/src/components/jfr/Jfr.vue b/frontend/src/components/jfr/Jfr.vue
@@ -646,7 +646,7 @@ onUnmounted(() => {});
   height: 100%;
   flex-grow: 1;
   background-color: var(--el-bg-color);
-  border-radius: var(--ej-common-border-radius);
+  border-radius: var(--el-border-radius-base);
   padding: 5px 0;
   overflow: hidden;
   margin-top: 5px;

diff --git a/frontend/src/components/layouts/Header.vue b/frontend/src/components/layouts/Header.vue
@@ -47,7 +47,7 @@ const { toolbar } = useHeaderToolbar();
     <div class="container">
       <div class="left-side">
         <img
-          style="height: calc(var(--ej-header-height) - 4px); cursor: pointer"
+          style="height: calc(var(--ej-header-height) - 10px); cursor: pointer"
           alt=""
           :src="logo"
           @click="router.push({ name: 'Files' })"
@@ -130,14 +130,12 @@ const { toolbar } = useHeaderToolbar();
 
 <style scoped>
 .header {
-  position: fixed;
-  top: 0;
-  left: 0;
+  flex-shrink: 0;
   width: 100%;
   height: var(--ej-header-height);
   overflow: hidden;
-  border-bottom: 1px solid var(--el-border-color);
   background-color: var(--el-bg-color);
+  border-radius: var(--el-border-radius-base);
 }
 
 .container {

diff --git a/frontend/src/components/layouts/Side.vue b/frontend/src/components/layouts/Side.vue
@@ -1,5 +1,5 @@
 <!--
-    Copyright (c) 2023 Contributors to the Eclipse Foundation
+    Copyright (c) 2023, 2024 Contributors to the Eclipse Foundation
 
     See the NOTICE file(s) distributed with this work for additional
     information regarding copyright ownership.
@@ -35,7 +35,7 @@ function onSelect(index) {
 }
 </script>
 <template>
-  <div class="ej-side">
+  <div>
     <el-menu class="ej-side-menu" :default-active="defaultActive" @select="onSelect" collapse>
       <el-menu-item index="Files">
         <el-icon>
@@ -51,16 +51,18 @@ function onSelect(index) {
   </div>
 </template>
 <style scoped>
-.ej-side {
-  position: fixed;
-  top: var(--ej-header-height);
-  left: 0;
-  bottom: 0;
-  transition: left 0.3s;
+:deep(.el-menu) {
+  border-right: none;
+}
+
+:deep(.el-menu-item:first-child) {
+  border-top-left-radius: var(--el-border-radius-base);
+  border-top-right-radius: var(--el-border-radius-base);
 }
 
 .ej-side-menu {
   height: 100%;
   background-color: var(--el-bg-color);
+  border-radius: var(--el-border-radius-base);
 }
 </style>
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2023 Contributors to the Eclipse Foundation
+ * Copyright (c) 2023, 2024 Contributors to the Eclipse Foundation
  *
  * See the NOTICE file(s) distributed with this work for additional
  * information regarding copyright ownership.
@@ -13,13 +13,11 @@
 @use 'element-plus/theme-chalk/dark/css-vars.css' as *;
 
 :root {
-  --ej-header-height: 44px;
-  --ej-side-width: 44px;
+  --ej-container-padding: 12px;
+  --ej-layout-margin: 12px;
+  --ej-header-height: 50px;
 
-  --ej-main-padding: 7px;
-
-  --ej-common-border-radius: 2px;
-  --el-menu-base-level-padding: 10px !important;
+  --el-menu-base-level-padding: 16px !important;
 }
 
 *,
@@ -29,6 +27,8 @@
 }
 
 body {
+  overscroll-behavior: none;
+
   margin: 0;
 
   background-color: var(--el-bg-color-page);
@@ -49,7 +49,7 @@ a {
   background-color: var(--el-bg-color);
   height: 100%;
   padding: 15px;
-  border-radius: var(--ej-common-border-radius);
+  border-radius: var(--el-border-radius-base);
   overflow: hidden;
 }