WIP: Prepare for carbon-components-svelte v1

club-1 · Aug 12, 2024 · 4e4c96e · 4e4c96e
1 parent e795a3c
commit 4e4c96e
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 6 deletions.
diff --git a/public/global.css b/public/global.css
@@ -87,7 +87,7 @@ div.file-table-cell {
 	white-space: nowrap;
 }
 
-div.file-table-cell *:not(span) {
+div.file-table-cell * {
 	text-overflow: ellipsis;
 	overflow: clip;
 }

diff --git a/src/App.svelte b/src/App.svelte
@@ -16,6 +16,7 @@
 	WebDAV-Drive. If not, see <https://www.gnu.org/licenses/>.
 -->
 <script lang="ts">
+	import "carbon-components-svelte/css/all.css";
 	import { getLocaleFromNavigator, locale, locales, _ } from "svelte-i18n";
 	import { labels } from "./locales";
 	import type { FileSystem, Quota } from "./model/FileSystem";
@@ -65,7 +66,7 @@
 	let quota: Quota | null;
 
 	$: dark = isDark(theme);
-	$: document.documentElement.setAttribute("theme", dark ? "g100" : "g10");
+	$: document.documentElement.setAttribute("data-carbon-theme", dark ? "g100" : "g10");
 	$: document.title = path;
 	$: window.location.href = `#${encodeURI(path)}`;
 	$: isSmallScreen.set(width <= 610);

diff --git a/src/main.ts b/src/main.ts
@@ -16,7 +16,6 @@
 	WebDAV-Drive. If not, see <https://www.gnu.org/licenses/>.
 */
 
-import "carbon-components-svelte/css/all.css";
 import type { Config } from "./main/Config";
 import { Core, type Module } from "./main/Core";
 

diff --git a/src/model/FileUtils.ts b/src/model/FileUtils.ts
@@ -32,6 +32,7 @@ type Header<T> = {
 type EmptyHeader = {
 	key: string,
 	empty: boolean,
+	columnMenu: boolean,
 }
 
 type Row = {
@@ -77,6 +78,7 @@ export function files2table(files: Inode[]): FileTable {
 			{
 				key: "menu",
 				empty: true,
+				columnMenu: true,
 			},
 		],
 		rows: files

diff --git a/src/view/FileList.svelte b/src/view/FileList.svelte
@@ -46,14 +46,14 @@
 	} from "carbon-components-svelte";
 	import { Add, TrashCan, Copy, Cut, Paste } from "carbon-icons-svelte";
 
-	type Size = "short" | "medium";
+	type Size = "sm" | "md";
 
 	export let fs: FileSystem;
 	export let onFileClick: (f: Inode) => unknown;
 	export let path = "/";
 
 	const isTactile = window.matchMedia("(pointer: coarse)").matches;
-	const size: Size = isTactile ? "medium" : "short";
+	const size: Size = isTactile ? "md" : "sm";
 	let files: Inode[] = [];
 	let error: Error | null = null;
 	let checked: Inode[] = [];
@@ -207,7 +207,7 @@
 				<Button
 					on:click={() => (deleteSelectedModal = true)}
 					icon={TrashCan}
-					kind="danger-ghost"
+					kind="danger--ghost"
 				>
 					{$_("Delete")}
 				</Button>

diff --git a/src/view/FileListCell.svelte b/src/view/FileListCell.svelte
@@ -37,6 +37,7 @@
 
 {#if cell.key === "menu"}
 	<OverflowMenu
+		size="sm"
 		flipped
 		iconDescription={$_("Menu")}
 		on:click={onClickMenu}