-
Notifications
You must be signed in to change notification settings - Fork 980
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
5 changed files
with
248 additions
and
192 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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]) |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.