From d96ef5a6a44f0f7431a265d1a6153b1fabcd0f4a Mon Sep 17 00:00:00 2001 From: shahryar tavakkoli Date: Sat, 22 Apr 2023 17:21:48 +0330 Subject: [PATCH] separate svg and icon size inside tab component, based on #74 --- deployment/templates/test1.html | 4519 ++++++++++++++++- .../components/blocks/icon.ex | 152 + .../components/elements/tab.ex | 138 +- 3 files changed, 4522 insertions(+), 287 deletions(-) diff --git a/deployment/templates/test1.html b/deployment/templates/test1.html index d3b5cdb..f5ec28e 100644 --- a/deployment/templates/test1.html +++ b/deployment/templates/test1.html @@ -1,7 +1,7 @@ -
+
-
Back To/History
+
Back To/History
Main Section
-
-
- -
-
Drag And Drop a section here
-
- -
-
-
-
- -
+
+ - - List of Blocks -
-
-
-
- - -
-
-

Layout

-
-
+ + + - +
+ +
+ +
+ +
+
+ + + + +
+
    +
  • + +
    • +
+ + + +
+ This is some placeholder content the tab's associated content. for changing the data of this tab please click here. +
+
+
+
+
+
+
+ + + +
-

-

File

-
-

+ +

+
+
+

+ + + + Settings: +

+ +
+ + Back +
+
+ +
-
+ +
+ +
+
+ + + + Tab Settings: + + + + +
+ +
-

-

PDF

-
-

+

+ +
+
+ + + Title one + +
+
+ +
+ + + +
+
+ + Title +
+
+ + Text +
+
+ + Icon +
+
+ + Delete +
+
+
+ +
+ +
+
+ +
+
+ + Public Settings: + + + + +
+ +
+ +
+
+ + Alignment: + + + + +
+ + +
+ +
+
+ + Font Style: + + + + +
+ + +
+ +
+
+ + Custom Tag name: + + + + +
+ + +
+ +
+ + +
+ +
+
+ +
+
+
diff --git a/lib/mishka_template_creator/components/blocks/icon.ex b/lib/mishka_template_creator/components/blocks/icon.ex index 390113d..ecd1913 100644 --- a/lib/mishka_template_creator/components/blocks/icon.ex +++ b/lib/mishka_template_creator/components/blocks/icon.ex @@ -1,6 +1,53 @@ defmodule MishkaTemplateCreator.Components.Blocks.Icon do use Phoenix.Component + import Phoenix.HTML.Form + import MishkaTemplateCreatorWeb.CoreComponents alias MishkaTemplateCreator.Data.TailwindSetting + alias alias MishkaTemplateCreatorWeb.MishkaCoreComponent + + @svg_height [ + "h-1", + "h-2", + "h-3", + "h-4", + "h-5", + "h-6", + "h-7", + "h-8", + "h-9", + "h-10", + "h-11", + "h-12", + "h-14", + "h-16", + "h-20", + "h-24", + "h-28", + "h-32", + "h-36" + ] + + @svg_width [ + "w-1", + "w-2", + "w-3", + "w-4", + "w-5", + "w-6", + "w-7", + "w-8", + "w-9", + "w-10", + "w-11", + "w-12", + "w-14", + "w-16", + "w-20", + "w-24", + "w-28", + "w-32", + "w-36" + ] attr(:module, :string, required: true) attr(:class, :string, required: false, default: "w-6 h-6 mx-auto stroke-current") @@ -44,4 +91,109 @@ defmodule MishkaTemplateCreator.Components.Blocks.Icon do
""" end + + attr(:myself, :integer, required: true) + attr(:classes, :list, required: true) + attr(:event_name, :string, required: false, default: "font_style") + attr(:title, :string, required: false, default: "Size") + attr(:as, :atom, required: false, default: :tab_icon_style) + attr(:id_input, :string, required: false, default: nil) + + attr(:class, :string, + required: false, + default: "w-full m-0 p-0 flex flex-col" + ) + + def select_size(assigns) do + ~H""" + +
+ <%= @title %>: +
+ + <%= find_index_svg_sizes(@classes).width %> + + + W: + + + <%= range_input(f, :width, + min: "0", + max: "18", + value: find_index_svg_sizes(@classes).width, + class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", + id: "font-style-width-#{Atom.to_string(@as)}" + ) %> + + + <%= find_index_svg_sizes(@classes).height %> + + + H: + + + <%= range_input(f, :height, + min: "0", + max: "18", + value: find_index_svg_sizes(@classes).height, + class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", + id: "font-style-height-#{Atom.to_string(@as)}" + ) %> + + <.input + :if={!is_nil(@id_input)} + field={f[:id]} + type="hidden" + value={@id_input} + id={"font-style-id-#{Atom.to_string(@as)}"} + /> +
+
+ + """ + end + + def edit_font_style_class(classes, font_size, font) do + text_sizes_and_font_families = + TailwindSetting.get_form_options("typography", "font-size", nil, nil).form_configs ++ + TailwindSetting.get_form_options("typography", "font-family", nil, nil).form_configs + + Enum.reject( + classes, + &(&1 in text_sizes_and_font_families) + ) ++ + [TailwindSetting.find_font_by_index(font_size).font_class] ++ + if(font != "" and !is_nil(font), do: [font], else: []) + end + + def edit_icon_size(classes, [width, height]) do + all_sizes = @svg_height ++ @svg_width + + Enum.reject(classes, &(&1 in all_sizes)) ++ + [convert_size(@svg_width, width), convert_size(@svg_height, height)] + end + + defp convert_size(list, index), do: Enum.at(list, String.to_integer(index)) || Enum.at(list, 0) + + defp find_index_svg_sizes(classes) do + %{ + width: find_revers_list(@svg_width, classes), + height: find_revers_list(@svg_height, classes) + } + end + + defp find_revers_list(list, classes) do + Enum.find(Enum.with_index(list), fn {item, _index} -> item in classes end) + |> case do + nil -> 0 + {_data, index} -> index + end + end end diff --git a/lib/mishka_template_creator/components/elements/tab.ex b/lib/mishka_template_creator/components/elements/tab.ex index fa7a19b..ce67ceb 100644 --- a/lib/mishka_template_creator/components/elements/tab.ex +++ b/lib/mishka_template_creator/components/elements/tab.ex @@ -13,50 +13,6 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do alias MishkaTemplateCreator.Components.Blocks.Color alias MishkaTemplateCreator.Components.Elements.Text - @svg_height [ - "h-1", - "h-2", - "h-3", - "h-4", - "h-5", - "h-6", - "h-7", - "h-8", - "h-9", - "h-10", - "h-11", - "h-12", - "h-14", - "h-16", - "h-20", - "h-24", - "h-28", - "h-32", - "h-36" - ] - - @svg_width [ - "w-1", - "w-2", - "w-3", - "w-4", - "w-5", - "w-6", - "w-7", - "w-8", - "w-9", - "w-10", - "w-11", - "w-12", - "w-14", - "w-16", - "w-20", - "w-24", - "w-28", - "w-32", - "w-36" - ] - # --------------------------------------------------------------------------------------------------------------- # TODO: Presets which are added with MishkaInstaller as a plugin, it let user select pre-prepared tabs. in V0.0.2 # --------------------------------------------------------------------------------------------------------------- @@ -511,51 +467,12 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do
- -
- Size: -
- - <%= find_index_svg_sizes(@header["icon"]).width %> - - - W: - - - <%= range_input(f, :width, - min: "0", - max: "18", - value: find_index_svg_sizes(@header["icon"]).width, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "tab_icon_style_width-#{@key}" - ) %> - - - <%= find_index_svg_sizes(@header["icon"]).height %> - - - H: - - - <%= range_input(f, :height, - min: "0", - max: "18", - value: find_index_svg_sizes(@header["icon"]).height, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "tab_icon_style_height-#{@key}" - ) %> - - <.input field={f[:id]} type="hidden" value={@key} id={"tab_icon_style_id-#{@key}"} /> -
-
- + id_input={@key} + />
@@ -668,7 +585,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do %{"public_tab_font_style" => %{"font" => font, "font_size" => font_size}}, socket ) do - class = edit_font_style_class(socket.assigns.element["class"], font_size, font) + class = Icon.edit_font_style_class(socket.assigns.element["class"], font_size, font) send( self(), @@ -688,7 +605,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do %{"tab_title_font_style" => %{"font" => font, "font_size" => font_size}}, socket ) do - class = edit_font_style_class(socket.assigns.element["header"]["title"], font_size, font) + class = Icon.edit_font_style_class(socket.assigns.element["header"]["title"], font_size, font) updated = socket.assigns.element @@ -705,7 +622,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do %{"tab_text_font_style" => %{"font" => font, "font_size" => font_size}}, socket ) do - class = edit_font_style_class(socket.assigns.element["content"], font_size, font) + class = Icon.edit_font_style_class(socket.assigns.element["content"], font_size, font) updated = socket.assigns.element @@ -722,7 +639,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do %{"tab_icon_style" => %{"height" => height, "width" => width}}, socket ) do - class = edit_icon_size(socket.assigns.element["header"]["icon"], [width, height]) + class = Icon.edit_icon_size(socket.assigns.element["header"]["icon"], [width, height]) updated = socket.assigns.element @@ -944,43 +861,6 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do |> JS.add_class("border-blue-500", to: "#button-#{id}") end - defp edit_font_style_class(classes, font_size, font) do - text_sizes_and_font_families = - TailwindSetting.get_form_options("typography", "font-size", nil, nil).form_configs ++ - TailwindSetting.get_form_options("typography", "font-family", nil, nil).form_configs - - Enum.reject( - classes, - &(&1 in text_sizes_and_font_families) - ) ++ - [TailwindSetting.find_font_by_index(font_size).font_class] ++ - if(font != "" and !is_nil(font), do: [font], else: []) - end - - defp edit_icon_size(classes, [width, height]) do - all_sizes = @svg_height ++ @svg_width - - Enum.reject(classes, &(&1 in all_sizes)) ++ - [convert_size(@svg_width, width), convert_size(@svg_height, height)] - end - - defp convert_size(list, index), do: Enum.at(list, String.to_integer(index)) || Enum.at(list, 0) - - defp find_index_svg_sizes(classes) do - %{ - width: find_revers_list(@svg_width, classes), - height: find_revers_list(@svg_height, classes) - } - end - - defp find_revers_list(list, classes) do - Enum.find(Enum.with_index(list), fn {item, _index} -> item in classes end) - |> case do - nil -> 0 - {_data, index} -> index - end - end - defp create_border_radius(classes, type, bg_color \\ "") do Enum.find(classes, &(&1 == type)) |> case do