From 6c1929096c1ced0a857c9e021b2b5dcac70a0842 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?= <90291778+ulisesmac@users.noreply.github.com> Date: Thu, 13 Apr 2023 12:07:05 -0600 Subject: [PATCH] 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 --- .../components/tags/context_tag/style.cljs | 55 ++++++ .../components/tags/context_tag/view.cljs | 85 +++++++++ src/quo2/components/tags/context_tags.cljs | 126 -------------- src/quo2/core.cljs | 13 +- .../quo_preview/tags/context_tags.cljs | 161 +++++++++++------- 5 files changed, 248 insertions(+), 192 deletions(-) create mode 100644 src/quo2/components/tags/context_tag/style.cljs create mode 100644 src/quo2/components/tags/context_tag/view.cljs delete mode 100644 src/quo2/components/tags/context_tags.cljs diff --git a/src/quo2/components/tags/context_tag/style.cljs b/src/quo2/components/tags/context_tag/style.cljs new file mode 100644 index 0000000000..59373c56cf --- /dev/null +++ b/src/quo2/components/tags/context_tag/style.cljs @@ -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)}) diff --git a/src/quo2/components/tags/context_tag/view.cljs b/src/quo2/components/tags/context_tag/view.cljs new file mode 100644 index 0000000000..36314dd4d6 --- /dev/null +++ b/src/quo2/components/tags/context_tag/view.cljs @@ -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]) diff --git a/src/quo2/components/tags/context_tags.cljs b/src/quo2/components/tags/context_tags.cljs deleted file mode 100644 index 15fab54259..0000000000 --- a/src/quo2/components/tags/context_tags.cljs +++ /dev/null @@ -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]) diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index 0c7a0db732..c63e8e3463 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -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) diff --git a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs index 56518918d9..cfec213dac 100644 --- a/src/status_im2/contexts/quo_preview/tags/context_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/context_tags.cljs @@ -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}]])