diff options
author | Matthias <ilovemilk@wusa.io> | 2020-04-15 16:20:29 +0300 |
---|---|---|
committer | Matthias <ilovemilk@wusa.io> | 2020-04-15 16:20:29 +0300 |
commit | 3b515cf109bc8495789d05da1acffa179535eacc (patch) | |
tree | c5dc9b50bb77ab5b5b44fb88600f6c7d04f4395d /src | |
parent | e81db910b3b8201c55e88fea69a3d8220d2067f0 (diff) |
fix rendering and dynamic height of tables
Diffstat (limited to 'src')
-rw-r--r-- | src/components/FileOperationsTable.vue | 20 | ||||
-rw-r--r-- | src/views/History.vue | 6 | ||||
-rw-r--r-- | src/views/Recover.vue | 4 |
3 files changed, 12 insertions, 18 deletions
diff --git a/src/components/FileOperationsTable.vue b/src/components/FileOperationsTable.vue index e5e1af0..d8b3efb 100644 --- a/src/components/FileOperationsTable.vue +++ b/src/components/FileOperationsTable.vue @@ -1,10 +1,10 @@ <template> - <vaadin-grid theme="row-dividers" column-reordering-allowed multi-sort :items.prop="fileOperations"> + <vaadin-grid theme="row-dividers" height-by-rows column-reordering-allowed multi-sort :items.prop="fileOperations"> <vaadin-grid-selection-column auto-select frozen></vaadin-grid-selection-column> - <vaadin-grid-column width="5em" flex-grow="0" id="status" header="Status"></vaadin-grid-column> - <vaadin-grid-column width="9em" flex-grow="0" id="operation" header="" class="operation"></vaadin-grid-column> - <vaadin-grid-sort-column width="9em" path="originalName" header="Name"></vaadin-grid-sort-column> - <vaadin-grid-sort-column width="9em" path="timestamp" id="time" header="File changed"></vaadin-grid-sort-column> + <vaadin-grid-column width="5em" flex-grow="0" header="Status" ref="status"></vaadin-grid-column> + <vaadin-grid-column width="9em" flex-grow="0" ref="operation" header="" class="operation"></vaadin-grid-column> + <vaadin-grid-sort-column width="9em" path="originalName" header="Name" ref="name"></vaadin-grid-sort-column> + <vaadin-grid-sort-column width="9em" path="timestamp" ref="time" header="File changed"></vaadin-grid-sort-column> </vaadin-grid> </template> @@ -39,15 +39,11 @@ export default { handler (newVal, oldVal) { this.fileOperations = newVal; this.$emit('table-state-changed'); - if (oldVal !== undefined) { - document.querySelector('vaadin-grid').clearCache(); - document.querySelector('vaadin-grid vaadin-grid-selection-column').selectAll = false; - } } } }, mounted () { - document.querySelector('#status').renderer = (root, grid, rowData) => { + this.$refs.status.renderer = (root, grid, rowData) => { const icon = document.createElement('iron-icon'); if (rowData.item.suspicionClass > 1) { icon.setAttribute('icon', 'ransomware:locked'); @@ -73,7 +69,7 @@ export default { root.appendChild(icon); } - document.querySelector('#time').renderer = (root, grid, rowData) => { + this.$refs.time.renderer = (root, grid, rowData) => { const localTime = document.createElement('local-time'); localTime.setAttribute('datetime', moment.unix(rowData.item.timestamp).format("YYYY-MM-DDTHH:mm:ss.SSS")); localTime.textContent = moment.unix(rowData.item.timestamp).format('dddd, MMMM Do YYYY, HH:mm:ss'); @@ -81,7 +77,7 @@ export default { root.appendChild(localTime); } - document.querySelector('#operation').renderer = (root, grid, rowData) => { + this.$refs.operation.renderer = (root, grid, rowData) => { root.style = "color: #878787;" switch (rowData.item.command) { case 1: diff --git a/src/views/History.vue b/src/views/History.vue index 4fd9610..521b2b6 100644 --- a/src/views/History.vue +++ b/src/views/History.vue @@ -11,7 +11,7 @@ <Header header="History"> <RecoverAction id="recover" label="Recover selected files" v-on:recover="onRecover" primary></RecoverAction> </Header> - <FileOperationsTable id="ransomware-table" :data="fileOperations" v-on:table-state-changed="tableStateChanged"></FileOperationsTable> + <FileOperationsTable ref="ransomware-table" id="ransomware-table" :data="fileOperations" v-on:table-state-changed="tableStateChanged"></FileOperationsTable> </div> </iron-pages> </AppContent> @@ -95,8 +95,8 @@ export default { }, onRecover() { var itemsToRecover = []; - const items = document.querySelector('#ransomware-table').items; - const selected = document.querySelector('#ransomware-table').selectedItems; + const items = this.$refs.ransomware-table.items; + const selected = this.$refs.ransomware-table.selectedItems; for (var i = 0; i < selected.length; i++) { itemsToRecover.push(selected[i].id); } diff --git a/src/views/Recover.vue b/src/views/Recover.vue index 0c57bc4..9bb51c4 100644 --- a/src/views/Recover.vue +++ b/src/views/Recover.vue @@ -170,9 +170,7 @@ export default { <style lang="scss" scoped> #tables { - .ransomware-table { - //height: calc(100% - 50px); - } + height: calc(100% - 50px); } #recover { background-color: grey; |