Merge pull request #52 from fiahfy/develop

v0.8.3

package.json

@@ -1,7 +1,7 @@
 {
  "name": "hosty",
  "description": "Hosts file manager based on Electron",
- "version": "0.8.2",
+ "version": "0.8.3",
  "author": {
  "name": "fiahfy",
  "email": "[email protected]",
@@ -34,16 +34,16 @@
  "eslint": "^4.4.1",
  "eslint-config-standard": "^11.0.0",
  "eslint-plugin-import": "^2.7.0",
- "eslint-plugin-node": "^6.0.0",
- "eslint-plugin-promise": "^3.4.0",
+ "eslint-plugin-node": "^7.0.1",
+ "eslint-plugin-promise": "^4.0.0",
  "eslint-plugin-standard": "^3.0.1",
  "eslint-plugin-vue": "^4.2.2",
- "file-loader": "^1.1.5",
+ "file-loader": "^2.0.0",
  "html-webpack-plugin": "^3.2.0",
  "node-sass": "^4.9.0",
  "npm-run-all": "^4.0.2",
  "sass-loader": "^7.0.1",
- "style-loader": "^0.21.0",
+ "style-loader": "^0.22.1",
  "url-loader": "^1.0.1",
  "vue-loader": "^15.0.9",
  "vue-template-compiler": "^2.0.0",
@@ -70,7 +70,7 @@
  "build:renderer": "webpack --config webpack/config.renderer.babel.js",
  "dev": "cross-env HMR=1 run-p dev-server start:main",
  "dev-server": "webpack-dev-server --config webpack/config.renderer.dev.babel.js",
- "lint": "eslint src --ext .js,.vue",
+ "lint": "eslint -f codeframe --ext .js,.vue --ignore-path .gitignore .",
  "package": "build",
  "release": "cross-env NODE_ENV=production run-s build \"package -mw -p onTagOrDraft\"",
  "start": "run-s build:renderer start:main",

src/components/ExplorerCard.vue

@@ -2,8 +2,12 @@
  <v-card
  class="explorer-card"
  flat
+ tile
  >
- <v-card-title class="py-2 px-0">
+ <v-toolbar
+ color="transparent"
+ flat
+ >
  <v-btn
  :title="'New Group'|accelerator('CmdOrCtrl+N')"
  :disabled="!canCreateGroup"
@@ -25,14 +29,14 @@
  <v-spacer />
  <v-btn
  :color="color"
- title="Filter Active"
+ title="Filter Enabled"
  flat
  icon
  @click="onFilterClick"
  >
  <v-icon>filter_list</v-icon>
  </v-btn>
- </v-card-title>
+ </v-toolbar>
  </v-card>
 </template>
 
@@ -45,6 +49,7 @@ export default {
  return this.filtered ? 'primary' : ''
  },
  ...mapState('local/explorer', [
+ 'selectedGroupId',
  'filtered'
  ]),
  ...mapGetters('local/explorer', [
@@ -57,15 +62,15 @@ export default {
  this.createGroup()
  },
  onDeleteClick () {
- this.deleteGroup()
+ this.deleteGroup({ id: this.selectedGroupId })
  },
  onFilterClick () {
- this.toggleFilter()
+ this.toggleFiltered()
  },
  ...mapActions('local/explorer', [
  'createGroup',
  'deleteGroup',
- 'toggleFilter'
+ 'toggleFiltered'
  ])
  }
 }

src/components/ExplorerChildCard.vue

@@ -2,8 +2,12 @@
  <v-card
  class="explorer-child-card"
  flat
+ tile
  >
- <v-card-title class="py-2 px-0">
+ <v-toolbar
+ color="transparent"
+ flat
+ >
  <v-btn
  :title="'New Host'|accelerator('CmdOrCtrl+N')"
  :disabled="!canCreateHost"
@@ -25,14 +29,14 @@
  <v-spacer />
  <v-btn
  :color="color"
- title="Filter Active"
+ title="Filter Enabled"
  flat
  icon
  @click="onFilterClick"
  >
  <v-icon>filter_list</v-icon>
  </v-btn>
- </v-card-title>
+ </v-toolbar>
  </v-card>
 </template>
 
@@ -45,6 +49,7 @@ export default {
  return this.filtered ? 'primary' : ''
  },
  ...mapState('local/explorer/child', [
+ 'selectedHostId',
  'filtered'
  ]),
  ...mapGetters('local/explorer/child', [
@@ -57,15 +62,15 @@ export default {
  this.createHost()
  },
  onDeleteClick () {
- this.deleteHost()
+ this.deleteHost({ id: this.selectedHostId })
  },
  onFilterClick () {
- this.toggleFilter()
+ this.toggleFiltered()
  },
  ...mapActions('local/explorer/child', [
  'createHost',
  'deleteHost',
- 'toggleFilter'
+ 'toggleFiltered'
  ])
  }
 }

src/components/ExplorerChildTable.vue

@@ -5,29 +5,25 @@
  :items="hosts"
  class="explorer-child-table"
  item-key="id"
- no-data-text="No hosts"
+ :no-data-text="noDataText"
  hide-actions
  tabindex="0"
  @scroll="onScroll"
  @click.native="onClick"
  @keydown.native="onKeyDown"
  @contextmenu.native.stop="onContextMenu"
  >
- <template
+ <explorer-child-table-header-row
  slot="headers"
  slot-scope="props"
- >
- <explorer-child-table-header-row :headers="props.headers" />
- </template>
- <template
+ :headers="props.headers"
+ />
+ <explorer-child-table-row
  slot="items"
  slot-scope="props"
- >
- <explorer-child-table-row
- :ref="`row-${props.item.id}`"
- :host="props.item"
- />
- </template>
+ :ref="`row-${props.item.id}`"
+ :host="props.item"
+ />
  </sticky-data-table>
 </template>
 
@@ -64,12 +60,16 @@ export default {
  }
  },
  computed: {
+ noDataText () {
+ return this.selectedGroupId ? 'No hosts' : 'No groups selected'
+ },
  ...mapState('local/explorer/child', [
  'hosts',
  'selectedHostId',
  'scrollTop'
  ]),
  ...mapGetters('local/explorer/child', [
+ 'selectedGroupId',
  'selectedHostIndex',
  'canPasteHost'
  ])
@@ -84,17 +84,17 @@ export default {
  const rowHeight = 48
  const headerHeight = 58
  const el = {
- offsetTop: rowHeight * (index + 1),
+ offsetTop: rowHeight * index,
  offsetHeight: rowHeight
  }
  const table = {
  scrollTop: this.$refs.table.getScrollTop(),
- offsetHeight: this.$refs.table.getOffsetHeight()
+ offsetHeight: this.$refs.table.getOffsetHeight() - headerHeight
  }
- if (el.offsetTop - el.offsetHeight < table.scrollTop) {
- this.$refs.table.setScrollTop(el.offsetTop - el.offsetHeight)
- } else if (el.offsetTop + headerHeight > table.scrollTop + table.offsetHeight) {
- this.$refs.table.setScrollTop(el.offsetTop + headerHeight - table.offsetHeight)
+ if (table.scrollTop > el.offsetTop) {
+ this.$refs.table.setScrollTop(el.offsetTop)
+ } else if (table.scrollTop < el.offsetTop + el.offsetHeight - table.offsetHeight) {
+ this.$refs.table.setScrollTop(el.offsetTop + el.offsetHeight - table.offsetHeight)
  }
  })
  }
@@ -116,24 +116,20 @@ export default {
  switch (e.keyCode) {
  case 8:
  if ((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) {
- e.preventDefault()
- this.deleteHost()
+ this.deleteHost({ id: this.selectedHostId })
  }
  break
  case 13:
- e.preventDefault()
  this.focusSelectedRow()
  break
  case 38:
- e.preventDefault()
  if ((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) {
  this.selectFirstHost()
  } else {
  this.selectPreviousHost()
  }
  break
  case 40:
- e.preventDefault()
  if ((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) {
  this.selectLastHost()
  } else {
@@ -145,19 +141,16 @@ export default {
  break
  }
  if ((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) {
- e.preventDefault()
- this.copyHost()
+ this.copyHost({ id: this.selectedHostId })
  }
  break
  case 78:
  if ((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) {
- e.preventDefault()
  this.createHost()
  }
  break
  case 86:
  if ((e.ctrlKey && !e.metaKey) || (!e.ctrlKey && e.metaKey)) {
- e.preventDefault()
  this.pasteHost()
  }
  break
@@ -204,8 +197,5 @@ export default {
 <style scoped lang="scss">
 .explorer-child-table {
  outline: none;
- & /deep/ .v-datatable {
- table-layout: fixed;
- }
 }
 </style>

src/components/ExplorerChildTableRow.vue

@@ -11,7 +11,7 @@
  class="my-0"
  flat
  icon
- @click="onButtonClick"
+ @click.stop="onButtonClick"
  >
  <v-icon>check_circle</v-icon>
  </v-btn>
@@ -118,7 +118,7 @@ export default {
  return this.isSelectedHost({ id: this.host.id })
  },
  color () {
- return this.host.disabled ? 'grey' : 'success'
+ return this.host.disabled ? 'grey lighten-2' : 'success'
  },
  ipClasses () {
  return [
@@ -151,7 +151,7 @@ export default {
  },
  {
  label: 'Copy',
- click: () => this.copyHost(),
+ click: () => this.copyHost({ id: this.host.id }),
  accelerator: 'CmdOrCtrl+C'
  },
  {
@@ -168,15 +168,14 @@ export default {
  },
  {
  label: 'Delete',
- click: () => this.deleteHost(),
+ click: () => this.deleteHost({ id: this.host.id }),
  accelerator: 'CmdOrCtrl+Backspace'
  }
  ]
  ContextMenu.show(e, templates)
  },
  onButtonClick () {
- this.selectHost({ id: this.host.id })
- this.updateHost({ host: { disabled: !this.host.disabled } })
+ this.updateHost({ id: this.host.id, host: { disabled: !this.host.disabled } })
  },
  onColumnDblClick (e, value) {
  this.focus(value)
@@ -213,7 +212,7 @@ export default {
  if (this.cancel) {
  return
  }
- this.updateHost({ host: { [value]: this[value] } })
+ this.updateHost({ id: this.host.id, host: { [value]: this[value] } })
  },
  onTextContextMenu (e) {
  ContextMenu.showTextMenu(e)