HEAVY wip - i'll prob clean up next commit

This commit is contained in:
split / May 2023-03-19 12:31:22 -07:00
parent 04b1a291b6
commit 9253228567
6 changed files with 117 additions and 28 deletions

1
assets/icons/more.svg Normal file
View file

@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM14 12a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM18 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" fill="#DDDDDD"/></svg>

After

Width:  |  Height:  |  Size: 232 B

View file

@ -0,0 +1 @@
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6.707 3.293a1 1 0 0 0-1.414 0L4 4.586l-.293-.293a1 1 0 0 0-1.414 1.414l1 1a1 1 0 0 0 1.414 0l2-2a1 1 0 0 0 0-1.414ZM10 16.993h11.003a1 1 0 0 1 .117 1.994l-.117.006H10A1 1 0 0 1 9.883 17l.117-.007ZM10 11h11.003a1 1 0 0 1 .117 1.993l-.117.007H10a1 1 0 0 1-.117-1.993L10 11Zm0-6h11.003a1 1 0 0 1 .117 1.993L21.003 7H10a1 1 0 0 1-.117-1.993L10 5ZM5.293 16.293a1 1 0 0 1 1.414 1.414l-2 2a1 1 0 0 1-1.414 0l-1-1a1 1 0 1 1 1.414-1.414l.293.293 1.293-1.293Z" fill="#DDDDDD"/></svg>

After

Width:  |  Height:  |  Size: 578 B

View file

@ -113,23 +113,15 @@ authRoutes.post("/logout", (req,res) => {
res.send("logged out")
})
authRoutes.post("/dfv", (req,res) => {
authRoutes.post("/dfv", parser, (req,res) => {
let acc = Accounts.getFromToken(req.cookies.auth)
if (!acc) {
ServeError(res, 401, "not logged in")
return
}
let body:{[key:string]:any}
try {
body = JSON.parse(req.body)
} catch {
ServeError(res,400,"bad request")
return
}
if (['public','private','anonymous'].find(e => e == body.defaultFileVisibility)) {
acc.defaultFileVisibility = body.defaultFileVisibility
if (['public','private','anonymous'].find(e => e == req.body.defaultFileVisibility)) {
acc.defaultFileVisibility = req.body.defaultFileVisibility
Accounts.save()
res.send(`dfv has been set to ${acc.defaultFileVisibility}`)
} else {
@ -138,28 +130,19 @@ authRoutes.post("/dfv", (req,res) => {
}
})
authRoutes.post("/delete_account", (req,res) => {
authRoutes.post("/delete_account", parser, (req,res) => {
let acc = Accounts.getFromToken(req.cookies.auth)
if (!acc) {
ServeError(res, 401, "not logged in")
return
}
let body:{[key:string]:any}
try {
body = JSON.parse(req.body)
} catch {
ServeError(res,400,"bad request")
return
}
let accId = acc.id
auth.AuthTokens.filter(e => e.account == accId).forEach((v) => {
auth.invalidate(v.token)
})
if (body.deleteFiles) {
if (req.body.deleteFiles) {
acc.files.forEach((v) => {
files.unlink(v)
})
@ -170,7 +153,7 @@ authRoutes.post("/delete_account", (req,res) => {
res.send("account deleted")
})
authRoutes.post("/change_username", (req,res) => {
authRoutes.post("/change_username", parser, (req,res) => {
let acc = Accounts.getFromToken(req.cookies.auth)
if (!acc) {
ServeError(res, 401, "not logged in")
@ -200,7 +183,7 @@ authRoutes.post("/change_username", (req,res) => {
res.send("username changed")
})
authRoutes.post("/change_password", (req,res) => {
authRoutes.post("/change_password", parser, (req,res) => {
let acc = Accounts.getFromToken(req.cookies.auth)
if (!acc) {
ServeError(res, 401, "not logged in")

View file

@ -68,6 +68,7 @@
.flFile {
padding: 3px 8px;
position:relative;
@media screen and (max-width: 500px) {
padding:7px 12px;
@ -76,10 +77,22 @@
.detail {
color:#777777;
font-size:14px;
position:relative;
@media screen and (max-width: 500px) {
font-size:16px;
}
img {
width: 14px;
height: 14px;
/* this is shit but it's the best way i can think of to do this */
/* other than flexbox but i don't feel like doing that rn */
position:relative;
top:2px;
}
}
h2 {
@ -97,6 +110,50 @@
margin:0 0 0 0;
white-space: nowrap;
}
button {
background-color:#00000000;
border:none;
outline:none;
cursor:pointer;
&.hitbox {
position:absolute;
left:0px;
top:0px;
height:100%;
width:100%;
z-index:10;
}
&.more {
min-height:100%;
width:auto;
aspect-ratio: 1 / 1;
z-index:11;
position:relative;
img {
margin:auto;
}
}
}
.flexCont {
display: flex;
.fileInfo {
width:100%;
min-width:0;
}
}
@media screen and (min-width:500px) {
&:hover {
background-color: #252525;
}
}
}
}
}

View file

@ -62,4 +62,31 @@ export function update_all_files(optPicker) {
})
}
})
}
export function fileOptions(optPicker,file) {
optPicker.picker(file.filename,[
{
name: file.tag ? "Remove tag" : "Tag file",
icon: `/static/assets/icons/${file.tag ? "tag_remove" : "tag"}.svg`,
description: file.tag || `File has no tag`,
id: "tag"
},
{
name: "Change file visibility",
icon: `/static/assets/icons/${file.visibility||"public"}.svg`,
description: `File is currently ${file.visibility||"public"}`,
id: "changeFileVisibility"
},
{
name: "Delete file",
icon: `/static/assets/icons/admin/delete_file.svg`,
description: ``,
id: "delete"
}
]).then((exp) => {
if (exp && exp.selected) {
}
})
}

View file

@ -1,12 +1,21 @@
<script>
import Pulldown from "./Pulldown.svelte"
import Pulldown from "./Pulldown.svelte";
import { account, fetchFilePointers, files, pulldownManager } from "../stores.mjs";
import { fade } from "svelte/transition";
import { flip } from "svelte/animate";
import { fileOptions } from "../prompts/uploads";
import OptionPicker from "../prompts/OptionPicker.svelte";
let picker;
fetchFilePointers();
</script>
<Pulldown name="files">
<OptionPicker bind:this={picker} />
{#if !$account.username}
<div class="notLoggedIn">
<div style:height="10px" />
@ -20,9 +29,20 @@
<div class="fileList">
{#each $files as file (file.id)}
<div class="flFile">
<h2>{file.filename}</h2>
<p class="detail"><span class="number">{file.id}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="number">{file.mime.split(";")[0]}</span></p>
<div class="flFile" transition:fade={{duration:200}} animate:flip={{duration:200}}>
<button class="hitbox" on:click={window.open(`/download/${file.id}`)}></button> <!-- this is bad, but I'm lazy -->
<div class="flexCont">
<div class="fileInfo">
<h2>{file.filename}</h2>
<p class="detail">
<img src="/static/assets/icons/{file.visibility || "public"}.svg" alt={file.visibility||"public"} />&nbsp;
<span class="number">{file.id}</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="number">{file.mime.split(";")[0]}</span>
</p>
</div>
<button class="more" on:click={fileOptions(picker, file)}>
<img src="/static/assets/icons/more.svg" alt="more" />
</button>
</div>
</div>
{/each}
</div>