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

mod toolbar

This commit is contained in:
philipp lang 2021-07-05 00:35:38 +02:00
parent 555d64e965
commit ccfdd62208
6 changed files with 24 additions and 7 deletions
app/Http/Views
MemberView.php
resources
img
sprite.svg
svg
document.svgplus.svg
js
components
SidebarHeader.vue
layouts
App.vue

4
app/Http/Views/MemberView.php
View File

@ -40,7 +40,9 @@ class MemberView {
public function paymentIndex($member) {
return $this->additional($member, [
'model' => null,
'links' => [ ['label' => 'Zahlung hinzufügen', 'href' => route('member.payment.create', ['member' => $member]) ] ],
'links' => [
['icon' => 'plus', 'href' => route('member.payment.create', ['member' => $member]) ],
],
'mode' => 'index',
]);
}

2
resources/img/sprite.svg
View File

@ -1 +1 @@
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="money" xmlns="http://www.w3.org/2000/svg"><path d="M330.24 94.72l46.08-53.76C391.68 25.6 381.44 0 358.4 0H153.6c-23.04 0-33.28 25.6-20.48 40.96l46.08 53.76C76.8 145.92 0 289.28 0 386.56 0 506.88 115.2 512 256 512s256-5.12 256-125.44c0-97.28-76.8-240.64-181.76-291.84zM256 281.6c10.24 0 17.92 2.56 25.6 5.12 30.72 10.24 51.2 38.4 51.2 71.68 0 33.28-20.48 61.44-51.2 71.68v30.72h-51.2v-30.72c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0 15.36 10.24 25.6 25.6 25.6s25.6-10.24 25.6-25.6c0-15.36-10.24-25.6-25.6-25.6-10.24 0-17.92-2.56-25.6-5.12-30.72-10.24-51.2-38.4-51.2-71.68 0-33.28 20.48-61.44 51.2-71.68V153.6h51.2v30.72c30.72 10.24 51.2 38.4 51.2 71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6 10.24-25.6 25.6 10.24 25.6 25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="pencil" xmlns="http://www.w3.org/2000/svg"><path d="M51.2 353.28L0 512l158.72-51.2zM87.16 316.492L336.96 66.69l108.61 108.61L195.77 425.102zM504.32 79.36L432.64 7.68c-10.24-10.24-25.6-10.24-35.84 0l-23.04 23.04 107.52 107.52 23.04-23.04c10.24-10.24 10.24-25.6 0-35.84z"/></symbol><symbol viewBox="0 0 512 512" id="trash" xmlns="http://www.w3.org/2000/svg"><path d="M486.4 102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36 0-25.6 10.24-25.6 25.6v76.8h-128C10.24 102.4 0 112.64 0 128s10.24 25.6 25.6 25.6h460.8c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zm-179.2 0H204.8V51.2h102.4v51.2zM25.6 204.8l48.64 284.16c2.56 12.8 12.8 23.04 25.6 23.04h312.32c12.8 0 23.04-10.24 25.6-23.04L486.4 204.8H25.6zm128 256c-15.36 0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6l25.6 153.6c0 15.36-10.24 25.6-25.6 25.6zm128-25.6c0 15.36-10.24 25.6-25.6 25.6s-25.6-10.24-25.6-25.6V281.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v153.6zm102.4 0c0 15.36-10.24 25.6-25.6 25.6-15.36 0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6L384 435.2z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 20 20" id="check" xmlns="http://www.w3.org/2000/svg"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z"/></symbol><symbol viewBox="0 0 20 20" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/></symbol><symbol viewBox="0 0 486.4 486.4" id="document" xmlns="http://www.w3.org/2000/svg"><path d="M320 0H115.2C87.04 0 64 23.04 64 51.2v384c0 28.16 23.04 51.2 51.2 51.2h256c28.16 0 51.2-23.04 51.2-51.2V102.4L320 0zM166.4 153.6h102.4c15.36 0 25.6 10.24 25.6 25.6s-10.24 25.6-25.6 25.6H166.4c-15.36 0-25.6-10.24-25.6-25.6s12.8-25.6 25.6-25.6zm153.6 256H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6zm0-102.4H166.4c-15.36 0-25.6-10.24-25.6-25.6 0-15.36 10.24-25.6 25.6-25.6H320c15.36 0 25.6 10.24 25.6 25.6 0 12.8-10.24 25.6-25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="loss" xmlns="http://www.w3.org/2000/svg"><path d="M448 281.6h-25.6c-7.68 0-12.8 5.12-12.8 12.8v115.2h51.2V294.4c0-7.68-5.12-12.8-12.8-12.8zM345.6 230.4H320c-7.68 0-12.8 5.12-12.8 12.8v166.4h51.2V243.2c0-7.68-5.12-12.8-12.8-12.8zM243.2 179.2h-25.6c-7.68 0-12.8 5.12-12.8 12.8v217.6H256V192c0-7.68-5.12-12.8-12.8-12.8zM140.8 102.4h-25.6c-7.68 0-12.8 5.12-12.8 12.8v294.4h51.2V115.2c0-7.68-5.12-12.8-12.8-12.8z"/><path d="M486.4 460.8H51.2V25.6C51.2 10.24 40.96 0 25.6 0 10.24 0 0 10.24 0 25.6v460.8C0 501.76 10.24 512 25.6 512h460.8c15.36 0 25.6-10.24 25.6-25.6 0-15.36-10.24-25.6-25.6-25.6z"/></symbol><symbol viewBox="0 0 512 512" id="money" xmlns="http://www.w3.org/2000/svg"><path d="M330.24 94.72l46.08-53.76C391.68 25.6 381.44 0 358.4 0H153.6c-23.04 0-33.28 25.6-20.48 40.96l46.08 53.76C76.8 145.92 0 289.28 0 386.56 0 506.88 115.2 512 256 512s256-5.12 256-125.44c0-97.28-76.8-240.64-181.76-291.84zM256 281.6c10.24 0 17.92 2.56 25.6 5.12 30.72 10.24 51.2 38.4 51.2 71.68 0 33.28-20.48 61.44-51.2 71.68v30.72h-51.2v-30.72c-30.72-10.24-51.2-38.4-51.2-71.68h51.2c0 15.36 10.24 25.6 25.6 25.6s25.6-10.24 25.6-25.6c0-15.36-10.24-25.6-25.6-25.6-10.24 0-17.92-2.56-25.6-5.12-30.72-10.24-51.2-38.4-51.2-71.68 0-33.28 20.48-61.44 51.2-71.68V153.6h51.2v30.72c30.72 10.24 51.2 38.4 51.2 71.68h-51.2c0-15.36-10.24-25.6-25.6-25.6s-25.6 10.24-25.6 25.6 10.24 25.6 25.6 25.6z"/></symbol><symbol viewBox="0 0 512 512" id="pencil" xmlns="http://www.w3.org/2000/svg"><path d="M51.2 353.28L0 512l158.72-51.2zM87.16 316.492L336.96 66.69l108.61 108.61L195.77 425.102zM504.32 79.36L432.64 7.68c-10.24-10.24-25.6-10.24-35.84 0l-23.04 23.04 107.52 107.52 23.04-23.04c10.24-10.24 10.24-25.6 0-35.84z"/></symbol><symbol viewBox="0 0 426.667 426.667" id="plus" xmlns="http://www.w3.org/2000/svg"><path d="M405.332 192H234.668V21.332C234.668 9.559 225.109 0 213.332 0 201.559 0 192 9.559 192 21.332V192H21.332C9.559 192 0 201.559 0 213.332c0 11.777 9.559 21.336 21.332 21.336H192v170.664c0 11.777 9.559 21.336 21.332 21.336 11.777 0 21.336-9.559 21.336-21.336V234.668h170.664c11.777 0 21.336-9.559 21.336-21.336 0-11.773-9.559-21.332-21.336-21.332zm0 0"/></symbol><symbol viewBox="0 0 512 512" id="trash" xmlns="http://www.w3.org/2000/svg"><path d="M486.4 102.4h-128V25.6c0-15.36-10.24-25.6-25.6-25.6H179.2c-15.36 0-25.6 10.24-25.6 25.6v76.8h-128C10.24 102.4 0 112.64 0 128s10.24 25.6 25.6 25.6h460.8c15.36 0 25.6-10.24 25.6-25.6s-10.24-25.6-25.6-25.6zm-179.2 0H204.8V51.2h102.4v51.2zM25.6 204.8l48.64 284.16c2.56 12.8 12.8 23.04 25.6 23.04h312.32c12.8 0 23.04-10.24 25.6-23.04L486.4 204.8H25.6zm128 256c-15.36 0-25.6-10.24-25.6-25.6l-25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6l25.6 153.6c0 15.36-10.24 25.6-25.6 25.6zm128-25.6c0 15.36-10.24 25.6-25.6 25.6s-25.6-10.24-25.6-25.6V281.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6v153.6zm102.4 0c0 15.36-10.24 25.6-25.6 25.6-15.36 0-25.6-10.24-25.6-25.6l25.6-153.6c0-15.36 10.24-25.6 25.6-25.6s25.6 10.24 25.6 25.6L384 435.2z"/></symbol><symbol viewBox="0 0 512 512" id="user" xmlns="http://www.w3.org/2000/svg"><path d="M0 435.2V512h512v-76.8c0-171.52-512-171.52-512 0z"/><circle cx="256" cy="128" r="128"/></symbol></svg>
Side by Side Swipe Overlay

Before

(image error) Size: 3.2 KiB

After

(image error) Size: 4.2 KiB

8
resources/img/svg/document.svg Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 486.4 486.4" style="enable-background:new 0 0 486.4 486.4;" xml:space="preserve">
<g>
<g>
<path d="M320,0H115.2C87.04,0,64,23.04,64,51.2v384c0,28.16,23.04,51.2,51.2,51.2h256c28.16,0,51.2-23.04,51.2-51.2V102.4L320,0z M166.4,153.6h102.4c15.36,0,25.6,10.24,25.6,25.6s-10.24,25.6-25.6,25.6H166.4c-15.36,0-25.6-10.24-25.6-25.6 S153.6,153.6,166.4,153.6z M320,409.6H166.4c-15.36,0-25.6-10.24-25.6-25.6c0-15.36,10.24-25.6,25.6-25.6H320 c15.36,0,25.6,10.24,25.6,25.6C345.6,396.8,335.36,409.6,320,409.6z M320,307.2H166.4c-15.36,0-25.6-10.24-25.6-25.6 c0-15.36,10.24-25.6,25.6-25.6H320c15.36,0,25.6,10.24,25.6,25.6C345.6,294.4,335.36,307.2,320,307.2z"/>
</g>
</g>
</svg>
Side by Side

After

(image error) Size: 843 B

1
resources/img/svg/plus.svg Normal file
View File

@ -0,0 +1 @@
<svg height="426.66667pt" viewBox="0 0 426.66667 426.66667" width="426.66667pt" xmlns="http://www.w3.org/2000/svg"><path d="m405.332031 192h-170.664062v-170.667969c0-11.773437-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.558594-21.332031 21.332031v170.667969h-170.667969c-11.773437 0-21.332031 9.558594-21.332031 21.332031 0 11.777344 9.558594 21.335938 21.332031 21.335938h170.667969v170.664062c0 11.777344 9.558594 21.335938 21.332031 21.335938 11.777344 0 21.335938-9.558594 21.335938-21.335938v-170.664062h170.664062c11.777344 0 21.335938-9.558594 21.335938-21.335938 0-11.773437-9.558594-21.332031-21.335938-21.332031zm0 0"/></svg>
Side by Side

After

(image error) Size: 654 B

12
resources/js/components/SidebarHeader.vue
View File

@ -1,9 +1,15 @@
<template>
<div class="h-16 px-6 flex justify-between items-center border-b border-solid border-gray-500">
<div class="flex items-center">
<span class="text-xl font-semibold text-white" v-html="title"></span>
<a v-for="link in links.filter(link => link.href === undefined)" v-text="link.label" @click.prevent="$emit(link.event)" href="#" class="btn label btn-primary-light icon"></a>
<a v-for="link in links.filter(link => link.href !== undefined)" v-text="link.label" :href="link.href" class="btn label btn-primary-light ml-1"></a>
<span class="mr-1 text-xl font-semibold leading-none text-white" v-html="title"></span>
<a v-for="link in links.filter(link => link.icon === undefined)" @click.prevent="$emit(link.event)" href="#" class="btn label btn-primary-light">
<span v-if="link.label" v-text="link.label"></span>
<sprite v-if="link.icon" :src="link.icon"></sprite>
</a>
<a v-for="link in links.filter(link => link.icon !== undefined)" :href="link.href" class="btn label icon btn-primary-light ml-1">
<span v-if="link.label" v-text="link.label"></span>
<sprite v-if="link.icon" :src="link.icon"></sprite>
</a>
</div>
<div class="flex ml-4">
<a href="#" @click.prevent="$emit('close')" class="btn label btn-primary-light icon">

4
resources/js/layouts/App.vue
View File

@ -15,9 +15,9 @@
<div class="flex-grow ml-56 bg-gray-900 flex flex-col">
<div class="h-16 px-6 flex justify-between items-center border-b border-gray-600">
<div class="flex">
<span class="text-xl font-semibold text-white" v-html="$page.props.title"></span>
<span class="text-xl font-semibold text-white leading-none" v-html="$page.props.title"></span>
<div class="flex ml-4">
<inertia-link v-for="link, index in $page.props.toolbar" :key="index" :href="link.href" v-text="link.label" class="btn label mr-2" :class="link.color">
<inertia-link v-for="link, index in $page.props.toolbar" :key="index" :href="link.href" v-text="link.label" class="btn label btn-primary mr-2" :class="link.color">
<sprite :src="link.icon"></sprite>
</inertia-link>
</div>