Skip to content

Commit ce1fc58

Browse files
GrantGryczanGrantGryczan
committed
Create incomplete files page
1 parent 0cdde07 commit ce1fc58

3 files changed

Lines changed: 127 additions & 0 deletions

File tree

‎frontend/components/Icon/Document.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<IconSvg>
3+
<path
4+
stroke-linecap="round"
5+
stroke-linejoin="round"
6+
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
7+
/>
8+
</IconSvg>
9+
</template>

‎frontend/components/Icon/FolderPlus.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<template>
2+
<IconSvg>
3+
<path
4+
stroke-linecap="round"
5+
stroke-linejoin="round"
6+
d="M12 10.5v6m3-3H9m4.06-7.19-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z"
7+
/>
8+
</IconSvg>
9+
</template>

‎frontend/pages/files/u/[userId].vue‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<script setup lang="ts">
2+
useTitle("Files");
3+
</script>
4+
5+
<template>
6+
<div class="page">
7+
<header class="header">
8+
<div class="header-sidebar">
9+
<NavLogo class="logo" />
10+
</div>
11+
12+
<div class="account-button-wrapper">
13+
<AccountMenu teleport-menu-to="#account-menu-wrapper" />
14+
</div>
15+
</header>
16+
17+
<div id="account-menu-wrapper"></div>
18+
19+
<div class="below-header">
20+
<nav class="sidebar">
21+
<SplitButton
22+
class="upload-button"
23+
menu-label="More Upload Options"
24+
accented
25+
>
26+
<template #button>
27+
<Button>Upload</Button>
28+
</template>
29+
30+
<MenuButton v-autofocus role="menuitem" tabindex="-1">
31+
<IconDocument />
32+
File upload
33+
</MenuButton>
34+
35+
<MenuButton role="menuitem" tabindex="-1">
36+
<IconFolder />
37+
Folder upload
38+
</MenuButton>
39+
40+
<hr />
41+
42+
<MenuButton role="menuitem" tabindex="-1">
43+
<IconFolderPlus />
44+
New folder
45+
</MenuButton>
46+
</SplitButton>
47+
</nav>
48+
49+
<div class="file-pane"></div>
50+
</div>
51+
</div>
52+
</template>
53+
54+
<style scoped lang="scss">
55+
$sidebar-width: 16rem;
56+
57+
.page {
58+
display: flex;
59+
flex-direction: column;
60+
height: 100%;
61+
}
62+
63+
.header {
64+
width: 100%;
65+
height: 4rem;
66+
67+
display: flex;
68+
align-items: center;
69+
justify-content: space-between;
70+
}
71+
72+
.header-sidebar {
73+
width: $sidebar-width;
74+
}
75+
76+
.logo {
77+
font-size: 1.75rem;
78+
margin-left: 1.125rem;
79+
}
80+
81+
.account-button-wrapper {
82+
margin: 0 0.75rem;
83+
}
84+
85+
#account-menu-wrapper {
86+
position: relative;
87+
margin-right: 0.5rem;
88+
}
89+
90+
.below-header {
91+
flex-grow: 1;
92+
display: flex;
93+
}
94+
95+
.sidebar {
96+
width: $sidebar-width;
97+
padding: 1rem;
98+
}
99+
100+
.upload-button {
101+
width: 100%;
102+
font-size: 1.25rem;
103+
}
104+
105+
.file-pane {
106+
flex-grow: 1;
107+
position: relative;
108+
}
109+
</style>

0 commit comments

Comments
 (0)