RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Switch to material icons

pull/62/head
Varun Patil 2022-09-15 20:17:40 -07:00
parent baaf64e589
commit b0ff20336a
8 changed files with 100 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
e2e/folders.spec.ts
View File

@ -5,7 +5,7 @@ test.beforeEach(login('/folders'));
test.describe('Open', () => { test.describe('Open', () => {
test('Look for Folders', async ({ page }) => { test('Look for Folders', async ({ page }) => {
expect(await page.locator('.big-icon > .icon-folder').count(), 'Number of folders').toBe(2); expect(await page.locator('.big-icon > .folder-icon').count(), 'Number of folders').toBe(2);
}); });
test('Open folder', async ({ page }) => { test('Open folder', async ({ page }) => {

2
e2e/timeline.spec.ts
View File

@ -25,7 +25,7 @@ test.describe('Open', () => {
expect(await page.locator(`img[src="${src1}"]`).count()).toBe(1); expect(await page.locator(`img[src="${src1}"]`).count()).toBe(1);
expect(await page.locator(`img[src="${src2}"]`).count()).toBe(1); expect(await page.locator(`img[src="${src2}"]`).count()).toBe(1);
await page.locator(`${i1} > .icon-checkmark`).click(); await page.locator(`${i1} > .check-icon`).click();
await page.locator(`${i2}`).click(); await page.locator(`${i2}`).click();
await page.waitForTimeout(1000); await page.waitForTimeout(1000);

1
package-lock.json generated
View File

@ -16,6 +16,7 @@
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"vue": "^2.7.10", "vue": "^2.7.10",
"vue-class-component": "^7.2.6", "vue-class-component": "^7.2.6",
"vue-material-design-icons": "^5.1.2",
"vue-property-decorator": "^9.1.2", "vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.4", "vue-router": "^3.5.4",
"vue-virtual-scroller": "^1.0.10", "vue-virtual-scroller": "^1.0.10",

1
package.json
View File

@ -40,6 +40,7 @@
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"vue": "^2.7.10", "vue": "^2.7.10",
"vue-class-component": "^7.2.6", "vue-class-component": "^7.2.6",
"vue-material-design-icons": "^5.1.2",
"vue-property-decorator": "^9.1.2", "vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.4", "vue-router": "^3.5.4",
"vue-virtual-scroller": "^1.0.10", "vue-virtual-scroller": "^1.0.10",

24
src/App.vue
View File

@ -4,20 +4,20 @@
<template id="app-memories-navigation" #list> <template id="app-memories-navigation" #list>
<NcAppNavigationItem :to="{name: 'timeline'}" <NcAppNavigationItem :to="{name: 'timeline'}"
:title="t('timeline', 'Timeline')" :title="t('timeline', 'Timeline')"
icon="icon-yourmemories"
exact> exact>
<ImageMultiple slot="icon" :size="20" />
</NcAppNavigationItem> </NcAppNavigationItem>
<NcAppNavigationItem :to="{name: 'folders'}" <NcAppNavigationItem :to="{name: 'folders'}"
:title="t('folders', 'Folders')" :title="t('folders', 'Folders')">
icon="icon-files-dark"> <FolderIcon slot="icon" :size="20" />
</NcAppNavigationItem> </NcAppNavigationItem>
<NcAppNavigationItem :to="{name: 'favorites'}" <NcAppNavigationItem :to="{name: 'favorites'}"
:title="t('favorites', 'Favorites')" :title="t('favorites', 'Favorites')">
icon="icon-favorite"> <Star slot="icon" :size="20" />
</NcAppNavigationItem> </NcAppNavigationItem>
<NcAppNavigationItem :to="{name: 'videos'}" <NcAppNavigationItem :to="{name: 'videos'}"
:title="t('videos', 'Videos')" :title="t('videos', 'Videos')">
icon="icon-video"> <Video slot="icon" :size="20" />
</NcAppNavigationItem> </NcAppNavigationItem>
</template> </template>
<template #footer> <template #footer>
@ -61,6 +61,11 @@ import Timeline from './components/Timeline.vue'
import Settings from './components/Settings.vue' import Settings from './components/Settings.vue'
import GlobalMixin from './mixins/GlobalMixin'; import GlobalMixin from './mixins/GlobalMixin';
import ImageMultiple from 'vue-material-design-icons/ImageMultiple.vue'
import FolderIcon from 'vue-material-design-icons/Folder.vue'
import Star from 'vue-material-design-icons/Star.vue'
import Video from 'vue-material-design-icons/Video.vue'
@Component({ @Component({
components: { components: {
NcContent, NcContent,
@ -71,6 +76,11 @@ import GlobalMixin from './mixins/GlobalMixin';
Timeline, Timeline,
Settings, Settings,
ImageMultiple,
FolderIcon,
Star,
Video,
}, },
}) })
export default class App extends Mixins(GlobalMixin) { export default class App extends Mixins(GlobalMixin) {

30
src/components/Folder.vue
View File

@ -9,10 +9,10 @@
height: rowHeight + 'px', height: rowHeight + 'px',
}"> }">
<div class="big-icon"> <div class="big-icon">
<div class="icon-folder" v-bind:class="{ <FolderIcon class="memories__big-folder-icon" v-bind:class="{
'icon-dark': previewFileInfos.length === 0, 'icon-dark': previewFileInfos.length === 0,
'icon-white': previewFileInfos.length > 0, 'icon-white': previewFileInfos.length > 0,
}"></div> }" />
<div class="name">{{ data.name }}</div> <div class="name">{{ data.name }}</div>
</div> </div>
@ -40,7 +40,13 @@ import GlobalMixin from '../mixins/GlobalMixin';
import * as dav from "../services/DavRequests"; import * as dav from "../services/DavRequests";
import { getPreviewUrl } from "../services/FileUtils"; import { getPreviewUrl } from "../services/FileUtils";
@Component({}) import FolderIcon from 'vue-material-design-icons/Folder.vue';
@Component({
components: {
FolderIcon,
},
})
export default class Folder extends Mixins(GlobalMixin) { export default class Folder extends Mixins(GlobalMixin) {
@Prop() data: IFolder; @Prop() data: IFolder;
@Prop() rowHeight: number; @Prop() rowHeight: number;
@ -90,6 +96,13 @@ export default class Folder extends Mixins(GlobalMixin) {
} }
</script> </script>
<style lang="scss">
/* This cannot be scoped for some reason */
.memories__big-folder-icon > .material-design-icon__svg {
width: 50%; height: 50%;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.folder { .folder {
cursor: pointer; cursor: pointer;
@ -113,20 +126,21 @@ export default class Folder extends Mixins(GlobalMixin) {
text-overflow: ellipsis; text-overflow: ellipsis;
max-height: 35%; max-height: 35%;
line-height: 1em; line-height: 1em;
position: absolute;
top: 65%;
} }
.folder.hasPreview > & { .folder.hasPreview > & {
.icon-folder { opacity: 1; } .folder-icon { opacity: 1; }
.name { color: white; } .name { color: white; }
} }
.folder.hasPreview:hover > & { opacity: 0; } .folder.hasPreview:hover > & { opacity: 0; }
> .icon-folder { > .folder-icon {
cursor: pointer; cursor: pointer;
height: 65%; width: 100%; height: 90%; width: 100%;
opacity: 0.3; opacity: 0.3;
background-size: 40%; filter: invert(1) brightness(100);
background-position: bottom;
} }
} }

45
src/components/Photo.vue
View File

@ -8,12 +8,12 @@
'enter-right': (data.flag & c.FLAG_ENTER_RIGHT), 'enter-right': (data.flag & c.FLAG_ENTER_RIGHT),
}"> }">
<div class="icon-checkmark select" <Check :size="15" class="select"
v-if="!(data.flag & c.FLAG_PLACEHOLDER)" v-if="!(data.flag & c.FLAG_PLACEHOLDER)"
@click="toggleSelect"></div> @click="toggleSelect" />
<div v-if="data.flag & c.FLAG_IS_VIDEO" class="icon-video-white"></div> <Video :size="20" v-if="data.flag & c.FLAG_IS_VIDEO" />
<div v-if="data.flag & c.FLAG_IS_FAVORITE" class="icon-starred"></div> <Star :size="20" v-if="data.flag & c.FLAG_IS_FAVORITE" />
<div class="img-outer" :style="{ <div class="img-outer" :style="{
width: rowHeight + 'px', width: rowHeight + 'px',
@ -45,7 +45,17 @@ import * as dav from "../services/DavRequests";
import errorsvg from "../assets/error.svg"; import errorsvg from "../assets/error.svg";
import GlobalMixin from '../mixins/GlobalMixin'; import GlobalMixin from '../mixins/GlobalMixin';
@Component({}) import Check from 'vue-material-design-icons/Check.vue';
import Video from 'vue-material-design-icons/Video.vue';
import Star from 'vue-material-design-icons/Star.vue';
@Component({
components: {
Check,
Video,
Star,
},
})
export default class Photo extends Mixins(GlobalMixin) { export default class Photo extends Mixins(GlobalMixin) {
private touchTimer = 0; private touchTimer = 0;
@ -240,30 +250,29 @@ export default class Photo extends Mixins(GlobalMixin) {
} }
/* Extra icons */ /* Extra icons */
.icon-checkmark { .check-icon.select {
position: absolute; position: absolute;
top: 5%; left: 5%; top: 6%; left: 6%;
z-index: 100; z-index: 100;
background-color: var(--color-main-background); background-color: var(--color-main-background);
border-radius: 50%; border-radius: 50%;
background-size: 80%;
padding: 5px;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
.p-outer:hover > & { opacity: 0.7; } .p-outer:hover > & { opacity: 0.9; }
.selected > & { opacity: 0.9; filter: invert(1); } .selected > & { opacity: 0.9; filter: invert(1); }
} }
.icon-video-white { .video-icon, .star-icon {
position: absolute; position: absolute;
top: 5%; right: 5%;
z-index: 100;
}
.icon-starred {
position: absolute;
bottom: 5%; left: 5%;
z-index: 100; z-index: 100;
pointer-events: none; pointer-events: none;
filter: invert(1) brightness(100);
}
.video-icon {
top: 6%; right: 6%;
}
.star-icon {
bottom: 6%; left: 6%;
} }
/* Actual image */ /* Actual image */
@ -274,7 +283,7 @@ div.img-outer {
background-clip: content-box, padding-box; background-clip: content-box, padding-box;
background-color: var(--color-loading-light); background-color: var(--color-loading-light);
.selected > & { padding: 6%; } .selected > & { padding: 5%; }
> img { > img {
background-clip: content-box; background-clip: content-box;

55
src/components/Timeline.vue
View File

@ -20,9 +20,8 @@
'selected': item.selected, 'selected': item.selected,
}" }"
> >
<div class="icon-checkmark select" <CheckCircle :size="18" class="select" @click="selectHead(item)" />
@click="selectHead(item)">
</div>
<span class="name" <span class="name"
@click="selectHead(item)"> @click="selectHead(item)">
{{ item.name || getHeadName(item) }} {{ item.name || getHeadName(item) }}
@ -76,9 +75,9 @@
<NcActions> <NcActions>
<NcActionButton <NcActionButton
:aria-label="t('memories', 'Cancel selection')" :aria-label="t('memories', 'Cancel selection')"
@click="clearSelection()" @click="clearSelection()">
class="icon-close">
{{ t('memories', 'Cancel') }} {{ t('memories', 'Cancel') }}
<template #icon> <Close :size="20" /> </template>
</NcActionButton> </NcActionButton>
</NcActions> </NcActions>
@ -88,26 +87,24 @@
<NcActions> <NcActions>
<NcActionButton <NcActionButton
:aria-label="t('memories', 'Download selection')" :aria-label="t('memories', 'Delete selection')"
@click="downloadSelection" @click="deleteSelection">
class="icon-download"> {{ t('memories', 'Delete') }}
{{ t('memories', 'Download') }} <template #icon> <Delete :size="20" /> </template>
</NcActionButton> </NcActionButton>
</NcActions> </NcActions>
<NcActions> <NcActions>
<NcActionButton <NcActionButton
:aria-label="t('memories', 'Delete selection')" :aria-label="t('memories', 'Download selection')"
@click="deleteSelection" @click="downloadSelection">
class="icon-delete"> {{ t('memories', 'Download') }}
{{ t('memories', 'Delete') }} <template #icon> <Download :size="20" /> </template>
</NcActionButton> </NcActionButton>
</NcActions>
<NcActions>
<NcActionButton <NcActionButton
:aria-label="t('memories', 'Toggle Favorite')" :aria-label="t('memories', 'Toggle Favorite')"
@click="favoriteSelection" @click="favoriteSelection">
class="icon-favorite">
{{ t('memories', 'Toggle Favorite') }} {{ t('memories', 'Toggle Favorite') }}
<template #icon> <Star :size="20" /> </template>
</NcActionButton> </NcActionButton>
</NcActions> </NcActions>
</div> </div>
@ -130,6 +127,12 @@ import axios from '@nextcloud/axios'
import Folder from "./Folder.vue"; import Folder from "./Folder.vue";
import Photo from "./Photo.vue"; import Photo from "./Photo.vue";
import Star from 'vue-material-design-icons/Star.vue';
import Download from 'vue-material-design-icons/Download.vue';
import Delete from 'vue-material-design-icons/Delete.vue';
import Close from 'vue-material-design-icons/Close.vue';
import CheckCircle from 'vue-material-design-icons/CheckCircle.vue';
const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling const SCROLL_LOAD_DELAY = 100; // Delay in loading data when scrolling
const MAX_PHOTO_WIDTH = 175; // Max width of a photo const MAX_PHOTO_WIDTH = 175; // Max width of a photo
const MIN_COLS = 3; // Min number of columns (on phone, e.g.) const MIN_COLS = 3; // Min number of columns (on phone, e.g.)
@ -152,7 +155,13 @@ for (const [key, value] of Object.entries(API_ROUTES)) {
Photo, Photo,
NcActions, NcActions,
NcActionButton, NcActionButton,
NcButton NcButton,
Star,
Download,
Delete,
Close,
CheckCircle,
} }
}) })
export default class Timeline extends Mixins(GlobalMixin) { export default class Timeline extends Mixins(GlobalMixin) {
@ -1121,11 +1130,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
opacity: 0; opacity: 0;
transform: translateY(-30%); transform: translateY(-30%);
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
background-color: var(--color-background-darker);
border-radius: 50%; border-radius: 50%;
height: 12px; width: 12px;
background-size: 70%;
padding: 5px;
cursor: pointer; cursor: pointer;
} }
> .name { > .name {
@ -1135,15 +1140,15 @@ export default class Timeline extends Mixins(GlobalMixin) {
.hover &, &.selected { .hover &, &.selected {
> .select { > .select {
display: inline-block; display: flex;
opacity: 1; opacity: 0.5;
} }
> .name { > .name {
margin-left: 25px; margin-left: 25px;
} }
} }
&.selected > .select { &.selected > .select {
filter: invert(1); opacity: 1;
} }
} }