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('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 }) => {

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="${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.waitForTimeout(1000);

1
package-lock.json generated
View File

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

1
package.json
View File

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

24
src/App.vue
View File

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

30
src/components/Folder.vue
View File

@ -9,10 +9,10 @@
height: rowHeight + 'px',
}">
<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-white': previewFileInfos.length > 0,
}"></div>
}" />
<div class="name">{{ data.name }}</div>
</div>
@ -40,7 +40,13 @@ import GlobalMixin from '../mixins/GlobalMixin';
import * as dav from "../services/DavRequests";
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) {
@Prop() data: IFolder;
@Prop() rowHeight: number;
@ -90,6 +96,13 @@ export default class Folder extends Mixins(GlobalMixin) {
}
</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>
.folder {
cursor: pointer;
@ -113,20 +126,21 @@ export default class Folder extends Mixins(GlobalMixin) {
text-overflow: ellipsis;
max-height: 35%;
line-height: 1em;
position: absolute;
top: 65%;
}
.folder.hasPreview > & {
.icon-folder { opacity: 1; }
.folder-icon { opacity: 1; }
.name { color: white; }
}
.folder.hasPreview:hover > & { opacity: 0; }
> .icon-folder {
> .folder-icon {
cursor: pointer;
height: 65%; width: 100%;
height: 90%; width: 100%;
opacity: 0.3;
background-size: 40%;
background-position: bottom;
filter: invert(1) brightness(100);
}
}

45
src/components/Photo.vue
View File

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

55
src/components/Timeline.vue
View File

@ -20,9 +20,8 @@
'selected': item.selected,
}"
>
<div class="icon-checkmark select"
@click="selectHead(item)">
</div>
<CheckCircle :size="18" class="select" @click="selectHead(item)" />
<span class="name"
@click="selectHead(item)">
{{ item.name || getHeadName(item) }}
@ -76,9 +75,9 @@
<NcActions>
<NcActionButton
:aria-label="t('memories', 'Cancel selection')"
@click="clearSelection()"
class="icon-close">
@click="clearSelection()">
{{ t('memories', 'Cancel') }}
<template #icon> <Close :size="20" /> </template>
</NcActionButton>
</NcActions>
@ -88,26 +87,24 @@
<NcActions>
<NcActionButton
:aria-label="t('memories', 'Download selection')"
@click="downloadSelection"
class="icon-download">
{{ t('memories', 'Download') }}
:aria-label="t('memories', 'Delete selection')"
@click="deleteSelection">
{{ t('memories', 'Delete') }}
<template #icon> <Delete :size="20" /> </template>
</NcActionButton>
</NcActions>
<NcActions>
<NcActionButton
:aria-label="t('memories', 'Delete selection')"
@click="deleteSelection"
class="icon-delete">
{{ t('memories', 'Delete') }}
:aria-label="t('memories', 'Download selection')"
@click="downloadSelection">
{{ t('memories', 'Download') }}
<template #icon> <Download :size="20" /> </template>
</NcActionButton>
</NcActions>
<NcActions>
<NcActionButton
:aria-label="t('memories', 'Toggle Favorite')"
@click="favoriteSelection"
class="icon-favorite">
@click="favoriteSelection">
{{ t('memories', 'Toggle Favorite') }}
<template #icon> <Star :size="20" /> </template>
</NcActionButton>
</NcActions>
</div>
@ -130,6 +127,12 @@ import axios from '@nextcloud/axios'
import Folder from "./Folder.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 MAX_PHOTO_WIDTH = 175; // Max width of a photo
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,
NcActions,
NcActionButton,
NcButton
NcButton,
Star,
Download,
Delete,
Close,
CheckCircle,
}
})
export default class Timeline extends Mixins(GlobalMixin) {
@ -1121,11 +1130,7 @@ export default class Timeline extends Mixins(GlobalMixin) {
opacity: 0;
transform: translateY(-30%);
transition: opacity 0.2s ease;
background-color: var(--color-background-darker);
border-radius: 50%;
height: 12px; width: 12px;
background-size: 70%;
padding: 5px;
cursor: pointer;
}
> .name {
@ -1135,15 +1140,15 @@ export default class Timeline extends Mixins(GlobalMixin) {
.hover &, &.selected {
> .select {
display: inline-block;
opacity: 1;
display: flex;
opacity: 0.5;
}
> .name {
margin-left: 25px;
}
}
&.selected > .select {
filter: invert(1);
opacity: 1;
}
}