From c5113adcf152cfbd76324d5c84285d48d5012a34 Mon Sep 17 00:00:00 2001 From: shahryar tavakkoli Date: Sat, 22 Apr 2023 15:10:44 +0330 Subject: [PATCH] use font style inside text, table, tab component, based on #74 --- deployment/templates/test1.html | 4513 +---------------- .../components/blocks/tag.ex | 4 +- .../components/elements/tab.ex | 145 +- .../components/elements/table.ex | 153 +- .../components/elements/text.ex | 109 +- 5 files changed, 257 insertions(+), 4667 deletions(-) diff --git a/deployment/templates/test1.html b/deployment/templates/test1.html index 7188f40..94f57d5 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 +
+
+ - -
-
- - - -
- - -
-
-
-

- - - - Settings: -

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

+

Audio

+
+

-

- -
-
- - Title one - -
-
- -
- - - -
-
- - Title -
-
- - Text -
-
- - Icon -
-
- - Delete -
-
-
- -
- -
-
- -
-
- - Public Settings: - - - - -
- -
- -
-
- - Alignment: - - - - -
- - -
- -
-
- - Font Style: - - - - -
- - -
- -
-
- - Custom Tag name: - - - - -
- - -
- -
- - -
- -
-
- -
-
-
diff --git a/lib/mishka_template_creator/components/blocks/tag.ex b/lib/mishka_template_creator/components/blocks/tag.ex index eef04c7..53e2a1b 100644 --- a/lib/mishka_template_creator/components/blocks/tag.ex +++ b/lib/mishka_template_creator/components/blocks/tag.ex @@ -57,9 +57,11 @@ defmodule MishkaTemplateCreator.Components.Blocks.Tag do required: false, default: "flex flex-col w-full items-center justify-center pb-5" ) + attr(:text_input_class, :string, required: false, - default: "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" + default: + "block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500" ) def input_tag(assigns) do diff --git a/lib/mishka_template_creator/components/elements/tab.ex b/lib/mishka_template_creator/components/elements/tab.ex index 76fd6ed..fa7a19b 100644 --- a/lib/mishka_template_creator/components/elements/tab.ex +++ b/lib/mishka_template_creator/components/elements/tab.ex @@ -285,51 +285,7 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do - -
- Font: -
- <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], - class: - "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", - prompt: "Choose preferred font", - selected: - Enum.find( - @element["class"], - &(&1 in TailwindSetting.get_form_options( - "typography", - "font-family", - nil, - nil - ).form_configs) - ), - id: "public_tab_font-#{@id}" - ) %> -
-
-
- Size: -
- - <%= TailwindSetting.find_text_size_index(@element["class"]).index %> - - <%= range_input(f, :font_size, - min: "1", - max: "13", - value: TailwindSetting.find_text_size_index(@element["class"]).index, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "public_tab_font_size-#{@id}" - ) %> -
-
- + - -
- Font: -
- <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], - class: - "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", - prompt: "Choose preferred font", - selected: - Enum.find( - @header["title"], - &(&1 in TailwindSetting.get_form_options("typography", "font-family", nil, nil).form_configs) - ), - id: "tab_title_font_style_font-#{@key}" - ) %> -
-
-
- Size: -
- - <%= TailwindSetting.find_text_size_index(@header["title"]).index %> - - <%= range_input(f, :font_size, - min: "1", - max: "13", - value: TailwindSetting.find_text_size_index(@header["title"]).index, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "tab_title_font_style_font_size-#{@key}" - ) %> - - <.input - field={f[:id]} - type="hidden" - value={@key} - id={"tab_title_font_style_id-#{@key}"} - /> -
-
- + id_input={true} + id_input_key={@key} + />
@@ -523,48 +439,13 @@ defmodule MishkaTemplateCreator.Components.Elements.Tab do - -
- Font: -
- <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], - class: - "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", - prompt: "Choose preferred font", - selected: - Enum.find( - @content, - &(&1 in TailwindSetting.get_form_options("typography", "font-family", nil, nil).form_configs) - ), - id: "tab_text_font_style_font-#{@key}" - ) %> -
-
-
- Size: -
- - <%= TailwindSetting.find_text_size_index(@content).index %> - - <%= range_input(f, :font_size, - min: "1", - max: "13", - value: TailwindSetting.find_text_size_index(@content).index, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "tab_text_font_style_font_size-#{@key}" - ) %> - - <.input field={f[:id]} type="hidden" value={@key} id={"tab_text_font_style_id-#{@key}"} /> -
-
- + id_input={true} + id_input_key={@key} + /> diff --git a/lib/mishka_template_creator/components/elements/table.ex b/lib/mishka_template_creator/components/elements/table.ex index 8e30137..8eca5d6 100644 --- a/lib/mishka_template_creator/components/elements/table.ex +++ b/lib/mishka_template_creator/components/elements/table.ex @@ -417,61 +417,14 @@ defmodule MishkaTemplateCreator.Components.Elements.Table do title_class="my-4 w-full text-center font-bold select-none text-lg" > - + - + - - -
- Font: -
- <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], - class: - "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", - prompt: "Choose preferred font", - selected: - Enum.find( - @element["header"]["row"], - &(&1 in TailwindSetting.get_form_options( - "typography", - "font-family", - nil, - nil - ).form_configs) - ), - id: "header_table_font-#{@id}" - ) %> -
-
-
- Size: -
- - <%= TailwindSetting.find_text_size_index(@element["header"]["row"]).index %> - - <%= range_input(f, :font_size, - min: "1", - max: "13", - value: TailwindSetting.find_text_size_index(@element["header"]["row"]).index, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "header_table_font_size-#{@id}" - ) %> -
-
- + /> - -
- Font: -
- <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], - class: - "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", - prompt: "Choose preferred font", - selected: - Enum.find( - @element["content"]["row"], - &(&1 in TailwindSetting.get_form_options( - "typography", - "font-family", - nil, - nil - ).form_configs) - ), - id: "content_tab_font-#{@id}" - ) %> -
-
-
- Size: -
- - <%= TailwindSetting.find_text_size_index(@element["content"]["row"]).index %> - - <%= range_input(f, :font_size, - min: "1", - max: "13", - value: TailwindSetting.find_text_size_index(@element["content"]["row"]).index, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "content_tab_font_size-#{@id}" - ) %> -
-
- + /> - -
- Font: -
- <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], - class: - "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", - prompt: "Choose preferred font", - selected: - Enum.find( - @element["class"], - &(&1 in TailwindSetting.get_form_options( - "typography", - "font-family", - nil, - nil - ).form_configs) - ), - id: "public_tab_font-#{@id}" - ) %> -
-
-
- Size: -
- - <%= TailwindSetting.find_text_size_index(@element["class"]).index %> - - <%= range_input(f, :font_size, - min: "1", - max: "13", - value: TailwindSetting.find_text_size_index(@element["class"]).index, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", - id: "public_tab_font_size-#{@id}" - ) %> -
-
- + /> - -
- Font: -
- <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], - class: - "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", - prompt: "Choose preferred font", - selected: - Enum.find( - @element["class"], - &(&1 in TailwindSetting.get_form_options("typography", "font-family", nil, nil).form_configs) - ) - ) %> -
-
-
- Size: -
- - <%= TailwindSetting.find_text_size_index(@element["class"]).index %> - - <%= range_input(f, :font_size, - min: "1", - max: "13", - value: TailwindSetting.find_text_size_index(@element["class"]).index, - class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" - ) %> -
-
- + <.font_style myself={@myself} classes={@element["class"]} /> @@ -212,6 +175,76 @@ defmodule MishkaTemplateCreator.Components.Elements.Text do """ end + attr(:myself, :integer, required: true) + attr(:classes, :list, required: true) + attr(:id_input, :boolean, required: false, default: false) + attr(:id_input_key, :string, required: false, default: nil) + attr(:event_name, :string, required: false, default: "font_style") + attr(:as, :atom, required: false, default: :font_style) + + attr(:class, :string, + required: false, + default: "w-full m-0 p-0 flex flex-col" + ) + + def font_style(assigns) do + ~H""" + +
+ Font: +
+ <%= select(f, :font, ["font-sans", "font-serif", "font-mono"], + class: + "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-1", + prompt: "Choose preferred font", + selected: + Enum.find( + @classes, + &(&1 in TailwindSetting.get_form_options( + "typography", + "font-family", + nil, + nil + ).form_configs) + ), + id: "font-style-font-#{Atom.to_string(@as)}" + ) %> +
+
+
+ Size: +
+ + <%= TailwindSetting.find_text_size_index(@classes).index %> + + <%= range_input(f, :font_size, + min: "1", + max: "13", + value: TailwindSetting.find_text_size_index(@classes).index, + class: "w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer", + id: "font-style-size-#{Atom.to_string(@as)}" + ) %> +
+
+ + <.input + :if={@id_input} + field={f[:id]} + type="hidden" + value={@id_input_key} + id={"font-style-id-#{Atom.to_string(@as)}"} + /> + + """ + end + attr(:myself, :integer, required: true) attr(:event_name, :string, required: false, default: "text_alignment")