Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ibrkhalil
|
09d1293010 | ||
|
ibrkhalil
|
8f7537f0e7 |
@@ -0,0 +1,40 @@
|
||||
(ns quo2.components.list-items.user-list.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn user-list-wrapper [can-be-invited? background-type]
|
||||
(let [height (if can-be-invited? 56 80)]
|
||||
{:width 359
|
||||
:border-radius 12
|
||||
:padding-vertical 8
|
||||
:padding-horizontal 12
|
||||
:height height
|
||||
:background-color (case background-type
|
||||
:5 colors/primary-50-opa-5
|
||||
:10 colors/primary-50-opa-10
|
||||
:transparent :transparent)
|
||||
:flex-direction :column
|
||||
:justify-content :center}))
|
||||
|
||||
(def ml-8 {:margin-left 8})
|
||||
|
||||
(def row-centered {:flex-direction :row
|
||||
:align-items :center})
|
||||
|
||||
(def icon-container-styles {:width 32
|
||||
:height 32
|
||||
:border-radius 10
|
||||
:border-width 1
|
||||
:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10)
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(def container (assoc row-centered :justify-content :space-between))
|
||||
|
||||
(def cant-be-invited {:flex-direction :row
|
||||
:margin-top 8
|
||||
:margin-left 40})
|
||||
|
||||
(def icon-container {:margin-right 2
|
||||
:margin-top 2})
|
||||
|
||||
(def cant-be-invited-text-style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})
|
||||
@@ -0,0 +1,67 @@
|
||||
(ns quo2.components.list-items.user-list.view
|
||||
(:require [quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.list-items.user-list.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.selectors.selectors :as selectors]
|
||||
[status-im.multiaccounts.core :as multiaccounts]
|
||||
[status-im.utils.utils :as utils]))
|
||||
|
||||
(def ^:private icon-types {:options :i/options
|
||||
:close :i/close})
|
||||
|
||||
(defn- cant-be-invited-msg []
|
||||
[rn/view {:style style/cant-be-invited
|
||||
:accessibility-label "user can't be invite"}
|
||||
[icons/icon :i/info {:size 12
|
||||
:color colors/neutral-40
|
||||
:container-style style/icon-container}]
|
||||
[text/text {:weight :regular
|
||||
:size :label
|
||||
:style style/cant-be-invited-text-style}
|
||||
"Can’t be invited due to their privacy settings"]])
|
||||
|
||||
(defn- right-section [{:keys [id button-type on-press checked?]}]
|
||||
(if (= button-type :checkbox)
|
||||
[selectors/checkbox {:default-checked? checked?}]
|
||||
[rn/touchable-opacity
|
||||
{:on-press on-press
|
||||
:accessibility-label (str (or id "user-list") "-" (if (= button-type :options)
|
||||
"options"
|
||||
"close"))}
|
||||
[rn/view {:style (when (= button-type :close)
|
||||
style/icon-container-styles)}
|
||||
[icons/icon (button-type icon-types) {:size 20
|
||||
:color (colors/theme-colors colors/neutral-100 colors/white)}]]]))
|
||||
|
||||
(defn- user-info [{:keys [id contact on-press checked? button-type]}]
|
||||
[rn/view {:style style/container}
|
||||
[rn/view style/row-centered
|
||||
[user-avatar/user-avatar {:size :small
|
||||
:ring? true
|
||||
:online? true
|
||||
:profile-picture (multiaccounts/displayed-photo contact)
|
||||
:status-indicator? true}]
|
||||
[rn/view {:style style/ml-8}
|
||||
[text/text {:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}} (-> contact
|
||||
(multiaccounts/contact-two-names false))]
|
||||
[text/text {:weight :regular
|
||||
:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}} (utils/get-shortened-address (:public-key contact))]]]
|
||||
[right-section {:id id
|
||||
:button-type button-type
|
||||
:on-press on-press
|
||||
:checked? checked?}]])
|
||||
|
||||
(defn user-list [{:keys [id contact on-press background-type checked? button-type can-be-invited?]}]
|
||||
[rn/view {:style (style/user-list-wrapper can-be-invited? background-type)}
|
||||
[user-info {:id id
|
||||
:on-press on-press
|
||||
:checked? checked?
|
||||
:button-type button-type
|
||||
:contact contact}]
|
||||
(when-not can-be-invited? [cant-be-invited-msg])])
|
||||
@@ -0,0 +1,59 @@
|
||||
(ns status-im2.contexts.quo-preview.list-items.user-list
|
||||
(:require [quo2.components.list-items.user-list.view :as quo2-user-list]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]
|
||||
[status-im.multiaccounts.core-test :as test-data]))
|
||||
|
||||
(def ^:private descriptor [{:label "Can the user be invited?"
|
||||
:key :can-be-invited?
|
||||
:type :boolean}
|
||||
{:label "Icon:"
|
||||
:key :button-type
|
||||
:type :select
|
||||
:options [{:key :close
|
||||
:value "Close"}
|
||||
{:key :options
|
||||
:value "Options"}
|
||||
{:key :checkbox
|
||||
:value "Checkbox"}]}
|
||||
{:label "Icon:"
|
||||
:key :background-type
|
||||
:type :select
|
||||
:options [{:key :5
|
||||
:value "5%"}
|
||||
{:key :10
|
||||
:value "10%"}
|
||||
{:key :transparent
|
||||
:value "Transparent"}]}])
|
||||
|
||||
(def ^:private image-data {:images {:thumbnail {:uri "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII="}}})
|
||||
|
||||
(defn- cool-preview []
|
||||
(let [state (reagent/atom {:id :user-list
|
||||
:can-be-invited? false
|
||||
:on-press identity
|
||||
:checked? true
|
||||
:button-type :close
|
||||
:background-type :10
|
||||
:contact (merge image-data test-data/contact)
|
||||
:username "Alisher Yakupov"})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding-bottom 16
|
||||
:padding-right 8
|
||||
:padding-left 8
|
||||
:padding-top 16}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[quo2-user-list/user-list @state]]])))
|
||||
|
||||
(defn preview-channel []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
@@ -53,6 +53,7 @@
|
||||
[status-im2.contexts.quo-preview.wallet.network-amount :as network-amount]
|
||||
[status-im2.contexts.quo-preview.navigation.page-nav :as page-nav]
|
||||
[status-im2.contexts.quo-preview.avatars.account-avatar :as account-avatar]
|
||||
[status-im2.contexts.quo-preview.list-items.user-list :as user-list]
|
||||
[re-frame.core :as re-frame]))
|
||||
|
||||
(def screens-categories
|
||||
@@ -121,7 +122,10 @@
|
||||
:component channel/preview-channel}
|
||||
{:name :preview-lists
|
||||
:insets {:top false}
|
||||
:component preview-lists/preview-preview-lists}]
|
||||
:component preview-lists/preview-preview-lists}
|
||||
{:name :user-list
|
||||
:insets {:top false}
|
||||
:component user-list/preview-channel}]
|
||||
:markdown [{:name :texts
|
||||
:insets {:top false}
|
||||
:component text/preview-text}]
|
||||
|
||||
Reference in New Issue
Block a user