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

Frontend: Disable tile view for simplicity

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2019-12-28 21:31:14 +01:00
parent e040af36e7
commit b3f8fb76bf
5 changed files with 33 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/component/p-album-toolbar.vue
View file

@ -32,20 +32,14 @@
<v-icon>refresh</v-icon>
</v-btn>
<v-btn icon v-if="settings.view === 'tiles'" @click.stop="setView('details')">
<v-icon>view_column</v-icon>
</v-btn>
<v-btn icon v-if="settings.view === 'details'" @click.stop="setView('list')">
<v-icon>view_list</v-icon>
</v-btn>
<v-btn icon v-if="settings.view === 'list'" @click.stop="setView('mosaic')">
<v-btn icon v-else-if="settings.view === 'list'" @click.stop="setView('mosaic')">
<v-icon>view_comfy</v-icon>
</v-btn>
<v-btn icon v-if="settings.view === 'mosaic'" @click.stop="setView('tiles')">
<v-icon>view_module</v-icon>
<v-btn icon v-else @click.stop="setView('details')">
<v-icon>view_column</v-icon>
</v-btn>
<v-btn icon @click.stop="searchExpanded = !searchExpanded" class="p-expand-search">
@ -138,7 +132,7 @@
searchExpanded: false,
options: {
'views': [
{value: 'tiles', text: this.$gettext('Tiles')},
// {value: 'tiles', text: this.$gettext('Tiles')},
{value: 'mosaic', text: this.$gettext('Mosaic')},
{value: 'details', text: this.$gettext('Details')},
{value: 'list', text: this.$gettext('List')},

2
frontend/src/component/p-photo-mosaic.vue
View file

@ -14,7 +14,7 @@
:key="index"
v-bind:class="{ selected: $clipboard.has(photo) }"
class="p-photo"
xs4 sm3 md2 lg1 d-flex
xs4 sm3 md2 xl1 d-flex
>
<v-hover>
<v-card tile slot-scope="{ hover }"

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

@ -21,20 +21,18 @@
<v-icon>refresh</v-icon>
</v-btn>
<v-btn icon v-if="settings.view === 'tiles'" @click.stop="setView('details')">
<!-- v-btn icon v-if="settings.view === 'tiles'" @click.stop="setView('details')">
<v-icon>view_column</v-icon>
</v-btn>
</v-btn -->
<v-btn icon v-if="settings.view === 'details'" @click.stop="setView('list')">
<v-icon>view_list</v-icon>
</v-btn>
<v-btn icon v-if="settings.view === 'list'" @click.stop="setView('mosaic')">
<v-btn icon v-else-if="settings.view === 'list'" @click.stop="setView('mosaic')">
<v-icon>view_comfy</v-icon>
</v-btn>
<v-btn icon v-if="settings.view === 'mosaic'" @click.stop="setView('tiles')">
<v-icon>view_module</v-icon>
<v-btn icon v-else @click.stop="setView('details')">
<v-icon>view_column</v-icon>
</v-btn>
<v-btn icon @click.stop="searchExpanded = !searchExpanded" class="p-expand-search">
@ -164,7 +162,7 @@
searchExpanded: false,
options: {
'views': [
{value: 'tiles', text: this.$gettext('Tiles')},
// {value: 'tiles', text: this.$gettext('Tiles')},
{value: 'mosaic', text: this.$gettext('Mosaic')},
{value: 'details', text: this.$gettext('Details')},
{value: 'list', text: this.$gettext('List')},

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

@ -22,15 +22,15 @@
:selection="selection"
:open-photo="openPhoto"
:open-location="openLocation"></p-photo-list>
<p-photo-details v-else-if="settings.view === 'details'"
<p-photo-details v-else
:photos="results"
:selection="selection"
:open-photo="openPhoto"
:open-location="openLocation"></p-photo-details>
<p-photo-tiles v-else
<!-- p-photo-tiles v-else
:photos="results"
:selection="selection"
:open-photo="openPhoto"></p-photo-tiles>
:open-photo="openPhoto"></p-photo-tiles -->
</v-container>
</div>
</template>
@ -96,11 +96,9 @@
return storedType;
} else if (window.innerWidth < 960) {
return 'mosaic';
} else if (window.innerWidth > 1600) {
return 'details';
}
return 'tiles';
return 'details';
},
openLocation(index) {
const photo = this.results[index];

46
frontend/tests/acceptance/views.js
View file

@ -12,17 +12,8 @@ test('Open photo in fullscreen', async t => {
.click(Selector('div.v-image__image').nth(0))
.expect(Selector('#p-photo-viewer').visible).ok()
.expect(Selector('img.pswp__img').visible).ok();
}),
test('Open details view via button', async t => {
await t
.click('button.p-expand-search')
.click(Selector('i').withText('view_column'))
.expect(Selector('div.v-image__image').visible).ok()
.expect(Selector('div.caption').visible).ok()
.expect(Selector('#p-photo-viewer').visible).notOk()
.expect(Selector('i').withText('view_column').exists).notOk()
.expect(Selector('i').withText('view_list').visible).ok()
}),
});
test('Open mosaic view via select', async t => {
await t
.click('button.p-expand-search');
@ -30,28 +21,27 @@ test('Open mosaic view via select', async t => {
await t
.expect(Selector('div.v-image__image').visible).ok()
.expect(Selector('div.p-photo-mosaic').visible).ok()
.expect(Selector('div.caption').exists).notOk()
.expect(Selector('div.p-photo div.caption').exists).notOk()
.expect(Selector('#p-photo-viewer').visible).notOk();
}),
});
test('Open list view via select', async t => {
await t
.click('button.p-expand-search');
await page.setFilter('view', 'List');
await t
.expect(Selector('table.v-datatable').visible).ok()
.expect(Selector('div.v-image__image').exists).notOk()
.expect(Selector('div.p-photos div.v-image').exists).notOk()
.expect(Selector('div.p-photo-list').visible).ok();
}),
test('Open tile view via select', async t => {
await t
.click('button.p-expand-search');
await page.setFilter('view', 'List');
await t
.expect(Selector('div.p-photo-list').visible).ok();
await page.setFilter('view', 'Tile');
await t
.expect(Selector('div.v-image__image').visible).ok()
.expect(Selector('div.p-photo-tiles').visible).ok()
.expect(Selector('div.caption').exists).notOk()
.expect(Selector('#p-photo-viewer').visible).notOk();
});
});
test('Open details view via select', async t => {
await t
.click('button.p-expand-search');
await page.setFilter('view', 'Details');
await t
.expect(Selector('div.v-image__image').visible).ok()
.expect(Selector('div.p-photo-details').visible).ok()
.expect(Selector('div.p-photo div.caption').visible).ok()
.expect(Selector('#p-photo-viewer').visible).notOk();
});