Skip to content

Commit 26aee93

Browse files
JonnxJonnx
committed
feat(editor): working color picker
1 parent e20e37a commit 26aee93

6 files changed

Lines changed: 233 additions & 23 deletions

File tree

‎app/View/Components/Editor/InputColorSelect.php‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<?php
2+
3+
namespace App\View\Components\Editor;
4+
5+
use Illuminate\View\Component;
6+
7+
class InputColorSelect extends Component
8+
{
9+
public $changeEvent;
10+
11+
public $default;
12+
13+
/**
14+
* Create a new component instance.
15+
*
16+
* @return void
17+
*/
18+
public function __construct(string $changeEvent, string $default = '#333')
19+
{
20+
$this->changeEvent = $changeEvent;
21+
$this->default = $default;
22+
}
23+
24+
/**
25+
* Get the view / contents that represent the component.
26+
*
27+
* @return \Illuminate\Contracts\View\View|\Closure|string
28+
*/
29+
public function render()
30+
{
31+
return view('components.editor.input-color-select');
32+
}
33+
}

app/View/Components/EditorIconSelect.php renamed to app/View/Components/Editor/InputIconSelect.php

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<?php
22

3-
namespace App\View\Components;
3+
namespace App\View\Components\Editor;
44

55
use Illuminate\Support\Str;
66
use Illuminate\View\Component;
77

8-
class EditorIconSelect extends Component
8+
class InputIconSelect extends Component
99
{
1010
public $changeEvent;
1111

@@ -66,6 +66,6 @@ protected function getIconsInDir($prefix, $path)
6666
*/
6767
public function render()
6868
{
69-
return view('components.editor-icon-select');
69+
return view('components.editor.input-icon-select');
7070
}
7171
}

‎public/css/app.css‎

Lines changed: 117 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1161,6 +1161,9 @@ select {
11611161
.isolate {
11621162
isolation: isolate;
11631163
}
1164+
.z-10 {
1165+
z-index: 10;
1166+
}
11641167
.col-span-1 {
11651168
grid-column: span 1 / span 1;
11661169
}
@@ -1183,6 +1186,10 @@ select {
11831186
margin-left: -0.25rem;
11841187
margin-right: -0.25rem;
11851188
}
1189+
.-mx-2 {
1190+
margin-left: -0.5rem;
1191+
margin-right: -0.5rem;
1192+
}
11861193
.mx-1 {
11871194
margin-left: 0.25rem;
11881195
margin-right: 0.25rem;
@@ -1215,6 +1222,9 @@ select {
12151222
.mb-4 {
12161223
margin-bottom: 1rem;
12171224
}
1225+
.mb-5 {
1226+
margin-bottom: 1.25rem;
1227+
}
12181228
.mb-6 {
12191229
margin-bottom: 1.5rem;
12201230
}
@@ -1227,6 +1237,9 @@ select {
12271237
.ml-2 {
12281238
margin-left: 0.5rem;
12291239
}
1240+
.ml-3 {
1241+
margin-left: 0.75rem;
1242+
}
12301243
.mt-12 {
12311244
margin-top: 3rem;
12321245
}
@@ -1239,6 +1252,9 @@ select {
12391252
.mt-6 {
12401253
margin-top: 1.5rem;
12411254
}
1255+
.mt-8 {
1256+
margin-top: 2rem;
1257+
}
12421258
.mt-9 {
12431259
margin-top: 2.25rem;
12441260
}
@@ -1272,6 +1288,9 @@ select {
12721288
.h-0\.5 {
12731289
height: 0.125rem;
12741290
}
1291+
.h-10 {
1292+
height: 2.5rem;
1293+
}
12751294
.h-12 {
12761295
height: 3rem;
12771296
}
@@ -1281,6 +1300,9 @@ select {
12811300
.h-6 {
12821301
height: 1.5rem;
12831302
}
1303+
.h-8 {
1304+
height: 2rem;
1305+
}
12841306
.h-\[75px\] {
12851307
height: 75px;
12861308
}
@@ -1293,12 +1315,21 @@ select {
12931315
.w-1 {
12941316
width: 0.25rem;
12951317
}
1318+
.w-10 {
1319+
width: 2.5rem;
1320+
}
12961321
.w-36 {
12971322
width: 9rem;
12981323
}
1324+
.w-40 {
1325+
width: 10rem;
1326+
}
12991327
.w-6 {
13001328
width: 1.5rem;
13011329
}
1330+
.w-8 {
1331+
width: 2rem;
1332+
}
13021333
.w-\[41px\] {
13031334
width: 41px;
13041335
}
@@ -1320,6 +1351,9 @@ select {
13201351
.max-w-full {
13211352
max-width: 100%;
13221353
}
1354+
.max-w-sm {
1355+
max-width: 24rem;
1356+
}
13231357
.max-w-xl {
13241358
max-width: 36rem;
13251359
}
@@ -1329,6 +1363,25 @@ select {
13291363
.flex-shrink-0 {
13301364
flex-shrink: 0;
13311365
}
1366+
.origin-top-right {
1367+
transform-origin: top right;
1368+
}
1369+
.scale-100 {
1370+
--tw-scale-x: 1;
1371+
--tw-scale-y: 1;
1372+
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));
1373+
}
1374+
.scale-95 {
1375+
--tw-scale-x: .95;
1376+
--tw-scale-y: .95;
1377+
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));
1378+
}
1379+
.transform {
1380+
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));
1381+
}
1382+
.cursor-pointer {
1383+
cursor: pointer;
1384+
}
13321385
.grid-cols-1 {
13331386
grid-template-columns: repeat(1, minmax(0, 1fr));
13341387
}
@@ -1341,6 +1394,9 @@ select {
13411394
.grid-cols-5 {
13421395
grid-template-columns: repeat(5, minmax(0, 1fr));
13431396
}
1397+
.flex-wrap {
1398+
flex-wrap: wrap;
1399+
}
13441400
.items-center {
13451401
align-items: center;
13461402
}
@@ -1381,6 +1437,9 @@ select {
13811437
.rounded {
13821438
border-radius: 0.25rem;
13831439
}
1440+
.rounded-full {
1441+
border-radius: 9999px;
1442+
}
13841443
.rounded-lg {
13851444
border-radius: 0.5rem;
13861445
}
@@ -1390,27 +1449,26 @@ select {
13901449
.rounded-xl {
13911450
border-radius: 0.75rem;
13921451
}
1393-
.rounded-l-lg {
1394-
border-top-left-radius: 0.5rem;
1395-
border-bottom-left-radius: 0.5rem;
1396-
}
1397-
.rounded-r-lg {
1398-
border-top-right-radius: 0.5rem;
1399-
border-bottom-right-radius: 0.5rem;
1400-
}
14011452
.border {
14021453
border-width: 1px;
14031454
}
14041455
.border-0 {
14051456
border-width: 0px;
14061457
}
1458+
.border-4 {
1459+
border-width: 4px;
1460+
}
14071461
.border-gray-900 {
14081462
--tw-border-opacity: 1;
14091463
border-color: rgb(17 24 39 / var(--tw-border-opacity));
14101464
}
14111465
.border-transparent {
14121466
border-color: transparent;
14131467
}
1468+
.border-white {
1469+
--tw-border-opacity: 1;
1470+
border-color: rgb(255 255 255 / var(--tw-border-opacity));
1471+
}
14141472
.bg-gray-200 {
14151473
--tw-bg-opacity: 1;
14161474
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -1446,6 +1504,10 @@ select {
14461504
.bg-transparent {
14471505
background-color: transparent;
14481506
}
1507+
.bg-white {
1508+
--tw-bg-opacity: 1;
1509+
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1510+
}
14491511
.bg-yellow-600 {
14501512
--tw-bg-opacity: 1;
14511513
background-color: rgb(202 138 4 / var(--tw-bg-opacity));
@@ -1454,6 +1516,9 @@ select {
14541516
--tw-bg-opacity: 1;
14551517
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
14561518
}
1519+
.fill-current {
1520+
fill: currentColor;
1521+
}
14571522
.p-10 {
14581523
padding: 2.5rem;
14591524
}
@@ -1466,9 +1531,6 @@ select {
14661531
.p-6 {
14671532
padding: 1.5rem;
14681533
}
1469-
.p-4 {
1470-
padding: 1rem;
1471-
}
14721534
.px-2 {
14731535
padding-left: 0.5rem;
14741536
padding-right: 0.5rem;
@@ -1485,10 +1547,18 @@ select {
14851547
padding-top: 0px;
14861548
padding-bottom: 0px;
14871549
}
1550+
.py-16 {
1551+
padding-top: 4rem;
1552+
padding-bottom: 4rem;
1553+
}
14881554
.py-2 {
14891555
padding-top: 0.5rem;
14901556
padding-bottom: 0.5rem;
14911557
}
1558+
.py-3 {
1559+
padding-top: 0.75rem;
1560+
padding-bottom: 0.75rem;
1561+
}
14921562
.py-4 {
14931563
padding-top: 1rem;
14941564
padding-bottom: 1rem;
@@ -1569,6 +1639,9 @@ select {
15691639
.font-medium {
15701640
font-weight: 500;
15711641
}
1642+
.leading-normal {
1643+
line-height: 1.5;
1644+
}
15721645
.text-black {
15731646
--tw-text-opacity: 1;
15741647
color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -1597,6 +1670,10 @@ select {
15971670
--tw-text-opacity: 1;
15981671
color: rgb(107 114 128 / var(--tw-text-opacity));
15991672
}
1673+
.text-gray-700 {
1674+
--tw-text-opacity: 1;
1675+
color: rgb(55 65 81 / var(--tw-text-opacity));
1676+
}
16001677
.text-gray-900 {
16011678
--tw-text-opacity: 1;
16021679
color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1647,18 +1724,45 @@ select {
16471724
-webkit-font-smoothing: antialiased;
16481725
-moz-osx-font-smoothing: grayscale;
16491726
}
1727+
.opacity-0 {
1728+
opacity: 0;
1729+
}
1730+
.opacity-100 {
1731+
opacity: 1;
1732+
}
16501733
.shadow {
16511734
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
16521735
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
16531736
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
16541737
}
1738+
.shadow-lg {
1739+
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
1740+
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
1741+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1742+
}
16551743
.shadow-sm {
16561744
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
16571745
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
16581746
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
16591747
}
1660-
.\[x-bind\:data-icon\=\"iconName\"\] {
1661-
x-bind: data-icon="iconName";
1748+
.transition {
1749+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1750+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1751+
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1752+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1753+
transition-duration: 150ms;
1754+
}
1755+
.duration-100 {
1756+
transition-duration: 100ms;
1757+
}
1758+
.duration-75 {
1759+
transition-duration: 75ms;
1760+
}
1761+
.ease-in {
1762+
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
1763+
}
1764+
.ease-out {
1765+
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
16621766
}
16631767

16641768
[x-cloak] {
@@ -1742,11 +1846,6 @@ select {
17421846
background-color: rgb(67 56 202 / var(--tw-bg-opacity));
17431847
}
17441848

1745-
.hover\:text-gray-700:hover {
1746-
--tw-text-opacity: 1;
1747-
color: rgb(55 65 81 / var(--tw-text-opacity));
1748-
}
1749-
17501849
.hover\:text-white:hover {
17511850
--tw-text-opacity: 1;
17521851
color: rgb(255 255 255 / var(--tw-text-opacity));

‎resources/views/components/editor.blade.php‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@
22
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12"
33
id="editor"
44
@icon-changed.window="iconName = $event.detail"
5+
@color-changed.window="color = $event.detail.replace('#', '')"
56
x-data="{
7+
{{-- PARAMETER VALUES --}}
68
size: 100,
79
iconName: 'fa-solid fa-map-location',
10+
color: '333',
811
experience: 'icon',
912
1013
iconUrl() {
11-
return '/api/v3/font-awesome/v6/icon?size=100&icon='+this.iconName;
14+
return '/api/v3/font-awesome/v6/icon?size=100&icon='+this.iconName+'&color='+this.color;
1215
}
1316
}">
1417

@@ -29,7 +32,8 @@
2932
Customize your marker:
3033
</h2>
3134

32-
<x-editor-icon-select change-event="icon-changed" />
35+
<x-editor.input-icon-select change-event="icon-changed" />
36+
<x-editor.input-color-select change-event="color-changed" default="#333" />
3337
</div>
3438

3539
{{-- PIN WITH ICON --}}

0 commit comments

Comments
 (0)