status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: author component 

Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater 2022-11-08 20:56:51 -03:00 committed by Brian Sztamfater
parent d18c3ad102
commit 4a87122336
No known key found for this signature in database
GPG Key ID: 59EB921E0706B48F
5 changed files with 188 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/quo2/components/messages/author/style.cljs Normal file
View File

@ -0,0 +1,39 @@
(ns quo2.components.messages.author.style
(:require [quo2.foundations.colors :as colors]))
(def container
{:flex 1
:flex-wrap :wrap
:height 18
:flex-direction :row
:align-items :center})
(defn ens-text []
{:color (colors/theme-colors colors/neutral-100 colors/white)})
(defn nickname-text []
{:color (colors/theme-colors colors/neutral-100 colors/white)})
(def middle-dot-nickname
{:color colors/neutral-50
:margin-horizontal 4})
(def chat-key-text
{:color colors/neutral-50
:margin-left 8})
(def middle-dot-chat-key
{:color colors/neutral-50
:margin-left 4})
(defn profile-name-text [nickname?]
{:color (if nickname?
(colors/theme-colors colors/neutral-60 colors/neutral-40)
(colors/theme-colors colors/neutral-100 colors/white))})
(def icon-container
{:margin-left 4})
(defn time-text [ens?]
{:color colors/neutral-50
:margin-left (if ens? 8 4)})

66
src/quo2/components/messages/author/view.cljs Normal file
View File

@ -0,0 +1,66 @@
(ns quo2.components.messages.author.view
(:require
[quo2.components.messages.author.style :as style]
[react-native.core :as rn]
[quo2.components.markdown.text :as text]
[quo2.components.icon :as icons]
[status-im.utils.utils :as utils]
[clojure.string :as string]))
(def middle-dot "·")
(defn author [{:keys [profile-name nickname chat-key ens-name time-str contact? verified? untrustworthy?]}]
[:f>
(fn []
(let [ens? (-> ens-name string/blank? not)
nickname? (-> nickname string/blank? not)]
[rn/view {:style style/container}
(if ens?
[text/text {:weight :semi-bold
:size :paragraph-2
:style (style/ens-text)}
ens-name]
[:<>
(when nickname?
[:<>
[text/text {:weight :semi-bold
:size :paragraph-2
:style (style/nickname-text)}
nickname]
[text/text {:size :paragraph-2
:style style/middle-dot-nickname}
middle-dot]])
[text/text {:weight (if nickname? :medium :semi-bold)
:size :paragraph-2
:style (style/profile-name-text nickname?)}
profile-name]])
(when contact?
[icons/icon :main-icons2/contact
{:size 12
:no-color true
:container-style style/icon-container}])
(cond
verified?
[icons/icon :main-icons2/verified
{:size 12
:no-color true
:container-style style/icon-container}]
untrustworthy?
[icons/icon :main-icons2/untrustworthy
{:size 12
:no-color true
:container-style style/icon-container}])
(when-not ens?
[text/text {:monospace true
:size :paragraph-2
:style style/chat-key-text}
(utils/get-shortened-address chat-key)])
(when-not ens?
[text/text {:monospace true
:size :paragraph-2
:style style/middle-dot-chat-key}
middle-dot])
[text/text {:monospace true
:size :paragraph-2
:style (style/time-text ens?)}
time-str]]))])

6
src/status_im2/contexts/quo_preview/main.cljs
View File

@ -28,6 +28,7 @@
[status-im2.contexts.quo-preview.list-items.preview-lists :as preview-lists]
[status-im2.contexts.quo-preview.list-items.channel :as channel]
[status-im2.contexts.quo-preview.markdown.text :as text]
[status-im2.contexts.quo-preview.messages.author :as messages-author]
[status-im2.contexts.quo-preview.messages.gap :as messages-gap]
[status-im2.contexts.quo-preview.messages.system-message :as system-message]
[status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
@ -129,7 +130,10 @@
:component messages-gap/preview-messages-gap}
{:name :system-messages
:insets {:top false}
:component system-message/preview-system-message}]
:component system-message/preview-system-message}
{:name :author
:insets {:top false}
:component messages-author/preview-author}]
:navigation [{:name :bottom-nav-tab
:insets {:top false}
:component bottom-nav-tab/preview-bottom-nav-tab}

62
src/status_im2/contexts/quo_preview/messages/author.cljs Normal file
View File

@ -0,0 +1,62 @@
(ns status-im2.contexts.quo-preview.messages.author
(:require [react-native.core :as rn]
[quo2.foundations.colors :as colors]
[status-im2.contexts.quo-preview.preview :as preview]
[quo2.components.messages.author.view :as quo2]
[reagent.core :as reagent]))
(def descriptor [{:label "Profile name"
:key :profile-name
:type :text
:limit 24}
{:label "Nickname"
:key :nickname
:type :text}
{:label "Chat key"
:key :chat-key
:type :text}
{:label "ENS name"
:key :ens-name
:type :text
:suffix ".eth"}
{:label "Time"
:key :time-str
:type :text
:limit 5}
{:label "Is contact?"
:key :contact?
:type :boolean}
{:label "Is verified?"
:key :verified?
:type :boolean}
{:label "Is untrustworthy?"
:key :untrustworthy?
:type :boolean}])
(defn cool-preview []
(let [state (reagent/atom {:profile-name "Alisher Yakupov"
:nickname ""
:chat-key "zQ3ssgRy5TtB47MMiMKMKaGyaawkCgMqqbrnAUYrZJ1sgt5N"
:time-str "09:30"
:ens-name ""
:contact? false
:verified? false
:untrustworthy? false})]
(fn []
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[preview/customizer state descriptor]]
[rn/view {:padding-vertical 60
:padding--horizontal 15
:flex-direction :row
:justify-content :center}
[quo2/author @state]]]])))
(defn preview-author []
[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}]])

26
src/status_im2/contexts/quo_preview/preview.cljs
View File

@ -1,7 +1,8 @@
(ns status-im2.contexts.quo-preview.preview
(:require [reagent.core :as reagent]
[react-native.core :as rn]
[quo2.foundations.colors :as colors])
[quo2.foundations.colors :as colors]
[clojure.string :as string])
(:require-macros status-im2.contexts.quo-preview.preview))
(def container {:flex-direction :row
@ -83,19 +84,24 @@
"False"]]]]))
(defn customizer-text
[{:keys [label key state]}]
[{:keys [label key state limit suffix]}]
(let [state* (reagent/cursor state [key])]
[rn/view {:style container}
[label-view state label]
[rn/view {:style {:flex 0.6}}
[rn/text-input {:value @state*
:show-cancel false
:style {:border-radius 4
:border-width 1
:border-color (colors/theme-colors colors/neutral-100 colors/white)}
:on-change-text #(do
(reset! state* %)
(reagent/flush))}]]]))
[rn/text-input (merge
{:value @state*
:show-cancel false
:style {:border-radius 4
:border-width 1
:border-color (colors/theme-colors colors/neutral-100 colors/white)}
:on-change-text #(do
(reset! state* (if (and suffix (> (count %) (count @state*)))
(str (string/replace % suffix "") suffix)
%))
(reagent/flush))}
(when limit
{:max-length limit}))]]]))
(defn value-for-key
[id v]