Skip to content

Commit

Permalink
#21 - Made additional changes according to feedback
Browse files Browse the repository at this point in the history
  • Loading branch information
frederikpyt committed Oct 18, 2023
1 parent 3bcbba3 commit 12db805
Showing 6 changed files with 65 additions and 17 deletions.
2 changes: 1 addition & 1 deletion src/components/item/Breadcrumb.vue
Original file line number Diff line number Diff line change
@@ -12,7 +12,7 @@
:href="breadcrumbItem.url"
class="hover:text-gray-700 dark:hover:text-gray-100"
:class="{
'font-semibold hover:text-gray-700 dark:hover:text-gray-100': breadcrumbItem.active,
'font-semibold': breadcrumbItem.active,
}"
>{{ breadcrumbItem.name }}</a
>
11 changes: 11 additions & 0 deletions src/components/item/NoSharedItems.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<template>
<div
class="flex h-64 flex-wrap items-center justify-center rounded-lg bg-gray-50 text-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400"
>
{{ t('noSharedItems.description') }}
</div>
</template>

<script setup lang="ts">
import { t } from '@lib/i18n';
</script>
47 changes: 33 additions & 14 deletions src/components/item/SharingBrowser.vue
Original file line number Diff line number Diff line change
@@ -1,38 +1,55 @@
<template>
<div class="relative w-full px-4 py-6">
<div class="mt-3 flex flex-wrap">
<div class="text-gray-500 hover:text-gray-700 dark:text-gray-300">
<a
:href="url('u/shared')"
class="font-semibold hover:text-gray-700 dark:hover:text-gray-100"
>{{ t('layout.link.sharedWithMe') }}</a
>
</div>
</div>
</div>
<div class="relative h-full w-full px-4 pt-6">
<NoSharedItems v-if="hasItemsLoaded && !Object.values(items).length" />
<!-- Files & Folders -->
<div class="flex flex-wrap gap-3">
<!-- prettier-ignore-attribute -->
<Folder
v-for="folder in folders"
:key="folder.id"
v-model="(items[folder.id] as FolderClass)"
/>
</div>
<div class="mt-3 flex flex-wrap gap-3">
<!-- prettier-ignore-attribute -->
<File v-for="file in files" :key="file.id" v-model="(items[file.id] as FileClass)" />
</div>
<template v-else="hasObject.values(items).length">
<div class="flex flex-wrap gap-3">
<!-- prettier-ignore-attribute -->
<Folder
v-for="folder in folders"
:key="folder.id"
v-model="(items[folder.id] as FolderClass)"
/>
</div>
<div class="mt-3 flex flex-wrap gap-3">
<!-- prettier-ignore-attribute -->
<File v-for="file in files" :key="file.id" v-model="(items[file.id] as FileClass)" />
</div>
</template>
</div>
</template>

<script setup lang="ts">
import { useStore } from '@nanostores/vue';
import { addItem, itemsStore } from '@stores/items';
import { computed } from 'vue';
import { fetchFromApi } from '@lib/helpers';
import { computed, ref } from 'vue';
import { fetchFromApi, url } from '@lib/helpers';
import Folder from './folder/Folder.vue';
import File from './file/File.vue';
import { ItemClass } from '@lib/items/items';
import { ItemFactory } from '@lib/items/factory';
import { FolderClass } from '@lib/items/folders';
import { FileClass } from '@lib/items/files';
import { t } from '@lib/i18n';
import NoSharedItems from './NoSharedItems.vue';
/**
* Items
*/
const items = useStore(itemsStore);
const hasItemsLoaded = ref(false);
getItems();
async function getItems() {
@@ -64,6 +81,8 @@ async function getItems() {
addItem(item);
}
hasItemsLoaded.value = true;
} catch (e) {
console.error('Error' + e);
}
6 changes: 4 additions & 2 deletions src/components/item/file/NoFiles.vue
Original file line number Diff line number Diff line change
@@ -21,10 +21,11 @@
/>
</svg>
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400">
<span class="font-semibold">Click to upload</span> or drag and drop
<span class="font-semibold">{{ t('noFiles.clickToUpload') }}</span>
{{ t('noFiles.orDragAndDrop') }}
</p>
<p class="text-xs text-gray-500 dark:text-gray-400">
SVG, PNG, JPG or GIF (MAX. 800x400px)
{{ t('noFiles.fileRequirements') }}
</p>
</div>
<input id="dropzone-file" ref="fileInput" type="file" class="hidden" @change="uploadFiles" />
@@ -33,6 +34,7 @@
</template>

<script setup lang="ts">
import { t } from '@lib/i18n';
import { FileClass } from '@lib/items/files';
import type { FolderType } from '@lib/items/folders';
import { ref, type PropType } from 'vue';
8 changes: 8 additions & 0 deletions src/lang/da.ts
Original file line number Diff line number Diff line change
@@ -148,4 +148,12 @@ export default {
owner: 'Ejer',
confirm: 'Bekræft',
},
noFiles: {
clickToUpload: 'Klik for at uploade',
orDragAndDrop: 'eller træk og slip filer her',
fileRequirements: 'Filer må maks. have en størrelse på 500 MB',
},
noSharedItems: {
description: 'Ingen filer er blevet delt med dig endnu...',
},
};
8 changes: 8 additions & 0 deletions src/lang/en.ts
Original file line number Diff line number Diff line change
@@ -148,4 +148,12 @@ export default {
owner: 'Owner',
confirm: 'Confirm',
},
noFiles: {
clickToUpload: 'Click to upload',
orDragAndDrop: 'or drag and drop files here',
fileRequirements: 'Files can max. have a size of 500 MB',
},
noSharedItems: {
description: 'No items have been shared with you yet...',
},
};

0 comments on commit 12db805

Please sign in to comment.