diff options
| author |  Benjamin Barenblat <benjamin@barenblat.name> | 2017-01-16 16:05:48 -0500 |
|---|---|---|
| committer | Benjamin Barenblat <benjamin@barenblat.name> | 2017-01-16 16:05:48 -0500 |
| commit | d457eb2a8778d23bf98a8593b5083a2750b0e05a (patch) | |
| tree | 4f04229457797c6058cfcea6eca471d0dfeae09f | |
| parent | 819b714ecab8d089d1c0d37da01492a811dc0e3a (diff) | |
Add ripple effect to checkboxes
| -rw-r--r-- | material/material.css | 34 | ||||
| -rw-r--r-- | material/material.ur | 45 |
2 files changed, 74 insertions, 5 deletions
diff --git a/material/material.css b/material/material.css index cf66a8e..0a762f2 100644 --- a/material/material.css +++ b/material/material.css @@ -19,6 +19,11 @@ html, body { font-family: Roboto; } +.Material_stackingContext { + position: absolute; + z-index: 0; +} + .Material_AppBar_bar { background: #9c27b0; height: 56px; @@ -50,18 +55,36 @@ html, body { .Material_Checkbox_checkbox { display: block; - width: 24px; - height: 24px; box-sizing: border-box; border: 2px solid #9c27b0; border-radius: 2px; transition: background 300ms; + + /* These must match the width and height defined in Material.Checkbox. */ + width: 24px; + height: 24px; } .Material_Checkbox_checked { background: #9c27b0 url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB2aWV3Qm94PSIwIDAgMSAxIgogICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWluWU1pbiBtZWV0Ij4KICA8cGF0aAogICAgIGQ9Ik0gMC4wNDAzODA1OSwwLjYyNjc3NjcgMC4xNDY0NDY2MSwwLjUyMDcxMDY4IDAuNDI5Mjg5MzIsMC44MDM1NTMzOSAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IE0gMC4yMTcxNTcyOSwwLjgwMzU1MzM5IDAuODUzNTUzMzksMC4xNjcxNTcyOSAwLjk1OTYxOTQxLDAuMjczMjIzMyAwLjMyMzIyMzMsMC45MDk2MTk0MSB6IgogICAgIGlkPSJyZWN0Mzc4MCIKICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgo8L3N2Zz4K); } +.Material_Checkbox_ink { + display: block; + position: fixed; + transform: scale(0); + background: #9c27b0; /* TODO(bbaren): Is this the correct color? */ + border-radius: 100%; + animation: ripple 300ms linear; + + /* These must match the width and height defined in Material.Checkbox. */ + width: 24px; + height: 24px; + + /* Place the ripple effect underneath the checkmark. */ + z-index: -1; +} + .Material_List_SingleLine_element { list-style-type: none; height: 48px; @@ -81,3 +104,10 @@ html, body { margin: 8px 16px; padding: 0; } + +@keyframes ripple { + to { + opacity: 0; + transform: scale(2); + } +} diff --git a/material/material.ur b/material/material.ur index eb4f971..72a3e98 100644 --- a/material/material.ur +++ b/material/material.ur @@ -1,5 +1,5 @@ (* Copyright 2015 Google Inc. -Copyright 2016 Benjamin Barenblat +Copyright 2016, 2017 Benjamin Barenblat Licensed under the Apache License, Version 2.0 (the “License”); you may not use this file except in compliance with the License. You may obtain a copy of the @@ -12,6 +12,10 @@ under the License is distributed on an “AS IS” BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. *) +style stackingContext + +fun inNewStackingContext x = <xml><div class={stackingContext}>{x}</div></xml> + (* TODO(bbaren): Support attributes in the arguments. *) fun page p = <xml> <head> @@ -44,16 +48,51 @@ end structure Checkbox = struct style checkbox style checked + style container + style ink + + (* Pixel dimensions of the checkbox. If you update these, you must also + update the CSS file. *) + val width = 24 + val height = 24 + + fun centeredAtXY x y : css_style = + let + val x' = x - width / 2 + val y' = y - width / 2 + in + oneProperty (oneProperty + noStyle + (value (property "left") (atom (show x' ^ "px")))) + (value (property "top") (atom (show y' ^ "px"))) + end + + fun inkAnimation (s : source (option {X : int, Y : int})) = + <xml> + <dyn + signal={ + v <- signal s; + return (case v of + None => <xml></xml> + | Some xy => <xml> + <span class={ink} style={centeredAtXY xy.X xy.Y}></span> + </xml>) + } + /> + </xml> val make c onChange = s <- source c; - return <xml> + inkCenter <- source None; + return (inNewStackingContext <xml> + {inkAnimation inkCenter} <span dynClass={ c <- signal s; return (classes checkbox (if c then checked else null)) } onclick={fn click => + set inkCenter (Some {X = click.ClientX, Y = click.ClientY}); c <- get s; let val c' = not c @@ -64,7 +103,7 @@ structure Checkbox = struct } > </span> - </xml> + </xml>) end structure List = struct |