Fixed the Margin-shorthand property

docs/static/manual.md

@@ -1290,7 +1290,37 @@ will flow in with the other objects surrounding it.
 
 You might also want to give it a :top, if it's acting a bit funny. Sometimes it needs both. :)
 
-### :margin » a number or an array of four numbers
+### :margin » a number , array or string
+
+==Latest==
+
+This is margin shorthand property which is used in place of using four specific properties(left,top,right,bottom) and just like og shoes this will only overwrite those specific properties that aren't being used, which means "specific margin properties have more priorty than shorthand property".
+
+for e.g ==> margin:20, margin_top:30
+
+properties which will be applied  ==>  margin_left:20, margin_top:30, margin_right:20, margin_bottom:20
+
+
+Input allowed as a single number
+   1. 20
+   2. "20px"
+   3. [ 20] or [ "20px"]
+
+note: when using only a single number , all margin properties will be set to that number.
+
+Input allowed as a array in both number (20) or string (20px)
+   1. [left, top, right, bottom]  ==> four entries
+   2. [left, right-bottom, top]   ==> three entries
+   3. [left-top, right-bottom]    ==> two entries
+
+Input allowed as a String in both number (20) or string (20px)
+   1. "left top right bottom" or "left,top,right,bottom" or "left-top-right-bottom"  ==> four entries
+   2. "left right/bottom top" or "left,right/bottom,top" or "left-right/bottom-top"  ==> three entries
+   3. "left/top right/bottom" or "left/top,right/bottom" or "left/top-right/bottom" ==> two entries
+
+note: Properties separated by "/" share the same input.
+
+==Legacy stuff==
 
 For: `all slots and elements`.
 

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,11 @@
+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
+
+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,12 @@ 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,89 @@
+module MarginHelper
+
+    def margin_parse(kwargs)
+
+        if kwargs[:margin]
+          if kwargs[:margin].is_a?(Numeric)
+            if !kwargs[:margin_left]
+                kwargs[:margin_left] = kwargs[:margin]
+            end
+            if !kwargs[:margin_top]
+                kwargs[:margin_top] = kwargs[:margin]
+            end
+            if !kwargs[:margin_right]
+                kwargs[:margin_right] = kwargs[:margin]
+            end
+            if !kwargs[:margin_bottom]
+                kwargs[:margin_bottom] = kwargs[:margin]
+            end
+          else
+            margin_props = kwargs[:margin].is_a?(String) ? kwargs[:margin].split(/\s+|\,|-/) : kwargs[:margin]
+            if margin_props.length == 1
+
+              if !kwargs[:margin_left]
+                kwargs[:margin_left] = margin_props[0]
+              end
+              if !kwargs[:margin_top]
+                kwargs[:margin_top] = margin_props[0]
+              end
+              if !kwargs[:margin_right]
+                kwargs[:margin_right] = margin_props[0]
+              end
+              if !kwargs[:margin_bottom]
+                kwargs[:margin_bottom] = margin_props[0]
+              end
+
+            elsif margin_props.length == 2
+
+              if !kwargs[:margin_top]
+                kwargs[:margin_top] = margin_props[0]
+              end
+              if !kwargs[:margin_bottom]
+                kwargs[:margin_bottom] = margin_props[1]
+              end
+              if !kwargs[:margin_left]
+                kwargs[:margin_left] = margin_props[0]
+              end
+              if !kwargs[:margin_right]
+                kwargs[:margin_right] = margin_props[1]
+              end
+
+            elsif margin_props.length == 3
+
+              if !kwargs[:margin_left]
+                kwargs[:margin_left] = margin_props[0]
+              end
+              if !kwargs[:margin_top]
+                kwargs[:margin_top] = margin_props[2]
+              end
+              if !kwargs[:margin_right]
+                kwargs[:margin_right] = margin_props[1]
+              end
+              if !kwargs[:margin_bottom]
+                kwargs[:margin_bottom] = margin_props[1]
+              end
+
+            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
+        kwargs
+    end
+
+end

lacci/test/test_margin_helper.rb

@@ -0,0 +1,65 @@
+# 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 => nil, :margin_left => 20, :margin_top => 20, :margin_right => 20, :margin_bottom => 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_three_margin
+
+        kwargs = {:margin => [20,20,30]}
+
+        assert_equal({:margin => nil, :margin_left => 20, :margin_top => 30, :margin_right => 20, :margin_bottom => 20},margin_parse(kwargs))
+
+    end
+
+    def test_Array_two_margin
+
+        kwargs = {:margin => [20,30]}
+
+        assert_equal({:margin => nil, :margin_left => 20, :margin_top => 20, :margin_right => 30, :margin_bottom => 30},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_three_margin
+
+        kwargs = {:margin => "20 30 40"}
+
+        assert_equal({:margin => nil, :margin_left => "20", :margin_top => "40", :margin_right => "30", :margin_bottom => "30"},margin_parse(kwargs))
+
+    end
+
+    def test_String_two_margin
+
+        kwargs = {:margin => "20 30"}
+
+        assert_equal({:margin => nil, :margin_left => "20", :margin_top => "20", :margin_right => "30", :margin_bottom => "30"},margin_parse(kwargs))
+
+    end
+
+end

test/wv/html_fixtures/highlander.html

@@ -1,6 +1,6 @@
 <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">
-    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin:40px">
+    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin-left:40px;margin-right:40px;margin-top:40px;margin-bottom:40px">
       <div style="height:100%;width:100%;position:relative">
         <p id="4" style="font-size:12px">Found 0 likely duplicates.</p>
         <select id="5" onchange="scarpeHandler('5-change', this.options[this.selectedIndex].value)"></select><button id="6" onclick="scarpeHandler('6-click')" onmouseover="scarpeHandler('6-hover')">Refresh the list!</button>

test/wv/html_fixtures/list_box.html

@@ -1,8 +1,8 @@
 <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">
-    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin:40px">
+    <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin-left:40px;margin-right:40px;margin-top:40px;margin-bottom:40px">
       <div style="height:100%;width:100%;position:relative">
-        <div id="4" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin:10px">
+        <div id="4" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px">
           <div style="height:100%;width:100%;position:relative">
             <p id="5" style="font-size:12px">Name</p>
             <select id="6" onchange="scarpeHandler('6-change', this.options[this.selectedIndex].value)"><option value="Phyllis">Phyllis</option><option value="Ronald">Ronald</option><option value="Wyatt">Wyatt</option></select></div>

test/wv/html_fixtures/margin.html

@@ -0,0 +1,10 @@
+<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-left:20px;margin-right:20px;margin-top:20px;margin-bottom: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>
+    <div id="root-fonts"></div>
+    <div id="root-alerts"> </div>
+  </div>
+</div>

test/wv/html_fixtures/margin_check.html

@@ -1,13 +1,13 @@
 <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%;background:rgba(0, 0, 255, 255)">
   <div style="height:100%;width:100%;position:relative">
     <div id="3" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:rgba(255, 0, 0, 255)">
-      <div style="height:100%;width:100%;position:relative"><button id="4" onclick="scarpeHandler('4-click')" onmouseover="scarpeHandler('4-hover')" style="margin-left:10px;margin-right:5px;margin-top:25px;margin-bottom:10px">Push me</button></div>
+      <div style="height:100%;width:100%;position:relative"><button id="4" onclick="scarpeHandler('4-click')" onmouseover="scarpeHandler('4-hover')" style="margin-left:10px;margin-right:25px;margin-top:5px;margin-bottom:10px">Push me</button></div>
     </div>
     <div id="5" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;background:rgba(127, 255, 212, 255)">
-      <div style="height:100%;width:100%;position:relative"><button id="6" onclick="scarpeHandler('6-click')" onmouseover="scarpeHandler('6-hover')" style="margin-left:10px;margin-right:5px;margin-top:25px;margin-bottom:10px">Hash margin</button></div>
+      <div style="height:100%;width:100%;position:relative"><button id="6" onclick="scarpeHandler('6-click')" onmouseover="scarpeHandler('6-hover')">Hash margin</button></div>
     </div>
     <div id="7" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:rgba(255, 255, 0, 255)">
-      <div style="height:100%;width:100%;position:relative"><button id="8" onclick="scarpeHandler('8-click')" onmouseover="scarpeHandler('8-hover')" style="margin:5px;margin-top:30px">Middle Button</button></div>
+      <div style="height:100%;width:100%;position:relative"><button id="8" onclick="scarpeHandler('8-click')" onmouseover="scarpeHandler('8-hover')" style="margin-left:5px;margin-right:5px;margin-top:30px;margin-bottom:5px">Middle Button</button></div>
     </div>
     <div id="9" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100px;height:100px;background:rgba(0, 128, 0, 255)">
       <div style="height:100%;width:100%;position:relative"><button id="10" onclick="scarpeHandler('10-click')" onmouseover="scarpeHandler('10-hover')">OK 2</button></div>

test/wv/html_fixtures/ruby_racer.html

@@ -2,21 +2,21 @@
   <div style="height:100%;width:100%;position:relative">
     <div id="3" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:100%">
       <div style="height:100%;width:100%;position:relative">
-        <div id="4" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:45.0%;margin:5px">
+        <div id="4" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:45.0%;margin-left:5px;margin-right:5px;margin-top:5px;margin-bottom:5px">
           <div style="height:100%;width:100%;position:relative">
             <p id="5" style="font-size:14px">Racer 1</p>
             <textarea id="6" oninput="scarpeHandler('6-change', this.value)" onmouseover="scarpeHandler('6-hover')" style="width:100%;height:100px">for i in 1..10n  a = "1"nendn</textarea>
           </div>
         </div>
-        <div id="7" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:45.0%;margin:5px">
+        <div id="7" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:45.0%;margin-left:5px;margin-right:5px;margin-top:5px;margin-bottom:5px">
           <div style="height:100%;width:100%;position:relative">
             <p id="8" style="font-size:14px">Racer 2</p>
             <textarea id="9" oninput="scarpeHandler('9-change', this.value)" onmouseover="scarpeHandler('9-hover')" style="width:100%;height:100px">10.times don  a = "1"nendn</textarea>
           </div>
         </div>
       </div>
     </div>
-    <div id="10" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin:10px">
+    <div id="10" style="display:flex;flex-direction:column;align-content:flex-start;justify-content:flex-start;align-items:flex-start;margin-left:10px;margin-right:10px;margin-top:10px;margin-bottom:10px">
       <div style="height:100%;width:100%;position:relative"><button id="11" onclick="scarpeHandler('11-click')" onmouseover="scarpeHandler('11-hover')">Race!</button>
         <p id="12" style="font-size:12px"></p>
       </div>

test/wv/html_fixtures/simpler-menu.html

@@ -1,30 +1,30 @@
 <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">
-    <div id="3" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:175px;height:120px;margin:4px;background:rgba(0, 128, 0, 255)">
+    <div id="3" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:175px;height:120px;margin-left:4px;margin-right:4px;margin-top:4px;margin-bottom:4px;background:rgba(0, 128, 0, 255)">
       <div style="height:100%;width:100%;position:relative">
         <div id="4" style="text-align:center;width:100%">
-          <p style="margin:18px;font-size:20px">Box 1</p>
+          <p style="margin-left:18px;margin-right:18px;margin-top:18px;margin-bottom:18px;font-size:20px">Box 1</p>
         </div>
       </div>
     </div>
-    <div id="5" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:140px;height:120px;margin:4px;background:rgba(0, 0, 255, 255)">
+    <div id="5" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:140px;height:120px;margin-left:4px;margin-right:4px;margin-top:4px;margin-bottom:4px;background:rgba(0, 0, 255, 255)">
       <div style="height:100%;width:100%;position:relative">
         <div id="6" style="text-align:center;width:100%">
-          <p style="margin:18px;font-size:20px">Box 2</p>
+          <p style="margin-left:18px;margin-right:18px;margin-top:18px;margin-bottom:18px;font-size:20px">Box 2</p>
         </div>
       </div>
     </div>
-    <div id="7" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:135px;height:120px;margin:4px;background:rgba(255, 0, 0, 255)">
+    <div id="7" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:135px;height:120px;margin-left:4px;margin-right:4px;margin-top:4px;margin-bottom:4px;background:rgba(255, 0, 0, 255)">
       <div style="height:100%;width:100%;position:relative">
         <div id="8" style="text-align:center;width:100%">
-          <p style="margin:18px;font-size:20px">Box 3</p>
+          <p style="margin-left:18px;margin-right:18px;margin-top:18px;margin-bottom:18px;font-size:20px">Box 3</p>
         </div>
       </div>
     </div>
-    <div id="9" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:125px;height:120px;margin:4px;background:rgba(128, 0, 128, 255)">
+    <div id="9" style="display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-start;justify-content:flex-start;align-items:flex-start;width:125px;height:120px;margin-left:4px;margin-right:4px;margin-top:4px;margin-bottom:4px;background:rgba(128, 0, 128, 255)">
       <div style="height:100%;width:100%;position:relative">
         <div id="10" style="text-align:center;width:100%">
-          <p style="margin:18px;font-size:20px">Box 4</p>
+          <p style="margin-left:18px;margin-right:18px;margin-top:18px;margin-bottom:18px;font-size:20px">Box 4</p>
         </div>
       </div>
     </div>