Compare commits
29
Commits
14052
...
issue-14166
| Author | SHA1 | Date | |
|---|---|---|---|
 Erik Seppanen
|
3c507be976 | ||
|
Richard Ramos
|
0f6022a731 | ||
|
John Ngei
|
a1c1be8f8a | ||
|
Andrea Maria Piana
|
01eae4da9c | ||
|
Roman Volosovskyi
|
77d0084467 | ||
|
flexsurfer
|
5907edccc8 | ||
|
Churikova Tetiana
|
add00a5609 | ||
|
Omar Basem
|
f17f57cc5e | ||
|
frank
|
187d147dc7 | ||
|
pavloburykh
|
b378d88aaf | ||
|
Ibrahem Khalil
|
3b69e5873e | ||
|
Andrej Česen
|
5e5ed0a11e | ||
|
Ibrahem Khalil
|
bca2258508 | ||
|
flexsurfer
|
7b739dff45 | ||
|
du64
|
ab1dd7e794 | ||
|
Churikova Tetiana
|
0967582639 | ||
|
Icaro Motta
|
91b237d3d3 | ||
|
Icaro Motta
|
69303cd7d1 | ||
|
Andrea Maria Piana
|
b774ecbcb4 | ||
|
Roman Volosovskyi
|
b492ed2969 | ||
|
Mohamed Javid
|
6d557d735a | ||
|
Roman Volosovskyi
|
f29ed58445 | ||
|
Churikova Tetiana
|
1941591110 | ||
|
Ibrahem Khalil
|
a91e9dfb38 | ||
|
Omar Basem
|
c423aa7970 | ||
|
Icaro Motta
|
910bafc5f4 | ||
|
Omar Basem
|
2ae57f7b21 | ||
|
Jamie Caprani
|
14a5edb24b | ||
|
Parvesh Monu
|
0ff6fb25f4 |
@@ -272,7 +272,7 @@ run-android: export TARGET := android
|
||||
run-android: ##@run Build Android APK and start it on the device
|
||||
npx react-native run-android --appIdSuffix debug
|
||||
|
||||
SIMULATOR=
|
||||
SIMULATOR=iPhone 13
|
||||
run-ios: export TARGET := ios
|
||||
run-ios: ##@run Build iOS app and start it in a simulator/device
|
||||
ifneq ("$(SIMULATOR)", "")
|
||||
|
||||
Binary file not shown.
@@ -62,7 +62,7 @@ pipeline {
|
||||
--rerun_count=2 \
|
||||
--testrail_report=True \
|
||||
-m testrail_id \
|
||||
-m \"not upgrade\" \
|
||||
-m \"new_ui_critical\" \
|
||||
-k \"${params.KEYWORD_EXPRESSION}\" \
|
||||
--apk=${params.APK_NAME}
|
||||
"""
|
||||
|
||||
@@ -14,7 +14,7 @@ pipeline {
|
||||
string(
|
||||
name: 'TEST_MARKERS',
|
||||
description: 'Marker expression for matching tests to run.',
|
||||
defaultValue: 'critical',
|
||||
defaultValue: 'new_ui_critical',
|
||||
) */
|
||||
string(
|
||||
name: 'APK_NAME',
|
||||
|
||||
+1
-1
@@ -640,7 +640,7 @@ SPEC CHECKSUMS:
|
||||
FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
|
||||
FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
|
||||
Folly: b73c3869541e86821df3c387eb0af5f65addfab4
|
||||
glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
|
||||
glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
|
||||
HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
|
||||
Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
|
||||
libwebp: 60305b2e989864154bd9be3d772730f08fc6a59c
|
||||
|
||||
@@ -41,6 +41,8 @@
|
||||
65F6941A25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
|
||||
65F6941B25780A4F00A45E76 /* Bridge.swift in Sources */ = {isa = PBXBuildFile; fileRef = 65F6941825780A4F00A45E76 /* Bridge.swift */; };
|
||||
70ADBB5ECF934DCF8A0E4919 /* Inter-Regular.otf in Resources */ = {isa = PBXBuildFile; fileRef = 1426DF592BA248FC81D955CB /* Inter-Regular.otf */; };
|
||||
715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
|
||||
715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */; };
|
||||
74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */; };
|
||||
8391E8E0E93C41A98AAA6631 /* Inter-SemiBoldItalic.otf in Resources */ = {isa = PBXBuildFile; fileRef = A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */; };
|
||||
A0093AB50DA85E1D01818CCA /* libPods-Status-StatusIm-StatusImTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 1E88D313E5D854BE6BC81FC1 /* libPods-Status-StatusIm-StatusImTests.a */; };
|
||||
@@ -121,6 +123,7 @@
|
||||
65F6941725780A4E00A45E76 /* StatusImTests-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "StatusImTests-Bridging-Header.h"; sourceTree = "<group>"; };
|
||||
65F6941825780A4F00A45E76 /* Bridge.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Bridge.swift; sourceTree = "<group>"; };
|
||||
693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = "Inter-SemiBold.otf"; path = "../resources/fonts/Inter-SemiBold.otf"; sourceTree = "<group>"; };
|
||||
715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = "UbuntuMono-Regular.ttf"; path = "../resources/fonts/UbuntuMono-Regular.ttf"; sourceTree = "<group>"; };
|
||||
74B758FB20D7C00B003343C3 /* launch-image-universal.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = "launch-image-universal.storyboard"; sourceTree = "<group>"; };
|
||||
7AFBE28450C0239119FBDBA2 /* Pods-Status-StatusIm-StatusImTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; path = "Target Support Files/Pods-Status-StatusIm-StatusImTests/Pods-Status-StatusIm-StatusImTests.debug.xcconfig"; sourceTree = "<group>"; };
|
||||
8B9A886A2CB448B1ABA0EB62 /* libc++.tbd */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libc++.tbd"; path = "usr/lib/libc++.tbd"; sourceTree = SDKROOT; };
|
||||
@@ -229,6 +232,7 @@
|
||||
693A62DB37BC4CD5A30E5C96 /* Inter-SemiBold.otf */,
|
||||
A4F2BBE8D4DD4140A6CCAC39 /* Inter-SemiBoldItalic.otf */,
|
||||
9C76AF5A418D4D65A4CAD1D9 /* InterStatus-Regular.otf */,
|
||||
715D8131290BE850006F5C88 /* UbuntuMono-Regular.ttf */,
|
||||
);
|
||||
name = Resources;
|
||||
sourceTree = "<group>";
|
||||
@@ -475,6 +479,7 @@
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
74B758FC20D7C00B003343C3 /* launch-image-universal.storyboard in Resources */,
|
||||
715D8132290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
|
||||
B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */,
|
||||
D84616FB563A48EBB1678699 /* Inter-Bold.otf in Resources */,
|
||||
D99C50E5E18942A39C8DDF61 /* Inter-BoldItalic.otf in Resources */,
|
||||
@@ -493,6 +498,7 @@
|
||||
buildActionMask = 2147483647;
|
||||
files = (
|
||||
3AAD2ACA24A3A60E0075D594 /* launch-image-universal.storyboard in Resources */,
|
||||
715D8133290BE850006F5C88 /* UbuntuMono-Regular.ttf in Resources */,
|
||||
3AAD2ACB24A3A60E0075D594 /* Images.xcassets in Resources */,
|
||||
3AAD2ACC24A3A60E0075D594 /* Inter-Bold.otf in Resources */,
|
||||
3AAD2ACD24A3A60E0075D594 /* Inter-BoldItalic.otf in Resources */,
|
||||
|
||||
@@ -105,6 +105,7 @@
|
||||
<string>Inter-Thin-BETA.otf</string>
|
||||
<string>Inter-ThinItalic-BETA.otf</string>
|
||||
<string>InterStatus-Regular.otf</string>
|
||||
<string>UbuntuMono-Regular.ttf</string>
|
||||
</array>
|
||||
<key>UIBackgroundModes</key>
|
||||
<array>
|
||||
|
||||
@@ -108,6 +108,7 @@
|
||||
<string>Inter-Thin-BETA.otf</string>
|
||||
<string>Inter-ThinItalic-BETA.otf</string>
|
||||
<string>InterStatus-Regular.otf</string>
|
||||
<string>UbuntuMono-Regular.ttf</string>
|
||||
</array>
|
||||
<key>UIBackgroundModes</key>
|
||||
<array>
|
||||
|
||||
@@ -20,7 +20,11 @@ buildGoPackage {
|
||||
# Build the Go library
|
||||
buildPhase = ''
|
||||
runHook preBuild
|
||||
go build -buildmode=c-archive -o $out/libstatus.a $NIX_BUILD_TOP/main.go
|
||||
go build \
|
||||
-buildmode='c-archive' \
|
||||
-tags='gowaku_skip_migrations' \
|
||||
-o "$out/libstatus.a" \
|
||||
$NIX_BUILD_TOP/main.go
|
||||
runHook postBuild
|
||||
'';
|
||||
}
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
|
||||
let
|
||||
inherit (lib) concatStringsSep optionalString optional;
|
||||
isIOS = platform == "ios";
|
||||
isAndroid = platform == "android";
|
||||
|
||||
in buildGoPackage {
|
||||
pname = source.repo;
|
||||
version = "${source.cleanVersion}-${source.shortRev}-${platform}";
|
||||
@@ -20,30 +23,32 @@ in buildGoPackage {
|
||||
|
||||
# Sandbox causes Xcode issues on MacOS. Requires sandbox=relaxed.
|
||||
# https://github.com/status-im/status-mobile/pull/13912
|
||||
__noChroot = (platform == "ios");
|
||||
__noChroot = isIOS;
|
||||
|
||||
extraSrcPaths = [ gomobile ];
|
||||
nativeBuildInputs = [ gomobile removeReferencesTo ]
|
||||
++ optional (platform == "android") openjdk
|
||||
++ optional (platform == "ios") xcodeWrapper;
|
||||
++ optional isAndroid openjdk
|
||||
++ optional isIOS xcodeWrapper;
|
||||
|
||||
ldflags = concatStringsSep " " goBuildLdFlags;
|
||||
|
||||
ANDROID_HOME = optionalString (platform == "android") androidPkgs.sdk;
|
||||
ANDROID_HOME = optionalString isAndroid androidPkgs.sdk;
|
||||
|
||||
# Ensure XCode is present for iOS, instead of failing at the end of the build.
|
||||
preConfigure = optionalString (platform == "ios") utils.enforceXCodeAvailable;
|
||||
preConfigure = optionalString isIOS utils.enforceXCodeAvailable;
|
||||
|
||||
buildPhase = ''
|
||||
runHook preBuild
|
||||
echo -e "\nBuilding $pname for: ${concatStringsSep "," targets}"
|
||||
|
||||
set -x
|
||||
gomobile bind \
|
||||
${concatStringsSep " " goBuildFlags} \
|
||||
-ldflags="$ldflags" \
|
||||
-target=${concatStringsSep "," targets} \
|
||||
${optionalString (platform == "android") "-androidapi=${platformVersion}"} \
|
||||
${optionalString (platform == "ios") "-iosversion=${platformVersion}"} \
|
||||
${optionalString isAndroid "-androidapi=${platformVersion}" } \
|
||||
${optionalString isIOS "-iosversion=${platformVersion}" } \
|
||||
-tags='${optionalString isIOS "nowatchdog"} gowaku_skip_migrations' \
|
||||
-o ${outputFileName} \
|
||||
${source.goPackagePath}/mobile
|
||||
|
||||
@@ -58,7 +63,7 @@ in buildGoPackage {
|
||||
# Drop govers from disallowedReferences.
|
||||
dontRenameImports = true;
|
||||
# Replace hardcoded paths to go package in /nix/store.
|
||||
preFixup = optionalString (platform == "ios") ''
|
||||
preFixup = optionalString isIOS ''
|
||||
find $out -type f -exec \
|
||||
remove-references-to -t $disallowedReferences '{}' + || true
|
||||
'';
|
||||
|
||||
+2
-1
@@ -37,7 +37,7 @@
|
||||
"qrcode": "^1.4.1",
|
||||
"react": "16.13.1",
|
||||
"react-dom": "^16.4.2",
|
||||
"react-native": "0.63.4",
|
||||
"react-native": "0.63.5",
|
||||
"react-native-background-timer": "^2.1.1",
|
||||
"react-native-blob-util": "^0.13.18",
|
||||
"react-native-camera-kit": "^8.0.4",
|
||||
@@ -70,6 +70,7 @@
|
||||
"react-native-svg": "^9.8.4",
|
||||
"react-native-touch-id": "^4.4.1",
|
||||
"react-native-webview": "git+https://github.com/status-im/react-native-webview.git#refs/tags/v11.16.0-status",
|
||||
"react-syntax-highlighter": "^15.5.0",
|
||||
"rn-emoji-keyboard": "git+https://github.com/status-im/rn-emoji-keyboard.git#refs/tags/v0.4.3",
|
||||
"tdigest": "^0.1.1"
|
||||
},
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 706 B After Width: | Height: | Size: 246 B |
Binary file not shown.
|
Before Width: | Height: | Size: 972 B After Width: | Height: | Size: 286 B |
Binary file not shown.
|
After Width: | Height: | Size: 286 B |
Binary file not shown.
|
After Width: | Height: | Size: 396 B |
@@ -1,4 +1,4 @@
|
||||
import { useDerivedValue } from 'react-native-reanimated';
|
||||
import { useDerivedValue, withTiming, withSequence, withDelay, Easing } from 'react-native-reanimated';
|
||||
|
||||
// Generic Worklets
|
||||
|
||||
@@ -32,38 +32,99 @@ export function applyAnimationsToStyle(animations, style) {
|
||||
|
||||
// Switcher Worklets
|
||||
|
||||
export function switcherCloseButtonOpacity (switcherButtonOpacity) {
|
||||
export function stackOpacity (stackId, selectedStackId) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
return 1 - switcherButtonOpacity.value;
|
||||
return selectedStackId.value == stackId ? 1 : 0;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function switcherScreenRadius (switcherScreenSize) {
|
||||
export function stackPointer (stackId, selectedStackId) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
return switcherScreenSize.value/2;
|
||||
return selectedStackId.value == stackId ? "auto" : "none";
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function switcherScreenBottomPosition (switcherScreenRadius, switcherPressedRadius, initalPosition) {
|
||||
export function bottomTabIconColor (stackId, selectedStackId, passThrough, selectedTabColor, defaultColor, passThroughColor) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
return initalPosition + switcherPressedRadius - switcherScreenRadius.value;
|
||||
if (selectedStackId.value == stackId){
|
||||
return selectedTabColor;
|
||||
}
|
||||
else if (passThrough.value){
|
||||
return passThroughColor;
|
||||
}
|
||||
else {
|
||||
return defaultColor;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function switcherContainerBottomPosition (switcherScreenBottom, heightOffset) {
|
||||
|
||||
// Home Stack
|
||||
|
||||
const defaultDurationAndEasing = {
|
||||
duration: 300,
|
||||
easing: Easing.bezier(0, 0, 1, 1),
|
||||
}
|
||||
|
||||
export function homeStackOpacity (homeStackOpen) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
return - (switcherScreenBottom.value + heightOffset);
|
||||
return withTiming(homeStackOpen.value ? 1 : 0, defaultDurationAndEasing);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function homeStackTop (homeStackOpen, top) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
return withTiming(homeStackOpen.value ? 0 : top, defaultDurationAndEasing);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function homeStackLeft (selectedStackId, animateHomeStackLeft, homeStackOpen, left) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
if (animateHomeStackLeft.value) {
|
||||
var leftValue = left[selectedStackId.value];
|
||||
if (homeStackOpen.value) {
|
||||
return withSequence(withTiming(leftValue, {duration: 0}), withTiming(0, defaultDurationAndEasing))
|
||||
} else {
|
||||
return withTiming(leftValue, defaultDurationAndEasing);
|
||||
}
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function homeStackPointer (homeStackOpen) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
return homeStackOpen.value ? "auto" : "none";
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
export function homeStackScale (homeStackOpen, minimizeScale) {
|
||||
return useDerivedValue(
|
||||
function () {
|
||||
'worklet'
|
||||
return withTiming(homeStackOpen.value ? 1 : minimizeScale, defaultDurationAndEasing);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
(+ 50 keyboard-height-android-delta) ;; TODO : remove 50 when react-native-navigation v8 will be implemented https://github.com/wix/react-native-navigation/issues/7225
|
||||
0))
|
||||
min-height (+ (* styles/vertical-padding 2) (:bottom safe-area))
|
||||
max-height (- window-height (:top safe-area) styles/margin-top)
|
||||
max-height (- window-height (:top safe-area))
|
||||
visible (react/state false)
|
||||
|
||||
master-translation-y (animated/use-value 0)
|
||||
@@ -202,17 +202,15 @@
|
||||
:wait-for master-ref
|
||||
:enabled (and (not disable-drag?)
|
||||
(not= sheet-height max-height))})
|
||||
[animated/view {:height sheet-height}
|
||||
[animated/scroll-view {:bounces false
|
||||
:flex 1
|
||||
:scroll-enabled (= sheet-height max-height)}
|
||||
[animated/view {:style {:padding-top styles/vertical-padding
|
||||
:padding-bottom (+ styles/vertical-padding
|
||||
(if (and platform/ios? keyboard-shown)
|
||||
keyboard-height
|
||||
(:bottom safe-area)))}
|
||||
:on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
|
||||
(into [:<>]
|
||||
(react/get-children children))]]]]]])))
|
||||
[animated/view {:height sheet-height
|
||||
:flex 1}
|
||||
[animated/view {:style {:padding-top styles/vertical-padding
|
||||
:padding-bottom (+ styles/vertical-padding
|
||||
(if (and platform/ios? keyboard-shown)
|
||||
keyboard-height
|
||||
(:bottom safe-area)))}
|
||||
:on-layout #(reset! height (.-nativeEvent.layout.height ^js %))}
|
||||
(into [:<>]
|
||||
(react/get-children children))]]]]])))
|
||||
|
||||
(def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks)))
|
||||
(def bottom-sheet (reagent/adapt-react-class (react/memo bottom-sheet-hooks)))
|
||||
|
||||
@@ -56,6 +56,8 @@
|
||||
{:keyboardVerticalOffset (+ 44 (:status-bar-height @navigation-const))})]
|
||||
(reagent/children this))))
|
||||
|
||||
(def status-bar (.-StatusBar ^js rn))
|
||||
|
||||
(def keyboard (.-Keyboard ^js rn))
|
||||
|
||||
(def dismiss-keyboard! #(.dismiss ^js keyboard))
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.avatars.account-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo.theme :as theme]))
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(def icon-color-value
|
||||
{:dark (get-in colors/customization [:dark :purple])
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.avatars.channel-avatar
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo.theme :as theme]))
|
||||
[quo2.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]
|
||||
[quo.react-native :as rn]))
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(def sizes
|
||||
{:icon {:small 12
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.avatars.icon-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui.components.icons.icons :as icons]))
|
||||
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
(ns quo2.components.avatars.user-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[clojure.string :refer [upper-case split blank?]]
|
||||
[quo.theme :refer [dark?]]))
|
||||
[quo2.theme :refer [dark?]]
|
||||
[status-im.ui.components.fast-image :as fast-image]))
|
||||
|
||||
(def sizes {:big {:outer 80
|
||||
:inner 72
|
||||
@@ -131,8 +132,8 @@
|
||||
:no-color true}])
|
||||
(if profile-picture
|
||||
;; display image
|
||||
[rn/image {:style (container-styling inner-dimensions outer-dimensions)
|
||||
:source profile-picture}]
|
||||
[fast-image/fast-image {:source {:uri profile-picture}
|
||||
:style (container-styling inner-dimensions outer-dimensions)}]
|
||||
;; 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 [quo.react-native :as rn]
|
||||
(:require [react-native.core :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 [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo.theme :as theme]
|
||||
[quo2.theme :as theme]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.icon :as quo2.icons]))
|
||||
|
||||
@@ -44,6 +44,11 @@
|
||||
:background-color {:default colors/danger-50
|
||||
:pressed colors/danger-60
|
||||
:disabled colors/danger-50}}
|
||||
:positive {:icon-color colors/white
|
||||
:label {:style {:color colors/white}}
|
||||
:background-color {:default colors/success-50
|
||||
:pressed colors/success-60
|
||||
:disabled colors/success-50-opa-30}}
|
||||
:photo-bg {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-80-opa-40
|
||||
:label {:style {:color colors/neutral-100}}
|
||||
@@ -104,6 +109,11 @@
|
||||
:background-color {:default colors/danger-60
|
||||
:pressed colors/danger-50
|
||||
:disabled colors/danger-60}}
|
||||
:positive {:icon-color colors/white
|
||||
:label {:style {:color colors/white}}
|
||||
:background-color {:default colors/success-60
|
||||
:pressed colors/success-50
|
||||
:disabled colors/success-60-opa-30}}
|
||||
:photo-bg {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-30
|
||||
:label {:style {:color colors/white}}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.buttons.dynamic-button
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo2.components.icon :as icon]
|
||||
@@ -62,9 +62,10 @@
|
||||
(let [pressed? (reagent/atom false)]
|
||||
(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)
|
||||
:on-press on-press}
|
||||
{:on-press-in #(reset! pressed? true)
|
||||
:on-press-out #(reset! pressed? false)
|
||||
:on-press on-press
|
||||
:accessibility-label type}
|
||||
[rn/view {:style (merge
|
||||
{:flex-direction :row
|
||||
:height 24
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
(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]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.react :as react]))
|
||||
|
||||
;; Example themes:
|
||||
;; https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/master/src/styles/hljs
|
||||
(def ^:private themes
|
||||
{:light {:hljs-comment {:color colors/neutral-40},
|
||||
:hljs-title {:color (colors/custom-color :blue 50)},
|
||||
:hljs-keyword {:color (colors/custom-color :green 50)},
|
||||
:hljs-string {:color (colors/custom-color :turquoise 50)},
|
||||
:hljs-literal {:color (colors/custom-color :turquoise 50)}
|
||||
:hljs-number {:color (colors/custom-color :turquoise 50)}
|
||||
:line-number {:color colors/neutral-40}}
|
||||
:dark {:hljs-comment {:color colors/neutral-60},
|
||||
:hljs-title {:color (colors/custom-color :blue 60)},
|
||||
:hljs-keyword {:color (colors/custom-color :green 60)},
|
||||
:hljs-string {:color (colors/custom-color :turquoise 60)},
|
||||
:hljs-literal {:color (colors/custom-color :turquoise 60)}
|
||||
:hljs-number {:color (colors/custom-color :turquoise 60)}
|
||||
:line-number {:color colors/neutral-40}}})
|
||||
|
||||
(defn- text-style [class-names]
|
||||
(->> class-names
|
||||
(map keyword)
|
||||
(reduce #(merge %1 (get-in themes [(theme/get-theme) %2]))
|
||||
{:flex-shrink 1
|
||||
;; Round to a nearest whole number to achieve consistent
|
||||
;; spacing (also important for calculating `max-text-height`).
|
||||
;; Line height seems to be inconsistent between text being
|
||||
;; wrapped and text being rendered on a newline using Flexbox
|
||||
;; layout.
|
||||
:line-height 18})))
|
||||
|
||||
(defn- render-nodes [nodes]
|
||||
(map (fn [{:keys [children value] :as node}]
|
||||
;; Node can have :children or a :value.
|
||||
(if children
|
||||
(into [text/text {:weight :code
|
||||
:size :paragraph-2
|
||||
:style (text-style (get-in node [:properties :className]))}]
|
||||
(render-nodes children))
|
||||
;; Remove newlines as we already render each line separately.
|
||||
(-> value str/trim-newline)))
|
||||
nodes))
|
||||
|
||||
(defn- code-block [{:keys [rows line-number-width]}]
|
||||
[into [:<>]
|
||||
(->> rows
|
||||
(render-nodes)
|
||||
;; Line numbers
|
||||
(map-indexed (fn [idx row]
|
||||
(conj [rn/view {:style {:flex-direction :row}}
|
||||
[rn/view {:style {:width line-number-width
|
||||
;; 8+12 margin
|
||||
:margin-right 20}}
|
||||
[text/text {:weight :code
|
||||
:size :paragraph-2
|
||||
:style (text-style ["line-number"])}
|
||||
(inc idx)]]]
|
||||
row))))])
|
||||
|
||||
(defn- native-renderer []
|
||||
(let [text-height (reagent/atom nil)]
|
||||
(fn [{:keys [rows max-lines on-copy-press]}]
|
||||
(let [background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-80-opa-40)
|
||||
background-color-left (colors/theme-colors
|
||||
colors/neutral-5
|
||||
colors/neutral-80)
|
||||
border-color (colors/theme-colors
|
||||
colors/neutral-20
|
||||
colors/neutral-80)
|
||||
rows (bean/->clj rows)
|
||||
font-scale (:font-scale (rn/use-window-dimensions))
|
||||
max-rows (or max-lines (count rows)) ;; Cut down on rows to process.
|
||||
max-line-digits (-> rows count (min max-rows) str count)
|
||||
;; ~ 9 is char width, 18 is width used in Figma.
|
||||
line-number-width (* font-scale (max 18 (* 9 max-line-digits)))
|
||||
max-text-height (some-> max-lines (* font-scale 18)) ;; 18 is font's line height.
|
||||
truncated? (and max-text-height (< max-text-height @text-height))
|
||||
maybe-mask-wrapper (if truncated?
|
||||
[react/masked-view
|
||||
{:mask-element
|
||||
(reagent/as-element
|
||||
[react/linear-gradient {:colors ["black" "transparent"]
|
||||
:locations [0.75 1]
|
||||
:style {:flex 1}}])}]
|
||||
[:<>])]
|
||||
|
||||
[rn/view {:style {:overflow :hidden
|
||||
:padding 8
|
||||
:background-color background-color
|
||||
:border-color border-color
|
||||
:border-width 1
|
||||
:border-radius 8
|
||||
;; Hide on intial render to avoid flicker when mask-wrapper is shown.
|
||||
:opacity (if @text-height 1 0)}}
|
||||
;; Line number container
|
||||
[rn/view {:style {:position :absolute
|
||||
:bottom 0
|
||||
:top 0
|
||||
:left 0
|
||||
:width (+ line-number-width 8 8)
|
||||
:background-color background-color-left
|
||||
:border-right-color border-color
|
||||
:border-right-width 1}}]
|
||||
(conj maybe-mask-wrapper [rn/view {:max-height max-text-height}
|
||||
[rn/view {:on-layout (fn [evt]
|
||||
(let [height (oops/oget evt "nativeEvent.layout.height")]
|
||||
(reset! text-height height)))}
|
||||
[code-block {:rows (take max-rows rows)
|
||||
:line-number-width line-number-width}]]])
|
||||
|
||||
;; Copy button
|
||||
[rn/view {:style {:position :absolute
|
||||
:bottom 8
|
||||
:right 8}}
|
||||
[button/button {:icon true
|
||||
:type :grey
|
||||
:size 24
|
||||
:on-press on-copy-press}
|
||||
:main-icons/copy]]]))))
|
||||
|
||||
(defn- wrap-renderer-fn [f {:keys [max-lines on-copy-press]}]
|
||||
(fn [^js props]
|
||||
(reagent/as-element [:f> f {:rows (.-rows props)
|
||||
:max-lines max-lines
|
||||
:on-copy-press on-copy-press}])))
|
||||
|
||||
(defn snippet [{:keys [language max-lines on-copy-press]} children]
|
||||
[:> Highlighter {:language language
|
||||
:renderer (wrap-renderer-fn
|
||||
native-renderer {:max-lines max-lines
|
||||
:on-copy-press #(when on-copy-press
|
||||
(on-copy-press children))})
|
||||
;; Default props to adapt Highlighter for react-native.
|
||||
:CodeTag react-native/View
|
||||
:PreTag react-native/View
|
||||
:show-line-numbers false
|
||||
:style #js {}
|
||||
:custom-style #js {:backgroundColor nil}}
|
||||
children])
|
||||
@@ -40,6 +40,8 @@
|
||||
[community-view/community-title
|
||||
{:title name
|
||||
:description description}]
|
||||
[community-view/community-stats-column :card-view]
|
||||
[community-view/community-tags tags]]]]]]))
|
||||
[react/view {:style (styles/card-stats-position)}
|
||||
[community-view/community-stats-column :card-view]]
|
||||
[react/view {:style (styles/community-tags-position)}
|
||||
[community-view/community-tags tags]]]]]]]))
|
||||
|
||||
|
||||
@@ -3,6 +3,8 @@
|
||||
[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]
|
||||
[status-im.communities.core :as communities]
|
||||
[status-im.utils.handlers :refer [>evt]]
|
||||
[status-im.ui.components.react :as react]
|
||||
@@ -10,7 +12,8 @@
|
||||
[status-im.ui.screens.communities.community :as community]
|
||||
[status-im.ui.screens.communities.icon :as communities.icon]))
|
||||
|
||||
(defn communities-list-view-item [{:keys [id name locked status tokens background-color] :as community}]
|
||||
(defn communities-list-view-item [{:keys [id name locked? status notifications
|
||||
tokens background-color] :as community}]
|
||||
[react/view {:style (merge (styles/community-card 16)
|
||||
{:margin-bottom 12
|
||||
:margin-horizontal 20})}
|
||||
@@ -38,17 +41,39 @@
|
||||
:size :paragraph-1
|
||||
:accessibility-label :community-name-text
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
:ellipsize-mode :tail
|
||||
:style {:color (when (= notifications :muted)
|
||||
(colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-60))}}
|
||||
name]
|
||||
[community-view/community-stats-column :list-view]]
|
||||
(when (= status :gated)
|
||||
[community-view/permission-tag-container {:locked locked
|
||||
:status status
|
||||
:tokens tokens}])]]]])
|
||||
(if (= status :gated)
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]
|
||||
(cond
|
||||
(= notifications :unread-messages-count)
|
||||
[react/view {:style {:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-60)}}]
|
||||
|
||||
(defn communities-membership-list-item [{:keys [id name status tokens locked] :as community}]
|
||||
[react/view {:margin-bottom 12
|
||||
:padding-horizontal 8}
|
||||
(= 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 [{:keys [id name status tokens locked?] :as community}]
|
||||
[react/view {:margin-bottom 20}
|
||||
[react/touchable-highlight {:underlay-color colors/primary-50-opa-5
|
||||
:style {:border-radius 12}
|
||||
:on-press (fn []
|
||||
@@ -58,19 +83,23 @@
|
||||
: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 1}
|
||||
[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}]]
|
||||
[communities.icon/community-icon-redesign community 32]
|
||||
[react/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)
|
||||
[react/view {:justify-content :center
|
||||
:margin-right 12}
|
||||
[community-view/permission-tag-container {:locked locked
|
||||
:status status
|
||||
[community-view/permission-tag-container {:locked? locked?
|
||||
:tokens tokens}]])]]]])
|
||||
@@ -40,9 +40,10 @@
|
||||
[community-stats {:icon :main-icons2/lightning
|
||||
:count "112.1K"
|
||||
:icon-color icon-color}]
|
||||
[community-stats {:icon :main-icons2/placeholder
|
||||
:count 4
|
||||
:icon-color icon-color}]]))
|
||||
(when (= type :card-view)
|
||||
[community-stats {:icon :main-icons2/placeholder
|
||||
:count 4
|
||||
:icon-color icon-color}])]))
|
||||
|
||||
(defn community-tags [tags]
|
||||
[react/view (styles/community-tags-container)
|
||||
@@ -77,10 +78,10 @@
|
||||
: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}])
|
||||
@@ -0,0 +1,95 @@
|
||||
(ns quo2.components.community.discover-card
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.ui.screens.communities.styles :as styles]
|
||||
[status-im.ui.components.react :as react]))
|
||||
|
||||
;; Discover card placeholders images.
|
||||
;; TODO replaced when real data is available
|
||||
(def images
|
||||
{:images [{:id 1 :column-images [{:id 1 :image ""}]}
|
||||
{:id 2 :column-images [{}]}]})
|
||||
|
||||
(defn card-title-and-description [title description]
|
||||
[react/view
|
||||
{:flex 1
|
||||
:padding-top 8
|
||||
:padding-bottom 8
|
||||
:border-radius 12}
|
||||
[react/view {:flex 1
|
||||
:padding-horizontal 12}
|
||||
[text/text {:accessibility-label :community-name-text
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:weight :semi-bold
|
||||
:size :paragraph-1}
|
||||
title]
|
||||
[text/text {:accessibility-label :community-name-text
|
||||
:ellipsize-mode :tail
|
||||
:number-of-lines 1
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)
|
||||
:weight :regular
|
||||
:size :paragraph-2}
|
||||
description]]])
|
||||
|
||||
(defn placeholder-list-images [{:keys [images width height border-radius]}]
|
||||
[react/view
|
||||
[react/view {:justify-content :center}
|
||||
(for [{:keys [id]} images]
|
||||
^{:key id}
|
||||
[react/view {:border-radius border-radius
|
||||
:margin-top 4
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])]])
|
||||
|
||||
(defn placeholder-row-images [{:keys [first-image last-image images width height
|
||||
border-radius]}]
|
||||
[react/view
|
||||
(when first-image
|
||||
[react/view {:border-bottom-right-radius 6
|
||||
:border-bottom-left-radius 6
|
||||
:margin-right 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])
|
||||
(when images
|
||||
[placeholder-list-images {:images images
|
||||
:width 32
|
||||
:height 32
|
||||
:border-radius 6}])
|
||||
(when last-image
|
||||
[react/view {:border-top-left-radius border-radius
|
||||
:border-top-right-radius 6
|
||||
:margin-top 4
|
||||
:width width
|
||||
:height height
|
||||
:background-color colors/neutral-10}])])
|
||||
|
||||
(defn discover-card [{:keys [title description on-press accessibility-label]}]
|
||||
(let [on-joined-images (get images :images)]
|
||||
[react/touchable-without-feedback
|
||||
{:on-press on-press
|
||||
:accessibility-label accessibility-label}
|
||||
[react/view (merge (styles/community-card 16)
|
||||
{:background-color (colors/theme-colors
|
||||
colors/white
|
||||
colors/neutral-90)}
|
||||
{:flex-direction :row
|
||||
:margin-horizontal 20
|
||||
:height 56
|
||||
:padding-right 12})
|
||||
[card-title-and-description title description]
|
||||
(for [{:keys [id column-images]} on-joined-images]
|
||||
^{:key id}
|
||||
[placeholder-row-images {:images (when (= id 1)
|
||||
column-images)
|
||||
:width 32
|
||||
:height (if (= id 1) 8 26)
|
||||
:border-radius 6
|
||||
:first-image "" ; TODO replace with real data
|
||||
:last-image ""}]) ; TODO replace with real data
|
||||
]]))
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.counter.counter
|
||||
(:require [quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
(:require [quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.dividers.divider-label
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as markdown.text]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
(ns quo2.components.dividers.new-messages
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.ui.components.react :as react]))
|
||||
[react-native.linear-gradient :as linear-gradient]))
|
||||
|
||||
(defn new-messages
|
||||
"new-messages params - label, color"
|
||||
[{:keys [label color] :or {label (i18n/label :new-messages-header)
|
||||
color :primary}}]
|
||||
[{:keys [label color] :or {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)]
|
||||
[react/linear-gradient {:colors [bg-color "rgba(0,0,0,0)"]
|
||||
:start {:x 0 :y 0} :end {:x 0 :y 1}}
|
||||
[linear-gradient/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,68 +1,74 @@
|
||||
(ns quo2.components.drawers.action-drawers
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn- get-icon-color [section]
|
||||
(if (= section :bottom)
|
||||
(defn- get-icon-color [danger?]
|
||||
(if danger?
|
||||
(colors/theme-colors colors/danger-50 colors/danger-60)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40)))
|
||||
|
||||
(defn action [section]
|
||||
(fn [{:keys [icon label sub-label right-icon on-press]}]
|
||||
[rn/touchable-opacity {:on-press on-press}
|
||||
[react/view {:style
|
||||
{:flex 1
|
||||
: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 section)
|
||||
:size 20}]]
|
||||
[react/view
|
||||
{:style
|
||||
{:flex 1
|
||||
:justify-content :center}}
|
||||
(defn action [{:keys [icon
|
||||
label
|
||||
sub-label
|
||||
right-icon
|
||||
danger?
|
||||
on-press]}]
|
||||
[rn/touchable-opacity {:on-press on-press}
|
||||
[react/view {:style
|
||||
{:height (if sub-label 56 47)
|
||||
:margin-horizontal 20
|
||||
:flex-direction :row}}
|
||||
[react/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:margin-right 12
|
||||
:width 20}}
|
||||
[icon/icon icon
|
||||
{:color (get-icon-color danger?)
|
||||
:size 20}]]
|
||||
[react/view
|
||||
{:style
|
||||
{:flex 1
|
||||
:justify-content :center}}
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
:weight :medium
|
||||
:style {:color
|
||||
(when danger?
|
||||
(colors/theme-colors colors/danger-50 colors/danger-60))}}
|
||||
label]
|
||||
(when sub-label
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
:weight :medium
|
||||
:style
|
||||
{:color (when (= section :bottom)
|
||||
(colors/theme-colors colors/danger-50 colors/danger-60))}}
|
||||
label]
|
||||
(when sub-label [text/text
|
||||
{:size :paragraph-2
|
||||
:style
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||
sub-label])]
|
||||
(when right-icon
|
||||
[react/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:width 20}}
|
||||
[icon/icon right-icon
|
||||
{:color (get-icon-color section)
|
||||
:size 20}]])]]))
|
||||
{:size :paragraph-2
|
||||
:style {:color
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40)}}
|
||||
sub-label])]
|
||||
(when right-icon
|
||||
[react/view {:style
|
||||
{:height 20
|
||||
:margin-top :auto
|
||||
:margin-bottom :auto
|
||||
:width 20}}
|
||||
[icon/icon right-icon
|
||||
{:color (get-icon-color danger?)
|
||||
:size 20}]])]])
|
||||
|
||||
(defn action-drawer [{:keys [actions actions-with-consequence]}]
|
||||
(defn divider []
|
||||
[rn/view {:style {:border-top-width 1
|
||||
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
|
||||
:margin-top 8
|
||||
:margin-bottom 7
|
||||
:align-items :center
|
||||
:flex-direction :row}}])
|
||||
|
||||
(defn action-drawer [sections]
|
||||
[:<> {:style
|
||||
{:flex 1}}
|
||||
(map (action :top) actions)
|
||||
(when actions-with-consequence
|
||||
[:<>
|
||||
[rn/view {:style {:border-top-width 1
|
||||
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
|
||||
:margin-top 8
|
||||
:margin-bottom 7
|
||||
:align-items :center
|
||||
:flex-direction :row}}]
|
||||
(map (action :bottom) actions-with-consequence)])])
|
||||
(interpose
|
||||
[divider]
|
||||
(for [actions sections]
|
||||
(map action actions)))])
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.dropdowns.dropdown
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.reanimated :as reanimated]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn apply-anim [dd-height val]
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
(ns quo2.components.header
|
||||
(:require [oops.core :refer [oget]]
|
||||
[quo.animated :as animated]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.design-system.spacing :as spacing]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def header-height 56)
|
||||
@@ -61,15 +60,14 @@
|
||||
:right (max (:width left) (:width right))})))
|
||||
|
||||
(def header-actions-style
|
||||
(merge
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(:x-tiny spacing/padding-horizontal)))
|
||||
{:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:padding-horizontal 4})
|
||||
|
||||
(def header-action-placeholder
|
||||
{:width (:base spacing/spacing)})
|
||||
{:width 16})
|
||||
|
||||
(def element {:align-items :center
|
||||
:justify-content :center
|
||||
@@ -145,9 +143,9 @@
|
||||
border-bottom false}}]
|
||||
(let [status-bar-height (get insets :top 0)
|
||||
height (+ header-height status-bar-height)]
|
||||
[animated/view {:style (header-wrapper-style {:height height
|
||||
:background background
|
||||
:border-bottom border-bottom})}
|
||||
[reanimated/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,6 +1,6 @@
|
||||
(ns quo2.components.info.info-message
|
||||
(:require [quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
(:require [quo2.theme :as theme]
|
||||
[react-native.core :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 [quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
(:require [quo2.theme :as theme]
|
||||
[react-native.core :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 [quo.react-native :as rn]
|
||||
(:require [react-native.core :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]
|
||||
[quo.theme :as theme]))
|
||||
[quo2.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,21 +21,19 @@
|
||||
: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,5 +1,5 @@
|
||||
(ns quo2.components.list-items.menu-item
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors :refer [theme-colors]]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(ns quo2.components.list-items.preview-list
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
@@ -42,13 +43,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))]
|
||||
[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}])}
|
||||
[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}])}
|
||||
[avatar item type size border-radius]]))
|
||||
|
||||
(defn get-overflow-color [transparent? transparent-color light-color dark-color override-theme]
|
||||
|
||||
@@ -0,0 +1,77 @@
|
||||
(ns quo2.components.list-items.received-cr-item
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.utils.handlers :refer [<sub >evt]]
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[quo2.foundations.typography :as typography]
|
||||
[clojure.string :as str]
|
||||
[status-im.utils.utils :as utils.utils]
|
||||
[status-im.utils.datetime :as time]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo2.components.notifications.notification-dot :refer [notification-dot]]))
|
||||
|
||||
(defn received-cr-item [{:keys [chat-id 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]))]
|
||||
[rn/view {:style {:flex-direction :row
|
||||
:padding-top 8
|
||||
:margin-top 4
|
||||
:padding-bottom 12
|
||||
:flex 1}}
|
||||
(when-not read
|
||||
[notification-dot {:right 32 :top 16}])
|
||||
[user-avatar/user-avatar {:full-name display-name
|
||||
:status-indicator? true
|
||||
:online? true
|
||||
:size :small
|
||||
:ring? false}]
|
||||
[rn/view {:style {:margin-horizontal 8}}
|
||||
[rn/view {:style {:flex-direction :row}}
|
||||
[rn/text {:style (merge typography/font-semi-bold typography/paragraph-1
|
||||
{:color (colors/theme-colors colors/neutral-100 colors/white)
|
||||
:margin-right 8})} display-name]
|
||||
(when no-ens-name [rn/text {:style (merge typography/font-regular typography/label
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
|
||||
:margin-top 4})}
|
||||
(str (utils.utils/get-shortened-address chat-id) " · ")])
|
||||
[rn/text {:style (merge typography/font-regular typography/label
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
|
||||
:margin-top 4})}
|
||||
(time/to-short-str timestamp)]]
|
||||
[rn/view {:style {:border-radius 12
|
||||
:margin-top 10
|
||||
:padding-horizontal 12
|
||||
:padding-vertical 8
|
||||
:border-width 1
|
||||
:border-color (colors/theme-colors colors/neutral-20 colors/neutral-70)}}
|
||||
[rn/text {:style (merge typography/font-regular
|
||||
typography/paragraph-1
|
||||
{:color (colors/theme-colors colors/neutral-100 colors/white)})}
|
||||
(:text (:content message))]]
|
||||
[rn/view {:style {:margin-top 12
|
||||
:flex-direction :row}}
|
||||
[rn/touchable-opacity {:accessibility-label :decline-cr
|
||||
:on-press #(>evt [:contact-requests.ui/decline-request (:message-id message)])
|
||||
:active-opacity 1
|
||||
:style {:background-color (colors/theme-colors colors/danger-50 colors/danger-60)
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:align-self :flex-start
|
||||
:border-radius 8
|
||||
:padding-vertical 4
|
||||
:padding-horizontal 8}}
|
||||
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/decline)]]
|
||||
[rn/touchable-opacity {:accessibility-label :accept-cr
|
||||
:on-press #(>evt [:contact-requests.ui/accept-request (:message-id message)])
|
||||
:active-opacity 1
|
||||
:style {:background-color (colors/theme-colors colors/success-50 colors/success-60)
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:align-self :flex-start
|
||||
:border-radius 8
|
||||
:padding-vertical 4
|
||||
:padding-horizontal 8
|
||||
:margin-left 8}}
|
||||
[rn/text {:style (merge typography/font-medium typography/paragraph-2 {:color colors/white})} (i18n/label :t/accept)]]]]]))
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.markdown.text
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.typography :as typography]
|
||||
[reagent.core :as reagent]))
|
||||
@@ -12,6 +12,7 @@
|
||||
:semi-bold typography/font-semi-bold
|
||||
:bold typography/font-bold
|
||||
:monospace typography/monospace
|
||||
:code typography/code
|
||||
:inherit nil)
|
||||
(case (or size :paragraph-1)
|
||||
:label typography/label
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.components.messages.gap
|
||||
(:require
|
||||
[oops.core :refer [oget]]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
(ns quo2.components.messages.system-message
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[quo2.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]
|
||||
[quo2.reanimated :as ra]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.utils.core :as utils]))
|
||||
|
||||
@@ -140,16 +140,16 @@
|
||||
[{:keys [type style non-pressable? animate-landing?] :as message}]
|
||||
[:f>
|
||||
(fn []
|
||||
(let [sv-color (ra/use-shared-value
|
||||
(let [sv-color (reanimated/use-shared-value
|
||||
(get-color :bg (if animate-landing? :landed :default) type))]
|
||||
(when animate-landing?
|
||||
(ra/animate-shared-value-with-delay
|
||||
(reanimated/animate-shared-value-with-delay
|
||||
sv-color (get-color :bg :default type) 0 :linear 1000))
|
||||
[ra/touchable-opacity
|
||||
[reanimated/touchable-opacity
|
||||
{:on-press #(when-not non-pressable?
|
||||
(ra/set-shared-value
|
||||
(reanimated/set-shared-value
|
||||
sv-color (get-color :bg :pressed type)))
|
||||
:style (ra/apply-animations-to-style
|
||||
:style (reanimated/apply-animations-to-style
|
||||
{:background-color sv-color}
|
||||
(merge
|
||||
{:flex-direction :row
|
||||
|
||||
@@ -1,71 +1,78 @@
|
||||
(ns quo2.components.navigation.bottom-nav-tab
|
||||
(:require [quo.react-native :as rn]
|
||||
[reagent.core :as reagent]
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.icons.icons :as icons]
|
||||
[quo2.components.counter.counter :as counter]))
|
||||
|
||||
(defn toggle-background-color [background-color press-out? pass-through?]
|
||||
(let [color (cond
|
||||
press-out? nil
|
||||
pass-through? colors/white-opa-5
|
||||
:else colors/neutral-70)]
|
||||
(reset! background-color color)))
|
||||
(reanimated/set-shared-value
|
||||
background-color
|
||||
(cond
|
||||
press-out? "transparent"
|
||||
pass-through? colors/white-opa-5
|
||||
:else colors/neutral-70)))
|
||||
|
||||
(defn bottom-nav-tab
|
||||
"[bottom-nav-tab opts]
|
||||
opts
|
||||
{:icon :main-icons2/communities
|
||||
:selected? true/false
|
||||
:new-notifications? true/false
|
||||
:notification-indicator :unread-dot/:counter
|
||||
:counter-label number
|
||||
:on-press bottom-tab on-press function
|
||||
:pass-through? true/false
|
||||
:icon-color-anim reanimated shared value
|
||||
"
|
||||
[_]
|
||||
(let [background-color (reagent/atom nil)]
|
||||
(fn [{:keys [icon selected? new-notifications? notification-indicator counter-label on-press pass-through?]}]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-press
|
||||
:on-press-in #(toggle-background-color background-color false pass-through?)
|
||||
:on-press-out #(toggle-background-color background-color true pass-through?)}
|
||||
[rn/view {:style {:width 90
|
||||
:height 40
|
||||
:background-color @background-color
|
||||
:border-radius 10}}
|
||||
[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
|
||||
[]
|
||||
[{:keys [icon new-notifications? notification-indicator counter-label
|
||||
on-press pass-through? icon-color-anim accessibility-label]}]
|
||||
[:f>
|
||||
(fn []
|
||||
(let [icon-animated-style (reanimated/apply-animations-to-style
|
||||
{:tint-color icon-color-anim}
|
||||
{:width 24
|
||||
:height 24})
|
||||
background-color (reanimated/use-shared-value "transparent")
|
||||
background-animated-style (reanimated/apply-animations-to-style
|
||||
{:background-color background-color}
|
||||
{:width 90
|
||||
:height 40
|
||||
:border-radius 10})]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press on-press
|
||||
:on-press-in #(toggle-background-color background-color false pass-through?)
|
||||
: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
|
||||
[]
|
||||
|
||||
(= 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}])}
|
||||
[icon/icon
|
||||
icon
|
||||
{:size 24
|
||||
:color (cond
|
||||
selected? colors/white
|
||||
pass-through? colors/white-opa-40
|
||||
:else colors/neutral-50)}]]
|
||||
(when new-notifications?
|
||||
(if (= notification-indicator :counter)
|
||||
[counter/counter {:outline false
|
||||
:override-text-color colors/white
|
||||
:override-bg-color colors/primary-50
|
||||
:style {:position :absolute
|
||||
:left 48
|
||||
:top 2}}
|
||||
counter-label]
|
||||
[rn/view {:style {:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:top 6
|
||||
:left 51
|
||||
:position :absolute
|
||||
:background-color colors/primary-50}}]))]])))
|
||||
: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)))}]]
|
||||
(when new-notifications?
|
||||
(if (= notification-indicator :counter)
|
||||
[counter/counter {:outline false
|
||||
:override-text-color colors/white
|
||||
:override-bg-color colors/primary-50
|
||||
:style {:position :absolute
|
||||
:left 48
|
||||
:top 2}}
|
||||
counter-label]
|
||||
[rn/view {:style {:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:top 6
|
||||
:left 51
|
||||
:position :absolute
|
||||
:background-color colors/primary-50}}]))]]))])
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.navigation.floating-shell-button
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.buttons.dynamic-button :as dynamic-button]))
|
||||
|
||||
(defn dynamic-button-view [type dynamic-buttons style]
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
(ns quo2.components.navigation.page-nav
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[status-im.utils.dimensions :as dimensions]
|
||||
[clojure.string :as string]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
[quo2.components.markdown.text :as text]
|
||||
[clojure.string :as string]))
|
||||
|
||||
(def ^:private centrify-style
|
||||
{:display :flex
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(ns quo2.components.navigation.top-nav
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :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]))
|
||||
[quo2.components.avatars.user-avatar :as user-avatar]
|
||||
[react-native.hole-view :as hole-view]))
|
||||
|
||||
(defn- get-button-common-props [type]
|
||||
(let [default? (= type :default)
|
||||
@@ -44,8 +45,7 @@
|
||||
open-scanner show-qr open-activity-center style avatar counter-label]}]
|
||||
(let [button-common-props (get-button-common-props type)]
|
||||
[rn/view {:style (merge
|
||||
{:height 56
|
||||
:flex 1}
|
||||
{:height 56}
|
||||
style)}
|
||||
;; Left Section
|
||||
[rn/touchable-without-feedback {:on-press open-profile}
|
||||
@@ -68,16 +68,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
|
||||
[rn/hole-view {:key new-notifications? ;; Key is required to force removal of holes
|
||||
:holes (cond
|
||||
(not new-notifications?) ;; No new notifications, remove holes
|
||||
[]
|
||||
[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
|
||||
[]
|
||||
|
||||
(= 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 [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
|
||||
@@ -0,0 +1,15 @@
|
||||
(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]]))
|
||||
@@ -0,0 +1,12 @@
|
||||
(ns quo2.components.notifications.notification-dot
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn notification-dot [style]
|
||||
[rn/view {:style (merge {:background-color (colors/theme-colors colors/primary-50 colors/primary-60)
|
||||
:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:position :absolute
|
||||
:z-index 1}
|
||||
style)}])
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.reactions.reaction
|
||||
(:require [quo2.components.markdown.text :as quo2.text]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
@@ -16,14 +16,16 @@
|
||||
(defn open-reactions-menu
|
||||
[{:keys [on-press]}]
|
||||
(let [dark? (theme/dark?)]
|
||||
[rn/touchable-opacity {:on-press on-press
|
||||
:style (merge reaction-styling
|
||||
[rn/touchable-opacity
|
||||
{:on-press on-press
|
||||
:accessibility-label :emoji-reaction-add
|
||||
:style (merge reaction-styling
|
||||
{:padding-horizontal 9
|
||||
:border-width 1
|
||||
:margin-top 5
|
||||
:border-color (if dark?
|
||||
colors/neutral-70
|
||||
colors/neutral-30)})}
|
||||
:border-width 1
|
||||
:margin-top 5
|
||||
:border-color (if dark?
|
||||
colors/neutral-70
|
||||
colors/neutral-30)})}
|
||||
[icons/icon :main-icons2/add
|
||||
{:size 20
|
||||
:color (if dark?
|
||||
@@ -32,26 +34,30 @@
|
||||
|
||||
(defn reaction
|
||||
"Add your emoji as a param here"
|
||||
[{:keys [emoji clicks neutral? on-press]}]
|
||||
[{:keys [emoji clicks neutral? on-press accessibility-label]}]
|
||||
(let [dark? (theme/dark?)
|
||||
text-color (if dark? colors/white
|
||||
colors/neutral-100)
|
||||
numeric-value (int clicks)
|
||||
clicks-positive? (pos? numeric-value)]
|
||||
[rn/touchable-opacity {:on-press on-press
|
||||
:style (merge reaction-styling
|
||||
(cond-> {:background-color
|
||||
(if dark?
|
||||
(if neutral?
|
||||
colors/neutral-70
|
||||
:transparent)
|
||||
(if neutral?
|
||||
colors/neutral-30
|
||||
:transparent))}
|
||||
(and dark? (not neutral?)) (assoc :border-color colors/neutral-70
|
||||
:border-width 1)
|
||||
(and (not dark?) (not neutral?)) (assoc :border-color colors/neutral-30
|
||||
:border-width 1)))}
|
||||
[rn/touchable-opacity
|
||||
{:on-press on-press
|
||||
:accessibility-label accessibility-label
|
||||
:style (merge reaction-styling
|
||||
(cond-> {:background-color
|
||||
(if dark?
|
||||
(if neutral?
|
||||
colors/neutral-70
|
||||
:transparent)
|
||||
(if neutral?
|
||||
colors/neutral-30
|
||||
:transparent))}
|
||||
(and dark? (not neutral?))
|
||||
(assoc :border-color colors/neutral-70
|
||||
:border-width 1)
|
||||
(and (not dark?) (not neutral?))
|
||||
(assoc :border-color colors/neutral-30
|
||||
:border-width 1)))}
|
||||
[icons/icon emoji {:no-color true
|
||||
:size 16}]
|
||||
[quo2.text/text {:size :paragraph-2
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.selectors.disclaimer
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :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 [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.theme :as theme]
|
||||
[quo2.theme :as theme]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
[rn/view {:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :main-icons2/check
|
||||
[icons/icon :main-icons2/check-small
|
||||
{:size 20
|
||||
:color (colors/theme-colors
|
||||
(colors/alpha colors/neutral-100 (if disabled? 0.3 1))
|
||||
@@ -53,8 +53,8 @@
|
||||
[rn/view
|
||||
{:style (merge
|
||||
container-style
|
||||
{:height 21
|
||||
:width 21})}
|
||||
{:height 20
|
||||
:width 20})}
|
||||
[rn/view
|
||||
{:style {:flex 1
|
||||
:border-radius 6
|
||||
@@ -72,9 +72,9 @@
|
||||
[rn/view {:style
|
||||
{:height 20
|
||||
:width 20}}
|
||||
[icons/icon :main-icons2/check
|
||||
[icons/icon :main-icons2/check-small
|
||||
{:size 20
|
||||
:color (colors/alpha colors/white (if disabled? 0.3 1))}]])]]])))
|
||||
:color colors/white}]])]]])))
|
||||
|
||||
(defn radio [{:keys [default-checked?]}]
|
||||
(let [checked? (reagent/atom (or default-checked? false))]
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
(ns quo2.components.separator
|
||||
(:require [quo.react-native :as react]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as quo2.colors]))
|
||||
|
||||
(defn separator [{:keys [style]}]
|
||||
[react/view
|
||||
[rn/view
|
||||
{:style
|
||||
(merge
|
||||
style
|
||||
{:background-color (quo2.colors/theme-colors
|
||||
quo2.colors/neutral-30
|
||||
quo2.colors/neutral-10
|
||||
quo2.colors/neutral-80)
|
||||
:align-self :stretch
|
||||
:height 1})}])
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.switcher.switcher-cards
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.tabs.account-selector
|
||||
(:require
|
||||
[quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :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]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.tabs.tab :as tab]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.theme :as theme]))
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(def themes {:light {:background-color colors/neutral-20}
|
||||
:dark {:background-color colors/neutral-80}})
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.tabs.tab
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
[quo2.components.markdown.text :as text]))
|
||||
|
||||
|
||||
@@ -1,11 +1,13 @@
|
||||
(ns quo2.components.tabs.tabs
|
||||
(:require [oops.core :refer [oget]]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.tabs.tab :as tab]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.utils.core :as utils]
|
||||
[status-im.utils.number :as number-utils]))
|
||||
[status-im.utils.number :as number-utils]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.notifications.notification-dot :refer [notification-dot]]))
|
||||
|
||||
(def default-tab-size 32)
|
||||
|
||||
@@ -14,17 +16,30 @@
|
||||
(fn [{:keys [data size] :or {size default-tab-size}}]
|
||||
[rn/view (merge {:flex-direction :row} style)
|
||||
(doall
|
||||
(for [{:keys [label id]} data]
|
||||
(for [{:keys [label id new-info accessibility-label]} data]
|
||||
^{:key id}
|
||||
[rn/view {:style {:margin-right (if (= size default-tab-size) 12 8)}}
|
||||
(when new-info
|
||||
[rn/view {:position :absolute
|
||||
:z-index 1
|
||||
:right -2
|
||||
:top -2
|
||||
:width 10
|
||||
:height 10
|
||||
:border-radius 5
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color (colors/theme-colors colors/neutral-5 colors/neutral-95)}
|
||||
[notification-dot]])
|
||||
[tab/tab
|
||||
{:id id
|
||||
:size size
|
||||
:active (= id @active-tab-id)
|
||||
:on-press (fn []
|
||||
(reset! active-tab-id id)
|
||||
(when on-change
|
||||
(on-change id)))}
|
||||
{: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)))}
|
||||
label]]))])))
|
||||
|
||||
(defn- calculate-fade-end-percentage
|
||||
@@ -132,15 +147,15 @@
|
||||
[tab/tab {:id id
|
||||
:size size
|
||||
:override-theme override-theme
|
||||
:blur? blur?
|
||||
:active (= id @active-tab-id)
|
||||
:on-press (fn [id]
|
||||
(reset! active-tab-id id)
|
||||
(when scroll-on-press?
|
||||
(.scrollToIndex @flat-list-ref
|
||||
#js {:animated true
|
||||
:index index
|
||||
:viewPosition 0.5}))
|
||||
(when on-change
|
||||
(on-change id)))}
|
||||
:blur? blur?
|
||||
:active (= id @active-tab-id)
|
||||
:on-press (fn [id]
|
||||
(reset! active-tab-id id)
|
||||
(when scroll-on-press?
|
||||
(.scrollToIndex @flat-list-ref
|
||||
#js {:animated true
|
||||
:index index
|
||||
:viewPosition 0.5}))
|
||||
(when on-change
|
||||
(on-change id)))}
|
||||
label]])})])))))
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns quo2.components.tags.base-tag
|
||||
(:require
|
||||
[quo.react-native :as rn]))
|
||||
(:require [react-native.core :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]
|
||||
[quo.theme :as quo.theme]
|
||||
[quo2.theme :as quo2.theme]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.avatars.group-avatar :as group-avatar]
|
||||
[quo.react-native :as rn]))
|
||||
[react-native.core :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 (quo.theme/get-theme))]
|
||||
(let [theme (or override-theme (quo2.theme/get-theme))]
|
||||
(into
|
||||
[rn/view
|
||||
(merge
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.tags.status-tags
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.theme :as quo.theme]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.theme :as quo2.theme]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
@@ -91,5 +91,5 @@
|
||||
nil)]
|
||||
[status-component
|
||||
size
|
||||
(or override-theme (quo.theme/get-theme))
|
||||
(or override-theme (quo2.theme/get-theme))
|
||||
label])))
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.tags.tag
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo.theme :as theme]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :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]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.tags.tag :as tag]))
|
||||
|
||||
(defn tags [{:keys [default-active on-change]}]
|
||||
@@ -25,5 +25,4 @@
|
||||
:main-icons2/placeholder
|
||||
resource)
|
||||
:on-press #(do (reset! active-tab-id %)
|
||||
(when on-change (on-change %)))})
|
||||
tag-label]])]))))
|
||||
(when on-change (on-change %)))})]])]))))
|
||||
@@ -1,9 +1,9 @@
|
||||
(ns quo2.components.tags.token-tag
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[status-im.ui.components.icons.icons :as icons]))
|
||||
[quo2.components.icon :as icons]))
|
||||
|
||||
(def themes {:light {:background-color colors/neutral-20}
|
||||
:dark {:background-color colors/neutral-80}})
|
||||
@@ -76,23 +76,19 @@
|
||||
:or
|
||||
{size :small border-color (colors/custom-color-by-theme :purple 50 60)}}]
|
||||
|
||||
[tag {:size size
|
||||
[tag {:size size
|
||||
:token-img-src token-img-src
|
||||
:border-color (when is-required border-color)
|
||||
:border-color (when is-required border-color)
|
||||
:overlay
|
||||
(when (or is-required is-purchasable)
|
||||
[rn/view
|
||||
{:style (merge icon-container-styles
|
||||
{:width 15.5
|
||||
:height 15.5
|
||||
:background-color border-color
|
||||
:border-color (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
|
||||
:border-width 1
|
||||
:right (get-value-from-size size -3.75 -5.75)
|
||||
:bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2)) ; (- height (icon-height/2) spacing)
|
||||
})}
|
||||
[icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12)
|
||||
{:background-color border-color
|
||||
:border-color (if (= (theme/get-theme) :dark) colors/neutral-100 colors/white)
|
||||
:border-width 1
|
||||
:right (get-value-from-size size -3.75 -5.75)
|
||||
:bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2))})}
|
||||
[icons/icon (if is-required :main-icons2/hold :main-icons2/add)
|
||||
{:no-color true
|
||||
:width 13.5
|
||||
:height 13.5}]])}
|
||||
:size 12}]])}
|
||||
(str value " " token)]))
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.wallet.lowest-price
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[clojure.string :as string]))
|
||||
|
||||
(def centrify {:style {:flex-direction :row
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.wallet.network-amount
|
||||
(:require [clojure.string :as string]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.wallet.network-breakdown
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.wallet.network-amount :refer [network-amount]]))
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo.react-native :as rn]
|
||||
[react-native.core :as rn]
|
||||
[clojure.string :as string]
|
||||
[status-im.utils.currency :as currencies]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.foundations.colors
|
||||
(:require [clojure.string :as string]
|
||||
[quo.theme :as theme]))
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(defn alpha [value opacity]
|
||||
(when value
|
||||
@@ -45,7 +45,6 @@
|
||||
;;Blur
|
||||
(def neutral-5-opa-70 (alpha neutral-5 0.7))
|
||||
(def neutral-90-opa-70 (alpha neutral-90 0.7))
|
||||
(def neutral-95-opa-70 (alpha neutral-95 0.7))
|
||||
|
||||
;;80 with transparency
|
||||
(def neutral-80-opa-5 (alpha neutral-80 0.05))
|
||||
@@ -60,6 +59,20 @@
|
||||
(def neutral-80-opa-90 (alpha neutral-80 0.9))
|
||||
(def neutral-80-opa-95 (alpha neutral-80 0.95))
|
||||
|
||||
;;95 with transparency
|
||||
(def neutral-95-opa-60 (alpha neutral-95 0.6))
|
||||
(def neutral-95-opa-70 (alpha neutral-95 0.7))
|
||||
(def neutral-95-opa-80 (alpha neutral-95 0.8))
|
||||
(def neutral-95-opa-90 (alpha neutral-95 0.9))
|
||||
(def neutral-95-opa-95 (alpha neutral-95 0.95))
|
||||
|
||||
;;100 with transparency
|
||||
(def neutral-100-opa-60 (alpha neutral-100 0.6))
|
||||
(def neutral-100-opa-70 (alpha neutral-100 0.7))
|
||||
(def neutral-100-opa-80 (alpha neutral-100 0.8))
|
||||
(def neutral-100-opa-90 (alpha neutral-100 0.9))
|
||||
(def neutral-100-opa-95 (alpha neutral-100 0.95))
|
||||
|
||||
;;;;White
|
||||
|
||||
;;Solid
|
||||
@@ -104,6 +117,12 @@
|
||||
(def success-50-opa-30 (alpha success-50 0.3))
|
||||
(def success-50-opa-40 (alpha success-50 0.4))
|
||||
|
||||
(def success-60-opa-5 (alpha success-60 0.05))
|
||||
(def success-60-opa-10 (alpha success-60 0.1))
|
||||
(def success-60-opa-20 (alpha success-60 0.2))
|
||||
(def success-60-opa-30 (alpha success-60 0.3))
|
||||
(def success-60-opa-40 (alpha success-60 0.4))
|
||||
|
||||
;;;;Danger
|
||||
|
||||
;;Solid
|
||||
|
||||
@@ -45,3 +45,5 @@
|
||||
(def font-bold {:font-family "Inter-Bold"}) ; 700
|
||||
|
||||
(def monospace {:font-family "InterStatus-Regular"})
|
||||
|
||||
(def code {:font-family "UbuntuMono-Regular"})
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
(ns quo2.screens.avatars.account-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.design-system.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.components.avatars.account-avatar :as quo2]))
|
||||
|
||||
(def descriptor [{:label "Icon"
|
||||
@@ -40,8 +39,7 @@
|
||||
[quo2/account-avatar @state]]])))
|
||||
|
||||
(defn preview-account-avatar []
|
||||
[rn/view {:background-color (:preview-background @colors/theme)
|
||||
:flex 1}
|
||||
[rn/view {:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.channel-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.channel-avatar :as quo2]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.group-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.group-avatar :as quo2]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.icon-avatar
|
||||
(:require [reagent.core :as reagent]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.avatars.icon-avatar :as quo2]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.avatars.user-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.components.avatars.user-avatar :as quo2]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.react-native.resources :as resources]))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.avatars.wallet-user-avatar
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.avatars.wallet-user-avatar :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.buttons.button
|
||||
(:require [reagent.core :as reagent]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.buttons.button :as quo2]))
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
{:key :ghost
|
||||
:value "Ghost"}
|
||||
{:key :danger
|
||||
:value "Danger"}]}
|
||||
:value "Danger"}
|
||||
{:key :positive
|
||||
:value "Positive"}]}
|
||||
{:label "Size:"
|
||||
:key :size
|
||||
:type :select
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.buttons.dynamic-button
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.buttons.dynamic-button :as quo2]))
|
||||
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
(ns quo2.screens.code.snippet
|
||||
(:require [quo2.screens.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.code.snippet :as snippet]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def go-example "func (s *Server) listenAndServe() {
|
||||
cfg := &tls.Config{Certificates: []tls.Certificate{*s.cert}, ServerName: s.hostname, MinVersion: tls.VersionTLS12}
|
||||
|
||||
// in case of restart, we should use the same port as the first start in order not to break existing links
|
||||
listener, err := tls.Listen(\"tcp\", s.getHost(), cfg)
|
||||
if err != nil {
|
||||
s.logger.Error(\"failed to start server, retrying\", zap.Error(err))
|
||||
s.ResetPort()
|
||||
err = s.Start()
|
||||
if err != nil {
|
||||
s.logger.Error(\"server start failed, giving up\", zap.Error(err))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
err = s.SetPort(listener.Addr().(*net.TCPAddr).Port)
|
||||
if err != nil {
|
||||
s.logger.Error(\"failed to set Server.port\", zap.Error(err))
|
||||
return
|
||||
}
|
||||
}")
|
||||
|
||||
(def clojure-example "(defn request->xhrio-options
|
||||
[{:as request
|
||||
:keys [on-success on-failure]
|
||||
:or {on-success [:http-no-on-success]
|
||||
on-failure [:http-no-on-failure]}}]
|
||||
; wrap events in cljs-ajax callback
|
||||
(let [api (new goog.net.XhrIo)]
|
||||
(-> request
|
||||
(assoc
|
||||
:api api
|
||||
:handler (partial ajax-xhrio-handler
|
||||
#(dispatch (conj on-success %))
|
||||
#(dispatch (conj on-failure %))
|
||||
api))
|
||||
(dissoc :on-success :on-failure :on-request))))")
|
||||
|
||||
(def examples {:clojure {:language :clojure
|
||||
:text clojure-example}
|
||||
:go {:language :go
|
||||
:text go-example}})
|
||||
|
||||
(def descriptor [{:label "Language:"
|
||||
:key :language
|
||||
:type :select
|
||||
:options [{:key :clojure
|
||||
:value :clojure}
|
||||
{:key :go
|
||||
:value :go}]}
|
||||
{:label "Max lines:"
|
||||
:key :max-lines
|
||||
:type :text}
|
||||
{:label "Syntax highlight:"
|
||||
:key :syntax
|
||||
:type :boolean}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:language :clojure
|
||||
:max-lines ""
|
||||
:syntax true})]
|
||||
(fn []
|
||||
(let [language (if (:syntax @state) (:language @state) :text)
|
||||
text (-> (:language @state) examples :text)
|
||||
max-lines (as-> (:max-lines @state) max-lines
|
||||
(js/parseInt max-lines)
|
||||
(when-not (js/Number.isNaN max-lines)
|
||||
max-lines))]
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:style {:padding-bottom 150}}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:style {:padding-vertical 60
|
||||
:padding-horizontal 16}}
|
||||
[snippet/snippet {:language language
|
||||
:max-lines max-lines
|
||||
:on-copy-press #(js/alert %)}
|
||||
text]]]]))))
|
||||
|
||||
(defn preview-code-snippet []
|
||||
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
@@ -1,11 +1,10 @@
|
||||
(ns quo2.screens.community.community-card-view
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.constants :as constants]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.community.community-list-view :as community-list-view]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
[quo2.components.community.community-card-view :as community-card-view]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.react-native.resources :as resources]))
|
||||
@@ -14,27 +13,28 @@
|
||||
{: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 "Community views"
|
||||
:key :view-style
|
||||
(def descriptor [{:label "Status:"
|
||||
:key :status
|
||||
:type :select
|
||||
:options [{:key :card-view
|
||||
:value "Card view"}
|
||||
{:key :list-view
|
||||
:value "List view"}]}])
|
||||
:options [{:key :gated
|
||||
:value "Gated"}
|
||||
{:key :open
|
||||
:value "Open"}]}
|
||||
{:label "Locked:"
|
||||
:key :locked?
|
||||
:type :boolean}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:view-style :card-view})]
|
||||
(let [state (reagent/atom {:status :gated
|
||||
:locked? true})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
@@ -43,9 +43,8 @@
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(if (= :card-view (:view-style @state))
|
||||
[community-card-view/community-card-view-item community-data]
|
||||
[community-list-view/communities-list-view-item community-data])]]])))
|
||||
[community-card-view/community-card-view-item (merge @state community-data)]]]])))
|
||||
|
||||
(defn preview-community-card []
|
||||
[rn/view {:background-color (colors/theme-colors colors/neutral-5
|
||||
colors/neutral-95)
|
||||
|
||||
@@ -0,0 +1,70 @@
|
||||
(ns quo2.screens.community.community-list-view
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.constants :as constants]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.community.community-list-view :as community-list-view]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[status-im.react-native.resources :as resources]))
|
||||
|
||||
(def community-data
|
||||
{: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"
|
||||
: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)}]}]
|
||||
: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 "Notifications:"
|
||||
:key :notifications
|
||||
:type :select
|
||||
:options [{:key :muted
|
||||
:value "Muted"}
|
||||
{:key :unread-mentions-count
|
||||
:value "Mention counts"}
|
||||
{:key :unread-messages-count
|
||||
:value "Unread messages"}]}
|
||||
{:label "Status:"
|
||||
:key :status
|
||||
:type :select
|
||||
:options [{:key :gated
|
||||
:value "Gated"}
|
||||
{:key :open
|
||||
:value "Open"}]}
|
||||
{:label "Locked:"
|
||||
:key :locked?
|
||||
:type :boolean}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [notifications (reagent/atom (:notifications nil))
|
||||
state (reagent/atom {:locked? true
|
||||
:notifications nil
|
||||
:status (if notifications
|
||||
:gated
|
||||
:open)})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
[community-list-view/communities-list-view-item (merge @state
|
||||
community-data)]]]])))
|
||||
|
||||
(defn preview-community-list-view []
|
||||
[rn/view {:background-color (colors/theme-colors colors/neutral-5
|
||||
colors/neutral-95)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
(ns quo2.screens.community.discover-card
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[status-im.i18n.i18n :as i18n]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.community.discover-card :as discover-card]))
|
||||
|
||||
(def descriptor [{:label "Joined:"
|
||||
:key :joined?
|
||||
:type :boolean}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:joined? :false})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[rn/view {:flex 1
|
||||
:padding 16}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
[discover-card/discover-card {:joined? (:joined? @state)
|
||||
:title (i18n/label :t/discover)
|
||||
:description (i18n/label :t/whats-trending)}]]]])))
|
||||
|
||||
(defn preview-discoverd-card []
|
||||
[rn/view {:background-color (colors/theme-colors colors/neutral-5
|
||||
colors/neutral-95)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.counter.counter
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.counter.counter :as quo2]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.dividers.divider-label
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.dividers.divider-label :as divider-label]))
|
||||
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(ns quo2.screens.dividers.new-messages
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.dividers.new-messages :as new-messages]))
|
||||
[quo2.components.dividers.new-messages :as new-messages]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(def descriptor [{:label "Label"
|
||||
:key :label
|
||||
@@ -36,7 +37,7 @@
|
||||
{:key :beige
|
||||
:value "Beige"}]}])
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:label "New messages"
|
||||
(let [state (reagent/atom {:label (i18n/label :new-messages-header)
|
||||
:color :primary})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.screens.drawers.action-drawers
|
||||
(:require [quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
(:require [quo2.screens.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.drawers.action-drawers :as quo2]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.foundations.colors :as colors]
|
||||
@@ -14,24 +14,27 @@
|
||||
:key :show-red-options?
|
||||
:type :boolean}])
|
||||
|
||||
(def options-with-consequences [{:icon :main-icons2/share-context
|
||||
:label "Clear history"}])
|
||||
(def options-with-consequences [{:icon :main-icons2/delete
|
||||
:danger? true
|
||||
:label "Clear history"}])
|
||||
|
||||
(defn render-action-sheet [state]
|
||||
[quo2/action-drawer {:actions-with-consequence (when (:show-red-options? @state) options-with-consequences)
|
||||
:actions [{:icon :main-icons2/share-context
|
||||
:label "View channel members and details"}
|
||||
{:icon :main-icons2/communities
|
||||
:label "Mark as read"}
|
||||
{:icon :main-icons2/muted
|
||||
:label (if (:muted? @state) "Unmute channel" "Mute channel")
|
||||
:right-icon :main-icons2/chevron-right
|
||||
:sub-label (when (:muted? @state) "Muted for 15 min")}
|
||||
{:icon :main-icons2/scan
|
||||
:right-icon :main-icons2/chevron-right
|
||||
:label "Fetch messages"}
|
||||
{:icon :main-icons2/add-user
|
||||
:label "Share link to the channel"}]}])
|
||||
[quo2/action-drawer (cond-> [[{:icon :main-icons2/friend
|
||||
:label "View channel members and details"}
|
||||
{:icon :main-icons2/communities
|
||||
:label "Mark as read"}
|
||||
{:icon :main-icons2/muted
|
||||
:label (if (:muted? @state) "Unmute channel" "Mute channel")
|
||||
:right-icon :main-icons2/chevron-right
|
||||
:sub-label (when (:muted? @state) "Muted for 15 min")}
|
||||
{:icon :main-icons2/scan
|
||||
:right-icon :main-icons2/chevron-right
|
||||
:label "Fetch messages"}
|
||||
{:icon :main-icons2/add-user
|
||||
:label "Share link to the channel"}]]
|
||||
|
||||
(:show-red-options? @state)
|
||||
(conj options-with-consequences))])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:muted? true
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
(ns quo2.screens.dropdowns.dropdown
|
||||
(:require [quo.components.text :as text]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.components.dropdowns.dropdown :as quo2]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[reagent.core :as reagent]))
|
||||
@@ -64,7 +63,7 @@
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view {:padding-vertical 60
|
||||
:align-items :center}
|
||||
[text/text {:color :main} (str "Selected item: " @selected-item)]
|
||||
[rn/text (str "Selected item: " @selected-item)]
|
||||
[quo2/dropdown (merge @state {:on-select on-select
|
||||
:items items})]]]])))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.info.info-message
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.info.info-message :as quo2]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.info.information-box
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.info.information-box :as quo2]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.list-items.channel
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.list-items.channel :as quo2-channel]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.list-items.preview-lists
|
||||
(:require [quo.react-native :as rn]
|
||||
(:require [react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[quo2.components.list-items.preview-list :as quo2]))
|
||||
|
||||
+20
-27
@@ -1,10 +1,8 @@
|
||||
(ns quo2.screens.main
|
||||
(:require [quo.components.safe-area :as safe-area]
|
||||
[quo.core :as quo]
|
||||
[quo.design-system.colors :as quo.colors]
|
||||
(:require [react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo.react-native :as rn]
|
||||
[quo.theme :as theme]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.components.markdown.text :as quo2-text]
|
||||
[quo2.components.buttons.button :as quo2-button]
|
||||
[quo2.screens.avatars.channel-avatar :as channel-avatar]
|
||||
@@ -14,8 +12,11 @@
|
||||
[quo2.screens.avatars.wallet-user-avatar :as wallet-user-avatar]
|
||||
[quo2.screens.buttons.button :as button]
|
||||
[quo2.screens.buttons.dynamic-button :as dynamic-button]
|
||||
[quo2.screens.code.snippet :as code-snippet]
|
||||
[quo2.screens.counter.counter :as counter]
|
||||
[quo2.screens.community.community-card-view :as community-card]
|
||||
[quo2.screens.community.discover-card :as discover-card]
|
||||
[quo2.screens.community.community-list-view :as community-list-view]
|
||||
[quo2.screens.dividers.divider-label :as divider-label]
|
||||
[quo2.screens.dividers.new-messages :as new-messages]
|
||||
[quo2.screens.drawers.action-drawers :as drawers]
|
||||
@@ -76,9 +77,18 @@
|
||||
{:name :dynamic-button
|
||||
:insets {:top false}
|
||||
:component dynamic-button/preview-dynamic-button}]
|
||||
:community [{:name :community-cards
|
||||
:code [{:name :snippet
|
||||
:insets {:top false}
|
||||
:component code-snippet/preview-code-snippet}]
|
||||
:community [{:name :community-card-view
|
||||
:insets {:top false}
|
||||
:component community-card/preview-community-card}]
|
||||
: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}]
|
||||
:counter [{:name :counter
|
||||
:insets {:top false}
|
||||
:component counter/preview-counter}]
|
||||
@@ -183,26 +193,9 @@
|
||||
|
||||
(defn theme-switcher []
|
||||
[rn/view {:style {:flex-direction :row
|
||||
: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"]]])
|
||||
: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"]])
|
||||
|
||||
(defn main-screen []
|
||||
(fn []
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.markdown.text
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.markdown.text :as quo2]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.screens.messages.gap
|
||||
(:require
|
||||
[quo.previews.preview :as preview]
|
||||
[quo.react-native :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.messages.gap :as gap]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
(ns quo2.screens.messages.system-message
|
||||
(:require [reagent.core :as reagent]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[react-native.core :as rn]
|
||||
[quo2.screens.preview :as preview]
|
||||
[quo2.components.messages.system-message :as system-message]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user