feat(editor): working color picker

mapmarker · Nov 23, 2023 · 26aee93 · 26aee93
1 parent e20e37a
commit 26aee93
Show file tree

Hide file tree

Showing 6 changed files with 233 additions and 23 deletions.
diff --git a/app/View/Components/Editor/InputColorSelect.php b/app/View/Components/Editor/InputColorSelect.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\View\Components\Editor;
+
+use Illuminate\View\Component;
+
+class InputColorSelect extends Component
+{
+    public $changeEvent;
+
+    public $default;
+
+    /**
+     * Create a new component instance.
+     *
+     * @return void
+     */
+    public function __construct(string $changeEvent, string $default = '#333')
+    {
+        $this->changeEvent = $changeEvent;
+        $this->default = $default;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     *
+     * @return \Illuminate\Contracts\View\View|\Closure|string
+     */
+    public function render()
+    {
+        return view('components.editor.input-color-select');
+    }
+}
diff --git a/app/View/Components/EditorIconSelect.php → ...iew/Components/Editor/InputIconSelect.php b/app/View/Components/EditorIconSelect.php → ...iew/Components/Editor/InputIconSelect.php
@@ -1,11 +1,11 @@
 <?php
 
-namespace App\View\Components;
+namespace App\View\Components\Editor;
 
 use Illuminate\Support\Str;
 use Illuminate\View\Component;
 
-class EditorIconSelect extends Component
+class InputIconSelect extends Component
 {
     public $changeEvent;
 
@@ -66,6 +66,6 @@ protected function getIconsInDir($prefix, $path)
      */
     public function render()
     {
-        return view('components.editor-icon-select');
+        return view('components.editor.input-icon-select');
     }
 }
diff --git a/public/css/app.css b/public/css/app.css
@@ -1161,6 +1161,9 @@ select {
 .isolate {
   isolation: isolate;
 }
+.z-10 {
+  z-index: 10;
+}
 .col-span-1 {
   grid-column: span 1 / span 1;
 }
@@ -1183,6 +1186,10 @@ select {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
+}
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1215,6 +1222,9 @@ select {
 .mb-4 {
   margin-bottom: 1rem;
 }
+.mb-5 {
+  margin-bottom: 1.25rem;
+}
 .mb-6 {
   margin-bottom: 1.5rem;
 }
@@ -1227,6 +1237,9 @@ select {
 .ml-2 {
   margin-left: 0.5rem;
 }
+.ml-3 {
+  margin-left: 0.75rem;
+}
 .mt-12 {
   margin-top: 3rem;
 }
@@ -1239,6 +1252,9 @@ select {
 .mt-6 {
   margin-top: 1.5rem;
 }
+.mt-8 {
+  margin-top: 2rem;
+}
 .mt-9 {
   margin-top: 2.25rem;
 }
@@ -1272,6 +1288,9 @@ select {
 .h-0\.5 {
   height: 0.125rem;
 }
+.h-10 {
+  height: 2.5rem;
+}
 .h-12 {
   height: 3rem;
 }
@@ -1281,6 +1300,9 @@ select {
 .h-6 {
   height: 1.5rem;
 }
+.h-8 {
+  height: 2rem;
+}
 .h-\[75px\] {
   height: 75px;
 }
@@ -1293,12 +1315,21 @@ select {
 .w-1 {
   width: 0.25rem;
 }
+.w-10 {
+  width: 2.5rem;
+}
 .w-36 {
   width: 9rem;
 }
+.w-40 {
+  width: 10rem;
+}
 .w-6 {
   width: 1.5rem;
 }
+.w-8 {
+  width: 2rem;
+}
 .w-\[41px\] {
   width: 41px;
 }
@@ -1320,6 +1351,9 @@ select {
 .max-w-full {
   max-width: 100%;
 }
+.max-w-sm {
+  max-width: 24rem;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1329,6 +1363,25 @@ select {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.origin-top-right {
+  transform-origin: top right;
+}
+.scale-100 {
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.scale-95 {
+  --tw-scale-x: .95;
+  --tw-scale-y: .95;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.cursor-pointer {
+  cursor: pointer;
+}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -1341,6 +1394,9 @@ select {
 .grid-cols-5 {
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .items-center {
   align-items: center;
 }
@@ -1381,6 +1437,9 @@ select {
 .rounded {
   border-radius: 0.25rem;
 }
+.rounded-full {
+  border-radius: 9999px;
+}
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1390,27 +1449,26 @@ select {
 .rounded-xl {
   border-radius: 0.75rem;
 }
-.rounded-l-lg {
-  border-top-left-radius: 0.5rem;
-  border-bottom-left-radius: 0.5rem;
-}
-.rounded-r-lg {
-  border-top-right-radius: 0.5rem;
-  border-bottom-right-radius: 0.5rem;
-}
 .border {
   border-width: 1px;
 }
 .border-0 {
   border-width: 0px;
 }
+.border-4 {
+  border-width: 4px;
+}
 .border-gray-900 {
   --tw-border-opacity: 1;
   border-color: rgb(17 24 39 / var(--tw-border-opacity));
 }
 .border-transparent {
   border-color: transparent;
 }
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity));
+}
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1446,6 +1504,10 @@ select {
 .bg-transparent {
   background-color: transparent;
 }
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
 .bg-yellow-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
@@ -1454,6 +1516,9 @@ select {
   --tw-bg-opacity: 1;
   background-color: rgb(24 24 27 / var(--tw-bg-opacity));
 }
+.fill-current {
+  fill: currentColor;
+}
 .p-10 {
   padding: 2.5rem;
 }
@@ -1466,9 +1531,6 @@ select {
 .p-6 {
   padding: 1.5rem;
 }
-.p-4 {
-  padding: 1rem;
-}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1485,10 +1547,18 @@ select {
   padding-top: 0px;
   padding-bottom: 0px;
 }
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
 .py-2 {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.py-3 {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
 .py-4 {
   padding-top: 1rem;
   padding-bottom: 1rem;
@@ -1569,6 +1639,9 @@ select {
 .font-medium {
   font-weight: 500;
 }
+.leading-normal {
+  line-height: 1.5;
+}
 .text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1597,6 +1670,10 @@ select {
   --tw-text-opacity: 1;
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1647,18 +1724,45 @@ select {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.opacity-0 {
+  opacity: 0;
+}
+.opacity-100 {
+  opacity: 1;
+}
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.shadow-lg {
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
 .shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.\[x-bind\:data-icon\=\"iconName\"\] {
-  x-bind: data-icon="iconName";
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+.duration-100 {
+  transition-duration: 100ms;
+}
+.duration-75 {
+  transition-duration: 75ms;
+}
+.ease-in {
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
+}
+.ease-out {
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 
 [x-cloak] {
@@ -1742,11 +1846,6 @@ select {
   background-color: rgb(67 56 202 / var(--tw-bg-opacity));
 }
 
-.hover\:text-gray-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
 .hover\:text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

diff --git a/resources/views/components/editor.blade.php b/resources/views/components/editor.blade.php
@@ -2,13 +2,16 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-12"
     id="editor"
     @icon-changed.window="iconName = $event.detail"
+    @color-changed.window="color = $event.detail.replace('#', '')"
     x-data="{
+        {{-- PARAMETER VALUES --}}
         size: 100,
         iconName: 'fa-solid fa-map-location',
+        color: '333',
         experience: 'icon',
 
         iconUrl() {
-            return '/api/v3/font-awesome/v6/icon?size=100&icon='+this.iconName;
+            return '/api/v3/font-awesome/v6/icon?size=100&icon='+this.iconName+'&color='+this.color;
         }
     }">
 
@@ -29,7 +32,8 @@
                         Customize your marker:
                     </h2>
 
-                    <x-editor-icon-select change-event="icon-changed" />
+                    <x-editor.input-icon-select change-event="icon-changed" />
+                    <x-editor.input-color-select change-event="color-changed" default="#333" />
                 </div>
 
                 {{-- PIN WITH ICON --}}