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

Fix: Messages/Author component text overflow (#17414)

This commit is contained in:
Ajay Sivan 2023-10-19 00:48:42 -07:00 committed by GitHub
parent 9d6ed9305b
commit e71c167e8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 71 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo/components/inputs/input/view.cljs
View File

@ -77,7 +77,7 @@
(when on-change-text (on-change-text new-text)) (when on-change-text (on-change-text new-text))
(let [amount-chars (count new-text)] (let [amount-chars (count new-text)]
(reset! char-count amount-chars) (reset! char-count amount-chars)
(when (>= amount-chars char-limit) (when (and (>= amount-chars char-limit) on-char-limit-reach)
(on-char-limit-reach amount-chars))))] (on-char-limit-reach amount-chars))))]
(fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button (fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button
label char-limit multiline? clearable? on-focus on-blur container-style] label char-limit multiline? clearable? on-focus on-blur container-style]

7
src/quo/components/list_items/user_list.cljs
View File

@ -20,8 +20,7 @@
(defn action-icon (defn action-icon
[{:keys [type on-press on-check disabled? checked?]}] [{:keys [type on-press on-check disabled? checked?]}]
[rn/touchable-opacity [rn/touchable-opacity
{:on-press (when on-press on-press) {:on-press (when on-press on-press)}
:style {:position :absolute :right 20}}
(case type (case type
:options :options
[icons/icon :i/options [icons/icon :i/options
@ -50,8 +49,8 @@
:profile-picture photo-path :profile-picture photo-path
:online? online? :online? online?
:size :small}] :size :small}]
[rn/view {:style {:margin-left 8}} [rn/view {:style {:margin-horizontal 8 :flex 1}}
[author/author [author/view
{:primary-name primary-name {:primary-name primary-name
:secondary-name secondary-name :secondary-name secondary-name
:contact? contact? :contact? contact?

34
src/quo/components/messages/author/style.cljs
View File

@ -3,31 +3,45 @@
[quo.foundations.colors :as colors])) [quo.foundations.colors :as colors]))
(def container (def container
{:flex-wrap :wrap {:flex-wrap :nowrap
:flex-direction :row :flex-direction :row
:align-items :center}) :align-items :center})
(defn middle-dot-nickname (defn middle-dot-nickname
[] [theme]
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50) {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:margin-horizontal 4}) :margin-horizontal 4})
(defn chat-key-text (defn chat-key-text
[] [theme]
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50) {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:margin-left 8 :margin-left 8
:padding-top 1}) :padding-top 1})
(defn middle-dot-chat-key (defn middle-dot-chat-key
[] [theme]
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50) {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:margin-left 4}) :margin-left 4})
(defn primary-name
[muted? theme]
{:color (if muted?
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white theme))
:flex-shrink 1})
(defn secondary-name
[theme]
{:padding-top 1
:flex-shrink 999999
:min-width 40
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
(def icon-container (def icon-container
{:margin-left 4}) {:margin-left 4})
(defn time-text (defn time-text
[verified?] [theme]
{:color (colors/theme-colors colors/neutral-40 colors/neutral-50) {:color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
:padding-top 1 :padding-top 1
:margin-left (if verified? 8 4)}) :margin-left 8})

23
src/quo/components/messages/author/view.cljs
View File

@ -4,14 +4,14 @@
[quo.components.icon :as icons] [quo.components.icon :as icons]
[quo.components.markdown.text :as text] [quo.components.markdown.text :as text]
[quo.components.messages.author.style :as style] [quo.components.messages.author.style :as style]
[quo.foundations.colors :as colors] [quo.theme :as quo.theme]
[react-native.core :as rn])) [react-native.core :as rn]))
(def middle-dot "·") (def middle-dot "·")
(defn author (defn- internal-view
[{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy? [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
muted? size] muted? size theme]
:or {size 13}}] :or {size 13}}]
[rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})} [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
[text/text [text/text
@ -19,24 +19,21 @@
:size (if (= size 15) :paragraph-1 :paragraph-2) :size (if (= size 15) :paragraph-1 :paragraph-2)
:number-of-lines 1 :number-of-lines 1
:accessibility-label :author-primary-name :accessibility-label :author-primary-name
:style {:color (if muted? :style (style/primary-name muted? theme)}
colors/neutral-50
(colors/theme-colors colors/neutral-100 colors/white))}}
primary-name] primary-name]
(when (not (string/blank? secondary-name)) (when (not (string/blank? secondary-name))
[:<> [:<>
[text/text [text/text
{:size :label {:size :label
:number-of-lines 1 :number-of-lines 1
:style (style/middle-dot-nickname)} :style (style/middle-dot-nickname theme)}
middle-dot] middle-dot]
[text/text [text/text
{:weight :medium {:weight :medium
:size :label :size :label
:number-of-lines 1 :number-of-lines 1
:accessibility-label :author-secondary-name :accessibility-label :author-secondary-name
:style {:padding-top 1 :style (style/secondary-name theme)}
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
secondary-name]]) secondary-name]])
(when contact? (when contact?
[icons/icon :main-icons2/contact [icons/icon :main-icons2/contact
@ -59,14 +56,14 @@
{:monospace true {:monospace true
:size :label :size :label
:number-of-lines 1 :number-of-lines 1
:style (style/chat-key-text)} :style (style/chat-key-text theme)}
short-chat-key]) short-chat-key])
(when (and (not verified?) time-str short-chat-key) (when (and (not verified?) time-str short-chat-key)
[text/text [text/text
{:monospace true {:monospace true
:size :label :size :label
:number-of-lines 1 :number-of-lines 1
:style (style/middle-dot-chat-key)} :style (style/middle-dot-chat-key theme)}
middle-dot]) middle-dot])
(when time-str (when time-str
[text/text [text/text
@ -74,5 +71,7 @@
:size :label :size :label
:accessibility-label :message-timestamp :accessibility-label :message-timestamp
:number-of-lines 1 :number-of-lines 1
:style (style/time-text verified?)} :style (style/time-text theme)}
time-str])]) time-str])])
(def view (quo.theme/with-theme internal-view))

2
src/quo/core.cljs
View File

@ -294,6 +294,7 @@
(def text quo.components.markdown.text/text) (def text quo.components.markdown.text/text)
;;;; Messages ;;;; Messages
(def author quo.components.messages.author.view/view)
(def gap quo.components.messages.gap/gap) (def gap quo.components.messages.gap/gap)
(def system-message quo.components.messages.system-message.view/system-message) (def system-message quo.components.messages.system-message.view/system-message)
@ -319,7 +320,6 @@
(def soundtrack quo.components.record-audio.soundtrack.view/f-soundtrack) (def soundtrack quo.components.record-audio.soundtrack.view/f-soundtrack)
;;;; Selectors ;;;; Selectors
(def author quo.components.messages.author.view/author)
(def disclaimer quo.components.selectors.disclaimer.view/view) (def disclaimer quo.components.selectors.disclaimer.view/view)
(def filter quo.components.selectors.filter.view/view) (def filter quo.components.selectors.filter.view/view)
(def reactions-selector quo.components.selectors.reactions-selector.view/view) (def reactions-selector quo.components.selectors.reactions-selector.view/view)

4
src/status_im/ui/screens/profile/contact/views.cljs
View File

@ -105,7 +105,7 @@
(save-nickname public-key @entered-nickname)) (save-nickname public-key @entered-nickname))
:auto-capitalize :none :auto-capitalize :none
:auto-focus false :auto-focus false
:max-length 32 :max-length constants/profile-name-max-length
:accessibility-label :nickname-input :accessibility-label :nickname-input
:default-value nickname :default-value nickname
:placeholder (i18n/label :t/nickname) :placeholder (i18n/label :t/nickname)
@ -132,7 +132,7 @@
{:style {:align-self :flex-end {:style {:align-self :flex-end
:margin-top 16 :margin-top 16
:color colors/gray}} :color colors/gray}}
(str (count @entered-nickname) " / 32")]] (str (count @entered-nickname) " / " constants/profile-name-max-length)]]
[toolbar/toolbar [toolbar/toolbar
{:show-border? true {:show-border? true
:center :center

19
src/status_im2/contexts/chat/messages/list/view.cljs
View File

@ -83,8 +83,8 @@
[{:keys [ens-verified added?]} theme] [{:keys [ens-verified added?]} theme]
(when (or ens-verified added?) (when (or ens-verified added?)
[rn/view [rn/view
{:style {:padding-left 10 {:style {:margin-left 4
:margin-top 2}} :margin-top 8}}
(if ens-verified (if ens-verified
[quo/icon :i/verified [quo/icon :i/verified
{:no-color true {:no-color true
@ -225,12 +225,15 @@
:display-name display-name :display-name display-name
:online? online? :online? online?
:profile-picture photo-path}])] :profile-picture photo-path}])]
[quo/text [rn/view
{:weight :semi-bold {:style {:flex-direction :row
:size :heading-1 :margin-top (if group-chat 54 12)}}
:style {:margin-top (if group-chat 54 12)} [quo/text
:number-of-lines 1} {:weight :semi-bold
display-name :size :heading-1
:style {:flex-shrink 1}
:number-of-lines 1}
display-name]
[contact-icon contact theme]] [contact-icon contact theme]]
(when bio (when bio
[quo/text {:style style/bio} [quo/text {:style style/bio}

5
src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs
View File

@ -10,10 +10,9 @@
:border-radius 20 :border-radius 20
:align-items :center :align-items :center
:align-self :flex-start :align-self :flex-start
:padding 4 :margin-top 4
:margin-top 8
:margin-left -4 :margin-left -4
:margin-bottom 16}) :margin-bottom 20})
(def buttons-container (def buttons-container
{:flex-direction :row {:flex-direction :row

24
src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs
View File

@ -7,6 +7,7 @@
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.constants :as constants]
[status-im2.contexts.contacts.drawers.nickname-drawer.style :as style] [status-im2.contexts.contacts.drawers.nickname-drawer.style :as style]
[utils.i18n :as i18n] [utils.i18n :as i18n]
[utils.re-frame :as rf])) [utils.re-frame :as rf]))
@ -38,23 +39,22 @@
:accessibility-label accessibility-label} :accessibility-label accessibility-label}
[quo/text [quo/text
{:weight :semi-bold {:weight :semi-bold
:size :heading-1} title] :size :heading-2} title]
[rn/view {:style (style/context-container)} [rn/view {:style (style/context-container)}
[quo/user-avatar [quo/context-tag
{:full-name primary-name {:type :default
:profile-picture photo-path :blur? false
:size :xxs :profile-picture photo-path
:status-indicator? false}] :full-name primary-name
[quo/text :size 24}]]
{:weight :medium
:size :paragraph-2
:style {:margin-left 4}} primary-name]]
[quo/input [quo/input
{:type :text {:type :text
:blur? true :blur? false
:placeholder (i18n/label :t/type-nickname) :placeholder (i18n/label :t/type-nickname)
:auto-focus true :auto-focus true
:max-length 32 :max-length constants/profile-name-max-length
:label (i18n/label :t/nickname)
:char-limit constants/profile-name-max-length
:on-change-text (fn [nickname] :on-change-text (fn [nickname]
(reset! entered-nickname nickname)) (reset! entered-nickname nickname))
:on-submit-editing #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}] :on-submit-editing #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}]

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

@ -339,12 +339,12 @@
:component text/view} :component text/view}
{:name :markdown-list {:name :markdown-list
:component markdown-list/view}] :component markdown-list/view}]
:messages [{:name :gap :messages [{:name :author
:component messages-author/view}
{:name :gap
:component messages-gap/view} :component messages-gap/view}
{:name :system-messages {:name :system-messages
:component system-message/view} :component system-message/view}]
{:name :author
:component messages-author/view}]
:navigation [{:name :bottom-nav-tab :navigation [{:name :bottom-nav-tab
:component bottom-nav-tab/view} :component bottom-nav-tab/view}
{:name :top-nav {:name :top-nav