Mercurial > gemma
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>