Restructure views (#202)

* Restructure views

* Add aria labels

src/components/register.ts

@@ -50,7 +50,7 @@ Vue.component('v-slider', VSlider);
 Vue.component('v-switch', VSwitch);
 Vue.component('v-table', VTable);
 
-import DrawerDetail from '@/views/private-view/drawer-detail/';
+import DrawerDetail from '@/views/private/components/drawer-detail/';
 
 Vue.component('drawer-detail', DrawerDetail);
 

src/modules/collections/routes/browse/browse.test.ts

@@ -1,7 +1,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 import CollectionsBrowse from './browse.vue';
-import PrivateView from '@/views/private-view';
+import PrivateView from '@/views/private';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);

src/modules/collections/routes/detail/detail.test.ts

@@ -1,7 +1,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import VueCompositionAPI from '@vue/composition-api';
 import CollectionsDetail from './detail.vue';
-import PrivateView from '@/views/private-view';
+import PrivateView from '@/views/private';
 
 const localVue = createLocalVue();
 localVue.use(VueCompositionAPI);

src/modules/collections/routes/overview/overview.test.ts

@@ -3,7 +3,7 @@ import VueCompositionAPI from '@vue/composition-api';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import useNavigation from '../../compositions/use-navigation';
 import VTable from '@/components/v-table';
-import PrivateView from '@/views/private-view/';
+import PrivateView from '@/views/private';
 import router from '@/router';
 
 jest.mock('../../compositions/use-navigation');

src/views/private/components/drawer-detail-group/drawer-detail-group.story.ts

@@ -1,14 +1,14 @@
 import { withKnobs } from '@storybook/addon-knobs';
 import markdown from './readme.md';
-import withPadding from '../../../../.storybook/decorators/with-padding';
-import withAltColors from '../../../../.storybook/decorators/with-alt-colors';
+import withPadding from '../../../../../.storybook/decorators/with-padding';
+import withAltColors from '../../../../../.storybook/decorators/with-alt-colors';
 
 import { defineComponent, provide } from '@vue/composition-api';
 import DrawerDetailGroup from './drawer-detail-group.vue';
-import DrawerDetail from '../drawer-detail/';
+import DrawerDetail from '../drawer-detail';
 
 export default {
-	title: 'Views / Private / Drawer Detail Group',
+	title: 'Views / Private / Components / Drawer Detail Group',
 	decorators: [withKnobs, withAltColors, withPadding],
 	parameters: {
 		notes: markdown

src/views/private/components/drawer-detail/drawer-detail.story.ts

@@ -1,11 +1,11 @@
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import markdown from './readme.md';
 import { defineComponent, provide, ref, watch } from '@vue/composition-api';
-import withPadding from '../../../../.storybook/decorators/with-padding';
-import withAltColors from '../../../../.storybook/decorators/with-alt-colors';
+import withPadding from '../../../../../.storybook/decorators/with-padding';
+import withAltColors from '../../../../../.storybook/decorators/with-alt-colors';
 
 export default {
-	title: 'Views / Private / Drawer Detail',
+	title: 'Views / Private / Components / Drawer Detail',
 	decorators: [withKnobs, withAltColors, withPadding],
 	parameters: {
 		notes: markdown

src/views/private/components/header-bar-actions/header-bar-actions.story.ts

@@ -1,10 +1,10 @@
 import markdown from './readme.md';
 import HeaderBarActions from './header-bar-actions.vue';
 import { defineComponent } from '@vue/composition-api';
-import withPadding from '../../../../.storybook/decorators/with-padding';
+import withPadding from '../../../../../.storybook/decorators/with-padding';
 
 export default {
-	title: 'Views / Private / Header Bar Actions',
+	title: 'Views / Private / Components / Header Bar Actions',
 	decorators: [withPadding],
 	parameters: {
 		notes: markdown

src/views/private/components/header-bar/header-bar.story.ts

@@ -1,14 +1,14 @@
 import { withKnobs, text, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 import markdown from './readme.md';
-import withBackground from '../../../../.storybook/decorators/with-background';
+import withBackground from '../../../../../.storybook/decorators/with-background';
 
 import { defineComponent } from '@vue/composition-api';
 import HeaderBar from './header-bar.vue';
 import VueRouter from 'vue-router';
 
 export default {
-	title: 'Views / Private / Header Bar',
+	title: 'Views / Private / Components / Header Bar',
 	decorators: [withKnobs, withBackground],
 	parameters: {
 		notes: markdown

src/views/private/components/module-bar-logo/module-bar-logo.story.ts

@@ -1,12 +1,12 @@
 import markdown from './readme.md';
 import ModuleBarLogo from './module-bar-logo.vue';
-import withPadding from '../../../../.storybook/decorators/with-padding';
+import withPadding from '../../../../../.storybook/decorators/with-padding';
 import useRequestsStore from '@/stores/requests';
 import useProjectsStore from '@/stores/projects';
 import { defineComponent } from '@vue/composition-api';
 
 export default {
-	title: 'Views / Private / Module Bar Logo',
+	title: 'Views / Private / Components / Module Bar Logo',
 	decorators: [withPadding],
 	parameters: {
 		notes: markdown

src/views/private/components/module-bar-logo/module-bar-logo.vue

@@ -72,7 +72,7 @@ export default defineComponent({
 		width: 40px;
 		height: 32px;
 		margin: 0 auto;
-		background-image: url('../../../assets/sprite.svg');
+		background-image: url('./sprite.svg');
 		background-position: 0% 0%;
 		background-size: 600px 32px;
 	}

src/views/private/components/module-bar/module-bar.story.ts

@@ -6,7 +6,7 @@ import useProjectsStore from '@/stores/projects';
 import useRequestsStore from '@/stores/requests';
 
 export default {
-	title: 'Views / Private / Module Bar',
+	title: 'Views / Private / Components / Module Bar',
 	parameters: {
 		notes: markdown
 	}

src/views/private/private-view.vue

@@ -1,6 +1,11 @@
 <template>
 	<div class="private-view">
-		<aside role="navigation" class="navigation" :class="{ 'is-open': navOpen }">
+		<aside
+			role="navigation"
+			aria-label="Module Navigation"
+			class="navigation"
+			:class="{ 'is-open': navOpen }"
+		>
 			<module-bar />
 			<div class="module-nav alt-colors">
 				<div
@@ -34,6 +39,7 @@
 		<aside
 			role="contentinfo"
 			class="drawer alt-colors"
+			aria-label="Module Drawer"
 			:class="{ 'is-open': drawerOpen }"
 			@click="drawerOpen = true"
 		>
@@ -49,9 +55,9 @@
 
 <script lang="ts">
 import { defineComponent, ref, provide, computed } from '@vue/composition-api';
-import ModuleBar from './module-bar/';
-import DrawerDetailGroup from './drawer-detail-group/';
-import HeaderBar from './header-bar';
+import ModuleBar from './components/module-bar/';
+import DrawerDetailGroup from './components/drawer-detail-group/';
+import HeaderBar from './components/header-bar';
 import { throttle } from 'lodash';
 
 export default defineComponent({

src/views/public/components/logo/index.ts

@@ -0,0 +1,4 @@
+import PublicViewLogo from './logo.vue';
+
+export { PublicViewLogo };
+export default PublicViewLogo;

src/views/public/components/logo/logo-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="39">
+  <path fill="#263238" fill-rule="evenodd" d="M51.166 24.51a4.636 4.636 0 0 1-.763-.246 1.751 1.751 0 0 1-.54-.368c.147-1.304 0-2.435.122-3.713.492-4.967 3.615-3.393 6.418-4.204 1.745-.492 3.491-1.5 3.934-3.566a36.074 36.074 0 0 0-6.393-5.876C46.347 1.128 36.414-1.036 27.39.464a13.635 13.635 0 0 0 5.968 5.532s-2.445 0-4.541-1.565c-.615.245-1.845.73-2.435 1.024 4.794 4.598 12.293 5.114 17.678.984-.025.049-.492.762-1.057 3.737-1.254 6.343-4.869 5.852-9.343 4.254-9.294-3.369-14.408-.246-19.055-6.639a4.29 4.29 0 0 0-2.189 3.737c0 1.598.886 2.95 2.164 3.688.698-.926 1.011-1.189 2.228-1.189-1.883 1.068-2.105 2-2.916 4.582-.984 3.123-.566 6.32-5.164 7.155-2.434.123-2.385 1.77-3.27 4.23C4.352 33.188 2.877 34.467 0 37.491c1.18 1.426 2.41 1.598 3.663 1.082 2.582-1.082 4.574-4.426 6.442-6.59 2.09-2.409 7.106-1.376 10.892-3.737 2.607-1.598 3.885-3.761 2.164-7.425a7.254 7.254 0 0 1 1.869 4.426c4.376-.566 10.228 4.77 15.563 5.655a9.53 9.53 0 0 1-1.303-2.188c-.615-1.476-.811-2.828-.688-4.008.491 2.926 3.442 6.688 8.187 7.032 1.205.098 2.533-.05 3.91-.467 1.647-.492 3.171-1.131 4.99-.787 1.353.246 2.607.934 3.394 2.09 1.18 1.72 3.761 2.09 4.917-.025-2.606-6.81-9.786-7.253-12.834-8.04z"/>
+</svg>

src/views/public/components/logo/logo.story.ts

@@ -0,0 +1,20 @@
+import markdown from './readme.md';
+import { defineComponent } from '@vue/composition-api';
+import PublicViewLogo from './logo.vue';
+import withPadding from '../../../../../.storybook/decorators/with-padding';
+
+export default {
+	title: 'Views / Public / Components / Logo',
+	parameters: {
+		notes: markdown
+	},
+	decorators: [withPadding]
+};
+
+export const basic = () =>
+	defineComponent({
+		components: { PublicViewLogo },
+		template: `
+		<public-view-logo version="9.0.0" />
+	`
+	});

src/views/public/components/logo/logo.vue

@@ -1,9 +1,9 @@
 <template functional>
 	<a href="https://directus.io" rel="noopener noreferrer" target="_blank" class="logo">
 		<img
-			v-tooltip.right="{ classes: ['inverted'], content: `Directus v${props.version}` }"
+			v-tooltip.right.inverted="`Directus v${props.version}`"
 			alt="Directus Logo"
-			src="../../assets/logo-dark.svg"
+			src="./logo-dark.svg"
 		/>
 	</a>
 </template>

src/views/public/components/logo/readme.md

@@ -0,0 +1,36 @@
+# Public View Logo
+
+Renders the Directus logo and shows the current version of Directus on hover.
+
+## Usage
+
+```html
+<template>
+	<public-view-logo version="9.0.0" />
+</template>
+
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api';
+import PublicViewLogo from '@/views/public/components/logo';
+
+export default {
+	components: {
+		PublicViewLogo
+	}
+}
+</script>
+```
+
+## Props
+| Prop      | Description                     | Default |
+|-----------|---------------------------------|---------|
+| `version` | The version to display on hover | --      |
+
+## Events
+n/a
+
+## Slots
+n/a
+
+## CSS Variables
+n/a

src/views/public/public-view.vue

@@ -16,7 +16,7 @@
 <script lang="ts">
 import { version } from '../../../package.json';
 import { defineComponent, computed } from '@vue/composition-api';
-import PublicViewLogo from './_logo.vue';
+import PublicViewLogo from './components/logo/';
 import { useProjectsStore } from '@/stores/projects/';
 import { ProjectWithKey, ProjectError } from '@/stores/projects/types';
 

src/views/register.ts

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
 import PublicView from './public/';
-const PrivateView = () => import(/* webpackChunkName: "private-view" */ './private-view/');
+const PrivateView = () => import(/* webpackChunkName: "private-view" */ './private');
 
 Vue.component('public-view', PublicView);
 Vue.component('private-view', PrivateView);