Compare commits
29
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Omar Basem
|
022e7078cd | ||
|
Omar Basem
|
189b4a8ca1 | ||
|
Omar Basem
|
70dd3dde7f | ||
|
Omar Basem
|
4e9ac3ed36 | ||
|
Omar Basem
|
3ecaf1b8ca | ||
|
Omar Basem
|
9745a83ffb | ||
|
Omar Basem
|
fa78d70016 | ||
|
Omar Basem
|
43c4f8527a | ||
|
Omar Basem
|
b411b562b2 | ||
|
Omar Basem
|
cdc3aa2a00 | ||
|
Omar Basem
|
c7fb55e702 | ||
|
Omar Basem
|
33fb72f931 | ||
|
Omar Basem
|
f2ebaa8381 | ||
|
Omar Basem
|
e0ab743008 | ||
|
Omar Basem
|
b543806f62 | ||
|
Omar Basem
|
da294f319e | ||
|
Omar Basem
|
a387b8f44e | ||
|
Omar Basem
|
e5183e0152 | ||
|
Omar Basem
|
f74524fe66 | ||
|
Omar Basem
|
4d6a94994e | ||
|
Omar Basem
|
845d61433f | ||
|
Omar Basem
|
992357499c | ||
|
Omar Basem
|
0d1923e6d0 | ||
|
Omar Basem
|
cacfb76b23 | ||
|
flexsurfer
|
8168d224d3 | ||
|
Andrea Maria Piana
|
aca296030c | ||
|
yqrashawn
|
f5a61d9a8b | ||
|
flexsurfer
|
3c1c8a120d | ||
|
yqrashawn
|
3925de58b1 |
@@ -287,6 +287,7 @@ endif
|
||||
|
||||
lint: export TARGET := clojure
|
||||
lint: ##@test Run code style checks
|
||||
sh scripts/lint-re-frame-in-quo-components.sh && \
|
||||
clj-kondo --config .clj-kondo/config.edn --cache false --lint src && \
|
||||
TARGETS=$$(git diff --diff-filter=d --cached --name-only src && echo src) && \
|
||||
clojure -Scp "$$CLASS_PATH" -m cljfmt.main check --indents indentation.edn $$TARGETS
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
"app:packager": "react-native start --host 0.0.0.0 --port 8081",
|
||||
"app:android": "react-native run-android"
|
||||
},
|
||||
"resolutions": {
|
||||
"react-devtools-core": "^4.26.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/preset-typescript": "^7.17.12",
|
||||
"@react-native-async-storage/async-storage": "^1.17.9",
|
||||
|
||||
Executable
+12
@@ -0,0 +1,12 @@
|
||||
#!/usr/bin/env sh
|
||||
|
||||
CHANGES=$(git diff --no-ext-diff --diff-filter=d --cached --unified=0 --no-prefix --minimal --exit-code src/quo src/quo2 | grep '^+' || echo '')
|
||||
|
||||
INVALID_CHANGES=$(echo "$CHANGES" | grep -E '(re-frame/dispatch|rf/dispatch|re-frame/subscribe|rf/subscribe|rf/sub|<sub|>evt)')
|
||||
|
||||
if test -n "$INVALID_CHANGES"; then
|
||||
echo "re-frame dispatch/subscribe is not allowed in quo/quo2 components"
|
||||
echo ''
|
||||
echo "$INVALID_CHANGES"
|
||||
exit 1
|
||||
fi
|
||||
@@ -1,11 +1,11 @@
|
||||
(ns quo2.components.avatars.account-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(def icon-color-value
|
||||
{:dark (get-in colors/customization [:dark :purple])
|
||||
{:dark (get-in colors/customization [:dark :purple])
|
||||
:light (get-in colors/customization [:light :purple])})
|
||||
|
||||
(defn get-border-radius [size]
|
||||
@@ -28,11 +28,11 @@
|
||||
[{:keys [size icon]
|
||||
:or {size 80
|
||||
icon :main-icons/placeholder}}]
|
||||
(let [icon-color (if (theme/dark?)
|
||||
(:dark icon-color-value)
|
||||
(:light icon-color-value))
|
||||
(let [icon-color (if (theme/dark?)
|
||||
(:dark icon-color-value)
|
||||
(:light icon-color-value))
|
||||
avatar-border-radius (get-border-radius size)
|
||||
inner-icon-size (get-inner-icon-sizes size)]
|
||||
inner-icon-size (get-inner-icon-sizes size)]
|
||||
[rn/view {:style {:width size
|
||||
:background-color icon-color
|
||||
:height size
|
||||
@@ -40,6 +40,5 @@
|
||||
:justify-content :center
|
||||
:align-items :center}}
|
||||
[icons/icon icon
|
||||
{:no-color true
|
||||
:container-style {:width inner-icon-size
|
||||
:height inner-icon-size}}]]))
|
||||
{:no-color true
|
||||
:size inner-icon-size}]]))
|
||||
|
||||
@@ -1,29 +1,28 @@
|
||||
(ns quo2.components.avatars.icon-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui.components.icons.icons :as icons]))
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(def sizes
|
||||
{:big 48
|
||||
{:big 48
|
||||
:medium 32
|
||||
:small 20})
|
||||
:small 20})
|
||||
|
||||
(defn icon-avatar
|
||||
[{:keys [size icon color opacity]
|
||||
:or {opacity 20}}]
|
||||
(let [component-size (size sizes)
|
||||
circle-color (colors/custom-color color 50 opacity)
|
||||
icon-color (colors/custom-color-by-theme color 50 60)
|
||||
icon-size (case size
|
||||
:big 20
|
||||
:medium 16
|
||||
:small 12)]
|
||||
circle-color (colors/custom-color color 50 opacity)
|
||||
icon-color (colors/custom-color-by-theme color 50 60)
|
||||
icon-size (case size
|
||||
:big 20
|
||||
:medium 16
|
||||
:small 12)]
|
||||
[rn/view {:style {:width component-size
|
||||
:height component-size
|
||||
:border-radius component-size
|
||||
:background-color circle-color
|
||||
:justify-content :center
|
||||
:align-items :center}}
|
||||
[icons/icon icon {:container-style {:width icon-size
|
||||
:height icon-size}
|
||||
:color icon-color}]]))
|
||||
[icons/icon icon {:size icon-size
|
||||
:color icon-color}]]))
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
(ns quo2.components.avatars.user-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[clojure.string :refer [upper-case split blank?]]
|
||||
[quo2.theme :refer [dark?]]
|
||||
[status-im.ui.components.fast-image :as fast-image]))
|
||||
[clojure.string :refer [upper-case split blank?]]))
|
||||
|
||||
(def sizes {:big {:outer 80
|
||||
:inner 72
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
(ns quo2.components.buttons.dynamic-button
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
@@ -60,7 +59,7 @@
|
||||
:customization-color customize jump-to and mention button color}"
|
||||
[_]
|
||||
(let [pressed? (reagent/atom false)]
|
||||
(fn [{:keys [type on-press count customization-color style]}]
|
||||
(fn [{:keys [type label on-press count customization-color style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press-in #(reset! pressed? true)
|
||||
:on-press-out #(reset! pressed? false)
|
||||
@@ -93,8 +92,8 @@
|
||||
:notification-up 0
|
||||
:search-with-label 8)}}
|
||||
(case type
|
||||
:jump-to (i18n/label :t/jump-to)
|
||||
:search-with-label (i18n/label :t/back)
|
||||
:jump-to label
|
||||
:search-with-label label
|
||||
(:mention :notification-down :notification-up) (str count))])
|
||||
(when (#{:jump-to :notification-down :notification-up} type)
|
||||
[icon-view type])]])))
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns quo2.components.code.snippet
|
||||
(:require ["react-native" :as react-native]
|
||||
["react-syntax-highlighter" :default Highlighter]
|
||||
[cljs-bean.core :as bean]
|
||||
[clojure.string :as str]
|
||||
[oops.core :as oops]
|
||||
@@ -10,7 +9,9 @@
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.react :as react]))
|
||||
[react-native.linear-gradient :as linear-gradient]
|
||||
[react-native.masked-view :as masked-view]
|
||||
[react-native.syntax-highlighter :as highlighter]))
|
||||
|
||||
;; Example themes:
|
||||
;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
|
||||
@@ -91,12 +92,12 @@
|
||||
max-text-height (some-> max-lines (* font-scale 18)) ;; 18 is font's line height.
|
||||
truncated? (and max-text-height (< max-text-height @text-height))
|
||||
maybe-mask-wrapper (if truncated?
|
||||
[react/masked-view
|
||||
[masked-view/masked-view
|
||||
{:mask-element
|
||||
(reagent/as-element
|
||||
[react/linear-gradient {:colors ["black" "transparent"]
|
||||
:locations [0.75 1]
|
||||
:style {:flex 1}}])}]
|
||||
[linear-gradient/linear-gradient {:colors ["black" "transparent"]
|
||||
:locations [0.75 1]
|
||||
:style {:flex 1}}])}]
|
||||
[:<>])]
|
||||
|
||||
[rn/view {:style {:overflow :hidden
|
||||
@@ -140,15 +141,15 @@
|
||||
:on-copy-press on-copy-press}])))
|
||||
|
||||
(defn snippet [{:keys [language max-lines on-copy-press]} children]
|
||||
[:> Highlighter {:language language
|
||||
:renderer (wrap-renderer-fn
|
||||
native-renderer {:max-lines max-lines
|
||||
:on-copy-press #(when on-copy-press
|
||||
(on-copy-press children))})
|
||||
;; Default props to adapt Highlighter for react-native.
|
||||
:CodeTag react-native/View
|
||||
:PreTag react-native/View
|
||||
:show-line-numbers false
|
||||
:style #js {}
|
||||
:custom-style #js {:backgroundColor nil}}
|
||||
[highlighter/highlighter {:language language
|
||||
:renderer (wrap-renderer-fn
|
||||
native-renderer {:max-lines max-lines
|
||||
:on-copy-press #(when on-copy-press
|
||||
(on-copy-press children))})
|
||||
;; Default props to adapt Highlighter for react-native.
|
||||
:CodeTag react-native/View
|
||||
:PreTag react-native/View
|
||||
:show-line-numbers false
|
||||
:style #js {}
|
||||
:custom-style #js {:backgroundColor nil}}
|
||||
children])
|
||||
|
||||
@@ -1,47 +1,44 @@
|
||||
(ns quo2.components.community.community-card-view
|
||||
(:require
|
||||
[quo2.components.community.community-view :as community-view]
|
||||
[status-im.utils.handlers :refer [<sub]]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[status-im.ui.screens.communities.icon :as communities.icon]))
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn community-card-view-item
|
||||
[{:keys [name description locked
|
||||
status tokens cover tags featured] :as community} on-press]
|
||||
(let [width (* (<sub [:dimensions/window-width]) 0.90)]
|
||||
[react/touchable-opacity {:on-press on-press}
|
||||
[react/view {:style (merge (styles/community-card 20)
|
||||
{:margin-bottom 16}
|
||||
(if featured
|
||||
{:margin-right 12
|
||||
:width width}
|
||||
{:flex 1
|
||||
:margin-horizontal 20}))}
|
||||
[react/view {:style {:height 230
|
||||
:border-radius 20}
|
||||
:on-press on-press}
|
||||
[react/view
|
||||
{:flex 1}
|
||||
[react/view (styles/community-cover-container 40)
|
||||
[react/image
|
||||
{:source cover
|
||||
:style
|
||||
{:flex 1
|
||||
:border-radius 20}}]]
|
||||
[react/view (styles/card-view-content-container 12)
|
||||
[react/view (styles/card-view-chat-icon 48)
|
||||
[communities.icon/community-icon-redesign community 48]]
|
||||
(when (= status :gated)
|
||||
[react/view (styles/permission-tag-styles)
|
||||
[community-view/permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}]])
|
||||
[community-view/community-title
|
||||
{:title name
|
||||
:description description}]
|
||||
[react/view {:style (styles/card-stats-position)}
|
||||
[community-view/community-stats-column :card-view]]
|
||||
[react/view {:style (styles/community-tags-position)}
|
||||
[community-view/community-tags tags]]]]]]]))
|
||||
status tokens cover tags featured]} on-press]
|
||||
[rn/touchable-opacity {:on-press on-press}
|
||||
[rn/view {:style (merge (style/community-card 20)
|
||||
{:margin-bottom 16}
|
||||
(if featured
|
||||
{:margin-right 12}
|
||||
{:flex 1
|
||||
:margin-horizontal 20}))}
|
||||
[rn/view {:style {:height 230
|
||||
:border-radius 20}
|
||||
:on-press on-press}
|
||||
[rn/view
|
||||
{:flex 1}
|
||||
[rn/view (style/community-cover-container 40)
|
||||
[rn/image
|
||||
{:source cover
|
||||
:style
|
||||
{:flex 1
|
||||
:border-radius 20}}]]
|
||||
[rn/view (style/card-view-content-container 12)
|
||||
[rn/view (style/card-view-chat-icon 48)]
|
||||
;;TODO new pure component based on quo2 should be implemented without status-im usage
|
||||
;[communities.icon/community-icon-redesign community 48]]
|
||||
(when (= status :gated)
|
||||
[rn/view (style/permission-tag-styles)
|
||||
[community-view/permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}]])
|
||||
[community-view/community-title
|
||||
{:title name
|
||||
:description description}]
|
||||
[rn/view {:style (style/card-stats-position)}
|
||||
[community-view/community-stats-column :card-view]]
|
||||
[rn/view {:style (style/community-tags-position)}
|
||||
[community-view/community-tags tags]]]]]]])
|
||||
|
||||
|
||||
@@ -5,92 +5,78 @@
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.counter.counter :as counter]
|
||||
[quo2.components.icon :as icons]
|
||||
[status-im.communities.core :as communities]
|
||||
[status-im.utils.handlers :refer [>evt]]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[status-im.ui.screens.communities.community :as community]
|
||||
[status-im.ui.screens.communities.icon :as communities.icon]))
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn communities-list-view-item [{:keys [id name locked? status notifications
|
||||
tokens background-color] :as community}]
|
||||
[react/view {:style (merge (styles/community-card 16)
|
||||
{:margin-bottom 12
|
||||
:margin-horizontal 20})}
|
||||
[react/view {:style {:height 56
|
||||
:border-radius 16}
|
||||
:on-press (fn []
|
||||
(>evt [::communities/load-category-states id])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id id}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn []
|
||||
[community/community-actions community])}])}
|
||||
[react/view {:flex 1}
|
||||
[react/view {:flex-direction :row
|
||||
:border-radius 16
|
||||
:padding-horizontal 12
|
||||
:align-items :center
|
||||
:padding-vertical 8
|
||||
:background-color background-color}
|
||||
[react/view
|
||||
[communities.icon/community-icon-redesign community 32]]
|
||||
[react/view {:flex 1
|
||||
:margin-horizontal 12}
|
||||
(defn communities-list-view-item [props {:keys [name locked? status notifications
|
||||
tokens background-color]}]
|
||||
[rn/view {:style (merge (style/community-card 16)
|
||||
{:margin-bottom 12
|
||||
:margin-horizontal 20})}
|
||||
[rn/touchable-highlight (merge {:style {:height 56
|
||||
:border-radius 16}}
|
||||
props)
|
||||
[rn/view {:flex 1}
|
||||
[rn/view {:flex-direction :row
|
||||
:border-radius 16
|
||||
:padding-horizontal 12
|
||||
:align-items :center
|
||||
:padding-vertical 8
|
||||
:background-color background-color}
|
||||
[rn/view]
|
||||
;;TODO new pure component based on quo2 should be implemented without status-im usage
|
||||
;[communities.icon/community-icon-redesign community 32]]
|
||||
[rn/view {:flex 1
|
||||
:margin-horizontal 12}
|
||||
[text/text {:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:accessibility-label :community-name-text
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail
|
||||
:style {:color (when (= notifications :muted)
|
||||
(colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-60))}}
|
||||
:style {:color (when (= notifications :muted)
|
||||
(colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-60))}}
|
||||
name]
|
||||
[community-view/community-stats-column :list-view]]
|
||||
(if (= status :gated)
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]
|
||||
(if (= status :gated)
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]
|
||||
(cond
|
||||
(= notifications :unread-messages-count)
|
||||
[react/view {:style {:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-60)}}]
|
||||
[rn/view {:style {:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-60)}}]
|
||||
|
||||
(= notifications :unread-mentions-count)
|
||||
[counter/counter {:type :default} 5]
|
||||
|
||||
(= notifications :muted)
|
||||
[icons/icon :main-icons2/muted {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:resize-mode :center
|
||||
:size 20
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-50)}]))]]]])
|
||||
[icons/icon :main-icons2/muted {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:resize-mode :center
|
||||
:size 20
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-50)}]))]]]])
|
||||
|
||||
(defn communities-membership-list-item [{:keys [id name status tokens locked?] :as community}]
|
||||
[react/view {:margin-bottom 20}
|
||||
[react/touchable-highlight {:underlay-color colors/primary-50-opa-5
|
||||
:style {:border-radius 12}
|
||||
:on-press (fn []
|
||||
(>evt [::communities/load-category-states id])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id id}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn []
|
||||
[community/community-actions community])}])}
|
||||
[react/view {:flex 1}
|
||||
[react/view {:flex-direction :row
|
||||
:border-radius 16
|
||||
:align-items :center}
|
||||
[communities.icon/community-icon-redesign community 32]
|
||||
[react/view {:flex 1
|
||||
:margin-left 12
|
||||
:justify-content :center}
|
||||
(defn communities-membership-list-item [props {:keys [name status tokens locked?]}]
|
||||
[rn/view {:margin-bottom 20}
|
||||
[rn/touchable-highlight (merge {:underlay-color colors/primary-50-opa-5
|
||||
:style {:border-radius 12}}
|
||||
props)
|
||||
[rn/view {:flex 1}
|
||||
[rn/view {:flex-direction :row
|
||||
:border-radius 16
|
||||
:align-items :center}
|
||||
;;TODO new pure component based on quo2 should be implemented without status-im usage
|
||||
;[communities.icon/community-icon-redesign community 32]
|
||||
[rn/view {:flex 1
|
||||
:margin-left 12
|
||||
:justify-content :center}
|
||||
[text/text
|
||||
{:accessibility-label :chat-name-text
|
||||
:number-of-lines 1
|
||||
@@ -99,7 +85,7 @@
|
||||
:size :paragraph-1}
|
||||
name]]
|
||||
(when (= status :gated)
|
||||
[react/view {:justify-content :center
|
||||
:margin-right 12}
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]])]]]])
|
||||
[rn/view {:justify-content :center
|
||||
:margin-right 12}
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]])]]]])
|
||||
@@ -4,41 +4,32 @@
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.tags.permission-tag :as permission]
|
||||
[quo2.components.tags.tag :as tag]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.utils.money :as money]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.screens.communities.styles :as styles]))
|
||||
[quo2.components.tags.tag :as tag]
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn format-members [count]
|
||||
(if (> count 1000000)
|
||||
(str (money/with-precision (/ count 1000000) 1) (i18n/label :t/M))
|
||||
(if (and (> count 999) (< count 1000000))
|
||||
(str (money/with-precision (/ count 1000) 1) (i18n/label :t/K))
|
||||
count)))
|
||||
|
||||
(defn community-stats [{:keys [icon count icon-color]}]
|
||||
[react/view (styles/stats-count-container)
|
||||
[react/view {:margin-right 4}
|
||||
(defn community-stats [{:keys [icon members-count icon-color]}]
|
||||
[rn/view (style/stats-count-container)
|
||||
[rn/view {:margin-right 4}
|
||||
[icons/icon icon {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:resize-mode :center
|
||||
:size 16
|
||||
:color icon-color}]]
|
||||
[text/text {:weight :regular
|
||||
:size :paragraph-1}
|
||||
(format-members count)]])
|
||||
:resize-mode :center
|
||||
:size 16
|
||||
:color icon-color}]]
|
||||
[text/text {:weight :regular
|
||||
:size :paragraph-1}
|
||||
members-count]])
|
||||
|
||||
(defn community-stats-column [type]
|
||||
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
|
||||
[react/view (if (= type :card-view)
|
||||
(styles/card-stats-container)
|
||||
(styles/list-stats-container))
|
||||
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
|
||||
[rn/view (if (= type :card-view)
|
||||
(style/card-stats-container)
|
||||
(style/list-stats-container))
|
||||
[community-stats {:icon :main-icons2/group
|
||||
:count "629.2K"
|
||||
:members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from outside this component
|
||||
:icon-color icon-color}]
|
||||
[community-stats {:icon :main-icons2/lightning
|
||||
:count "112.1K"
|
||||
:members-count "112.1K"
|
||||
:icon-color icon-color}]
|
||||
(when (= type :card-view)
|
||||
[community-stats {:icon :main-icons2/placeholder
|
||||
@@ -46,36 +37,36 @@
|
||||
:icon-color icon-color}])]))
|
||||
|
||||
(defn community-tags [tags]
|
||||
[react/view (styles/community-tags-container)
|
||||
[rn/view (style/community-tags-container)
|
||||
(for [{:keys [id tag-label resource]} tags]
|
||||
^{:key id}
|
||||
[react/view {:margin-right 8}
|
||||
[rn/view {:margin-right 8}
|
||||
[tag/tag
|
||||
{:id id
|
||||
:size 24
|
||||
:label tag-label
|
||||
:type :emoji
|
||||
:labelled true
|
||||
:resource resource}]])])
|
||||
{:id id
|
||||
:size 24
|
||||
:label tag-label
|
||||
:type :emoji
|
||||
:labelled true
|
||||
:resource resource}]])])
|
||||
|
||||
(defn community-title [{:keys [title description size] :or {size :small}}]
|
||||
[react/view (styles/community-title-description-container (if (= size :large) 56 32))
|
||||
[rn/view (style/community-title-description-container (if (= size :large) 56 32))
|
||||
(when title
|
||||
[text/text
|
||||
{:accessibility-label :chat-name-text
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail
|
||||
:weight :semi-bold
|
||||
:size (if (= size :large) :heading-1 :heading-2)}
|
||||
:size (if (= size :large) :heading-1 :heading-2)}
|
||||
title])
|
||||
(when description
|
||||
[text/text
|
||||
{:accessibility-label :community-description-text
|
||||
:number-of-lines 2
|
||||
:ellipsize-mode :tail
|
||||
:weight :regular
|
||||
:size :paragraph-1
|
||||
:style {:margin-top (if (= size :large) 8 2)}}
|
||||
:weight :regular
|
||||
:size :paragraph-1
|
||||
:style {:margin-top (if (= size :large) 8 2)}}
|
||||
description])])
|
||||
|
||||
(defn permission-tag-container [{:keys [locked? tokens]}]
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.community.discover-card
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[status-im.ui.components.react :as react]))
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
;; Discover card placeholders images.
|
||||
;; TODO replaced when real data is available
|
||||
@@ -11,13 +11,13 @@
|
||||
{:id 2 :column-images [{}]}]})
|
||||
|
||||
(defn card-title-and-description [title description]
|
||||
[react/view
|
||||
[rn/view
|
||||
{:flex 1
|
||||
:padding-top 8
|
||||
:padding-bottom 8
|
||||
:border-radius 12}
|
||||
[react/view {:flex 1
|
||||
:padding-horizontal 12}
|
||||
[rn/view {:flex 1
|
||||
:padding-horizontal 12}
|
||||
[text/text {:accessibility-label :community-name-text
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
@@ -35,53 +35,53 @@
|
||||
description]]])
|
||||
|
||||
(defn placeholder-list-images [{:keys [images width height border-radius]}]
|
||||
[react/view
|
||||
[react/view {:justify-content :center}
|
||||
[rn/view
|
||||
[rn/view {:justify-content :center}
|
||||
(for [{:keys [id]} images]
|
||||
^{:key id}
|
||||
[react/view {:border-radius border-radius
|
||||
:margin-top 4
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])]])
|
||||
[rn/view {:border-radius border-radius
|
||||
:margin-top 4
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])]])
|
||||
|
||||
(defn placeholder-row-images [{:keys [first-image last-image images width height
|
||||
border-radius]}]
|
||||
[react/view
|
||||
[rn/view
|
||||
(when first-image
|
||||
[react/view {:border-bottom-right-radius 6
|
||||
:border-bottom-left-radius 6
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])
|
||||
[rn/view {:border-bottom-right-radius 6
|
||||
:border-bottom-left-radius 6
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])
|
||||
(when images
|
||||
[placeholder-list-images {:images images
|
||||
:width 32
|
||||
:height 32
|
||||
:border-radius 6}])
|
||||
(when last-image
|
||||
[react/view {:border-top-left-radius border-radius
|
||||
:border-top-right-radius 6
|
||||
:margin-top 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])])
|
||||
[rn/view {:border-top-left-radius border-radius
|
||||
:border-top-right-radius 6
|
||||
:margin-top 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])])
|
||||
|
||||
(defn discover-card [{:keys [title description on-press accessibility-label]}]
|
||||
(let [on-joined-images (get images :images)]
|
||||
[react/touchable-without-feedback
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-press
|
||||
:accessibility-label accessibility-label}
|
||||
[react/view (merge (styles/community-card 16)
|
||||
{:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-90)}
|
||||
{:flex-direction :row
|
||||
:margin-horizontal 20
|
||||
:height 56
|
||||
:padding-right 12})
|
||||
[rn/view (merge (style/community-card 16)
|
||||
{:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-90)}
|
||||
{:flex-direction :row
|
||||
:margin-horizontal 20
|
||||
:height 56
|
||||
:padding-right 12})
|
||||
[card-title-and-description title description]
|
||||
(for [{:keys [id column-images]} on-joined-images]
|
||||
^{:key id}
|
||||
@@ -91,5 +91,4 @@
|
||||
:height (if (= id 1) 8 26)
|
||||
:border-radius 6
|
||||
:first-image "" ; TODO replace with real data
|
||||
:last-image ""}]) ; TODO replace with real data
|
||||
]]))
|
||||
:last-image ""}])]])) ; TODO replace with real data
|
||||
|
||||
+2
-3
@@ -1,6 +1,5 @@
|
||||
(ns status-im.ui.screens.communities.styles
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]))
|
||||
(ns quo2.components.community.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def category-item
|
||||
{:flex 1
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.dividers.divider-label
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as markdown.text]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(def chevron-icon-container-width 20)
|
||||
|
||||
@@ -42,8 +42,7 @@
|
||||
[icons/icon
|
||||
:main-icons/chevron-down
|
||||
{:color text-and-icon-color
|
||||
:width chevron-icon-container-width
|
||||
:height chevron-icon-container-height}])
|
||||
:size chevron-icon-container-width}])
|
||||
(when (pos? counter-value)
|
||||
[rn/view {:style {:border-radius 6
|
||||
:height 16
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns quo2.components.drawers.action-drawers
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[react-native.core :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
@@ -17,20 +16,20 @@
|
||||
danger?
|
||||
on-press]}]
|
||||
[rn/touchable-opacity {:on-press on-press}
|
||||
[react/view {:style
|
||||
{:height (if sub-label 56 47)
|
||||
:margin-horizontal 20
|
||||
:flex-direction :row}}
|
||||
[react/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:margin-right 12
|
||||
:width 20}}
|
||||
[rn/view {:style
|
||||
{:height (if sub-label 56 47)
|
||||
:margin-horizontal 20
|
||||
:flex-direction :row}}
|
||||
[rn/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:margin-right 12
|
||||
:width 20}}
|
||||
[icon/icon icon
|
||||
{:color (get-icon-color danger?)
|
||||
:size 20}]]
|
||||
[react/view
|
||||
[rn/view
|
||||
{:style
|
||||
{:flex 1
|
||||
:justify-content :center}}
|
||||
@@ -48,11 +47,11 @@
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||
sub-label])]
|
||||
(when right-icon
|
||||
[react/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:width 20}}
|
||||
[rn/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:width 20}}
|
||||
[icon/icon right-icon
|
||||
{:color (get-icon-color danger?)
|
||||
:size 20}]])]])
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.icon
|
||||
(:require
|
||||
[quo2.components.icons.icons :as icons]
|
||||
[status-im.ui.components.react :as react]
|
||||
[clojure.string :as string]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.icons.icons :as icons]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn memo-icon-fn
|
||||
@@ -12,7 +12,7 @@
|
||||
:or {accessibility-label :icon}}]
|
||||
(let [size (or size 20)]
|
||||
^{:key icon-name}
|
||||
[react/image
|
||||
[rn/image
|
||||
{:style
|
||||
(merge {:width size
|
||||
:height size}
|
||||
|
||||
@@ -6,38 +6,50 @@
|
||||
|
||||
(defn themes [type]
|
||||
(case type
|
||||
:main {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
|
||||
:background (theme-colors colors/white colors/neutral-90)
|
||||
:text-color (theme-colors colors/neutral-100 colors/white)}
|
||||
:danger {:icon-color (theme-colors colors/danger-50 colors/danger-60)
|
||||
:background (theme-colors colors/white colors/neutral-90)
|
||||
:text-color (theme-colors colors/danger-50 colors/danger-60)}))
|
||||
:main {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
|
||||
:background (theme-colors colors/white colors/neutral-90)
|
||||
:text-color (theme-colors colors/neutral-100 colors/white)}
|
||||
:danger {:icon-color (theme-colors colors/danger-50 colors/danger-60)
|
||||
:background (theme-colors colors/white colors/neutral-90)
|
||||
:text-color (theme-colors colors/danger-50 colors/danger-60)}))
|
||||
|
||||
(defn menu-item
|
||||
[{:keys [type title accessibility-label icon on-press]
|
||||
[{:keys [type title description accessibility-label icon on-press arrow?]
|
||||
:or {type :main}}]
|
||||
(let [{:keys [icon-color text-color background]} (themes type)]
|
||||
[rn/touchable-opacity
|
||||
(merge {:accessibility-label accessibility-label
|
||||
:style {:background-color background
|
||||
:height 48
|
||||
:flex-direction :row
|
||||
:align-items :center}}
|
||||
:style {:background-color background
|
||||
:height 48
|
||||
:flex-direction :row
|
||||
:align-items :center}}
|
||||
(when on-press
|
||||
{:on-press on-press}))
|
||||
[rn/view {:style {:flex-direction :row
|
||||
:flex-grow 0
|
||||
:flex-shrink 1
|
||||
:padding-horizontal 20}}
|
||||
[rn/view {:style {:width 20
|
||||
:height 20
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:margin-right 12}}
|
||||
[rn/view {:style {:flex-direction :row
|
||||
:flex-grow 0
|
||||
:flex-shrink 1
|
||||
:padding-horizontal 20
|
||||
:align-items :center}}
|
||||
[rn/view {:style {:width 20
|
||||
:height 20
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:margin-right 12}}
|
||||
[icons/icon icon {:color icon-color}]]
|
||||
[text/text {:weight :medium
|
||||
:style {:color text-color}
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:size :paragraph-1}
|
||||
title]]]))
|
||||
[rn/view
|
||||
[text/text {:weight :medium
|
||||
:style {:color text-color}
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:size :paragraph-1}
|
||||
title]
|
||||
(when description
|
||||
[text/text {:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:size :label}
|
||||
description])]]
|
||||
(when arrow?
|
||||
[rn/view {:style {:position :absolute
|
||||
:right 8}}
|
||||
[icons/icon :main-icons2/chevron-right {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}]])]))
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
(ns quo2.components.list-items.preview-list
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[status-im.ui.components.fast-image :as fast-image]
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[quo2.components.markdown.text :as quo2.text]))
|
||||
|
||||
@@ -57,7 +56,7 @@
|
||||
transparent-color
|
||||
(colors/theme-colors light-color dark-color override-theme)))
|
||||
|
||||
(defn overflow-label [label size transparent? border-radius margin-left override-theme]
|
||||
(defn overflow-label [label size transparent? border-radius margin-left override-theme more-than-99-label]
|
||||
[rn/view {:style {:width size
|
||||
:height size
|
||||
:margin-left margin-left
|
||||
@@ -90,7 +89,7 @@
|
||||
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
|
||||
(if (< label 100)
|
||||
(str "+" label)
|
||||
(i18n/label :counter-99-plus))])])
|
||||
more-than-99-label)])])
|
||||
|
||||
(defn border-type [type]
|
||||
(case type
|
||||
@@ -106,7 +105,7 @@
|
||||
:transparent? overflow-label transparent?}
|
||||
items preview list items (only 4 items is required for preview)
|
||||
"
|
||||
[{:keys [type size list-size transparent? override-theme]} items]
|
||||
[{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
|
||||
(let [items-arr (into [] items)
|
||||
list-size (or list-size (count items))
|
||||
margin-left (get-in params [size :margin-left])
|
||||
@@ -121,4 +120,4 @@
|
||||
[list-item index type size (get items-arr index) list-size
|
||||
margin-left hole-size hole-radius hole-x hole-y border-radius])
|
||||
(when (> list-size 4)
|
||||
[overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme])]))
|
||||
[overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme more-than-99-label])]))
|
||||
|
||||
@@ -6,10 +6,7 @@
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.components.react :refer [pressable-class]]
|
||||
[status-im.utils.handlers :refer [>evt]]))
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
;;; helpers
|
||||
(def themes
|
||||
@@ -84,7 +81,7 @@
|
||||
:color (get-color :time)}} str])
|
||||
|
||||
(defn info-button [on-press]
|
||||
[pressable-class
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-press}
|
||||
[icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]])
|
||||
|
||||
@@ -99,7 +96,7 @@
|
||||
[rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}]
|
||||
[circle]])
|
||||
|
||||
(defn body [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]
|
||||
(defn body [timestamp-far timestamp-near on-info-button-pressed on-press warning-label]
|
||||
[rn/view {:flex 1}
|
||||
[rn/view
|
||||
{:flex-direction :row
|
||||
@@ -109,12 +106,10 @@
|
||||
[timestamp timestamp-far]
|
||||
(when on-info-button-pressed [info-button on-info-button-pressed])]
|
||||
|
||||
[pressable-class
|
||||
[rn/touchable-without-feedback
|
||||
{:style {:flex 1 :margin-top 16 :margin-bottom 20}
|
||||
:on-press #(when (and chat-id gap-ids)
|
||||
(>evt [:chat.ui/fill-gaps chat-id gap-ids]))}
|
||||
[text/text
|
||||
(i18n/label :messages-gap-warning)]]
|
||||
:on-press #(when on-press (on-press))}
|
||||
[text/text warning-label]]
|
||||
|
||||
[timestamp timestamp-near]])
|
||||
|
||||
@@ -124,10 +119,10 @@
|
||||
if `on-info-button-pressed` fn is provided, the info button will show up and is pressable"
|
||||
[{:keys [timestamp-far
|
||||
timestamp-near
|
||||
gap-ids
|
||||
chat-id
|
||||
on-info-button-pressed
|
||||
style]}]
|
||||
style
|
||||
on-press
|
||||
warning-label]}]
|
||||
(let [body-height (reagent/atom nil)]
|
||||
(fn []
|
||||
[rn/view
|
||||
@@ -145,6 +140,6 @@
|
||||
style)
|
||||
|
||||
[timeline]
|
||||
[body timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]]
|
||||
[body timestamp-far timestamp-near on-info-button-pressed on-press warning-label]]
|
||||
[vborder :left body-height]
|
||||
[vborder :right body-height]])))
|
||||
|
||||
@@ -6,8 +6,7 @@
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.utils.core :as utils]))
|
||||
[utils :as utils]))
|
||||
|
||||
(def themes-landed {:pinned colors/primary-50-opa-5
|
||||
:added colors/primary-50-opa-5
|
||||
@@ -54,7 +53,7 @@
|
||||
|
||||
(defmulti sm-render :type)
|
||||
|
||||
(defmethod sm-render :deleted [{:keys [label timestamp-str]}]
|
||||
(defmethod sm-render :deleted [{:keys [label timestamp-str labels]}]
|
||||
[rn/view {:align-items :center
|
||||
:justify-content :space-between
|
||||
:flex 1
|
||||
@@ -67,10 +66,10 @@
|
||||
[text/text {:size :paragraph-2
|
||||
:style {:color (get-color :text)
|
||||
:margin-right 5}}
|
||||
(i18n/label (or label :message-deleted))]
|
||||
(or label (:message-deleted labels))]
|
||||
[sm-timestamp timestamp-str]]])
|
||||
|
||||
(defmethod sm-render :added [{:keys [state mentions timestamp-str]}]
|
||||
(defmethod sm-render :added [{:keys [state mentions timestamp-str labels]}]
|
||||
[rn/view {:align-items :center
|
||||
:flex-direction :row}
|
||||
[sm-icon {:icon :main-icons/add-user16
|
||||
@@ -84,14 +83,14 @@
|
||||
:style {:color (get-color :text)
|
||||
:margin-left 3
|
||||
:margin-right 3}}
|
||||
(i18n/label :added)]
|
||||
(:added labels)]
|
||||
[sm-user-avatar (:image (second mentions))]
|
||||
[text/text {:weight :semi-bold
|
||||
:size :paragraph-2}
|
||||
(:name (second mentions))]
|
||||
[sm-timestamp timestamp-str]])
|
||||
|
||||
(defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str]}]
|
||||
(defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str labels]}]
|
||||
[rn/view {:flex-direction :row
|
||||
:flex 1
|
||||
:align-items :center}
|
||||
@@ -110,7 +109,7 @@
|
||||
:margin-right 2}
|
||||
[text/text {:size :paragraph-2
|
||||
:style {:color (get-color :text)}}
|
||||
(i18n/label :pinned-a-message)]]
|
||||
(:pinned-a-message labels)]]
|
||||
[sm-timestamp timestamp-str]]
|
||||
[rn/view {:flex-direction :row}
|
||||
[rn/view {:flex-direction :row
|
||||
@@ -137,7 +136,7 @@
|
||||
(utils/truncate-str (:info content) 24)])]]]])
|
||||
|
||||
(defn system-message
|
||||
[{:keys [type style non-pressable? animate-landing?] :as message}]
|
||||
[{:keys [type style non-pressable? animate-landing? labels] :as message}]
|
||||
[:f>
|
||||
(fn []
|
||||
(let [sv-color (reanimated/use-shared-value
|
||||
@@ -159,4 +158,4 @@
|
||||
:padding-horizontal 11
|
||||
:background-color sv-color}
|
||||
style))}
|
||||
[sm-render message]]))])
|
||||
[sm-render message labels]]))])
|
||||
|
||||
@@ -3,9 +3,10 @@
|
||||
[quo2.components.buttons.dynamic-button :as dynamic-button]))
|
||||
|
||||
(defn dynamic-button-view [type dynamic-buttons style]
|
||||
(when-let [{:keys [count on-press customization-color]} (get dynamic-buttons type)]
|
||||
(when-let [{:keys [count on-press customization-color label]} (get dynamic-buttons type)]
|
||||
[dynamic-button/dynamic-button
|
||||
{:type type
|
||||
:label label
|
||||
:on-press on-press
|
||||
:count count
|
||||
:style style
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[status-im.utils.dimensions :as dimensions]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[clojure.string :as string]))
|
||||
|
||||
@@ -185,8 +184,7 @@
|
||||
mid-section
|
||||
left-section
|
||||
right-section-buttons]}]
|
||||
(let [{:keys [height width]} (dimensions/window)
|
||||
put-middle-section-on-left? (or align-mid?
|
||||
(let [put-middle-section-on-left? (or align-mid?
|
||||
(> (count right-section-buttons) 1))
|
||||
mid-section-props
|
||||
{:type (:type mid-section)
|
||||
@@ -197,15 +195,12 @@
|
||||
:right-icon (:right-icon mid-section)
|
||||
:icon (:icon mid-section)
|
||||
:left-icon (:left-icon mid-section)}]
|
||||
[rn/view {:style (cond->
|
||||
{:display :flex
|
||||
:flex-direction :row
|
||||
:width width
|
||||
:height (* 0.0497 height)
|
||||
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
|
||||
:align-items :center
|
||||
:padding-horizontal 20
|
||||
:justify-content :space-between}
|
||||
[rn/view {:style (cond-> {:display :flex
|
||||
:flex-direction :row
|
||||
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
|
||||
:align-items :center
|
||||
:padding-horizontal 20
|
||||
:justify-content :space-between}
|
||||
page-nav-background-uri (assoc :background-color page-nav-color)
|
||||
page-nav-color (assoc :background page-nav-background-uri))}
|
||||
[rn/view {:style {:flex 1
|
||||
|
||||
@@ -2,8 +2,8 @@
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(def themes {:light {:default {:background-color colors/neutral-20
|
||||
:icon-color colors/neutral-50
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.tabs.tab :as tab]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.utils.core :as utils]
|
||||
[status-im.utils.number :as number-utils]
|
||||
[utils :as utils]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.notifications.notification-dot :refer [notification-dot]]))
|
||||
[quo2.components.notifications.notification-dot :refer [notification-dot]]
|
||||
[react-native.masked-view :as masked-view]
|
||||
[react-native.linear-gradient :as linear-gradient]))
|
||||
|
||||
(def default-tab-size 32)
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
;; Truncate to avoid unnecessary rendering.
|
||||
(if (> fade-percentage 0.99)
|
||||
0.99
|
||||
(number-utils/naive-round fade-percentage 2))))
|
||||
(utils/naive-round fade-percentage 2))))
|
||||
|
||||
(defn scrollable-tabs
|
||||
"Just like the component `tabs`, displays horizontally scrollable tabs with
|
||||
@@ -98,15 +98,17 @@
|
||||
size default-tab-size}
|
||||
:as props}]
|
||||
(let [maybe-mask-wrapper (if fade-end?
|
||||
[react/masked-view
|
||||
{:mask-element (reagent/as-element
|
||||
[react/linear-gradient {:colors [:black :transparent]
|
||||
:locations [(get @fading :fade-end-percentage) 1]
|
||||
:start {:x 0 :y 0}
|
||||
:end {:x 1 :y 0}
|
||||
:pointer-events :none
|
||||
:style {:width "100%"
|
||||
:height "100%"}}])}]
|
||||
[masked-view/masked-view
|
||||
{:mask-element
|
||||
(reagent/as-element
|
||||
[linear-gradient/linear-gradient
|
||||
{:colors [:black :transparent]
|
||||
:locations [(get @fading :fade-end-percentage) 1]
|
||||
:start {:x 0 :y 0}
|
||||
:end {:x 1 :y 0}
|
||||
:pointer-events :none
|
||||
:style {:width "100%"
|
||||
:height "100%"}}])}]
|
||||
[:<>])]
|
||||
(conj maybe-mask-wrapper
|
||||
[rn/flat-list
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
(ns quo2.components.tags.permission-tag
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.tags.base-tag :as base-tag]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.components.tags.base-tag :as base-tag]))
|
||||
|
||||
(defn outer-resource-container [size background-color]
|
||||
{:background-color background-color
|
||||
@@ -28,8 +27,8 @@
|
||||
(defn extra-count [total-group-count selected-count size background-color]
|
||||
(let [extra-group-count (- total-group-count selected-count)]
|
||||
(when (> extra-group-count 0)
|
||||
[react/view (outer-resource-container size background-color)
|
||||
[react/view (extra-count-styles size)
|
||||
[rn/view (outer-resource-container size background-color)
|
||||
[rn/view (extra-count-styles size)
|
||||
(if (< extra-group-count 4)
|
||||
[text/text {:size :label
|
||||
:style {:align-items :center
|
||||
@@ -58,20 +57,20 @@
|
||||
:or {size 24}}]
|
||||
(let [tokens-count (count group)
|
||||
selected-tokens (take (selected-token-count group) group)]
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
[rn/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [token-icon]} selected-tokens]
|
||||
^{:key token-icon}
|
||||
[react/view {:flex-direction :row}
|
||||
[react/view (outer-resource-container size background-color)
|
||||
[react/image {:source token-icon
|
||||
:style {:height (case size 32 28 24 20)
|
||||
:width (case size 32 28 24 20)
|
||||
:border-radius size}}]]])
|
||||
[rn/view {:flex-direction :row}
|
||||
[rn/view (outer-resource-container size background-color)
|
||||
[rn/image {:source token-icon
|
||||
:style {:height (case size 32 28 24 20)
|
||||
:width (case size 32 28 24 20)
|
||||
:border-radius size}}]]])
|
||||
|
||||
[extra-count tokens-count (count selected-tokens) size]
|
||||
(when-not last-group
|
||||
[react/view {:align-items :center}
|
||||
[rn/view {:align-items :center}
|
||||
[text/text {:weight :medium
|
||||
:size (case size 32 :paragraph-2 24 :label)
|
||||
:style {:color (colors/theme-colors
|
||||
@@ -80,7 +79,7 @@
|
||||
:padding-left 4
|
||||
:text-transform :lowercase
|
||||
:padding-right (case size 32 16 24 12)}}
|
||||
(i18n/label :t/or)]])])))
|
||||
"or"]])])))
|
||||
|
||||
(defn selected-group-count [tokens]
|
||||
(cond
|
||||
@@ -94,8 +93,8 @@
|
||||
:or {size 24}}]
|
||||
(let [selected-groups (take (selected-group-count tokens) tokens)
|
||||
last-group-id ((last selected-groups) :id)]
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
[rn/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [id group]} selected-groups]
|
||||
^{:key id}
|
||||
[token-group {:group group
|
||||
@@ -110,11 +109,11 @@
|
||||
[base-tag/base-tag {:background-color background-color
|
||||
:size size
|
||||
:type :permission}
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :flex-end}
|
||||
[react/view {:padding-left (case 32 8 24 6)
|
||||
:padding-right (case size 32 16 24 12)}
|
||||
[rn/view {:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :flex-end}
|
||||
[rn/view {:padding-left (case 32 8 24 6)
|
||||
:padding-right (case size 32 16 24 12)}
|
||||
[icons/icon (if locked :main-icons2/locked
|
||||
:main-icons2/unlocked)
|
||||
{:resize-mode :center
|
||||
|
||||
@@ -3,8 +3,7 @@
|
||||
[quo2.theme :as quo2.theme]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def default-container-style
|
||||
{:border-radius 20
|
||||
@@ -54,7 +53,7 @@
|
||||
:background-color colors/success-50-opa-10
|
||||
:icon :verified
|
||||
:border-color colors/success-50-opa-20
|
||||
:label (or label (i18n/label :positive))
|
||||
:label label
|
||||
:text-color (if (= theme :light) colors/success-50
|
||||
colors/success-60)}])
|
||||
|
||||
@@ -64,7 +63,7 @@
|
||||
:icon :untrustworthy
|
||||
:background-color colors/danger-50-opa-10
|
||||
:border-color colors/danger-50-opa-20
|
||||
:label (or label (i18n/label :negative))
|
||||
:label label
|
||||
:text-color (if (= theme :light)
|
||||
colors/danger-50
|
||||
colors/danger-60)}])
|
||||
@@ -73,7 +72,7 @@
|
||||
[size theme label]
|
||||
[base-tag {:size size
|
||||
:icon :pending
|
||||
:label (or label (i18n/label :pending))
|
||||
:label label
|
||||
:background-color (if (= theme :light)
|
||||
colors/neutral-10
|
||||
colors/neutral-80)
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
(ns quo2.components.wallet.network-amount
|
||||
(:require [clojure.string :as string]
|
||||
[react-native.core :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn network-amount
|
||||
"[network-amount opts]
|
||||
@@ -13,7 +11,7 @@
|
||||
:network-name \"Mainnet\" ;; shown network name
|
||||
:icon :main-icons2/ethereum ;; key of icon belonging to the network
|
||||
:eth-value 1.2345678 ;; shown ETH value}"
|
||||
[{:keys [show-right-border? style network-name icon eth-value] :as _opts}]
|
||||
[{:keys [show-right-border? style network-name icon eth-value labels] :as _opts}]
|
||||
[rn/view (merge {:accessibility-label :network-amount
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:border-radius 16
|
||||
@@ -35,7 +33,7 @@
|
||||
[text/text {:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
|
||||
eth-value \space (i18n/label :t/eth)]
|
||||
eth-value \space (:eth labels)]
|
||||
[rn/view {:style {:border-right-width (when show-right-border? 1)
|
||||
:border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
|
||||
:padding-left 8
|
||||
@@ -44,4 +42,4 @@
|
||||
[text/text {:weight :medium
|
||||
:size :label
|
||||
:style {:color colors/neutral-50}}
|
||||
(string/lower-case (i18n/label :t/on)) \space network-name]]]])
|
||||
(:on labels) \space network-name]]]])
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
[quo2.components.wallet.network-amount :refer [network-amount]]))
|
||||
|
||||
(defn network-breakdown
|
||||
[{:keys [top-value network-conversions]}]
|
||||
[{:keys [top-value network-conversions labels]}]
|
||||
[rn/view {:style {:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-95)
|
||||
@@ -41,5 +41,6 @@
|
||||
[network-amount {:show-right-border? (not= idx last-item-idx)
|
||||
:icon icon
|
||||
:network-name network
|
||||
:eth-value conversion}]])
|
||||
:eth-value conversion
|
||||
:labels labels}]])
|
||||
network-conversions))]])
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
(ns quo2.components.wallet.token-overview
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[react-native.core :as rn]
|
||||
[clojure.string :as string]
|
||||
[status-im.utils.currency :as currencies]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
|
||||
|
||||
@@ -42,15 +40,15 @@
|
||||
}"
|
||||
[]
|
||||
(fn
|
||||
[{:keys [currency price percentage-change] :or {currency :usd price "0.00" percentage-change "0.0"}}]
|
||||
[{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}]
|
||||
(let [direction (get-direction percentage-change)]
|
||||
[rn/view {:style container-style}
|
||||
[text/text {:number-of-lines 1
|
||||
:size :paragraph-2} (i18n/label :token-price)]
|
||||
:size :paragraph-2} label]
|
||||
[text/text {:style {:margin-top 4}
|
||||
:weight :semi-bold
|
||||
:number-of-lines 1
|
||||
:size :heading-2} (str (get-in currencies/currencies [currency :symbol]) price)]
|
||||
:size :heading-2} (str currency price)]
|
||||
|
||||
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
|
||||
(when (not (zero? direction)) [icons/icon (if (>= direction 0) :main-icons2/price-increase12 :main-icons2/price-decrease12)
|
||||
@@ -76,7 +74,7 @@
|
||||
:percentage-change :string
|
||||
}"
|
||||
[]
|
||||
(fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {currency :usd account-balance "0.00" price "0.00" percentage-change "0.0"}}]
|
||||
(fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {account-balance "0.00" price "0.00" percentage-change "0.0"}}]
|
||||
(let [direction (get-direction percentage-change)]
|
||||
[rn/view {:style container-style}
|
||||
[text/text {:weight :regular
|
||||
@@ -85,20 +83,19 @@
|
||||
[rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}}
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :semi-bold
|
||||
:size :heading-1} (str (get-in currencies/currencies [currency :symbol]) account-balance)]
|
||||
:size :heading-1} (str currency account-balance)]
|
||||
[rn/image {:source token-img-src
|
||||
:style {:height 32
|
||||
:width 32}}]]
|
||||
[rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}}
|
||||
(when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase12 :main-icons2/price-decrease12)
|
||||
(when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase :main-icons2/price-decrease)
|
||||
{:no-color true
|
||||
:width 12
|
||||
:height 12
|
||||
:size 12
|
||||
:container-style {:margin-right 4}}])
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}} (str (get-in currencies/currencies [currency :symbol]) price)]
|
||||
:style {:color (price-color direction)}} (str currency price)]
|
||||
[divider direction]
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :medium
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
(ns quo2.core
|
||||
(:require quo2.components.buttons.button
|
||||
quo2.components.buttons.dynamic-button
|
||||
quo2.components.markdown.text
|
||||
quo2.components.icon
|
||||
quo2.components.separator
|
||||
quo2.components.header
|
||||
quo2.components.avatars.account-avatar
|
||||
quo2.components.avatars.channel-avatar
|
||||
quo2.components.avatars.group-avatar
|
||||
quo2.components.avatars.icon-avatar
|
||||
quo2.components.avatars.user-avatar
|
||||
quo2.components.avatars.wallet-user-avatar
|
||||
quo2.components.community.community-card-view
|
||||
quo2.components.community.community-list-view
|
||||
quo2.components.community.community-view
|
||||
quo2.components.community.discover-card
|
||||
quo2.components.counter.counter
|
||||
quo2.components.dividers.divider-label
|
||||
quo2.components.dividers.new-messages
|
||||
quo2.components.drawers.action-drawers
|
||||
quo2.components.dropdowns.dropdown
|
||||
quo2.components.info.info-message
|
||||
quo2.components.info.information-box
|
||||
quo2.components.list-items.channel
|
||||
quo2.components.list-items.menu-item
|
||||
quo2.components.list-items.preview-list
|
||||
quo2.components.messages.gap
|
||||
quo2.components.messages.system-message
|
||||
quo2.components.reactions.reaction
|
||||
quo2.components.notifications.activity-logs
|
||||
quo2.components.notifications.info-count
|
||||
quo2.components.notifications.notification-dot
|
||||
quo2.components.tags.tags
|
||||
quo2.components.tabs.tabs
|
||||
quo2.components.tabs.account-selector))
|
||||
|
||||
(def button quo2.components.buttons.button/button)
|
||||
(def dynamic-button quo2.components.buttons.dynamic-button/dynamic-button)
|
||||
(def text quo2.components.markdown.text/text)
|
||||
(def icon quo2.components.icon/icon)
|
||||
(def separator quo2.components.separator/separator)
|
||||
(def counter quo2.components.counter.counter/counter)
|
||||
(def header quo2.components.header/header)
|
||||
(def action-drawer quo2.components.drawers.action-drawers/action-drawer)
|
||||
(def dropdown quo2.components.dropdowns.dropdown/dropdown)
|
||||
(def info-message quo2.components.info.info-message/info-message)
|
||||
(def information-box quo2.components.info.information-box/information-box)
|
||||
(def gap quo2.components.messages.gap/gap)
|
||||
(def system-message quo2.components.messages.system-message/system-message)
|
||||
(def reaction quo2.components.reactions.reaction/reaction)
|
||||
(def tags quo2.components.tags.tags/tags)
|
||||
(def tabs quo2.components.tabs.tabs/tabs)
|
||||
(def scrollable-tabs quo2.components.tabs.tabs/scrollable-tabs)
|
||||
(def account-selector quo2.components.tabs.account-selector/account-selector)
|
||||
|
||||
;;;; AVATAR
|
||||
(def account-avatar quo2.components.avatars.account-avatar/account-avatar)
|
||||
(def channel-avatar quo2.components.avatars.channel-avatar/channel-avatar)
|
||||
(def group-avatar quo2.components.avatars.group-avatar/group-avatar)
|
||||
(def icon-avatar quo2.components.avatars.icon-avatar/icon-avatar)
|
||||
(def user-avatar quo2.components.avatars.user-avatar/user-avatar)
|
||||
(def wallet-user-avatar quo2.components.avatars.wallet-user-avatar/wallet-user-avatar)
|
||||
|
||||
;;;; COMMUNITY
|
||||
(def community-card-view-item quo2.components.community.community-card-view/community-card-view-item)
|
||||
(def communities-list-view-item quo2.components.community.community-list-view/communities-list-view-item)
|
||||
(def communities-membership-list-item quo2.components.community.community-list-view/communities-membership-list-item)
|
||||
(def community-stats-column quo2.components.community.community-view/community-stats-column)
|
||||
(def community-stats quo2.components.community.community-view/community-stats)
|
||||
(def community-tags quo2.components.community.community-view/community-tags)
|
||||
(def community-title quo2.components.community.community-view/community-title)
|
||||
(def discover-card quo2.components.community.discover-card/discover-card)
|
||||
|
||||
;;;; DIVIDERS
|
||||
(def divider-label quo2.components.dividers.divider-label/divider-label)
|
||||
(def new-messages quo2.components.dividers.new-messages/new-messages)
|
||||
|
||||
;;;; LIST ITEMS
|
||||
(def channel-list-item quo2.components.list-items.channel/list-item)
|
||||
(def menu-item quo2.components.list-items.menu-item/menu-item)
|
||||
(def preview-list quo2.components.list-items.preview-list/preview-list)
|
||||
|
||||
;;;; NOTIFICATIONS
|
||||
(def activity-log quo2.components.notifications.activity-logs/activity-log)
|
||||
(def info-count quo2.components.notifications.info-count/info-count)
|
||||
(def notification-dot quo2.components.notifications.notification-dot/notification-dot)
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
(ns quo2.theme
|
||||
(:require [reagent.core :as reagent]))
|
||||
|
||||
(def theme (reagent/atom nil))
|
||||
(def theme (reagent/atom :light))
|
||||
|
||||
(defn dark? []
|
||||
(= :dark @theme))
|
||||
|
||||
@@ -15,6 +15,8 @@
|
||||
|
||||
(def flat-list flat-list/flat-list)
|
||||
|
||||
(def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js react-native)))
|
||||
|
||||
(def modal (reagent/adapt-react-class (.-Modal ^js react-native)))
|
||||
|
||||
(def keyboard ^js (.-Keyboard ^js react-native))
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
(ns react-native.fast-image
|
||||
(:require ["react-native-fast-image" :as FastImage]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def fast-image-class (reagent/adapt-react-class ^js FastImage))
|
||||
|
||||
(defn placeholder [style child]
|
||||
[rn/view {:style (merge style {:flex 1 :justify-content :center :align-items :center})}
|
||||
child])
|
||||
|
||||
(defn fast-image [_]
|
||||
(let [loaded? (reagent/atom false)
|
||||
error? (reagent/atom false)]
|
||||
(fn [props]
|
||||
[fast-image-class (merge
|
||||
props
|
||||
{:on-error (fn [e]
|
||||
(when-let [on-error (:on-error props)]
|
||||
(on-error e))
|
||||
(reset! error? true))
|
||||
:on-load (fn [e]
|
||||
(when-let [on-load (:on-load props)]
|
||||
(on-load e))
|
||||
(reset! loaded? true)
|
||||
(reset! error? false))})
|
||||
(when (or @error? (not @loaded?))
|
||||
[placeholder (:style props)
|
||||
(if @error?
|
||||
[rn/text "X"]
|
||||
(when-not @loaded?
|
||||
[rn/activity-indicator {:animating true}]))])])))
|
||||
@@ -0,0 +1,5 @@
|
||||
(ns react-native.masked-view
|
||||
(:require ["@react-native-community/masked-view" :default MaskedView]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def masked-view (reagent/adapt-react-class MaskedView))
|
||||
@@ -0,0 +1,5 @@
|
||||
(ns react-native.syntax-highlighter
|
||||
(:require ["react-syntax-highlighter" :default Highlighter]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def highlighter (reagent/adapt-react-class Highlighter))
|
||||
@@ -655,7 +655,7 @@
|
||||
{:db (update-in db [:communities community-id :categories] merge categories)}))
|
||||
|
||||
(fx/defn load-category-states
|
||||
{:events [::load-category-states]}
|
||||
{:events [:communities/load-category-states]}
|
||||
[{:keys [db]} community-id]
|
||||
(let [public-key (get-in db [:multiaccount :public-key])
|
||||
categories (get-in db [:communities community-id :categories])
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(ns status-im.switcher.home-stack
|
||||
(:require [react-native.reanimated :as reanimated]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.switcher.styles :as styles]
|
||||
[status-im.switcher.animation :as animation]
|
||||
[status-im.ui2.screens.chat.home :as chat.home]
|
||||
@@ -54,6 +55,7 @@
|
||||
[stack-view :browser-stack shared-values]
|
||||
[stack-view :wallet-stack shared-values]
|
||||
[floating-shell-button/floating-shell-button
|
||||
{:jump-to {:on-press #(animation/close-home-stack shared-values)}}
|
||||
{:jump-to {:on-press #(animation/close-home-stack shared-values)
|
||||
:label (i18n/label :t/jump-to)}}
|
||||
{:position :absolute
|
||||
:bottom 12}]]))])
|
||||
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns quo2.components.switcher.styles
|
||||
(ns status-im.switcher.switcher-cards.styles
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def colors-map
|
||||
+19
-19
@@ -1,27 +1,26 @@
|
||||
(ns quo2.components.switcher.switcher-cards
|
||||
(ns status-im.switcher.switcher-cards.switcher-cards
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.switcher.styles :as styles]
|
||||
[quo2.components.counter.counter :as counter]
|
||||
[quo2.components.tags.status-tags :as status-tags]
|
||||
[status-im.ui.components.fast-image :as fast-image]
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[quo2.components.avatars.group-avatar :as group-avatar]
|
||||
[quo2.components.list-items.preview-list :as preview-list]
|
||||
[quo2.components.avatars.channel-avatar :as channel-avatar]))
|
||||
|
||||
;; Supporting Components
|
||||
[quo2.components.avatars.channel-avatar :as channel-avatar]
|
||||
[status-im.switcher.switcher-cards.styles :as styles]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(defn content-container [{:keys [content-type data new-notifications? color-50]}]
|
||||
[rn/view {:style (styles/content-container new-notifications?)}
|
||||
(case content-type
|
||||
:text [text/text (styles/last-message-text-props) data]
|
||||
:photo [preview-list/preview-list {:type :photo
|
||||
:size 24
|
||||
:override-theme :dark} data]
|
||||
:photo [preview-list/preview-list {:type :photo
|
||||
:more-than-99-label (i18n/label :counter-99-plus)
|
||||
:size 24
|
||||
:override-theme :dark} data]
|
||||
:sticker [fast-image/fast-image {:source (:source data)
|
||||
:style (styles/sticker)}]
|
||||
:gif [fast-image/fast-image {:source (:source data)
|
||||
@@ -35,6 +34,7 @@
|
||||
:community-info (case (:type data)
|
||||
:pending [status-tags/status-tag
|
||||
{:status :pending
|
||||
:label (i18n/label :t/pending)
|
||||
:size :small
|
||||
:override-theme :dark}]
|
||||
:kicked [status-tags/status-tag
|
||||
@@ -75,15 +75,15 @@
|
||||
|
||||
(defn subtitle [{:keys [content-type data]}]
|
||||
(case content-type
|
||||
:text (i18n/label :t/message)
|
||||
:photo (i18n/label :t/n-photos {:count (count data)})
|
||||
:sticker (i18n/label :t/sticker)
|
||||
:gif (i18n/label :t/gif)
|
||||
:audio (i18n/label :t/audio-message)
|
||||
:community (i18n/label :t/link-to-community)
|
||||
:link (i18n/label :t/external-link)
|
||||
:code (i18n/label :t/code-snippet)
|
||||
:channel (i18n/label :t/community-channel)
|
||||
:text (i18n/label :t/message)
|
||||
:photo (i18n/label :t/n-photos {:count (count data)})
|
||||
:sticker (i18n/label :t/sticker)
|
||||
:gif (i18n/label :t/gif)
|
||||
:audio (i18n/label :t/audio-message)
|
||||
:community (i18n/label :t/link-to-community)
|
||||
:link (i18n/label :t/external-link)
|
||||
:code (i18n/label :t/code-snippet)
|
||||
:channel (i18n/label :t/community-channel)
|
||||
:community-info (i18n/label :t/community)))
|
||||
|
||||
;; Screens Card
|
||||
@@ -22,7 +22,7 @@
|
||||
[re-frame.core :as re-frame]
|
||||
[status-im.ui.screens.chat.sheets :as sheets]
|
||||
[status-im.ui.components.accordion :as accordion]
|
||||
[status-im.ui.screens.communities.styles :as styles]))
|
||||
[quo2.components.community.style :as styles]))
|
||||
|
||||
(def request-cooldown-ms (* 24 60 60 1000))
|
||||
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
[quo2.components.dividers.divider-label :as divider-label]
|
||||
[quo2.components.community.community-view :as community-view]
|
||||
[quo2.components.tags.status-tags :as status-tags]
|
||||
[quo2.components.community.style :as styles]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.navigation.page-nav :as page-nav]
|
||||
[status-im.ui.screens.communities.request-to-join-bottom-sheet-redesign :as request-to-join]
|
||||
[status-im.ui.screens.communities.community-options-bottom-sheet :as options-menu]
|
||||
[status-im.ui.components.list.views :as list]
|
||||
[status-im.utils.handlers :refer [<sub >evt]]
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.navigation.page-nav :as page-nav]
|
||||
[status-im.ui.screens.communities.icon :as communities.icon]))
|
||||
|
||||
;; Mocked list items
|
||||
@@ -29,6 +29,7 @@
|
||||
:align-items :center
|
||||
:margin-top 20}}
|
||||
[preview-list/preview-list {:type :user
|
||||
:more-than-99-label (i18n/label :counter-99-plus)
|
||||
:user user-list :list-size 4 :size 24}]
|
||||
[text/text {:accessibility-label :communities-screen-title
|
||||
:style {:margin-left 8}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
[status-im.communities.core :as communities]
|
||||
[status-im.utils.handlers :refer [>evt <sub]]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[quo2.components.community.style :as styles]
|
||||
[status-im.ui.components.topbar :as topbar]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.ui.components.tabs :as tabs]
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
{:border-bottom-color (quo.colors/get-color :ui-01)
|
||||
:border-bottom-width 1}))
|
||||
:on-press (fn []
|
||||
(>evt [::communities/load-category-states id])
|
||||
(>evt [:communities/load-category-states id])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id id}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
|
||||
@@ -46,8 +46,8 @@
|
||||
(defview bottom-sheet-view []
|
||||
(letsubs [view-id [:view-id]
|
||||
acc-to-login-keycard-pairing [:intro-wizard/acc-to-login-keycard-pairing]]
|
||||
[react/view {:flex 1 :flex-direction :row}
|
||||
[react/view {:flex 1}
|
||||
[react/view {:flex-direction :row}
|
||||
[react/view {}
|
||||
;; Show manage storage link when on login screen, only on android devices
|
||||
;; and the selected account is not paired with keycard
|
||||
(when (and (= view-id :login)
|
||||
|
||||
@@ -119,11 +119,10 @@
|
||||
[status-im.ui.screens.wallet.buy-crypto.views :as wallet.buy-crypto]
|
||||
[status-im.ui.screens.wallet.recipient.views :as recipient]
|
||||
[status-im.ui.screens.wallet.send.views :as wallet.send]
|
||||
[quo2.screens.main :as quo2.preview]
|
||||
[status-im.ui2.screens.quo2-preview.main :as quo2.preview]
|
||||
[status-im.utils.config :as config]
|
||||
[status-im.ui.screens.wallet.manage-connections.views :as manage-all-connections]
|
||||
[status-im.navigation2.screens :as navigation2.screens]))
|
||||
;[quo2.foundations.colors :as quo2.colors]))
|
||||
|
||||
(def components
|
||||
[])
|
||||
|
||||
@@ -0,0 +1,81 @@
|
||||
(ns status-im.ui2.screens.chat.components.chat-bottom-sheet.view
|
||||
(:require [status-im.i18n.i18n :as i18n]
|
||||
[quo.react-native :as rn]
|
||||
[status-im.ui2.screens.chat.messages.message :as message]
|
||||
[quo2.components.drawers.action-drawers :as action-drawers]
|
||||
[quo2.components.list-items.menu-item :as quo2.menu-item]
|
||||
[status-im.utils.re-frame :as rf]))
|
||||
|
||||
(defn hide-sheet-and-dispatch [event]
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(rf/dispatch event))
|
||||
|
||||
(defn chat-bottom-sheet [{:keys [chat-id group-chat]}]
|
||||
[rn/view
|
||||
(if group-chat
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/group-details)
|
||||
:accessibility-label :group-details
|
||||
:icon :members
|
||||
:on-press #(hide-sheet-and-dispatch [:show-group-chat-profile chat-id])}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/view-profile)
|
||||
:accessibility-label :view-profile
|
||||
:icon :friend
|
||||
:on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile chat-id])}])
|
||||
|
||||
[action-drawers/divider]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/mark-as-read)
|
||||
:accessibility-label :mark-as-read
|
||||
:icon :correct
|
||||
:on-press #(hide-sheet-and-dispatch [:chat.ui/mark-all-read-pressed chat-id])}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/mute-chat)
|
||||
:description "Muted for 15 minutes"
|
||||
:accessibility-label :mute-chat
|
||||
:icon :muted
|
||||
:arrow? true
|
||||
:on-press #(js/alert "TODO: mute chat")}] ; TODO: issue https://github.com/status-im/status-mobile/issues/14269
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/notifications)
|
||||
:description "Only @mentions"
|
||||
:accessibility-label :notifications
|
||||
:icon :notifications
|
||||
:arrow? true
|
||||
:on-press #(js/alert "TODO: chat notifications")}]
|
||||
(when group-chat
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/pinned-messages)
|
||||
:accessibility-label :pinned-messages
|
||||
:icon :pin
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content #(message/pinned-messages-list chat-id)}]))}])
|
||||
[action-drawers/divider]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :danger
|
||||
:title (i18n/label :t/clear-history)
|
||||
:accessibility-label :clear-history
|
||||
:icon :delete
|
||||
:on-press #(rf/dispatch [:chat.ui/clear-history-pressed chat-id])}]
|
||||
(if group-chat
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :danger
|
||||
:title (i18n/label :t/leave-and-delete-group)
|
||||
:accessibility-label :leave-group
|
||||
:icon :log-out
|
||||
:on-press #(rf/dispatch [:group-chats.ui/leave-chat-pressed chat-id])}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :danger
|
||||
:title (i18n/label :t/delete-chat)
|
||||
:accessibility-label :delete-chat
|
||||
:icon :delete
|
||||
:on-press #(rf/dispatch [:chat.ui/remove-chat-pressed chat-id])}])])
|
||||
@@ -0,0 +1,56 @@
|
||||
(ns status-im.ui2.screens.chat.components.contact-bottom-sheet.view
|
||||
(:require [status-im.i18n.i18n :as i18n]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.drawers.action-drawers :as action-drawers]
|
||||
[quo2.components.list-items.menu-item :as quo2.menu-item]
|
||||
[status-im.utils.re-frame :as rf]))
|
||||
|
||||
(defn hide-sheet-and-dispatch [event]
|
||||
(rf/dispatch [:bottom-sheet/hide])
|
||||
(rf/dispatch event))
|
||||
|
||||
(defn contact-bottom-sheet [{:keys [public-key] :as contact}]
|
||||
[rn/view
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/view-profile)
|
||||
:accessibility-label :view-profile
|
||||
:icon :profile
|
||||
:on-press #(hide-sheet-and-dispatch [:chat.ui/show-profile public-key])}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/remove-from-contacts)
|
||||
:accessibility-label :remove-from-contacts
|
||||
:icon :remove-user
|
||||
:on-press #(hide-sheet-and-dispatch [:contact.ui/remove-contact-pressed contact])}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/rename)
|
||||
:accessibility-label :rename
|
||||
:icon :edit
|
||||
:on-press #(js/alert "TODO: to be implemented, requires design input")}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/show-qr)
|
||||
:accessibility-label :show-qr
|
||||
:icon :qr-code
|
||||
:on-press #(js/alert "TODO: to be implemented, requires design input")}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :main
|
||||
:title (i18n/label :t/share-profile)
|
||||
:accessibility-label :share-profile
|
||||
:icon :share
|
||||
:on-press #(js/alert "TODO: to be implemented, requires design input")}]
|
||||
[action-drawers/divider]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :danger
|
||||
:title (i18n/label :t/mark-untrustworthy)
|
||||
:accessibility-label :mark-untrustworthy
|
||||
:icon :alert
|
||||
:on-press #(js/alert "TODO: to be implemented, probably requires status-go impl. and design input")}]
|
||||
[quo2.menu-item/menu-item
|
||||
{:type :danger
|
||||
:title (i18n/label :t/block-user)
|
||||
:accessibility-label :block-user
|
||||
:icon :block
|
||||
:on-press #(js/alert "TODO: to be implemented, requires design input")}]])
|
||||
@@ -1,3 +0,0 @@
|
||||
(ns status-im.ui2.screens.chat.components.contact-item.test)
|
||||
|
||||
;; TODO: tests to be added when RNTL is integrated into our project
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns status-im.ui2.screens.chat.components.contact-item.view
|
||||
(:require [status-im.utils.handlers :refer [<sub >evt]]
|
||||
(:require [status-im.utils.re-frame :as rf]
|
||||
[quo2.foundations.typography :as typography]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.foundations.colors :as colors]
|
||||
@@ -8,22 +8,25 @@
|
||||
[status-im.utils.utils :refer [get-shortened-address]]
|
||||
[quo.platform :as platform]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[status-im.ui2.screens.chat.components.contact-bottom-sheet.view :as contact-bottom-sheet]
|
||||
[status-im.ui2.screens.chat.components.message-home-item.style :as style]))
|
||||
|
||||
(defn open-chat [chat-id]
|
||||
(>evt [:dismiss-keyboard])
|
||||
(rf/dispatch [:dismiss-keyboard])
|
||||
(if platform/android?
|
||||
(>evt [:chat.ui/navigate-to-chat-nav2 chat-id])
|
||||
(>evt [:chat.ui/navigate-to-chat chat-id]))
|
||||
(>evt [:search/home-filter-changed nil])
|
||||
(>evt [:accept-all-activity-center-notifications-from-chat chat-id]))
|
||||
(rf/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
|
||||
(rf/dispatch [:chat.ui/navigate-to-chat chat-id]))
|
||||
(rf/dispatch [:search/home-filter-changed nil])
|
||||
(rf/dispatch [:accept-all-activity-center-notifications-from-chat chat-id]))
|
||||
|
||||
(defn contact-item [item]
|
||||
(let [{:keys [public-key ens-verified added? images]} item
|
||||
display-name (first (<sub [:contacts/contact-two-names-by-identity public-key]))
|
||||
photo-path (if-not (empty? images) (<sub [:chats/photo-path public-key]) nil)]
|
||||
[rn/touchable-opacity (merge {:style (style/container)
|
||||
:on-press #(open-chat public-key)})
|
||||
display-name (first (rf/sub [:contacts/contact-two-names-by-identity public-key]))
|
||||
photo-path (if-not (empty? images) (rf/sub [:chats/photo-path public-key]) nil)]
|
||||
[rn/touchable-opacity (merge {:style (style/container)
|
||||
:on-press #(open-chat public-key)
|
||||
:on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [contact-bottom-sheet/contact-bottom-sheet item])}])})
|
||||
[user-avatar/user-avatar {:full-name display-name
|
||||
:profile-picture photo-path
|
||||
:status-indicator? true
|
||||
@@ -41,11 +44,12 @@
|
||||
(when added?
|
||||
[rn/view {:style {:margin-left 5 :margin-top 4}}
|
||||
[icons/icon :main-icons2/contact {:no-color true :size 12 :color (colors/theme-colors colors/primary-50 colors/primary-60)}]]))]
|
||||
[text/text {:size :paragraph-1
|
||||
[text/text {:size :paragraph-1
|
||||
:style {:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||
(get-shortened-address public-key)]]
|
||||
[rn/touchable-opacity {:style {:position :absolute
|
||||
:right 20}
|
||||
:active-opacity 1} ; TODO: on-long-press to be added when contact bottom sheet is implemented
|
||||
:active-opacity 1
|
||||
:on-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [contact-bottom-sheet/contact-bottom-sheet item])}])}
|
||||
[icons/icon :main-icons2/options {:size 20 :color (colors/theme-colors colors/primary-50 colors/primary-60)}]]]))
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns status-im.ui2.screens.chat.components.message-home-item.view
|
||||
(:require [clojure.string :as string]
|
||||
[status-im.utils.handlers :refer [<sub >evt]]
|
||||
[status-im.utils.re-frame :as rf]
|
||||
[status-im.utils.datetime :as time]
|
||||
[quo2.foundations.typography :as typography]
|
||||
[quo2.components.notifications.info-count :refer [info-count]]
|
||||
@@ -8,7 +8,7 @@
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[quo.react-native :as rn]
|
||||
[status-im.ui.screens.chat.sheets :as sheets]
|
||||
[status-im.ui2.screens.chat.components.chat-bottom-sheet.view :as chat-bottom-sheet]
|
||||
[quo.platform :as platform]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[status-im.ui2.screens.chat.components.message-home-item.style :as style]))
|
||||
@@ -34,7 +34,7 @@
|
||||
children)
|
||||
|
||||
"mention"
|
||||
{:components [rn/text (<sub [:contacts/contact-name-by-identity literal])]
|
||||
{:components [rn/text (rf/sub [:contacts/contact-name-by-identity literal])]
|
||||
:length 4} ;; we can't predict name length so take the smallest possible
|
||||
|
||||
"status-tag"
|
||||
@@ -74,31 +74,31 @@
|
||||
(if (:ens-verified contact)
|
||||
[rn/view {:style {:margin-left 5 :margin-top 4}}
|
||||
[icons/icon :main-icons2/verified {:no-color true
|
||||
:size 12
|
||||
:color (colors/theme-colors colors/success-50 colors/success-60)}]]
|
||||
:size 12
|
||||
:color (colors/theme-colors colors/success-50 colors/success-60)}]]
|
||||
(when (:added? contact)
|
||||
[rn/view {:style {:margin-left 5 :margin-top 4}}
|
||||
[icons/icon :main-icons2/contact {:no-color true
|
||||
:size 12
|
||||
:color (colors/theme-colors colors/primary-50 colors/primary-60)}]]))
|
||||
:size 12
|
||||
:color (colors/theme-colors colors/primary-50 colors/primary-60)}]]))
|
||||
[text/text {:style (style/timestamp)}
|
||||
(time/to-short-str timestamp)]])
|
||||
|
||||
(defn messages-home-item [item]
|
||||
(let [{:keys [chat-id color group-chat last-message timestamp name unviewed-mentions-count unviewed-messages-count]} item
|
||||
display-name (if-not group-chat (first (<sub [:contacts/contact-two-names-by-identity chat-id])) name)
|
||||
contact (when-not group-chat (<sub [:contacts/contact-by-address chat-id]))
|
||||
photo-path (when-not (empty? (:images contact)) (<sub [:chats/photo-path chat-id]))]
|
||||
display-name (if-not group-chat (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])) name)
|
||||
contact (when-not group-chat (rf/sub [:contacts/contact-by-address chat-id]))
|
||||
photo-path (when-not (empty? (:images contact)) (rf/sub [:chats/photo-path chat-id]))]
|
||||
[rn/touchable-opacity (merge {:style (style/container)
|
||||
:on-press (fn []
|
||||
(>evt [:dismiss-keyboard])
|
||||
(rf/dispatch [:dismiss-keyboard])
|
||||
(if platform/android?
|
||||
(>evt [:chat.ui/navigate-to-chat-nav2 chat-id])
|
||||
(>evt [:chat.ui/navigate-to-chat chat-id]))
|
||||
(>evt [:search/home-filter-changed nil])
|
||||
(>evt [:accept-all-activity-center-notifications-from-chat chat-id]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [sheets/actions item])}])})
|
||||
(rf/dispatch [:chat.ui/navigate-to-chat-nav2 chat-id])
|
||||
(rf/dispatch [:chat.ui/navigate-to-chat chat-id]))
|
||||
(rf/dispatch [:search/home-filter-changed nil])
|
||||
(rf/dispatch [:accept-all-activity-center-notifications-from-chat chat-id]))
|
||||
:on-long-press #(rf/dispatch [:bottom-sheet/show-sheet
|
||||
{:content (fn [] [chat-bottom-sheet/chat-bottom-sheet item group-chat])}])})
|
||||
(if group-chat
|
||||
[rn/view {:style (style/group-chat-icon color)}
|
||||
[icons/icon :main-icons2/group {:size 16 :color colors/white-opa-70}]]
|
||||
@@ -121,4 +121,3 @@
|
||||
(when (> unviewed-messages-count 0)
|
||||
[rn/view {:style (style/count-container)}]))]))
|
||||
|
||||
|
||||
|
||||
+1
-2
@@ -1,4 +1,4 @@
|
||||
(ns quo2.components.list-items.received-cr-item
|
||||
(ns status-im.ui2.screens.chat.components.received-cr-item
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.utils.handlers :refer [<sub >evt]]
|
||||
@@ -74,4 +74,3 @@
|
||||
:margin-left 8}}
|
||||
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]]))
|
||||
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[quo2.components.notifications.info-count :refer [info-count]]
|
||||
[quo2.components.list-items.received-cr-item :refer [received-cr-item]]
|
||||
[status-im.ui2.screens.chat.components.received-cr-item :as received-cr-item]
|
||||
[status-im.ui2.screens.chat.components.message-home-item.view :refer [messages-home-item]]
|
||||
[status-im.ui2.screens.chat.components.contact-item.view :refer [contact-item]]
|
||||
[clojure.string :as str])
|
||||
@@ -198,7 +198,7 @@
|
||||
[list/flat-list
|
||||
{:key-fn :first
|
||||
:data (if (= @selected-requests-tab :received) received-requests sent-requests)
|
||||
:render-fn received-cr-item}]]))])
|
||||
:render-fn received-cr-item/received-cr-item}]]))])
|
||||
|
||||
(defn get-display-name [{:keys [chat-id message]}]
|
||||
(let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))
|
||||
@@ -379,4 +379,3 @@
|
||||
[plus-button]]
|
||||
[chats-list]
|
||||
[tabbar/tabs-counts-subscriptions]])])
|
||||
|
||||
|
||||
@@ -284,7 +284,10 @@
|
||||
(if deleted-for-me?
|
||||
[system-message/system-message
|
||||
{:type :deleted
|
||||
:label :message-deleted-for-you
|
||||
:label (i18n/label :message-deleted-for-you)
|
||||
:labels {:pinned-a-message (i18n/label :pinned-a-message)
|
||||
:message-deleted (i18n/label :message-deleted)
|
||||
:added (i18n/label :added)}
|
||||
:timestamp-str timestamp-str
|
||||
:non-pressable? true
|
||||
:animate-landing? (if deleted-for-me-undoable-till true false)}]
|
||||
|
||||
@@ -12,7 +12,8 @@
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.components.list.views :as list]
|
||||
[status-im.ui.components.react :as rn]
|
||||
[status-im.ui.components.plus-button :as components.plus-button]))
|
||||
[status-im.ui.components.plus-button :as components.plus-button]
|
||||
[status-im.ui.screens.communities.community :as community]))
|
||||
|
||||
(def selected-tab (reagent/atom :joined))
|
||||
|
||||
@@ -25,7 +26,15 @@
|
||||
:accessibility-label :new-chat-button}]))
|
||||
|
||||
(defn render-fn [community-item]
|
||||
[community-list-view/communities-membership-list-item community-item])
|
||||
[community-list-view/communities-membership-list-item
|
||||
{:on-press (fn []
|
||||
(>evt [:communities/load-category-states (:id community-item)])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id (:id community-item)}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn []
|
||||
[community/community-actions community-item])}])}
|
||||
community-item])
|
||||
|
||||
(defn community-list-key-fn [item]
|
||||
(:id item))
|
||||
|
||||
@@ -7,12 +7,13 @@
|
||||
[quo2.components.counter.counter :as quo2.counter]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[status-im.utils.handlers :refer [<sub >evt]]
|
||||
[status-im.utils.handlers :refer [<sub >evt]]
|
||||
[quo2.components.buttons.button :as quo2.button]
|
||||
[quo2.components.community.community-card-view :as community-card]
|
||||
[quo2.components.community.community-list-view :as community-list]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui.screens.communities.community :as community]))
|
||||
|
||||
(def view-type (reagent/atom :card-view))
|
||||
|
||||
@@ -40,7 +41,15 @@
|
||||
{:featured false})]
|
||||
(if (= @view-type :card-view)
|
||||
[community-card/community-card-view-item item #(>evt [:navigate-to :community-overview item])]
|
||||
[community-list/communities-list-view-item item])))
|
||||
[community-list/communities-list-view-item
|
||||
{:on-press (fn []
|
||||
(>evt [:communities/load-category-states (:id item)])
|
||||
(>evt [:dismiss-keyboard])
|
||||
(>evt [:navigate-to :community {:community-id (:id item)}]))
|
||||
:on-long-press #(>evt [:bottom-sheet/show-sheet
|
||||
{:content (fn []
|
||||
[community/community-actions item])}])}
|
||||
item])))
|
||||
|
||||
(defn render-featured-fn [community-item]
|
||||
(let [item (merge community-item
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.account-avatar
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.account-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.avatars.account-avatar :as quo2]))
|
||||
|
||||
(def descriptor [{:label "Icon"
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.channel-avatar
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.channel-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.channel-avatar :as quo2]))
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.group-avatar
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.group-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.group-avatar :as quo2]))
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.icon-avatar
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.icon-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.icon-avatar :as quo2]))
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.user-avatar
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.user-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.avatars.user-avatar :as quo2]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.react-native.resources :as resources]))
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.avatars.wallet-user-avatar
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.wallet-user-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.avatars.wallet-user-avatar :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.buttons.button
|
||||
(ns status-im.ui2.screens.quo2-preview.buttons.button
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.buttons.button :as quo2]))
|
||||
|
||||
+8
-4
@@ -1,9 +1,10 @@
|
||||
(ns quo2.screens.buttons.dynamic-button
|
||||
(ns status-im.ui2.screens.quo2-preview.buttons.dynamic-button
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.buttons.dynamic-button :as quo2]))
|
||||
[quo2.components.buttons.dynamic-button :as quo2]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def descriptor [{:label "Type:"
|
||||
:key :type
|
||||
@@ -27,7 +28,10 @@
|
||||
:type :text}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:count "5" :type :jump-to})]
|
||||
(let [state (reagent/atom {:count "5"
|
||||
:type :jump-to
|
||||
:labels {:jump-to (i18n/label :t/jump-to)
|
||||
:search-with-label (i18n/label :t/back)}})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
(ns quo2.screens.code.snippet
|
||||
(:require [quo2.screens.preview :as preview]
|
||||
(ns status-im.ui2.screens.quo2-preview.code.snippet
|
||||
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.code.snippet :as snippet]
|
||||
[quo2.foundations.colors :as colors]
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.community.community-card-view
|
||||
(ns status-im.ui2.screens.quo2-preview.community.community-card-view
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.constants :as constants]
|
||||
[quo2.foundations.colors :as colors]
|
||||
+3
-3
@@ -1,4 +1,4 @@
|
||||
(ns quo2.screens.community.community-list-view
|
||||
(ns status-im.ui2.screens.quo2-preview.community.community-list-view
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
@@ -56,8 +56,8 @@
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
[community-list-view/communities-list-view-item (merge @state
|
||||
community-data)]]]])))
|
||||
[community-list-view/communities-list-view-item {} (merge @state
|
||||
community-data)]]]])))
|
||||
|
||||
(defn preview-community-list-view []
|
||||
[rn/view {:background-color (colors/theme-colors colors/neutral-5
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns quo2.screens.community.discover-card
|
||||
(ns status-im.ui2.screens.quo2-preview.community.discover-card
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.counter.counter
|
||||
(ns status-im.ui2.screens.quo2-preview.counter.counter
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.counter.counter :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.dividers.divider-label
|
||||
(ns status-im.ui2.screens.quo2-preview.dividers.divider-label
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.dividers.divider-label :as divider-label]))
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.dividers.new-messages
|
||||
(ns status-im.ui2.screens.quo2-preview.dividers.new-messages
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.dividers.new-messages :as new-messages]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
(ns quo2.screens.drawers.action-drawers
|
||||
(:require [quo2.screens.preview :as preview]
|
||||
(ns status-im.ui2.screens.quo2-preview.drawers.action-drawers
|
||||
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.drawers.action-drawers :as quo2]
|
||||
[quo2.components.buttons.button :as button]
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.dropdowns.dropdown
|
||||
(ns status-im.ui2.screens.quo2-preview.dropdowns.dropdown
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.dropdowns.dropdown :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.info.info-message
|
||||
(ns status-im.ui2.screens.quo2-preview.info.info-message
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.info.info-message :as quo2]))
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.info.information-box
|
||||
(ns status-im.ui2.screens.quo2-preview.info.information-box
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.info.information-box :as quo2]))
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.list-items.channel
|
||||
(ns status-im.ui2.screens.quo2-preview.list-items.channel
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.list-items.channel :as quo2-channel]))
|
||||
|
||||
+8
-6
@@ -1,10 +1,11 @@
|
||||
(ns quo2.screens.list-items.preview-lists
|
||||
(ns status-im.ui2.screens.quo2-preview.list-items.preview-lists
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[quo2.components.list-items.preview-list :as quo2]))
|
||||
[quo2.components.list-items.preview-list :as quo2]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def descriptor [{:label "Size:"
|
||||
:key :size
|
||||
@@ -43,9 +44,10 @@
|
||||
{:source (resources/get-mock-image :photo6)}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:type :user
|
||||
:size 32
|
||||
:list-size 10})
|
||||
(let [state (reagent/atom {:type :user
|
||||
:size 32
|
||||
:list-size 10
|
||||
:more-than-99-label (i18n/label :counter-99-plus)})
|
||||
type (reagent/cursor state [:type])]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
@@ -1,55 +1,55 @@
|
||||
(ns quo2.screens.main
|
||||
(ns status-im.ui2.screens.quo2-preview.main
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.components.markdown.text :as quo2-text]
|
||||
[quo2.components.buttons.button :as quo2-button]
|
||||
[quo2.screens.avatars.channel-avatar :as channel-avatar]
|
||||
[quo2.screens.avatars.icon-avatar :as icon-avatar]
|
||||
[quo2.screens.avatars.group-avatar :as group-avatar]
|
||||
[quo2.screens.avatars.user-avatar :as user-avatar]
|
||||
[quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar]
|
||||
[quo2.screens.buttons.button :as button]
|
||||
[quo2.screens.buttons.dynamic-button :as dynamic-button]
|
||||
[quo2.screens.code.snippet :as code-snippet]
|
||||
[quo2.screens.counter.counter :as counter]
|
||||
[quo2.screens.community.community-card-view :as community-card]
|
||||
[quo2.screens.community.discover-card :as discover-card]
|
||||
[quo2.screens.community.community-list-view :as community-list-view]
|
||||
[quo2.screens.dividers.divider-label :as divider-label]
|
||||
[quo2.screens.dividers.new-messages :as new-messages]
|
||||
[quo2.screens.drawers.action-drawers :as drawers]
|
||||
[quo2.screens.dropdowns.dropdown :as dropdown]
|
||||
[quo2.screens.info.info-message :as info-message]
|
||||
[quo2.screens.info.information-box :as information-box]
|
||||
[quo2.screens.wallet.lowest-price :as lowest-price]
|
||||
[quo2.screens.list-items.preview-lists :as preview-lists]
|
||||
[quo2.screens.list-items.channel :as channel]
|
||||
[quo2.screens.markdown.text :as text]
|
||||
[quo2.screens.messages.gap :as messages-gap]
|
||||
[quo2.screens.messages.system-message :as system-message]
|
||||
[quo2.screens.notifications.activity-logs :as activity-logs]
|
||||
[quo2.screens.reactions.react :as react]
|
||||
[quo2.screens.selectors.disclaimer :as disclaimer]
|
||||
[quo2.screens.selectors.selectors :as selectors]
|
||||
[quo2.screens.switcher.switcher-cards :as switcher-cards]
|
||||
[quo2.screens.navigation.top-nav :as top-nav]
|
||||
[quo2.screens.navigation.bottom-nav-tab :as bottom-nav-tab]
|
||||
[quo2.screens.navigation.floating-shell-button :as floating-shell-button]
|
||||
[quo2.screens.tabs.account-selector :as account-selector]
|
||||
[quo2.screens.tabs.segmented-tab :as segmented]
|
||||
[quo2.screens.tabs.tabs :as tabs]
|
||||
[quo2.screens.tags.context-tags :as context-tags]
|
||||
[quo2.screens.tags.tags :as tags]
|
||||
[quo2.screens.tags.permission-tag :as permission-tag]
|
||||
[quo2.screens.tags.status-tags :as status-tags]
|
||||
[quo2.screens.tags.token-tag :as token-tag]
|
||||
[quo2.screens.wallet.token-overview :as token-overview]
|
||||
[quo2.screens.wallet.network-breakdown :as network-breakdown]
|
||||
[quo2.screens.wallet.network-amount :as network-amount]
|
||||
[quo2.screens.navigation.page-nav :as page-nav]
|
||||
[quo2.screens.avatars.account-avatar :as account-avatar]
|
||||
[status-im.ui2.screens.quo2-preview.avatars.channel-avatar :as channel-avatar]
|
||||
[status-im.ui2.screens.quo2-preview.avatars.icon-avatar :as icon-avatar]
|
||||
[status-im.ui2.screens.quo2-preview.avatars.group-avatar :as group-avatar]
|
||||
[status-im.ui2.screens.quo2-preview.avatars.user-avatar :as user-avatar]
|
||||
[status-im.ui2.screens.quo2-preview.avatars.wallet-user-avatar :as wallet-user-avatar]
|
||||
[status-im.ui2.screens.quo2-preview.buttons.button :as button]
|
||||
[status-im.ui2.screens.quo2-preview.buttons.dynamic-button :as dynamic-button]
|
||||
[status-im.ui2.screens.quo2-preview.code.snippet :as code-snippet]
|
||||
[status-im.ui2.screens.quo2-preview.counter.counter :as counter]
|
||||
[status-im.ui2.screens.quo2-preview.community.community-card-view :as community-card]
|
||||
[status-im.ui2.screens.quo2-preview.community.community-list-view :as community-list-view]
|
||||
[status-im.ui2.screens.quo2-preview.community.discover-card :as discover-card]
|
||||
[status-im.ui2.screens.quo2-preview.dividers.divider-label :as divider-label]
|
||||
[status-im.ui2.screens.quo2-preview.dividers.new-messages :as new-messages]
|
||||
[status-im.ui2.screens.quo2-preview.drawers.action-drawers :as drawers]
|
||||
[status-im.ui2.screens.quo2-preview.dropdowns.dropdown :as dropdown]
|
||||
[status-im.ui2.screens.quo2-preview.info.info-message :as info-message]
|
||||
[status-im.ui2.screens.quo2-preview.info.information-box :as information-box]
|
||||
[status-im.ui2.screens.quo2-preview.wallet.lowest-price :as lowest-price]
|
||||
[status-im.ui2.screens.quo2-preview.list-items.preview-lists :as preview-lists]
|
||||
[status-im.ui2.screens.quo2-preview.list-items.channel :as channel]
|
||||
[status-im.ui2.screens.quo2-preview.markdown.text :as text]
|
||||
[status-im.ui2.screens.quo2-preview.messages.gap :as messages-gap]
|
||||
[status-im.ui2.screens.quo2-preview.messages.system-message :as system-message]
|
||||
[status-im.ui2.screens.quo2-preview.notifications.activity-logs :as activity-logs]
|
||||
[status-im.ui2.screens.quo2-preview.reactions.react :as react]
|
||||
[status-im.ui2.screens.quo2-preview.selectors.disclaimer :as disclaimer]
|
||||
[status-im.ui2.screens.quo2-preview.selectors.selectors :as selectors]
|
||||
[status-im.ui2.screens.quo2-preview.switcher.switcher-cards :as switcher-cards]
|
||||
[status-im.ui2.screens.quo2-preview.navigation.top-nav :as top-nav]
|
||||
[status-im.ui2.screens.quo2-preview.navigation.bottom-nav-tab :as bottom-nav-tab]
|
||||
[status-im.ui2.screens.quo2-preview.navigation.floating-shell-button :as floating-shell-button]
|
||||
[status-im.ui2.screens.quo2-preview.tabs.account-selector :as account-selector]
|
||||
[status-im.ui2.screens.quo2-preview.tabs.segmented-tab :as segmented]
|
||||
[status-im.ui2.screens.quo2-preview.tabs.tabs :as tabs]
|
||||
[status-im.ui2.screens.quo2-preview.tags.context-tags :as context-tags]
|
||||
[status-im.ui2.screens.quo2-preview.tags.tags :as tags]
|
||||
[status-im.ui2.screens.quo2-preview.tags.permission-tag :as permission-tag]
|
||||
[status-im.ui2.screens.quo2-preview.tags.status-tags :as status-tags]
|
||||
[status-im.ui2.screens.quo2-preview.tags.token-tag :as token-tag]
|
||||
[status-im.ui2.screens.quo2-preview.wallet.token-overview :as token-overview]
|
||||
[status-im.ui2.screens.quo2-preview.wallet.network-breakdown :as network-breakdown]
|
||||
[status-im.ui2.screens.quo2-preview.wallet.network-amount :as network-amount]
|
||||
[status-im.ui2.screens.quo2-preview.navigation.page-nav :as page-nav]
|
||||
[status-im.ui2.screens.quo2-preview.avatars.account-avatar :as account-avatar]
|
||||
[re-frame.core :as re-frame]))
|
||||
|
||||
(def screens-categories
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.markdown.text
|
||||
(ns status-im.ui2.screens.quo2-preview.markdown.text
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as quo2]
|
||||
[reagent.core :as reagent]))
|
||||
+6
-4
@@ -1,9 +1,10 @@
|
||||
(ns quo2.screens.messages.gap
|
||||
(ns status-im.ui2.screens.quo2-preview.messages.gap
|
||||
(:require
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.messages.gap :as gap]
|
||||
[reagent.core :as reagent]))
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def descriptor [{:label "Timestamp Far"
|
||||
:key :timestamp-far
|
||||
@@ -13,7 +14,8 @@
|
||||
:type :text}])
|
||||
|
||||
(defn preview []
|
||||
(let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12" :timestamp-near "Mar 8 · 22:42" :on-info-button-pressed identity})]
|
||||
(let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12" :timestamp-near "Mar 8 · 22:42" :on-info-button-pressed identity
|
||||
:on-press #(println "fill gaps") :warning-label (i18n/label :messages-gap-warning)})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50}
|
||||
[rn/view {:padding 16}
|
||||
+8
-4
@@ -1,10 +1,11 @@
|
||||
(ns quo2.screens.messages.system-message
|
||||
(ns status-im.ui2.screens.quo2-preview.messages.system-message
|
||||
(:require [reagent.core :as reagent]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.messages.system-message :as system-message]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def descriptor [{:label "Message Type"
|
||||
:key :type
|
||||
@@ -50,7 +51,10 @@
|
||||
:pinned-by "Steve"
|
||||
:content-text "Hello! This is an example of a pinned message!"
|
||||
:content-info "3 photos"
|
||||
:timestamp-str "09:41"})]
|
||||
:timestamp-str "09:41"
|
||||
:labels {:pinned-a-message (i18n/label :pinned-a-message)
|
||||
:message-deleted (i18n/label :message-deleted)
|
||||
:added (i18n/label :added)}})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.navigation.bottom-nav-tab
|
||||
(ns status-im.ui2.screens.quo2-preview.navigation.bottom-nav-tab
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.navigation.bottom-nav-tab :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+5
-4
@@ -1,9 +1,10 @@
|
||||
(ns quo2.screens.navigation.floating-shell-button
|
||||
(ns status-im.ui2.screens.quo2-preview.navigation.floating-shell-button
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.navigation.floating-shell-button :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def descriptor [{:label "Show jump to?"
|
||||
:key :show-jump-to?
|
||||
@@ -27,7 +28,7 @@
|
||||
(defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
|
||||
(cond-> {}
|
||||
show-jump-to?
|
||||
(assoc :jump-to {:on-press #()})
|
||||
(assoc :jump-to {:on-press #() :label (i18n/label :t/jump-to)})
|
||||
show-search?
|
||||
(assoc :search {:on-press #()})
|
||||
show-mention?
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
(ns quo2.screens.navigation.page-nav
|
||||
(:require [quo2.screens.preview :as preview]
|
||||
(ns status-im.ui2.screens.quo2-preview.navigation.page-nav
|
||||
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.navigation.page-nav :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.navigation.top-nav
|
||||
(ns status-im.ui2.screens.quo2-preview.navigation.top-nav
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.navigation.top-nav :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+3
-3
@@ -1,11 +1,11 @@
|
||||
(ns quo2.screens.notifications.activity-logs
|
||||
(:require [quo2.screens.preview :as preview]
|
||||
(ns status-im.ui2.screens.quo2-preview.notifications.activity-logs
|
||||
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.notifications.activity-logs :as activity-logs]
|
||||
[quo2.components.tags.context-tags :as context-tags]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.screens.tags.status-tags :as status-tags]
|
||||
[status-im.ui2.screens.quo2-preview.tags.status-tags :as status-tags]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def descriptor [{:label "Unread?"
|
||||
@@ -1,4 +1,4 @@
|
||||
(ns quo2.screens.preview)
|
||||
(ns status-im.ui2.screens.quo2-preview.preview)
|
||||
|
||||
(defmacro list-comp [[binding seq-expr & bindings] body-expr]
|
||||
(cond (not binding)
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.screens.preview
|
||||
(ns status-im.ui2.screens.quo2-preview.preview
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors])
|
||||
(:require-macros quo2.screens.preview))
|
||||
(:require-macros status-im.ui2.screens.quo2-preview.preview))
|
||||
|
||||
(def container {:flex-direction :row
|
||||
:padding-vertical 8
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.reactions.react
|
||||
(ns status-im.ui2.screens.quo2-preview.reactions.react
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.reactions.reaction :as quo2.reaction]))
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns quo2.screens.selectors.disclaimer
|
||||
(ns status-im.ui2.screens.quo2-preview.selectors.disclaimer
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.buttons.button :as button]
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.selectors.selectors
|
||||
(ns status-im.ui2.screens.quo2-preview.selectors.selectors
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.selectors.selectors :as quo2]
|
||||
[quo2.components.markdown.text :as text]
|
||||
+3
-3
@@ -1,10 +1,10 @@
|
||||
(ns quo2.screens.switcher.switcher-cards
|
||||
(ns status-im.ui2.screens.quo2-preview.switcher.switcher-cards
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[quo2.components.switcher.switcher-cards :as switcher-cards]))
|
||||
[status-im.switcher.switcher-cards.switcher-cards :as switcher-cards]))
|
||||
|
||||
(def descriptor [{:label "Type"
|
||||
:key :type
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.tabs.account-selector
|
||||
(ns status-im.ui2.screens.quo2-preview.tabs.account-selector
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.tabs.account-selector :as quo2]))
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.tabs.segmented-tab
|
||||
(ns status-im.ui2.screens.quo2-preview.tabs.segmented-tab
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.tabs.segmented-tab :as quo2]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.tabs.tabs
|
||||
(ns status-im.ui2.screens.quo2-preview.tabs.tabs
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.tabs.tabs :as quo2]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
+2
-2
@@ -1,8 +1,8 @@
|
||||
(ns quo2.screens.tags.context-tags
|
||||
(ns status-im.ui2.screens.quo2-preview.tags.context-tags
|
||||
(:require [reagent.core :as reagent]
|
||||
[status-im.multiaccounts.core :as multiaccounts]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.tags.context-tags :as quo2]))
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.tags.permission-tag
|
||||
(ns status-im.ui2.screens.quo2-preview.tags.permission-tag
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.tags.permission-tag :as permission-tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
+7
-6
@@ -1,9 +1,10 @@
|
||||
(ns quo2.screens.tags.status-tags
|
||||
(ns status-im.ui2.screens.quo2-preview.tags.status-tags
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.tags.status-tags :as quo2]))
|
||||
[quo2.components.tags.status-tags :as quo2]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def status-tags-options
|
||||
{:label "Status"
|
||||
@@ -30,9 +31,9 @@
|
||||
:size :small})]
|
||||
(fn []
|
||||
(let [props (cond-> @state
|
||||
(= :positive (:status @state)) (assoc :status {:label "Positive" :type :positive})
|
||||
(= :negative (:status @state)) (assoc :status {:label "Negative" :type :negative})
|
||||
(= :pending (:status @state)) (assoc :status {:label "Pending" :type :pending}))]
|
||||
(= :positive (:status @state)) (assoc :status {:label (i18n/label :positive) :type :positive})
|
||||
(= :negative (:status @state)) (assoc :status {:label (i18n/label :negative) :type :negative})
|
||||
(= :pending (:status @state)) (assoc :status {:label (i18n/label :pending) :type :pending}))]
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1}
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.tags.tags
|
||||
(ns status-im.ui2.screens.quo2-preview.tags.tags
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[status-im.ui.components.react :as react]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.tags.tags :as tags]
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.tags.token-tag
|
||||
(ns status-im.ui2.screens.quo2-preview.tags.token-tag
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.tags.token-tag :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+2
-2
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.wallet.lowest-price
|
||||
(ns status-im.ui2.screens.quo2-preview.wallet.lowest-price
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo2.components.wallet.lowest-price :as quo2]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user