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
GitHub
parent
d902fb10d1
commit
6c1929096c
|
|
@ -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)})
|
||||
|
|
@ -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])
|
||||
|
|
@ -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])
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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,73 +54,113 @@
|
|||
[]
|
||||
(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"
|
||||
:photo example-photo}
|
||||
example-pk2 {:public-key example-pk2
|
||||
:primary-name "Clearcut Flickering Rattlesnake"
|
||||
:photo example-photo2}}
|
||||
(let [contacts {example-pk {:public-key example-pk
|
||||
:primary-name "Automatic incompatible Coati"
|
||||
:photo example-photo}
|
||||
example-pk2 {:public-key example-pk2
|
||||
:primary-name "Clearcut Flickering Rattlesnake"
|
||||
:photo example-photo2}}
|
||||
contacts-public-keys (map (fn [{:keys [public-key]}]
|
||||
{:key public-key
|
||||
:value (get-in contacts [public-key :primary-name])})
|
||||
(vals contacts))
|
||||
current-username (if (seq (:contact @state))
|
||||
(->> @state
|
||||
:contact
|
||||
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
|
||||
{:label "Label"
|
||||
:key :label
|
||||
:type :text})
|
||||
(= (: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)
|
||||
photo)
|
||||
(swap! state assoc :photo photo))
|
||||
(conj main-descriptor
|
||||
{:label "Contacts"
|
||||
:key :contact
|
||||
:type :select
|
||||
:options contacts-public-keys})))]
|
||||
current-username (if (seq (:contact @state))
|
||||
(->> @state
|
||||
:contact
|
||||
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
|
||||
{:label "Label"
|
||||
:key :label
|
||||
:type :text})
|
||||
|
||||
(= (: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)
|
||||
photo)
|
||||
(swap! state assoc :photo photo))
|
||||
(conj main-descriptor
|
||||
{:label "Contacts"
|
||||
:key :contact
|
||||
:type :select
|
||||
: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}
|
||||
(case (:type @state)
|
||||
:context-tag
|
||||
[quo2/context-tag group-avatar-default-params {: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"])]]]))))
|
||||
[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
|
||||
{:blur? (:blur? @state)
|
||||
:size :small
|
||||
:color :purple}
|
||||
{:uri example-photo2}
|
||||
(:label @state)
|
||||
(:channel-name @state)]
|
||||
|
||||
: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
|
||||
colors/neutral-95)
|
||||
:flex 1}
|
||||
{:style {:background-color (colors/theme-colors colors/white
|
||||
colors/neutral-95)
|
||||
:flex 1}}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
{:style {:flex 1}
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
|
|
|||
Loading…
Reference in New Issue