dave/coolify
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

modal fix?

Browse Source
This commit is contained in:
Andras Bacsai
2023-12-06 15:50:13 +01:00
parent 61efdfb7c1
commit ceedd5225f
13 changed files with 226 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
resources/js/app.js
View File

@@ -1,8 +1,9 @@
import Alpine from "alpinejs";
import focus from '@alpinejs/focus'
import { createApp } from "vue";
import MagicBar from "./components/MagicBar.vue";
import Toaster from "../../vendor/masmerise/livewire-toaster/resources/js";
Alpine.plugin(focus)
Alpine.plugin(Toaster);
window.Alpine = Alpine;

1
resources/views/layouts/base.blade.php
View File

@@ -37,6 +37,7 @@
<body>
@livewireScripts
@livewire('livewire-ui-modal')
<dialog id="help" class="modal">
<livewire:help />
<form method="dialog" class="modal-backdrop">

37
resources/views/livewire/project/service/compose-modal.blade.php
View File

@@ -1,6 +1,5 @@
<dialog id="composeModal" class="modal" x-data="{ raw: true }" wire:ignore.self>
<form method="dialog" class="flex flex-col gap-2 rounded max-w-7xl modal-box" wire:submit.prevent='submit'>
<div class="flex items-end gap-2">
<form x-data="{ raw: true }" class="flex flex-col gap-2 rounded max-w-7xl modal-box" wire:submit.prevent='submit'>
<div class="flex items-end gap-2">
<h1>Docker Compose</h1>
<div x-cloak x-show="raw">
<x-forms.button class="w-64" @click.prevent="raw = !raw">Show Deployable Compose</x-forms.button>
@@ -10,21 +9,19 @@
Compose</x-forms.button>
</div>
</div>
<div>Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage menu.</div>
<div>Volume names are updated upon save. The service UUID will be added as a prefix to all volumes, to prevent
name collision. <br>To see the actual volume names, check the Deployable Compose file, or go to Storage
menu.</div>
<div x-cloak x-show="raw">
<x-forms.textarea rows="20" id="service.docker_compose_raw">
</x-forms.textarea>
</div>
<div x-cloak x-show="raw === false">
<x-forms.textarea rows="20" readonly id="service.docker_compose">
</x-forms.textarea>
</div>
<x-forms.button onclick="composeModal.close()" type="submit">
Save
</x-forms.button>
</form>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
<div x-cloak x-show="raw">
<x-forms.textarea rows="20" id="service.docker_compose_raw">
</x-forms.textarea>
</div>
<div x-cloak x-show="raw === false">
<x-forms.textarea rows="20" readonly id="service.docker_compose">
</x-forms.textarea>
</div>
<x-forms.button type="submit">
Save
</x-forms.button>
</form>

1
resources/views/livewire/project/service/index.blade.php
View File

@@ -1,6 +1,5 @@
<div x-data="{ activeTab: window.location.hash ? window.location.hash.substring(1) : 'service-stack' }" x-init="$wire.checkStatus" wire:poll.10000ms="checkStatus">
<livewire:project.service.navbar :service="$service" :parameters="$parameters" :query="$query" />
<livewire:project.service.compose-modal :service="$service" />
<div class="flex h-full pt-6" >
<div class="flex flex-col items-start gap-4 min-w-fit">
<a target="_blank" href="{{ $service->documentation() }}">Documentation <x-external-link /></a>

4
resources/views/livewire/project/service/stack-form.blade.php
View File

@@ -5,7 +5,9 @@
<div>Configuration</div>
</div>
<x-forms.button type="submit">Save</x-forms.button>
<x-forms.button class="w-64" onclick="composeModal.showModal()">Edit Compose
<x-forms.button class="w-64"
onclick="Livewire.emit('openModal', 'project.service.compose-modal',{{ json_encode(['serviceId' => $service->id]) }})">Edit
Compose
File</x-forms.button>
</div>
<div class="flex gap-2">

58
resources/views/vendor/livewire-ui-modal/modal.blade.php vendored Normal file
View File

@@ -0,0 +1,58 @@
<div>
@isset($jsPath)
<script>{!! file_get_contents($jsPath) !!}</script>
@endisset
@isset($cssPath)
<style>{!! file_get_contents($cssPath) !!}</style>
@endisset
<div
x-data="LivewireUIModal()"
x-init="init()"
x-on:close.stop="setShowPropertyTo(false)"
x-on:keydown.escape.window="closeModalOnEscape()"
x-show="show"
class="fixed inset-0 z-10 overflow-y-auto"
style="display: none;"
>
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">
<div
x-show="show"
x-on:click="closeModalOnClickAway()"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 transition-all transform"
>
<div class="absolute inset-0 opacity-50 bg-coolgray-200"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
<div
x-show="show && showActiveComponent"
x-transition:enter="ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave="ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
x-bind:class="modalWidth"
class="fixed top-0 w-full overflow-hidden text-left align-bottom transition-all transform rounded-lg sm:my-8 sm:align-middle sm:w-full"
id="modal-container"
x-trap.noscroll.inert="show && showActiveComponent"
aria-modal="true"
>
@forelse($components as $id => $component)
<div class="flex items-center justify-center" x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
@livewire($component['name'], $component['attributes'], key($id))
</div>
@empty
@endforelse
</div>
</div>
</div>
</div>