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

Author: ulisesmac

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

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