Style fix (#18191)
This commit is contained in:
parent
fe9a4eac59
commit
f8cdb3bd7b
Binary file not shown.
After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
|
@ -1,4 +1,4 @@
|
|||
(ns quo.components.list-items.user-list
|
||||
(ns quo.components.list-items.user
|
||||
(:require
|
||||
[quo.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo.components.icon :as icons]
|
||||
|
@ -18,14 +18,14 @@
|
|||
:align-items :center})
|
||||
|
||||
(defn action-icon
|
||||
[{:keys [type on-press on-check disabled? checked?]}]
|
||||
[{:keys [type on-press on-check disabled? checked?]} theme]
|
||||
[rn/touchable-opacity
|
||||
{:on-press (when on-press on-press)}
|
||||
(case type
|
||||
:options
|
||||
[icons/icon :i/options
|
||||
{:size 20
|
||||
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]
|
||||
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
|
||||
:checkbox
|
||||
[selectors/view
|
||||
{:type :checkbox
|
||||
|
@ -37,14 +37,16 @@
|
|||
[text/text "not implemented"]
|
||||
[rn/view])])
|
||||
|
||||
(defn user-list
|
||||
(defn user
|
||||
[{:keys [short-chat-key primary-name secondary-name photo-path online? contact? verified?
|
||||
untrustworthy? on-press on-long-press accessory]}]
|
||||
[rn/touchable-opacity
|
||||
untrustworthy? on-press on-long-press accessory customization-color theme]}]
|
||||
[rn/touchable-highlight
|
||||
{:style container-style
|
||||
:underlay-color (colors/resolve-color customization-color theme 5)
|
||||
:accessibility-label :user-list
|
||||
:on-press (when on-press on-press)
|
||||
:on-long-press (when on-long-press on-long-press)}
|
||||
[:<>
|
||||
[user-avatar/user-avatar
|
||||
{:full-name primary-name
|
||||
:profile-picture photo-path
|
||||
|
@ -56,11 +58,12 @@
|
|||
:secondary-name secondary-name
|
||||
:contact? contact?
|
||||
:verified? verified?
|
||||
:untrustworthy? untrustworthy?}]
|
||||
:untrustworthy? untrustworthy?
|
||||
:size 15}]
|
||||
(when short-chat-key
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
{:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||
short-chat-key])]
|
||||
(when accessory
|
||||
[action-icon accessory])])
|
||||
[action-icon accessory theme])]])
|
|
@ -38,7 +38,7 @@
|
|||
(defn icon-container
|
||||
[is-first?]
|
||||
{:margin-left (if is-first? 4 2)
|
||||
:margin-bottom 2})
|
||||
:margin-bottom 4})
|
||||
|
||||
(defn time-text
|
||||
[theme]
|
||||
|
|
|
@ -51,8 +51,7 @@
|
|||
[icons/icon :main-icons2/untrustworthy
|
||||
{:size 12
|
||||
:no-color true
|
||||
:container-style (style/icon-container contact?)}])
|
||||
]
|
||||
:container-style (style/icon-container contact?)}])]
|
||||
(when (and (not verified?) short-chat-key)
|
||||
[text/text
|
||||
{:weight :monospace
|
||||
|
|
|
@ -86,7 +86,7 @@
|
|||
quo.components.list-items.saved-contact-address.view
|
||||
quo.components.list-items.token-network.view
|
||||
quo.components.list-items.token-value.view
|
||||
quo.components.list-items.user-list
|
||||
quo.components.list-items.user
|
||||
quo.components.loaders.skeleton-list.view
|
||||
quo.components.markdown.list.view
|
||||
quo.components.markdown.text
|
||||
|
@ -299,7 +299,7 @@
|
|||
(def account-list-card quo.components.list-items.account-list-card.view/view)
|
||||
(def address quo.components.list-items.address.view/view)
|
||||
(def channel quo.components.list-items.channel.view/view)
|
||||
(def community-list-item quo.components.list-items.community.view/view)
|
||||
(def community-list quo.components.list-items.community.view/view)
|
||||
(def dapp quo.components.list-items.dapp.view/view)
|
||||
(def menu-item quo.components.list-items.menu-item/menu-item)
|
||||
(def preview-list quo.components.list-items.preview-list.view/view)
|
||||
|
@ -308,7 +308,7 @@
|
|||
(def saved-contact-address quo.components.list-items.saved-contact-address.view/view)
|
||||
(def token-network quo.components.list-items.token-network.view/view)
|
||||
(def token-value quo.components.list-items.token-value.view/view)
|
||||
(def user-list quo.components.list-items.user-list/user-list)
|
||||
(def user quo.components.list-items.user/user)
|
||||
|
||||
;;;; Loaders
|
||||
(def skeleton-list quo.components.loaders.skeleton-list.view/view)
|
||||
|
|
|
@ -17,19 +17,19 @@
|
|||
(fn [^js data]
|
||||
(let [^js section (.-section data)]
|
||||
(reagent/as-element [f
|
||||
{:title (.-title section)
|
||||
{:index (.-index section)
|
||||
:title (.-title section)
|
||||
:data (.-data section)}]))))
|
||||
|
||||
(defn- wrap-per-section-render-fn
|
||||
[props]
|
||||
(update
|
||||
(if-let [f (:render-fn props)]
|
||||
[index props]
|
||||
(-> (if-let [f (:render-fn props)]
|
||||
(assoc (dissoc props :render-fn :render-data)
|
||||
:renderItem
|
||||
(memo-wrap-render-fn f (:render-data props)))
|
||||
props)
|
||||
:data
|
||||
to-array))
|
||||
(update :data to-array)
|
||||
(assoc :index index)))
|
||||
|
||||
(defn section-list
|
||||
"A wrapper for SectionList.
|
||||
|
@ -42,6 +42,8 @@
|
|||
props
|
||||
(when render-section-footer-fn
|
||||
{:renderSectionFooter (wrap-render-section-header-fn render-section-footer-fn)})
|
||||
{:sections (clj->js (map wrap-per-section-render-fn sections))
|
||||
{:sections (->> sections
|
||||
(map-indexed wrap-per-section-render-fn)
|
||||
(clj->js))
|
||||
:renderSectionHeader (wrap-render-section-header-fn render-section-header-fn)
|
||||
:style style})])
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
(ns status-im.common.contact-list.style)
|
||||
|
||||
(defn contacts-section-header
|
||||
[first-item?]
|
||||
{:padding-top (if first-item? 0 8)})
|
|
@ -1,7 +1,10 @@
|
|||
(ns status-im.common.contact-list.view
|
||||
(:require
|
||||
[quo.core :as quo]))
|
||||
[quo.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[status-im.common.contact-list.style :as style]))
|
||||
|
||||
(defn contacts-section-header
|
||||
[{:keys [title]}]
|
||||
[quo/divider-label title])
|
||||
[{:keys [title index]}]
|
||||
[rn/view (style/contacts-section-header (= index 0))
|
||||
[quo/divider-label title]])
|
||||
|
|
|
@ -6,11 +6,15 @@
|
|||
|
||||
(defn contact-list-item
|
||||
[{:keys [on-press on-long-press accessory]}
|
||||
{:keys [primary-name secondary-name public-key compressed-key ens-verified added?]}]
|
||||
{:keys [primary-name secondary-name public-key compressed-key ens-verified added?]}
|
||||
theme]
|
||||
(let [photo-path (rf/sub [:chats/photo-path public-key])
|
||||
online? (rf/sub [:visibility-status-updates/online? public-key])]
|
||||
[quo/user-list
|
||||
{:short-chat-key (address/get-shortened-compressed-key (or compressed-key public-key))
|
||||
online? (rf/sub [:visibility-status-updates/online? public-key])
|
||||
customization-color (rf/sub [:profile/customization-color])]
|
||||
[quo/user
|
||||
{:customization-color customization-color
|
||||
:theme theme
|
||||
:short-chat-key (address/get-shortened-compressed-key (or compressed-key public-key))
|
||||
:primary-name primary-name
|
||||
:secondary-name secondary-name
|
||||
:photo-path photo-path
|
||||
|
|
|
@ -38,6 +38,9 @@
|
|||
:no-contacts
|
||||
{:light (js/require "../resources/images/ui2/no-contacts-light.png")
|
||||
:dark (js/require "../resources/images/ui2/no-contacts-dark.png")}
|
||||
:no-contacts-to-chat
|
||||
{:light (js/require "../resources/images/ui2/no-contacts-to-chat-light.png")
|
||||
:dark (js/require "../resources/images/ui2/no-contacts-to-chat-dark.png")}
|
||||
:keycard-chip
|
||||
{:light (js/require "../resources/images/ui2/keycard-chip-light.png")
|
||||
:dark (js/require "../resources/images/ui2/keycard-chip-dark.png")}
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
{:icon :i/add-user
|
||||
:accessibility-label :add-a-contact
|
||||
:label (i18n/label :t/add-a-contact)
|
||||
:sub-label (i18n/label :t/enter-a-chat-key)
|
||||
:sub-label (i18n/label :t/enter-chat-key)
|
||||
:add-divider? true
|
||||
:on-press #(debounce/dispatch-and-chill
|
||||
[:open-modal :new-contact]
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
[]
|
||||
{:size :heading-1
|
||||
:weight :semi-bold
|
||||
:style {:margin-top 32
|
||||
:style {:margin-top 28
|
||||
:margin-bottom 6
|
||||
:color (colors/theme-colors colors/neutral-100 colors/white)}})
|
||||
|
||||
|
|
|
@ -16,9 +16,10 @@
|
|||
|
||||
(defn- no-contacts-view
|
||||
[{:keys [theme]}]
|
||||
(let [customization-color (rf/sub [:profile/customization-color])]
|
||||
[rn/view
|
||||
{:style (style/no-contacts)}
|
||||
[rn/image {:source (resources/get-themed-image :no-contacts theme)}]
|
||||
[rn/image {:source (resources/get-themed-image :no-contacts-to-chat theme)}]
|
||||
[quo/text
|
||||
{:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
|
@ -27,22 +28,26 @@
|
|||
(i18n/label :t/you-have-no-contacts)]
|
||||
[quo/text
|
||||
{:weight :regular
|
||||
:size :label}
|
||||
:size :paragraph-2}
|
||||
(i18n/label :t/dont-yell-at-me)]
|
||||
[quo/button
|
||||
{:type :primary
|
||||
{:customization-color customization-color
|
||||
:theme theme
|
||||
:type :primary
|
||||
:size 32
|
||||
:container-style {:margin-top 20
|
||||
:margin-bottom 12}
|
||||
:on-press #(rf/dispatch [:invite.events/share-link])}
|
||||
(i18n/label :t/invite-friends)]
|
||||
[quo/button
|
||||
{:type :grey
|
||||
{:customization-color customization-color
|
||||
:theme theme
|
||||
:type :grey
|
||||
:size 32
|
||||
:on-press #(do
|
||||
(rf/dispatch [:navigate-back])
|
||||
(rf/dispatch [:open-modal :new-contact]))}
|
||||
(i18n/label :t/add-a-contact)]])
|
||||
(i18n/label :t/add-a-contact)]]))
|
||||
|
||||
(defn contact-item-render
|
||||
[_]
|
||||
|
|
|
@ -73,7 +73,7 @@
|
|||
:shared-value scroll-shared-value})}])))
|
||||
|
||||
(defn contact-item-render
|
||||
[{:keys [public-key] :as item}]
|
||||
[{:keys [public-key] :as item} theme]
|
||||
(let [current-pk (rf/sub [:multiaccount/public-key])
|
||||
show-profile-actions #(rf/dispatch [:show-bottom-sheet
|
||||
{:content (fn [] [actions/contact-actions item])}])]
|
||||
|
@ -83,7 +83,8 @@
|
|||
:on-long-press show-profile-actions
|
||||
:accessory {:type :options
|
||||
:on-press show-profile-actions}})
|
||||
item]))
|
||||
item
|
||||
theme]))
|
||||
|
||||
(defn contacts
|
||||
[{:keys [theme pending-contact-requests set-scroll-ref scroll-shared-value]}]
|
||||
|
@ -105,7 +106,8 @@
|
|||
:sections items
|
||||
:sticky-section-headers-enabled false
|
||||
:render-section-header-fn contact-list/contacts-section-header
|
||||
:render-fn contact-item-render
|
||||
:render-fn (fn [data]
|
||||
(contact-item-render data theme))
|
||||
:scroll-event-throttle 8
|
||||
:on-scroll #(common.banner/set-scroll-shared-value
|
||||
{:scroll-input (oops/oget % "nativeEvent.contentOffset.y")
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
{:community (assoc item :cover cover)
|
||||
:width width
|
||||
:on-press #(rf/dispatch [:communities/navigate-to-community-overview (:id item)])}]
|
||||
[quo/community-list-item
|
||||
[quo/community-list
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:dismiss-keyboard])
|
||||
(rf/dispatch [:communities/navigate-to-community-overview (:id item)]))
|
||||
|
@ -144,7 +144,7 @@
|
|||
{:community (assoc community :cover cover)
|
||||
:on-press #(rf/dispatch [:communities/navigate-to-community-overview (:id community)])}]
|
||||
|
||||
[quo/community-list-item
|
||||
[quo/community-list
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:dismiss-keyboard])
|
||||
(rf/dispatch [:communities/navigate-to-community-overview
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
(ns status-im.contexts.preview.quo.list-items.community-list
|
||||
(ns status-im.contexts.preview.quo.community.list-item
|
||||
(:require
|
||||
[quo.core :as quo]
|
||||
[quo.theme :as quo.theme]
|
||||
|
@ -95,7 +95,7 @@
|
|||
:unread-count 5})]
|
||||
(fn []
|
||||
[preview/preview-container {:state state :descriptor (descriptors @state)}
|
||||
[quo/community-list-item
|
||||
[quo/community-list
|
||||
(merge @state
|
||||
{:container-style {:width 335}
|
||||
:logo (resources/get-mock-image :status-logo)
|
|
@ -41,4 +41,4 @@
|
|||
:descriptor descriptor
|
||||
:component-container-style {:padding-vertical 30
|
||||
:padding-horizontal 15}}
|
||||
[quo/user-list @state]])))
|
||||
[quo/user @state]])))
|
||||
|
|
|
@ -41,6 +41,7 @@
|
|||
:as community-membership-list-view]
|
||||
[status-im.contexts.preview.quo.community.community-stat :as community-stat]
|
||||
[status-im.contexts.preview.quo.community.discover-card :as discover-card]
|
||||
[status-im.contexts.preview.quo.community.list-item :as community-list-item]
|
||||
[status-im.contexts.preview.quo.community.token-gating :as token-gating]
|
||||
[status-im.contexts.preview.quo.counter.counter :as counter]
|
||||
[status-im.contexts.preview.quo.counter.step :as step]
|
||||
|
@ -92,8 +93,6 @@
|
|||
account-list-card]
|
||||
[status-im.contexts.preview.quo.list-items.address :as address]
|
||||
[status-im.contexts.preview.quo.list-items.channel :as channel]
|
||||
[status-im.contexts.preview.quo.list-items.community-list :as
|
||||
community-list]
|
||||
[status-im.contexts.preview.quo.list-items.dapp :as dapp]
|
||||
[status-im.contexts.preview.quo.list-items.preview-lists :as preview-lists]
|
||||
[status-im.contexts.preview.quo.list-items.quiz-item :as quiz-item]
|
||||
|
@ -349,7 +348,7 @@
|
|||
:component channel/view}
|
||||
{:name :community-list
|
||||
:options {:insets {:top? true}}
|
||||
:component community-list/view}
|
||||
:component community-list-item/view}
|
||||
{:name :dapp
|
||||
:component dapp/preview}
|
||||
{:name :preview-lists
|
||||
|
|
|
@ -1622,7 +1622,7 @@
|
|||
"not-enough-snt": "Not enough SNT",
|
||||
"add-new-contact": "Add new contact",
|
||||
"add-a-contact": "Add a contact",
|
||||
"enter-a-chat-key": "Add a chatkey or scan a QR",
|
||||
"enter-chat-key": "Enter chat key or scan a QR",
|
||||
"you-dont-have-contacts": "You don’t have any contacts yet.",
|
||||
"set-max": "Set max",
|
||||
"continue-anyway": "Continue anyway",
|
||||
|
|
Loading…
Reference in New Issue