From 5129564d204f53358a36ab21f0298c220a2f8524 Mon Sep 17 00:00:00 2001 From: kimispencer Date: Mon, 24 May 2021 17:05:49 -0400 Subject: [PATCH 1/4] object-fit: cover and export avatars sizes --- docs/Examples2/Image.example.purs | 17 +++++++++++++---- src/Lumi/Components2/Image.purs | 9 ++++++--- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/docs/Examples2/Image.example.purs b/docs/Examples2/Image.example.purs index a5c8c8f..f35384f 100644 --- a/docs/Examples2/Image.example.purs +++ b/docs/Examples2/Image.example.purs @@ -18,7 +18,7 @@ docs = , example $ Image.image $$$ "http://via.placeholder.com/640x360" - , h4_ "Image + resize { width: 120px, height: 40px }, scales image to respect it's aspect ratio" + , h4_ "Image + resize { width: 120px, height: 40px }, contains image to parent container's aspect ratio (will clip horizontal edges)" , example $ Image.image $ Image.resize { width: 120, height: 40 } @@ -52,11 +52,20 @@ docs = $ Image.thumbnail $ Image.extraLarge $$$ flexo - , h4_ "Thumbnail + round" + , h4_ "Thumbnail + avatar (small)" , example $ Image.thumbnail - $ Image.round - $ Image.extraLarge + $ Image.smallAvatar + $$$ flexo + , h4_ "Thumbnail + avatar (medium)" + , example + $ Image.thumbnail + $ Image.mediumAvatar + $$$ flexo + , h4_ "Thumbnail + avatar (large)" + , example + $ Image.thumbnail + $ Image.largeAvatar $$$ flexo , h4_ "Placeholders (can be overriden)" , example diff --git a/src/Lumi/Components2/Image.purs b/src/Lumi/Components2/Image.purs index b81ba43..8912296 100644 --- a/src/Lumi/Components2/Image.purs +++ b/src/Lumi/Components2/Image.purs @@ -5,9 +5,12 @@ module Lumi.Components2.Image , medium , large , extraLarge + , smallAvatar + , mediumAvatar + , largeAvatar , resize , resizeSquare - , round + -- , round , Image , Thumbnail ) where @@ -104,8 +107,8 @@ image = , className: "" , css: E.css { maxWidth: E.percent 100.0 - , maxHeight: E.percent 100.0 - , objectFit: E.str "contain" + -- , maxHeight: E.percent 100.0 + , objectFit: E.str "cover" , display: E.str $ if loaded then "block" else "none" } , onLoad: handler_ $ setLoaded true From c7c7033e972d09de07d82715f0913e9f0b124b6e Mon Sep 17 00:00:00 2001 From: kimispencer Date: Mon, 24 May 2021 18:54:50 -0400 Subject: [PATCH 2/4] more exports --- src/Lumi/Components2/Image.purs | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Lumi/Components2/Image.purs b/src/Lumi/Components2/Image.purs index 8912296..1b141ff 100644 --- a/src/Lumi/Components2/Image.purs +++ b/src/Lumi/Components2/Image.purs @@ -10,9 +10,11 @@ module Lumi.Components2.Image , largeAvatar , resize , resizeSquare - -- , round - , Image - , Thumbnail + , round + , ImageProps + , ThumbnailProps + , Image(..) + , Thumbnail(..) ) where import Prelude From 1249489c0f7393576bdf0cba85fc99921a95f0ac Mon Sep 17 00:00:00 2001 From: kimispencer Date: Tue, 25 May 2021 15:04:26 -0400 Subject: [PATCH 3/4] cleanup --- docs/Examples2/Image.example.purs | 2 +- src/Lumi/Components2/Image.purs | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/Examples2/Image.example.purs b/docs/Examples2/Image.example.purs index f35384f..b5c47aa 100644 --- a/docs/Examples2/Image.example.purs +++ b/docs/Examples2/Image.example.purs @@ -18,7 +18,7 @@ docs = , example $ Image.image $$$ "http://via.placeholder.com/640x360" - , h4_ "Image + resize { width: 120px, height: 40px }, contains image to parent container's aspect ratio (will clip horizontal edges)" + , h4_ "Image + resize { width: 120px, height: 40px }, contains image to parent container's aspect ratio (will clip edges)" , example $ Image.image $ Image.resize { width: 120, height: 40 } diff --git a/src/Lumi/Components2/Image.purs b/src/Lumi/Components2/Image.purs index 1b141ff..6c63aa2 100644 --- a/src/Lumi/Components2/Image.purs +++ b/src/Lumi/Components2/Image.purs @@ -109,7 +109,6 @@ image = , className: "" , css: E.css { maxWidth: E.percent 100.0 - -- , maxHeight: E.percent 100.0 , objectFit: E.str "cover" , display: E.str $ if loaded then "block" else "none" } From 49331989125fad56f796d454e67c6cdc0ce6f305 Mon Sep 17 00:00:00 2001 From: kimispencer Date: Thu, 3 Jun 2021 11:04:48 -0400 Subject: [PATCH 4/4] update default placeholder; and examples --- docs/Examples2/Image.example.purs | 14 +++++++------- src/Lumi/Components2/Image.purs | 19 ++++++++++++++++--- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/docs/Examples2/Image.example.purs b/docs/Examples2/Image.example.purs index b5c47aa..4d7857d 100644 --- a/docs/Examples2/Image.example.purs +++ b/docs/Examples2/Image.example.purs @@ -14,19 +14,19 @@ docs :: JSX docs = let flexo = "https://s3.amazonaws.com/lumi-blog/avatars/_x600/flexo.jpg" in Array.intercalate (vspace S16) - [ h4_ "Image default (will respect image's aspect ratio)" + [ h4_ "Image default (will respect image's original aspect ratio & dimensions)" , example $ Image.image - $$$ "http://via.placeholder.com/640x360" - , h4_ "Image + resize { width: 120px, height: 40px }, contains image to parent container's aspect ratio (will clip edges)" + $$$ flexo + , h4_ "Image + resize { width: 120px, height: 40px }, the image will fill the height and width of its parent (object-fit: cover), maintaining its aspect ratio but cropping the image" , example $ Image.image $ Image.resize { width: 120, height: 40 } - $$$ "http://via.placeholder.com/360x640" + $$$ flexo , h4_ "Thumbnail default (will always have a square aspect ratio)" , example $ Image.thumbnail - $$$ "http://via.placeholder.com/360x640" + $$$ flexo , h4_ "Thumbnail + resize 400px" , example $ Image.thumbnail @@ -67,10 +67,10 @@ docs = $ Image.thumbnail $ Image.largeAvatar $$$ flexo - , h4_ "Placeholders (can be overriden)" + , h4_ "Default placeholder (can be overriden)" , example $ Image.image - $ Image.resize { width: 900, height: 50 } + $ Image.resize { width: 320, height: 240 } $$$ "" , example $ Image.thumbnail diff --git a/src/Lumi/Components2/Image.purs b/src/Lumi/Components2/Image.purs index 6c63aa2..b815ce2 100644 --- a/src/Lumi/Components2/Image.purs +++ b/src/Lumi/Components2/Image.purs @@ -32,7 +32,7 @@ import Lumi.Components (LumiComponent, PropsModifier, lumiComponent, ($$$)) import Lumi.Components.Loader (loader) import Lumi.Components.Svg (placeholderSvg) import Lumi.Components2.Box as Box -import Lumi.Styles (Style, StyleModifier, style, style_, toCSS) +import Lumi.Styles (Style, StyleModifier, color, style, style_, toCSS) import Lumi.Styles.Box (FlexAlign(..)) import Lumi.Styles.Box as Styles.Box import Lumi.Styles.Slat hiding (_interactive,slat) as Styles.Slat @@ -87,7 +87,7 @@ image = { ref: containerRef , children: [ if String.null props.content - then fromMaybe placeholderSvg props.placeholder + then fromMaybe placeholder props.placeholder else Box.column $ Styles.Box._flex @@ -108,7 +108,7 @@ image = { src: props.content , className: "" , css: E.css - { maxWidth: E.percent 100.0 + { width: E.percent 100.0 , objectFit: E.str "cover" , display: E.str $ if loaded then "block" else "none" } @@ -265,3 +265,16 @@ largeAvatar = mkRound :: Style mkRound = E.css { borderRadius: E.percent 50.0 } +placeholder :: JSX +placeholder = + Box.column + $ Styles.Box._align Center + $ Styles.Box._justify Center + $ Styles.Box._flex + $ style do + \(LumiTheme { colors }) -> (E.css { backgroundColor: color colors.black6, width: E.percent 100.0 }) + $$$ + [ Box.box + $ style_ (E.css { width: E.percent 50.0 }) + $$$ [ placeholderSvg ] + ] \ No newline at end of file