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

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

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

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

@ -63,25 +63,6 @@
[react/view {:style dot-styles
: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
[chat-id group-chat name emoji styles]
[react/view (:container styles)
@ -92,16 +73,6 @@
[profile-photo-plus-dot-view {:public-key chat-id
: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
[chat-id group-chat name color emoji]
[emoji-chat-icon-view chat-id group-chat name emoji
@ -169,7 +140,7 @@
(if group-chat
[default-chat-icon icon-text styles]
(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]))))
(defn emoji-chat-intro-icon-view [icon-text chat-id group-chat emoji styles]
@ -178,7 +149,7 @@
[default-chat-icon icon-text styles]
[emoji-chat-icon emoji styles])
(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]))))
(defn profile-icon-view
@ -192,7 +163,7 @@
(styles/emoji-chat-icon-text size))} override-styles)]
[react/view (:container styles)
(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
:photo-container (:container styles)
:community? community?}]

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

@ -51,7 +51,7 @@
{:title first-name
:subtitle second-name
: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
:photo-path (multiaccounts/displayed-photo member)}]
:accessory (when (not= public-key my-public-key)

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

@ -15,7 +15,7 @@
[quo/list-item
{:title first-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
:photo-path (multiaccounts/displayed-photo contact)}]
: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)
[:<>
[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
:top 12 :left 16 :position :absolute)
:size 40

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

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

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

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

@ -6,13 +6,14 @@
[quo.react-native :as rn]
[re-frame.core :as re-frame]
[reagent.core :as reagent]
[status-im.constants :as constants]
[status-im.ui.components.animation :as anim]
[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.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 ===
@ -33,13 +34,22 @@
(defn profile-visibility-status-dot [status-type color]
(let [automatic? (= status-type
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?
[rn/view {:style (styles/visibility-status-profile-dot-old
colors/color-inactive size border-width 6)}])
[rn/view {:style (styles/visibility-status-profile-dot-old
color size border-width margin-left)}]]))
[rn/view {:style (styles/visibility-status-profile-dot
{:color colors/color-inactive
:size size
: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]
(let [logged-in? (<sub [:multiaccount/logged-in?])