feat: unify header across views (#598)

zeno-ml · Dec 27, 2023 · 06954d2 · 06954d2
1 parent 3f0c011
commit 06954d2
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 150 deletions.
diff --git a/frontend/src/lib/components/general/Header.svelte b/frontend/src/lib/components/general/Header.svelte
@@ -1,34 +1,49 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
-	import type { Report, User, ZenoService } from '$lib/zenoapi';
-	import { mdiFileChartOutline, mdiLinkVariant, mdiPlus } from '@mdi/js';
+	import { tooltip } from '$lib/util/tooltip';
+	import type { Project, Report, User, ZenoService } from '$lib/zenoapi';
+	import {
+		mdiCog,
+		mdiFileChartOutline,
+		mdiLinkVariant,
+		mdiPlus,
+		mdiViewGridOutline
+	} from '@mdi/js';
 	import Button, { Icon } from '@smui/button';
 	import IconButton from '@smui/icon-button';
 	import { getContext } from 'svelte';
 	import { fade } from 'svelte/transition';
+	import HelpButton from './HelpButton.svelte';
 	import LikeButton from './LikeButton.svelte';
 	import UserButton from './UserButton.svelte';
 
 	export let user: User | null = null;
 	export let report: Report | null = null;
+	export let project: Project | null = null;
 	export let showNewReport = false;
 	export let numLikes = 0;
 	export let userLiked = false;
-	export let reportEdit = false;
+	export let editPopup = false;
 
 	const zenoClient = getContext('zenoClient') as ZenoService;
+	const exploreTab = $page.route.id === '/(app)/home';
 
 	let linkCopied = false;
 </script>
 
-<div class="mx-6 my-4 flex h-8 items-center justify-between">
-	<div class="flex h-full items-center">
+<div
+	class="{project
+		? 'border-b border-grey-lighter bg-yellowish-light px-3'
+		: 'px-6'} flex h-16 w-full flex-shrink-0 flex-col items-center justify-between sm:flex-row"
+>
+	<div class="flex h-full w-full items-center">
 		<a href="/" class="shrink-0">
 			<img src="/zeno-logo.png" class="h-8" alt="diamond tesselation logo" />
 		</a>
 		{#if $page.route.id?.startsWith('/(app)/home/')}
-			<div class="flex h-full md:ml-2 md:mt-0">
-				<Button class="h-full" on:click={() => (showNewReport = true)}>
+			<div class="flex h-full items-center md:ml-2 md:mt-0">
+				<Button on:click={() => (showNewReport = true)}>
 					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="mr-2 w-6 fill-primary">
 						<path d={mdiPlus} />
 					</svg>
@@ -38,42 +53,92 @@
 		{/if}
 		{#if report}
 			<div class="ml-5 hidden items-center sm:flex">
-				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class=" w-6 fill-grey-dark">
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6">
 					<path d={mdiFileChartOutline} />
 				</svg>
-				<p class="ml-1 mr-6 text-grey-dark">{report.name}</p>
+				<h4 class="ml-1 mr-6 text-lg">{report.name}</h4>
 				<LikeButton
 					on:like={() => (report ? zenoClient.likeReport(report.id) : '')}
 					{user}
 					likes={numLikes}
 					liked={userLiked}
 					report={false}
 				/>
-				<IconButton
-					class="ml-2"
-					on:click={(e) => {
-						e.stopPropagation();
-						linkCopied = true;
-						navigator.clipboard.writeText(window.location.href);
-						setTimeout(() => (linkCopied = false), 2000);
-					}}
-				>
-					<Icon tag="svg" viewBox="0 0 24 24">
-						<path fill="black" d={mdiLinkVariant} />
-					</Icon>
-				</IconButton>
-				{#if linkCopied}
-					<p class="ml-2 text-grey-dark" transition:fade>Report link copied to clipboard</p>
-				{/if}
 			</div>
+		{:else if project}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 24 24"
+				class="ml-5 mr-2 w-6 flex-shrink-0"
+			>
+				<path d={mdiViewGridOutline} />
+			</svg>
+			{#if project.description}
+				<h1
+					class="mr-6 overflow-ellipsis whitespace-nowrap text-lg"
+					use:tooltip={{ text: project.description }}
+					style="max-width: 100%; overflow: hidden; text-overflow: ellipsis;"
+				>
+					{project.name}
+				</h1>
+			{:else}
+				<h1
+					class="mr-6 overflow-ellipsis whitespace-nowrap text-lg"
+					style="max-width: 100%; overflow: hidden; text-overflow: ellipsis;"
+				>
+					{project.name}
+				</h1>
+			{/if}
+			<LikeButton
+				on:like={() => (project ? zenoClient.likeProject(project.uuid) : '')}
+				{user}
+				likes={numLikes}
+				liked={userLiked}
+				report={false}
+			/>
+		{/if}
+		{#if project || report}
+			<IconButton
+				class="ml-2"
+				on:click={(e) => {
+					e.stopPropagation();
+					linkCopied = true;
+					if (project) {
+						navigator.clipboard.writeText(window.location.href.split('/explore')[0]);
+					} else {
+						navigator.clipboard.writeText(window.location.href);
+					}
+					setTimeout(() => (linkCopied = false), 2000);
+				}}
+			>
+				<Icon tag="svg" viewBox="0 0 24 24">
+					<path fill="black" d={mdiLinkVariant} />
+				</Icon>
+			</IconButton>
+		{/if}
+		{#if linkCopied}
+			<p class="ml-2 text-grey-dark" transition:fade>Link copied to clipboard</p>
 		{/if}
 	</div>
-	<div class="flex h-full shrink-0 items-center">
-		{#if report && report.editor}
+	<div class="hidden h-full shrink-0 items-center sm:flex">
+		<HelpButton />
+		{#if (report && report.editor) || (project && project.editor)}
+			<button
+				class="mr-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-grey-light text-primary transition hover:bg-primary-mid"
+				on:click={() => (editPopup = true)}
+				use:tooltip={{ text: 'Preferences' }}
+			>
+				<Icon tag="svg" viewBox="0 0 24 24" class="w-5 fill-primary">
+					<path d={mdiCog} />
+				</Icon>
+			</button>
+		{/if}
+		{#if user && $page.route.id?.startsWith('/(app)/home')}
 			<Button
-				class="mr-4 mt-2 shrink-0 sm:mt-0"
+				class="mr-3"
 				variant="outlined"
-				on:click={() => (reportEdit = true)}>Settings</Button
+				on:click={() => (exploreTab ? goto('/') : goto('/home'))}
+				>{exploreTab ? 'My Hub' : 'Explore'}</Button
 			>
 		{/if}
 		<UserButton {user} />

diff --git a/frontend/src/lib/components/general/HelpButton.svelte b/frontend/src/lib/components/general/HelpButton.svelte
@@ -11,9 +11,9 @@
 	let docsLink = 'https://zenoml.com/docs/intro';
 </script>
 
-<div class="relative">
+<div class="relative mr-2">
 	<button
-		class="mr-3 h-8 w-8 rounded-full border border-grey-light text-xl capitalize text-primary transition hover:bg-primary-dark"
+		class="h-8 w-8 rounded-full border border-grey-light text-xl capitalize text-primary transition hover:bg-primary-dark"
 		use:tooltip={{ text: 'Help' }}
 		on:click={() => (showOptions = !showOptions)}
 	>

diff --git a/frontend/src/lib/components/general/UserButton.svelte b/frontend/src/lib/components/general/UserButton.svelte
@@ -1,38 +1,24 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
 	import { tooltip } from '$lib/util/tooltip';
 	import type { User } from '$lib/zenoapi';
 	import Button from '@smui/button';
-	import HelpButton from './HelpButton.svelte';
 
 	export let user: User | null;
-
-	const exploreTab = $page.route.id === '/(app)/home';
 </script>
 
 <div class="flex h-full w-max items-center">
 	{#if user}
-		{#if $page.route.id?.startsWith('/(app)/home')}
-			<Button
-				class="mr-3 h-full"
-				variant="outlined"
-				on:click={() => (exploreTab ? goto('/') : goto('/home'))}
-				>{exploreTab ? 'My Hub' : 'Explore'}</Button
-			>
-		{/if}
-		<HelpButton />
 		<button
-			class="h-8 w-8 rounded-full bg-primary font-extrabold capitalize text-white transition hover:bg-primary-dark"
+			class="h-8 w-8 rounded-full bg-primary font-extrabold capitalize text-white transition hover:bg-primary-mid"
 			use:tooltip={{ text: 'My Account' }}
 			on:click={() => goto('/account')}
 		>
 			{user.name.slice(0, 2)}
 		</button>
 	{:else}
-		<HelpButton />
 		<div class="h-8">
-			<Button class="mr-3 h-full" variant="raised" on:click={() => goto('/signup')}>Sign Up</Button>
+			<Button class="mr-2 h-full" variant="raised" on:click={() => goto('/signup')}>Sign Up</Button>
 			<Button class="h-full" variant="outlined" on:click={() => goto('/login')}>Log In</Button>
 		</div>
 	{/if}

diff --git a/frontend/src/lib/components/project/ProjectHeader.svelte b/frontend/src/lib/components/project/ProjectHeader.svelte
diff --git a/frontend/src/lib/components/project/ProjectSidebar.svelte b/frontend/src/lib/components/project/ProjectSidebar.svelte
@@ -15,25 +15,13 @@
 	$: currentTab = $page.url.href.split('/').pop();
 </script>
 
-<nav class="z-20 flex md:hidden">
-	<header
-		class="flex w-full flex-col items-center justify-between border-r border-x-grey-lighter bg-yellowish text-grey"
-	>
-		<a href="/">
-			<img class="w-8 pb-2 pt-2" src="/zeno.png" alt="Square spiral logo next to 'Zeno'" />
-		</a>
-	</header>
-</nav>
 <nav class="z-20 hidden md:flex">
 	<header
 		class="flex h-full w-12 flex-col items-center justify-between border-r border-x-grey-lighter bg-yellowish-light text-grey"
 	>
 		<div class="flex flex-col items-center justify-center">
-			<a href="/">
-				<img class="mt-3 w-8" src="/zeno.png" alt="Square spiral logo next to 'Zeno'" />
-			</a>
 			{#if $page.url.href.includes('project/')}
-				<div class="mt-3 flex flex-col">
+				<div class="flex flex-col">
 					<HeaderIcon
 						pageName={'explore'}
 						tooltipContent={'Explore your data and system outputs'}

diff --git a/frontend/src/routes/(app)/project/[uuid]/[name]/+layout.svelte b/frontend/src/routes/(app)/project/[uuid]/[name]/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Header from '$lib/components/general/Header.svelte';
+	import ProjectPopup from '$lib/components/popups/ProjectPopup.svelte';
 	import ProjectSidebar from '$lib/components/project/ProjectSidebar.svelte';
 	import {
 		columns,
@@ -25,6 +27,8 @@
 
 	export let data;
 
+	let projectEdit = false;
+
 	// Only set stores and subscriptions if the project has changed.
 	if ($project === undefined || $project.uuid !== data.project.uuid) {
 		project.set(data.project);
@@ -75,5 +79,20 @@
 	<meta name="description" content={data.project.description || 'Zeno Evaluation Project'} />
 </svelte:head>
 
-<ProjectSidebar />
-<slot />
+{#if projectEdit && data.user !== null}
+	<ProjectPopup config={data.project} on:close={() => (projectEdit = false)} user={data.user} />
+{/if}
+
+<div class="flex h-full min-h-0 w-full min-w-0 flex-col">
+	<Header
+		user={data.user}
+		project={data.project}
+		bind:editPopup={projectEdit}
+		userLiked={data.userLiked}
+		numLikes={data.numLikes}
+	/>
+	<div class="flex h-full min-h-0 w-full min-w-0 flex-col sm:flex-row">
+		<ProjectSidebar />
+		<slot />
+	</div>
+</div>
diff --git a/frontend/src/routes/(app)/project/[uuid]/[name]/[page=exploreOrCompare]/+page.svelte b/frontend/src/routes/(app)/project/[uuid]/[name]/[page=exploreOrCompare]/+page.svelte
@@ -3,7 +3,6 @@
 	import Banner from '$lib/components/general/Banner.svelte';
 	import Instances from '$lib/components/instances/Instances.svelte';
 	import MetadataPanel from '$lib/components/metadata/MetadataPanel.svelte';
-	import ProjectHeader from '$lib/components/project/ProjectHeader.svelte';
 	import Button from '@smui/button';
 
 	export let data;
@@ -33,18 +32,10 @@
 		</Banner>
 	</div>
 {:else}
-	<div class="flex h-full min-h-0 w-full min-w-0 flex-grow flex-col">
-		<ProjectHeader
-			project={data.project}
-			likes={data.numLikes}
-			liked={data.userLiked}
-			user={data.user}
-		/>
-		<div class="flex h-full min-h-0 w-full min-w-0">
-			<MetadataPanel compare={data.compare} />
-			<div class="flex w-full min-w-0 flex-col px-3">
-				<Instances compare={data.compare} />
-			</div>
+	<div class="flex h-full min-h-0 w-full min-w-0">
+		<MetadataPanel compare={data.compare} />
+		<div class="flex w-full min-w-0 flex-col px-3">
+			<Instances compare={data.compare} />
 		</div>
 	</div>
 {/if}