Skip to content

Commit

Permalink
#10 - Update design for Shortcut modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@kristianbinau
kristianbinau committed Oct 18, 2023
1 parent 4dd886c commit 0132aea
Show file tree
Hide file tree
Showing 4 changed files with 137 additions and 97 deletions.
2 changes: 1 addition & 1 deletion src/components/base/button.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<button
:type="props.type"
:class="buttonClasses"
class="w-full rounded-lg px-5 py-3 text-center text-base font-medium focus:ring-4 sm:w-auto"
class="w-full rounded-lg px-5 py-3 text-center text-base font-medium focus:ring-4 sm:w-auto cursor-pointer"
@click="emit('click')"
>
<slot />
Expand Down
230 changes: 134 additions & 96 deletions src/components/item/CreateShortcutModal.vue
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,77 @@
<template>
<BaseModal ref="modal" @close="close">
<h3 class="mb-4 text-xl font-medium">{{ t('fileBrowser.shortcut.action.create') }}</h3>
<h4
v-if="parentFolder !== null"
:class="`${selectedFolderId === parentFolder.id ? 'font-bold' : ''}`"
class="mb-4 inline-flex cursor-pointer items-center text-lg"
@click="setFolders(parentFolder.parentId)"
>
<svg
class="h-6 w-6 text-gray-800 dark:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 14 10"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 5H1m0 0 4 4M1 5l4-4"
/>
</svg>
<span class="ml-2">{{ parentFolder.name }}</span>
</h4>
<hr />
<div class="mb-5">
<div class="mb-5 mt-2 flex flex-col gap-1">
<!-- Root Folder -->
<div
class="relative inline-flex w-full items-center py-1 hover:bg-gray-600"
@click="selectFolder(0)"
@mouseenter="showChildArrow(0)"
@mouseleave="hideChildArrow(0)"
id="folder0"
v-if="parentFolder === null"
:class="`${selectedFolderId === HOME_FOLDER_ID ? '' : 'brightness-75'}`"
class="group relative inline-flex w-full select-none items-center rounded-lg bg-gray-100 py-1 hover:cursor-pointer dark:bg-gray-600"
@click="selectFolder(HOME_FOLDER_ID)"
>
<h1 class="ml-2 mr-auto">{{ t('fileBrowser.shortcut.link.myfiles') }}</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
id="svg0"
height="1em"
fill="white"
class="invisible ml-2 mr-2 hover:cursor-pointer hover:fill-gray-300"
@click.stop="childFolder(0)"
:class="`${selectedFolderId === HOME_FOLDER_ID ? 'visible' : 'invisible'}`"
class="ml-2 mr-2 group-hover:visible fill-black hover:fill-gray-500 dark:fill-white"
@click.stop="setFolders(HOME_FOLDER_ID)"
viewBox="0 0 448 512"
>
<path
d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
/>
</svg>
</div>

<!-- No Folders -->
<div
v-else-if="folders.length === 0"
class="group relative inline-flex w-full select-none items-center rounded-lg py-1 text-white"
>
<h1 class="ml-2 mr-auto text-black dark:text-white">Empty</h1>
</div>

<!-- Folders -->
<div
v-else
v-for="folder in folders"
class="relative inline-flex w-full items-center py-1 hover:bg-gray-600"
:class="`${folder.colorClass} ${folder.id === selectedFolderId ? '' : 'brightness-75'}`"
class="group relative inline-flex w-full select-none items-center rounded-lg bg-gradient-to-br py-1 text-white hover:cursor-pointer hover:bg-gradient-to-bl"
@click="selectFolder(folder.id)"
@mouseenter="showChildArrow(folder.id)"
@mouseleave="hideChildArrow(folder.id)"
:id="'folder' + folder.id.toString()"
>
<h1 class="ml-2 mr-auto">{{ folder.name }}</h1>
<svg
xmlns="http://www.w3.org/2000/svg"
:id="'svg' + folder.id.toString()"
height="1em"
fill="white"
class="invisible ml-2 mr-2 hover:cursor-pointer hover:fill-gray-300"
@click.stop="childFolder(folder.id)"
:class="`${folder.id === selectedFolderId ? 'visible' : 'invisible'}`"
class="ml-2 mr-2 group-hover:visible hover:fill-gray-100"
@click.stop="setFolders(folder.id)"
viewBox="0 0 448 512"
>
<path
Expand All @@ -52,17 +83,15 @@
<BaseButton
type="button"
id="shortcutAddButton"
disabled
@click="createShortcut()"
:color="ButtonColor.Primary"
class="dark:brightness-75"
>{{ t('fileBrowser.shortcut.action.create') }}</BaseButton
>{{ `${t('fileBrowser.shortcut.action.createIn')} "${selectedFolderName}"` }}</BaseButton
>
</BaseModal>
</template>

<script setup lang="ts">
import { ref, type PropType } from 'vue';
import { ref, type PropType, computed } from 'vue';
import { FolderClass } from '@lib/items/folders';
import { ShortcutClass } from '@lib/items/shortcuts';
import BaseModal from '@components/base/modal.vue';
Expand All @@ -72,106 +101,101 @@ import { api } from '@lib/helpers';
import { ItemFactory } from '@lib/items/factory';
import { ItemClass } from '@lib/items/items';
const HOME_FOLDER_PARENT_ID = -1 as const;
const HOME_FOLDER_ID = null;
const props = defineProps({
item: {
type: Object as PropType<ItemClass>,
required: true,
},
});
defineExpose({
open,
close,
});
const modal = ref<InstanceType<typeof BaseModal>>();
const item = ref<{ id: number; name: string; parentId: number | null }>({
id: props.item.id,
name: props.item.name,
parentId: props.item.parentId,
});
let selectedFolder: number;
// Shortcut
async function createShortcut() {
await ShortcutClass.create({
name: props.item.name,
parentId: selectedFolderId.value,
linkedItemId: props.item.id,
});
close();
}
async function showChildArrow(folderId: number) {
const svg = document.getElementById('svg' + folderId);
svg?.classList.remove('invisible');
// Browser
const selectedFolderId = ref<number | typeof HOME_FOLDER_ID>(null);
function selectFolder(folderId: number | null) {
selectedFolderId.value = folderId;
}
async function hideChildArrow(folderId: number) {
if (selectedFolder !== folderId) {
const svg = document.getElementById('svg' + folderId);
svg?.classList.add('invisible');
const selectedFolderName = computed(() => {
if (selectedFolderId.value === null) {
return t('fileBrowser.shortcut.link.myfiles');
}
}
async function selectFolder(parentId: number) {
showChildArrow(parentId);
const folder = folders.value.find((folder) => folder.id === selectedFolderId.value);
const oldFolderId: number = selectedFolder;
if (oldFolderId !== parentId) {
selectedFolder = parentId;
hideChildArrow(oldFolderId);
const oldDiv = document.getElementById('folder' + oldFolderId);
oldDiv?.classList.remove('bg-gray-600');
if (folder === undefined) {
if (parentFolder.value?.id === selectedFolderId.value) {
return parentFolder.value.name;
} else {
return ''
}
}
const div = document.getElementById('folder' + parentId);
div?.classList.add('bg-gray-600');
return folder.name;
});
const button = document.getElementById('shortcutAddButton');
button?.removeAttribute('disabled');
button?.classList.remove('dark:brightness-75');
}
const folders = ref<FolderClass[]>([]);
const parentFolder = ref<{ id: number | null; name: string; parentId: number | null } | null>(null);
async function childFolder(parentId: number) {
folders.value = [];
getFolders(parentId);
}
setFolders(HOME_FOLDER_PARENT_ID);
async function createShortcut() {
const folder = await folders.value.filter((x) => x.id === selectedFolder)[0];
if (folder || selectedFolder === 0) {
await ShortcutClass.create({
name: item.value.name,
parentId: folder?.id ?? null,
linkedItemId: item.value.id,
});
close();
async function setFolders(folderId: number | null) {
if (folderId === HOME_FOLDER_PARENT_ID) {
parentFolder.value = null;
folders.value = [];
selectedFolderId.value = HOME_FOLDER_ID;
return;
}
}
function open() {
modal.value?.open();
}
function close() {
item.value = {
id: props.item.id,
name: props.item.name,
parentId: props.item.parentId,
};
if (folderId === HOME_FOLDER_ID) {
parentFolder.value = {
id: HOME_FOLDER_ID,
name: t('fileBrowser.shortcut.link.myfiles'),
parentId: HOME_FOLDER_PARENT_ID,
};
} else {
parentFolder.value = folders.value.find((folder) => folder.id === folderId) ?? null;
if (parentFolder.value === null) {
return;
}
}
folders.value = [];
getFolders(null);
selectedFolderId.value = parentFolder.value.id;
modal.value?.close(false);
await getFolders();
}
const hasItemsLoaded = ref(false);
const folders = ref<FolderClass[]>([]);
async function getFolders(folderId: number | null) {
async function getFolders() {
try {
const response = await fetch(api(`item/${folderId ? `${folderId}` : ''}`), {
method: 'GET',
headers: {
'Content-Type': 'application/json',
if (parentFolder.value === null) {
return;
}
console.log(parentFolder.value);
const response = await fetch(
api(`item/${parentFolder.value.id ? `${parentFolder.value.id}` : ''}`),
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
credentials: 'include',
},
credentials: 'include',
});
);
if (!response.ok) {
if (response.status >= 400 && response.status < 500) {
Expand All @@ -197,9 +221,23 @@ async function getFolders(folderId: number | null) {
} catch (e) {
console.error('Error' + e);
}
}
// Modal
defineExpose({
open,
close,
});
const modal = ref<InstanceType<typeof BaseModal>>();
hasItemsLoaded.value = true;
function open() {
modal.value?.open();
}
getFolders(item.value.parentId);
function close() {
setFolders(HOME_FOLDER_PARENT_ID);
modal.value?.close(false);
}
</script>
1 change: 1 addition & 0 deletions src/lang/da.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export default {
share: 'Del',
delete: 'Slet',
openInNewTab: 'Åben i nyt faneblad',
createIn: 'Opret i',
},
},
},
Expand Down
1 change: 1 addition & 0 deletions src/lang/en.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,7 @@ export default {
share: 'Share',
delete: 'Delete',
openInNewTab: 'Open in new tab',
createIn: 'Create in',
},
},
},
Expand Down

0 comments on commit 0132aea

Please sign in to comment.