2022-08-14 20:54:18 +00:00
|
|
|
<template>
|
2022-09-09 07:31:42 +00:00
|
|
|
<NcContent app-name="memories">
|
|
|
|
<NcAppNavigation>
|
|
|
|
<template id="app-memories-navigation" #list>
|
|
|
|
<NcAppNavigationItem :to="{name: 'timeline'}"
|
2022-09-16 23:26:29 +00:00
|
|
|
:title="t('memories', 'Timeline')"
|
2022-09-09 07:31:42 +00:00
|
|
|
exact>
|
2022-09-16 03:17:40 +00:00
|
|
|
<ImageMultiple slot="icon" :size="20" />
|
2022-09-09 07:31:42 +00:00
|
|
|
</NcAppNavigationItem>
|
|
|
|
<NcAppNavigationItem :to="{name: 'folders'}"
|
2022-09-16 23:26:29 +00:00
|
|
|
:title="t('memories', 'Folders')">
|
2022-09-16 03:17:40 +00:00
|
|
|
<FolderIcon slot="icon" :size="20" />
|
2022-09-09 07:31:42 +00:00
|
|
|
</NcAppNavigationItem>
|
2022-09-12 02:21:20 +00:00
|
|
|
<NcAppNavigationItem :to="{name: 'favorites'}"
|
2022-09-16 23:26:29 +00:00
|
|
|
:title="t('memories', 'Favorites')">
|
2022-09-16 03:17:40 +00:00
|
|
|
<Star slot="icon" :size="20" />
|
2022-09-12 02:21:20 +00:00
|
|
|
</NcAppNavigationItem>
|
2022-09-13 07:55:32 +00:00
|
|
|
<NcAppNavigationItem :to="{name: 'videos'}"
|
2022-09-16 23:26:29 +00:00
|
|
|
:title="t('memories', 'Videos')">
|
2022-09-16 03:17:40 +00:00
|
|
|
<Video slot="icon" :size="20" />
|
2022-09-13 07:55:32 +00:00
|
|
|
</NcAppNavigationItem>
|
2022-10-07 19:28:39 +00:00
|
|
|
<NcAppNavigationItem :to="{name: 'people'}"
|
|
|
|
:title="t('memories', 'People')">
|
|
|
|
<PeopleIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
2022-09-25 23:02:26 +00:00
|
|
|
<NcAppNavigationItem :to="{name: 'archive'}"
|
|
|
|
:title="t('memories', 'Archive')">
|
|
|
|
<ArchiveIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
2022-10-06 20:20:29 +00:00
|
|
|
<NcAppNavigationItem :to="{name: 'thisday'}"
|
|
|
|
:title="t('memories', 'On this day')">
|
|
|
|
<CalendarIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
2022-10-07 17:46:09 +00:00
|
|
|
<NcAppNavigationItem :to="{name: 'tags'}" v-if="config_tagsEnabled"
|
2022-10-06 23:28:35 +00:00
|
|
|
:title="t('memories', 'Tags')">
|
|
|
|
<TagsIcon slot="icon" :size="20" />
|
|
|
|
</NcAppNavigationItem>
|
2022-09-09 07:31:42 +00:00
|
|
|
</template>
|
|
|
|
<template #footer>
|
|
|
|
<NcAppNavigationSettings :title="t('memories', 'Settings')">
|
|
|
|
<Settings />
|
|
|
|
</NcAppNavigationSettings>
|
|
|
|
</template>
|
|
|
|
</NcAppNavigation>
|
2022-08-14 20:54:18 +00:00
|
|
|
|
2022-09-09 07:31:42 +00:00
|
|
|
<NcAppContent>
|
|
|
|
<div class="outer">
|
|
|
|
<router-view />
|
|
|
|
</div>
|
|
|
|
</NcAppContent>
|
|
|
|
</NcContent>
|
2022-08-14 20:54:18 +00:00
|
|
|
</template>
|
|
|
|
|
2022-09-13 01:33:24 +00:00
|
|
|
<script lang="ts">
|
2022-09-13 02:36:27 +00:00
|
|
|
import { Component, Mixins } from 'vue-property-decorator';
|
2022-09-16 22:42:29 +00:00
|
|
|
import {
|
|
|
|
NcContent, NcAppContent, NcAppNavigation,
|
|
|
|
NcAppNavigationItem, NcAppNavigationSettings,
|
|
|
|
} from '@nextcloud/vue';
|
2022-10-17 02:52:44 +00:00
|
|
|
import { generateUrl } from '@nextcloud/router'
|
2022-08-20 00:18:04 +00:00
|
|
|
|
2022-08-15 23:43:10 +00:00
|
|
|
import Timeline from './components/Timeline.vue'
|
2022-08-20 00:18:04 +00:00
|
|
|
import Settings from './components/Settings.vue'
|
2022-09-13 02:36:27 +00:00
|
|
|
import GlobalMixin from './mixins/GlobalMixin';
|
2022-10-07 17:46:09 +00:00
|
|
|
import UserConfig from './mixins/UserConfig';
|
2022-08-14 20:54:18 +00:00
|
|
|
|
2022-09-16 03:17:40 +00:00
|
|
|
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'
|
2022-09-25 23:02:26 +00:00
|
|
|
import ArchiveIcon from 'vue-material-design-icons/PackageDown.vue';
|
2022-10-06 20:20:29 +00:00
|
|
|
import CalendarIcon from 'vue-material-design-icons/Calendar.vue';
|
2022-10-07 19:28:39 +00:00
|
|
|
import PeopleIcon from 'vue-material-design-icons/AccountBoxMultiple.vue';
|
2022-10-06 23:28:35 +00:00
|
|
|
import TagsIcon from 'vue-material-design-icons/Tag.vue';
|
2022-09-16 03:17:40 +00:00
|
|
|
|
2022-09-13 02:36:27 +00:00
|
|
|
@Component({
|
2022-09-09 07:31:42 +00:00
|
|
|
components: {
|
|
|
|
NcContent,
|
|
|
|
NcAppContent,
|
|
|
|
NcAppNavigation,
|
|
|
|
NcAppNavigationItem,
|
|
|
|
NcAppNavigationSettings,
|
2022-08-20 00:18:04 +00:00
|
|
|
|
2022-09-09 07:31:42 +00:00
|
|
|
Timeline,
|
|
|
|
Settings,
|
2022-09-16 03:17:40 +00:00
|
|
|
|
|
|
|
ImageMultiple,
|
|
|
|
FolderIcon,
|
|
|
|
Star,
|
|
|
|
Video,
|
2022-09-25 23:02:26 +00:00
|
|
|
ArchiveIcon,
|
2022-10-06 20:20:29 +00:00
|
|
|
CalendarIcon,
|
2022-10-07 19:28:39 +00:00
|
|
|
PeopleIcon,
|
2022-10-06 23:28:35 +00:00
|
|
|
TagsIcon,
|
2022-09-09 07:31:42 +00:00
|
|
|
},
|
2022-09-13 02:36:27 +00:00
|
|
|
})
|
2022-10-07 17:46:09 +00:00
|
|
|
export default class App extends Mixins(GlobalMixin, UserConfig) {
|
2022-09-13 02:36:27 +00:00
|
|
|
// Outer element
|
2022-10-08 23:56:25 +00:00
|
|
|
|
|
|
|
public mounted() {
|
|
|
|
// Get the content-vue element and add nextcloud version as a class to it
|
|
|
|
const contentVue = document.querySelector('#content-vue');
|
|
|
|
if (contentVue) {
|
|
|
|
const version = (<any>window.OC).config.version.split('.');
|
|
|
|
contentVue.classList.add('nextcloud-major-' + version[0]);
|
|
|
|
}
|
|
|
|
}
|
2022-10-17 02:52:44 +00:00
|
|
|
|
|
|
|
async beforeMount() {
|
|
|
|
if ('serviceWorker' in navigator) {
|
|
|
|
// Use the window load event to keep the page load performant
|
|
|
|
window.addEventListener('load', async () => {
|
|
|
|
try {
|
|
|
|
const url = generateUrl('/apps/memories/service-worker.js');
|
|
|
|
const registration = await navigator.serviceWorker.register(url, { scope: generateUrl('/apps/memories') });
|
|
|
|
console.log('SW registered: ', registration);
|
|
|
|
} catch (error) {
|
|
|
|
console.error('SW registration failed: ', error);
|
|
|
|
}
|
|
|
|
})
|
|
|
|
} else {
|
|
|
|
console.debug('Service Worker is not enabled on this browser.')
|
|
|
|
}
|
|
|
|
}
|
2022-08-14 20:54:18 +00:00
|
|
|
}
|
|
|
|
</script>
|
2022-09-16 04:06:40 +00:00
|
|
|
|
2022-10-12 19:05:38 +00:00
|
|
|
<style scoped lang="scss">
|
|
|
|
.outer {
|
|
|
|
padding: 0 0 0 44px;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (max-width: 768px) {
|
2022-10-12 19:30:54 +00:00
|
|
|
.outer {
|
|
|
|
padding: 0px;
|
|
|
|
|
|
|
|
// Get rid of padding on img-outer (1px on mobile)
|
2022-10-16 02:55:53 +00:00
|
|
|
// Also need to make sure we don't end up with a scrollbar -- see below
|
2022-10-12 19:30:54 +00:00
|
|
|
margin-left: -1px;
|
|
|
|
width: calc(100% + 3px); // 1px extra here because ... reasons
|
|
|
|
}
|
2022-10-12 19:05:38 +00:00
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
2022-10-08 23:56:25 +00:00
|
|
|
<style lang="scss">
|
2022-09-16 04:06:40 +00:00
|
|
|
body {
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
2022-10-08 23:56:25 +00:00
|
|
|
|
|
|
|
// Nextcloud 25: get rid of gap and border radius at right
|
|
|
|
#content-vue.nextcloud-major-25 {
|
|
|
|
// was var(--body-container-radius)
|
|
|
|
border-top-right-radius: 0;
|
|
|
|
border-bottom-right-radius: 0;
|
|
|
|
|
|
|
|
width: calc(100% - var(--body-container-margin)*1); // was *2
|
|
|
|
}
|
2022-10-15 18:48:17 +00:00
|
|
|
|
2022-10-16 02:55:53 +00:00
|
|
|
// Hide horizontal scrollbar on mobile
|
|
|
|
// For the padding removal above
|
|
|
|
#app-content-vue {
|
|
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
|
|
|
2022-10-15 18:48:17 +00:00
|
|
|
// Fill all available space
|
|
|
|
.fill-block {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: block;
|
|
|
|
}
|
2022-09-16 04:06:40 +00:00
|
|
|
</style>
|