Merge pull request #205 from zumero/action-sheets

Implemented actionsheets for Ooui.Forms

Ooui.Forms/ActionSheet.cs

@@ -0,0 +1,100 @@
+using System;
+using System.Collections.Generic;
+using Xamarin.Forms.Internals;
+
+namespace Ooui.Forms
+{
+    public class ActionSheet
+    {
+        private readonly Button _cancelButton;
+        private readonly List<Button> _buttons;
+
+        public Element Element { get; private set; }
+
+        public ActionSheet(ActionSheetArguments arguments)
+        {
+            Element = new Div();
+            Element.ClassName = "modal-dialog";
+
+            var content = new Div();
+            content.ClassName = "modal-content";
+
+            var header = new Div();
+            header.ClassName = "modal-header";
+
+            var h4 = new Heading(4)
+            {
+                Text = arguments.Title
+            };
+
+            header.AppendChild(h4);
+
+            content.AppendChild(header);
+
+            var body = new Div();
+            body.ClassName = "modal-body";
+
+            content.AppendChild(body);
+
+            _buttons = new List<Button>();
+
+            foreach (var button in arguments.Buttons)
+            {
+                var btnBody = new Div();
+                btnBody.Style.MarginBottom = 5;
+
+                var btn = new Button(button);
+                btn.Style.Width = "100%";
+                btn.ClassName = "btn";
+                btn.Click += (s,e) =>  SetResult(button);
+
+                _buttons.Add(btn);
+
+                btnBody.AppendChild(btn);
+                body.AppendChild(btnBody);
+            }
+
+            if (!string.IsNullOrEmpty(arguments.Cancel))
+            {
+                var footer = new Div();
+                footer.ClassName = "modal-footer";
+
+                _cancelButton = new Button(arguments.Cancel);
+                _cancelButton.ClassName = "btn -btn-default";
+                _cancelButton.Click += (s, e) => SetResult(arguments.Cancel);
+
+                footer.AppendChild(_cancelButton);
+
+                content.AppendChild(footer);
+            }
+
+            Element.AppendChild(content);
+
+            void SetResult(string result)
+            {
+                arguments.SetResult(result);
+            }
+        }
+
+        public event TargetEventHandler Clicked
+        {
+            add
+            {
+                _cancelButton.Click += value;
+                foreach (var btn in _buttons)
+                {
+                    btn.Click += value;
+                }
+
+            }
+            remove
+            {
+                _cancelButton.Click -= value;
+                foreach (var btn in _buttons)
+                {
+                    btn.Click -= value;
+                }
+            }
+        }
+    }
+}

Ooui.Forms/Platform.cs

@@ -45,6 +45,19 @@ namespace Ooui.Forms
                     _renderer.RemoveChild (alert.Element);
                 }
             });
+
+            MessagingCenter.Subscribe(this, Page.ActionSheetSignalName, (Page sender, ActionSheetArguments arguments) =>
+            {
+                var sheet = new ActionSheet(arguments);
+                sheet.Clicked += CloseSheet;
+
+                _renderer.AppendChild(sheet.Element);
+
+                void CloseSheet (object s, EventArgs e)
+                {
+                    _renderer.RemoveChild(sheet.Element);
+                }
+            });
         }
 
         void IDisposable.Dispose ()

Ooui/Style.cs

@@ -224,31 +224,31 @@ namespace Ooui
 
         public Value MarginTop {
             get => this["margin-top"];
-            set => this["margin-top"] = value;
+            set => this["margin-top"] = AddNumberUnits (value, "px");
         }
 
         public Value MarginRight {
             get => this["margin-right"];
-            set => this["margin-right"] = value;
+            set => this["margin-right"] = AddNumberUnits (value, "px");
         }
 
         public Value MarginBottom {
             get => this["margin-bottom"];
-            set => this["margin-bottom"] = value;
+            set => this["margin-bottom"] = AddNumberUnits (value, "px");
         }
 
         public Value MarginLeft {
             get => this["margin-left"];
-            set => this["margin-left"] = value;
+            set => this["margin-left"] = AddNumberUnits (value, "px");
         }
 
         public Value Margin {
             get => this["margin-top"];
             set {
-                this["margin-top"] = value;
-                this["margin-right"] = value;
-                this["margin-bottom"] = value;
-                this["margin-left"] = value;
+                this["margin-top"] = AddNumberUnits (value, "px");
+                this["margin-right"] = AddNumberUnits (value, "px");
+                this["margin-bottom"] = AddNumberUnits (value, "px");
+                this["margin-left"] = AddNumberUnits (value, "px");
             }
         }