diff --git a/src/quo2/components/avatars/channel_avatar/component_spec.cljs b/src/quo2/components/avatars/channel_avatar/component_spec.cljs index 2030f6230d..14fec0cf23 100644 --- a/src/quo2/components/avatars/channel_avatar/component_spec.cljs +++ b/src/quo2/components/avatars/channel_avatar/component_spec.cljs @@ -8,22 +8,22 @@ (h/render [component/view]) (h/is-truthy (h/query-by-label-text :initials)) (h/is-null (h/query-by-label-text :emoji)) - (h/is-null (h/query-by-label-text :lock))) + (h/is-null (h/query-by-role :channel-avatar-badge))) - (h/test "with emoji, no lock set, large size" + (h/test "with emoji, no badge, large size" (let [emoji "🍓"] (h/render [component/view {:emoji emoji :size :size-32}]) (h/is-null (h/query-by-label-text :initials)) (h/is-truthy (h/query-by-text emoji)) - (h/is-null (h/query-by-label-text :lock)))) + (h/is-null (h/query-by-role :channel-avatar-badge)))) - (h/test "locked" - (h/render [component/view {:locked? true}]) - (h/is-truthy (h/query-by-label-text :lock))) + (h/test "with locked badge" + (h/render [component/view {:badge :locked}]) + (h/is-truthy (h/query-by-role :channel-avatar-badge-locked))) - (h/test "unlocked" - (h/render [component/view {:locked? false}]) - (h/is-truthy (h/query-by-label-text :lock))) + (h/test "with unlocked badge" + (h/render [component/view {:badge :unlocked}]) + (h/is-truthy (h/query-by-label-text :channel-avatar-badge-unlocked))) (h/test "no emoji, smaller size" (h/render [component/view {:full-name "Status Mobile"}]) diff --git a/src/quo2/components/avatars/channel_avatar/style.cljs b/src/quo2/components/avatars/channel_avatar/style.cljs index 448e484223..a93ac560c6 100644 --- a/src/quo2/components/avatars/channel_avatar/style.cljs +++ b/src/quo2/components/avatars/channel_avatar/style.cljs @@ -24,7 +24,7 @@ :size-32 15 11)}) -(defn lock-container +(defn badge-container [size theme] (let [distance (if (= size :size-32) 20 12)] {:position :absolute @@ -34,6 +34,6 @@ :border-radius (* 2 lock-icon-size) :padding 2})) -(def lock-icon +(def badge-icon {:width lock-icon-size :height lock-icon-size}) diff --git a/src/quo2/components/avatars/channel_avatar/view.cljs b/src/quo2/components/avatars/channel_avatar/view.cljs index 21ef938a3f..a8c94ce200 100644 --- a/src/quo2/components/avatars/channel_avatar/view.cljs +++ b/src/quo2/components/avatars/channel_avatar/view.cljs @@ -22,23 +22,24 @@ :weight :medium)) (utils.string/get-initials channel-name amount-initials)])) -(defn- lock - [locked? size theme] - ;; When `locked?` is nil, we must not display the unlocked icon. - (when (boolean? locked?) - [rn/view - {:accessibility-label :lock - :style (style/lock-container size theme)} - [icons/icon (if locked? :i/locked :i/unlocked) - {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) - :container-style style/lock-icon - :size 12}]])) +(defn- badge-icon + [{:keys [badge size theme]}] + [rn/view + {:accessibility-label :channel-avatar-badge + :style (style/badge-container size theme)} + [icons/icon + (case badge + :locked :i/locked + :unlocked :i/unlocked) + {:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme) + :container-style style/badge-icon + :size 12 + :accessibility-label (keyword (str "channel-avatar-badge-" (name badge)))}]]) (defn- view-internal "Options: - :size - keyword (default nil) - Container size, for the moment, - only :size/l (meaning large) is supported. + :size - keyword (defaults to 24) - Container size (:size-32 :size-64) :emoji - string (default nil) @@ -46,13 +47,12 @@ community channel, then the default color should be the community custom color. - :locked? - nil/bool (default nil) - When true/false display a locked/unlocked - icon respectively. When nil does not show icon. + :badge - keyword (default nil) shows a badge next to the avatar (:locked :unlocked) :full-name - string (default nil) - When :emoji is blank, this value will be used to extract the initials. " - [{:keys [size emoji customization-color locked? full-name theme]}] + [{:keys [size emoji customization-color badge full-name theme]}] [rn/view {:accessibility-label :channel-avatar :style (style/outer-container {:theme theme @@ -68,6 +68,10 @@ {:style (style/emoji-size size) :accessibility-label :emoji} (string/trim emoji)]) - [lock locked? size theme]]) + (when (keyword? badge) + [badge-icon + {:badge badge + :size size + :theme theme}])]) (def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/list_items/channel/view.cljs b/src/quo2/components/list_items/channel/view.cljs index 84f68f4780..09ff1cae05 100644 --- a/src/quo2/components/list_items/channel/view.cljs +++ b/src/quo2/components/list_items/channel/view.cljs @@ -40,7 +40,7 @@ :on-press-out #(reset! pressed? false)} [channel-avatar/view {:size :size-32 - :locked? locked? + :badge (if locked? :locked :unlocked) :full-name name :customization-color customization-color :emoji emoji}] diff --git a/src/quo2/components/share/qr_code/view.cljs b/src/quo2/components/share/qr_code/view.cljs index af03e5714c..e2e4f35c40 100644 --- a/src/quo2/components/share/qr_code/view.cljs +++ b/src/quo2/components/share/qr_code/view.cljs @@ -34,7 +34,7 @@ :source (:picture props)}] :channel - [channel-avatar/view (assoc props :locked? nil :size :size-64)] + [channel-avatar/view (assoc props :badge nil :size :size-64)] :saved-address [wallet-avatar/wallet-user-avatar (assoc props :size :size-64)] diff --git a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs index a9904186a3..000488e022 100644 --- a/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs +++ b/src/status_im2/contexts/quo_preview/avatars/channel_avatar.cljs @@ -9,33 +9,27 @@ :type :select :options [{:key :size-64} {:key :size-32} - {:key :default}]} + {:key nil + :value "Default"}]} {:key :emoji :type :text} {:key :full-name :type :text} (preview/customization-color-option) - {:key :locked-state + {:key :badge :type :select - :options [{:key :not-set} + :options [{:key nil + :value "Default"} {:key :unlocked} {:key :locked}]}]) (defn view [] (let [state (reagent/atom {:size :size-32 - :locked-state :not-set + :badge nil :emoji "🍑" :full-name "Some channel" :customization-color :blue})] (fn [] - (let [locked? (case (:locked-state @state) - :not-set nil - :unlocked false - :locked true - nil)] - [preview/preview-container {:state state :descriptor descriptor} - [quo/channel-avatar - (assoc @state - :locked? - locked?)]])))) + [preview/preview-container {:state state :descriptor descriptor} + [quo/channel-avatar @state]])))