The great button centerification

2023-11-16 12:17:36 +01:00
parent c2372dbcb3
commit 548c9e1479
12 changed files with 145 additions and 72 deletions
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -472,23 +472,27 @@ input[type="submit"],
 input[type="button"],
 input[type="color"],
 select {
-	display: inline-block;
+	display: inline-flex;
+	flex-direction: row;
+	gap: 0.25em;
 	border-radius: 6px;
 	margin: 3px;
 	background: var(--input_background);
 	padding: 5px 5px 5px 5px;
 	overflow: hidden;
 	color: var(--input_text);
-	vertical-align: middle;
-	align-items: center;
 	cursor: pointer;
 	transition: padding 0.1s, box-shadow 0.1s, background 0.1s;

+	/* Align content vertically in relation to the container */
+	vertical-align: middle;
+	/* Align content vertically in relation to eachother */
+	align-items: center;
+
 	/* Remove default styles set by the user-agent */
 	outline: 0;
 	font-size: 1em;
 	font-weight: normal;
-	line-height: 1;
 	text-decoration: none;
 	text-shadow: none;
 	border: none;
--- a/svelte/src/file_viewer/HomeButton.svelte
+++ b/svelte/src/file_viewer/HomeButton.svelte
@@ -1,12 +1,14 @@
 <script>
 import PixeldrainLogo from "../util/PixeldrainLogo.svelte";
 export let embedded_viewer = false
+export let nobg = false
 </script>

 {#if window.user.username === ""}
 	<a
 		href="/"
 		class="button button_home round"
+		class:nobg
 		target={embedded_viewer ? "_blank" : ""}
 		title="Go to the pixeldrain home page">
 		<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0 4px 0 0;"></PixeldrainLogo>
@@ -15,6 +17,7 @@ export let embedded_viewer = false
 	<a
 		href="/user"
 		class="button round"
+		class:nobg
 		target={embedded_viewer ? "_blank" : ""}
 		title="My account">
 		<PixeldrainLogo style="height: 1.6em; width: 1.6em; margin: 0;"></PixeldrainLogo>
@@ -29,6 +32,11 @@ export let embedded_viewer = false
 	content: "pixeldrain";
 }

+.nobg {
+	background: none;
+	margin: 0;
+}
+
@media (max-width: 600px) {
 	.button_home::after {
 		content: "pd";
--- a/svelte/src/file_viewer/Sharebar.svelte
+++ b/svelte/src/file_viewer/Sharebar.svelte
@@ -28,35 +28,30 @@ const share_tumblr = () => {
 		<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
 			<path d="M22 4H2v16h20V4zm-2 4l-8 5-8-5V6l8 5 8-5v2z"/>
 		</svg>
-		<br/>
 		E-Mail
 	</button>
 	<button class="button_full_width" on:click={share_reddit}>
 		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
 			<path d="M22,12.14C22,10.92 21,9.96 19.81,9.96C19.22,9.96 18.68,10.19 18.29,10.57C16.79,9.5 14.72,8.79 12.43,8.7L13.43,4L16.7,4.71C16.73,5.53 17.41,6.19 18.25,6.19C19.11,6.19 19.81,5.5 19.81,4.63C19.81,3.77 19.11,3.08 18.25,3.08C17.65,3.08 17.11,3.43 16.86,3.95L13.22,3.18C13.11,3.16 13,3.18 12.93,3.24C12.84,3.29 12.79,3.38 12.77,3.5L11.66,8.72C9.33,8.79 7.23,9.5 5.71,10.58C5.32,10.21 4.78,10 4.19,10C2.97,10 2,10.96 2,12.16C2,13.06 2.54,13.81 3.29,14.15C3.25,14.37 3.24,14.58 3.24,14.81C3.24,18.18 7.16,20.93 12,20.93C16.84,20.93 20.76,18.2 20.76,14.81C20.76,14.6 20.75,14.37 20.71,14.15C21.46,13.81 22,13.04 22,12.14M7,13.7C7,12.84 7.68,12.14 8.54,12.14C9.4,12.14 10.1,12.84 10.1,13.7A1.56,1.56 0 0,1 8.54,15.26C7.68,15.28 7,14.56 7,13.7M15.71,17.84C14.63,18.92 12.59,19 12,19C11.39,19 9.35,18.9 8.29,17.84C8.13,17.68 8.13,17.43 8.29,17.27C8.45,17.11 8.7,17.11 8.86,17.27C9.54,17.95 11,18.18 12,18.18C13,18.18 14.47,17.95 15.14,17.27C15.3,17.11 15.55,17.11 15.71,17.27C15.85,17.43 15.85,17.68 15.71,17.84M15.42,15.28C14.56,15.28 13.86,14.58 13.86,13.72A1.56,1.56 0 0,1 15.42,12.16C16.28,12.16 17,12.86 17,13.72C17,14.56 16.28,15.28 15.42,15.28Z" />
 		</svg>
-		<br/>
 		Reddit
 	</button>
 	<button class="button_full_width" on:click={share_twitter}>
 		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
 			<path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" />
 		</svg>
-		<br/>
 		Twitter
 	</button>
 	<button class="button_full_width" on:click={share_facebook}>
 		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
 			<path d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M18,5H15.5A3.5,3.5 0 0,0 12,8.5V11H10V14H12V21H15V14H18V11H15V9A1,1 0 0,1 16,8H18V5Z" />
 		</svg>
-		<br/>
 		Facebook
 	</button>
 	<button class="button_full_width" on:click={share_tumblr}>
 		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24">
 			<path d="M17,11H13V15.5C13,16.44 13.28,17 14.5,17H17V21C17,21 15.54,21.05 14.17,21.05C10.8,21.05 9.5,19 9.5,16.75V11H7V7C10.07,6.74 10.27,4.5 10.5,3H13V7H17" />
 		</svg>
-		<br/>
 		Tumblr
 	</button>
 </div>
@@ -83,6 +78,7 @@ const share_tumblr = () => {
 	opacity: 1;
 }
 .button_full_width {
+	flex-direction: column;
 	width: calc(100% - 6px);
 }
 .button_full_width > svg {
--- a/svelte/src/filesystem/Breadcrumbs.svelte
+++ b/svelte/src/filesystem/Breadcrumbs.svelte
@@ -33,6 +33,7 @@ export let fs_navigator
 	justify-content: center;
 	flex-wrap: wrap;
 	flex-direction: row;
+	overflow: hidden;
 }
 .breadcrumb {
 	min-width: 1em;
@@ -44,15 +45,15 @@ export let fs_navigator
 	flex-direction: row;
 }
 .node_name {
-	margin: 6px 8px;
+	margin: 2px 8px;
 	max-width: 20vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 .node_name.base {
-	max-width: none;
-	white-space: unset;
+	/* The base name uses all available space */
+	max-width: unset;
 }
 .nopad {
 	margin-left: 0;
--- a/svelte/src/filesystem/EditWindow.svelte
+++ b/svelte/src/filesystem/EditWindow.svelte
@@ -2,6 +2,7 @@
 import { fs_delete_all, fs_rename, fs_update } from "./FilesystemAPI";
 import Modal from "../util/Modal.svelte";
 import { createEventDispatcher } from "svelte";
+import Button from "../layout/Button.svelte";

 let dispatch = createEventDispatcher()

@@ -66,7 +67,9 @@ const save = async () => {
 		fs_navigator.reload()
 	}
 }
-const delete_file = async () => {
+const delete_file = async e => {
+	e.preventDefault()
+
 	try {
 		dispatch("loading", true)
 		await fs_delete_all(file.path)
@@ -110,9 +113,7 @@ const delete_file = async () => {
 					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 on:click|preventDefault={delete_file} class="button_red" style="align-self: flex-start;">
-					<i class="icon small">delete</i> Delete
-				</button>
+				<Button click={delete_file} red icon="delete" label="Delete" style="align-self: flex-start;"/>
 			</div>
 		{:else if tab === "share"}
 			<div class="form">
--- a/svelte/src/filesystem/FileStats.svelte
+++ b/svelte/src/filesystem/FileStats.svelte
@@ -113,18 +113,16 @@ onDestroy(close_socket)
 <style>
 .group {
 	flex: 1 1 auto;
+	text-align: center;
 }
 .label {
 	padding-left: 0.5em;
 	text-align: left;
 	font-size: 0.75em;
-	line-height: 0.7em;
+	line-height: 0.75em;
 	margin-top: 0.5em;
 }
-.stat {
-	text-align: center;
-}
-@media (max-width: 700px) {
+@media (max-width: 600px) {
 	.label {
 		text-align: center;
 		padding-left: 0;
--- a/svelte/src/filesystem/Filesystem.svelte
+++ b/svelte/src/filesystem/Filesystem.svelte
@@ -1,6 +1,5 @@
 <script>
 import { onMount } from 'svelte';
-import PixeldrainLogo from '../util/PixeldrainLogo.svelte';
 import LoadingIndicator from '../util/LoadingIndicator.svelte';
 import EditWindow from './EditWindow.svelte';
 import Toolbar from './Toolbar.svelte';
@@ -14,6 +13,7 @@ import HomeButton from '../file_viewer/HomeButton.svelte';
 import { fs_path_url } from './FilesystemUtil';

 let loading = true
+let toolbar
 let upload_widget
 let download_frame
 let details_visible = false
@@ -47,6 +47,9 @@ const keydown = e => {
 	}

 	switch (e.key) {
+		case "c":
+			toolbar.copy_link()
+			break;
 		case "i":
 			details_visible = !details_visible
 			break;
@@ -113,7 +116,7 @@ const loading_evt = e => {
 <div class="file_viewer">
 	<div class="headerbar">
 		<div>
-			<HomeButton/>
+			<HomeButton nobg/>
 		</div>

 		<Breadcrumbs state={state} fs_navigator={fs_navigator}/>
@@ -121,6 +124,7 @@ const loading_evt = e => {

 	<div class="viewer_area">
 		<Toolbar
+			bind:this={toolbar}
 			fs_navigator={fs_navigator}
 			state={state}
 			bind:details_visible={details_visible}
@@ -220,7 +224,7 @@ const loading_evt = e => {
 	flex-direction: row;
 	overflow: hidden;
 }
-@media (max-width: 700px) {
+@media (max-width: 600px) {
 	.viewer_area {
 		flex-direction: column-reverse;
 	}
--- a/svelte/src/filesystem/Toolbar.svelte
+++ b/svelte/src/filesystem/Toolbar.svelte
@@ -23,7 +23,7 @@ export let edit_visible = false

 $: share_url = generate_share_url(state.path)
 let link_copied = false
-const copy_link = () => {
+export const copy_link = () => {
 	if (share_url === "") {
 		edit_window.edit(state.base, "share", true)
 		return
@@ -86,34 +86,40 @@ let expand = e => {
 		</div>

 		{#if state.path[0].id === "me"}
-			<button on:click={() => dispatch("search")} class="toolbar_button" class:button_highlight={view === "search"}>
-				<i class="icon">search</i> Search
+			<button on:click={() => dispatch("search")} class:button_highlight={view === "search"}>
+				<i class="icon">search</i>
+				<span>Search</span>
 			</button>
 		{/if}

 		{#if state.base.type === "file"}
-			<button on:click={() => dispatch("download")} class="toolbar_button">
-				<i class="icon">save</i> Download
+			<button on:click={() => dispatch("download")}>
+				<i class="icon">save</i>
+				<span>Download</span>
 			</button>
 		{/if}

 		{#if share_url !== ""}
-			<button id="btn_copy" class="toolbar_button" on:click={copy_link} class:button_highlight={link_copied}>
-				<i class="icon">content_copy</i> <u>C</u>opy Link
+			<button on:click={copy_link} class:button_highlight={link_copied}>
+				<i class="icon">content_copy</i>
+				<span><u>C</u>opy Link</span>
 			</button>
 		{/if}

-		<button on:click={share} class="toolbar_button">
-			<i class="icon">share</i> Share
+		<button on:click={share}>
+			<i class="icon">share</i>
+			<span>Share</span>
 		</button>

-		<button on:click={() => details_visible = !details_visible} class="toolbar_button" class:button_highlight={details_visible}>
-			<i class="icon">help</i> Deta<u>i</u>ls
+		<button on:click={() => details_visible = !details_visible} class:button_highlight={details_visible}>
+			<i class="icon">help</i>
+			<span>Deta<u>i</u>ls</span>
 		</button>

 		{#if state.path.length > 1}
-			<button on:click={() => edit_window.edit(state.base, true)} class="toolbar_button" class:button_highlight={edit_visible}>
-				<i class="icon">edit</i> <u>E</u>dit
+			<button on:click={() => edit_window.edit(state.base, true)} class:button_highlight={edit_visible}>
+				<i class="icon">edit</i>
+				<span><u>E</u>dit</span>
 			</button>
 		{/if}
 	</div>
@@ -134,12 +140,8 @@ let expand = e => {
 .separator {
 	height: 2px;
 	width: 100%;
-	margin: 4px 0;
 	background-color: var(--separator);
 }
-.toolbar_button {
-	text-align: left;
-}

 .button_row {
 	display: flex;
@@ -147,6 +149,7 @@ let expand = e => {
 }
 .button_row > * {
 	flex: 1 1 auto;
+	justify-content: center;
 }

 .stats_container {
@@ -156,14 +159,14 @@ let expand = e => {
 .button_expand {
 	display: none;
 }
-@media (max-width: 700px) {
+@media (max-width: 600px) {
 	.toolbar {
 		overflow-y: hidden;
 		max-height: 2.5em;
 	}
 	.toolbar.expanded {
 		overflow-y: scroll;
-		max-height: 25vh;
+		max-height: 40vh;
 	}
 	.stats_container {
 		flex-direction: row;
--- a/svelte/src/home_page/UploadWidget.svelte
+++ b/svelte/src/home_page/UploadWidget.svelte
@@ -351,12 +351,12 @@ const keydown = (e) => {
 <input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple"/>
 <button on:click={() => { file_input_field.click() }} class="big_button button_highlight">
 	<i class="icon small">cloud_upload</i>
-	<u>U</u>pload Files
+	<span><u>U</u>pload Files</span>
 </button>

 <a bind:this={btn_upload_text} href="/t" id="upload_text_button" class="button big_button button_highlight">
 	<i class="icon small">text_fields</i>
-	Upload <u>T</u>ext
+	<span>Upload <u>T</u>ext</span>
 </a>
 <br/>
 <p>
@@ -448,13 +448,16 @@ const keydown = (e) => {
 	<br/>
 {/if}
 <button bind:this={btn_copy_links} on:click={copy_links} disabled={state !== "finished"}>
-	<i class="icon">content_copy</i> Copy <u>a</u>ll links to clipboard
+	<i class="icon">content_copy</i>
+	<span>Copy <u>a</u>ll links to clipboard</span>
 </button>
 <button bind:this={btn_copy_markdown} on:click={copy_markdown} disabled={state !== "finished"}>
-	<i class="icon">content_copy</i> Copy mark<u>d</u>own to clipboard
+	<i class="icon">content_copy</i>
+	<span>Copy mark<u>d</u>own to clipboard</span>
 </button>
 <button bind:this={btn_copy_bbcode} on:click={copy_bbcode} disabled={state !== "finished"}>
-	<i class="icon">content_copy</i> Copy <u>B</u>BCode to clipboard
+	<i class="icon">content_copy</i>
+	<span>Copy <u>B</u>BCode to clipboard</span>
 </button>
 <br/>

@@ -491,13 +494,14 @@ const keydown = (e) => {
 <br/>

 <style>
-.big_button{
+.big_button {
 	width: 40%;
 	min-width: 300px;
 	max-width: 400px;
 	margin: 10px !important;
 	border-radius: 32px;
 	font-size: 1.8em;
+	justify-content: center;
 }
 .instruction {
 	border-top: 1px solid var(--separator);
--- a/svelte/src/layout/Button.svelte
+++ b/svelte/src/layout/Button.svelte
@@ -0,0 +1,64 @@
+<script>
+export let highlight = false;
+export let red = false;
+export let round = false;
+export let flat = false;
+export let icon = ""
+export let icon_small = false;
+export let label = ""
+export let link_href = ""
+export let link_target = ""
+export let click = e => {}
+export let style = ""
+export let type = ""
+export let form = ""
+</script>
+
+{#if link_target === ""}
+	<button
+		on:click={click}
+		class="button"
+		class:button_highlight={highlight}
+		class:button_red={red}
+		class:round
+		class:flat
+		style={style}
+		type={type}
+		form={form}
+	>
+		{#if icon !== ""}
+			<i class="icon" class:small={icon_small}>{icon}</i>
+		{/if}
+		{#if label !== ""}
+			<span>{label}</span>
+		{/if}
+	</button>
+{:else}
+	<a
+		href="{link_href}"
+		target={link_target}
+		class="button"
+		class:button_highlight={highlight}
+		class:button_red={red}
+		class:round
+		class:flat
+		style={style}
+	>
+		{#if icon !== ""}
+			<i class="icon" class:small={icon_small}>{icon}</i>
+		{/if}
+		{#if label !== ""}
+			<span>{label}</span>
+		{/if}
+	</a>
+{/if}
+
+<style>
+.button {
+	flex: 0 0 content;
+}
+.flat {
+	background: none;
+	margin: 0;
+}
+</style>
--- a/svelte/src/util/Modal.svelte
+++ b/svelte/src/util/Modal.svelte
@@ -7,6 +7,7 @@ let global_index = 10000;
 <script>
 import { createEventDispatcher } from 'svelte';
 import { fade } from 'svelte/transition';
+import Button from '../layout/Button.svelte';

 // Form can be used to turn the modal into a save dialog. Enter the ID of a form
 // inside the modal and the modal will provide a submit button for that form
@@ -72,23 +73,12 @@ const keydown = e => {
 			<div class="header">
 				<slot name="title">
 					{#if form !== ""}
-						<button class="button" on:click={hide}>
-							<i class="icon">close</i> Cancel
-						</button>
+						<Button click={hide} icon="close" label="Cancel"/>
 						<div class="title">{title}</div>
-						<button
-							class="button button_highlight"
-							type="submit"
-							form="{form}"
-							on:click={hide}
-						>
-							<i class="icon">save</i> Save
-						</button>
+						<Button highlight type="submit" form={form} click={hide} icon="save" label="Save"/>
 					{:else}
 						<div class="title">{title}</div>
-						<button class="button round" on:click={hide}>
-							<i class="icon">close</i>
-						</button>
+						<Button round click={hide} icon="close" />
 					{/if}
 				</slot>
 			</div>
@@ -156,10 +146,6 @@ these padding divs to move it 25% up */
 	text-overflow: ellipsis;
 	overflow: hidden;
 }
-.button {
-	flex-grow: 0;
-	flex-shrink: 0;
-}
 .body {
 	flex-grow: 1;
 	flex-shrink: 1;
--- a/svelte/src/util/TabMenu.svelte
+++ b/svelte/src/util/TabMenu.svelte
@@ -64,8 +64,8 @@ onMount(() => get_page())
 					href="{page.path}"
 					class:button_highlight={current_page && page.path === current_page.path}
 					on:click|preventDefault={() => {navigate(page.path, page.title)}}>
-					<i class="icon">{page.icon}</i><br/>
-					{page.title}
+					<i class="icon">{page.icon}</i>
+					<span>{page.title}</span>
 				</a>
 			{/if}
 		{/each}
@@ -82,8 +82,8 @@ onMount(() => get_page())
 							href="{page.path}"
 							class:button_highlight={current_subpage && page.path === current_subpage.path}
 							on:click|preventDefault={() => {navigate(page.path, page.title)}}>
-							<i class="icon">{page.icon}</i><br/>
-							{page.title}
+							<i class="icon">{page.icon}</i>
+							<span>{page.title}</span>
 						</a>
 					{/if}
 				{/each}
@@ -101,7 +101,11 @@ onMount(() => get_page())
 <Footer/>

 <style>
-.submenu{
+.submenu {
 	border-bottom: 2px solid var(--separator);
 }
+.tab_bar > .button {
+	flex-direction: column;
+	gap: 0;
+}
 </style>