itsscb/filebrowser
1
0
Fork 0
mirror of https://github.com/filebrowser/filebrowser.git synced 2025-05-08 19:22:57 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

Use v-for to create boxes in Search.vue (#21)

Browse Source 
`:key="k"` is required because of vuejs/vetur#261.
This commit is contained in:
1138-4EB 2018-07-29 20:07:49 +01:00 committed by Henrique Dias
parent 99ef1308ea
commit f5c48c9679
1 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/Search.vue
View File

@ -25,35 +25,13 @@
<h3>{{ $t('search.types') }}</h3> <h3>{{ $t('search.types') }}</h3>
<div> <div>
<div tabindex="0" <div tabindex="0"
v-for="(v,k) in boxes"
:key="k"
role="button" role="button"
@click="init('type:image')" @click="init('type:'+k)"
:aria-label="$t('search.images')"> :aria-label="$t('search.'+v.label)">
<i class="material-icons">insert_photo</i> <i class="material-icons">{{v.icon}}</i>
<p>{{ $t('search.images') }}</p> <p>{{ $t('search.'+v.label) }}</p>
</div>
<div tabindex="0"
role="button"
@click="init('type:audio')"
:aria-label="$t('search.music')">
<i class="material-icons">volume_up</i>
<p>{{ $t('search.music') }}</p>
</div>
<div tabindex="0"
role="button"
@click="init('type:video')"
:aria-label="$t('search.video')">
<i class="material-icons">movie</i>
<p>{{ $t('search.video') }}</p>
</div>
<div tabindex="0"
role="button"
@click="init('type:pdf')"
:aria-label="$t('search.pdf')">
<i class="material-icons">picture_as_pdf</i>
<p>{{ $t('search.pdf') }}</p>
</div> </div>
</div> </div>
</div> </div>
@ -61,7 +39,7 @@
</template> </template>
<ul v-else-if="search.length > 0"> <ul v-else-if="search.length > 0">
<li v-for="s in results"> <li v-for="(s,k) in results" :key="k">
<router-link @click.native="close" :to="'./' + s.path"> <router-link @click.native="close" :to="'./' + s.path">
<i v-if="s.dir" class="material-icons">folder</i> <i v-if="s.dir" class="material-icons">folder</i>
<i v-else class="material-icons">insert_drive_file</i> <i v-else class="material-icons">insert_drive_file</i>
@ -84,6 +62,13 @@ import { mapState } from 'vuex'
import url from '@/utils/url' import url from '@/utils/url'
import * as api from '@/utils/api' import * as api from '@/utils/api'
var boxes = {
image: { label: 'images', icon: 'insert_photo' },
audio: { label: 'music', icon: 'volume_up' },
video: { label: 'video', icon: 'movie' },
pdf: { label: 'pdf', icon: 'picture_as_pdf' }
}
export default { export default {
name: 'search', name: 'search',
data: function () { data: function () {
@ -95,7 +80,8 @@ export default {
search: [], search: [],
commands: [], commands: [],
reload: false, reload: false,
resultsCount: 50 resultsCount: 50,
boxes: boxes
} }
}, },
watch: { watch: {