github/directus
1
1
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-04-25 03:00:53 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add header bar to private view (#142)

Browse Source 
* Add header bar basic

* Fix alignment of breadcrumb

* Fix icon size in breadcrumb

* Add slots / stories for header bar

* Fix typo

* Add disabled color overrides to button

* Fix box icon

* Add header actions section for collapsable buttons

* Tweak css of drawer responsively

* Cover viewport (for notched use)

* Hide gray boxes on iOS taps

* Only show hover effect for devices that support hover

* Finish collapsable header buttons

* Remove wrong reference

* Tweak spacing of nav toggle

* Update storybook entry

* Add storybook entry for header actions

* Update structure of private-view and subcomponents

* Add provide support to storybook

* Update storybook / readme's for private view components

* Use defineComponent instead of createComponetn

* Fix broken import

* Fix tests, update readmes, etc

* Add storybook entries for header actions and module bar

* Remove unused utils

* Use defineComponent instead of createComponent

* Update structure of stories

* Fix story of private view
This commit is contained in:
Rijk van Zanten
2020-03-04 13:37:41 -05:00
committed by GitHub
parent dba5329d31
commit 5509d79756
54 changed files with 1153 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/modules/collections/routes/collections-overview.test.ts
View File

@@ -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/';
import PrivateView from '@/views/private-view/';
import router from '@/router';
jest.mock('../compositions/use-navigation');
@@ -22,12 +22,22 @@ describe('Modules / Collections / Routes / CollectionsOverview', () => {
});
it('Uses useNavigation to get navigation links', () => {
shallowMount(CollectionsOverview, { localVue });
shallowMount(CollectionsOverview, {
localVue,
mocks: {
$tc: () => 'title'
}
});
expect(useNavigation).toHaveBeenCalled();
});
it('Calls router.push on navigation', () => {
const component = shallowMount(CollectionsOverview, { localVue });
const component = shallowMount(CollectionsOverview, {
localVue,
mocks: {
$tc: () => 'title'
}
});
(component.vm as any).navigateToCollection({
collection: 'test',
name: 'Test',

18
src/modules/collections/routes/collections-overview.vue
View File

@@ -1,5 +1,21 @@
<template>
<private-view class="collections-overview">
<private-view class="collections-overview" :title="$tc('collection', 2)">
<template #title-outer:prepend>
<v-button rounded disabled icon secondary><v-icon name="box" /></v-button>
</template>
<template #actions>
<v-button rounded icon style="--v-button-background-color: var(--success);">
<v-icon name="add" />
</v-button>
<v-button rounded icon style="--v-button-background-color: var(--warning);">
<v-icon name="delete" />
</v-button>
<v-button rounded icon style="--v-button-background-color: var(--danger);">
<v-icon name="favorite" />
</v-button>
</template>
<template #navigation>
<collections-navigation />
</template>