mirror of
https://github.com/status-im/status-react.git
synced 2025-01-27 11:16:03 +00:00
* [#3630]: Improve dynamic image sizing
This commit is contained in:
parent
71ed35b480
commit
c29c58d044
@ -26,4 +26,6 @@
|
||||
:empty-recent (js/require "./resources/images/ui/empty-recent.png")
|
||||
:analytics-image (js/require "./resources/images/ui/analytics-image.png")
|
||||
:welcome-image (js/require "./resources/images/ui/welcome-image.png")
|
||||
:lock (js/require "./resources/images/ui/lock.png")})
|
||||
:lock {:image (js/require "./resources/images/ui/lock.png")
|
||||
:width 993
|
||||
:height 933}})
|
||||
|
@ -1,6 +1,7 @@
|
||||
(ns status-im.ui.components.common.common
|
||||
(:require-macros [status-im.utils.views :refer [defview letsubs]])
|
||||
(:require [status-im.i18n :as i18n]
|
||||
(:require [reagent.core :as reagent]
|
||||
[status-im.i18n :as i18n]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.components.icons.vector-icons :as vector-icons]
|
||||
[status-im.ui.components.common.styles :as styles]
|
||||
@ -87,9 +88,15 @@
|
||||
(assoc :accessibility-label accessibility-label))
|
||||
value]]))
|
||||
|
||||
(defn image-contain
|
||||
([source] (image-contain nil source))
|
||||
([{:keys [style]} source]
|
||||
[react/view {:style (merge styles/image-contain
|
||||
style)}
|
||||
[react/image {:source source :resizeMode :contain :style styles/image-contain-image}]]))
|
||||
(defn image-contain [_ _]
|
||||
(let [content-width (reagent/atom 0)]
|
||||
(reagent/create-class
|
||||
{:reagent-render
|
||||
(fn [{:keys [container-style style]} {:keys [image width height]}]
|
||||
[react/view {:style (merge styles/image-contain container-style)
|
||||
:on-layout #(reset! content-width (-> % .-nativeEvent .-layout .-width))}
|
||||
[react/image {:source image
|
||||
:resize-mode :contain
|
||||
:style (merge style
|
||||
{:width @content-width
|
||||
:height (/ (* @content-width height) width)})}]])})))
|
@ -164,12 +164,4 @@
|
||||
:color colors/white})
|
||||
|
||||
(def image-contain
|
||||
{:flex-direction :row
|
||||
:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:flex-wrap :wrap})
|
||||
|
||||
(def image-contain-image
|
||||
{:flex-direction :row
|
||||
:flex 1})
|
||||
{:align-self :stretch})
|
||||
|
@ -4,10 +4,11 @@
|
||||
(def intro-container
|
||||
{:flex 1
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:margin-horizontal 26})
|
||||
|
||||
(def intro-image
|
||||
{:padding-vertical 25})
|
||||
{:padding-bottom 10})
|
||||
|
||||
(def intro-text
|
||||
{:text-align :center
|
||||
@ -26,8 +27,7 @@
|
||||
|
||||
(def intro-button
|
||||
{:flex-direction :row
|
||||
:margin-top 16
|
||||
:margin-bottom 32})
|
||||
:margin-top 16})
|
||||
|
||||
(def six-words-container
|
||||
{:flex 1
|
||||
|
@ -36,7 +36,7 @@
|
||||
|
||||
(defn intro []
|
||||
[react/view {:style styles/intro-container}
|
||||
[components.common/image-contain {:style styles/intro-image}
|
||||
[components.common/image-contain {:container-style styles/intro-image}
|
||||
(:lock resources/ui)]
|
||||
[react/text {:style styles/intro-text}
|
||||
(i18n/label :t/your-data-belongs-to-you)]
|
||||
|
Loading…
x
Reference in New Issue
Block a user