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

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

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

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

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

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

@@ -77,20 +77,23 @@ const handle_picker = async e => {
let highlight_info = false
</script>
<p>
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
directory. Colours which you do not want to modify can be left empty. Then
the default theme colour will be used.
</p>
<fieldset>
<legend>Enable page branding</legend>
<p>
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
directory. Colours which you do not want to modify can be left empty. Then
the default theme colours will be used.
</p>
<div>
<input bind:checked={enabled} id="enable_branding" type="checkbox" class="form_input"/>
<label for="enable_branding">Enable custom branding options</label>
</div>
<hr/>
<div>
<input bind:checked={enabled} id="enable_branding" type="checkbox" class="form_input"/>
<label for="enable_branding">Enable custom page branding</label>
</div>
</fieldset>
<div class="grid" class:disabled={!enabled}>
<fieldset class="grid" disabled={!enabled}>
<legend>Colours</legend>
<div>
<div style="display: inline-block">Highlight</div>
<HelpButton bind:toggle={highlight_info}/>
@@ -120,6 +123,10 @@ let highlight_info = false
<div>Card</div>
<input type="color" 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">
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
@@ -141,40 +148,42 @@ let highlight_info = false
Pick
</button>
<input type="text" bind:value={file.properties.brand_background_image}/>
</div>
</fieldset>
<hr/>
<p>
Below is an example of what the site looks like with these colours:
</p>
<fieldset disabled={!enabled}>
<legend>Page preview</legend>
<p>
Below is an example of what the site looks like with these colours:
</p>
<div class="example example_background">
<div>The background</div>
<div class="example example_background">
<div>The background</div>
<div class="example example_body">
<div>The content body. <a href="/">A link</a>!</div>
<hr/>
<div>Below is your custom header image, if you chose one.</div>
<CustomBanner path={[file]}/>
<hr/>
<div class="example example_body">
<div>The content body. <a href="/">A link</a>!</div>
<hr/>
<div>Below is your custom header image, if you chose one.</div>
<CustomBanner path={[file]}/>
<hr/>
<div class="example_button_row">
<button type="button"><i class="icon">touch_app</i>Normal</button>
<button type="button" class="button_highlight"><i class="icon">priority_high</i>Important</button>
<button type="button" class="button_red"><i class="icon">warning</i>Dangerous</button>
</div>
<div class="example_button_row">
<button type="button"><i class="icon">touch_app</i>Normal</button>
<button type="button" class="button_highlight"><i class="icon">priority_high</i>Important</button>
<button type="button" class="button_red"><i class="icon">warning</i>Dangerous</button>
</div>
<div class="example_button_row">
<input type="text" value="A text field"/>
</div>
<div class="example_button_row">
<input type="text" value="A text field"/>
</div>
<hr/>
<hr/>
<div class="example example_card">
<div>The top layer, for highlighted things</div>
<div class="example example_card">
<div>The top layer, for highlighted things</div>
</div>
</div>
</div>
</div>
</fieldset>
<FilePicker bind:this={picker} on:files={handle_picker}/>
@@ -195,7 +204,7 @@ input[type="color"] {
.span3 {
grid-column: span 3;
}
.disabled {
fieldset:disabled {
filter: opacity(40%);
}

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

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

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

@@ -24,7 +24,7 @@ let embed_iframe = file => {
let url = domain_url()+"/d/"+file.id
embed_html = `<iframe ` +
`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` +
`></iframe>`
}
@@ -52,66 +52,69 @@ const update_shared = e => {
}
</script>
<h2>Share this file/directory</h2>
<fieldset>
<legend>Public link</legend>
{#if file.abuse_type !== undefined}
<div class="highlight_red">
This file or directory has received an abuse report. It cannot be
shared.<br/>
Type of abuse: {file.abuse_type}<br/>
Report time: {formatDate(file.abuse_report_time, true, true, true)}
</div>
{/if}
<p>
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
the toolbar, or share the link with the 'Share' button. If you
share a directory all the files within the directory are also
accessible from the link.
</p>
<div>
<input
form="edit_form"
bind:checked={shared}
on:change={update_shared}
id="shared"
type="checkbox"
class="form_input"
/>
<label for="shared">Share this file or directory</label>
</div>
<div class="form_grid">
{#if is_shared}
<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
<CopyButton text={share_link}>Copy</CopyButton>
{#if file.abuse_type !== undefined}
<div class="highlight_red">
This file or directory has received an abuse report. It cannot be
shared.<br/>
Type of abuse: {file.abuse_type}<br/>
Report time: {formatDate(file.abuse_report_time, true, true, true)}
</div>
{/if}
</div>
<h2>Embedding</h2>
<p>
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
subdirectories and files will be accessible through the frame. Branding
options will also apply in the frame, but only when applied to this
directory. It will not inherit the style from parent directories.
</p>
<p>
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
the toolbar, or share the link with the 'Share' button. If you
share a directory all the files within the directory are also
accessible from the link.
</p>
<div>
<input
form="edit_form"
bind:checked={shared}
on:change={update_shared}
id="shared"
type="checkbox"
class="form_input"
/>
<label for="shared">Share this file or directory</label>
</div>
<h3>Code</h3>
<p>
Put this code in your website to embed the file or directory.
</p>
<div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/>
<CopyButton text={embed_html}>Copy HTML</CopyButton>
<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example
</button>
</div>
<div class="form_grid">
{#if is_shared}
<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
<CopyButton text={share_link}>Copy</CopyButton>
{/if}
</div>
</fieldset>
<div bind:this={preview_area} style="text-align: center;"></div>
<fieldset>
<legend>Embedding</legend>
<p>
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
subdirectories and files will be accessible through the frame. Branding
options will also apply in the frame, but only when applied to this
directory. It will not inherit the style from parent directories.
</p>
<p>
Put this code in your website to embed the file or directory.
</p>
<div class="center">
<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
<br/>
<CopyButton text={embed_html}>Copy HTML</CopyButton>
<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
<i class="icon">visibility</i> Show example
</button>
</div>
<hr/>
<div bind:this={preview_area} style="text-align: center;"></div>
</fieldset>
<style>
.center {

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

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

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

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