nested group feature added
This commit is contained in:
parent
41e8dee624
commit
92f2d23b28
@ -42,7 +42,7 @@ class Tr extends Component
|
|||||||
$values = $self->getValue();
|
$values = $self->getValue();
|
||||||
|
|
||||||
if (array_key_exists('App\View\Components\Table\Tbody', $values)) {
|
if (array_key_exists('App\View\Components\Table\Tbody', $values)) {
|
||||||
return 'relative flex items-center px-1 group border-b hover:bg-gray-100';
|
return 'relative flex items-center px-1 group/actions border-b hover:bg-gray-100';
|
||||||
}
|
}
|
||||||
|
|
||||||
else if (array_key_exists('App\View\Components\Table\Thead', $values)) {
|
else if (array_key_exists('App\View\Components\Table\Thead', $values)) {
|
||||||
|
14
public/css/app.css
vendored
14
public/css/app.css
vendored
@ -47367,10 +47367,6 @@ button, input, optgroup, select, textarea{
|
|||||||
max-height: 0;
|
max-height: 0;
|
||||||
}
|
}
|
||||||
/* index */
|
/* index */
|
||||||
.index-actions:hover .tooltip-content{
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
html[dir='ltr'] .index-actions:first-child{
|
html[dir='ltr'] .index-actions:first-child{
|
||||||
border-top-left-radius: 0.5rem;
|
border-top-left-radius: 0.5rem;
|
||||||
border-bottom-left-radius: 0.5rem;
|
border-bottom-left-radius: 0.5rem;
|
||||||
@ -48603,7 +48599,11 @@ body{
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.group:hover .group-hover\:flex{
|
.group\/tooltip:hover .group-hover\/tooltip\:visible{
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group\/actions:hover .group-hover\/actions\:flex{
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -48648,6 +48648,10 @@ body{
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.group\/tooltip:hover .group-hover\/tooltip\:opacity-100{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
[dir="ltr"] .ltr\:right-0{
|
[dir="ltr"] .ltr\:right-0{
|
||||||
right: 0px;
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
@ -27,7 +27,7 @@
|
|||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody data-table-body>
|
<tbody data-table-body>
|
||||||
<tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group">
|
<tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group/actions">
|
||||||
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-medium text-black">
|
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-medium text-black">
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
|
|
||||||
@ -37,7 +37,7 @@
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div id="wizard-currency-default" role="tooltip"
|
<div id="wizard-currency-default" role="tooltip"
|
||||||
class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm tooltip-content whitespace-normal opacity-0 invisible"
|
class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-normal opacity-0 invisible"
|
||||||
>
|
>
|
||||||
{{ translations.currencies.default }}
|
{{ translations.currencies.default }}
|
||||||
<div
|
<div
|
||||||
@ -56,20 +56,20 @@
|
|||||||
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 relative ltr:pr-6 rtl:pl-6 py-4 ltr:text-right rtl:text-left whitespace-nowrap text-sm font-medium text-black">
|
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 relative ltr:pr-6 rtl:pl-6 py-4 ltr:text-right rtl:text-left whitespace-nowrap text-sm font-medium text-black">
|
||||||
{{ item.rate }}
|
{{ item.rate }}
|
||||||
|
|
||||||
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
|
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover/actions:flex">
|
||||||
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onEditItem(item, index)">
|
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions" @click="onEditItem(item, index)">
|
||||||
<span class="material-icons-outlined text-purple text-lg">edit</span>
|
<span class="material-icons-outlined text-purple text-lg">edit</span>
|
||||||
|
|
||||||
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
|
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
|
||||||
<span>{{ translations.currencies.edit }}</span>
|
<span>{{ translations.currencies.edit }}</span>
|
||||||
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onClickDelete(item)">
|
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions" @click="onClickDelete(item)">
|
||||||
<span class="material-icons-outlined text-purple text-lg">delete</span>
|
<span class="material-icons-outlined text-purple text-lg">delete</span>
|
||||||
|
|
||||||
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
|
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
|
||||||
<span>{{ translations.currencies.delete }}</span>
|
<span>{{ translations.currencies.delete }}</span>
|
||||||
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
|
4
resources/assets/sass/app.css
vendored
4
resources/assets/sass/app.css
vendored
@ -18,10 +18,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* index */
|
/* index */
|
||||||
.index-actions:hover .tooltip-content {
|
|
||||||
@apply opacity-100 visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[dir='ltr'] .index-actions:first-child {
|
html[dir='ltr'] .index-actions:first-child {
|
||||||
@apply rounded-tl-lg rounded-bl-lg border-r-0;
|
@apply rounded-tl-lg rounded-bl-lg border-r-0;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<x-button
|
<x-button
|
||||||
type="button"
|
type="button"
|
||||||
class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions"
|
class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer group/tooltip index-actions"
|
||||||
@click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
|
@click="onDeleteViaConfirmation('delete-{{ $modelTable }}-{{ $id }}')"
|
||||||
override="class"
|
override="class"
|
||||||
{{ $attributes }}
|
{{ $attributes }}
|
||||||
@ -9,7 +9,7 @@
|
|||||||
{!! $slot !!}
|
{!! $slot !!}
|
||||||
@else
|
@else
|
||||||
<span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
|
<span class="material-icons-outlined text-purple text-lg pointer-events-none">delete</span>
|
||||||
<div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
|
<div class="inline-block absolute invisible z-10 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
|
||||||
<span>{!! $label !!}</span>
|
<span>{!! $label !!}</span>
|
||||||
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
<div id="{{ $id }}" role="tooltip" class="w-full lg:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap tooltip-content transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
|
<div id="{{ $id }}" role="tooltip" class="w-full lg:w-96 inline-block absolute left-0 z-10 text-sm font-medium rounded-lg border border-gray-200 shadow-sm whitespace-nowrap transition-visible bg-lilac-900 border-none text-black p-6 cursor-auto opacity-0 invisible information-content">
|
||||||
<div class="absolute w-2 h-2 inset-y-1/2 -right-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-lilac-900 before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0 data-popper-arrow"></div>
|
<div class="absolute w-2 h-2 inset-y-1/2 -right-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-lilac-900 before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0 data-popper-arrow"></div>
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
|
@ -50,7 +50,7 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap tooltip-content opacity-0 invisible">
|
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap opacity-0 invisible">
|
||||||
{{ trans('auth.profile') }}
|
{{ trans('auth.profile') }}
|
||||||
<div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -34,7 +34,7 @@
|
|||||||
@endif
|
@endif
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap tooltip-content opacity-0 invisible">
|
<div id="tooltip-profile" class="inline-block absolute z-20 py-1 px-2 text-sm font-medium rounded-lg bg-white text-gray-900 w-auto border border-gray-200 shadow-sm whitespace-nowrap opacity-0 invisible">
|
||||||
{{ trans('auth.profile') }}
|
{{ trans('auth.profile') }}
|
||||||
<div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border -left-1 before:border-t-0 before:border-r-0 border-gray-200" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
$more_actions = [];
|
$more_actions = [];
|
||||||
@endphp
|
@endphp
|
||||||
|
|
||||||
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
|
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover/actions:flex">
|
||||||
@foreach ($actions as $action)
|
@foreach ($actions as $action)
|
||||||
@if (! empty($action['permission']))
|
@if (! empty($action['permission']))
|
||||||
@can($action['permission'])
|
@can($action['permission'])
|
||||||
@ -19,12 +19,12 @@
|
|||||||
|
|
||||||
@switch($type)
|
@switch($type)
|
||||||
@case('button')
|
@case('button')
|
||||||
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group" {!! $action['attributes'] ?? null !!}>
|
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
|
||||||
<span class="material-icons-outlined text-purple text-lg pointer-events-none">
|
<span class="material-icons-outlined text-purple text-lg pointer-events-none">
|
||||||
{{ $action['icon'] }}
|
{{ $action['icon'] }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 tooltip-content" data-tooltip-placement="top">
|
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
|
||||||
<span>{{ $action['title'] }}</span>
|
<span>{{ $action['title'] }}</span>
|
||||||
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
@ -42,12 +42,12 @@
|
|||||||
@break
|
@break
|
||||||
|
|
||||||
@default
|
@default
|
||||||
<a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions" {!! $action['attributes'] ?? null !!}>
|
<a href="{{ $action['url'] }}" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions group/tooltip" {!! $action['attributes'] ?? null !!}>
|
||||||
<span class="material-icons-outlined text-purple text-lg pointer-events-none">
|
<span class="material-icons-outlined text-purple text-lg pointer-events-none">
|
||||||
{{ $action['icon'] }}
|
{{ $action['icon'] }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 tooltip-content" data-tooltip-placement="top">
|
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 -top-10 -left-2 group-hover/tooltip:opacity-100 group-hover/tooltip:visible" data-tooltip-placement="top">
|
||||||
<span>{{ $action['title'] }}</span>
|
<span>{{ $action['title'] }}</span>
|
||||||
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -20,7 +20,7 @@
|
|||||||
$size,
|
$size,
|
||||||
'border',
|
'border',
|
||||||
$borderColor,
|
$borderColor,
|
||||||
'shadow-sm opacity-0 tooltip-content',
|
'shadow-sm opacity-0',
|
||||||
$whitespace
|
$whitespace
|
||||||
])
|
])
|
||||||
>
|
>
|
||||||
|
@ -13,12 +13,12 @@
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
@if ($pinned)
|
@if ($pinned)
|
||||||
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content">
|
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0">
|
||||||
{{ trans('reports.pin_text.unpin_report') }}
|
{{ trans('reports.pin_text.unpin_report') }}
|
||||||
<div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
@else
|
@else
|
||||||
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0 tooltip-content">
|
<div id="{{ $report->id }}-pin" role="tooltip" class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm whitespace-nowrap opacity-0">
|
||||||
{{ trans('reports.pin_text.pin_report') }}
|
{{ trans('reports.pin_text.pin_report') }}
|
||||||
<div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
|
<div class="absolute w-2 h-2 -top-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-b-0 before:border-r-0" data-popper-arrow></div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user