Skip to content
This repository was archived by the owner on Dec 8, 2023. It is now read-only.

Commit 2fe2410

Browse files
shahryarjbshahryarjb
committed
separate color picker, based on #74 
1 parent 4eef26e commit 2fe2410

File tree

6 files changed

+5345
-304
lines changed

6 files changed

+5345
-304
lines changed

‎deployment/templates/test1.html

+5,283-249
Large diffs are not rendered by default.

‎lib/mishka_template_creator/components/blocks/color.ex

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
defmodule MishkaTemplateCreator.Components.Blocks.Color do
2+
use Phoenix.Component
3+
alias MishkaTemplateCreator.Data.TailwindSetting
4+
5+
attr(:myself, :integer, required: true)
6+
attr(:classes, :list, required: true)
7+
attr(:title, :string, required: false, default: "Color:")
8+
attr(:type, :string, required: false, default: "text")
9+
attr(:event_name, :string, required: false, default: "select_color")
10+
11+
attr(:class, :string,
12+
required: false,
13+
default: "flex flex-col w-full justify-between items-stretch pt-3 pb-5"
14+
)
15+
16+
def select(%{type: type} = assigns) do
17+
assigns =
18+
assign(assigns,
19+
colors:
20+
TailwindSetting.get_form_options("typography", "text-color", nil, nil).form_configs
21+
)
22+
23+
~H"""
24+
<div class={@class}>
25+
<span class="w-full"><%= @title %></span>
26+
<div class="flex flex-wrap w-full mt-4">
27+
<div
28+
:for={item <- @colors}
29+
:if={item not in ["text-inherit", "text-current", "text-transparent"]}
30+
class={"bg-#{String.replace(item, "text-", "")} w-4 h-4 cursor-pointer"}
31+
phx-click={@event_name}
32+
phx-value-color={String.replace(item, "text", @type)}
33+
phx-target={@myself}
34+
>
35+
<Heroicons.x_mark
36+
:if={String.replace(item, "text", @type) in @classes}
37+
class={if(item in TailwindSetting.different_selected_color(), do: "text-white")}
38+
/>
39+
</div>
40+
</div>
41+
</div>
42+
"""
43+
end
44+
end

‎lib/mishka_template_creator/components/elements/tab.ex

+6-5
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
1010
alias Phoenix.LiveView.JS
1111
alias MishkaTemplateCreator.Components.Blocks.Tag
1212
alias MishkaTemplateCreator.Components.Blocks.Icon
13+
alias MishkaTemplateCreator.Components.Blocks.Color
1314

1415
@svg_height [
1516
"h-1",
@@ -409,7 +410,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
409410
</div>
410411
</div>
411412
</MishkaCoreComponent.custom_simple_form>
412-
<MishkaCoreComponent.color_selector
413+
<Color.select
413414
myself={@myself}
414415
event_name="public_tab_font_style"
415416
classes={@element["class"]}
@@ -570,7 +571,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
570571
</div>
571572
</div>
572573
</MishkaCoreComponent.custom_simple_form>
573-
<MishkaCoreComponent.color_selector
574+
<Color.select
574575
myself={@myself}
575576
event_name="tab_title_font_style"
576577
classes={@header["title"]}
@@ -651,7 +652,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
651652
</div>
652653
</div>
653654
</MishkaCoreComponent.custom_simple_form>
654-
<MishkaCoreComponent.color_selector
655+
<Color.select
655656
myself={@myself}
656657
event_name="tab_content_font_style"
657658
classes={@content}
@@ -696,7 +697,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
696697
</div>
697698
</Aside.aside_accordion>
698699
<Aside.aside_accordion id={"text-#{@key}"} title="Content Background Color">
699-
<MishkaCoreComponent.color_selector
700+
<Color.select
700701
myself={@myself}
701702
event_name="tab_content_background"
702703
type="bg"
@@ -765,7 +766,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
765766
</div>
766767
</div>
767768
</MishkaCoreComponent.custom_simple_form>
768-
<MishkaCoreComponent.color_selector
769+
<Color.select
769770
myself={@myself}
770771
event_name="tab_icon_font_style"
771772
classes={@header["icon"]}

‎lib/mishka_template_creator/components/elements/table.ex

+10-9
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
99
alias MishkaTemplateCreator.Data.TailwindSetting
1010
alias Phoenix.LiveView.JS
1111
alias MishkaTemplateCreator.Components.Blocks.Tag
12+
alias MishkaTemplateCreator.Components.Blocks.Color
1213

1314
%{
1415
"unique_id" => %{
@@ -470,15 +471,15 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
470471
</div>
471472
</div>
472473
</MishkaCoreComponent.custom_simple_form>
473-
<MishkaCoreComponent.color_selector
474+
<Color.select
474475
myself={@myself}
475476
event_name="header_table_row_text_style"
476477
classes={@element["header"]["row"]}
477478
/>
478479
</Aside.aside_accordion>
479480
480481
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Header Row Style" open={false}>
481-
<MishkaCoreComponent.color_selector
482+
<Color.select
482483
title="Background Color:"
483484
type="bg"
484485
myself={@myself}
@@ -488,14 +489,14 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
488489
</Aside.aside_accordion>
489490
490491
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Header Item Style" open={false}>
491-
<MishkaCoreComponent.color_selector
492+
<Color.select
492493
title="Text Color:"
493494
myself={@myself}
494495
event_name="header_table_item_text_style"
495496
classes={@element["header"]["column"]}
496497
/>
497498
498-
<MishkaCoreComponent.color_selector
499+
<Color.select
499500
title="Background Color:"
500501
type="bg"
501502
myself={@myself}
@@ -559,15 +560,15 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
559560
</div>
560561
</div>
561562
</MishkaCoreComponent.custom_simple_form>
562-
<MishkaCoreComponent.color_selector
563+
<Color.select
563564
myself={@myself}
564565
event_name="content_table_row_text_style"
565566
classes={@element["content"]["row"]}
566567
/>
567568
</Aside.aside_accordion>
568569
569570
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Row Row Style" open={false}>
570-
<MishkaCoreComponent.color_selector
571+
<Color.select
571572
title="Background Color:"
572573
type="bg"
573574
myself={@myself}
@@ -577,14 +578,14 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
577578
</Aside.aside_accordion>
578579
579580
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Row Item Style" open={false}>
580-
<MishkaCoreComponent.color_selector
581+
<Color.select
581582
title="Text Color:"
582583
myself={@myself}
583584
event_name="content_table_item_text_style"
584585
classes={@element["content"]["column"]}
585586
/>
586587
587-
<MishkaCoreComponent.color_selector
588+
<Color.select
588589
title="Background Color:"
589590
type="bg"
590591
myself={@myself}
@@ -651,7 +652,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
651652
</div>
652653
</div>
653654
</MishkaCoreComponent.custom_simple_form>
654-
<MishkaCoreComponent.color_selector
655+
<Color.select
655656
myself={@myself}
656657
event_name="public_table_font_style"
657658
classes={@element["class"]}

‎lib/mishka_template_creator/components/elements/text.ex

+2-1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
77
alias MishkaTemplateCreatorWeb.MishkaCoreComponent
88
import MishkaTemplateCreatorWeb.CoreComponents
99
alias MishkaTemplateCreator.Data.TailwindSetting
10+
alias MishkaTemplateCreator.Components.Blocks.Color
1011

1112
@impl true
1213
def mount(socket) do
@@ -261,7 +262,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
261262
</div>
262263
</div>
263264
</MishkaCoreComponent.custom_simple_form>
264-
<MishkaCoreComponent.color_selector
265+
<Color.select
265266
myself={@myself}
266267
event_name="font_style"
267268
classes={@element["class"]}

‎lib/mishka_template_creator/components/mishka_core_component.ex

-40
Original file line numberDiff line numberDiff line change
@@ -212,46 +212,6 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
212212
"""
213213
end
214214

215-
attr(:myself, :integer, required: true)
216-
attr(:classes, :list, required: true)
217-
attr(:title, :string, required: false, default: "Color:")
218-
attr(:type, :string, required: false, default: "text")
219-
attr(:event_name, :string, required: false, default: "select_color")
220-
221-
attr(:class, :string,
222-
required: false,
223-
default: "flex flex-col w-full justify-between items-stretch pt-3 pb-5"
224-
)
225-
226-
def color_selector(%{type: type} = assigns) do
227-
assigns =
228-
assign(assigns,
229-
colors:
230-
TailwindSetting.get_form_options("typography", "text-color", nil, nil).form_configs
231-
)
232-
233-
~H"""
234-
<div class={@class}>
235-
<span class="w-full"><%= @title %></span>
236-
<div class="flex flex-wrap w-full mt-4">
237-
<div
238-
:for={item <- @colors}
239-
:if={item not in ["text-inherit", "text-current", "text-transparent"]}
240-
class={"bg-#{String.replace(item, "text-", "")} w-4 h-4 cursor-pointer"}
241-
phx-click={@event_name}
242-
phx-value-color={String.replace(item, "text", type)}
243-
phx-target={@myself}
244-
>
245-
<Heroicons.x_mark
246-
:if={String.replace(item, "text", type) in @classes}
247-
class={if(item in TailwindSetting.different_selected_color(), do: "text-white")}
248-
/>
249-
</div>
250-
</div>
251-
</div>
252-
"""
253-
end
254-
255215
attr(:myself, :integer, required: true)
256216
attr(:event_name, :string, required: false, default: "text_alignment")
257217

0 commit comments

Comments
 (0)