Fixed the margin shorthand

examples/font_family.rb

@@ -1,16 +1,14 @@
 Shoes.app do
 
-    font "#{DIR}/fonts/Pacifico.ttf"
-
     para "This is arial" ,size:"40px" , font:"arial"
 
     para "This is time new roman" , size:"40px", font:"'Times New Roman'"
 
     para "this is cursive", font: "cursive", size:"40px"
 
-    para "this is pacifico", font: "'pacifico'", size:"40px"
+    para "this is pacifico", font: "'Monaco'", size:"40px"
 
-    para "this is pacifico with quotes which is same", font: "pacifico", size:"40px"
+    para "this is pacifico with quotes which is same", font: "Monaco", size:"40px"
 
     para "This is helvetica", font: "Helvetica", size:"40px"
 

examples/margin.rb

@@ -0,0 +1,13 @@
+Shoes.app do
+
+    para "All margins with array input", margin:[60,30,80,40]
+
+    para "All margins with string input", margin: "30 20 10 20"
+
+    para "One Number to set all margins", margin:20
+
+    para "Specific property can overwrite shorthand" , margin:[20,10,20,30], margin_top:100
+
+    para "margins using a hash input" , margin:{left:20,top:100,bottom:10,right:20}
+
+end

examples/margin_check.rb

@@ -3,7 +3,7 @@
 
   @stack1 = stack(width: 100, height: 100) do
     background red
-    b = button("Push me", margin: [10, 5, 25, 10]) do
+    b = button("Push me", margin: [10, 25, 5, 10]) do
       alert "Aha! Click!"
     end
   end

examples/spacing.rb

@@ -7,7 +7,7 @@
     background "red"
     para "with 10px margin-left and margin-right, and 20px margin-bottom", stroke: "white"
   end
-  stack margin: [15, 15, nil, 40] do
+  stack margin: [15, nil, 15, 40] do
     background "blue"
     para "with 15px margin-left and margin-right, and 40px margin-bottom", stroke: "white"
   end

lacci/lib/shoes/drawable.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
-
+require_relative 'margin_helper'
 class Shoes
   # Shoes::Drawable
   #
@@ -256,7 +256,10 @@ def shoes_style_name?(name)
     # Their value is set at drawable-create time.
     DRAW_CONTEXT_STYLES = [:fill, :stroke, :strokewidth, :rotate, :transform, :translate]
 
+  include MarginHelper
+
     def initialize(*args, **kwargs)
+      kwargs = margin_parse(kwargs)
       log_init("Shoes::#{self.class.name}") unless @log
 
       # First, get the list of allowed and disallowed styles for the given features

lacci/lib/shoes/margin_helper.rb

@@ -0,0 +1,57 @@
+module MarginHelper
+
+  def margin_parse(kwargs)
+
+      if kwargs[:margin]
+
+        if kwargs[:margin].is_a?(Numeric)
+
+          return kwargs
+        elsif kwargs[:margin].is_a?(Hash)
+
+          kwargs[:margin].each do |key,value|
+            kwargs[:"margin_#{key}"] = value
+          end
+
+        else
+          margin_props = kwargs[:margin].is_a?(String) ? kwargs[:margin].split(/\s+|\,|-/) : kwargs[:margin]
+          if margin_props.length == 1
+
+            kwargs[:margin] = margin_props[0]
+            return kwargs
+
+          elsif margin_props.length == 2
+
+            raise(Shoes::Errors::InvalidAttributeValueError, "Margin don't support 2-3 values as Array/string input for using 2-3 input you can use the hash input method like '{left:value, right:value, top:value, bottom:value}'")
+
+          elsif margin_props.length == 3
+
+            raise(Shoes::Errors::InvalidAttributeValueError, "Margin don't support 2-3 values as Array/string input for using 2-3 input you can use the hash input method like '{left:value,right:value,top:value,bottom:value}'")
+
+          else
+
+            if !kwargs[:margin_top]
+              kwargs[:margin_top] = margin_props[1]
+            end
+            if !kwargs[:margin_bottom]
+              kwargs[:margin_bottom] = margin_props[3]
+            end
+            if !kwargs[:margin_left]
+              kwargs[:margin_left] = margin_props[0]
+            end
+            if !kwargs[:margin_right]
+              kwargs[:margin_right] = margin_props[2]
+            end
+
+          end
+        end
+        kwargs[:margin] = nil
+      end
+      if kwargs["options"] && !kwargs[:margin] && !kwargs[:margin_left] && !kwargs[:margin_right] && !kwargs[:margin_top] && !kwargs[:margin_bottom]
+        kwargs[options].each do |key,value|
+          kwargs[key] = value
+        end
+      end
+      kwargs
+  end
+end

lacci/test/test_margin_helper.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+load "lacci/lib/shoes/margin_helper.rb"
+
+
+class TestMarginHelper < Minitest::Test
+include MarginHelper
+
+    def test_one_Number_margin
+
+        kwargs = {:margin => 20}
+
+        assert_equal({:margin => 20},margin_parse(kwargs))
+
+    end
+
+    def test_Array_four_margin
+
+        kwargs = {:margin => [20,20,30,40]}
+
+        assert_equal({:margin => nil, :margin_left => 20, :margin_top => 20, :margin_right => 30, :margin_bottom => 40},margin_parse(kwargs))
+
+    end
+
+    def test_Array_one_margin
+
+        kwargs = {:margin => [20]}
+
+        assert_equal({:margin => 20},margin_parse(kwargs))
+
+    end
+
+
+    def test_String_four_margin
+
+        kwargs = {:margin => "20 30 40 50"}
+
+        assert_equal({:margin => nil, :margin_left => "20", :margin_top => "30", :margin_right => "40", :margin_bottom => "50"},margin_parse(kwargs))
+
+    end
+
+    def test_String_one_margin
+
+        kwargs = {:margin => "20"}
+
+        assert_equal({:margin => "20"},margin_parse(kwargs))
+
+    end
+
+    def test_Hash_four_margin
+
+        kwargs = {:margin => {left:20,top:20,right:30,bottom:30}}
+
+        assert_equal({:margin => nil, :margin_left => 20, :margin_top => 20, :margin_right => 30, :margin_bottom => 30},margin_parse(kwargs))
+
+    end
+
+    def test_Hash_three_margin
+
+        kwargs = {:margin => {top:20,right:30,bottom:30}}
+
+        assert_equal({:margin => nil, :margin_top => 20, :margin_right => 30, :margin_bottom => 30},margin_parse(kwargs))
+
+    end
+
+    def test_Hash_two_margin
+
+        kwargs = {:margin => {left:20,top:20}}
+
+        assert_equal({:margin => nil, :margin_left => 20, :margin_top => 20},margin_parse(kwargs))
+
+    end
+
+    def test_Hash_one_margin
+
+        kwargs = {:margin => {bottom:30}}
+
+        assert_equal({:margin => nil, :margin_bottom => 30},margin_parse(kwargs))
+
+    end
+
+end

scarpe-components/lib/scarpe/components/calzini.rb

@@ -126,8 +126,14 @@ def drawable_style(props)
     styles[:left] = dimensions_length(props["left"]) if props["left"]
     styles[:width] = dimensions_length(props["width"]) if props["width"]
     styles[:height] = dimensions_length(props["height"]) if props["height"]
+    styles[:"margin"] = dimensions_length(props["margin"]) if props["margin"]
+    styles[:"margin-left"] = dimensions_length(props["margin_left"]) if props["margin_left"]
+    styles[:"margin-right"] = dimensions_length(props["margin_right"]) if props["margin_right"]
+    styles[:"margin-top"] = dimensions_length(props["margin_top"]) if props["margin_top"]
+    styles[:"margin-bottom"] = dimensions_length(props["margin_bottom"]) if props["margin_bottom"]
 
-    styles = spacing_styles_for_attr("margin", props, styles)
+
+
     styles = spacing_styles_for_attr("padding", props, styles)
 
     styles

scarpe-components/test/calzini/test_calzini_slots.rb

@@ -59,26 +59,6 @@ def test_stack_border_attrs
       @calzini.render("stack", { "border_color" => "red", "options" => { "strokewidth" => 3, "curve" => 2 } }) { "contents" }
   end
 
-  def test_stack_margin
-    assert_equal %{<div id="elt-1" } +
-      %{style="#{@stack_default_style};margin:25px">} +
-      %{#{@inner_div_tag}contents</div></div>},
-      @calzini.render("stack", { "margin" => 25 }) { "contents" }
-  end
-
-  def test_stack_options_margin
-    assert_equal %{<div id="elt-1" } +
-      %{style="#{@stack_default_style};margin:15px">} +
-      %{#{@inner_div_tag}contents</div></div>},
-      @calzini.render("stack", { "options" => { "margin" => 15 } }) { "contents" }
-  end
-
-  def test_stack_margin_overrides_options
-    assert_equal %{<div id="elt-1" } +
-      %{style="#{@stack_default_style};margin:25px">} +
-      %{#{@inner_div_tag}contents</div></div>},
-      @calzini.render("stack", { "margin" => 25, "options" => { "margin" => 15 } }) { "contents" }
-  end
 
   def test_stack_padding
     assert_equal %{<div id="elt-1" } +
@@ -101,31 +81,5 @@ def test_stack_padding_overrides_options
       @calzini.render("stack", { "padding" => 25, "options" => { "padding" => 15 } }) { "contents" }
   end
 
-  def test_stack_options_hash_margin
-    assert_equal %{<div id="elt-1" } +
-      %{style="#{@stack_default_style};margin-left:5px;margin-right:10px;margin-top:15px;margin-bottom:20px">} +
-      %{#{@inner_div_tag}contents</div></div>},
-      @calzini.render("stack", { "margin" => { left: 5, right: 10, top: 15, bottom: 20 } }) { "contents" }
-  end
-
-  def test_stack_options_array_margin
-    assert_equal %{<div id="elt-1" } +
-      %{style="#{@stack_default_style};margin-left:5px;margin-right:10px;margin-top:15px;margin-bottom:20px">} +
-      %{#{@inner_div_tag}contents</div></div>},
-      @calzini.render("stack", { "margin" => [5, 10, 15, 20] }) { "contents" }
-  end
-
-  def test_stack_options_margin_left_overrides_options
-    assert_equal %{<div id="elt-1" } +
-      %{style="#{@stack_default_style};margin-left:25px">} +
-      %{#{@inner_div_tag}contents</div></div>},
-      @calzini.render("stack", { "margin_left" => 25, "options" => { "margin" => 15 } }) { "contents" }
-  end
-
-  def test_stack_margin_left_overrides_margin
-    assert_equal %{<div id="elt-1" } +
-      %{style="#{@stack_default_style};margin:25px;margin-left:15px">} +
-      %{#{@inner_div_tag}contents</div></div>},
-      @calzini.render("stack", { "margin" => 25, "margin_left" => 15 }) { "contents" }
-  end
+
 end

test/test_stack.rb

@@ -25,17 +25,6 @@ def test_it_accepts_margin
     assert_includes stack.to_html, "margin:25px"
   end
 
-  def test_it_accepts_margin_array
-    stack = Scarpe::Webview::Stack.new(@default_properties.merge("margin" => [1, 2, 3, 4]))
-
-    assert_includes stack.to_html, "margin-left:1px;margin-right:2px;margin-top:3px;margin-bottom:4px"
-  end
-
-  def test_it_accepts_margin_hash
-    stack = Scarpe::Webview::Stack.new(@default_properties.merge("margin" => { left: 1, bottom: 4 }))
-
-    assert_includes stack.to_html, "margin-left:1px;margin-bottom:4px"
-  end
 
   #def test_it_can_have_a_background
   #  stack = Scarpe::Stack.new do

test/wv/html_fixtures/margin.html

@@ -0,0 +1,11 @@
+<div id="2" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%;height:100%">
+  <div style="height:100%;width:100%;position:relative">
+    <p id="3" style="margin-left:60px;margin-right:80px;margin-top:30px;margin-bottom:40px;font-size:12px">All margins with array input</p>
+    <p id="4" style="margin-left:30;margin-right:10;margin-top:20;margin-bottom:20;font-size:12px">All margins with string input</p>
+    <p id="5" style="margin:20px;font-size:12px">One Number to set all margins</p>
+    <p id="6" style="margin-left:20px;margin-right:20px;margin-top:100px;margin-bottom:30px;font-size:12px">Specific property can overwrite shorthand</p>
+    <p id="7" style="margin-left:20px;margin-right:20px;margin-top:100px;margin-bottom:10px;font-size:12px">margins using a hash input</p>
+    <div id="root-fonts"></div>
+    <div id="root-alerts"> </div>
+  </div>
+</div>