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

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

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