mirror of
https://github.com/Lissy93/dashy.git
synced 2024-09-11 14:17:02 +03:00
Can tab over tiles
This commit is contained in:
parent
5e56e0c3c7
commit
7ffc35afb6
@ -5,6 +5,7 @@
|
||||
<input
|
||||
id="filter-tiles"
|
||||
v-model="input"
|
||||
ref="filter"
|
||||
placeholder="Start typing to filter tiles..."
|
||||
v-on:input="userIsTypingSomething"
|
||||
@keydown.esc="clearFilterInput" />
|
||||
@ -31,11 +32,21 @@ export default {
|
||||
this.$emit('user-is-searchin', this.input)
|
||||
},
|
||||
clearFilterInput () {
|
||||
console.log('Esc key pressed')
|
||||
this.input = ''
|
||||
this.userIsTypingSomething()
|
||||
document.activeElement.blur()
|
||||
},
|
||||
},
|
||||
mounted: function() {
|
||||
window.addEventListener('keyup', (event) => {
|
||||
const key = event.key
|
||||
if(/^[a-zA-Z]$/.test(key) && !document.activeElement.id) {
|
||||
this.input += key
|
||||
this.$refs.filter.focus()
|
||||
this.userIsTypingSomething()
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<el-tooltip placement="bottom" effect="dark" :content="description" :disabled="!description">
|
||||
<div class="item">
|
||||
<div class="tile-title" :id="`tile-${id}`">
|
||||
<span class="text">{{ title }}</span>
|
||||
<div class="overflow-dots">...</div>
|
||||
</div>
|
||||
<img
|
||||
v-if="icon"
|
||||
:src="`/img/tile-icons/${icon}.png`"
|
||||
class="tile-icon"
|
||||
/>
|
||||
<div class="item" tabindex="0">
|
||||
<div class="tile-title" :id="`tile-${id}`">
|
||||
<span class="text">{{ title }}</span>
|
||||
<div class="overflow-dots">...</div>
|
||||
</div>
|
||||
<img
|
||||
v-if="icon"
|
||||
:src="`/img/tile-icons/${icon}.png`"
|
||||
class="tile-icon"
|
||||
/>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
@ -64,7 +64,8 @@ export default {
|
||||
margin: 8px;
|
||||
background: #607d8b33;
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
padding: 2px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 10px;
|
||||
box-shadow: 1px 1px 2px #373737;
|
||||
cursor: pointer;
|
||||
@ -72,6 +73,10 @@ export default {
|
||||
box-shadow: 1px 2px 4px #373737;
|
||||
background: #607d8b4d;
|
||||
}
|
||||
&:focus {
|
||||
border: 2px solid #1CA8DD;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
.tile-title {
|
||||
white-space: nowrap;
|
||||
|
@ -24,6 +24,10 @@ import * as linkData from './../data/item-data.json'
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
props: {
|
||||
title: { default: 'Panel', type: String },
|
||||
subtitle: { default: 'All your server management tools in one place', type: String }
|
||||
},
|
||||
components: {
|
||||
Header,
|
||||
FilterTile,
|
||||
@ -39,18 +43,19 @@ export default {
|
||||
searching (searchTile) {
|
||||
this.searchTile = searchTile
|
||||
},
|
||||
getDomainFromUrl (url) {
|
||||
var urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d\.-]+)\.(?:[a-z\.]{2,10})(?:[/\w\.-]*)*/;
|
||||
var domainPattern = url.match(urlPattern);
|
||||
return domainPattern? domainPattern[1] : ''
|
||||
},
|
||||
filterTiles (allTiles) {
|
||||
return allTiles.filter(tile => {
|
||||
const searchTerm = this.searchTile.toLowerCase()
|
||||
return tile.title.toLowerCase().includes(searchTerm) ||
|
||||
tile.description.toLowerCase().includes(searchTerm) ||
|
||||
tile.url.toLowerCase().includes(searchTerm)
|
||||
tile.provider.toLowerCase().includes(searchTerm) ||
|
||||
this.getDomainFromUrl(tile.url).includes(searchTerm)
|
||||
})
|
||||
}
|
||||
},
|
||||
props: {
|
||||
title: { default: 'Panel', type: String },
|
||||
subtitle: { default: 'All your server management tools in one place', type: String }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
Loading…
Reference in New Issue
Block a user