[WIP] Start on public view

src/views/public/_logo.vue

@@ -0,0 +1,23 @@
+<template functional>
+	<a href="https://directus.io" target="_blank" class="logo">
+		<img
+			v-tooltip.right="{ classes: ['inverted'], content: `Directus v${props.version}` }"
+			alt="Directus Logo"
+			src="../../assets/logo-dark.svg"
+		/>
+	</a>
+</template>
+
+<script lang="ts">
+import { version } from '../../../package.json';
+import { createComponent } from '@vue/composition-api';
+
+export default createComponent({
+	props: {
+		version: {
+			type: String,
+			required: true
+		}
+	}
+});
+</script>

src/views/public/index.ts

@@ -0,0 +1,4 @@
+import PublicView from './public-view.vue';
+
+export { PublicView };
+export default PublicView;

src/views/public/public-view.story.ts

@@ -0,0 +1,21 @@
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import Vue from 'vue';
+import PublicView from './public-view.vue';
+import markdown from './public-view.readme.md';
+
+Vue.component('public-view', PublicView);
+
+export default {
+	title: 'Views / Public',
+	component: PublicView,
+	decorators: [withKnobs],
+	parameters: {
+		notes: markdown
+	}
+};
+
+export const basic = () => `
+<public-view>
+	<h1 class="type-heading-large" style="margin-bottom: 2rem">Directus</h1>
+	Hello from the default slot!
+</public-view>`;

src/views/public/public-view.test.ts

@@ -0,0 +1,15 @@
+import VueCompositionAPI from '@vue/composition-api';
+import { mount, createLocalVue } from '@vue/test-utils';
+import { VTooltip } from 'v-tooltip';
+
+const localVue = createLocalVue();
+localVue.use(VueCompositionAPI);
+localVue.directive('tooltip', VTooltip);
+
+import PublicView from './public-view.vue';
+
+describe('Views / Public', () => {
+	it('Works', () => {
+		const component = mount(PublicView, { localVue });
+	});
+});

src/views/public/public-view.vue

@@ -0,0 +1,101 @@
+<template>
+	<div class="public-view">
+		<div class="container">
+			<public-view-logo :version="version" />
+			<div class="content">
+				<slot />
+			</div>
+			<div class="notice">
+				<slot name="notice">
+					<v-icon name="person" />
+					Not Authenticated
+				</slot>
+			</div>
+		</div>
+		<div class="art" :style="artStyles"></div>
+	</div>
+</template>
+
+<script lang="ts">
+import { version } from '../../../package.json';
+import { createComponent, computed } from '@vue/composition-api';
+import { ProjectArt } from './types';
+import PublicViewLogo from './_logo.vue';
+import { useProjectsStore, ProjectWithKey, ProjectError } from '@/stores/projects';
+
+const defaultProjectArt: ProjectArt = {
+	color: '#263238',
+	background_image: null,
+	foreground_image: null,
+	note: null
+};
+
+export default createComponent({
+	components: {
+		PublicViewLogo
+	},
+	setup() {
+		const projectsStore = useProjectsStore();
+
+		const projectArt = computed<ProjectArt>(() => {
+			const { currentProject } = projectsStore;
+
+			if (
+				currentProject.value === null ||
+				(currentProject.value as ProjectError).error !== undefined
+			) {
+				return defaultProjectArt;
+			}
+
+			const project = currentProject.value as ProjectWithKey;
+
+			return {
+				color: project.api.project_color,
+				background_image:
+					project.api.project_background?.full_url || defaultProjectArt.background_image,
+				foreground_image:
+					project.api.project_foreground?.full_url || defaultProjectArt.foreground_image,
+				note: project.api.project_public_note || null
+			};
+		});
+
+		const artStyles = computed(() => ({
+			background: projectArt.value.background_image || projectArt.value.color
+		}));
+
+		return { version, artStyles };
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.public-view {
+	width: 100%;
+	height: 100%;
+	display: flex;
+
+	.container {
+		background-color: var(--page-background-color);
+		box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.25);
+		max-width: 500px;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		overflow-y: auto;
+		overflow-x: hidden;
+		justify-content: space-between;
+		padding: 20px;
+
+		@media (min-width: 660px) {
+			padding: 40px 80px;
+		}
+	}
+
+	.art {
+		display: none;
+		height: 100%;
+		flex-grow: 1;
+	}
+}
+</style>

src/views/public/types.ts

@@ -0,0 +1,6 @@
+export type ProjectArt = {
+	color: string;
+	background_image: string | null;
+	foreground_image: string | null;
+	note: string | null;
+};