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

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)})

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])

src/quo2/components/tags/context_tags.cljs

@@ -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])

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 user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
-(def context-tag quo2.components.tags.context-tags/context-tag)
+(def context-tag quo2.components.tags.context-tag.view/context-tag)
-(def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag)
+(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
-(def audio-tag quo2.components.tags.context-tags/audio-tag)
+(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
-(def community-tag quo2.components.tags.context-tags/community-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)

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
+      (let [contacts             {example-pk  {:public-key   example-pk
-                                   :primary-name "Automatic incompatible Coati"
+                                               :primary-name "Automatic incompatible Coati"
-                                   :photo        example-photo}
+                                               :photo        example-photo}
-                      example-pk2 {:public-key   example-pk2
+                                  example-pk2 {:public-key   example-pk2
-                                   :primary-name "Clearcut Flickering Rattlesnake"
+                                               :primary-name "Clearcut Flickering Rattlesnake"
-                                   :photo        example-photo2}}
+                                               :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))
+            current-username     (if (seq (:contact @state))
-                               (->> @state
+                                   (->> @state
-                                    :contact
+                                        :contact
-                                    contacts
+                                        contacts
-                                    multiaccounts/displayed-name)
+                                        multiaccounts/displayed-name)
-                               "Please select a user")
+                                   "Please select a user")
-            descriptor
+            descriptor           (cond
-            (cond
+                                   (= (:type @state) :context-tag)
-              (= (:type @state) :context-tag)  (into main-descriptor context-tag-descriptor)
+                                   (into main-descriptor context-tag-descriptor)
-              (= (:type @state) :group-avatar) (conj main-descriptor
+
-                                                     {:label "Label"
+                                   (= (:type @state) :group-avatar)
-                                                      :key   :label
+                                   (conj main-descriptor
-                                                      :type  :text})
+                                         {:label "Label"
-              (= (:type @state) :avatar)       (let [photo (-> @state :contact contacts :photo)]
+                                          :key   :label
-                                                 (when-not (contains? @state :contacts)
+                                          :type  :text})
-                                                   (swap! state assoc :contacts contacts-public-keys))
+
-                                                 (when-not (= (:photo @state)
+                                   (= (:type @state) :avatar)
-                                                              photo)
+                                   (let [photo (-> @state :contact contacts :photo)]
-                                                   (swap! state assoc :photo photo))
+                                     (when-not (contains? @state :contacts)
-                                                 (conj main-descriptor
+                                       (swap! state assoc :contacts contacts-public-keys))
-                                                       {:label   "Contacts"
+                                     (when-not (= (:photo @state)
-                                                        :key     :contact
+                                                  photo)
-                                                        :type    :select
+                                       (swap! state assoc :photo photo))
-                                                        :options contacts-public-keys})))]
+                                     (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 {:style {:padding-bottom 150}}
-          [rn/view {:flex 1}
+          [rn/view {:style {:flex 1}}
            [preview/customizer state descriptor]]
-          [rn/view
+          [rn/view {:style {:padding-vertical 60}}
-           {:padding-vertical 60
+           [preview/blur-view
-            :flex-direction   :row
+            {:style                 {:flex              1
-            :justify-content  :center}
+                                     :margin-vertical   20
-           (case (:type @state)
+                                     :margin-horizontal 40}
-             :context-tag
+             :show-blur-background? (:blur? @state)}
-             [quo2/context-tag group-avatar-default-params {:uri example-photo2} (:label @state)
+            (case (:type @state)
-              (:channel-name @state)]
+              :context-tag  [quo2/context-tag
-             :group-avatar
+                             {:blur? (:blur? @state)
-             [quo2/group-avatar-tag (:label @state) group-avatar-default-params]
+                              :size  :small
-             :public-key
+                              :color :purple}
-             [quo2/public-key-tag {} example-pk]
+                             {:uri example-photo2}
-             :avatar
+                             (:label @state)
-             [quo2/user-avatar-tag {} current-username (:photo @state)]
+                             (:channel-name @state)]
-             :audio
+
-             [quo2/audio-tag "00:32"]
+              :group-avatar [quo2/group-avatar-tag (:label @state)
-             :community
+                             {:blur? (:blur? @state)
-             [quo2/community-tag coinbase-community "Coinbase"])]]]))))
+                              :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)
+                                                   colors/neutral-95)
-    :flex             1}
+            :flex             1}}
    [rn/flat-list
-    {:flex                      1
+    {:style                     {:flex 1}
      :keyboardShouldPersistTaps :always
      :header                    [cool-preview]
      :key-fn                    str}]])