fix(pluginMaterial): fix block list can't scroll when visible in canv…

…as (opentiny#77)
MomoPoppy · Nov 14, 2023 · ed0b8a3 · ed0b8a3
1 parent aaa83ba
commit ed0b8a3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/canvas/src/components/container/CanvasContainer.vue b/packages/canvas/src/components/container/CanvasContainer.vue
@@ -223,16 +223,19 @@ export default {
 </script>
 <style lang="less" scoped>
 .insert-panel {
-  z-index: 1;
+  z-index: 4;
   position: fixed;
   top: 200px;
   left: 400px;
   width: 480px;
   :deep(.components-wrap) {
     & > .tiny-collapse {
-      height: 300px;
+      max-height: 300px;
     }
   }
+  :deep(#pane-blocks) {
+    max-height: 400px;
+  }
 }
 .datainit-tip {
   display: flex;

diff --git a/packages/plugins/materials/src/Main.vue b/packages/plugins/materials/src/Main.vue
@@ -90,23 +90,27 @@ export default {
 
 <style lang="less" scoped>
 .tiny-tabs {
-  height: calc(100% - 48px);
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
 }
 
 :deep(.tiny-tabs__header) {
   padding: 8px;
 }
 
 :deep(.tiny-tabs__content) {
-  height: calc(100% - 48px);
+  flex: 1;
+  overflow-y: scroll;
   padding: 0;
   & > div {
     height: 100%;
   }
 }
 
 .tiny-collapse {
-  height: calc(100% - 56px);
+  flex: 1;
   overflow-y: scroll;
 }
 </style>
diff --git a/packages/plugins/materials/src/component/Main.vue b/packages/plugins/materials/src/component/Main.vue
@@ -117,6 +117,8 @@ export default {
 <style lang="less" scoped>
 .components-wrap {
   height: 100%;
+  display: flex;
+  flex-direction: column;
 
   .tiny-search {
     padding: 12px 8px;
@@ -164,7 +166,7 @@ export default {
   }
 
   .tiny-collapse {
-    height: calc(100% - 56px);
+    flex: 1;
     overflow-y: scroll;
     .tiny-collapse-item.is-active + .tiny-collapse-item {
       margin-top: 0;