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 channel-action component (#19031) 

* feat: added separate channel-action component & fixed pressed color

* feat: added channel-action preview screen

* fix: moved channel-action/s into separate dirs

* fix: channel-action style prop

* fix: renamed color prop to customization-color

* fix: small button width should be fixed

* fix: removed temp file

* style: formatting
This commit is contained in:
Lungu Cristian 2024-03-14 11:56:47 +02:00 committed by GitHub
parent fa9645d6dd
commit aab62dd19e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 153 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/quo/components/community/channel_action/style.cljs Normal file
View File

@ -0,0 +1,23 @@
(ns quo.components.community.channel-action.style
(:require
[quo.foundations.colors :as colors]))
(defn channel-action-container
[{:keys [big? disabled?]}]
(cond-> {}
disabled? (assoc :opacity 0.3)
big? (assoc :flex-grow 1)
(not big?) (assoc :width 104)))
(defn channel-action
[{:keys [color pressed? theme]}]
{:height 102
:padding 12
:border-radius 16
:background-color (colors/resolve-color color theme (if pressed? 20 10))
:justify-content :space-between})
(def channel-action-row
{:flex-direction :row
:justify-content :space-between
:align-items :center})

39
src/quo/components/community/channel_action/view.cljs Normal file
View File

@ -0,0 +1,39 @@
(ns quo.components.community.channel-action.view
(:require
[quo.components.community.channel-action.style :as style]
[quo.components.counter.counter.view :as counter]
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.theme]
[react-native.core :as rn]))
(defn view
[{:keys [big? customization-color label counter-value icon on-press accessibility-label disabled?]}]
(let [theme (quo.theme/use-theme-value)
[pressed? set-pressed] (rn/use-state false)
on-press-in (rn/use-callback #(set-pressed true))
on-press-out (rn/use-callback #(set-pressed false))]
[rn/view
{:style (style/channel-action-container
{:big? big?
:disabled? disabled?})}
[rn/pressable
(cond-> {:style (style/channel-action
{:big? big?
:color customization-color
:pressed? pressed?
:theme theme
:disabled? disabled?})
:accessibility-label accessibility-label}
(not disabled?) (assoc :on-press on-press
:on-press-in on-press-in
:on-press-out on-press-out))
[rn/view {:style style/channel-action-row}
[icons/icon icon]
(when counter-value
[counter/view {:type :secondary} counter-value])]
[text/text
{:size :paragraph-1
:weight :medium
:number-of-lines 2}
label]]]))

32
src/quo/components/community/channel_actions.cljs
View File

@ -1,32 +0,0 @@
(ns quo.components.community.channel-actions
(:require
[quo.components.community.style :as style]
[quo.components.counter.counter.view :as counter]
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[react-native.core :as rn]))
(defn channel-action
[{:keys [big? color label counter-value icon on-press accessibility-label]}]
[rn/touchable-opacity
{:on-press on-press
:style (style/channel-action-touch big?)
:accessibility-label accessibility-label}
[rn/view {:style (style/channel-action color)}
[rn/view {:style style/channel-action-row}
[icons/icon icon]
(when counter-value
[counter/view {:type :secondary} counter-value])]
[text/text {:size :paragraph-1 :weight :medium :number-of-lines 2} label]]])
(defn channel-actions
[{:keys [container-style actions]}]
[rn/view {:style (assoc container-style :flex-direction :row)}
(map-indexed
(fn [index action]
^{:key index}
[:<>
[channel-action action]
(when (not= action (last actions))
[rn/view {:width 16}])])
actions)])

16
src/quo/components/community/channel_actions/view.cljs Normal file
View File

@ -0,0 +1,16 @@
(ns quo.components.community.channel-actions.view
(:require
[quo.components.community.channel-action.view :as channel-action]
[react-native.core :as rn]))
(defn view
[{:keys [container-style actions]}]
[rn/view {:style (assoc container-style :flex-direction :row)}
(map-indexed
(fn [index action]
^{:key index}
[:<>
[channel-action/view action]
(when (not= action (last actions))
[rn/view {:width 16}])])
actions)])

18
src/quo/components/community/style.cljs
View File

@ -133,24 +133,6 @@
colors/neutral-80
theme)})
(defn channel-action-touch
[big?]
{:flex 1
:max-width (if big? 216 104)})
(defn channel-action
[color]
{:padding 12
:height 102
:border-radius 16
:background-color (colors/custom-color color 50 10)
:justify-content :space-between})
(def channel-action-row
{:flex-direction :row
:justify-content :space-between
:align-items :center})
(defn loading-card
[width theme]
(merge

6
src/quo/core.cljs
View File

@ -29,7 +29,8 @@
quo.components.common.notification-dot.view
quo.components.common.separator.view
quo.components.community.banner.view
quo.components.community.channel-actions
quo.components.community.channel-action.view
quo.components.community.channel-actions.view
quo.components.community.community-card-view
quo.components.community.community-list-view
quo.components.community.community-stat.view
@ -229,7 +230,8 @@
(def discover-card quo.components.community.banner.view/view)
(def community-icon quo.components.community.icon/community-icon)
(def token-requirement-list quo.components.community.token-gating/token-requirement-list)
(def channel-actions quo.components.community.channel-actions/channel-actions)
(def channel-action quo.components.community.channel-action.view/view)
(def channel-actions quo.components.community.channel-actions.view/view)
;;;; Counter
(def collectible-counter quo.components.counter.collectible-counter.view/view)

8
src/status_im/contexts/chat/messenger/messages/list/view.cljs
View File

@ -47,8 +47,8 @@
(defn list-on-end-reached
[distance-from-list-top]
;; FIXME: that's a bit of a hack but we need to update `distance-from-list-top` once the new messages
;; are fetched in order for the header to work properly
;; FIXME: that's a bit of a hack but we need to update `distance-from-list-top` once the new
;; messages are fetched in order for the header to work properly
(let [on-loaded (fn [n]
(reanimated/set-shared-value distance-from-list-top
(+ (reanimated/get-shared-value distance-from-list-top)
@ -147,7 +147,7 @@
:actions [{:accessibility-label :action-button-pinned
:big? true
:label (or latest-pin-text (i18n/label :t/no-pinned-messages))
:color cover-bg-color
:customization-color cover-bg-color
:icon :i/pin
:counter-value pins-count
:on-press (fn []
@ -157,7 +157,7 @@
:label (i18n/label (if muted
unmute-chat-label
mute-chat-label))
:color cover-bg-color
:customization-color cover-bg-color
:icon (if muted? :i/activity-center :i/muted)
:on-press (fn []
(if muted?

31
src/status_im/contexts/preview/quo/community/channel_action.cljs Normal file
View File

@ -0,0 +1,31 @@
(ns status-im.contexts.preview.quo.community.channel-action
(:require [quo.core :as quo]
[reagent.core :as reagent]
[status-im.contexts.preview.quo.preview :as preview]))
(def descriptor
[{:key :label
:type :text}
{:key :big?
:type :boolean}
{:key :counter-value
:type :number}
{:key :icon
:type :select
:options [{:key :i/muted}
{:key :i/pin}]}
(preview/customization-color-option)
{:key :disabled?
:type :boolean}])
(defn view
[]
(let [state (reagent/atom {:label "Action"
:icon :i/muted
:customization-color :blue
:counter-value nil
:disabled? false
:big? true})]
(fn []
[preview/preview-container {:state state :descriptor descriptor}
[quo/channel-action @state]])))

43
src/status_im/contexts/preview/quo/community/channel_actions.cljs
View File

@ -8,21 +8,40 @@
[]
[preview/preview-container
[quo/channel-actions
{:actions [{:big? true
:label "Pinned Messages"
:color :blue
:icon :i/pin
:counter-value 0}]}]
{:actions [{:big? true
:label "Pinned Messages"
:customization-color :blue
:icon :i/pin
:counter-value 0}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
{:actions [{:label "Pinned Messages"
:customization-color :blue
:icon :i/pin
:counter-value 5}
{:label "Mute chat"
:customization-color :blue
:icon :i/muted}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:big? true :label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}]}]
{:actions
[{:big? true
:label "Pinned Messages"
:customization-color :blue
:icon :i/pin
:counter-value 5}
{:label "Mute chat"
:customization-color :blue
:icon :i/muted}]}]
[rn/view {:height 50}]
[quo/channel-actions
{:actions [{:label "Pinned Messages" :color :blue :icon :i/pin :counter-value 5}
{:label "Mute chat" :color :blue :icon :i/muted}
{:label "Something else" :color :blue :icon :i/placeholder}]}]])
{:actions [{:label "Pinned Messages"
:customization-color :blue
:icon :i/pin
:counter-value 5}
{:label "Mute chat"
:customization-color :blue
:icon :i/muted}
{:label "Something else"
:customization-color :blue
:icon :i/placeholder}]}]])

5
src/status_im/contexts/preview/quo/main.cljs
View File

@ -33,6 +33,8 @@
[status-im.contexts.preview.quo.colors.color :as color]
[status-im.contexts.preview.quo.colors.color-picker :as color-picker]
[status-im.contexts.preview.quo.common :as common]
[status-im.contexts.preview.quo.community.channel-action :as
channel-action]
[status-im.contexts.preview.quo.community.channel-actions :as
channel-actions]
[status-im.contexts.preview.quo.community.community-card-view :as
@ -260,6 +262,9 @@
{:name :token-gating
:options {:insets {:bottom? true}}
:component token-gating/view}
{:name :channel-action
:options {:insets {:bottom? true}}
:component channel-action/view}
{:name :channel-actions
:options {:insets {:bottom? true}}
:component channel-actions/view}]