From 4a87122336fc5d1dc63656310cb85c1b5c0ce1d9 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Tue, 8 Nov 2022 20:56:51 -0300 Subject: [PATCH] feat: author component Signed-off-by: Brian Sztamfater --- .../components/messages/author/style.cljs | 39 +++++++++++ src/quo2/components/messages/author/view.cljs | 66 +++++++++++++++++++ src/status_im2/contexts/quo_preview/main.cljs | 6 +- .../contexts/quo_preview/messages/author.cljs | 62 +++++++++++++++++ .../contexts/quo_preview/preview.cljs | 26 +++++--- 5 files changed, 188 insertions(+), 11 deletions(-) create mode 100644 src/quo2/components/messages/author/style.cljs create mode 100644 src/quo2/components/messages/author/view.cljs create mode 100644 src/status_im2/contexts/quo_preview/messages/author.cljs diff --git a/src/quo2/components/messages/author/style.cljs b/src/quo2/components/messages/author/style.cljs new file mode 100644 index 0000000000..31430d2812 --- /dev/null +++ b/src/quo2/components/messages/author/style.cljs @@ -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)}) \ No newline at end of file diff --git a/src/quo2/components/messages/author/view.cljs b/src/quo2/components/messages/author/view.cljs new file mode 100644 index 0000000000..bf276bb195 --- /dev/null +++ b/src/quo2/components/messages/author/view.cljs @@ -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]]))]) \ No newline at end of file diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index c3a0acae2a..abcd082d48 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -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} diff --git a/src/status_im2/contexts/quo_preview/messages/author.cljs b/src/status_im2/contexts/quo_preview/messages/author.cljs new file mode 100644 index 0000000000..e2d6a5bac0 --- /dev/null +++ b/src/status_im2/contexts/quo_preview/messages/author.cljs @@ -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}]]) diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index fc64ec4edd..0adffe9776 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -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]