[15504, 15408] Nickname flow (#15557)

This commit is contained in:
Ibrahem Khalil 2023-04-12 11:37:50 +02:00 committed by GitHub
parent d4bef47804
commit 88b9aa14e8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 161 additions and 10 deletions

View File

@ -3,7 +3,10 @@
[quo2.core :as quo]
[status-im2.common.confirmation-drawer.view :as confirmation-drawer]
[status-im2.constants :as constants]
[utils.re-frame :as rf]))
[utils.re-frame :as rf]
[status-im2.contexts.contacts.drawers.nickname-drawer.view :as nickname-drawer]
[clojure.string :as string]
[quo2.foundations.colors :as colors]))
(defn- entry
[{:keys [icon label on-press danger? sub-label chevron? add-divider? accessibility-label]}]
@ -36,8 +39,15 @@
(hide-sheet-and-dispatch [:chat/mark-all-as-read chat-id]))
(defn edit-nickname-action
[chat-id]
(hide-sheet-and-dispatch [:chat.ui/edit-nickname chat-id]))
[contact]
(hide-sheet-and-dispatch
[:show-bottom-sheet
{:content (fn []
[nickname-drawer/nickname-drawer
{:title (i18n/label :t/add-nickname-title)
:description (i18n/label :t/nickname-visible-to-you)
:contact contact
:accessibility-label :edit-nickname}])}]))
(defn mute-chat-action
[chat-id]
@ -175,13 +185,35 @@
(defn edit-nickname-entry
[chat-id]
(entry {:icon :i/edit
:label (i18n/label :t/edit-nickname)
:on-press #(edit-nickname-action chat-id)
:danger? false
:accessibility-label :edit-nickname
:sub-label nil
:chevron? false}))
(let [{:keys [nickname public-key secondary-name]
:as contact} (select-keys (rf/sub [:contacts/contact-by-address chat-id])
[:primary-name :nickname :public-key :secondary-name])
no-nickname? (string/blank? nickname)]
(entry
{:icon (if no-nickname?
:i/edit
:i/delete)
:label (i18n/label (if no-nickname?
:t/add-nickname-title
:t/remove-nickname))
:on-press (fn []
(if no-nickname?
(edit-nickname-action contact)
(do
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:toasts/upsert
{:id :remove-nickname
:icon :correct
:icon-color (colors/theme-colors colors/success-60
colors/success-50)
:text (i18n/label
:t/remove-nickname-toast
{:secondary-name secondary-name})}])
(rf/dispatch [:contacts/update-nickname public-key ""]))))
:danger? false
:accessibility-label :add-nickname
:sub-label nil
:chevron? false})))
;; TODO(OmarBasem): Requires design input.
(defn edit-name-image-entry

View File

@ -0,0 +1,32 @@
(ns status-im2.contexts.contacts.drawers.nickname-drawer.style
(:require [quo2.foundations.colors :as colors]))
(defn context-container
[]
{:flex-direction :row
:background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
:border-radius 20
:align-items :center
:align-self :flex-start
:padding 4
:margin-top 8
:margin-left -4
:margin-bottom 16})
(def buttons-container
{:flex-direction :row
:justify-content :space-between
:margin-top 20})
(def nickname-container
{:margin-horizontal 20})
(defn nickname-description
[]
{:margin-left 4
:color (colors/theme-colors colors/neutral-50 colors/neutral-40)})
(def nickname-description-container
{:flex-direction :row
:align-items :center
:margin-top 8})

View File

@ -0,0 +1,81 @@
(ns status-im2.contexts.contacts.drawers.nickname-drawer.view
(:require [clojure.string :as string]
[quo2.foundations.colors :as colors]
[quo2.components.icon :as icons]
[quo2.core :as quo]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.contacts.drawers.nickname-drawer.style :as style]
[utils.i18n :as i18n]
[utils.re-frame :as rf]))
(defn add-nickname-and-show-toast
[primary-name entered-nickname public-key]
(when-not (string/blank? entered-nickname)
(rf/dispatch [:hide-bottom-sheet])
(rf/dispatch [:toasts/upsert
{:id :add-nickname
:icon :i/correct
:icon-color (colors/theme-colors colors/success-60 colors/success-50)
:text (i18n/label
:t/set-nickname-toast
{:primary-name primary-name
:nickname (string/trim entered-nickname)})}])
(rf/dispatch [:contacts/update-nickname public-key (string/trim entered-nickname)])))
(defn nickname-drawer
[{:keys [contact]}]
(let [{:keys [primary-name nickname public-key]} contact
entered-nickname (reagent/atom (or nickname ""))
photo-path (when-not (empty? (:images contact))
(rf/sub [:chats/photo-path public-key]))]
(fn [{:keys [title description accessibility-label
close-button-text]}]
[rn/view
{:style style/nickname-container
:accessibility-label accessibility-label}
[quo/text
{:weight :semi-bold
:size :heading-1} title]
[rn/view {:style (style/context-container)}
[quo/user-avatar
{:full-name primary-name
:profile-picture photo-path
:size :xxs
:status-indicator false}]
[quo/text
{:weight :medium
:size :paragraph-2
:style {:margin-left 4}} primary-name]]
[quo/input
{:type :text
:blur? true
:placeholder (i18n/label :t/type-nickname)
:auto-focus true
:max-length 32
:on-change-text (fn [nickname]
(reset! entered-nickname nickname))
:on-submit-editing #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}]
[rn/view
{:style style/nickname-description-container}
[icons/icon :i/info
{:size 16
:color (colors/theme-colors colors/black colors/white)}]
[quo/text
{:weight :regular
:size :paragraph-2
:style (style/nickname-description)}
description]]
[rn/view {:style style/buttons-container}
[quo/button
{:type :grey
:style {:flex 0.48}
:on-press #(rf/dispatch [:hide-bottom-sheet])}
(or close-button-text (i18n/label :t/cancel))]
[quo/button
{:type :primary
:disabled (string/blank? @entered-nickname)
:style {:flex 0.48}
:on-press #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}
title]]])))

View File

@ -1580,6 +1580,12 @@
"nickname": "Nickname",
"add-nickname": "Add a nickname (optional)",
"edit-nickname": "Edit nickname",
"add-nickname-title": "Add nickname",
"nickname-visible-to-you": "Nickname will only be visible to you",
"type-nickname": "Type nickname",
"remove-nickname": "Remove nickname",
"set-nickname-toast": "You have renamed {{primary-name}} as {{nickname}}",
"remove-nickname-toast": "You have removed {{secondary-name}}'s nickname",
"nickname-description": "Nicknames help you identify others in Status.\nOnly you can see the nicknames youve added",
"accept": "Accept",
"group-invite": "Group invite",