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

Add blur variants for context-tag (#15621) 

- Split context-tags into context-tag.view & context-tag.style namespaces
- Fix context-tags preview screen & add blur option
This commit is contained in:
Ulises Manuel Cárdenas 2023-04-13 12:07:05 -06:00 committed by GitHub
parent d902fb10d1
commit 6c1929096c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 248 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/quo2/components/tags/context_tag/style.cljs Normal file
View File

@ -0,0 +1,55 @@
(ns quo2.components.tags.context-tag.style
(:require [quo2.foundations.colors :as colors]))
(defn base-tag
[override-theme blur?]
{:border-radius 100
:padding-vertical 3
:flex-direction :row
:padding-right 8
:padding-left 8
:background-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 override-theme)
(colors/theme-colors colors/neutral-10 colors/neutral-90 override-theme))})
(def context-tag-image
{:width 20
:border-radius 10
:background-color :white
:height 20})
(defn context-tag-icon-color
[blur?]
(if blur?
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
(colors/theme-colors colors/neutral-50 colors/neutral-40)))
(def context-tag-text-container
{:align-items :center
:flex-direction :row})
(def audio-tag-container
{:padding-left 2
:padding-vertical 2})
(def audio-tag-icon-container
{:width 20
:height 20
:border-radius 10
:align-items :center
:justify-content :center
:background-color colors/primary-50})
(def audio-tag-icon-color colors/white)
(defn audio-tag-text-color
[override-theme]
(colors/theme-colors colors/neutral-100 colors/white override-theme))
(def community-tag
{:padding-vertical 2})
(defn community-tag-text
[override-theme]
{:margin-left 2
:color (colors/theme-colors colors/neutral-100 colors/white override-theme)})

85
src/quo2/components/tags/context_tag/view.cljs Normal file
View File

@ -0,0 +1,85 @@
(ns quo2.components.tags.context-tag.view
(:require [quo2.components.avatars.group-avatar :as group-avatar]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.components.tags.context-tag.style :as style]
[react-native.core :as rn]))
(defn trim-public-key
[pk]
(str (subs pk 0 6) "..." (subs pk (- (count pk) 3))))
(defn base-tag
[{:keys [override-theme style blur?]} & children]
(into
[rn/view {:style (merge (style/base-tag override-theme blur?) style)}]
children))
(defn group-avatar-tag
[label opts]
[base-tag
(-> opts
(select-keys [:override-theme :style :blur?])
(assoc-in [:style :padding-left] 3)
(assoc-in [:style :padding-vertical] 2))
[group-avatar/group-avatar opts]
[text/text
{:weight :medium
:size :paragraph-2
:style (:text-style opts)}
(str " " label)]])
(defn public-key-tag
[params public-key]
[base-tag params
[text/text
{:weight :monospace
:size :paragraph-2}
(trim-public-key public-key)]])
(defn context-tag
[{:keys [text-style blur?] :as params} photo name channel-name]
(let [text-params {:weight :medium
:size :paragraph-2
:style (assoc text-style :justify-content :center)}]
[base-tag (assoc-in params [:style :padding-left] 3)
[rn/image
{:style style/context-tag-image
:source photo}]
[rn/view {:style style/context-tag-text-container}
[text/text text-params (str " " name)]
(when channel-name
[:<>
[icons/icon
:i/chevron-right
{:color (style/context-tag-icon-color blur?)
:size 16}]
[text/text text-params (str "# " channel-name)]])]]))
(defn user-avatar-tag
[params username photo]
[context-tag params {:uri photo} username])
(defn audio-tag
[duration params]
[base-tag (merge {:style style/audio-tag-container} params)
[rn/view {:style style/audio-tag-icon-container}
[icons/icon
:i/play
{:color style/audio-tag-icon-color
:size 12}]]
[text/text
{:weight :medium
:size :paragraph-2
:style {:margin-left 4
:color (style/audio-tag-text-color (:override-theme params))}}
duration]])
(defn community-tag
[avatar community-name {:keys [override-theme] :as params}]
[context-tag
(merge {:style style/community-tag
:text-style (style/community-tag-text override-theme)}
params)
avatar
community-name])

126
src/quo2/components/tags/context_tags.cljs
View File

@ -1,126 +0,0 @@
(ns quo2.components.tags.context-tags
(:require [quo2.components.avatars.group-avatar :as group-avatar]
[quo2.components.icon :as icons]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]
[quo2.theme :as quo2.theme]
[react-native.core :as rn]))
(defn trim-public-key
[pk]
(str (subs pk 0 6) "..." (subs pk (- (count pk) 3))))
(defn base-tag
[_ _]
(fn [{:keys [override-theme style]} & children]
(let [theme (or override-theme (quo2.theme/get-theme))]
(into
[rn/view
(merge
{:border-radius 100
:padding-vertical 3
:flex-direction :row
:padding-right 8
:padding-left 8
:background-color (if (= theme :light)
colors/neutral-10
colors/neutral-90)}
style)]
children))))
(defn group-avatar-tag
[_ _]
(fn [label opts]
[base-tag
(-> opts
(select-keys [:override-theme :style])
(assoc-in [:style :padding-left] 3)
(assoc-in [:style :padding-vertical] 2))
[group-avatar/group-avatar opts]
[text/text
{:weight :medium
:size :paragraph-2
:style (:text-style opts)}
(str " " label)]]))
(defn public-key-tag
[_ _]
(fn [params public-key]
[base-tag params
[text/text
{:weight :monospace
:size :paragraph-2}
(trim-public-key public-key)]]))
(defn context-tag
[_ _]
(fn [params photo name channel-name]
(let [text-style (:text-style params)
text-params {:weight :medium
:size :paragraph-2
:style (assoc text-style :justify-content :center)}
icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
[base-tag (assoc-in params [:style :padding-left] 3)
[rn/image
{:style {:width 20
:border-radius 10
:background-color :white
:height 20}
:source photo}]
[rn/view
{:style {:align-items :center
:flex-direction :row}}
[text/text text-params (str " " name)]
(when channel-name
[:<>
[icons/icon
:i/chevron-right
{:color icon-color
:size 16}]
[text/text text-params (str "# " channel-name)]])]])))
(defn user-avatar-tag
[]
(fn [params username photo]
[context-tag params {:uri photo} username]))
(defn audio-tag
[duration params]
[base-tag
(merge
{:style {:padding-left 2
:padding-vertical 2}}
params)
[rn/view
{:width 20
:height 20
:border-radius 10
:align-items :center
:justify-content :center
:background-color colors/primary-50}
[icons/icon
:i/play
{:color colors/white
:size 12}]]
[text/text
{:weight :medium
:size :paragraph-2
:style {:margin-left 4
:color (colors/theme-colors
colors/neutral-100
colors/white
(:override-theme params))}}
duration]])
(defn community-tag
[avatar community-name params]
[context-tag
(merge
{:style {:padding-vertical 2}
:text-style {:margin-left 2
:color (colors/theme-colors
colors/neutral-100
colors/white
(:override-theme params))}}
params)
avatar community-name])

13
src/quo2/core.cljs
View File

@ -67,7 +67,7 @@
quo2.components.tabs.segmented-tab
quo2.components.tabs.account-selector
quo2.components.tabs.tabs
quo2.components.tags.context-tags
quo2.components.tags.context-tag.view
quo2.components.tags.status-tags
quo2.components.tags.permission-tag
quo2.components.tags.tag
@ -91,12 +91,11 @@
(def system-message quo2.components.messages.system-message/system-message)
(def reaction quo2.components.reactions.reaction/reaction)
(def add-reaction quo2.components.reactions.reaction/add-reaction)
(def user-avatar-tag quo2.components.tags.context-tags/user-avatar-tag)
(def context-tag quo2.components.tags.context-tags/context-tag)
(def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag)
(def audio-tag quo2.components.tags.context-tags/audio-tag)
(def community-tag quo2.components.tags.context-tags/community-tag)
(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
(def context-tag quo2.components.tags.context-tag.view/context-tag)
(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
(def community-tag quo2.components.tags.context-tag.view/community-tag)
(def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
(def page-nav quo2.components.navigation.page-nav/page-nav)
(def disclaimer quo2.components.selectors.disclaimer.view/view)

107
src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View File

@ -1,10 +1,10 @@
(ns status-im2.contexts.quo-preview.tags.context-tags
(:require [quo2.components.tags.context-tags :as quo2]
(:require [quo2.components.tags.context-tag.view :as quo2]
[quo2.foundations.colors :as colors]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.common.resources :as resources]
[status-im.multiaccounts.core :as multiaccounts]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))
(def group-avatar-default-params
@ -20,7 +20,7 @@
(def example-photo2
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=")
(def coinbase-community (resources/get-mock-image :coinbase))
(def coinbase-community-image (resources/get-mock-image :coinbase))
(def main-descriptor
[{:label "Type"
@ -37,7 +37,10 @@
{:key :audio
:value "Audio"}
{:key :community
:value "Community"}]}])
:value "Community"}]}
{:label "Blur"
:key :blur?
:type :boolean}])
(def context-tag-descriptor
[{:label "Label"
@ -51,7 +54,8 @@
[]
(let [state (reagent/atom {:label "Name"
:channel-name "Channel"
:type :group-avatar})]
:type :group-avatar
:duration "00:32"})]
(fn []
(let [contacts {example-pk {:public-key example-pk
:primary-name "Automatic incompatible Coati"
@ -69,14 +73,18 @@
contacts
multiaccounts/displayed-name)
"Please select a user")
descriptor
(cond
(= (:type @state) :context-tag) (into main-descriptor context-tag-descriptor)
(= (:type @state) :group-avatar) (conj main-descriptor
descriptor (cond
(= (:type @state) :context-tag)
(into main-descriptor context-tag-descriptor)
(= (:type @state) :group-avatar)
(conj main-descriptor
{:label "Label"
:key :label
:type :text})
(= (:type @state) :avatar) (let [photo (-> @state :contact contacts :photo)]
(= (:type @state) :avatar)
(let [photo (-> @state :contact contacts :photo)]
(when-not (contains? @state :contacts)
(swap! state assoc :contacts contacts-public-keys))
(when-not (= (:photo @state)
@ -86,38 +94,73 @@
{:label "Contacts"
:key :contact
:type :select
:options contacts-public-keys})))]
:options contacts-public-keys}))
(= (:type @state) :community)
(conj main-descriptor
{:label "Community name"
:key :label
:type :text})
(= (:type @state) :audio)
(conj main-descriptor
{:label "Duration"
:key :duration
:type :text})
:else
main-descriptor)]
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
[rn/view {:padding-bottom 150}
[rn/view {:flex 1}
[rn/view {:style {:padding-bottom 150}}
[rn/view {:style {:flex 1}}
[preview/customizer state descriptor]]
[rn/view
{:padding-vertical 60
:flex-direction :row
:justify-content :center}
[rn/view {:style {:padding-vertical 60}}
[preview/blur-view
{:style {:flex 1
:margin-vertical 20
:margin-horizontal 40}
:show-blur-background? (:blur? @state)}
(case (:type @state)
:context-tag
[quo2/context-tag group-avatar-default-params {:uri example-photo2} (:label @state)
:context-tag [quo2/context-tag
{:blur? (:blur? @state)
:size :small
:color :purple}
{:uri example-photo2}
(:label @state)
(:channel-name @state)]
:group-avatar
[quo2/group-avatar-tag (:label @state) group-avatar-default-params]
:public-key
[quo2/public-key-tag {} example-pk]
:avatar
[quo2/user-avatar-tag {} current-username (:photo @state)]
:audio
[quo2/audio-tag "00:32"]
:community
[quo2/community-tag coinbase-community "Coinbase"])]]]))))
:group-avatar [quo2/group-avatar-tag (:label @state)
{:blur? (:blur? @state)
:size :small
:color :purple}]
:public-key [quo2/public-key-tag
{:blur? (:blur? @state)
:size :small
:color :purple}
example-pk]
:avatar [quo2/user-avatar-tag
{:blur? (:blur? @state)
:size :small
:color :purple}
current-username (:photo @state)]
:audio [quo2/audio-tag (:duration @state) {:blur? (:blur? @state)}]
:community [quo2/community-tag
coinbase-community-image
(:label @state)
{:blur? (:blur? @state)}])]]]]))))
(defn preview-context-tags
[]
[rn/view
{:background-color (colors/theme-colors colors/white
{:style {:background-color (colors/theme-colors colors/white
colors/neutral-95)
:flex 1}
:flex 1}}
[rn/flat-list
{:flex 1
{:style {:flex 1}
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])