Integrate LinkButton, Textfield updates

zombiQWERTY · Dec 28, 2016 · 5236f9f · 5236f9f
1 parent 3ba31fb
commit 5236f9f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 147 deletions.
diff --git a/demo/Demo/Buttons.elm b/demo/Demo/Buttons.elm
@@ -214,7 +214,7 @@ viewButtons model =
 
 view : Model -> Html Msg
 view model = 
-  Page.body1' "Buttons" srcUrl intro references
+  Page.body1_ "Buttons" srcUrl intro references
     [ p []
         [ text """Various combinations of colors and button styles can be seen
                   below. Most buttons have animations; try clicking. Code for the
@@ -235,45 +235,55 @@ view model =
         ]
 
     , p []
-        [ text """Link buttons are links that look and act like buttons.
-                However, they also support attributes for links such as 'href' and 'target'."""
+        [ text """
+          To make a button act like a link, supply the option `Button.link
+          "<href>"`. The example below opens the Grid tab of this demo."""
         ]
 
     , Button.render Mdl [9, 0, 0, 1] model.mdl
         [ Button.ripple
-        , Button.link
-        , Options.attr <| href "#buttons"
+        , Button.colored
+        , Button.raised
+        , Button.link "#grid"
         ]
-        [ text "Basic Link" ]
+        [ text "Link" ]
 
     , Code.code [ Options.css "margin" "20px 0" ]
       """
       Button.render Mdl [9, 0, 0, 1] model.mdl
         [ Button.ripple
-        , Button.link
-        , Options.attr <| Html.Attributes.href "#buttons"
+        , Button.colored
+        , Button.raised
+        , Button.link "#grid"
         ]
-        [ text "Basic Link" ]
+        [ text "Link" ]
       """
-
+    , p [] 
+      [ text """
+          Buttons with the `link` property function as HTML `a` elements. 
+          You can supply the usual attributes, e.g, `target`. The example
+          below opens the link in a new tab or window, depending on the
+          browser.  
+        """
+      ]
     , Button.render Mdl [9, 0, 0, 2] model.mdl
         [ Button.ripple
         , Button.colored
         , Button.raised
-        , Button.link
-        , Options.attr <| href "#buttons"
+        , Button.link "#grid"
+        , Options.attribute <| Html.Attributes.target "_blank"
         ]
-        [ text "Link with ripple" ]
+        [ text "Open in new tab" ]
     , Code.code [ Options.css "margin" "20px 0" ]
       """
       Button.render Mdl [9, 0, 0, 2] model.mdl
         [ Button.ripple
         , Button.colored
         , Button.raised
-        , Button.link
-        , Options.attr <| Html.Attributes.href "#buttons"
+        , Button.link "#grid"
+        , Options.attribute <| Html.Attributes.target "_blank"
         ]
-        [ text "Link with ripple" ]
+        [ text "Ripple and target" ]
       """
     ]
 

diff --git a/src/Material/Button.elm b/src/Material/Button.elm
@@ -150,10 +150,12 @@ perform link actions.
       ]
       [ text "Link Button" ]
 -}
-link : Property m
-link =
-  Options.set
-    (\options -> { options | link = True })
+link : String -> Property m
+link href =
+  Options.many 
+    [ Internal.option (\options -> { options | link = True })
+    , Internal.attribute <| Html.Attributes.href href 
+    ]
 
 
 {-| Set button to ripple when clicked.
@@ -227,8 +229,6 @@ type_ =
    Obviously, once Elm gets proper support for controlling focus/blur, we can dispense
    with all this nonsense.
 -}
-
-
 blurAndForward : String -> Attribute m
 blurAndForward event =
     Html.Attributes.attribute
@@ -265,125 +265,6 @@ view lift model config html =
             [ Helpers.blurOn "mouseup"
             , Helpers.blurOn "mouseleave"
             , Helpers.blurOn "touchend"
-||||||| merged common ancestors
-  let
-    summary = Options.collect defaultConfig config
-
-    startListeners =
-      if summary.config.ripple then
-        [ Ripple.downOn' lift "mousedown" |> Just
-        , Ripple.downOn' lift "touchstart" |> Just
-        ]
-      else
-        []
-
-    stopListeners =
-      let handle =
-        Just << if summary.config.ripple then blurAndForward else Helpers.blurOn
-      in
-        [ handle "mouseup"
-        , handle "mouseleave"
-        , handle "touchend"
-        ]
-
-    misc =
-      [ summary.config.onClick
-      , if summary.config.disabled then
-          Just (Html.Attributes.disabled True)
-        else
-          Nothing
-      ]
-
-    type' =
-      case summary.config.type' of
-        Nothing -> []
-        Just tp -> [ Just <| Html.Attributes.type' tp ]
-
-  in
-    Options.apply summary button
-      [ cs "mdl-button"
-      , cs "mdl-js-button"
-      , cs "mdl-js-ripple-effect" `when` summary.config.ripple
-      ]
-      (List.concat [startListeners, stopListeners, misc, type']
-         |> List.filterMap identity)
-      (if summary.config.ripple then
-          List.concat
-            [ html
-            -- Ripple element must be last or blurAndForward hack fails.
-            , [ Html.App.map lift <| Ripple.view'
-                  [ class "mdl-button__ripple-container"
-
-
-START HERE: Checkout this file and demo/Demo/Buttons/elm from v8, then manually move changes from v8
-                  --, Helpers.blurOn "mouseup"
-                  , Ripple.upOn "blur"
-                  , Ripple.upOn "touchcancel"
-                  ]
-                  model
-              ]
-=======
-  let
-    summary = Options.collect defaultConfig config
-
-    startListeners =
-      if summary.config.ripple then
-        [ Ripple.downOn' lift "mousedown" |> Just
-        , Ripple.downOn' lift "touchstart" |> Just
-        ]
-      else
-        []
-
-    stopListeners =
-      let handle =
-        Just << if summary.config.ripple then blurAndForward else Helpers.blurOn
-      in
-        [ handle "mouseup"
-        , handle "mouseleave"
-        , handle "touchend"
-        ]
-
-    misc =
-      [ summary.config.onClick
-      , if summary.config.disabled then
-          Just (Html.Attributes.disabled True)
-        else
-          Nothing
-      ]
-
-    type' =
-      case summary.config.type' of
-        Nothing -> []
-        Just tp -> [ Just <| Html.Attributes.type' tp ]
-
-
-    buttonElement =
-      if summary.config.link then
-        Html.a
-      else
-        Html.button
-
-  in
-    Options.apply summary buttonElement
-      [ cs "mdl-button"
-      , cs "mdl-js-button"
-      , cs "mdl-js-ripple-effect" `when` summary.config.ripple
-      ]
-      (List.concat [startListeners, stopListeners, misc, type']
-         |> List.filterMap identity)
-      (if summary.config.ripple then
-          List.concat
-            [ html
-            -- Ripple element must be last or blurAndForward hack fails.
-            , [ Html.App.map lift <| Ripple.view'
-                  [ class "mdl-button__ripple-container"
-                  --, Helpers.blurOn "mouseup"
-                  , Ripple.upOn "blur"
-                  , Ripple.upOn "touchcancel"
-                  ]
-                  model
-              ]
->>>>>>> v7
             ]
             (if summary.config.ripple then
                 List.concat

diff --git a/src/Material/Textfield.elm b/src/Material/Textfield.elm
@@ -13,6 +13,7 @@ module Material.Textfield
         , textarea
         , rows
         , cols
+        , email
         , autofocus
         , maxlength
         , expandable
@@ -24,6 +25,7 @@ module Material.Textfield
         , view
         )
 
+
 {-| From the [Material Design Lite documentation](http://www.getmdl.io/components/#textfields-section):
 
 > The Material Design Lite (MDL) text field component is an enhanced version of
@@ -63,8 +65,7 @@ for a live demo.
 @docs disabled, rows, cols
 @docs autofocus, maxlength
 
-# Type
-@docs password, textarea, text_
+@docs password, email, textarea, text_
 @docs expandable, expandableIcon
 
 # Elm Architecture
@@ -92,6 +93,7 @@ type Kind
     = Text
     | Textarea
     | Password
+    | Email
 
 
 type alias Config m =
@@ -101,8 +103,6 @@ type alias Config m =
     , value : Maybe String
     , disabled : Bool
     , kind : Kind
-    , rows : Maybe Int
-    , cols : Maybe Int
     , expandable : Maybe String
     , expandableIcon : String
     , input : List (Options.Style m)
@@ -118,8 +118,6 @@ defaultConfig =
     , value = Nothing
     , disabled = False
     , kind = Text
-    , rows = Nothing
-    , cols = Nothing
     , expandable = Nothing
     , expandableIcon = "search"
     , input = []
@@ -217,6 +215,14 @@ input =
     Options.input
 
 
+{-| Sets the type of input to 'email'.
+-}
+email : Property m
+email =
+  Internal.option
+    (\config -> { config | kind = Email })
+
+
 {-| Sets the type of input to 'password'.
 -}
 password : Property m