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

Commit

Permalink
separate color picker, based on #74
Browse files Browse the repository at this point in the history
  • Loading branch information
@shahryarjb
shahryarjb committed Apr 22, 2023
1 parent 3654694 commit bae53e8
Show file tree
Hide file tree
Showing 6 changed files with 5,345 additions and 304 deletions.
5,532 changes: 5,283 additions & 249 deletions deployment/templates/test1.html
View file

Large diffs are not rendered by default.

44 changes: 44 additions & 0 deletions lib/mishka_template_creator/components/blocks/color.ex
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
defmodule MishkaTemplateCreator.Components.Blocks.Color do
use Phoenix.Component
alias MishkaTemplateCreator.Data.TailwindSetting

attr(:myself, :integer, required: true)
attr(:classes, :list, required: true)
attr(:title, :string, required: false, default: "Color:")
attr(:type, :string, required: false, default: "text")
attr(:event_name, :string, required: false, default: "select_color")

attr(:class, :string,
required: false,
default: "flex flex-col w-full justify-between items-stretch pt-3 pb-5"
)

def select(%{type: type} = assigns) do
assigns =
assign(assigns,
colors:
TailwindSetting.get_form_options("typography", "text-color", nil, nil).form_configs
)

~H"""
<div class={@class}>
<span class="w-full"><%= @title %></span>
<div class="flex flex-wrap w-full mt-4">
<div
:for={item <- @colors}
:if={item not in ["text-inherit", "text-current", "text-transparent"]}
class={"bg-#{String.replace(item, "text-", "")} w-4 h-4 cursor-pointer"}
phx-click={@event_name}
phx-value-color={String.replace(item, "text", @type)}
phx-target={@myself}
>
<Heroicons.x_mark
:if={String.replace(item, "text", @type) in @classes}
class={if(item in TailwindSetting.different_selected_color(), do: "text-white")}
/>
</div>
</div>
</div>
"""
end
end
11 changes: 6 additions & 5 deletions lib/mishka_template_creator/components/elements/tab.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
alias Phoenix.LiveView.JS
alias MishkaTemplateCreator.Components.Blocks.Tag
alias MishkaTemplateCreator.Components.Blocks.Icon
alias MishkaTemplateCreator.Components.Blocks.Color

@svg_height [
"h-1",
Expand Down Expand Up @@ -409,7 +410,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="public_tab_font_style"
classes={@element["class"]}
Expand Down Expand Up @@ -570,7 +571,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="tab_title_font_style"
classes={@header["title"]}
Expand Down Expand Up @@ -651,7 +652,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="tab_content_font_style"
classes={@content}
Expand Down Expand Up @@ -696,7 +697,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
</div>
</Aside.aside_accordion>
<Aside.aside_accordion id={"text-#{@key}"} title="Content Background Color">
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="tab_content_background"
type="bg"
Expand Down Expand Up @@ -765,7 +766,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="tab_icon_font_style"
classes={@header["icon"]}
Expand Down
19 changes: 10 additions & 9 deletions lib/mishka_template_creator/components/elements/table.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
alias MishkaTemplateCreator.Data.TailwindSetting
alias Phoenix.LiveView.JS
alias MishkaTemplateCreator.Components.Blocks.Tag
alias MishkaTemplateCreator.Components.Blocks.Color

%{
"unique_id" => %{
Expand Down Expand Up @@ -470,15 +471,15 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="header_table_row_text_style"
classes={@element["header"]["row"]}
/>
</Aside.aside_accordion>
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Header Row Style" open={false}>
<MishkaCoreComponent.color_selector
<Color.select
title="Background Color:"
type="bg"
myself={@myself}
Expand All @@ -488,14 +489,14 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
</Aside.aside_accordion>
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Header Item Style" open={false}>
<MishkaCoreComponent.color_selector
<Color.select
title="Text Color:"
myself={@myself}
event_name="header_table_item_text_style"
classes={@element["header"]["column"]}
/>
<MishkaCoreComponent.color_selector
<Color.select
title="Background Color:"
type="bg"
myself={@myself}
Expand Down Expand Up @@ -559,15 +560,15 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="content_table_row_text_style"
classes={@element["content"]["row"]}
/>
</Aside.aside_accordion>
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Row Row Style" open={false}>
<MishkaCoreComponent.color_selector
<Color.select
title="Background Color:"
type="bg"
myself={@myself}
Expand All @@ -577,14 +578,14 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
</Aside.aside_accordion>
<Aside.aside_accordion id={"table-headers-#{@id}"} title="Row Item Style" open={false}>
<MishkaCoreComponent.color_selector
<Color.select
title="Text Color:"
myself={@myself}
event_name="content_table_item_text_style"
classes={@element["content"]["column"]}
/>
<MishkaCoreComponent.color_selector
<Color.select
title="Background Color:"
type="bg"
myself={@myself}
Expand Down Expand Up @@ -651,7 +652,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="public_table_font_style"
classes={@element["class"]}
Expand Down
3 changes: 2 additions & 1 deletion lib/mishka_template_creator/components/elements/text.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
alias MishkaTemplateCreatorWeb.MishkaCoreComponent
import MishkaTemplateCreatorWeb.CoreComponents
alias MishkaTemplateCreator.Data.TailwindSetting
alias MishkaTemplateCreator.Components.Blocks.Color

@impl true
def mount(socket) do
Expand Down Expand Up @@ -261,7 +262,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do
</div>
</div>
</MishkaCoreComponent.custom_simple_form>
<MishkaCoreComponent.color_selector
<Color.select
myself={@myself}
event_name="font_style"
classes={@element["class"]}
Expand Down
40 changes: 0 additions & 40 deletions lib/mishka_template_creator/components/mishka_core_component.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -212,46 +212,6 @@ defmodule MishkaTemplateCreatorWeb.MishkaCoreComponent do
"""
end

attr(:myself, :integer, required: true)
attr(:classes, :list, required: true)
attr(:title, :string, required: false, default: "Color:")
attr(:type, :string, required: false, default: "text")
attr(:event_name, :string, required: false, default: "select_color")

attr(:class, :string,
required: false,
default: "flex flex-col w-full justify-between items-stretch pt-3 pb-5"
)

def color_selector(%{type: type} = assigns) do
assigns =
assign(assigns,
colors:
TailwindSetting.get_form_options("typography", "text-color", nil, nil).form_configs
)

~H"""
<div class={@class}>
<span class="w-full"><%= @title %></span>
<div class="flex flex-wrap w-full mt-4">
<div
:for={item <- @colors}
:if={item not in ["text-inherit", "text-current", "text-transparent"]}
class={"bg-#{String.replace(item, "text-", "")} w-4 h-4 cursor-pointer"}
phx-click={@event_name}
phx-value-color={String.replace(item, "text", type)}
phx-target={@myself}
>
<Heroicons.x_mark
:if={String.replace(item, "text", type) in @classes}
class={if(item in TailwindSetting.different_selected_color(), do: "text-white")}
/>
</div>
</div>
</div>
"""
end

attr(:myself, :integer, required: true)
attr(:event_name, :string, required: false, default: "text_alignment")

Expand Down

0 comments on commit bae53e8

Please sign in to comment.