pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use fieldset for styling form elements

Browse Source
This commit is contained in:
Wim Brand
2025-01-27 22:54:47 +01:00
parent 6d7fb71830
commit 4d1680b7f5
11 changed files with 233 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
res/static/style/layout.css
View File

@@ -386,6 +386,22 @@ ul {
list-style: disc; list-style: disc;
} }
fieldset {
padding: 4px;
border-radius: 8px;
border: 2px var(--separator) solid;
margin: 0;
}
fieldset>legend {
padding: 2px 8px;
margin-left: auto;
margin-right: auto;
border-radius: 8px;
font-size: 1.1em;
border-bottom: 2px var(--separator) solid;
}
/* Forms*/ /* Forms*/
.form { .form {

7
res/template/widgets.html
View File

@@ -57,6 +57,13 @@
File <input type="file" name="file"> File <input type="file" name="file">
<hr/> <hr/>
Color <input type="color" name="favcolor" value="#ff0000"> Color <input type="color" name="favcolor" value="#ff0000">
<hr/>
<fieldset>
<legend>Legend</legend>
<p>
Fieldset
</p>
</fieldset>
<br/><br/> <br/><br/>
<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe> <iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>

2
svelte/src/filesystem/FileStats.svelte
View File

@@ -147,7 +147,7 @@ const close_socket = () => {
.stat { .stat {
line-height: 1.2em; line-height: 1.2em;
} }
@media (max-width: 800px) { @media (max-width: 1000px) {
.label { .label {
text-align: center; text-align: center;
padding-left: 0; padding-left: 0;

2
svelte/src/filesystem/Filesystem.svelte
View File

@@ -252,7 +252,7 @@ const download = () => {
/* This max-width needs to be synced with the .toolbar max-width in /* This max-width needs to be synced with the .toolbar max-width in
Toolbar.svelte and the .label max-width in FileStats.svelte */ Toolbar.svelte and the .label max-width in FileStats.svelte */
@media (max-width: 800px) { @media (max-width: 1000px) {
.viewer_area { .viewer_area {
flex-direction: column-reverse; flex-direction: column-reverse;
} }

7
svelte/src/filesystem/Toolbar.svelte
View File

@@ -56,7 +56,7 @@ const toggle_fullscreen = () => {
} }
} }
let expanded = false let expanded = true
let expand = e => { let expand = e => {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@@ -188,14 +188,14 @@ let expand = e => {
/* This max-width needs to be synced with the .viewer_area max-width in /* This max-width needs to be synced with the .viewer_area max-width in
Toolbar.svelte and the .label max-width in FileStats.svelte */ Toolbar.svelte and the .label max-width in FileStats.svelte */
@media (max-width: 800px) { @media (max-width: 1000px) {
.toolbar { .toolbar {
overflow-y: hidden; overflow-y: hidden;
max-height: 2.1em; max-height: 2.1em;
} }
.toolbar.expanded { .toolbar.expanded {
overflow-y: scroll; overflow-y: scroll;
max-height: 30vh; max-height: 25vh;
} }
.stats_container { .stats_container {
flex-direction: row; flex-direction: row;
@@ -204,7 +204,6 @@ Toolbar.svelte and the .label max-width in FileStats.svelte */
margin: 2px 0; margin: 2px 0;
} }
.hidden_vertical { .hidden_vertical {
display: block; display: block;
} }

46
svelte/src/filesystem/edit_window/AccessControl.svelte
View File

@@ -44,30 +44,34 @@ const del_password = (pass: string) => {
have delete permissions. You can see who the owner of a file is in the have delete permissions. You can see who the owner of a file is in the
Details window. Details window.
</p> </p>
<h2>Link permissions</h2> <fieldset>
<div class="row"> <legend>Link permissions</legend>
<div class="row">
<div class="grow id"> <div class="grow id">
Anyone with the link can... Anyone with the link can...
</div> </div>
<div class="perms"> <div class="perms">
<PermissionButton bind:permissions={file.link_permissions}/> <PermissionButton bind:permissions={file.link_permissions}/>
</div> </div>
</div> </div>
</fieldset>
<h2>User permissions</h2>
<p> <fieldset>
<legend>User permissions</legend>
<p>
Enter a username here to give them access to this directory. The user will Enter a username here to give them access to this directory. The user will
not receive an e-mail invite. Giving write access to a user without giving not receive an e-mail invite. Giving write access to a user without giving
read access as well does not actually allow them to write anything. read access as well does not actually allow them to write anything.
</p> </p>
<form on:submit={add_user} class="row"> <form on:submit={add_user} class="row">
<input type="text" bind:value={new_user_id} placeholder="Username" class="grow" size="1"> <input type="text" bind:value={new_user_id} placeholder="Username" class="grow" size="1">
<Button type="submit" icon="add" label="Add"/> <Button type="submit" icon="add" label="Add"/>
<div class="perms"> <div class="perms">
<PermissionButton bind:permissions={new_user_perms}/> <PermissionButton bind:permissions={new_user_perms}/>
</div> </div>
</form> </form>
{#if file.user_permissions !== undefined} {#if file.user_permissions !== undefined}
{#each Object.keys(file.user_permissions) as id (id)} {#each Object.keys(file.user_permissions) as id (id)}
<div class="row"> <div class="row">
<Button click={() => del_user(id)} icon="delete"/> <Button click={() => del_user(id)} icon="delete"/>
@@ -79,23 +83,25 @@ const del_password = (pass: string) => {
</div> </div>
</div> </div>
{/each} {/each}
{/if} {/if}
</fieldset>
<h2>Password permissions</h2> <fieldset>
<p> <legend>Password permissions</legend>
<p>
Allow users to enter a password to give them access to this directory. Allow users to enter a password to give them access to this directory.
</p> </p>
<p> <p>
<b>This feature is not implemented currently!</b> <b>This feature is not implemented currently!</b>
</p> </p>
<form on:submit={add_password} class="row"> <form on:submit={add_password} class="row">
<input type="text" bind:value={new_password} placeholder="Password" class="grow" size="1"> <input type="text" bind:value={new_password} placeholder="Password" class="grow" size="1">
<Button type="submit" icon="add" label="Add"/> <Button type="submit" icon="add" label="Add"/>
<div class="perms"> <div class="perms">
<PermissionButton bind:permissions={new_password_perms}/> <PermissionButton bind:permissions={new_password_perms}/>
</div> </div>
</form> </form>
{#if file.password_permissions !== undefined} {#if file.password_permissions !== undefined}
{#each Object.keys(file.password_permissions) as password (password)} {#each Object.keys(file.password_permissions) as password (password)}
<div class="row"> <div class="row">
<Button click={() => del_password(password)} icon="delete"/> <Button click={() => del_password(password)} icon="delete"/>
@@ -107,14 +113,14 @@ const del_password = (pass: string) => {
</div> </div>
</div> </div>
{/each} {/each}
{/if} {/if}
</fieldset>
<style> <style>
.row { .row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
border-bottom: 1px solid var(--separator);
margin-bottom: 2px; margin-bottom: 2px;
padding-bottom: 2px; padding-bottom: 2px;
} }

39
svelte/src/filesystem/edit_window/BrandingOptions.svelte
View File

@@ -77,20 +77,23 @@ const handle_picker = async e => {
let highlight_info = false let highlight_info = false
</script> </script>
<p> <fieldset>
<legend>Enable page branding</legend>
<p>
You can customize how your filesystem looks. The colours chosen here apply You can customize how your filesystem looks. The colours chosen here apply
to the directory you're currently in and all files and directories in this to the directory you're currently in and all files and directories in this
directory. Colours which you do not want to modify can be left empty. Then directory. Colours which you do not want to modify can be left empty. Then
the default theme colour will be used. the default theme colours will be used.
</p> </p>
<div> <div>
<input bind:checked={enabled} id="enable_branding" type="checkbox" class="form_input"/> <input bind:checked={enabled} id="enable_branding" type="checkbox" class="form_input"/>
<label for="enable_branding">Enable custom branding options</label> <label for="enable_branding">Enable custom page branding</label>
</div> </div>
<hr/> </fieldset>
<div class="grid" class:disabled={!enabled}> <fieldset class="grid" disabled={!enabled}>
<legend>Colours</legend>
<div> <div>
<div style="display: inline-block">Highlight</div> <div style="display: inline-block">Highlight</div>
<HelpButton bind:toggle={highlight_info}/> <HelpButton bind:toggle={highlight_info}/>
@@ -120,6 +123,10 @@ let highlight_info = false
<div>Card</div> <div>Card</div>
<input type="color" bind:value={file.properties.brand_card_color}/> <input type="color" bind:value={file.properties.brand_card_color}/>
<input type="text" bind:value={file.properties.brand_card_color}/> <input type="text" bind:value={file.properties.brand_card_color}/>
</fieldset>
<fieldset class="grid" disabled={!enabled}>
<legend>Image customization</legend>
<p class="span3"> <p class="span3">
You can choose an image to show above or behind the files in this You can choose an image to show above or behind the files in this
directory. The image will be picked from your filesystem. The image will directory. The image will be picked from your filesystem. The image will
@@ -141,14 +148,15 @@ let highlight_info = false
Pick Pick
</button> </button>
<input type="text" bind:value={file.properties.brand_background_image}/> <input type="text" bind:value={file.properties.brand_background_image}/>
</div> </fieldset>
<hr/> <fieldset disabled={!enabled}>
<p> <legend>Page preview</legend>
<p>
Below is an example of what the site looks like with these colours: Below is an example of what the site looks like with these colours:
</p> </p>
<div class="example example_background"> <div class="example example_background">
<div>The background</div> <div>The background</div>
<div class="example example_body"> <div class="example example_body">
@@ -174,7 +182,8 @@ let highlight_info = false
<div>The top layer, for highlighted things</div> <div>The top layer, for highlighted things</div>
</div> </div>
</div> </div>
</div> </div>
</fieldset>
<FilePicker bind:this={picker} on:files={handle_picker}/> <FilePicker bind:this={picker} on:files={handle_picker}/>
@@ -195,7 +204,7 @@ input[type="color"] {
.span3 { .span3 {
grid-column: span 3; grid-column: span 3;
} }
.disabled { fieldset:disabled {
filter: opacity(40%); filter: opacity(40%);
} }

17
svelte/src/filesystem/edit_window/FileOptions.svelte
View File

@@ -34,26 +34,31 @@ const delete_file = async e => {
} }
</script> </script>
<h2>File settings</h2> <fieldset>
{#if is_root_dir} <legend>File settings</legend>
{#if is_root_dir}
<div class="highlight_yellow"> <div class="highlight_yellow">
Filesystem root cannot be renamed. If this shared directory Filesystem root cannot be renamed. If this shared directory
is in is in
<PathLink nav={nav} path="/me">your filesystem</PathLink> <PathLink nav={nav} path="/me">your filesystem</PathLink>
you can rename it from there you can rename it from there
</div> </div>
{/if} {/if}
<div class="form_grid"> <div class="form_grid">
<label for="file_name">Name</label> <label for="file_name">Name</label>
<input form="edit_form" bind:value={new_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/> <input form="edit_form" bind:value={new_name} id="file_name" type="text" class="form_input" disabled={is_root_dir}/>
</div> </div>
</fieldset>
{#if $nav.permissions.delete === true} {#if $nav.permissions.delete === true}
<h2>Delete</h2> <fieldset>
<legend>Delete</legend>
<p> <p>
Delete this file or directory. If this is a directory then all Delete this file or directory. If this is a directory then all
subfiles will be deleted as well. This action cannot be undone. subfiles will be deleted as well. This action cannot be undone.
</p> </p>
<Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/> <Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/>
</fieldset>
{/if} {/if}
<style> <style>

43
svelte/src/filesystem/edit_window/SharingOptions.svelte
View File

@@ -24,7 +24,7 @@ let embed_iframe = file => {
let url = domain_url()+"/d/"+file.id let url = domain_url()+"/d/"+file.id
embed_html = `<iframe ` + embed_html = `<iframe ` +
`src="${url}" ` + `src="${url}" ` +
`style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 8px; "` + `style="border: none; width: 100%; max-width 90vw; height: 800px; max-height: 75vh; border-radius: 6px; "` +
`allowfullscreen` + `allowfullscreen` +
`></iframe>` `></iframe>`
} }
@@ -52,25 +52,26 @@ const update_shared = e => {
} }
</script> </script>
<h2>Share this file/directory</h2> <fieldset>
<legend>Public link</legend>
{#if file.abuse_type !== undefined} {#if file.abuse_type !== undefined}
<div class="highlight_red"> <div class="highlight_red">
This file or directory has received an abuse report. It cannot be This file or directory has received an abuse report. It cannot be
shared.<br/> shared.<br/>
Type of abuse: {file.abuse_type}<br/> Type of abuse: {file.abuse_type}<br/>
Report time: {formatDate(file.abuse_report_time, true, true, true)} Report time: {formatDate(file.abuse_report_time, true, true, true)}
</div> </div>
{/if} {/if}
<p> <p>
When a file or directory is shared it can be accessed through a When a file or directory is shared it can be accessed through a
unique link. You can get the URL with the 'Copy link' button on unique link. You can get the URL with the 'Copy link' button on
the toolbar, or share the link with the 'Share' button. If you the toolbar, or share the link with the 'Share' button. If you
share a directory all the files within the directory are also share a directory all the files within the directory are also
accessible from the link. accessible from the link.
</p> </p>
<div> <div>
<input <input
form="edit_form" form="edit_form"
bind:checked={shared} bind:checked={shared}
@@ -80,38 +81,40 @@ const update_shared = e => {
class="form_input" class="form_input"
/> />
<label for="shared">Share this file or directory</label> <label for="shared">Share this file or directory</label>
</div> </div>
<div class="form_grid"> <div class="form_grid">
{#if is_shared} {#if is_shared}
<span>Your sharing link: <a href={share_link}>{share_link}</a></span> <span>Your sharing link: <a href={share_link}>{share_link}</a></span>
<CopyButton text={share_link}>Copy</CopyButton> <CopyButton text={share_link}>Copy</CopyButton>
{/if} {/if}
</div> </div>
</fieldset>
<h2>Embedding</h2> <fieldset>
<p> <legend>Embedding</legend>
<p>
If you have a website you can embed pixeldrain directories and files in your If you have a website you can embed pixeldrain directories and files in your
own webpages with the code below. If you embed a directory then all own webpages with the code below. If you embed a directory then all
subdirectories and files will be accessible through the frame. Branding subdirectories and files will be accessible through the frame. Branding
options will also apply in the frame, but only when applied to this options will also apply in the frame, but only when applied to this
directory. It will not inherit the style from parent directories. directory. It will not inherit the style from parent directories.
</p> </p>
<p>
<h3>Code</h3>
<p>
Put this code in your website to embed the file or directory. Put this code in your website to embed the file or directory.
</p> </p>
<div class="center"> <div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea> <textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/> <br/>
<CopyButton text={embed_html}>Copy HTML</CopyButton> <CopyButton text={embed_html}>Copy HTML</CopyButton>
<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}> <button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example <i class="icon">visibility</i> Show example
</button> </button>
</div> </div>
<hr/>
<div bind:this={preview_area} style="text-align: center;"></div> <div bind:this={preview_area} style="text-align: center;"></div>
</fieldset>
<style> <style>
.center { .center {

1
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -408,7 +408,6 @@ onMount(() => {
padding: 0; padding: 0;
background: var(--shaded_background); background: var(--shaded_background);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
z-index: 1;
} }
.toolbar { .toolbar {
display: flex; display: flex;

10
svelte/src/filesystem/filemanager/ListView.svelte
View File

@@ -16,7 +16,7 @@ export let hide_branding = false
<tr> <tr>
<td></td> <td></td>
<td>Name</td> <td>Name</td>
<td>Size</td> <td class="hide_small">Size</td>
<td></td> <td></td>
</tr> </tr>
{#each $nav.children as child, index (child.path)} {#each $nav.children as child, index (child.path)}
@@ -34,7 +34,7 @@ export let hide_branding = false
<td class="node_name"> <td class="node_name">
{child.name} {child.name}
</td> </td>
<td class="node_size"> <td class="node_size hide_small">
{#if child.type === "file"} {#if child.type === "file"}
{formatDataVolume(child.file_size, 3)} {formatDataVolume(child.file_size, 3)}
{/if} {/if}
@@ -73,7 +73,6 @@ export let hide_branding = false
display: table; display: table;
margin: 8px auto 16px auto; margin: 8px auto 16px auto;
background: var(--shaded_background); background: var(--shaded_background);
backdrop-filter: blur(4px);
border-collapse: collapse; border-collapse: collapse;
border-radius: 8px; border-radius: 8px;
@@ -139,4 +138,9 @@ td {
width: 64px; width: 64px;
} }
} }
@media (max-width: 500px) {
.hide_small {
display: none;
}
}
</style> </style>