changeset 3755:7ca3b288ac5e infiniscroll

virtual_scrolling: size parameter
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 25 Jun 2019 12:04:45 +0200
parents ac12e135d4b8
children c493e3be54ba
files client/src/components/importoverview/AdditionalLog.vue client/src/components/importoverview/LogItem.vue
diffstat 2 files changed, 21 insertions(+), 48 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/importoverview/AdditionalLog.vue	Tue Jun 25 08:58:35 2019 +0200
+++ b/client/src/components/importoverview/AdditionalLog.vue	Tue Jun 25 12:04:45 2019 +0200
@@ -5,7 +5,7 @@
       { split: showAdditional }
     ]"
   >
-    <virtual-list :size="20" :remain="8">
+    <virtual-list :size="scrollistConfig.size" :remain="scrollistConfig.remain">
       <Item
         class="d-flex flex-row px-2 border-top"
         v-for="item in details.entries"
@@ -13,45 +13,6 @@
         :line="item"
       />
     </virtual-list>
-    <!-- <div
-      class="d-flex flex-row px-2 border-top"
-      v-for="(line, index) in details.entries"
-      :key="index"
-    >
-      <span
-        :class="[
-          'kind',
-          {
-            'text-danger': /error/.test(line.kind),
-            'text-warning': /warn/.test(line.kind),
-            'font-weight-bold': /warn|error/.test(line.kind)
-          }
-        ]"
-        >{{ line.kind.toUpperCase() }}</span
-      >
-      <span
-        :class="[
-          'time',
-          {
-            'text-danger': /error/.test(line.kind),
-            'text-warning': /warn/.test(line.kind),
-            'font-weight-bold': /warn|error/.test(line.kind)
-          }
-        ]"
-        >{{ line.time | dateTime }}</span
-      >
-      <span
-        :class="[
-          'message',
-          {
-            'text-danger': /error/.test(line.kind),
-            'text-warning': /warn/.test(line.kind),
-            'font-weight-bold': /warn|error/.test(line.kind)
-          }
-        ]"
-        >{{ line.message }}</span
-      >
-    </div> -->
   </div>
 </template>
 
@@ -93,7 +54,19 @@
     Item: () => import("./LogItem.vue")
   },
   computed: {
-    ...mapState("imports", ["showAdditional", "details"])
+    ...mapState("imports", ["showAdditional", "details"]),
+    scrollistConfig() {
+      const smallLayout = {
+        size: 10,
+        remain: 20
+      };
+      const largeLayout = {
+        size: 12,
+        remain: 22
+      };
+      if (this.showAdditional) return smallLayout;
+      return largeLayout;
+    }
   }
 };
 </script>
--- a/client/src/components/importoverview/LogItem.vue	Tue Jun 25 08:58:35 2019 +0200
+++ b/client/src/components/importoverview/LogItem.vue	Tue Jun 25 12:04:45 2019 +0200
@@ -44,13 +44,13 @@
 </script>
 
 <style lang="sass" scoped>
-  .kind
-    width: 9%
+.kind
+  width: 9%
 
-  .time
-    width: 26%
+.time
+  width: 26%
 
-  .message
-    width: 65%
-    word-wrap: break-word
+.message
+  width: 65%
+  word-wrap: break-word
 </style>