luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend: Add refresh button and automatically close search details on small devices

Browse source
This commit is contained in:
Michael Mayer 2019-06-15 14:37:29 -07:00
parent 3ee3946011
commit 9387b8e3e8
2 changed files with 27 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/component/p-photo-search.vue
View file

@ -16,7 +16,11 @@
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn icon @click="searchExpanded = !searchExpanded" id="advancedMenu"> <v-btn icon @click.stop="refresh">
<v-icon>refresh</v-icon>
</v-btn>
<v-btn icon @click.stop="searchExpanded = !searchExpanded" id="advancedMenu">
<v-icon>{{ searchExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon> <v-icon>{{ searchExpanded ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</v-icon>
</v-btn> </v-btn>
</v-toolbar> </v-toolbar>
@ -28,7 +32,7 @@
<v-card-text> <v-card-text>
<v-layout row wrap> <v-layout row wrap>
<v-flex xs12 sm6 md3 pa-2 id="countriesFlex"> <v-flex xs12 sm6 md3 pa-2 id="countriesFlex">
<v-select @change="filterChange" <v-select @change="dropdownChange"
label="Country" label="Country"
flat solo hide-details flat solo hide-details
color="blue-grey" color="blue-grey"
@ -39,7 +43,7 @@
</v-select> </v-select>
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 pa-2 id="cameraFlex"> <v-flex xs12 sm6 md3 pa-2 id="cameraFlex">
<v-select @change="filterChange" <v-select @change="dropdownChange"
label="Camera" label="Camera"
flat solo hide-details flat solo hide-details
color="blue-grey" color="blue-grey"
@ -50,7 +54,7 @@
</v-select> </v-select>
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 pa-2 id="viewFlex"> <v-flex xs12 sm6 md3 pa-2 id="viewFlex">
<v-select @change="settingsChange" <v-select @change="dropdownChange"
label="View" label="View"
flat solo hide-details flat solo hide-details
color="blue-grey" color="blue-grey"
@ -60,7 +64,7 @@
</v-select> </v-select>
</v-flex> </v-flex>
<v-flex xs12 sm6 md3 pa-2 id="timeFlex"> <v-flex xs12 sm6 md3 pa-2 id="timeFlex">
<v-select @change="filterChange" <v-select @change="dropdownChange"
label="Sort By" label="Sort By"
flat solo hide-details flat solo hide-details
color="blue-grey" color="blue-grey"
@ -79,8 +83,8 @@
props: { props: {
filter: Object, filter: Object,
settings: Object, settings: Object,
refresh: Function,
filterChange: Function, filterChange: Function,
settingsChange: Function,
}, },
data() { data() {
const cameras = [{ID: 0, CameraModel: 'All Cameras'}].concat(this.$config.getValue('cameras')); const cameras = [{ID: 0, CameraModel: 'All Cameras'}].concat(this.$config.getValue('cameras'));
@ -109,6 +113,13 @@
}; };
}, },
methods: { methods: {
dropdownChange() {
this.filterChange();
if (window.innerWidth < 600) {
this.searchExpanded = false;
}
},
clearQuery() { clearQuery() {
this.filter.q = ''; this.filter.q = '';
this.filterChange(); this.filterChange();

16
frontend/src/pages/photos.vue
View file

@ -3,7 +3,7 @@
:infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'"> :infinite-scroll-distance="10" :infinite-scroll-listen-for-event="'scrollRefresh'">
<p-photo-search :settings="settings" :filter="filter" :filter-change="updateQuery" <p-photo-search :settings="settings" :filter="filter" :filter-change="updateQuery"
:settings-change="updateQuery"></p-photo-search> :refresh="refresh"></p-photo-search>
<v-container fluid> <v-container fluid>
<p-photo-clipboard :refresh="refresh" :selection="selection"></p-photo-clipboard> <p-photo-clipboard :refresh="refresh" :selection="selection"></p-photo-clipboard>
@ -28,7 +28,7 @@
staticFilter: Object staticFilter: Object
}, },
watch: { watch: {
'$route' () { '$route'() {
const query = this.$route.query; const query = this.$route.query;
this.filter.q = query['q']; this.filter.q = query['q'];
@ -67,14 +67,14 @@
let queryParam = this.$route.query['view']; let queryParam = this.$route.query['view'];
let storedType = window.localStorage.getItem("photo_view_type"); let storedType = window.localStorage.getItem("photo_view_type");
if(queryParam) { if (queryParam) {
window.localStorage.setItem("photo_view_type", queryParam); window.localStorage.setItem("photo_view_type", queryParam);
return queryParam; return queryParam;
} else if(storedType) { } else if (storedType) {
return storedType; return storedType;
} else if(window.innerWidth < 960) { } else if (window.innerWidth < 960) {
return 'mosaic'; return 'mosaic';
} else if(window.innerWidth > 1600) { } else if (window.innerWidth > 1600) {
return 'details'; return 'details';
} }
@ -153,7 +153,11 @@
}, },
refresh() { refresh() {
this.lastFilter = {}; this.lastFilter = {};
const pageSize = this.pageSize;
this.pageSize = this.offset + pageSize;
this.search(); this.search();
this.offset = this.pageSize;
this.pageSize = pageSize;
}, },
search() { search() {
this.scrollDisabled = true; this.scrollDisabled = true;