add slide-over component
This commit is contained in:
Andras Bacsai
parent
fb478c79b3
commit
7a51acbf8d
@ -4,7 +4,7 @@
|
||||
{{ $slot }}
|
||||
<template x-teleport="body">
|
||||
<div x-show="slideOverOpen" @keydown.window.escape="slideOverOpen=false" class="relative z-[99]">
|
||||
<div x-show="slideOverOpen" @click="slideOverOpen = false" class="fixed inset-0 "></div>
|
||||
<div x-show="slideOverOpen" @click="slideOverOpen = false" class="fixed inset-0 bg-black bg-opacity-60"></div>
|
||||
<div class="fixed inset-0 overflow-hidden">
|
||||
<div class="absolute inset-0 overflow-hidden">
|
||||
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
|
||||
@ -15,17 +15,17 @@
|
||||
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
|
||||
class="w-screen max-w-md">
|
||||
<div
|
||||
class="flex flex-col h-full py-5 overflow-y-scroll border-l shadow-lg bg-primary border-neutral-800">
|
||||
<div class="px-4 sm:px-5">
|
||||
class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-base-100 border-neutral-800">
|
||||
<div class="px-4 pb-10 sm:px-5">
|
||||
<div class="flex items-start justify-between pb-1">
|
||||
<h2 class="text-base leading-6" id="slide-over-title">
|
||||
<h2 class="text-2xl leading-6" id="slide-over-title">
|
||||
{{ $title }}</h2>
|
||||
<div class="flex items-center h-auto ml-3">
|
||||
<button @click="slideOverOpen=false"
|
||||
class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-3 mr-5 space-x-1 text-xs font-normal border-none rounded">
|
||||
<button class="icon" @click="slideOverOpen=false"
|
||||
class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-3 h-3">
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
|
||||
@ -13,8 +13,15 @@
|
||||
</form>
|
||||
<div class="flex gap-2">
|
||||
<h2>Shared Variables</h2>
|
||||
<x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
<x-slide-over>
|
||||
<x-slot:title>New Shared Variable</x-slot:title>
|
||||
<x-slot:content>
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
</x-slot:content>
|
||||
<button @click="slideOverOpen=true"
|
||||
class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+
|
||||
Add</button>
|
||||
</x-slide-over>
|
||||
</div>
|
||||
<div class="pb-4">You can use this anywhere.</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
@ -43,8 +43,14 @@
|
||||
</form>
|
||||
<div class="flex gap-2 pt-10">
|
||||
<h2>Shared Variables</h2>
|
||||
<x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
<x-slide-over>
|
||||
<x-slot:title>New Shared Variable</x-slot:title>
|
||||
<x-slot:content>
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
</x-slot:content>
|
||||
<button @click="slideOverOpen=true"
|
||||
class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
|
||||
</x-slide-over>
|
||||
</div>
|
||||
<div class="pb-4">You can use this anywhere.</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
@ -1,16 +1,10 @@
|
||||
<dialog id="newVariable" class="modal">
|
||||
<form method="dialog" class="flex flex-col gap-2 rounded modal-box" wire:submit='submit'>
|
||||
<h3 class="text-lg font-bold">Add Environment Variable</h3>
|
||||
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
|
||||
<x-forms.input placeholder="production" id="value" label="Value" required />
|
||||
@if (data_get($parameters, 'application_uuid'))
|
||||
<x-forms.checkbox id="is_build_time" label="Build Variable?" />
|
||||
@endif
|
||||
<x-forms.button onclick="newVariable.close()" type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</form>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
|
||||
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
|
||||
<x-forms.input placeholder="production" id="value" label="Value" required />
|
||||
@if (data_get($parameters, 'application_uuid'))
|
||||
<x-forms.checkbox id="is_build_time" label="Build Variable?" />
|
||||
@endif
|
||||
<x-forms.button type="submit" @click="slideOverOpen=false">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</form>
|
||||
|
||||
@ -4,20 +4,13 @@
|
||||
<h2>Environment Variables</h2>
|
||||
@if ($resource->type() !== 'service')
|
||||
<x-slide-over>
|
||||
<x-slot:title>Add Environment Variables</x-slot:title>
|
||||
<x-slot:title>New Environment Variable</x-slot:title>
|
||||
<x-slot:content>
|
||||
<form class="flex flex-col gap-2 rounded" wire:submit='submit'>
|
||||
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
|
||||
<x-forms.input placeholder="production" id="value" label="Value" required />
|
||||
<x-forms.button type="submit">
|
||||
Save
|
||||
</x-forms.button>
|
||||
</form>
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
</x-slot:content>
|
||||
<button @click="slideOverOpen=true"
|
||||
class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
|
||||
</x-slide-over>
|
||||
{{-- <x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button> --}}
|
||||
@endif
|
||||
<x-forms.button
|
||||
wire:click='switch'>{{ $view === 'normal' ? 'Developer view' : 'Normal view' }}</x-forms.button>
|
||||
@ -46,12 +39,12 @@
|
||||
@endif
|
||||
@else
|
||||
<form wire:submit='saveVariables(false)' class="flex flex-col gap-2">
|
||||
<x-forms.textarea rows=25 class="whitespace-pre-wrap" id="variables"></x-forms.textarea>
|
||||
<x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables"></x-forms.textarea>
|
||||
<x-forms.button type="submit" class="btn btn-primary">Save</x-forms.button>
|
||||
</form>
|
||||
@if ($showPreview)
|
||||
<form wire:submit='saveVariables(true)' class="flex flex-col gap-2">
|
||||
<x-forms.textarea rows=25 class="whitespace-pre-wrap" label="Preview Environment Variables"
|
||||
<x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Environment Variables"
|
||||
id="variablesPreview"></x-forms.textarea>
|
||||
<x-forms.button type="submit" class="btn btn-primary">Save</x-forms.button>
|
||||
</form>
|
||||
|
||||
@ -2,8 +2,14 @@
|
||||
<x-team.navbar />
|
||||
<div class="flex gap-2">
|
||||
<h2>Shared Variables</h2>
|
||||
<x-forms.button class="btn" onclick="newVariable.showModal()">+ Add</x-forms.button>
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
<x-slide-over>
|
||||
<x-slot:title>New Shared Variable</x-slot:title>
|
||||
<x-slot:content>
|
||||
<livewire:project.shared.environment-variable.add />
|
||||
</x-slot:content>
|
||||
<button @click="slideOverOpen=true"
|
||||
class="font-normal text-white normal-case border-none rounded btn btn-primary btn-sm no-animation">+ Add</button>
|
||||
</x-slide-over>
|
||||
</div>
|
||||
<div class="pb-4">You can use this anywhere.</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user