status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-01-11 19:44:47 +00:00
Code Issues Projects Releases Wiki Activity

[#13690] Fix visibility status color (#13747)

Browse Source
This commit is contained in:
Ícaro Motta 2022-08-04 06:48:47 -03:00 committed by GitHub
parent 647dfc7e21
commit cdbd85f116
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 105 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/status_im/db.cljs
View File

@ -13,7 +13,7 @@
:sync-state :done :sync-state :done
:link-previews-whitelist [] :link-previews-whitelist []
:app-state "active" :app-state "active"
:wallet wallet.db/default-wallet :wallet wallet.db/default-wallet
:wallet/all-tokens {} :wallet/all-tokens {}
:peers-count 0 :peers-count 0
:node-info {} :node-info {}
@ -34,9 +34,9 @@
:registry {} :registry {}
:visibility-status-updates {} :visibility-status-updates {}
:stickers/packs-pending #{} :stickers/packs-pending #{}
:keycard {:nfc-enabled? false :keycard {:nfc-enabled? false
:pin {:original [] :pin {:original []
:confirmation [] :confirmation []
:current [] :current []
:puk [] :puk []
:enter-step :original}}}) :enter-step :original}}})

41
src/status_im/ui/components/chat_icon/screen.cljs
View File

@ -63,25 +63,6 @@
[react/view {:style dot-styles [react/view {:style dot-styles
:accessibility-label dot-accessibility-label}])])) :accessibility-label dot-accessibility-label}])]))
(defn profile-photo-plus-dot-view-old
[{:keys [public-key photo-container photo-path community?]}]
(let [photo-path (if (nil? photo-path)
@(re-frame.core/subscribe [:chats/photo-path public-key])
photo-path)
photo-container (if (nil? photo-container)
styles/container-chat-list photo-container)
size (:width photo-container)
identicon? (when photo-path (profile.db/base64-png? photo-path))
dot-styles (visibility-status-utils/icon-visibility-status-dot-old
public-key size identicon?)
dot-accessibility-label (:accessibility-label dot-styles)]
[react/view {:style photo-container
:accessibility-label :profile-photo}
[photos/photo photo-path {:size size}]
(when-not community?
[react/view {:style dot-styles
:accessibility-label dot-accessibility-label}])]))
(defn emoji-chat-icon-view (defn emoji-chat-icon-view
[chat-id group-chat name emoji styles] [chat-id group-chat name emoji styles]
[react/view (:container styles) [react/view (:container styles)
@ -92,16 +73,6 @@
[profile-photo-plus-dot-view {:public-key chat-id [profile-photo-plus-dot-view {:public-key chat-id
:photo-container (:default-chat-icon styles)}])]) :photo-container (:default-chat-icon styles)}])])
(defn emoji-chat-icon-view-old
[chat-id group-chat name emoji styles]
[react/view (:container styles)
(if group-chat
(if (string/blank? emoji)
[default-chat-icon name styles]
[emoji-chat-icon emoji styles])
[profile-photo-plus-dot-view-old {:public-key chat-id
:photo-container (:default-chat-icon styles)}])])
(defn chat-icon-view-toolbar (defn chat-icon-view-toolbar
[chat-id group-chat name color emoji] [chat-id group-chat name color emoji]
[emoji-chat-icon-view chat-id group-chat name emoji [emoji-chat-icon-view chat-id group-chat name emoji
@ -169,7 +140,7 @@
(if group-chat (if group-chat
[default-chat-icon icon-text styles] [default-chat-icon icon-text styles]
(let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])] (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])]
(if-not (string/blank? photo-path) (when-not (string/blank? photo-path)
[photos/photo photo-path styles])))) [photos/photo photo-path styles]))))
(defn emoji-chat-intro-icon-view [icon-text chat-id group-chat emoji styles] (defn emoji-chat-intro-icon-view [icon-text chat-id group-chat emoji styles]
@ -178,7 +149,7 @@
[default-chat-icon icon-text styles] [default-chat-icon icon-text styles]
[emoji-chat-icon emoji styles]) [emoji-chat-icon emoji styles])
(let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])] (let [photo-path @(re-frame.core/subscribe [:chats/photo-path chat-id])]
(if-not (string/blank? photo-path) (when-not (string/blank? photo-path)
[photos/photo photo-path styles])))) [photos/photo photo-path styles]))))
(defn profile-icon-view (defn profile-icon-view
@ -192,10 +163,10 @@
(styles/emoji-chat-icon-text size))} override-styles)] (styles/emoji-chat-icon-text size))} override-styles)]
[react/view (:container styles) [react/view (:container styles)
(if (and photo-path (seq photo-path)) (if (and photo-path (seq photo-path))
[profile-photo-plus-dot-view-old {:photo-path photo-path [profile-photo-plus-dot-view {:photo-path photo-path
:public-key public-key :public-key public-key
:photo-container (:container styles) :photo-container (:container styles)
:community? community?}] :community? community?}]
(if (string/blank? emoji) (if (string/blank? emoji)
[default-chat-icon name styles] [default-chat-icon name styles]
[emoji-chat-icon emoji styles])) [emoji-chat-icon emoji styles]))

8
src/status_im/ui/screens/communities/members.cljs
View File

@ -45,15 +45,15 @@
my-public-key my-public-key
can-manage-users? can-manage-users?
can-kick-users?]}] can-kick-users?]}]
(let [member (<sub [:contacts/contact-by-identity public-key]) (let [member (<sub [:contacts/contact-by-identity public-key])
[first-name second-name] (<sub [:contacts/contact-two-names-by-identity public-key])] [first-name second-name] (<sub [:contacts/contact-two-names-by-identity public-key])]
[quo/list-item [quo/list-item
{:title first-name {:title first-name
:subtitle second-name :subtitle second-name
:accessibility-label :member-item :accessibility-label :member-item
:icon [chat-icon/profile-photo-plus-dot-view-old :icon [chat-icon/profile-photo-plus-dot-view
{:public-key public-key {:public-key public-key
:photo-path (multiaccounts/displayed-photo member)}] :photo-path (multiaccounts/displayed-photo member)}]
:accessory (when (not= public-key my-public-key) :accessory (when (not= public-key my-public-key)
[quo/button {:on-press [quo/button {:on-press
#(>evt [:bottom-sheet/show-sheet #(>evt [:bottom-sheet/show-sheet

2
src/status_im/ui/screens/contacts_list/views.cljs
View File

@ -15,7 +15,7 @@
[quo/list-item [quo/list-item
{:title first-name {:title first-name
:subtitle second-name :subtitle second-name
:icon [chat-icon.screen/profile-photo-plus-dot-view-old :icon [chat-icon.screen/profile-photo-plus-dot-view
{:public-key public-key {:public-key public-key
:photo-path (multiaccounts/displayed-photo contact)}] :photo-path (multiaccounts/displayed-photo contact)}]
:chevron true :chevron true

2
src/status_im/ui/screens/home/views/inner_item.cljs
View File

@ -259,7 +259,7 @@
[react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts) [react/touchable-opacity (merge {:style {:height 64 :background-color background-color}} opts)
[:<> [:<>
[chat-item-icon muted (and group-chat (not public?)) (and group-chat public?)] [chat-item-icon muted (and group-chat (not public?)) (and group-chat public?)]
[chat-icon.screen/emoji-chat-icon-view-old chat-id group-chat chat-name emoji [chat-icon.screen/emoji-chat-icon-view chat-id group-chat chat-name emoji
{:container (assoc chat-icon.styles/container-chat-list {:container (assoc chat-icon.styles/container-chat-list
:top 12 :left 16 :position :absolute) :top 12 :left 16 :position :absolute)
:size 40 :size 40

37
src/status_im/ui/screens/profile/visibility_status/styles.cljs
View File

@ -14,24 +14,27 @@
:padding 6 :padding 6
:padding-right 12}) :padding-right 12})
(defn visibility-status-dot [dot-color size] (defn visibility-status-dot
{:background-color dot-color [{:keys [color size new-ui?]}]
:width size (if new-ui?
:height size {:background-color color
:border-radius (/ size 2) :width size
:border-width 3.5 :height size
:border-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)}) :border-radius (/ size 2)
:border-width 3.5
:border-color (quo2.colors/theme-colors quo2.colors/white quo2.colors/neutral-90)}
{:background-color color
:width size
:height size
:border-radius (/ size 2)
:border-width 1
:border-color colors/white}))
(defn visibility-status-dot-old [dot-color size] (defn visibility-status-profile-dot
{:background-color dot-color [{:keys [color size border-width margin-left new-ui?]}]
:width size (merge (visibility-status-dot {:color color
:height size :size size
:border-radius (/ size 2) :new-ui? new-ui?})
:border-width 1
:border-color colors/white})
(defn visibility-status-profile-dot-old [color size border-width margin-left]
(merge (visibility-status-dot-old color size)
{:margin-right 6 {:margin-right 6
:margin-left margin-left :margin-left margin-left
:border-width border-width})) :border-width border-width}))

81
src/status_im/ui/screens/profile/visibility_status/utils.cljs
View File

@ -1,12 +1,13 @@
(ns status-im.ui.screens.profile.visibility-status.utils (ns status-im.ui.screens.profile.visibility-status.utils
(:require [status-im.constants :as constants] (:require [clojure.string :as string]
[quo.design-system.colors :as colors]
[quo2.foundations.colors :as quo2.colors]
[status-im.constants :as constants]
[status-im.i18n.i18n :as i18n] [status-im.i18n.i18n :as i18n]
[status-im.ui.screens.profile.visibility-status.styles :as styles] [status-im.ui.screens.profile.visibility-status.styles :as styles]
[status-im.utils.handlers :refer [<sub]] [status-im.utils.config :as config]
[status-im.utils.datetime :as datetime] [status-im.utils.datetime :as datetime]
[quo.design-system.colors :as colors] [status-im.utils.handlers :refer [<sub]]))
[clojure.string :as string]
[quo2.foundations.colors :as quo2.colors]))
;; Specs: ;; Specs:
;; :visibility-status-automatic ;; :visibility-status-automatic
@ -73,53 +74,63 @@
constants/visibility-status-inactive constants/visibility-status-inactive
status-type))) status-type)))
(defn dot-color [{:keys [status-type] :or {status-type constants/visibility-status-inactive}}] (defn icon-dot-color [{:keys [status-type] :or {status-type constants/visibility-status-inactive}}]
(:color (get visibility-status-type-data status-type))) (if @config/new-ui-enabled?
(:color (get visibility-status-type-data status-type))
(defn dot-color-old [{:keys [status-type] :or {status-type constants/visibility-status-inactive}}] (:color (get visibility-status-type-data-old status-type))))
(:color (get visibility-status-type-data-old status-type)))
(defn my-icon? [public-key] (defn my-icon? [public-key]
(or (string/blank? public-key) (or (string/blank? public-key)
(= public-key (<sub [:multiaccount/public-key])))) (= public-key (<sub [:multiaccount/public-key]))))
(defn visibility-status-update [public-key my-icon?] (defn visibility-status-update
[public-key my-icon?]
(if my-icon? (if my-icon?
(<sub [:multiaccount/current-user-visibility-status]) (<sub [:multiaccount/current-user-visibility-status])
(<sub [:visibility-status-updates/visibility-status-update public-key]))) (<sub [:visibility-status-updates/visibility-status-update public-key])))
(defn icon-visibility-status-dot [public-key container-size _] (defn icon-dot-accessibility-label
(let [my-icon? (my-icon? public-key) [dot-color]
visibility-status-update (visibility-status-update public-key my-icon?) (if @config/new-ui-enabled?
size (/ container-size 2.4) (if (= dot-color quo2.colors/color-online)
margin -2 :online-profile-photo-dot
dot-color (dot-color visibility-status-update) :offline-profile-photo-dot)
accessibility-label (if (= dot-color quo2.colors/color-online) (if (= dot-color colors/color-online)
:online-profile-photo-dot :online-profile-photo-dot
:offline-profile-photo-dot)] :offline-profile-photo-dot)))
(merge (styles/visibility-status-dot dot-color size)
{:bottom margin
:right margin
:position :absolute
:accessibility-label accessibility-label})))
(defn icon-visibility-status-dot-old [public-key container-size identicon?] (defn icon-dot-margin
[size identicon?]
(if @config/new-ui-enabled?
-2
(if identicon?
(/ size 6)
(/ size 7))))
(defn icon-dot-size
[container-size]
(if @config/new-ui-enabled?
(/ container-size 2.4)
(/ container-size 4)))
(defn icon-visibility-status-dot
[public-key container-size identicon?]
(let [my-icon? (my-icon? public-key) (let [my-icon? (my-icon? public-key)
visibility-status-update (visibility-status-update public-key my-icon?) visibility-status-update (visibility-status-update public-key my-icon?)
size (/ container-size 4) size (icon-dot-size container-size)
margin (if identicon? (/ size 6) (/ size 7)) margin (icon-dot-margin size identicon?)
dot-color (dot-color-old visibility-status-update) dot-color (icon-dot-color visibility-status-update)
accessibility-label (if (= dot-color colors/color-online) new-ui? @config/new-ui-enabled?]
:online-profile-photo-dot (merge (styles/visibility-status-dot {:color dot-color
:offline-profile-photo-dot)] :size size
(merge (styles/visibility-status-dot-old dot-color size) :new-ui? new-ui?})
{:bottom margin {:bottom margin
:right margin :right margin
:position :absolute :position :absolute
:accessibility-label accessibility-label}))) :accessibility-label (icon-dot-accessibility-label dot-color)})))
(defn visibility-status-order [public-key] (defn visibility-status-order [public-key]
(let [my-icon? (my-icon? public-key) (let [my-icon? (my-icon? public-key)
visibility-status-update (visibility-status-update public-key my-icon?) visibility-status-update (visibility-status-update public-key my-icon?)
dot-color (dot-color visibility-status-update)] dot-color (icon-dot-color visibility-status-update)]
(if (= dot-color colors/color-online) 0 1))) (if (= dot-color colors/color-online) 0 1)))

28
src/status_im/ui/screens/profile/visibility_status/views.cljs
View File

@ -6,13 +6,14 @@
[quo.react-native :as rn] [quo.react-native :as rn]
[re-frame.core :as re-frame] [re-frame.core :as re-frame]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im.constants :as constants]
[status-im.ui.components.animation :as anim] [status-im.ui.components.animation :as anim]
[status-im.ui.components.react :as react] [status-im.ui.components.react :as react]
[status-im.utils.platform :as platform]
[status-im.utils.handlers :refer [<sub]]
[status-im.constants :as constants]
[status-im.ui.screens.profile.visibility-status.styles :as styles] [status-im.ui.screens.profile.visibility-status.styles :as styles]
[status-im.ui.screens.profile.visibility-status.utils :as utils])) [status-im.ui.screens.profile.visibility-status.utils :as utils]
[status-im.utils.config :as config]
[status-im.utils.handlers :refer [<sub]]
[status-im.utils.platform :as platform]))
;; === Code Related to visibility-status-button === ;; === Code Related to visibility-status-button ===
@ -33,13 +34,22 @@
(defn profile-visibility-status-dot [status-type color] (defn profile-visibility-status-dot [status-type color]
(let [automatic? (= status-type (let [automatic? (= status-type
constants/visibility-status-automatic) constants/visibility-status-automatic)
[border-width margin-left size] (if automatic? [1 -10 12] [0 6 10])] [border-width margin-left size] (if automatic? [1 -10 12] [0 6 10])
new-ui? @config/new-ui-enabled?]
[:<> [:<>
(when automatic? (when automatic?
[rn/view {:style (styles/visibility-status-profile-dot-old [rn/view {:style (styles/visibility-status-profile-dot
colors/color-inactive size border-width 6)}]) {:color colors/color-inactive
[rn/view {:style (styles/visibility-status-profile-dot-old :size size
color size border-width margin-left)}]])) :border-width border-width
:margin-left 6
:new-ui? new-ui?})}])
[rn/view {:style (styles/visibility-status-profile-dot
{:color color
:size size
:border-width border-width
:margin-left margin-left
:new-ui? new-ui?})}]]))
(defn visibility-status-button [on-press props] (defn visibility-status-button [on-press props]
(let [logged-in? (<sub [:multiaccount/logged-in?]) (let [logged-in? (<sub [:multiaccount/logged-in?])