add darkmode support for Markdown Editor

tomatophp · May 8, 2024 · 1847634 · 1847634
1 parent 94b6907
commit 1847634
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 21 deletions.
diff --git a/resources/views/auth/confirm-password.blade.php b/resources/views/auth/confirm-password.blade.php
@@ -8,7 +8,7 @@
             <x-splade-input id="password" type="password" name="password" required autocomplete="current-password" :label="__('Password')" />
 
             <div class="flex justify-end">
-                <x-splade-submit :label="__('Confirm')" />
+                <x-tomato-admin-submit spinner :label="__('Confirm')" />
             </div>
         </x-splade-form>
     </x-auth-card>

diff --git a/resources/views/auth/forgot-password.blade.php b/resources/views/auth/forgot-password.blade.php
@@ -11,7 +11,7 @@
         <x-splade-input id="email" class="block mt-1 w-full" type="email" name="email" :label="__('Email')" required autofocus />
 
         <div class="flex items-center justify-end">
-            <x-splade-submit :label="__('Email Password Reset Link')" />
+            <x-tomato-admin-submit spinner :label="__('Email Password Reset Link')" />
         </div>
     </x-splade-form>
 </x-tomato-admin-guest-layout>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -1,7 +1,7 @@
 <x-tomato-admin-guest-layout>
-    <x-slot name="header">
+    <x-slot:header>
         {{ __('Login') }}
-    </x-slot>
+    </x-slot:header>
 
     <x-tomato-auth-session-status class="mb-4" />
     <div class="space-y-8">
@@ -19,7 +19,7 @@
                     </Link>
                 @endif
 
-                <x-splade-submit class="ml-3" :label="__('Log in')" />
+                <x-tomato-admin-submit spinner :label="__('Log in')" />
             </div>
         </x-splade-form>
     </div>

diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -23,7 +23,7 @@
                 {{ trans('tomato-admin::global.auth.already-registered') }}
             </Link>
 
-            <x-splade-submit class="ml-4" :label="trans('tomato-admin::global.auth.register-button')" />
+            <x-tomato-admin-submit spinner class="ml-4" :label="trans('tomato-admin::global.auth.register-button')" />
         </div>
     </x-splade-form>
 </x-tomato-admin-guest-layout>
diff --git a/resources/views/auth/reset-password.blade.php b/resources/views/auth/reset-password.blade.php
@@ -6,7 +6,7 @@
             <x-splade-input id="password_confirmation" type="password" name="password_confirmation" :label="__('Confirm Password')" required />
 
             <div class="flex items-center justify-end">
-                <x-splade-submit :label="__('Reset Password')" />
+                <x-tomato-admin-submit spinner :label="__('Reset Password')" />
             </div>
         </x-splade-form>
     </x-auth-card>

diff --git a/resources/views/auth/two-factor-challenge.blade.php b/resources/views/auth/two-factor-challenge.blade.php
@@ -36,7 +36,7 @@
                     </span>
                     </button>
 
-                    <x-splade-submit :label="__('Log in')" />
+                    <x-tomato-admin-submit spinner :label="__('Log in')" />
                 </div>
             </x-splade-form>
 

diff --git a/resources/views/auth/verify-email.blade.php b/resources/views/auth/verify-email.blade.php
@@ -17,7 +17,7 @@
 
     <div class="mt-4 flex items-center justify-between">
         <x-splade-form action="{{ route('verification.send') }}">
-            <x-splade-submit :label="__('Resend Verification Email')" />
+            <x-tomato-admin-submit spinner :label="__('Resend Verification Email')" />
         </x-splade-form>
 
         <form method="POST" action="{{ route('logout') }}">

diff --git a/resources/views/components/markdown-editor.blade.php b/resources/views/components/markdown-editor.blade.php
@@ -1,8 +1,56 @@
-<label>
-    <span class="block mb-1 text-zinc-700 font-sans dark:text-white">{{$label ?? ''}}</span>
-</label>
-<MdEditor  previewTheme="github" theme="dark" {{ $attributes->only(['v-if', 'v-show', 'class'])->class(['hidden' => $isHidden()]) }}
-v-model="{{ $vueModel() }}" language="en-US" :preview="@js($preview)" :toolbars="[
+<x-splade-data
+    default="{
+        dark: false,
+        lang: {
+            id: 'en',
+            name: 'English'
+        },
+    }"
+
+    remember="admin"
+    local-storage
+>
+<div v-if="data.dark">
+    <label>
+        <span class="block mb-1 text-zinc-700 font-sans dark:text-white">{{$label ?? ''}}</span>
+    </label>
+    <MdEditor theme="dark"  {{ $attributes->only(['v-if', 'v-show', 'class'])->class(['hidden' => $isHidden()]) }}
+    v-model="{{ $vueModel() }}" :language="data.lang.id === 'ar' ? 'ar-EG' : 'en-US'" :preview="@js($preview)" :toolbars="[
+              'bold',
+              'underline',
+              'italic',
+              '-',
+              'strikeThrough',
+              'title',
+              'sub',
+              'sup',
+              'quote',
+              'unorderedList',
+              'orderedList',
+              'task',
+              '-',
+              'codeRow',
+              'code',
+              'link',
+              'image',
+              'table',
+              'htmlPreview',
+              'preview',
+              'fullscreen',
+              'prettier',
+              'katex',
+              'mermaid',
+
+          ]">
+
+    </MdEditor>
+</div>
+    <div v-else>
+        <label>
+            <span class="block mb-1 text-zinc-700 font-sans dark:text-white">{{$label ?? ''}}</span>
+        </label>
+        <MdEditor  previewTheme="github"  {{ $attributes->only(['v-if', 'v-show', 'class'])->class(['hidden' => $isHidden()]) }}
+        v-model="{{ $vueModel() }}" language="en-US" :preview="@js($preview)" :toolbars="[
               'bold',
               'underline',
               'italic',
@@ -23,4 +71,6 @@
               'table',
           ]">
 
-</MdEditor>
+        </MdEditor>
+    </div>
+</x-splade-data>
diff --git a/resources/views/components/markdown-viewer.blade.php b/resources/views/components/markdown-viewer.blade.php
@@ -1,3 +1,13 @@
-<div class="font-main">
-    <MdPreview editorId="preview-only" modelValue="{{$content}}" language="en-US" {{ $attributes }} previewTheme="github" theme="dark" />
-</div>
+<x-splade-data
+    default="{
+        dark: false,
+    }"
+
+   remember="admin"
+   local-storage
+>
+    <div class="font-main">
+        <MdPreview v-if="data.dark" editorId="preview-only" modelValue="{{$content}}" language="en-US" {{ $attributes }} previewTheme="github" theme="dark" />
+        <MdPreview v-else  editorId="preview-only" modelValue="{{$content}}" language="en-US" {{ $attributes }} previewTheme="github" />
+    </div>
+</x-splade-data>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -18,12 +18,16 @@
 <div class="filament-body bg-zinc-50 text-zinc-950 dark:text-white dark:bg-zinc-900 font-main" @load="data.dark" id="appBody">
     <div class="filament-app-layout flex w-full min-h-screen overflow-v-clip">
 
-        <x-tomato-admin-aside />
+        @if($sidebar)
+            <x-tomato-admin-aside />
+        @endif
         <div
+            @if($sidebar)
                 :class="{
                         'lg:pl-24 lg:pl-24 rtl:lg:pr-24 rtl:lg:pl-0': data.makeMenuMin,
                         'lg:pl-72 lg:pl-72 rtl:lg:pr-72 rtl:lg:pl-0': !data.makeMenuMin
-                    }"
+                }"
+            @endif
                 class="
                         flex
                         filament-main
@@ -36,7 +40,7 @@ class="
                     "
         >
 
-            <x-tomato-admin-navbar />
+            <x-tomato-admin-navbar :sidebar="$sidebar" />
 
             <div class="filament-main-content flex-1 w-full px-4 mx-auto md:px-6 lg:px-8">
                 @foreach(\TomatoPHP\TomatoAdmin\Facade\TomatoSlot::getLayoutTop() as $item)

diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -1,3 +1,19 @@
+<x-splade-data
+    default="{
+        makeMenuHide: false,
+        makeMenuMin:  false,
+        dark: false,
+        lang: {
+            id: 'en',
+            name: 'English'
+        },
+        asideMenuGroup: {},
+        groupOpened: false
+    }"
+
+    remember="admin"
+    local-storage
+>
 <div class="flex items-center justify-center min-h-screen py-12 text-zinc-900 bg-zinc-100 filament-login-page dark:bg-zinc-900 dark:text-white">
     <div class="w-screen max-w-md px-6 -mt-16 space-y-8 md:mt-0 md:px-2">
         <div class="relative p-8 space-y-4 border border-zinc-200 shadow-2xl bg-white/50 backdrop-blur-xl rounded-2xl dark:bg-zinc-900/50 dark:border-zinc-700">
@@ -21,3 +37,20 @@
         </div>
     </div>
 </div>
+    <x-splade-script>
+        if(localStorage.getItem("splade") && typeof document !== undefined){
+        let spladeStorage = JSON.parse(localStorage.getItem("splade"));
+        let dark = spladeStorage?.admin?.dark;
+        document.body.classList[dark ? "add" : "remove"]("dark-scrollbars");
+        document.documentElement.classList[dark ? "add" : "remove"]("dark");
+        let htmlEl = document.querySelector("html");
+
+        if ("{{app()->getLocale()}}" === "ar") {
+        htmlEl.setAttribute("dir", "rtl");
+        } else {
+        htmlEl.setAttribute("dir", "ltr");
+        }
+        }
+
+    </x-splade-script>
+</x-splade-data>
diff --git a/resources/views/layouts/includes/nav.blade.php b/resources/views/layouts/includes/nav.blade.php
@@ -16,6 +16,7 @@
                 ">
     <div class="flex items-center w-full px-2 sm:px-4 md:px-6 lg:px-8">
         <!-- hide button -->
+        @if($sidebar)
         <button
                 class="
 
@@ -49,6 +50,7 @@ class="
                         "
 
         >
+
             <div
                     @click.prevent="data.makeMenuMin = !data.makeMenuMin"
                     class="relative lg:absolute invisible lg:visible text-center flex justify-center"
@@ -69,6 +71,7 @@ class="relative lg:absolute visible lg:invisible flex justify-center text-center
                 <x-heroicon-o-bars-3 class="w-6 h-6"/>
             </div>
         </button>
+        @endif
         <button
             class="
                   flex

diff --git a/src/Views/Layout.php b/src/Views/Layout.php
@@ -6,6 +6,12 @@
 
 class Layout extends Component
 {
+    public function __construct(
+        public bool $sidebar = true,
+    )
+    {
+    }
+
     /**
      * Get the view / contents that represents the component.
      *

diff --git a/src/Views/Navbar.php b/src/Views/Navbar.php
@@ -6,6 +6,12 @@
 
 class Navbar extends Component
 {
+    public function __construct(
+        public bool $sidebar = true,
+    )
+    {
+    }
+
     /**
      * Get the view / contents that represents the component.
      *