Finish top menu for now

Orbitale · Sep 13, 2024 · 2cdcc5a · 2cdcc5a
1 parent b50ce6b
commit 2cdcc5a
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 90 deletions.
diff --git a/package.json b/package.json
@@ -69,6 +69,7 @@
         "@smui/menu": "^7.0.0",
         "@smui/paper": "^7.0.0",
         "@smui/ripple": "^7.0.0",
+		"@smui/tooltip": "^7.0.0",
 		"@smui/top-app-bar": "^7.0.0",
 		"@sveltejs/adapter-auto": "^2.1.1",
 		"@sveltejs/adapter-static": "^2.0.3",
@@ -87,7 +88,7 @@
 		"prettier-plugin-svelte": "^3.2.6",
 		"publint": "^0.2.10",
 		"sass": "^1.78.0",
-        "smui-theme": "^7.0.0-beta.15",
+        "smui-theme": "^7.0.0",
 		"svelte-check": "^3.8.6",
 		"svelte-material-ui": "^7.0.0",
 		"tslib": "^2.7.0",

diff --git a/src/lib/themes/material3/Dashboard/Dashboard.svelte b/src/lib/themes/material3/Dashboard/Dashboard.svelte
@@ -1,6 +1,6 @@
 <svelte:options
 	customElement={{
-		tag: 'sa-dashboard',
+		tag: 'sa-m3-dashboard',
 		props: {
 			dashboard: { reflect: false, type: 'Object' },
 			crud: { reflect: true, type: 'String' },

diff --git a/src/lib/themes/material3/Layout/AdminLayout.svelte b/src/lib/themes/material3/Layout/AdminLayout.svelte
@@ -31,9 +31,7 @@
 	});
 </script>
 
-<svelte:head>
-
-</svelte:head>
+<svelte:head></svelte:head>
 
 <slot name="top_menu">
 	<TopMenu {adminConfig} left_links={top_left_menu_links} right_links={top_right_menu_links} />

diff --git a/src/lib/themes/material3/Menu/InternalSubmenu.svelte b/src/lib/themes/material3/Menu/InternalSubmenu.svelte
@@ -1,64 +1,63 @@
 <script lang="ts">
-    import {Divider, type MenuLink, Submenu} from "$lib/Menu/MenuLinks.ts";
-    import Menu from '@smui/menu';
-    import IconButton from '@smui/icon-button/dist/IconButton.svelte';
-    import Section from '@smui/top-app-bar/dist/Section.svelte';
-    import List, {
-        Item,
-        Separator,
-        Text,
-        PrimaryText,
-        SecondaryText,
-    } from '@smui/list';
-    import {_} from "svelte-i18n";
-    import {CallbackAction, Icon, UrlAction} from "$lib";
-    import Button, {Label} from "@smui/button";
+	import Menu from '@smui/menu';
+	import IconButton from '@smui/icon-button/dist/IconButton.svelte';
+	import List, { Item, Separator } from '@smui/list';
+	import { _ } from 'svelte-i18n';
+	import Button, { Label } from '@smui/button';
 
-    export let link: MenuLink;
-    let submenu: Menu;
+	import { Divider, type MenuLink } from '$lib/Menu/MenuLinks.ts';
+	import { CallbackAction, Icon, UrlAction } from '$lib';
+
+	export let link: MenuLink;
+	let submenu: Menu;
+
+	let isOpen: boolean;
+	let icon: string = '';
+
+	$: {
+		icon = isOpen ? 'arrow_drop_up' : 'arrow_drop_down';
+	}
 </script>
 
-<Section toolbar>
-    <IconButton class="material-icons" on:click={submenu.setOpen(true)}>menu</IconButton>
-    <Menu bind:this={submenu}>
-        {#if link.icon}
-            <svelte:component this={link.icon} />
-        {/if}
-        <List twoLine>
-            {#each link.links as submenuLink}
-                {#if submenuLink instanceof Divider}
-                    <br />
-                {:else if submenuLink instanceof UrlAction}
-                    <Section toolbar>
-                        <a href={submenuLink.url()}>
-                            {#if submenuLink.icon}
-                                <Icon icon={submenuLink.icon} />
-                            {/if}
-                            {submenuLink.label ? $_(submenuLink.label) : ''}
-                        </a>
-                    </Section>
-                {:else if submenuLink instanceof CallbackAction}
-                    <Section toolbar>
-                        <Button tag="span" type="button" on:click={() => submenuLink.call()}>
-                            {#if submenuLink.icon}
-                                <Icon icon={submenuLink.icon} />
-                            {/if}
-                            {submenuLink.label ? $_(submenuLink.label) : ''}
-                        </Button>
-                    </Section>
-                {:else}
-                    <Section toolbar>
-                        {#if submenuLink.icon}
-                            <Icon icon={submenuLink.icon} />
-                        {/if}
-                        <Label>{submenuLink.label ? $_(submenuLink.label) : ''}</Label>
-                    </Section>
-                {/if}
-            {/each}
-        </List>
-    </Menu>
+<IconButton class="material-icons" on:click={submenu.setOpen(true)}>{icon}</IconButton>
+<Menu bind:this={submenu} bind:open={isOpen} anchorCorner="BOTTOM_LEFT">
+	{#if link.icon}
+		<svelte:component this={link.icon} />
+	{/if}
+	<List dense>
+		{#each link.links as submenuLink}
+			{#if submenuLink instanceof Divider}
+				<Separator />
+			{:else if submenuLink instanceof UrlAction}
+				<Item>
+					<a href={submenuLink.url()}>
+						{#if submenuLink.icon}
+							<Icon icon={submenuLink.icon} />
+						{/if}
+						{submenuLink.label ? $_(submenuLink.label) : ''}
+					</a>
+				</Item>
+			{:else if submenuLink instanceof CallbackAction}
+				<Item>
+					<Button tag="span" type="button" on:click={() => submenuLink.call()}>
+						{#if submenuLink.icon}
+							<Icon icon={submenuLink.icon} />
+						{/if}
+						{submenuLink.label ? $_(submenuLink.label) : ''}
+					</Button>
+				</Item>
+			{:else}
+				<Item>
+					{#if submenuLink.icon}
+						<Icon icon={submenuLink.icon} />
+					{/if}
+					<Label>{submenuLink.label ? $_(submenuLink.label) : ''}</Label>
+				</Item>
+			{/if}
+		{/each}
+	</List>
+</Menu>
 
-</Section>
 <!--
 
 <HeaderNavMenu icon={link.icon || Folder} text={link.label ? $_(link.label) : ''}>

diff --git a/src/lib/themes/material3/Menu/TopLeftMenu.svelte b/src/lib/themes/material3/Menu/TopLeftMenu.svelte
@@ -1,45 +1,75 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
+	import IconButton from '@smui/icon-button/dist/IconButton.svelte';
+	import { Title } from '@smui/top-app-bar';
+	import Tooltip, { Wrapper } from '@smui/tooltip';
 	import Section from '@smui/top-app-bar/dist/Section.svelte';
-	import Button, { Label } from '@smui/button';
 
 	import { Divider, type MenuLink, Submenu } from '$lib/Menu/MenuLinks';
 	import { CallbackAction, UrlAction } from '$lib/actions';
 	import InternalSubmenu from './InternalSubmenu.svelte';
-	import {Icon} from "$lib";
+	import { Icon } from '$lib';
 
 	export let links: Array<MenuLink> = [];
 </script>
 
 {#each links as link}
 	{#if link instanceof Submenu}
-		<InternalSubmenu {link} />
+		<Section>
+			<InternalSubmenu {link} />
+		</Section>
 	{:else if link instanceof Divider}
-		<br />
+		<Section>|</Section>
 	{:else if link instanceof UrlAction}
-		<Section toolbar>
-			<a href={link.url()}>
-				{#if link.icon}
-					<Icon icon={link.icon} />
-				{/if}
-				{link.label ? $_(link.label) : ''}
-			</a>
+		<Section>
+			<IconButton tag="a" href={link.url()}>
+				<Wrapper>
+					{#if link.icon}
+						<Icon icon={link.icon} />
+					{:else}
+						<i class="material-icons">link</i>
+					{/if}
+					{#if link.label}
+						<Tooltip>
+							{link.label ? $_(link.label) : ''}
+						</Tooltip>
+					{/if}
+				</Wrapper>
+			</IconButton>
 		</Section>
 	{:else if link instanceof CallbackAction}
-		<Section toolbar>
-			<Button tag="span" type="button" on:click={() => link.call()}>
-				{#if link.icon}
-					<Icon icon={link.icon} />
-				{/if}
-				{link.label ? $_(link.label) : ''}
-			</Button>
+		<Section>
+			<IconButton on:click={() => link.call()}>
+				<Wrapper>
+					{#if link.icon}
+						<Icon icon={link.icon} />
+					{:else}
+						<i class="material-icons">article</i>
+					{/if}
+					{#if link.label}
+						<Tooltip>
+							{link.label ? $_(link.label) : ''}
+						</Tooltip>
+					{/if}
+				</Wrapper>
+			</IconButton>
 		</Section>
 	{:else}
-		<Section toolbar>
-			{#if link.icon}
-				<Icon icon={link.icon} />
-			{/if}
-			<Label>{link.label ? $_(link.label) : ''}</Label>
+		<Section>
+			<Title>
+				<Wrapper>
+					{#if link.icon}
+						<Icon icon={link.icon} />
+					{:else}
+						<i class="material-icons">link</i>
+					{/if}
+					{#if link.label}
+						<Tooltip>
+							{link.label ? $_(link.label) : ''}
+						</Tooltip>
+					{/if}
+				</Wrapper>
+			</Title>
 		</Section>
 	{/if}
 {/each}
diff --git a/src/lib/themes/material3/Menu/TopMenu.svelte b/src/lib/themes/material3/Menu/TopMenu.svelte
@@ -19,18 +19,20 @@
 
 <TopAppBar variant="static" dense={true} color="primary">
 	<Row>
-		<TopLeftMenu links={left_links} />
-		<Section toolbar>
+		<Section align="start">
 			{#if adminConfig?.head?.brandName}
 				<Title>{adminConfig.head.brandName}</Title>
 			{/if}
 			{#if adminConfig?.head?.appName}
 				<Title><small>{adminConfig.head.appName}</small></Title>
 			{/if}
 		</Section>
-		{#if right_links.length}
-			<TopRightMenu links={right_links} />
-		{/if}
+		<TopLeftMenu links={left_links} />
+		<Section align="end">
+			{#if right_links.length}
+				<TopRightMenu links={right_links} />
+			{/if}
+		</Section>
 	</Row>
 </TopAppBar>
 

diff --git a/src/testApp/Dashboard.ts b/src/testApp/Dashboard.ts
@@ -4,7 +4,7 @@ import Home from 'carbon-icons-svelte/lib/Home.svelte';
 import Menu from 'carbon-icons-svelte/lib/Menu.svelte';
 import Switcher from 'carbon-icons-svelte/lib/Switcher.svelte';
 
-import { DashboardDefinition, CallbackAction, UrlAction, Submenu } from '$lib';
+import { DashboardDefinition, Divider, CallbackAction, UrlAction, Submenu } from '$lib';
 import { material as theme } from '$lib/themes/svelte';
 
 import fr from './translations/fr';
@@ -36,6 +36,7 @@ export const dashboard = new DashboardDefinition({
 	topLeftMenu: [
 		new UrlAction('Homepage', '/', Home),
 		new UrlAction('Books', '/admin/books/list', Book),
+		new Divider(),
 		new CallbackAction('Callback link', null, (item?: object | undefined) => {
 			alert('Hey, this link is called with Javascript!');
 		}),
@@ -47,6 +48,7 @@ export const dashboard = new DashboardDefinition({
 	sideMenu: [
 		new UrlAction('Homepage', '/', Home),
 		new UrlAction('Books', '/admin/books/list', Book),
+		new Divider(),
 		new CallbackAction('Callback link', null, () => {
 			alert('Hey, this link is called with Javascript!');
 		}),