Skip to content

Commit

Permalink
Merge pull request #11 from thedevdojo/fixingPreviewLinks
Browse files Browse the repository at this point in the history 
Fixing preview links
  • Loading branch information
@tnylea
tnylea authored May 19, 2024
2 parents a377141 + 0b114d6 commit 61db2b9
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 55 deletions.
2 changes: 1 addition & 1 deletion public/build/assets/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
console.log("rad sauce");

2 changes: 1 addition & 1 deletion public/build/assets/styles.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion resources/js/auth.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
console.log('rad sauce');


function hello(){
return 1+1;
Expand Down
88 changes: 37 additions & 51 deletions resources/views/components/layouts/setup.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,15 +67,49 @@ function enableCodeMirror(){
sidebar: false,
preview: false,
previewMenuDropdown: false,
previewURL: '/auth/login'
previewPages: [
{
'name' : 'Login',
'url' : '/auth/login'
},
{
'name' : 'Register',
'url' : '/auth/register'
},
{
'name' : 'Verify Account',
'url' : '/auth/verify'
},
{
'name' : 'Password Confirmation',
'url' : '/auth/password/confirm'
},
{
'name' : 'Password Reset Request',
'url' : '/auth/password/reset'
},
{
'name' : 'Password Reset',
'url' : '/auth/password/SomeReallyLongToken'
},
{
'name' : 'Two Factor Challenge',
'url' : '/auth/two-factor-challenge'
},
],
previewPageActive: null
}"
x-init="
if(previewPageActive == null){
previewPageActive = previewPages[0];
}
$watch('preview', function(value){
if(value){
console.log('new value');
setTimeout(function(){
document.getElementById('preview').src= previewURL + '?' + Date.now();
document.getElementById('preview').src= previewPageActive.url + '?' + Date.now();
setTimeout(function(){
document.getElementById('preview_loader').classList.add('hidden');
document.getElementById('preview').classList.remove('hidden');
Expand Down Expand Up @@ -124,55 +158,7 @@ class="overflow-hidden w-screen h-screen bg-gray-50 dark:bg-zinc-950">
}
</script>


<div x-show="preview" @click="preview=false" x-transition.opacity class="absolute inset-0 z-[98] w-screen h-screen delay-500 bg-black/50" x-cloak></div>
<div :class="{ 'translate-y-full duration-500' : !preview, 'translate-y-0 pt-3 duration-300' : preview }"
class="flex absolute top-0 left-0 px-3 z-[99] ease-in-out flex-col w-screen h-screen" x-cloak>

<div class="flex flex-col w-full h-full bg-white rounded-t-md">
<div class="flex relative z-50 flex-shrink-0 justify-center items-center w-full h-10 bg-white rounded-t-md border-b border-zinc-200">
<div class="relative" x-on:click.outside="previewMenuDropdown=false">
<button x-on:click="previewMenuDropdown=!previewMenuDropdown" class="flex justify-between items-center px-3 w-64 h-7 text-xs rounded-md border cursor-pointer bg-zinc-100 hover:bg-zinc-200/70">
<img src="{{ url(config('devdojo.auth.appearance.favicon.light')) }}" class="w-4 h-4 -translate-x-1.5" />
<span class="font-medium">Login</span>
<x-phosphor-caret-down-fill class="ml-2 w-3 h-3" />
</button>
<div x-show="previewMenuDropdown" x-transition.scale.origin.top.opacity class="[&>button]:px-3 [&>button]:block [&>button]:rounded-md space-y-1 [&>button:hover]:bg-zinc-100 group [&>button]:text-left [&>button]:w-full [&>button]:text-sm [&>button]:py-1.5 absolute left-0 bg-white shadow-xl p-2 w-64 rounded-md top-0 mt-[33px] z-[99]">
<button @click="previewURL='/auth/login'; previewMenuDropdown=false;">Login</button>
<button @click="previewURL='/auth/register'; previewMenuDropdown=false;">Register</button>
<button @click="previewURL='/auth/verify'; previewMenuDropdown=false;">Verify Account</button>
<button @click="previewURL='/auth/password/confirm'; previewMenuDropdown=false;">Password Confirmation</button>
<button @click="previewURL='/auth/password/reset'; previewMenuDropdown=false;">Password Reset Request</button>
<button @click="previewURL='/auth/password/SomeReallyLongToken'; previewMenuDropdown=false;">Password Reset</button>
<button @click="previewURL='/auth/two-factor-challenge'; previewMenuDropdown=false;">Two Factor Challenge</button>
</div>
</div>
<div class="flex absolute right-0 items-center h-full">
<a :href="previewURL" target="_blank" class="flex flex-shrink-0 items-center px-2 py-1 mr-2 text-xs bg-white rounded-md border shadow-sm duration-200 ease-out text-zinc-500 hover:text-zinc-700 hover:border-zinc-200 group border-zinc-100">
<span>Preview in New Tab</span>
<x-phosphor-arrow-right-bold class="flex-shrink-0 ml-1 w-3 h-3 duration-200 ease-out -rotate-45 group-hover:-translate-y-px group-hover:translate-x-px" />
</a>
<button :class="{ '-translate-y-full rounded-t-md border border-zinc-200 shadow-xl' : !preview, 'rounded-tr-md border-l border-zinc-200' : preview }" x-on:click="preview=!preview" class="inline-flex z-50 items-center px-4 h-full text-sm font-medium bg-white hover:bg-zinc-100 group text-zinc-600 hover:text-zinc-800">
<div x-show="!preview" class="flex items-center space-x-1">
<x-phosphor-monitor-bold class="-ml-0.5 w-4 h-4 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
<span>Open Preview</span>
</div>
<div x-show="preview" class="flex items-center space-x-1">
<x-phosphor-x-bold class="-ml-0.5 w-3.5 h-3.5 duration-300 ease-out" />
</div>
</button>
</div>
</div>
<div id="preview_loader" class="absolute top-0 left-0 z-40 justify-center items-center px-3 mt-10 w-full h-full">
<div class="flex justify-center items-center w-full h-full bg-zinc-100">
<svg class="w-5 h-5 animate-spin text-zinc-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
</div>
</div>
<div x-show="previewMenuDropdown" class="absolute inset-0 z-40 w-full h-full bg-transparent"></div>
<iframe id="preview" :src="previewURL + '?preview=true'" class="hidden overflow-hidden relative z-30 w-full h-full opacity-0 duration-300 ease-out"></iframe>
</div>
</div>

@include('auth::includes.setup.preview')

</body>
</html>
1 change: 0 additions & 1 deletion resources/views/components/setup/heading.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<x-phosphor-arrow-left-bold class="w-3 h-3 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
<span>Back</span>
</a>
<!-- TODO - When clicking the preview we want to determine what the last page was that the user was on when this auth preview was last opened -->
<button @click="preview=true" href="/auth/setup" class="inline-flex items-center px-4 py-1.5 mb-3 space-x-1 text-sm font-medium rounded-full group bg-zinc-100 text-zinc-600 hover:text-zinc-800">
<x-phosphor-monitor-bold class="w-4 h-4 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
<span>Preview</span>
Expand Down
43 changes: 43 additions & 0 deletions resources/views/includes/setup/preview.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<div x-show="preview" @click="preview=false" x-transition.opacity class="absolute inset-0 z-[98] w-screen h-screen delay-500 bg-black/50" x-cloak></div>
<div :class="{ 'translate-y-full duration-500' : !preview, 'translate-y-0 pt-3 duration-300' : preview }"
class="flex absolute top-0 left-0 px-3 z-[99] ease-in-out flex-col w-screen h-screen" x-cloak>

<div class="flex flex-col w-full h-full bg-white rounded-t-md">
<div class="flex relative z-50 flex-shrink-0 justify-center items-center w-full h-10 bg-white rounded-t-md border-b border-zinc-200">
<div class="relative" x-on:click.outside="previewMenuDropdown=false">
<button x-on:click="previewMenuDropdown=!previewMenuDropdown" class="flex justify-between items-center px-3 w-64 h-7 text-xs rounded-md border cursor-pointer bg-zinc-100 hover:bg-zinc-200/70">
<img src="{{ url(config('devdojo.auth.appearance.favicon.light')) }}" class="w-4 h-4 -translate-x-1.5" />
<span class="font-medium" x-text="previewPageActive.name"></span>
<x-phosphor-caret-down-fill class="ml-2 w-3 h-3" />
</button>
<div x-show="previewMenuDropdown" x-transition.scale.origin.top.opacity class="[&>button]:px-3 [&>button]:block [&>button]:rounded-md space-y-1 [&>button:hover]:bg-zinc-100 group [&>button]:text-left [&>button]:w-full [&>button]:text-sm [&>button]:py-1.5 absolute left-0 bg-white shadow-xl py-1 px-2 w-64 rounded-md top-0 mt-[33px] z-[99]">
<template x-for="(previewPage, index) in previewPages">
<button :class="{ 'bg-zinc-100' : previewPage.url == previewPageActive.url }" @click="previewURL=previewPage.url; previewPageActive=previewPages[index]; previewMenuDropdown=false;" x-text="previewPage.name"></button>
</template>
</div>
</div>
<div class="flex absolute right-0 items-center h-full">
<a :href="previewPageActive.url" target="_blank" class="flex flex-shrink-0 items-center px-2 py-1 mr-2 text-xs bg-white rounded-md border shadow-sm duration-200 ease-out text-zinc-500 hover:text-zinc-700 hover:border-zinc-200 group border-zinc-100">
<span>Preview in New Tab</span>
<x-phosphor-arrow-right-bold class="flex-shrink-0 ml-1 w-3 h-3 duration-200 ease-out -rotate-45 group-hover:-translate-y-px group-hover:translate-x-px" />
</a>
<button :class="{ '-translate-y-full rounded-t-md border border-zinc-200 shadow-xl' : !preview, 'rounded-tr-md border-l border-zinc-200' : preview }" x-on:click="preview=!preview" class="inline-flex z-50 items-center px-4 h-full text-sm font-medium bg-white hover:bg-zinc-100 group text-zinc-600 hover:text-zinc-800">
<div x-show="!preview" class="flex items-center space-x-1">
<x-phosphor-monitor-bold class="-ml-0.5 w-4 h-4 duration-300 ease-out translate-x-0 group-hover:-translate-x-0.5" />
<span>Open Preview</span>
</div>
<div x-show="preview" class="flex items-center space-x-1">
<x-phosphor-x-bold class="-ml-0.5 w-3.5 h-3.5 duration-300 ease-out" />
</div>
</button>
</div>
</div>
<div id="preview_loader" class="absolute top-0 left-0 z-40 justify-center items-center px-3 mt-10 w-full h-full">
<div class="flex justify-center items-center w-full h-full bg-zinc-100">
<svg class="w-5 h-5 animate-spin text-zinc-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
</div>
</div>
<div x-show="previewMenuDropdown" class="absolute inset-0 z-40 w-full h-full bg-transparent"></div>
<iframe id="preview" :src="previewPageActive.url + '?preview=true'" class="hidden overflow-hidden relative z-30 w-full h-full opacity-0 duration-300 ease-out"></iframe>
</div>
</div>

0 comments on commit 61db2b9

Please sign in to comment.