silva
/
adrema
2
1
Fork 0
Code Issues 23 Pull Requests 1 Projects 1 Releases 106 Wiki Activity

Move page header component

This commit is contained in:
philipp lang 2023-05-20 01:45:43 +02:00
parent a526683082
commit e26b572575
7 changed files with 29 additions and 30 deletions

10
resources/js/components/SidebarHeader.vue → resources/js/components/page/Header.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500"> <div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-600 group-[.is-bright]:border-gray-500">
<slot name="before-title"></slot>
<div class="flex items-center"> <div class="flex items-center">
<span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span> <page-title class="mr-2">{{ title }}</page-title>
<slot name="toolbar"></slot> <slot name="toolbar"></slot>
</div> </div>
<div class="flex ml-4"> <div class="flex items-center ml-4">
<a href="#" @click.prevent="$emit('close')" class="btn label btn-primary-light icon"> <a href="#" v-if="$listeners.close" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">
<svg-sprite class="w-3 h-3" src="close"></svg-sprite> <svg-sprite class="w-3 h-3" src="close"></svg-sprite>
</a> </a>
<slot name="right"></slot>
</div> </div>
</div> </div>
</template> </template>

10
resources/js/components/page/Layout.vue
View File

@ -1,11 +1,13 @@
<template> <template>
<div class="grow bg-gray-900 flex flex-col transition-all" :class="{'ml-56': menuStore.visible, 'ml-0': !menuStore.visible}"> <div class="grow bg-gray-900 flex flex-col transition-all" :class="{'ml-56': menuStore.visible, 'ml-0': !menuStore.visible}">
<div class="h-16 px-6 flex items-center space-x-3 border-b border-gray-600"> <div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-600 group-[.is-bright]:border-gray-500">
<a href="#" @click.prevent="menuStore.toggle()" class="lg:hidden"> <a href="#" @click.prevent="menuStore.toggle()" class="lg:hidden mr-2">
<svg-sprite src="menu" class="text-gray-100 w-5 h-5"></svg-sprite> <svg-sprite src="menu" class="text-gray-100 w-5 h-5"></svg-sprite>
</a> </a>
<span class="text-sm md:text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span> <div class="flex items-center">
<slot name="toolbar"></slot> <page-title class="mr-2">{{ $page.props.title }}</page-title>
<slot name="toolbar"></slot>
</div>
<div class="flex grow justify-between"> <div class="flex grow justify-between">
<portal-target name="toolbar-left"> </portal-target> <portal-target name="toolbar-left"> </portal-target>
<portal-target name="toolbar-right"> </portal-target> <portal-target name="toolbar-right"> </portal-target>

7
resources/js/components/page/Title.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<span class="text-sm md:text-xl font-semibold leading-none text-white"><slot></slot></span>
</template>
<script>
export default {};
</script>

2
resources/js/components/page/ToolbarButton.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<i-link :href="href" v-on="$listeners" class="btn label mr-2" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''"> <i-link :href="href" v-on="$listeners" class="btn label mr-2 last:mr-0" :class="colors[color]" v-tooltip="menuStore.tooltipsVisible ? $slots.default[0].text : ''">
<svg-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></svg-sprite> <svg-sprite v-show="icon" class="w-3 h-3 xl:mr-2" :src="icon"></svg-sprite>
<span class="hidden xl:inline"><slot></slot></span> <span class="hidden xl:inline"><slot></slot></span>
</i-link> </i-link>

10
resources/js/views/member/MemberCourses.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="sidebar flex flex-col"> <div class="sidebar flex flex-col group is-bright">
<sidebar-header :links="indexLinks" @close="$emit('close')" title="Ausbildungen"> <page-header :links="indexLinks" @close="$emit('close')" title="Ausbildungen">
<div class="flex" slot="toolbar"> <div class="flex" slot="toolbar">
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Ausbildung</page-toolbar-button> <page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Ausbildung</page-toolbar-button>
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button> <page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
</div> </div>
</sidebar-header> </page-header>
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit"> <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
<f-text id="completed_at" type="date" v-model="single.completed_at" label="Datum" required></f-text> <f-text id="completed_at" type="date" v-model="single.completed_at" label="Datum" required></f-text>
@ -49,8 +49,6 @@
</template> </template>
<script> <script>
import SidebarHeader from '../../components/SidebarHeader.vue';
export default { export default {
data: function () { data: function () {
return { return {
@ -65,8 +63,6 @@ export default {
value: {}, value: {},
}, },
components: {SidebarHeader},
methods: { methods: {
create() { create() {
this.mode = 'create'; this.mode = 'create';

10
resources/js/views/member/MemberMemberships.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="sidebar flex flex-col"> <div class="sidebar flex flex-col group is-bright">
<sidebar-header :links="links" @close="$emit('close')" title="Mitgliedschaften"> <page-header :links="links" @close="$emit('close')" title="Mitgliedschaften">
<div class="flex" slot="toolbar"> <div class="flex" slot="toolbar">
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Mitgliedschaft</page-toolbar-button> <page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Mitgliedschaft</page-toolbar-button>
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button> <page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
</div> </div>
</sidebar-header> </page-header>
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit"> <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
<f-select id="group_id" name="group_id" :options="groups" v-model="single.group_id" label="Gruppierung" size="sm" required></f-select> <f-select id="group_id" name="group_id" :options="groups" v-model="single.group_id" label="Gruppierung" size="sm" required></f-select>
@ -56,8 +56,6 @@
</template> </template>
<script> <script>
import SidebarHeader from '../../components/SidebarHeader.vue';
export default { export default {
data: function () { data: function () {
return { return {
@ -67,8 +65,6 @@ export default {
}; };
}, },
components: {SidebarHeader},
computed: { computed: {
def() { def() {
return { return {

10
resources/js/views/member/MemberPayments.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="sidebar flex flex-col"> <div class="sidebar flex flex-col group is-bright">
<sidebar-header @close="$emit('close')" title="Zahlungen"> <page-header @close="$emit('close')" title="Zahlungen">
<div class="flex" slot="toolbar"> <div class="flex" slot="toolbar">
<page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Zahlung</page-toolbar-button> <page-toolbar-button @click.prevent="create" color="primary" icon="plus" v-if="single === null">Neue Zahlung</page-toolbar-button>
<page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button> <page-toolbar-button @click.prevent="cancel" color="primary" icon="undo" v-if="single !== null">Zurück</page-toolbar-button>
</div> </div>
</sidebar-header> </page-header>
<form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit"> <form v-if="single" class="p-6 grid gap-4 justify-start" @submit.prevent="submit">
<f-text id="nr" v-model="single.nr" label="Jahr" required></f-text> <f-text id="nr" v-model="single.nr" label="Jahr" required></f-text>
@ -59,8 +59,6 @@
</template> </template>
<script> <script>
import SidebarHeader from '../../components/SidebarHeader.vue';
export default { export default {
data: function () { data: function () {
return { return {
@ -69,8 +67,6 @@ export default {
}; };
}, },
components: {SidebarHeader},
methods: { methods: {
create() { create() {
this.mode = 'create'; this.mode = 'create';