Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 ibrahem
|
a8549c7912 | ||
|
ibrahem
|
8fc7421bef | ||
|
ibrahem
|
1050b57de8 | ||
|
ibrahem
|
936168b6df |
@@ -287,7 +287,6 @@ 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
|
||||
|
||||
+1
-1
@@ -640,7 +640,7 @@ SPEC CHECKSUMS:
|
||||
FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
|
||||
FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
|
||||
Folly: b73c3869541e86821df3c387eb0af5f65addfab4
|
||||
glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
|
||||
glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
|
||||
HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
|
||||
Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
|
||||
libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
|
||||
|
||||
@@ -20,11 +20,7 @@ buildGoPackage {
|
||||
# Build the Go library
|
||||
buildPhase = ''
|
||||
runHook preBuild
|
||||
go build \
|
||||
-buildmode='c-archive' \
|
||||
-tags='gowaku_skip_migrations' \
|
||||
-o "$out/libstatus.a" \
|
||||
$NIX_BUILD_TOP/main.go
|
||||
go build -buildmode=c-archive -o $out/libstatus.a $NIX_BUILD_TOP/main.go
|
||||
runHook postBuild
|
||||
'';
|
||||
}
|
||||
|
||||
@@ -11,9 +11,6 @@
|
||||
|
||||
let
|
||||
inherit (lib) concatStringsSep optionalString optional;
|
||||
isIOS = platform == "ios";
|
||||
isAndroid = platform == "android";
|
||||
|
||||
in buildGoPackage {
|
||||
pname = source.repo;
|
||||
version = "${source.cleanVersion}-${source.shortRev}-${platform}";
|
||||
@@ -23,32 +20,30 @@ in buildGoPackage {
|
||||
|
||||
# Sandbox causes Xcode issues on MacOS. Requires sandbox=relaxed.
|
||||
# https://github.com/status-im/status-mobile/pull/13912
|
||||
__noChroot = isIOS;
|
||||
__noChroot = (platform == "ios");
|
||||
|
||||
extraSrcPaths = [ gomobile ];
|
||||
nativeBuildInputs = [ gomobile removeReferencesTo ]
|
||||
++ optional isAndroid openjdk
|
||||
++ optional isIOS xcodeWrapper;
|
||||
++ optional (platform == "android") openjdk
|
||||
++ optional (platform == "ios") xcodeWrapper;
|
||||
|
||||
ldflags = concatStringsSep " " goBuildLdFlags;
|
||||
|
||||
ANDROID_HOME = optionalString isAndroid androidPkgs.sdk;
|
||||
ANDROID_HOME = optionalString (platform == "android") androidPkgs.sdk;
|
||||
|
||||
# Ensure XCode is present for iOS, instead of failing at the end of the build.
|
||||
preConfigure = optionalString isIOS utils.enforceXCodeAvailable;
|
||||
preConfigure = optionalString (platform == "ios") utils.enforceXCodeAvailable;
|
||||
|
||||
buildPhase = ''
|
||||
runHook preBuild
|
||||
echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"
|
||||
|
||||
set -x
|
||||
gomobile bind \
|
||||
${concatStringsSep " " goBuildFlags} \
|
||||
-ldflags="$ldflags" \
|
||||
-target=${concatStringsSep "," targets} \
|
||||
${optionalString isAndroid "-androidapi=${platformVersion}" } \
|
||||
${optionalString isIOS "-iosversion=${platformVersion}" } \
|
||||
-tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations' \
|
||||
${optionalString (platform == "android") "-androidapi=${platformVersion}"} \
|
||||
${optionalString (platform == "ios") "-iosversion=${platformVersion}"} \
|
||||
-o ${outputFileName} \
|
||||
${source.goPackagePath}/mobile
|
||||
|
||||
@@ -63,7 +58,7 @@ in buildGoPackage {
|
||||
# Drop govers from disallowedReferences.
|
||||
dontRenameImports = true;
|
||||
# Replace hardcoded paths to go package in /nix/store.
|
||||
preFixup = optionalString isIOS ''
|
||||
preFixup = optionalString (platform == "ios") ''
|
||||
find $out -type f -exec \
|
||||
remove-references-to -t $disallowedReferences '{}' + || true
|
||||
'';
|
||||
|
||||
+1
-4
@@ -12,9 +12,6 @@
|
||||
"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",
|
||||
@@ -40,7 +37,7 @@
|
||||
"qrcode": "^1.4.1",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "^16.4.2",
|
||||
"react-native": "0.63.5",
|
||||
"react-native": "0.63.4",
|
||||
"react-native-background-timer": "^2.1.1",
|
||||
"react-native-blob-util": "^0.13.18",
|
||||
"react-native-camera-kit": "^8.0.4",
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
#!/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
|
||||
@@ -4,40 +4,50 @@
|
||||
[quo.haptic :as haptic]
|
||||
[quo.gesture-handler :as gh]
|
||||
[quo.design-system.spacing :as spacing]
|
||||
[quo.design-system.colors :as colors]
|
||||
[quo.components.text :as text]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
[clojure.string :as string]
|
||||
[quo.components.controls.view :as controls]
|
||||
[quo.components.tooltip :as tooltip]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[quo.components.animated.pressable :as animated]))
|
||||
|
||||
(defn- icons-lib [icon-name props]
|
||||
(if (-> icon-name
|
||||
namespace
|
||||
(string/includes? "main-icons2"))
|
||||
[quo2.icons/icon icon-name props]
|
||||
[icons/icon icon-name props]))
|
||||
|
||||
(defn themes [theme]
|
||||
(case theme
|
||||
:main {:icon-color (:icon-04 @colors/theme)
|
||||
:icon-bg-color (:interactive-02 @colors/theme)
|
||||
:active-background (:interactive-02 @colors/theme)
|
||||
:passive-background (:ui-background @colors/theme)
|
||||
:text-color (:text-01 @colors/theme)}
|
||||
:accent {:icon-color (:icon-04 @colors/theme)
|
||||
:icon-bg-color (:interactive-02 @colors/theme)
|
||||
:active-background (:interactive-02 @colors/theme)
|
||||
:passive-background (:ui-background @colors/theme)
|
||||
:text-color (:text-04 @colors/theme)}
|
||||
:negative {:icon-color (:negative-01 @colors/theme)
|
||||
:icon-bg-color (:negative-02 @colors/theme)
|
||||
:active-background (:negative-02 @colors/theme)
|
||||
:passive-background (:ui-background @colors/theme)
|
||||
:text-color (:negative-01 @colors/theme)}
|
||||
:positive {:icon-color (:positive-01 @colors/theme)
|
||||
:icon-bg-color (:positive-02 @colors/theme)
|
||||
:active-background (:positive-02 @colors/theme)
|
||||
:passive-background (:ui-background @colors/theme)
|
||||
:text-color (:positive-01 @colors/theme)}
|
||||
:disabled {:icon-color (:icon-02 @colors/theme)
|
||||
:icon-bg-color (:ui-01 @colors/theme)
|
||||
:active-background (:ui-01 @colors/theme)
|
||||
:passive-background (:ui-background @colors/theme)
|
||||
:text-color (:text-02 @colors/theme)}))
|
||||
:main {:icon-color (:icon-04 @quo.colors/theme)
|
||||
:icon-bg-color (:interactive-02 @quo.colors/theme)
|
||||
:active-background (:interactive-02 @quo.colors/theme)
|
||||
:passive-background (:ui-background @quo.colors/theme)
|
||||
:text-color (:text-01 @quo.colors/theme)}
|
||||
:accent {:icon-color (:icon-04 @quo.colors/theme)
|
||||
:icon-bg-color (:interactive-02 @quo.colors/theme)
|
||||
:active-background (:interactive-02 @quo.colors/theme)
|
||||
:passive-background (:ui-background @quo.colors/theme)
|
||||
:text-color (:text-04 @quo.colors/theme)}
|
||||
:negative {:icon-color (:negative-01 @quo.colors/theme)
|
||||
:icon-bg-color (:negative-02 @quo.colors/theme)
|
||||
:active-background (:negative-02 @quo.colors/theme)
|
||||
:passive-background (:ui-background @quo.colors/theme)
|
||||
:text-color (:negative-01 @quo.colors/theme)}
|
||||
:positive {:icon-color (:positive-01 @quo.colors/theme)
|
||||
:icon-bg-color (:positive-02 @quo.colors/theme)
|
||||
:active-background (:positive-02 @quo.colors/theme)
|
||||
:passive-background (:ui-background @quo.colors/theme)
|
||||
:text-color (:positive-01 @quo.colors/theme)}
|
||||
:disabled {:icon-color (:icon-02 @quo.colors/theme)
|
||||
:icon-bg-color (:ui-01 @quo.colors/theme)
|
||||
:active-background (:ui-01 @quo.colors/theme)
|
||||
:passive-background (:ui-background @quo.colors/theme)
|
||||
:text-color (:text-02 @quo.colors/theme)}))
|
||||
|
||||
(defn size->icon-size [size]
|
||||
(case size
|
||||
@@ -51,13 +61,13 @@
|
||||
|
||||
(defn size->single-title-size [size]
|
||||
(case size
|
||||
:small :base
|
||||
:large))
|
||||
:small :paragraph-1
|
||||
:paragraph-1))
|
||||
|
||||
(defn container [{:keys [size container-style]} & children]
|
||||
(into [rn/view {:style (merge (:tiny spacing/padding-horizontal)
|
||||
(defn container [{:keys [size container-style container-padding-horizontal container-padding-vertical]} & children]
|
||||
(into [rn/view {:style (merge (or container-padding-horizontal (:tiny spacing/padding-horizontal))
|
||||
{:min-height (size->container-size size)
|
||||
:padding-vertical 8
|
||||
:padding-vertical (or container-padding-vertical 8)
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :space-between} container-style)}]
|
||||
@@ -78,17 +88,18 @@
|
||||
:justify-content :center
|
||||
:border-radius (/ icon-size 2)
|
||||
:background-color icon-bg-color}}
|
||||
[icons/icon icon {:color icon-color}]])])))
|
||||
(icons-lib icon {:color icon-color})])])))
|
||||
|
||||
(defn title-column
|
||||
[{:keys [title text-color subtitle subtitle-max-lines subtitle-secondary
|
||||
title-accessibility-label size text-size title-text-weight
|
||||
right-side-present?]}]
|
||||
[rn/view {:style (merge (:tiny spacing/padding-horizontal)
|
||||
right-side-present? title-column-style]}]
|
||||
[rn/view {:style (or title-column-style
|
||||
(merge (:tiny spacing/padding-horizontal)
|
||||
;; make left-side title grow if nothing is present on right-side
|
||||
(when-not right-side-present?
|
||||
{:flex 1
|
||||
:justify-content :center}))}
|
||||
(when-not right-side-present?
|
||||
{:flex 1
|
||||
:justify-content :center})))}
|
||||
(cond
|
||||
|
||||
(and title subtitle)
|
||||
@@ -109,6 +120,7 @@
|
||||
:weight :regular
|
||||
:color :secondary
|
||||
:ellipsize-mode :tail
|
||||
:secondary-color colors/neutral-50
|
||||
:number-of-lines subtitle-max-lines
|
||||
:size text-size}
|
||||
subtitle]
|
||||
@@ -116,6 +128,7 @@
|
||||
:weight :regular
|
||||
:color :secondary
|
||||
:ellipsize-mode :middle
|
||||
:secondary-color colors/neutral-50
|
||||
:number-of-lines subtitle-max-lines
|
||||
:size text-size}
|
||||
"•"]
|
||||
@@ -123,6 +136,7 @@
|
||||
:weight :regular
|
||||
:color :secondary
|
||||
:ellipsize-mode :middle
|
||||
:secondary-color colors/neutral-50
|
||||
:number-of-lines subtitle-max-lines
|
||||
:size text-size}
|
||||
subtitle-secondary]]
|
||||
@@ -130,6 +144,7 @@
|
||||
[text/text {:weight :regular
|
||||
:color :secondary
|
||||
:ellipsize-mode :tail
|
||||
:secondary-color colors/neutral-50
|
||||
:number-of-lines subtitle-max-lines
|
||||
:size text-size}
|
||||
subtitle]
|
||||
@@ -184,19 +199,19 @@
|
||||
accessory)]
|
||||
(when (and chevron platform/ios?)
|
||||
[rn/view {:style {:padding-right (:tiny spacing/spacing)}}
|
||||
[icons/icon :main-icons/next {:container-style {:opacity 0.4
|
||||
(icons-lib :main-icons/next {:container-style {:opacity 0.4
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
:resize-mode :center
|
||||
:color (:icon-02 @colors/theme)}]])]))
|
||||
:color (:icon-02 @quo.colors/theme)})])]))
|
||||
|
||||
(defn list-item
|
||||
[{:keys [theme accessory disabled subtitle-max-lines icon icon-container-style
|
||||
left-side-alignment icon-color icon-bg-color
|
||||
left-side-alignment icon-color icon-bg-color title-column-style
|
||||
title subtitle subtitle-secondary active on-press on-long-press chevron size text-size
|
||||
accessory-text accessibility-label title-accessibility-label accessory-style
|
||||
haptic-feedback haptic-type error animated animated-accessory? title-text-weight container-style
|
||||
active-background-enabled background-color]
|
||||
active-background-enabled background-color container-padding-horizontal container-padding-vertical]
|
||||
:or {subtitle-max-lines 1
|
||||
theme :main
|
||||
haptic-feedback true
|
||||
@@ -236,7 +251,7 @@
|
||||
{:on-long-press (fn []
|
||||
(optional-haptic)
|
||||
(on-long-press))}))
|
||||
[container {:size size :container-style container-style}
|
||||
[container {:size size :container-style container-style :container-padding-vertical container-padding-vertical :container-padding-horizontal container-padding-horizontal }
|
||||
[left-side {:icon-color icon-color
|
||||
:text-color (if on-press
|
||||
text-color
|
||||
@@ -253,7 +268,8 @@
|
||||
:subtitle subtitle
|
||||
:subtitle-max-lines subtitle-max-lines
|
||||
:subtitle-secondary subtitle-secondary
|
||||
:right-side-present? (or accessory chevron)}]
|
||||
:right-side-present? (or accessory chevron)
|
||||
:title-column-style title-column-style}]
|
||||
[right-side {:chevron chevron
|
||||
:active active
|
||||
:disabled disabled
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
(ns quo2.components.avatars.account-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.theme :as theme]))
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo.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,5 +40,6 @@
|
||||
:justify-content :center
|
||||
:align-items :center}}
|
||||
[icons/icon icon
|
||||
{:no-color true
|
||||
:size inner-icon-size}]]))
|
||||
{:no-color true
|
||||
:container-style {:width inner-icon-size
|
||||
:height inner-icon-size}}]]))
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.avatars.channel-avatar
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.theme :as theme]))
|
||||
[quo.theme :as theme]))
|
||||
|
||||
(defn channel-avatar [{:keys [big? locked? emoji-background-color emoji]}]
|
||||
(let [lock-exists? (some? locked?)
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.avatars.group-avatar
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icon]
|
||||
[react-native.core :as rn]))
|
||||
[quo.react-native :as rn]))
|
||||
|
||||
(def sizes
|
||||
{:icon {:small 12
|
||||
|
||||
@@ -1,28 +1,29 @@
|
||||
(ns quo2.components.avatars.icon-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]))
|
||||
[status-im.ui.components.icons.icons :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 {:size icon-size
|
||||
:color icon-color}]]))
|
||||
[icons/icon icon {:container-style {:width icon-size
|
||||
:height icon-size}
|
||||
:color icon-color}]]))
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
(ns quo2.components.avatars.user-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.theme :refer [dark?]]
|
||||
[clojure.string :refer [upper-case split blank?]]))
|
||||
[clojure.string :refer [upper-case split blank?]]
|
||||
[quo.theme :refer [dark?]]))
|
||||
|
||||
(def sizes {:big {:outer 80
|
||||
:inner 72
|
||||
@@ -132,8 +131,8 @@
|
||||
:no-color true}])
|
||||
(if profile-picture
|
||||
;; display image
|
||||
[fast-image/fast-image {:source {:uri profile-picture}
|
||||
:style (container-styling inner-dimensions outer-dimensions)}]
|
||||
[rn/image {:style (container-styling inner-dimensions outer-dimensions)
|
||||
:source profile-picture}]
|
||||
;; else display initials
|
||||
[container inner-dimensions outer-dimensions
|
||||
[text/text {:weight :semi-bold
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.avatars.wallet-user-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[clojure.string :as clojure-string]))
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.buttons.button
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.theme :as theme]
|
||||
[quo.theme :as theme]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.icon :as quo2.icons]))
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
(ns quo2.components.buttons.dynamic-button
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :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]))
|
||||
@@ -59,7 +60,7 @@
|
||||
:customization-color customize jump-to and mention button color}"
|
||||
[_]
|
||||
(let [pressed? (reagent/atom false)]
|
||||
(fn [{:keys [type label on-press count customization-color style]}]
|
||||
(fn [{:keys [type on-press count customization-color style]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press-in #(reset! pressed? true)
|
||||
:on-press-out #(reset! pressed? false)
|
||||
@@ -92,8 +93,8 @@
|
||||
:notification-up 0
|
||||
:search-with-label 8)}}
|
||||
(case type
|
||||
:jump-to label
|
||||
:search-with-label label
|
||||
:jump-to (i18n/label :t/jump-to)
|
||||
:search-with-label (i18n/label :t/back)
|
||||
(:mention :notification-down :notification-up) (str count))])
|
||||
(when (#{:jump-to :notification-down :notification-up} type)
|
||||
[icon-view type])]])))
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
(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]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]
|
||||
[react-native.linear-gradient :as linear-gradient]
|
||||
[react-native.masked-view :as masked-view]
|
||||
[react-native.syntax-highlighter :as highlighter]))
|
||||
[status-im.ui.components.react :as react]))
|
||||
|
||||
;; Example themes:
|
||||
;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
|
||||
@@ -92,12 +91,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?
|
||||
[masked-view/masked-view
|
||||
[react/masked-view
|
||||
{:mask-element
|
||||
(reagent/as-element
|
||||
[linear-gradient/linear-gradient {:colors ["black" "transparent"]
|
||||
:locations [0.75 1]
|
||||
:style {:flex 1}}])}]
|
||||
[react/linear-gradient {:colors ["black" "transparent"]
|
||||
:locations [0.75 1]
|
||||
:style {:flex 1}}])}]
|
||||
[:<>])]
|
||||
|
||||
[rn/view {:style {:overflow :hidden
|
||||
@@ -141,15 +140,15 @@
|
||||
:on-copy-press on-copy-press}])))
|
||||
|
||||
(defn snippet [{:keys [language max-lines on-copy-press]} children]
|
||||
[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}}
|
||||
[:> 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,44 +1,45 @@
|
||||
(ns quo2.components.community.community-card-view
|
||||
(:require
|
||||
[quo2.components.community.community-view :as community-view]
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
[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]))
|
||||
|
||||
(defn community-card-view-item
|
||||
[{:keys [name description locked
|
||||
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]]]]]]])
|
||||
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}]
|
||||
[community-view/community-stats-column :card-view]
|
||||
[community-view/community-tags tags]]]]]]))
|
||||
|
||||
|
||||
@@ -3,89 +3,74 @@
|
||||
[quo2.components.community.community-view :as community-view]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.counter.counter :as counter]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
[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]))
|
||||
|
||||
(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}
|
||||
(defn communities-list-view-item [{:keys [id name locked status 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}
|
||||
[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))}}
|
||||
:ellipsize-mode :tail}
|
||||
name]
|
||||
[community-view/community-stats-column :list-view]]
|
||||
(if (= status :gated)
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]
|
||||
(cond
|
||||
(= notifications :unread-messages-count)
|
||||
[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)}]))]]]])
|
||||
|
||||
(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
|
||||
:ellipsize-mode :tail
|
||||
:weight :semi-bold
|
||||
:size :paragraph-1}
|
||||
name]]
|
||||
(when (= status :gated)
|
||||
[rn/view {:justify-content :center
|
||||
:margin-right 12}
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]])]]]])
|
||||
[community-view/permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}])]]]])
|
||||
|
||||
(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
|
||||
[react/view {:margin-bottom 12
|
||||
:padding-horizontal 8}
|
||||
[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
|
||||
:padding-vertical 8
|
||||
:padding-horizontal 12}
|
||||
[react/view {:flex-direction :row
|
||||
:border-radius 16
|
||||
:align-items :center}
|
||||
[communities.icon/community-icon-redesign community 48]
|
||||
[react/view {:margin-left 12
|
||||
:flex 1}
|
||||
[community-view/community-title {:title name}]]
|
||||
(when (= status :gated)
|
||||
[react/view {:justify-content :center
|
||||
:margin-right 12}
|
||||
[community-view/permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}]])]]]])
|
||||
@@ -4,75 +4,83 @@
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.tags.permission-tag :as permission]
|
||||
[quo2.components.tags.tag :as tag]
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
[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]))
|
||||
|
||||
(defn community-stats [{:keys [icon members-count icon-color]}]
|
||||
[rn/view (style/stats-count-container)
|
||||
[rn/view {:margin-right 4}
|
||||
(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}
|
||||
[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}
|
||||
members-count]])
|
||||
:resize-mode :center
|
||||
:size 16
|
||||
:color icon-color}]]
|
||||
[text/text {:weight :regular
|
||||
:size :paragraph-1}
|
||||
(format-members count)]])
|
||||
|
||||
(defn community-stats-column [type]
|
||||
(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))
|
||||
(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))
|
||||
[community-stats {:icon :main-icons2/group
|
||||
:members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from outside this component
|
||||
:count "629.2K"
|
||||
:icon-color icon-color}]
|
||||
[community-stats {:icon :main-icons2/lightning
|
||||
:members-count "112.1K"
|
||||
:count "112.1K"
|
||||
:icon-color icon-color}]
|
||||
(when (= type :card-view)
|
||||
[community-stats {:icon :main-icons2/placeholder
|
||||
:count 4
|
||||
:icon-color icon-color}])]))
|
||||
[community-stats {:icon :main-icons2/placeholder
|
||||
:count 4
|
||||
:icon-color icon-color}]]))
|
||||
|
||||
(defn community-tags [tags]
|
||||
[rn/view (style/community-tags-container)
|
||||
[react/view (styles/community-tags-container)
|
||||
(for [{:keys [id tag-label resource]} tags]
|
||||
^{:key id}
|
||||
[rn/view {:margin-right 8}
|
||||
[react/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}}]
|
||||
[rn/view (style/community-title-description-container (if (= size :large) 56 32))
|
||||
[react/view (styles/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]}]
|
||||
(defn permission-tag-container [{:keys [locked tokens]}]
|
||||
[permission/tag {:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)
|
||||
:locked? locked?
|
||||
:locked locked
|
||||
:tokens tokens
|
||||
:size 24}])
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.community.discover-card
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.community.style :as style]
|
||||
[react-native.core :as rn]))
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[status-im.ui.components.react :as react]))
|
||||
|
||||
;; 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]
|
||||
[rn/view
|
||||
[react/view
|
||||
{:flex 1
|
||||
:padding-top 8
|
||||
:padding-bottom 8
|
||||
:border-radius 12}
|
||||
[rn/view {:flex 1
|
||||
:padding-horizontal 12}
|
||||
[react/view {:flex 1
|
||||
:padding-horizontal 12}
|
||||
[text/text {:accessibility-label :community-name-text
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
@@ -35,53 +35,52 @@
|
||||
description]]])
|
||||
|
||||
(defn placeholder-list-images [{:keys [images width height border-radius]}]
|
||||
[rn/view
|
||||
[rn/view {:justify-content :center}
|
||||
[react/view
|
||||
[react/view {:justify-content :center}
|
||||
(for [{:keys [id]} images]
|
||||
^{:key id}
|
||||
[rn/view {:border-radius border-radius
|
||||
:margin-top 4
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])]])
|
||||
[react/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]}]
|
||||
[rn/view
|
||||
[react/view
|
||||
(when first-image
|
||||
[rn/view {:border-bottom-right-radius 6
|
||||
:border-bottom-left-radius 6
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])
|
||||
[react/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
|
||||
[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}])])
|
||||
[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}])])
|
||||
|
||||
(defn discover-card [{:keys [title description on-press accessibility-label]}]
|
||||
(defn discover-card [{:keys [title description on-press]}]
|
||||
(let [on-joined-images (get images :images)]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-press
|
||||
:accessibility-label accessibility-label}
|
||||
[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})
|
||||
[react/touchable-without-feedback
|
||||
{:on-press on-press}
|
||||
[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})
|
||||
[card-title-and-description title description]
|
||||
(for [{:keys [id column-images]} on-joined-images]
|
||||
^{:key id}
|
||||
@@ -91,4 +90,5 @@
|
||||
: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
|
||||
]]))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.counter.counter
|
||||
(:require [quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
(:require [quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.dividers.divider-label
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as markdown.text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]))
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def chevron-icon-container-width 20)
|
||||
|
||||
@@ -42,7 +42,8 @@
|
||||
[icons/icon
|
||||
:main-icons/chevron-down
|
||||
{:color text-and-icon-color
|
||||
:size chevron-icon-container-width}])
|
||||
:width chevron-icon-container-width
|
||||
:height chevron-icon-container-height}])
|
||||
(when (pos? counter-value)
|
||||
[rn/view {:style {:border-radius 6
|
||||
:height 16
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
(ns quo2.components.dividers.new-messages
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.linear-gradient :as linear-gradient]))
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.components.react :as react]))
|
||||
|
||||
(defn new-messages
|
||||
"new-messages params - label, color"
|
||||
[{:keys [label color] :or {color :primary}}]
|
||||
[{:keys [label color] :or {label (i18n/label :new-messages-header)
|
||||
color :primary}}]
|
||||
(let [bg-color (colors/custom-color-by-theme color 50 60 5 5)
|
||||
text-color (colors/custom-color-by-theme color 50 60)]
|
||||
[linear-gradient/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
|
||||
:start {:x 0 :y 0} :end {:x 0 :y 1}}
|
||||
[react/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
|
||||
:start {:x 0 :y 0} :end {:x 0 :y 1}}
|
||||
[rn/view {:style {:padding-left 60
|
||||
:padding-vertical 12
|
||||
:padding-right 24}}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(ns quo2.components.drawers.action-drawers
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
@@ -16,20 +17,20 @@
|
||||
danger?
|
||||
on-press]}]
|
||||
[rn/touchable-opacity {:on-press on-press}
|
||||
[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}}
|
||||
[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}}
|
||||
[icon/icon icon
|
||||
{:color (get-icon-color danger?)
|
||||
:size 20}]]
|
||||
[rn/view
|
||||
[react/view
|
||||
{:style
|
||||
{:flex 1
|
||||
:justify-content :center}}
|
||||
@@ -47,11 +48,11 @@
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||
sub-label])]
|
||||
(when right-icon
|
||||
[rn/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:width 20}}
|
||||
[react/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:width 20}}
|
||||
[icon/icon right-icon
|
||||
{:color (get-icon-color danger?)
|
||||
:size 20}]])]])
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.dropdowns.dropdown
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[quo2.reanimated :as reanimated]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn apply-anim [dd-height val]
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
(ns quo2.components.header
|
||||
(:require [oops.core :refer [oget]]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[quo.animated :as animated]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo.design-system.spacing :as spacing]
|
||||
[quo.react-native :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def header-height 56)
|
||||
@@ -60,14 +61,15 @@
|
||||
:right (max (:width left) (:width right))})))
|
||||
|
||||
(def header-actions-style
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:padding-horizontal 4})
|
||||
(merge
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(:x-tiny spacing/padding-horizontal)))
|
||||
|
||||
(def header-action-placeholder
|
||||
{:width 16})
|
||||
{:width (:base spacing/spacing)})
|
||||
|
||||
(def element {:align-items :center
|
||||
:justify-content :center
|
||||
@@ -143,9 +145,9 @@
|
||||
border-bottom false}}]
|
||||
(let [status-bar-height (get insets :top 0)
|
||||
height (+ header-height status-bar-height)]
|
||||
[reanimated/view {:style (header-wrapper-style {:height height
|
||||
:background background
|
||||
:border-bottom border-bottom})}
|
||||
[animated/view {:style (header-wrapper-style {:height height
|
||||
:background background
|
||||
:border-bottom border-bottom})}
|
||||
[rn/view {:pointer-events :box-none
|
||||
:height status-bar-height}]
|
||||
[rn/view {:style (merge {:height header-height}
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.icon
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.icons.icons :as icons]
|
||||
[status-im.ui.components.react :as react]
|
||||
[clojure.string :as string]
|
||||
[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}
|
||||
[rn/image
|
||||
[react/image
|
||||
{:style
|
||||
(merge {:width size
|
||||
:height size}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.info.info-message
|
||||
(:require [quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
(:require [quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as quo2.icons]))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.info.information-box
|
||||
(:require [quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
(:require [quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[clojure.string :as string]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
(ns quo2.components.list-items.channel
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.counter.counter :as quo2.counter]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.avatars.channel-avatar :as channel-avatar]
|
||||
[quo2.components.markdown.text :as quo2.text]
|
||||
[quo2.theme :as theme]))
|
||||
[quo.theme :as theme]))
|
||||
|
||||
(defn list-item [{:keys [name locked? mentions-count unread-messages?
|
||||
muted? is-active-channel? emoji channel-color]
|
||||
:or {channel-color colors/primary-50}}]
|
||||
:or {channel-color colors/primary-50}}]
|
||||
[rn/view {:style (merge {:height 48
|
||||
:display :flex
|
||||
:border-radius 12
|
||||
@@ -21,19 +21,21 @@
|
||||
:padding-right 12}
|
||||
(when is-active-channel?
|
||||
{:background-color (colors/theme-alpha channel-color 0.05 0.05)}))}
|
||||
[rn/view {:display :flex
|
||||
:flex-direction :row
|
||||
[rn/view {:display :flex
|
||||
:flex-direction :row
|
||||
:justify-content :flex-start
|
||||
:align-items :center}
|
||||
:align-items :center}
|
||||
[channel-avatar/channel-avatar
|
||||
{:big? true
|
||||
:locked? locked?
|
||||
:locked? locked?
|
||||
:emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
|
||||
:emoji emoji}]
|
||||
[quo2.text/text
|
||||
{:style (merge {:margin-left 12}
|
||||
(when (and (not locked?) muted?)
|
||||
{:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
|
||||
{:style (merge {:margin-left 12}
|
||||
(when
|
||||
(and (not locked?)
|
||||
muted?)
|
||||
{:color (if (theme/dark?) colors/neutral-60 colors/neutral-40)}))
|
||||
:weight :medium :size :paragraph-1} (str "# " name)]]
|
||||
[rn/view {:style {:height 20}}
|
||||
(when (and (not locked?)
|
||||
|
||||
@@ -1,55 +1,43 @@
|
||||
(ns quo2.components.list-items.menu-item
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors :refer [theme-colors]]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(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 description accessibility-label icon on-press arrow?]
|
||||
[{:keys [type title accessibility-label icon on-press]
|
||||
: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
|
||||
:align-items :center}}
|
||||
[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}}
|
||||
[rn/view {:style {:width 20
|
||||
:height 20
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:margin-right 12}}
|
||||
[icons/icon icon {:color icon-color}]]
|
||||
[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)}]])]))
|
||||
[text/text {:weight :medium
|
||||
:style {:color text-color}
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:size :paragraph-1}
|
||||
title]]]))
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.list-items.preview-list
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[react-native.fast-image :as fast-image]
|
||||
(:require [quo.react-native :as rn]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[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]))
|
||||
|
||||
@@ -42,13 +42,13 @@
|
||||
(defn list-item [index type size item list-size margin-left
|
||||
hole-size hole-radius hole-x hole-y border-radius]
|
||||
(let [last-item? (= index (- list-size 1))]
|
||||
[hole-view/hole-view {:style {:margin-left (if (= index 0) 0 margin-left)}
|
||||
:holes (if last-item? []
|
||||
[{:x hole-x
|
||||
:y hole-y
|
||||
:width hole-size
|
||||
:height hole-size
|
||||
:borderRadius hole-radius}])}
|
||||
[rn/hole-view {:style {:margin-left (if (= index 0) 0 margin-left)}
|
||||
:holes (if last-item? []
|
||||
[{:x hole-x
|
||||
:y hole-y
|
||||
:width hole-size
|
||||
:height hole-size
|
||||
:borderRadius hole-radius}])}
|
||||
[avatar item type size border-radius]]))
|
||||
|
||||
(defn get-overflow-color [transparent? transparent-color light-color dark-color override-theme]
|
||||
@@ -56,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 more-than-99-label]
|
||||
(defn overflow-label [label size transparent? border-radius margin-left override-theme]
|
||||
[rn/view {:style {:width size
|
||||
:height size
|
||||
:margin-left margin-left
|
||||
@@ -89,7 +89,7 @@
|
||||
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
|
||||
(if (< label 100)
|
||||
(str "+" label)
|
||||
more-than-99-label)])])
|
||||
(i18n/label :counter-99-plus))])])
|
||||
|
||||
(defn border-type [type]
|
||||
(case type
|
||||
@@ -105,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 more-than-99-label]} items]
|
||||
[{:keys [type size list-size transparent? override-theme]} items]
|
||||
(let [items-arr (into [] items)
|
||||
list-size (or list-size (count items))
|
||||
margin-left (get-in params [size :margin-left])
|
||||
@@ -120,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 more-than-99-label])]))
|
||||
[overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme])]))
|
||||
|
||||
+13
-5
@@ -1,5 +1,5 @@
|
||||
(ns status-im.ui2.screens.chat.components.received-cr-item
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.components.list-items.received-contact-request
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.utils.handlers :refer [<sub >evt]]
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
@@ -10,9 +10,17 @@
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo2.components.notifications.notification-dot :refer [notification-dot]]))
|
||||
|
||||
(defn received-cr-item [{:keys [chat-id message timestamp read]}]
|
||||
(defn get-display-name [chat-id no-ens-name no-nickname]
|
||||
(let [name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
|
||||
(if (and no-ens-name no-nickname)
|
||||
(let [[word1 word2] (str/split name " ")]
|
||||
(str word1 " " word2))
|
||||
name)))
|
||||
|
||||
(defn list-item [{:keys [chat-id image contact message timestamp read]}]
|
||||
(let [no-ens-name (str/blank? (get-in message [:content :ens-name]))
|
||||
display-name (first (<sub [:contacts/contact-two-names-by-identity chat-id]))]
|
||||
no-nickname (nil? (get-in contact [:names :nickname]))
|
||||
display-name (get-display-name chat-id no-ens-name no-nickname)]
|
||||
[rn/view {:style {:flex-direction :row
|
||||
:padding-top 8
|
||||
:margin-top 4
|
||||
@@ -24,6 +32,7 @@
|
||||
:status-indicator? true
|
||||
:online? true
|
||||
:size :small
|
||||
:profile-picture image
|
||||
:ring? false}]
|
||||
[rn/view {:style {:margin-horizontal 8}}
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
@@ -73,4 +82,3 @@
|
||||
:padding-horizontal 8
|
||||
:margin-left 8}}
|
||||
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]]))
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
(ns quo2.components.markdown.text
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.typography :as typography]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn text-style [{:keys [size align weight style]}]
|
||||
(defn text-style [{:keys [size align weight style secondary-color]}]
|
||||
(merge (case (or weight :regular)
|
||||
:regular typography/font-regular
|
||||
:medium typography/font-medium
|
||||
@@ -24,7 +24,8 @@
|
||||
{:text-align (or align :auto)}
|
||||
(if (:color style)
|
||||
style
|
||||
(assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/neutral-100)))))
|
||||
(assoc style :color (or secondary-color
|
||||
(colors/theme-colors colors/neutral-100 colors/white))))))
|
||||
|
||||
(defn text []
|
||||
(let [this (reagent/current-component)
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
(ns quo2.components.messages.gap
|
||||
(:require
|
||||
[oops.core :refer [oget]]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.components.react :refer [pressable-class]]
|
||||
[status-im.utils.handlers :refer [>evt]]))
|
||||
|
||||
;;; helpers
|
||||
(def themes
|
||||
@@ -81,7 +84,7 @@
|
||||
:color (get-color :time)}} str])
|
||||
|
||||
(defn info-button [on-press]
|
||||
[rn/touchable-without-feedback
|
||||
[pressable-class
|
||||
{:on-press on-press}
|
||||
[icon/icon "message-gap-info" {:size 12 :no-color true :container-style {:padding 4}}]])
|
||||
|
||||
@@ -96,7 +99,7 @@
|
||||
[rn/image {:style {:flex 1} :source (get-image :circles) :resize-mode :repeat}]
|
||||
[circle]])
|
||||
|
||||
(defn body [timestamp-far timestamp-near on-info-button-pressed on-press warning-label]
|
||||
(defn body [timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]
|
||||
[rn/view {:flex 1}
|
||||
[rn/view
|
||||
{:flex-direction :row
|
||||
@@ -106,10 +109,12 @@
|
||||
[timestamp timestamp-far]
|
||||
(when on-info-button-pressed [info-button on-info-button-pressed])]
|
||||
|
||||
[rn/touchable-without-feedback
|
||||
[pressable-class
|
||||
{:style {:flex 1 :margin-top 16 :margin-bottom 20}
|
||||
:on-press #(when on-press (on-press))}
|
||||
[text/text warning-label]]
|
||||
:on-press #(when (and chat-id gap-ids)
|
||||
(>evt [:chat.ui/fill-gaps chat-id gap-ids]))}
|
||||
[text/text
|
||||
(i18n/label :messages-gap-warning)]]
|
||||
|
||||
[timestamp timestamp-near]])
|
||||
|
||||
@@ -119,10 +124,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
|
||||
on-press
|
||||
warning-label]}]
|
||||
style]}]
|
||||
(let [body-height (reagent/atom nil)]
|
||||
(fn []
|
||||
[rn/view
|
||||
@@ -140,6 +145,6 @@
|
||||
style)
|
||||
|
||||
[timeline]
|
||||
[body timestamp-far timestamp-near on-info-button-pressed on-press warning-label]]
|
||||
[body timestamp-far timestamp-near chat-id gap-ids on-info-button-pressed]]
|
||||
[vborder :left body-height]
|
||||
[vborder :right body-height]])))
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
(ns quo2.components.messages.system-message
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[quo2.theme :as theme]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.components.avatars.icon-avatar :as icon-avatar]
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[utils :as utils]))
|
||||
[quo2.reanimated :as ra]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.utils.core :as utils]))
|
||||
|
||||
(def themes-landed {:pinned colors/primary-50-opa-5
|
||||
:added colors/primary-50-opa-5
|
||||
@@ -53,7 +54,7 @@
|
||||
|
||||
(defmulti sm-render :type)
|
||||
|
||||
(defmethod sm-render :deleted [{:keys [label timestamp-str labels]}]
|
||||
(defmethod sm-render :deleted [{:keys [label timestamp-str]}]
|
||||
[rn/view {:align-items :center
|
||||
:justify-content :space-between
|
||||
:flex 1
|
||||
@@ -66,10 +67,10 @@
|
||||
[text/text {:size :paragraph-2
|
||||
:style {:color (get-color :text)
|
||||
:margin-right 5}}
|
||||
(or label (:message-deleted labels))]
|
||||
(i18n/label (or label :message-deleted))]
|
||||
[sm-timestamp timestamp-str]]])
|
||||
|
||||
(defmethod sm-render :added [{:keys [state mentions timestamp-str labels]}]
|
||||
(defmethod sm-render :added [{:keys [state mentions timestamp-str]}]
|
||||
[rn/view {:align-items :center
|
||||
:flex-direction :row}
|
||||
[sm-icon {:icon :main-icons/add-user16
|
||||
@@ -83,14 +84,14 @@
|
||||
:style {:color (get-color :text)
|
||||
:margin-left 3
|
||||
:margin-right 3}}
|
||||
(:added labels)]
|
||||
(i18n/label :added)]
|
||||
[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 labels]}]
|
||||
(defmethod sm-render :pinned [{:keys [state pinned-by content timestamp-str]}]
|
||||
[rn/view {:flex-direction :row
|
||||
:flex 1
|
||||
:align-items :center}
|
||||
@@ -109,7 +110,7 @@
|
||||
:margin-right 2}
|
||||
[text/text {:size :paragraph-2
|
||||
:style {:color (get-color :text)}}
|
||||
(:pinned-a-message labels)]]
|
||||
(i18n/label :pinned-a-message)]]
|
||||
[sm-timestamp timestamp-str]]
|
||||
[rn/view {:flex-direction :row}
|
||||
[rn/view {:flex-direction :row
|
||||
@@ -136,19 +137,19 @@
|
||||
(utils/truncate-str (:info content) 24)])]]]])
|
||||
|
||||
(defn system-message
|
||||
[{:keys [type style non-pressable? animate-landing? labels] :as message}]
|
||||
[{:keys [type style non-pressable? animate-landing?] :as message}]
|
||||
[:f>
|
||||
(fn []
|
||||
(let [sv-color (reanimated/use-shared-value
|
||||
(let [sv-color (ra/use-shared-value
|
||||
(get-color :bg (if animate-landing? :landed :default) type))]
|
||||
(when animate-landing?
|
||||
(reanimated/animate-shared-value-with-delay
|
||||
(ra/animate-shared-value-with-delay
|
||||
sv-color (get-color :bg :default type) 0 :linear 1000))
|
||||
[reanimated/touchable-opacity
|
||||
[ra/touchable-opacity
|
||||
{:on-press #(when-not non-pressable?
|
||||
(reanimated/set-shared-value
|
||||
(ra/set-shared-value
|
||||
sv-color (get-color :bg :pressed type)))
|
||||
:style (reanimated/apply-animations-to-style
|
||||
:style (ra/apply-animations-to-style
|
||||
{:background-color sv-color}
|
||||
(merge
|
||||
{:flex-direction :row
|
||||
@@ -158,4 +159,4 @@
|
||||
:padding-horizontal 11
|
||||
:background-color sv-color}
|
||||
style))}
|
||||
[sm-render message labels]]))])
|
||||
[sm-render message]]))])
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
(ns quo2.components.navigation.bottom-nav-tab
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.hole-view :as hole-view]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.reanimated :as reanimated]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icons.icons :as icons]
|
||||
[quo2.components.counter.counter :as counter]))
|
||||
@@ -45,18 +44,18 @@
|
||||
:on-press-out #(toggle-background-color background-color true pass-through?)
|
||||
:accessibility-label accessibility-label}
|
||||
[reanimated/view {:style background-animated-style}
|
||||
[hole-view/hole-view {:style {:padding-left 33
|
||||
:padding-top 8}
|
||||
:key new-notifications? ;; Key is required to force removal of holes
|
||||
:holes (cond
|
||||
(not new-notifications?) ;; No new notifications, remove holes
|
||||
[]
|
||||
[rn/hole-view {:style {:padding-left 33
|
||||
:padding-top 8}
|
||||
:key new-notifications? ;; Key is required to force removal of holes
|
||||
:holes (cond
|
||||
(not new-notifications?) ;; No new notifications, remove holes
|
||||
[]
|
||||
|
||||
(= notification-indicator :unread-dot)
|
||||
[{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
|
||||
(= notification-indicator :unread-dot)
|
||||
[{:x 50 :y 5 :width 10 :height 10 :borderRadius 5}]
|
||||
|
||||
:else
|
||||
[{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
|
||||
:else
|
||||
[{:x 47 :y 1 :width 18 :height 18 :borderRadius 7}])}
|
||||
[reanimated/image
|
||||
{:style icon-animated-style
|
||||
:source (icons/icon-source (keyword (str icon 24)))}]]
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
(ns quo2.components.navigation.floating-shell-button
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.components.buttons.dynamic-button :as dynamic-button]))
|
||||
|
||||
(defn dynamic-button-view [type dynamic-buttons style]
|
||||
(when-let [{:keys [count on-press customization-color label]} (get dynamic-buttons type)]
|
||||
(when-let [{:keys [count on-press customization-color]} (get dynamic-buttons type)]
|
||||
[dynamic-button/dynamic-button
|
||||
{:type type
|
||||
:label label
|
||||
:on-press on-press
|
||||
:count count
|
||||
:style style
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(ns quo2.components.navigation.page-nav
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[clojure.string :as string]))
|
||||
[status-im.utils.dimensions :as dimensions]
|
||||
[clojure.string :as string]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
|
||||
(def ^:private centrify-style
|
||||
{:display :flex
|
||||
@@ -184,7 +185,8 @@
|
||||
mid-section
|
||||
left-section
|
||||
right-section-buttons]}]
|
||||
(let [put-middle-section-on-left? (or align-mid?
|
||||
(let [{:keys [height width]} (dimensions/window)
|
||||
put-middle-section-on-left? (or align-mid?
|
||||
(> (count right-section-buttons) 1))
|
||||
mid-section-props
|
||||
{:type (:type mid-section)
|
||||
@@ -195,12 +197,15 @@
|
||||
: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
|
||||
;; 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
|
||||
: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}
|
||||
page-nav-background-uri (assoc :background-color page-nav-color)
|
||||
page-nav-color (assoc :background page-nav-background-uri))}
|
||||
[rn/view {:style {:flex 1
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
(ns quo2.components.navigation.top-nav
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.counter.counter :as counter]
|
||||
[quo2.components.buttons.button :as quo2.button]
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[react-native.hole-view :as hole-view]))
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]))
|
||||
|
||||
(defn- get-button-common-props [type]
|
||||
(let [default? (= type :default)
|
||||
@@ -68,16 +67,16 @@
|
||||
[base-button :main-icons2/qr-code show-qr :show-qr-button button-common-props]
|
||||
[rn/view ;; Keep view instead of "[:<>" to make sure relative
|
||||
;; position is calculated from this view instead of its parent
|
||||
[hole-view/hole-view {:key new-notifications? ;; Key is required to force removal of holes
|
||||
:holes (cond
|
||||
(not new-notifications?) ;; No new notifications, remove holes
|
||||
[]
|
||||
[rn/hole-view {:key new-notifications? ;; Key is required to force removal of holes
|
||||
:holes (cond
|
||||
(not new-notifications?) ;; No new notifications, remove holes
|
||||
[]
|
||||
|
||||
(= notification-indicator :unread-dot)
|
||||
[{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
|
||||
(= notification-indicator :unread-dot)
|
||||
[{:x 37 :y -3 :width 10 :height 10 :borderRadius 5}]
|
||||
|
||||
:else
|
||||
[{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
|
||||
:else
|
||||
[{:x 33 :y -7 :width 18 :height 18 :borderRadius 7}])}
|
||||
[base-button :main-icons2/activity-center open-activity-center
|
||||
:open-activity-center-button button-common-props]]
|
||||
(when new-notifications?
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.notifications.activity-logs
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
(ns quo2.components.notifications.info-count
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.typography :as typography]))
|
||||
|
||||
(defn info-count [count style]
|
||||
(when (> count 0)
|
||||
[rn/view {:style (merge {:width 16
|
||||
:height 16
|
||||
:position :absolute
|
||||
:right 22
|
||||
:border-radius 6
|
||||
:background-color (colors/theme-colors colors/primary-50 colors/primary-60)}
|
||||
style)}
|
||||
[rn/text {:style (merge typography/font-medium typography/label {:color colors/white :text-align :center})} count]]))
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.notifications.notification-dot
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn notification-dot [style]
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.reactions.reaction
|
||||
(:require [quo2.components.markdown.text :as quo2.text]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.selectors.disclaimer
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.selectors.selectors :as selectors]))
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.selectors.selectors
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[quo.theme :as theme]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
(ns quo2.components.separator
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as react]
|
||||
[quo2.foundations.colors :as quo2.colors]))
|
||||
|
||||
(defn separator [{:keys [style]}]
|
||||
[rn/view
|
||||
[react/view
|
||||
{:style
|
||||
(merge
|
||||
style
|
||||
{:background-color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-10
|
||||
quo2.colors/neutral-30
|
||||
quo2.colors/neutral-80)
|
||||
:align-self :stretch
|
||||
:height 1})}])
|
||||
+1
-1
@@ -1,4 +1,4 @@
|
||||
(ns status-im.switcher.switcher-cards.styles
|
||||
(ns quo2.components.switcher.styles
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def colors-map
|
||||
+20
-20
@@ -1,26 +1,27 @@
|
||||
(ns status-im.switcher.switcher-cards.switcher-cards
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
(ns quo2.components.switcher.switcher-cards
|
||||
(:require [quo.react-native :as rn]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[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]
|
||||
[status-im.switcher.switcher-cards.styles :as styles]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.components.avatars.channel-avatar :as channel-avatar]))
|
||||
|
||||
;; Supporting Components
|
||||
|
||||
(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
|
||||
:more-than-99-label (i18n/label :counter-99-plus)
|
||||
:size 24
|
||||
:override-theme :dark} data]
|
||||
:photo [preview-list/preview-list {:type :photo
|
||||
: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)
|
||||
@@ -34,7 +35,6 @@
|
||||
: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
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.tabs.account-selector
|
||||
(:require
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as quo2]))
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.tabs.segmented-tab
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.tabs.tab :as tab]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]))
|
||||
[quo.theme :as theme]))
|
||||
|
||||
(def themes {:light {:background-color colors/neutral-20}
|
||||
:dark {:background-color colors/neutral-80}})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.tabs.tab
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icons]))
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
|
||||
(def themes {:light {:default {:background-color colors/neutral-20
|
||||
:icon-color colors/neutral-50
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
(ns quo2.components.tabs.tabs
|
||||
(:require [oops.core :refer [oget]]
|
||||
[react-native.core :as rn]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.tabs.tab :as tab]
|
||||
[reagent.core :as reagent]
|
||||
[utils :as utils]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.utils.core :as utils]
|
||||
[status-im.utils.number :as number-utils]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.notifications.notification-dot :refer [notification-dot]]
|
||||
[react-native.masked-view :as masked-view]
|
||||
[react-native.linear-gradient :as linear-gradient]))
|
||||
[quo2.components.notifications.notification-dot :refer [notification-dot]]))
|
||||
|
||||
(def default-tab-size 32)
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
(fn [{:keys [data size] :or {size default-tab-size}}]
|
||||
[rn/view (merge {:flex-direction :row} style)
|
||||
(doall
|
||||
(for [{:keys [label id new-info accessibility-label]} data]
|
||||
(for [{:keys [label id new-info]} data]
|
||||
^{:key id}
|
||||
[rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
|
||||
(when new-info
|
||||
@@ -32,14 +32,13 @@
|
||||
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
|
||||
[notification-dot]])
|
||||
[tab/tab
|
||||
{:id id
|
||||
:size size
|
||||
:accessibility-label accessibility-label
|
||||
:active (= id @active-tab-id)
|
||||
:on-press (fn []
|
||||
(reset! active-tab-id id)
|
||||
(when on-change
|
||||
(on-change id)))}
|
||||
{:id id
|
||||
:size size
|
||||
:active (= id @active-tab-id)
|
||||
:on-press (fn []
|
||||
(reset! active-tab-id id)
|
||||
(when on-change
|
||||
(on-change id)))}
|
||||
label]]))])))
|
||||
|
||||
(defn- calculate-fade-end-percentage
|
||||
@@ -50,7 +49,7 @@
|
||||
;; Truncate to avoid unnecessary rendering.
|
||||
(if (> fade-percentage 0.99)
|
||||
0.99
|
||||
(utils/naive-round fade-percentage 2))))
|
||||
(number-utils/naive-round fade-percentage 2))))
|
||||
|
||||
(defn scrollable-tabs
|
||||
"Just like the component `tabs`, displays horizontally scrollable tabs with
|
||||
@@ -98,17 +97,15 @@
|
||||
size default-tab-size}
|
||||
:as props}]
|
||||
(let [maybe-mask-wrapper (if fade-end?
|
||||
[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%"}}])}]
|
||||
[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%"}}])}]
|
||||
[:<>])]
|
||||
(conj maybe-mask-wrapper
|
||||
[rn/flat-list
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(ns quo2.components.tags.base-tag
|
||||
(:require [react-native.core :as rn]))
|
||||
(:require
|
||||
[quo.react-native :as rn]))
|
||||
|
||||
(defn style-container [size disabled border-color border-width background-color label type]
|
||||
(merge {:height size
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.tags.context-tags
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo2.theme]
|
||||
[quo.theme :as quo.theme]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.avatars.group-avatar :as group-avatar]
|
||||
[react-native.core :as rn]))
|
||||
[quo.react-native :as rn]))
|
||||
|
||||
(defn padding-left-for-type [type]
|
||||
(case type
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
(defn base-tag [_ _]
|
||||
(fn [{:keys [override-theme style]} & children]
|
||||
(let [theme (or override-theme (quo2.theme/get-theme))]
|
||||
(let [theme (or override-theme (quo.theme/get-theme))]
|
||||
(into
|
||||
[rn/view
|
||||
(merge
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(ns quo2.components.tags.permission-tag
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.tags.base-tag :as base-tag]))
|
||||
[quo2.components.tags.base-tag :as base-tag]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(defn outer-resource-container [size background-color]
|
||||
{:background-color background-color
|
||||
@@ -27,8 +28,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)
|
||||
[rn/view (outer-resource-container size background-color)
|
||||
[rn/view (extra-count-styles size)
|
||||
[react/view (outer-resource-container size background-color)
|
||||
[react/view (extra-count-styles size)
|
||||
(if (< extra-group-count 4)
|
||||
[text/text {:size :label
|
||||
:style {:align-items :center
|
||||
@@ -57,20 +58,20 @@
|
||||
:or {size 24}}]
|
||||
(let [tokens-count (count group)
|
||||
selected-tokens (take (selected-token-count group) group)]
|
||||
[rn/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [token-icon]} selected-tokens]
|
||||
^{:key token-icon}
|
||||
[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}}]]])
|
||||
[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}}]]])
|
||||
|
||||
[extra-count tokens-count (count selected-tokens) size]
|
||||
(when-not last-group
|
||||
[rn/view {:align-items :center}
|
||||
[react/view {:align-items :center}
|
||||
[text/text {:weight :medium
|
||||
:size (case size 32 :paragraph-2 24 :label)
|
||||
:style {:color (colors/theme-colors
|
||||
@@ -79,7 +80,7 @@
|
||||
:padding-left 4
|
||||
:text-transform :lowercase
|
||||
:padding-right (case size 32 16 24 12)}}
|
||||
"or"]])])))
|
||||
(i18n/label :t/or)]])])))
|
||||
|
||||
(defn selected-group-count [tokens]
|
||||
(cond
|
||||
@@ -93,8 +94,8 @@
|
||||
:or {size 24}}]
|
||||
(let [selected-groups (take (selected-group-count tokens) tokens)
|
||||
last-group-id ((last selected-groups) :id)]
|
||||
[rn/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [id group]} selected-groups]
|
||||
^{:key id}
|
||||
[token-group {:group group
|
||||
@@ -109,11 +110,11 @@
|
||||
[base-tag/base-tag {:background-color background-color
|
||||
:size size
|
||||
:type :permission}
|
||||
[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)}
|
||||
[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)}
|
||||
[icons/icon (if locked :main-icons2/locked
|
||||
:main-icons2/unlocked)
|
||||
{:resize-mode :center
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(ns quo2.components.tags.status-tags
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.theme :as quo2.theme]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.theme :as quo.theme]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def default-container-style
|
||||
{:border-radius 20
|
||||
@@ -53,7 +54,7 @@
|
||||
:background-color colors/success-50-opa-10
|
||||
:icon :verified
|
||||
:border-color colors/success-50-opa-20
|
||||
:label label
|
||||
:label (or label (i18n/label :positive))
|
||||
:text-color (if (= theme :light) colors/success-50
|
||||
colors/success-60)}])
|
||||
|
||||
@@ -63,7 +64,7 @@
|
||||
:icon :untrustworthy
|
||||
:background-color colors/danger-50-opa-10
|
||||
:border-color colors/danger-50-opa-20
|
||||
:label label
|
||||
:label (or label (i18n/label :negative))
|
||||
:text-color (if (= theme :light)
|
||||
colors/danger-50
|
||||
colors/danger-60)}])
|
||||
@@ -72,7 +73,7 @@
|
||||
[size theme label]
|
||||
[base-tag {:size size
|
||||
:icon :pending
|
||||
:label label
|
||||
:label (or label (i18n/label :pending))
|
||||
:background-color (if (= theme :light)
|
||||
colors/neutral-10
|
||||
colors/neutral-80)
|
||||
@@ -90,5 +91,5 @@
|
||||
nil)]
|
||||
[status-component
|
||||
size
|
||||
(or override-theme (quo2.theme/get-theme))
|
||||
(or override-theme (quo.theme/get-theme))
|
||||
label])))
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.tags.tag
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.tags.base-tag :as base-tag]))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.tags.tags
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.tags.tag :as tag]))
|
||||
|
||||
(defn tags [{:keys [default-active on-change]}]
|
||||
@@ -25,4 +25,5 @@
|
||||
:main-icons2/placeholder
|
||||
resource)
|
||||
:on-press #(do (reset! active-tab-id %)
|
||||
(when on-change (on-change %)))})]])]))))
|
||||
(when on-change (on-change %)))})
|
||||
tag-label]])]))))
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.tags.token-tag
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.wallet.lowest-price
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[clojure.string :as string]))
|
||||
|
||||
(def centrify {:style {:flex-direction :row
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
(ns quo2.components.wallet.network-amount
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [clojure.string :as string]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(defn network-amount
|
||||
"[network-amount opts]
|
||||
@@ -11,7 +13,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 labels] :as _opts}]
|
||||
[{:keys [show-right-border? style network-name icon eth-value] :as _opts}]
|
||||
[rn/view (merge {:accessibility-label :network-amount
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:border-radius 16
|
||||
@@ -33,7 +35,7 @@
|
||||
[text/text {:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (colors/theme-colors colors/neutral-100 colors/white)}}
|
||||
eth-value \space (:eth labels)]
|
||||
eth-value \space (i18n/label :t/eth)]
|
||||
[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
|
||||
@@ -42,4 +44,4 @@
|
||||
[text/text {:weight :medium
|
||||
:size :label
|
||||
:style {:color colors/neutral-50}}
|
||||
(:on labels) \space network-name]]]])
|
||||
(string/lower-case (i18n/label :t/on)) \space network-name]]]])
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
(ns quo2.components.wallet.network-breakdown
|
||||
(:require [react-native.core :as rn]
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.wallet.network-amount :refer [network-amount]]))
|
||||
|
||||
(defn network-breakdown
|
||||
[{:keys [top-value network-conversions labels]}]
|
||||
[{:keys [top-value network-conversions]}]
|
||||
[rn/view {:style {:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-95)
|
||||
@@ -41,6 +41,5 @@
|
||||
[network-amount {:show-right-border? (not= idx last-item-idx)
|
||||
:icon icon
|
||||
:network-name network
|
||||
:eth-value conversion
|
||||
:labels labels}]])
|
||||
:eth-value conversion}]])
|
||||
network-conversions))]])
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
(ns quo2.components.wallet.token-overview
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo.react-native :as rn]
|
||||
[clojure.string :as string]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icons]))
|
||||
[status-im.utils.currency :as currencies]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
|
||||
(def container-style {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12})
|
||||
|
||||
@@ -40,15 +42,15 @@
|
||||
}"
|
||||
[]
|
||||
(fn
|
||||
[{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}]
|
||||
[{:keys [currency price percentage-change] :or {currency :usd 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} label]
|
||||
:size :paragraph-2} (i18n/label :token-price)]
|
||||
[text/text {:style {:margin-top 4}
|
||||
:weight :semi-bold
|
||||
:number-of-lines 1
|
||||
:size :heading-2} (str currency price)]
|
||||
:size :heading-2} (str (get-in currencies/currencies [currency :symbol]) 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)
|
||||
@@ -74,7 +76,7 @@
|
||||
:percentage-change :string
|
||||
}"
|
||||
[]
|
||||
(fn [{:keys [token token-img-src currency account-balance price percentage-change] :or {account-balance "0.00" price "0.00" percentage-change "0.0"}}]
|
||||
(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"}}]
|
||||
(let [direction (get-direction percentage-change)]
|
||||
[rn/view {:style container-style}
|
||||
[text/text {:weight :regular
|
||||
@@ -83,19 +85,20 @@
|
||||
[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 currency account-balance)]
|
||||
:size :heading-1} (str (get-in currencies/currencies [currency :symbol]) 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-increase :main-icons2/price-decrease)
|
||||
(when (not (zero? direction)) [icons/icon (if (pos? direction) :main-icons2/price-increase12 :main-icons2/price-decrease12)
|
||||
{:no-color true
|
||||
:size 12
|
||||
:width 12
|
||||
:height 12
|
||||
:container-style {:margin-right 4}}])
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :medium
|
||||
:size :paragraph-2
|
||||
:style {:color (price-color direction)}} (str currency price)]
|
||||
:style {:color (price-color direction)}} (str (get-in currencies/currencies [currency :symbol]) price)]
|
||||
[divider direction]
|
||||
[text/text {:number-of-lines 1
|
||||
:weight :medium
|
||||
|
||||
@@ -1,87 +0,0 @@
|
||||
(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,6 +1,6 @@
|
||||
(ns quo2.foundations.colors
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.theme :as theme]))
|
||||
[quo.theme :as theme]))
|
||||
|
||||
(defn alpha [value opacity]
|
||||
(when value
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
(ns react-native.gesture
|
||||
(ns quo2.gesture
|
||||
(:require ["react-native-gesture-handler" :refer (GestureDetector Gesture)]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
(ns react-native.reanimated
|
||||
(ns quo2.reanimated
|
||||
(:require ["react-native" :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[clojure.string :as string]
|
||||
+6
-4
@@ -1,7 +1,8 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.account-avatar
|
||||
(ns quo2.screens.avatars.account-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.design-system.colors :as colors]
|
||||
[quo2.components.avatars.account-avatar :as quo2]))
|
||||
|
||||
(def descriptor [{:label "Icon"
|
||||
@@ -39,7 +40,8 @@
|
||||
[quo2/account-avatar @state]]])))
|
||||
|
||||
(defn preview-account-avatar []
|
||||
[rn/view {:flex 1}
|
||||
[rn/view {:background-color (:preview-background @colors/theme)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.channel-avatar
|
||||
(ns quo2.screens.avatars.channel-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.channel-avatar :as quo2]))
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.group-avatar
|
||||
(ns quo2.screens.avatars.group-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.group-avatar :as quo2]))
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.icon-avatar
|
||||
(ns quo2.screens.avatars.icon-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.icon-avatar :as quo2]))
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.user-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.avatars.user-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.components.avatars.user-avatar :as quo2]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.react-native.resources :as resources]))
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.avatars.wallet-user-avatar
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.avatars.wallet-user-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.avatars.wallet-user-avatar :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.buttons.button
|
||||
(ns quo2.screens.buttons.button
|
||||
(:require [reagent.core :as reagent]
|
||||
[react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.buttons.button :as quo2]))
|
||||
|
||||
+5
-9
@@ -1,10 +1,9 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.buttons.dynamic-button
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.buttons.dynamic-button
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.buttons.dynamic-button :as quo2]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.components.buttons.dynamic-button :as quo2]))
|
||||
|
||||
(def descriptor [{:label "Type:"
|
||||
:key :type
|
||||
@@ -28,10 +27,7 @@
|
||||
:type :text}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:count "5"
|
||||
:type :jump-to
|
||||
:labels {:jump-to (i18n/label :t/jump-to)
|
||||
:search-with-label (i18n/label :t/back)}})]
|
||||
(let [state (reagent/atom {:count "5" :type :jump-to})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.code.snippet
|
||||
(:require [status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
(ns quo2.screens.code.snippet
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.code.snippet :as snippet]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
+19
-18
@@ -1,10 +1,11 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.community.community-card-view
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.community.community-card-view
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.constants :as constants]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.community.community-list-view :as community-list-view]
|
||||
[quo2.components.community.community-card-view :as community-card-view]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.react-native.resources :as resources]))
|
||||
@@ -13,28 +14,27 @@
|
||||
{:id constants/status-community-id
|
||||
:name "Status"
|
||||
:description "Status is a secure messaging app, crypto wallet and web3 browser built with the state of the art technology"
|
||||
:status :gated
|
||||
:section :popular
|
||||
:permissions true
|
||||
:cover (resources/get-image :community-cover)
|
||||
:community-icon (resources/get-image :status-logo)
|
||||
:color (rand-nth quo.colors/chat-colors)
|
||||
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
|
||||
:tokens [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]
|
||||
:tags [{:id 1 :tag-label (i18n/label :t/music) :resource (resources/get-image :music)}
|
||||
{:id 2 :tag-label (i18n/label :t/lifestyle) :resource (resources/get-image :lifestyle)}
|
||||
{:id 3 :tag-label (i18n/label :t/podcasts) :resource (resources/get-image :podcasts)}]})
|
||||
|
||||
(def descriptor [{:label "Status:"
|
||||
:key :status
|
||||
(def descriptor [{:label "Community views"
|
||||
:key :view-style
|
||||
:type :select
|
||||
:options [{:key :gated
|
||||
:value "Gated"}
|
||||
{:key :open
|
||||
:value "Open"}]}
|
||||
{:label "Locked:"
|
||||
:key :locked?
|
||||
:type :boolean}])
|
||||
:options [{:key :card-view
|
||||
:value "Card view"}
|
||||
{:key :list-view
|
||||
:value "List view"}]}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:status :gated
|
||||
:locked? true})]
|
||||
(let [state (reagent/atom {:view-style :card-view})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
@@ -43,8 +43,9 @@
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
[community-card-view/community-card-view-item (merge @state community-data)]]]])))
|
||||
|
||||
(if (= :card-view (:view-style @state))
|
||||
[community-card-view/community-card-view-item community-data]
|
||||
[community-list-view/communities-list-view-item community-data])]]])))
|
||||
(defn preview-community-card []
|
||||
[rn/view {:background-color (colors/theme-colors colors/neutral-5
|
||||
colors/neutral-95)
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.counter.counter
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.counter.counter
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.counter.counter :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.dividers.divider-label
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.dividers.divider-label
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.dividers.divider-label :as divider-label]))
|
||||
|
||||
+5
-6
@@ -1,10 +1,9 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.dividers.new-messages
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.dividers.new-messages
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.dividers.new-messages :as new-messages]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.components.dividers.new-messages :as new-messages]))
|
||||
|
||||
(def descriptor [{:label "Label"
|
||||
:key :label
|
||||
@@ -37,7 +36,7 @@
|
||||
{:key :beige
|
||||
:value "Beige"}]}])
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:label (i18n/label :new-messages-header)
|
||||
(let [state (reagent/atom {:label "New messages"
|
||||
:color :primary})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(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]
|
||||
(ns quo2.screens.drawers.action-drawers
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.drawers.action-drawers :as quo2]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.foundations.colors :as colors]
|
||||
+5
-4
@@ -1,6 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.dropdowns.dropdown
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.dropdowns.dropdown
|
||||
(:require [quo.components.text :as text]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.dropdowns.dropdown :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
@@ -63,7 +64,7 @@
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[rn/text (str "Selected item: " @selected-item)]
|
||||
[text/text {:color :main} (str "Selected item: " @selected-item)]
|
||||
[quo2/dropdown (merge @state {:on-select on-select
|
||||
:items items})]]]])))
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.info.info-message
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.info.info-message
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.info.info-message :as quo2]))
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.info.information-box
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.info.information-box
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.info.information-box :as quo2]))
|
||||
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.list-items.channel
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.list-items.channel
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.list-items.channel :as quo2-channel]))
|
||||
|
||||
+7
-9
@@ -1,11 +1,10 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.list-items.preview-lists
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.list-items.preview-lists
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[quo2.components.list-items.preview-list :as quo2]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.components.list-items.preview-list :as quo2]))
|
||||
|
||||
(def descriptor [{:label "Size:"
|
||||
:key :size
|
||||
@@ -44,10 +43,9 @@
|
||||
{:source (resources/get-mock-image :photo6)}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:type :user
|
||||
:size 32
|
||||
:list-size 10
|
||||
:more-than-99-label (i18n/label :counter-99-plus)})
|
||||
(let [state (reagent/atom {:type :user
|
||||
:size 32
|
||||
:list-size 10})
|
||||
type (reagent/cursor state [:type])]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
@@ -1,55 +1,55 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.main
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
(ns quo2.screens.main
|
||||
(:require [quo.components.safe-area :as safe-area]
|
||||
[quo.core :as quo]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.components.markdown.text :as quo2-text]
|
||||
[quo2.components.buttons.button :as quo2-button]
|
||||
[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]
|
||||
[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.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]
|
||||
[re-frame.core :as re-frame]))
|
||||
|
||||
(def screens-categories
|
||||
@@ -80,15 +80,9 @@
|
||||
:code [{:name :snippet
|
||||
:insets {:top false}
|
||||
:component code-snippet/preview-code-snippet}]
|
||||
:community [{:name :community-card-view
|
||||
:community [{:name :community-cards
|
||||
:insets {:top false}
|
||||
:component community-card/preview-community-card}
|
||||
{:name :community-list-view
|
||||
:insets {:top false}
|
||||
:component community-list-view/preview-community-list-view}
|
||||
{:name :discover-card
|
||||
:insets {:top false}
|
||||
:component discover-card/preview-discoverd-card}]
|
||||
:component community-card/preview-community-card}]
|
||||
:counter [{:name :counter
|
||||
:insets {:top false}
|
||||
:component counter/preview-counter}]
|
||||
@@ -193,9 +187,26 @@
|
||||
|
||||
(defn theme-switcher []
|
||||
[rn/view {:style {:flex-direction :row
|
||||
:margin-vertical 8}}
|
||||
[quo2-button/button {:on-press #(theme/set-theme :light)} "Set light theme"]
|
||||
[quo2-button/button {:on-press #(theme/set-theme :dark)} "Set dark theme"]])
|
||||
:margin-vertical 8
|
||||
:border-radius 4
|
||||
:background-color (:ui-01 @quo.colors/theme)
|
||||
:border-width 1
|
||||
:border-color (:ui-02 @quo.colors/theme)}}
|
||||
[rn/touchable-opacity {:style {:padding 8
|
||||
:flex 1
|
||||
:justify-content :center
|
||||
:align-items :center}
|
||||
:on-press #(theme/set-theme :light)}
|
||||
[quo/text "Set light theme"]]
|
||||
[rn/view {:width 1
|
||||
:margin-vertical 4
|
||||
:background-color (:ui-02 @quo.colors/theme)}]
|
||||
[rn/touchable-opacity {:style {:padding 8
|
||||
:flex 1
|
||||
:justify-content :center
|
||||
:align-items :center}
|
||||
:on-press #(theme/set-theme :dark)}
|
||||
[quo/text "Set dark theme"]]])
|
||||
|
||||
(defn main-screen []
|
||||
(fn []
|
||||
+3
-3
@@ -1,7 +1,7 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.markdown.text
|
||||
(ns quo2.screens.markdown.text
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.markdown.text :as quo2]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
+5
-7
@@ -1,10 +1,9 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.messages.gap
|
||||
(ns quo2.screens.messages.gap
|
||||
(:require
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.messages.gap :as gap]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def descriptor [{:label "Timestamp Far"
|
||||
:key :timestamp-far
|
||||
@@ -14,8 +13,7 @@
|
||||
: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
|
||||
:on-press #(println "fill gaps") :warning-label (i18n/label :messages-gap-warning)})]
|
||||
(let [state (reagent/atom {:timestamp-far "Jan 8 · 09:12" :timestamp-near "Mar 8 · 22:42" :on-info-button-pressed identity})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50}
|
||||
[rn/view {:padding 16}
|
||||
+5
-9
@@ -1,11 +1,10 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.messages.system-message
|
||||
(ns quo2.screens.messages.system-message
|
||||
(:require [reagent.core :as reagent]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.components.messages.system-message :as system-message]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def descriptor [{:label "Message Type"
|
||||
:key :type
|
||||
@@ -51,10 +50,7 @@
|
||||
:pinned-by "Steve"
|
||||
:content-text "Hello! This is an example of a pinned message!"
|
||||
:content-info "3 photos"
|
||||
:timestamp-str "09:41"
|
||||
:labels {:pinned-a-message (i18n/label :pinned-a-message)
|
||||
:message-deleted (i18n/label :message-deleted)
|
||||
:added (i18n/label :added)}})]
|
||||
:timestamp-str "09:41"})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
+4
-4
@@ -1,8 +1,8 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.navigation.bottom-nav-tab
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.navigation.bottom-nav-tab
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.reanimated :as reanimated]
|
||||
[quo2.components.navigation.bottom-nav-tab :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
+5
-6
@@ -1,10 +1,9 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.navigation.floating-shell-button
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.navigation.floating-shell-button
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.navigation.floating-shell-button :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def descriptor [{:label "Show jump to?"
|
||||
:key :show-jump-to?
|
||||
@@ -28,7 +27,7 @@
|
||||
(defn mock-data [{:keys [show-jump-to? show-search? show-mention? scroll-type]}]
|
||||
(cond-> {}
|
||||
show-jump-to?
|
||||
(assoc :jump-to {:on-press #() :label (i18n/label :t/jump-to)})
|
||||
(assoc :jump-to {:on-press #()})
|
||||
show-search?
|
||||
(assoc :search {:on-press #()})
|
||||
show-mention?
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(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]
|
||||
(ns quo2.screens.navigation.page-nav
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.components.navigation.page-nav :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.navigation.top-nav
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.navigation.top-nav
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.navigation.top-nav :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
+4
-4
@@ -1,11 +1,11 @@
|
||||
(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]
|
||||
(ns quo2.screens.notifications.activity-logs
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[quo.react-native :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]
|
||||
[status-im.ui2.screens.quo2-preview.tags.status-tags :as status-tags]
|
||||
[quo2.screens.tags.status-tags :as status-tags]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def descriptor [{:label "Unread?"
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.reactions.react
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.reactions.react
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.reactions.reaction :as quo2.reaction]))
|
||||
+2
-2
@@ -1,5 +1,5 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.selectors.disclaimer
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.selectors.disclaimer
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.selectors.disclaimer :as quo2]
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.selectors.selectors
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
(ns quo2.screens.selectors.selectors
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.selectors.selectors :as quo2]
|
||||
[quo2.components.markdown.text :as text]
|
||||
+4
-4
@@ -1,10 +1,10 @@
|
||||
(ns status-im.ui2.screens.quo2-preview.switcher.switcher-cards
|
||||
(:require [react-native.core :as rn]
|
||||
(ns quo2.screens.switcher.switcher-cards
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui2.screens.quo2-preview.preview :as preview]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[status-im.switcher.switcher-cards.switcher-cards :as switcher-cards]))
|
||||
[quo2.components.switcher.switcher-cards :as switcher-cards]))
|
||||
|
||||
(def descriptor [{:label "Type"
|
||||
:key :type
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user