Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Omar Basem
|
a58cb42007 | ||
|
Omar Basem
|
2e68a71957 | ||
|
alwx
|
66cfd62b06 | ||
|
alwx
|
e7dee9b3ce |
@@ -14,21 +14,6 @@
|
||||
clojure.set set
|
||||
clojure.walk walk
|
||||
taoensso.timbre log}}
|
||||
:shadowed-var {:level :error
|
||||
;; We temporarily use :include to define an
|
||||
;; allowlist of core Clojure vars. In the
|
||||
;; future, as we progressively fix shadowed
|
||||
;; vars, we should be able to delete this
|
||||
;; option and lint all vars.
|
||||
:include [comparator
|
||||
count
|
||||
identity
|
||||
iter
|
||||
key
|
||||
str
|
||||
symbol
|
||||
time
|
||||
val]}
|
||||
:invalid-arity {:skip-args [status-im.utils.fx/defn utils.re-frame/defn]}
|
||||
;; TODO remove number when this is fixed
|
||||
;; https://github.com/borkdude/clj-kondo/issues/867
|
||||
|
||||
@@ -22,6 +22,7 @@ KEYCARD_TEST_MENU=0
|
||||
QR_READ_TEST_MENU=1
|
||||
ENABLE_ROOT_ALERT=1
|
||||
ENABLE_QUO_PREVIEW=1
|
||||
MAX_IMAGES_BATCH=5
|
||||
APN_TOPIC=im.status.ethereum.pr
|
||||
COMMUNITIES_ENABLED=1
|
||||
DATABASE_MANAGEMENT_ENABLED=1
|
||||
|
||||
@@ -21,6 +21,7 @@ COMMANDS_ENABLED=1
|
||||
KEYCARD_TEST_MENU=1
|
||||
QR_READ_TEST_MENU=1
|
||||
ENABLE_ROOT_ALERT=0
|
||||
MAX_IMAGES_BATCH=5
|
||||
APN_TOPIC=im.status.ethereum.pr
|
||||
VERIFY_TRANSACTION_CHAIN_ID=5
|
||||
VERIFY_ENS_CHAIN_ID=5
|
||||
|
||||
@@ -26,6 +26,7 @@ VERIFY_TRANSACTION_CHAIN_ID=5
|
||||
VERIFY_ENS_CHAIN_ID=5
|
||||
TEST_STATEOFUS=1
|
||||
BLANK_PREVIEW=0
|
||||
MAX_IMAGES_BATCH=5
|
||||
DATABASE_MANAGEMENT_ENABLED=1
|
||||
COMMUNITIES_ENABLED=1
|
||||
COMMUNITIES_MANAGEMENT_ENABLED=1
|
||||
|
||||
@@ -17,6 +17,7 @@ RPC_NETWORKS_ONLY=0
|
||||
PARTITIONED_TOPIC=0
|
||||
CONTRACT_NODES=1
|
||||
ENABLE_ROOT_ALERT=1
|
||||
MAX_IMAGES_BATCH=5
|
||||
BLANK_PREVIEW=0
|
||||
COMMUNITIES_ENABLED=1
|
||||
DATABASE_MANAGEMENT_ENABLED=1
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
name: MVPBug Report
|
||||
about: MVPBug Report
|
||||
name: Bug Report
|
||||
about: Bug Report
|
||||
title: ''
|
||||
labels: 'E:Mobile Bugfixes MVP'
|
||||
labels: bug
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
@@ -22,7 +22,8 @@ assignees: ''
|
||||
|
||||
### Reproduction
|
||||
|
||||
1.
|
||||
1) Open Status
|
||||
2)
|
||||
|
||||
### Additional Information
|
||||
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
---
|
||||
name: Wont fix Report
|
||||
about: to facilitate future handling, identify and address non-urgent issues that won't be prioritized in the near future
|
||||
title: ''
|
||||
labels: likely_wont_fix
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
## Problem
|
||||
|
||||
|
||||
#### Expected behavior
|
||||
|
||||
|
||||
#### Actual behavior
|
||||
|
||||
|
||||
### Reproduction
|
||||
|
||||
1.
|
||||
|
||||
### Additional Information
|
||||
|
||||
- Status version: release
|
||||
- Operating System: Android, iOS
|
||||
|
||||
|
||||
[comment]: # (Please, add logs/notes if necessary)
|
||||
|
||||
@@ -2,9 +2,7 @@
|
||||
|
||||
[<img src="https://play.google.com/intl/en_us/badges/images/generic/en-play-badge.png" alt="Get it on Google Play" height="80"/>](https://play.google.com/store/apps/details?id=im.status.ethereum)
|
||||
[<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"/>](https://f-droid.org/packages/im.status.ethereum/)
|
||||
|
||||
|
||||
[Get it on Github](https://github.com/status-im/status-mobile/releases)
|
||||
[<img src="doc/github_badge.png" alt="Get it on Github" height="80"/>](https://github.com/status-im/status-mobile/releases)
|
||||
|
||||
Join us in creating a browser, messenger, and gateway to a decentralized world. Status is a free (libre) open source mobile client targeting Android & iOS built entirely on [Ethereum](https://ethereum.org/) technologies. That's right, no middle men and `go-ethereum` running directly on your device.
|
||||
|
||||
@@ -22,31 +20,31 @@ If this interests you, **help us make Status a reality** - anyone can contribute
|
||||
|
||||
## How to Contribute?
|
||||
|
||||
Go straight to the [docs](doc/) and choose what interests you:
|
||||
Go straight to the [docs](https://status.im/docs) or [join our chat](https://join.status.im/chat/public/status) and choose what interests you:
|
||||
|
||||
- **Developer** Developers are the heart of software and to keep Status beating
|
||||
we need all the help we can get! If you're looking to code in ClojureScript or
|
||||
Golang then Status is the project for you! We use React Native and there is even
|
||||
some Java/Objective-C too! Want to learn more about it? Start by reading our
|
||||
[Developer Introduction](doc/starting-guide.md) which guides you
|
||||
[Developer Introduction](https://status.im/developer_tools/) which guides you
|
||||
through the technology stack and start browsing [beginner
|
||||
issues](https://github.com/status-im/status-mobile/issues?utf8=%E2%9C%93&q=is%3Aopen%20is%3Aissue%20label%3A%22good%20first%20issue%22%20).
|
||||
Then you can read how to [Build
|
||||
Status](doc/starting-guide.md), which talks about managing
|
||||
project dependencies, coding guidelines and testing procedures.
|
||||
Check out our [coding guidelines](doc/new-guidelines.md).
|
||||
Status](https://status.im/technical/build_status/), which talks about managing
|
||||
project dependencies, coding guidelines and testing procedures. The [doc/](doc/)
|
||||
directory also has valuable information for contributors.
|
||||
|
||||
- **Community Management**
|
||||
Metcalfe's law states that the value of a network is proportional to the square of the number of connected users of the system - without community Status is meaningless. We're looking to create a positive, fun environment to explore new ideas, experiment and grow the Status community. Building a community takes a lot of work but the people you'll meet and long lasting relationships you form will be well worth it, check out our [Mission and Community Principles](https://status.im/about)
|
||||
|
||||
- **Specification / Documentation**
|
||||
John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, check out our [docs](doc/) and see how you can improve what we have.
|
||||
John Dewey once said "Education is not preparation for life; education is life *itself* ". Developers & Designers need guidance and it all starts from documentation and specifications. Our software is only as good as its documentation, head over to our [docs](https://status.im/docs) and see how you can improve what we have.
|
||||
|
||||
- **Blog Writing**
|
||||
Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page.
|
||||
Content is King, keeping our blog up to date and informing the community of news helps keep everyone on the same page. [Jump into our chat](https://join.status.im/chat/public/status) and discuss with the team how you can contribute!
|
||||
|
||||
- **Testers**
|
||||
It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](doc/starting-guide.md) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
|
||||
It's bug hunting season! Status is currently under active development and there is sure to be a bunch of learning, [build status from scratch](https://status.im/technical/build_status/) or if an android user check out our [nightly builds](https://status.im/nightly). You can shake your phone to submit bug reports, or start browsing our [Github Issues](https://github.com/status-im/status-mobile/issues). Every bug you find brings Status closer to stable, usable software for everyone to enjoy!
|
||||
|
||||
- **Security**
|
||||
Status is a visual interface to make permanent changes on the Blockchain, it handles crypto-tokens that have real value and allows 3rd party code execution. Security is paramount to its success. You are given permission to break Status as hard as you can, as long as you share your findings with the community!
|
||||
@@ -54,6 +52,9 @@ Status is a visual interface to make permanent changes on the Blockchain, it han
|
||||
- **Evangelism**
|
||||
Help us spread the word! Tell a friend *right now*, in fact tell **everyone** - yell from a mountain if you have to, every person counts! If you've got a great story to tell or have some interesting way you've spread the word about Status let us know about it in our [chat](https://join.status.im/chat/public/status)
|
||||
|
||||
## Status API
|
||||
View our [API Docs](https://status.im/developer_tools/status_web_api.html) and learn how to integrate your DApp into Status. You can read more about how to add your DApp to Status [here](https://status.im/developer_tools/add_your_dapp.html).
|
||||
|
||||
## Give me Binaries!
|
||||
|
||||
You can get our Beta builds for both Android and iOS on our [website](https://status.im), through our [nightly builds](https://status.im/nightly/) or by [building it yourself](https://status.im/technical/build_status/).
|
||||
@@ -67,8 +68,12 @@ Without the dedication of these outstanding individuals, Status would not exist.
|
||||
|
||||
## Contact us
|
||||
|
||||
Feel free to email us at [support@status.im](mailto:support@status.im).
|
||||
Feel free to email us at [support@status.im](mailto:support@status.im) or better yet, [join our chat](https://join.status.im/chat/public/status).
|
||||
|
||||
## License
|
||||
|
||||
Licensed under the [Mozilla Public License v2.0](https://github.com/status-im/status-mobile/blob/develop/LICENSE.md)
|
||||
|
||||
## Testing Supported by
|
||||
|
||||
[](https://www.browserstack.com/automate/public-build/SFBWQ3k5R2tnT2t6UGsxU1h1U0g3VFlCNnoxVTRHYWNoTDhsb1laaTJZWT0tLUZMUm5sSVFBSU9qSWM1RUJvK1I3Z3c9PQ==--ad15ae7992b432b33743749d40318952415bd98f)
|
||||
|
||||
@@ -74,7 +74,7 @@ pipeline {
|
||||
sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
|
||||
sh """
|
||||
python3 -m pytest \
|
||||
--numprocesses 6 \
|
||||
--numprocesses 4 \
|
||||
--rerun_count=2 \
|
||||
--testrail_report=True \
|
||||
-m testrail_id \
|
||||
|
||||
@@ -123,7 +123,7 @@ pipeline {
|
||||
sh 'cp -f $TEST_ETH_ACCOUNTS_FILE users.py'
|
||||
sh """
|
||||
python3 -m pytest \
|
||||
--numprocesses 6 \
|
||||
--numprocesses 4 \
|
||||
--rerun_count=2 \
|
||||
--testrail_report=True \
|
||||
-k \"${params.KEYWORD_EXPRESSION}\" \
|
||||
|
||||
@@ -24,7 +24,6 @@
|
||||
|
||||
[Patching](patching.md)
|
||||
|
||||
[Creating a pixel perfect UI](pixel-perfection.md)
|
||||
|
||||
## Testing
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 564 KiB |
@@ -80,52 +80,6 @@ This mistake mostly happens with functional components
|
||||
|
||||
it's important to name functional components with `f-` prefix
|
||||
|
||||
### Component props and API scheme to match Figma as closely as possible
|
||||
|
||||
Ideally, the prop names for components (particularly in quo2 Design System) should match the Figma properties as best as possible. This makes it easier for the developer using that component to configure it correctly for the screen it is being used on and avoids unnecessary overwrites and adjustments being made.
|
||||
|
||||
#### Avoid unnecessarily grouping categories to reduce the number of props
|
||||
For example in Figma if there is a component and it has the following variants:
|
||||
|
||||
|theme: "light" blur: "False"|theme: "dark" blur: "False"|theme: "light" blur: "True"|theme: "dark" blur: "True"|
|
||||
|----------------------------|---------------------------|---------------------------|---------------------------|
|
||||
| type :neutral label "ABC" | type :neutral label "ABC" | | |
|
||||
| type :active label "ABC" | type :active label "ABC" | | |
|
||||
| type :danger label "ABC" | type :danger label "ABC" | type :danger label "ABC" | type :danger label "ABC" |
|
||||
|
||||
```clojure
|
||||
;; bad
|
||||
"theme - :light or :dark
|
||||
type - can be :neutral :active :danger :danger-blur"
|
||||
(defn my-component [{:keys [theme type]} label])
|
||||
|
||||
;; good
|
||||
"theme - :light or :dark
|
||||
type - can be :neutral :active :danger
|
||||
blur? - boolean
|
||||
"
|
||||
(defn my-component [{:keys [theme blur? type]} label])
|
||||
```
|
||||
|
||||
Please note this is only for the external API of the component and there should be no restriction of how the component manages its internal API as that will not affect the developer using the component with the issues described above.
|
||||
|
||||
In some cases this is not always possible or does not make sense. However the thought process should be how easy will it be for another developer to use this component with the correct configuration given the screen designs for Figma.
|
||||
|
||||
#### Avoid unnecessarily renaming props
|
||||
In general it can be helpful to avoid renaming props from their counterpart in Figma.
|
||||
|
||||
For example if Figma has sizes `:small`, `:medium` and `:large`
|
||||
|
||||
```clojure
|
||||
;; bad
|
||||
":size - :little, :default or :big"
|
||||
(defn my-component [{:keys [size]}])
|
||||
|
||||
;; good
|
||||
":size - :small, :medium or :large"
|
||||
(defn my-component [{:keys [size]}])
|
||||
```
|
||||
|
||||
### Component styles
|
||||
|
||||
Prefer to define styles in a separate file named `style.cljs`, colocated with
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
# Pixel Perfection
|
||||
The Status Mobile team aims to align the design implementation perfectly according to a given screens respective Figma design spec.
|
||||
|
||||
Currently the Figma Designs match up with an "iPhone 11 Pro" screen size.
|
||||
|
||||
To test your implementation is correct you can take the following steps
|
||||
|
||||
- Open a new Figma file so that you have write privileges.
|
||||
- Copy in the component or screen from the Figma file.
|
||||
|
||||
- Using the "iPhone 11 Pro" simulator (it is the default now) you take a screenshot of your component and paste it into your Figma file.
|
||||
|
||||
- To get the right size, set your screenshot to width 375px
|
||||
|
||||
|
||||
|
||||
- Lower the opacity so you can see it sitting on top of the Figma mock ups.
|
||||
+2
-2
@@ -626,10 +626,10 @@ class StatusModule extends ReactContextBaseJavaModule implements LifecycleEventL
|
||||
}
|
||||
|
||||
@ReactMethod
|
||||
public void loginWithKeycard(final String accountData, final String password, final String chatKey, final String nodeConfigJSON) {
|
||||
public void loginWithKeycard(final String accountData, final String password, final String chatKey) {
|
||||
Log.d(TAG, "loginWithKeycard");
|
||||
this.migrateKeyStoreDir(accountData, password);
|
||||
String result = Statusgo.loginWithKeycard(accountData, password, chatKey, nodeConfigJSON);
|
||||
String result = Statusgo.loginWithKeycard(accountData, password, chatKey);
|
||||
if (result.startsWith("{\"error\":\"\"")) {
|
||||
Log.d(TAG, "LoginWithKeycard result: " + result);
|
||||
} else {
|
||||
|
||||
@@ -633,15 +633,14 @@ RCT_EXPORT_METHOD(loginAccount:(NSString *)request) {
|
||||
|
||||
RCT_EXPORT_METHOD(loginWithKeycard:(NSString *)accountData
|
||||
password:(NSString *)password
|
||||
chatKey:(NSString *)chatKey
|
||||
nodeConfigJSON:(NSString *)nodeConfigJSON) {
|
||||
chatKey:(NSString *)chatKey) {
|
||||
#if DEBUG
|
||||
NSLog(@"LoginWithKeycard() method called");
|
||||
#endif
|
||||
[self getExportDbFilePath];
|
||||
[self migrateKeystore:accountData password:password];
|
||||
|
||||
NSString *result = StatusgoLoginWithKeycard(accountData, password, chatKey, nodeConfigJSON);
|
||||
NSString *result = StatusgoLoginWithKeycard(accountData, password, chatKey);
|
||||
|
||||
NSLog(@"%@", result);
|
||||
}
|
||||
|
||||
@@ -833,37 +833,6 @@ void _SaveAccountAndLogin(const FunctionCallbackInfo<Value>& args) {
|
||||
|
||||
}
|
||||
|
||||
void _CreateAccountAndLogin(const FunctionCallbackInfo<Value>& args) {
|
||||
Isolate* isolate = args.GetIsolate();
|
||||
Local<Context> context = isolate->GetCurrentContext();
|
||||
|
||||
if (args.Length() != 1) {
|
||||
// Throw an Error that is passed back to JavaScript
|
||||
isolate->ThrowException(Exception::TypeError(
|
||||
String::NewFromUtf8Literal(isolate, "Wrong number of arguments for SaveAccountAndLogin")));
|
||||
return;
|
||||
}
|
||||
|
||||
// Check the argument types
|
||||
|
||||
if (!args[0]->IsString()) {
|
||||
isolate->ThrowException(Exception::TypeError(
|
||||
String::NewFromUtf8Literal(isolate, "Wrong argument type for 'settingsJSON'")));
|
||||
return;
|
||||
}
|
||||
|
||||
String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
|
||||
char *arg0 = *arg0Obj;
|
||||
|
||||
// Call exported Go function, which returns a C string
|
||||
char *c = CreateAccountAndLogin(arg0);
|
||||
|
||||
Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
|
||||
args.GetReturnValue().Set(ret);
|
||||
delete c;
|
||||
|
||||
}
|
||||
|
||||
void _GenerateAlias(const FunctionCallbackInfo<Value>& args) {
|
||||
Isolate* isolate = args.GetIsolate();
|
||||
Local<Context> context = isolate->GetCurrentContext();
|
||||
@@ -1041,7 +1010,7 @@ void _LoginWithKeycard(const FunctionCallbackInfo<Value>& args) {
|
||||
Isolate* isolate = args.GetIsolate();
|
||||
Local<Context> context = isolate->GetCurrentContext();
|
||||
|
||||
if (args.Length() != 4) {
|
||||
if (args.Length() != 3) {
|
||||
// Throw an Error that is passed back to JavaScript
|
||||
isolate->ThrowException(Exception::TypeError(
|
||||
String::NewFromUtf8Literal(isolate, "Wrong number of arguments for LoginWithKeycard")));
|
||||
@@ -1065,11 +1034,6 @@ void _LoginWithKeycard(const FunctionCallbackInfo<Value>& args) {
|
||||
String::NewFromUtf8Literal(isolate, "Wrong argument type for 'keyHex'")));
|
||||
return;
|
||||
}
|
||||
if (!args[3]->IsString()) {
|
||||
isolate->ThrowException(Exception::TypeError(
|
||||
String::NewFromUtf8Literal(isolate, "Wrong argument type for 'nodeConfigJSON'")));
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
String::Utf8Value arg0Obj(isolate, args[0]->ToString(context).ToLocalChecked());
|
||||
@@ -1078,11 +1042,9 @@ void _LoginWithKeycard(const FunctionCallbackInfo<Value>& args) {
|
||||
char *arg1 = *arg1Obj;
|
||||
String::Utf8Value arg2Obj(isolate, args[2]->ToString(context).ToLocalChecked());
|
||||
char *arg2 = *arg2Obj;
|
||||
String::Utf8Value arg3Obj(isolate, args[3]->ToString(context).ToLocalChecked());
|
||||
char *arg3 = *arg3Obj;
|
||||
|
||||
// Call exported Go function, which returns a C string
|
||||
char *c = LoginWithKeycard(arg0, arg1, arg2, arg3);
|
||||
char *c = LoginWithKeycard(arg0, arg1, arg2);
|
||||
|
||||
Local<String> ret = String::NewFromUtf8(isolate, c).ToLocalChecked();
|
||||
args.GetReturnValue().Set(ret);
|
||||
@@ -1967,7 +1929,6 @@ void init(Local<Object> exports) {
|
||||
NODE_SET_METHOD(exports, "hashMessage", _HashMessage);
|
||||
NODE_SET_METHOD(exports, "resetChainData", _ResetChainData);
|
||||
NODE_SET_METHOD(exports, "saveAccountAndLogin", _SaveAccountAndLogin);
|
||||
NODE_SET_METHOD(exports, "createAccountAndLogin", _CreateAccountAndLogin);
|
||||
NODE_SET_METHOD(exports, "generateAlias", _GenerateAlias);
|
||||
NODE_SET_METHOD(exports, "validateMnemonic", _ValidateMnemonic);
|
||||
NODE_SET_METHOD(exports, "multiformatSerializePublicKey", _MultiformatSerializePublicKey);
|
||||
|
||||
+1
-1
@@ -44,7 +44,7 @@
|
||||
"react-native-camera-kit": "^13.0.0",
|
||||
"react-native-config": "^1.5.0",
|
||||
"react-native-dialogs": "^1.0.4",
|
||||
"react-native-draggable-flatlist": "^4.0.1",
|
||||
"react-native-draggable-flatlist": "^3.0.3",
|
||||
"react-native-fast-image": "^8.5.11",
|
||||
"react-native-fetch-polyfill": "^1.1.2",
|
||||
"react-native-fs": "^2.14.1",
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 421 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 213 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 295 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 540 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 566 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,55 +0,0 @@
|
||||
#!/bin/bash
|
||||
|
||||
if [ -z "$1" ]; then
|
||||
echo "Please provide the full branch URL as an argument."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
if [ -z "$2" ]; then
|
||||
echo "Please provide the full pull request URL as second argument."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# Extract PR number from the URL
|
||||
PR_URL="$2"
|
||||
PR_NUMBER=$(echo "$PR_URL" | awk -F '/' '{print $NF}')
|
||||
|
||||
# Fetch PR Info
|
||||
PR_TITLE=$(gh pr view "$PR_NUMBER" --json title -q '.title')
|
||||
PR_DESCRIPTION=$(gh pr view "$PR_NUMBER" --json body -q '.body')
|
||||
BRANCH_NAME=$(gh pr view "$PR_NUMBER" --json headRefName -q '.headRefName')
|
||||
|
||||
# Extracting the repo URL and branch name
|
||||
FULL_URL="$1"
|
||||
REPO_URL=$(echo "$FULL_URL" | awk -F "/tree/" '{print $1}')
|
||||
REPO_NAME=$(basename "$REPO_URL")
|
||||
NEW_REMOTE_URL="https://github.com/status-im/status-mobile"
|
||||
|
||||
# Clone the repo if not already cloned
|
||||
if [ ! -d "$REPO_NAME" ]; then
|
||||
git clone "$REPO_URL"
|
||||
cd "$REPO_NAME" || exit
|
||||
gh repo set-default "$REPO_URL"
|
||||
else
|
||||
cd "$REPO_NAME" || exit
|
||||
gh repo set-default "$REPO_URL"
|
||||
git fetch
|
||||
fi
|
||||
|
||||
# Check if branch already exists
|
||||
BRANCH_EXISTS=$(git show-ref refs/heads/"$BRANCH_NAME" 2>/dev/null)
|
||||
|
||||
if [ -z "$BRANCH_EXISTS" ]; then
|
||||
# New Import
|
||||
git checkout -b "$BRANCH_NAME" "origin/$BRANCH_NAME"
|
||||
git remote add source "$REPO_URL"
|
||||
git remote set-url origin $NEW_REMOTE_URL
|
||||
git push -u origin "$BRANCH_NAME"
|
||||
gh pr create --base develop --head "$BRANCH_NAME" --title "[IMPORTED] $PR_TITLE" --body "$PR_DESCRIPTION"
|
||||
else
|
||||
# Sync Existing Import
|
||||
git checkout "$BRANCH_NAME"
|
||||
git fetch source "$BRANCH_NAME"
|
||||
git rebase source/"$BRANCH_NAME" # Rebase instead of merge
|
||||
git push origin "$BRANCH_NAME" # Push updates to your imported branch
|
||||
fi
|
||||
@@ -6,10 +6,3 @@ export function infoLayout(input, isTop) {
|
||||
return isTop ? input.value : -input.value;
|
||||
});
|
||||
}
|
||||
|
||||
export function textSheet(input, isHeight) {
|
||||
return useDerivedValue(function () {
|
||||
'worklet';
|
||||
return isHeight ? input.value : -input.value;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import { Easing } from 'react-native-reanimated';
|
||||
|
||||
// Home Stack States
|
||||
export const CLOSE_WITHOUT_ANIMATION = 0;
|
||||
export const OPEN_WITHOUT_ANIMATION = 1;
|
||||
export const CLOSE_WITH_ANIMATION = 2;
|
||||
export const OPEN_WITH_ANIMATION = 3;
|
||||
export const CLOSE_WITH_ANIMATION = 0;
|
||||
export const OPEN_WITH_ANIMATION = 1;
|
||||
export const CLOSE_WITHOUT_ANIMATION = 2;
|
||||
export const OPEN_WITHOUT_ANIMATION = 3;
|
||||
|
||||
// Floating Screen States
|
||||
export const CLOSE_SCREEN_WITHOUT_ANIMATION = 0;
|
||||
export const OPEN_SCREEN_WITHOUT_ANIMATION = 1;
|
||||
export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 2;
|
||||
export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 3;
|
||||
export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 4;
|
||||
export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 5;
|
||||
export const CLOSE_SCREEN_WITH_SLIDE_ANIMATION = 0;
|
||||
export const OPEN_SCREEN_WITH_SLIDE_ANIMATION = 1;
|
||||
export const CLOSE_SCREEN_WITH_SHELL_ANIMATION = 2;
|
||||
export const OPEN_SCREEN_WITH_SHELL_ANIMATION = 3;
|
||||
export const CLOSE_SCREEN_WITHOUT_ANIMATION = 4;
|
||||
export const OPEN_SCREEN_WITHOUT_ANIMATION = 5;
|
||||
|
||||
export const SHELL_ANIMATION_TIME = 200;
|
||||
|
||||
|
||||
+11
-11
@@ -225,12 +225,12 @@
|
||||
(.verifyDatabasePassword ^js (status) key-uid hashed-password callback))
|
||||
|
||||
(defn login-with-keycard
|
||||
[{:keys [key-uid multiaccount-data password chat-key node-config]}]
|
||||
[{:keys [key-uid multiaccount-data password chat-key]}]
|
||||
(log/debug "[native-module] login-with-keycard")
|
||||
(clear-web-data)
|
||||
(init-keystore
|
||||
key-uid
|
||||
#(.loginWithKeycard ^js (status) multiaccount-data password chat-key (types/clj->json node-config))))
|
||||
#(.loginWithKeycard ^js (status) multiaccount-data password chat-key)))
|
||||
|
||||
(defn set-soft-input-mode
|
||||
[mode]
|
||||
@@ -287,11 +287,11 @@
|
||||
and then compressed. Example input/output :
|
||||
input key = zQ3shTAten2v9CwyQD1Kc7VXAqNPDcHZAMsfbLHCZEx6nFqk9 and
|
||||
output key = 0x025596a7ff87da36860a84b0908191ce60a504afc94aac93c1abd774f182967ce6"
|
||||
[input-key callback]
|
||||
[key callback]
|
||||
(log/info "[native-module] Deserializing and then compressing public key"
|
||||
{:fn :deserialize-and-compress-key
|
||||
:key input-key})
|
||||
(.deserializeAndCompressKey ^js (status) input-key callback))
|
||||
:key key})
|
||||
(.deserializeAndCompressKey ^js (status) key callback))
|
||||
|
||||
(defn compressed-key->public-key
|
||||
"Provides compressed key to status-go and gets back the uncompressed public key via deserialization"
|
||||
@@ -461,19 +461,19 @@
|
||||
(.numberToHex ^js (status) (str num)))
|
||||
|
||||
(defn sha3
|
||||
[s]
|
||||
[str]
|
||||
(log/debug "[native-module] sha3")
|
||||
(.sha3 ^js (status) s))
|
||||
(.sha3 ^js (status) str))
|
||||
|
||||
(defn utf8-to-hex
|
||||
[s]
|
||||
[str]
|
||||
(log/debug "[native-module] utf8-to-hex")
|
||||
(.utf8ToHex ^js (status) s))
|
||||
(.utf8ToHex ^js (status) str))
|
||||
|
||||
(defn hex-to-utf8
|
||||
[s]
|
||||
[str]
|
||||
(log/debug "[native-module] hex-to-utf8")
|
||||
(.hexToUtf8 ^js (status) s))
|
||||
(.hexToUtf8 ^js (status) str))
|
||||
|
||||
(defn check-address-checksum
|
||||
[address]
|
||||
|
||||
+39
-14
@@ -82,8 +82,8 @@
|
||||
:restDisplacementThreshold 0.001}})
|
||||
|
||||
(defn set-value
|
||||
[anim v]
|
||||
(ocall anim "setValue" v))
|
||||
[anim val]
|
||||
(ocall anim "setValue" val))
|
||||
|
||||
(def Value (oget animated "Value"))
|
||||
|
||||
@@ -178,20 +178,20 @@
|
||||
(.withOffset ^js redash (clj->js config)))
|
||||
|
||||
(defn with-spring-transition
|
||||
[v config]
|
||||
(.withSpringTransition ^js redash v (clj->js config)))
|
||||
[val config]
|
||||
(.withSpringTransition ^js redash val (clj->js config)))
|
||||
|
||||
(defn with-timing-transition
|
||||
[v config]
|
||||
(.withTimingTransition ^js redash v (clj->js config)))
|
||||
[val config]
|
||||
(.withTimingTransition ^js redash val (clj->js config)))
|
||||
|
||||
(defn use-spring-transition
|
||||
[v config]
|
||||
(.useSpringTransition ^js redash v (clj->js config)))
|
||||
[val config]
|
||||
(.useSpringTransition ^js redash val (clj->js config)))
|
||||
|
||||
(defn use-timing-transition
|
||||
[v config]
|
||||
(.useTimingTransition ^js redash v (clj->js config)))
|
||||
[val config]
|
||||
(.useTimingTransition ^js redash val (clj->js config)))
|
||||
|
||||
(defn re-timing
|
||||
[config]
|
||||
@@ -232,11 +232,36 @@
|
||||
:onGestureEvent (.-onGestureEvent ^js gesture)}))
|
||||
|
||||
(defn snap-point
|
||||
[v velocity snap-points]
|
||||
(.snapPoint ^js redash v velocity (to-array snap-points)))
|
||||
[value velocity snap-points]
|
||||
(.snapPoint ^js redash value velocity (to-array snap-points)))
|
||||
|
||||
(defn cancelable-loop
|
||||
[{:keys [clock duration finished on-reach]}]
|
||||
(let [time (value 0)
|
||||
frame-time (value 0)
|
||||
position (value 0)
|
||||
to-value (value 1)
|
||||
state {:time time
|
||||
:frameTime frame-time
|
||||
:finished finished
|
||||
:position position}
|
||||
config {:toValue to-value
|
||||
:duration duration
|
||||
:easing (:linear easings)}]
|
||||
(block
|
||||
[(timing clock state config)
|
||||
(cond* (and* finished
|
||||
(eq position to-value))
|
||||
(call* [] on-reach))
|
||||
(cond* finished
|
||||
[(set finished 0)
|
||||
(set time 0)
|
||||
(set frame-time 0)
|
||||
(set position 0)])
|
||||
position])))
|
||||
|
||||
(defn with-easing
|
||||
[{v :value
|
||||
[{val :value
|
||||
:keys [snap-points velocity offset state easing duration
|
||||
animation-over]
|
||||
:or {duration 250
|
||||
@@ -257,7 +282,7 @@
|
||||
(set position offset))
|
||||
(cond* (neq state (:end gh/states))
|
||||
[(set animation-over 0)
|
||||
(set position (add offset v))])
|
||||
(set position (add offset val))])
|
||||
(cond* (and* (eq state (:end gh/states))
|
||||
(not* animation-over))
|
||||
[(set position
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
(ns quo.previews.preview)
|
||||
|
||||
(defn descriptor->values
|
||||
[{:keys [key options type]}]
|
||||
{key (case type
|
||||
:boolean [false true]
|
||||
:text [nil "Just simple text"] ; NOTE(Ferossgp): add example with long text?
|
||||
:select (mapv :key options))})
|
||||
|
||||
(defmacro list-comp
|
||||
[[binding seq-expr & bindings] body-expr]
|
||||
(cond (not binding)
|
||||
|
||||
@@ -68,8 +68,8 @@
|
||||
:background-color (:ui-background @colors/theme)})
|
||||
|
||||
(defn customizer-boolean
|
||||
[{:keys [label state] :as args}]
|
||||
(let [state* (reagent/cursor state [(:key args)])]
|
||||
[{:keys [label key state]}]
|
||||
(let [state* (reagent/cursor state [key])]
|
||||
[rn/view {:style container}
|
||||
[label-view state label]
|
||||
[rn/view
|
||||
@@ -95,8 +95,8 @@
|
||||
"False"]]]]))
|
||||
|
||||
(defn customizer-text
|
||||
[{:keys [label state] :as args}]
|
||||
(let [state* (reagent/cursor state [(:key args)])]
|
||||
[{:keys [label key state]}]
|
||||
(let [state* (reagent/cursor state [key])]
|
||||
[rn/view {:style container}
|
||||
[label-view state label]
|
||||
[rn/view {:style {:flex 0.6}}
|
||||
@@ -117,8 +117,8 @@
|
||||
(defn customizer-select
|
||||
[]
|
||||
(let [open (reagent/atom nil)]
|
||||
(fn [{:keys [label state options] :as args}]
|
||||
(let [state* (reagent/cursor state [(:key args)])
|
||||
(fn [{:keys [label key state options]}]
|
||||
(let [state* (reagent/cursor state [key])
|
||||
selected (value-for-key @state* options)]
|
||||
[rn/view {:style container}
|
||||
[label-view state label]
|
||||
@@ -133,15 +133,15 @@
|
||||
[rn/view {:style (modal-view)}
|
||||
[rn/scroll-view
|
||||
(doall
|
||||
(for [{k :key v :value} options]
|
||||
^{:key k}
|
||||
(for [{:keys [key value]} options]
|
||||
^{:key key}
|
||||
[rn/touchable-opacity
|
||||
{:style (select-option-style (= @state* k))
|
||||
{:style (select-option-style (= @state* key))
|
||||
:on-press #(do
|
||||
(reset! open false)
|
||||
(reset! state* k))}
|
||||
[quo/text {:color (if (= @state* k) :link :secondary)}
|
||||
v]]))
|
||||
(reset! state* key))}
|
||||
[quo/text {:color (if (= @state* key) :link :secondary)}
|
||||
value]]))
|
||||
[rn/view {:flex-direction :row}
|
||||
[rn/touchable-opacity
|
||||
{:style (select-option-style false)
|
||||
@@ -175,15 +175,17 @@
|
||||
{:style {:flex 1}
|
||||
:padding-horizontal 16}
|
||||
(doall
|
||||
(for [desc descriptors
|
||||
:let [descriptor (merge desc {:state state})]]
|
||||
^{:key (:key desc)}
|
||||
(for [{:keys [key type]
|
||||
:as desc}
|
||||
descriptors
|
||||
:let [descriptor (merge desc
|
||||
{:state state})]]
|
||||
^{:key key}
|
||||
[:<>
|
||||
(case (:type desc)
|
||||
(case type
|
||||
:boolean [customizer-boolean descriptor]
|
||||
:text [customizer-text descriptor]
|
||||
:select [customizer-select descriptor]
|
||||
nil)]))])
|
||||
:select [customizer-select descriptor])]))])
|
||||
|
||||
(comment
|
||||
[{:label "Show error:"
|
||||
|
||||
+5
-5
@@ -12,9 +12,9 @@
|
||||
|
||||
;; Inspired from UIX, Rum and Rumext
|
||||
(defn set-ref-val!
|
||||
[ref v]
|
||||
(oset! ref "current" v)
|
||||
v)
|
||||
[ref val]
|
||||
(oset! ref "current" val)
|
||||
val)
|
||||
|
||||
(defn set-native-props
|
||||
[^js ref ^js props]
|
||||
@@ -54,8 +54,8 @@
|
||||
#js [value set-value])))
|
||||
|
||||
(defn use-ref
|
||||
[v]
|
||||
(let [ref (react/useRef v)]
|
||||
[val]
|
||||
(let [ref (react/useRef val)]
|
||||
(reify
|
||||
cljs.core/IHash
|
||||
(-hash [_] (goog/getUid ref))
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
(ns quo2.components.avatars.channel-avatar
|
||||
(:require [quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn channel-avatar
|
||||
[{:keys [big? locked? emoji-background-color emoji]}]
|
||||
(let [lock-exists? locked?
|
||||
dark? (theme/dark?)]
|
||||
[rn/view
|
||||
{:style {:width (if big? 32 24)
|
||||
:height (if big? 32 24)
|
||||
:border-radius (if big? 32 24)
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color emoji-background-color}}
|
||||
[rn/view
|
||||
{:style {:display :flex
|
||||
:justify-content :center
|
||||
:align-items :center}}
|
||||
[text/text
|
||||
{:size (if big?
|
||||
:paragraph-1
|
||||
:label)} emoji]
|
||||
(when lock-exists?
|
||||
[rn/view
|
||||
{:style {:position :absolute
|
||||
:left (if big?
|
||||
14
|
||||
8)
|
||||
:top (if big?
|
||||
15
|
||||
8)
|
||||
:background-color (if dark?
|
||||
colors/neutral-90
|
||||
colors/white)
|
||||
:border-radius 15
|
||||
:padding 2}}
|
||||
[icons/icon
|
||||
(if locked?
|
||||
:main-icons/locked
|
||||
:main-icons/unlocked)
|
||||
{:color (if dark?
|
||||
colors/neutral-40
|
||||
colors/neutral-50)
|
||||
:container-style {:width 12
|
||||
:height 12}
|
||||
:size 12}]])]]))
|
||||
@@ -1,35 +0,0 @@
|
||||
(ns quo2.components.avatars.channel-avatar.component-spec
|
||||
(:require [quo2.components.avatars.channel-avatar.view :as component]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Channel Avatar"
|
||||
(h/test "default render"
|
||||
(h/render [component/view])
|
||||
(h/is-truthy (h/query-by-label-text :initials))
|
||||
(h/is-null (h/query-by-label-text :emoji))
|
||||
(h/is-null (h/query-by-label-text :lock)))
|
||||
|
||||
(h/test "with emoji, no lock set, large size"
|
||||
(let [emoji "🍓"]
|
||||
(h/render [component/view {:emoji emoji :size :size/l}])
|
||||
(h/is-null (h/query-by-label-text :initials))
|
||||
(h/is-truthy (h/query-by-text emoji))
|
||||
(h/is-null (h/query-by-label-text :lock))))
|
||||
|
||||
(h/test "locked"
|
||||
(h/render [component/view {:locked? true}])
|
||||
(h/is-truthy (h/query-by-label-text :lock)))
|
||||
|
||||
(h/test "unlocked"
|
||||
(h/render [component/view {:locked? false}])
|
||||
(h/is-truthy (h/query-by-label-text :lock)))
|
||||
|
||||
(h/test "no emoji, smaller size"
|
||||
(h/render [component/view {:full-name "Status Mobile"}])
|
||||
(h/is-truthy (h/query-by-text "S")))
|
||||
|
||||
(h/test "no emoji, large size"
|
||||
(h/render [component/view
|
||||
{:full-name "Status Mobile"
|
||||
:size :size/l}])
|
||||
(h/is-truthy (h/query-by-text "SM"))))
|
||||
@@ -1,28 +0,0 @@
|
||||
(ns quo2.components.avatars.channel-avatar.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def lock-icon-size 12)
|
||||
|
||||
(defn outer-container
|
||||
[{:keys [size color]}]
|
||||
(let [size (if (= size :size/l) 32 24)]
|
||||
{:width size
|
||||
:height size
|
||||
:border-radius size
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color (colors/theme-alpha color 0.1 0.1)}))
|
||||
|
||||
(defn lock-container
|
||||
[size]
|
||||
(let [distance (if (= size :size/l) 20 12)]
|
||||
{:position :absolute
|
||||
:left distance
|
||||
:top distance
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:border-radius (* 2 lock-icon-size)
|
||||
:padding 2}))
|
||||
|
||||
(def lock-icon
|
||||
{:width lock-icon-size
|
||||
:height lock-icon-size})
|
||||
@@ -1,60 +0,0 @@
|
||||
(ns quo2.components.avatars.channel-avatar.view
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.components.avatars.channel-avatar.style :as style]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
utils.string))
|
||||
|
||||
(defn- initials
|
||||
[full-name size color]
|
||||
(let [amount-initials (if (= size :size/l) 2 1)]
|
||||
[text/text
|
||||
{:accessibility-label :initials
|
||||
:size :paragraph-2
|
||||
:weight :semi-bold
|
||||
:style {:color color}}
|
||||
(utils.string/get-initials full-name amount-initials)]))
|
||||
|
||||
(defn- lock
|
||||
[locked? size]
|
||||
;; When `locked?` is nil, we must not display the unlocked icon.
|
||||
(when (boolean? locked?)
|
||||
[rn/view
|
||||
{:accessibility-label :lock
|
||||
:style (style/lock-container size)}
|
||||
[icons/icon (if locked? :i/locked :i/unlocked)
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40)
|
||||
:container-style style/lock-icon
|
||||
:size 12}]]))
|
||||
|
||||
(defn view
|
||||
"Options:
|
||||
|
||||
:size - keyword (default nil) - Container size, for the moment,
|
||||
only :size/l (meaning large) is supported.
|
||||
|
||||
:emoji - string (default nil)
|
||||
|
||||
:customization-color - color (default nil) If the component is used for a
|
||||
community channel, then the default color should be the community custom
|
||||
color.
|
||||
|
||||
:locked? - nil/bool (default nil) - When true/false display a locked/unlocked
|
||||
icon respectively. When nil does not show icon.
|
||||
|
||||
:full-name - string (default nil) - When :emoji is blank, this value will be
|
||||
used to extract the initials.
|
||||
"
|
||||
[{:keys [size emoji customization-color locked? full-name]}]
|
||||
[rn/view
|
||||
{:accessibility-label :channel-avatar
|
||||
:style (style/outer-container {:size size :color customization-color})}
|
||||
(if (string/blank? emoji)
|
||||
[initials full-name size customization-color]
|
||||
[text/text
|
||||
{:accessibility-label :emoji
|
||||
:size (if (= size :size/l) :paragraph-1 :label)}
|
||||
(string/trim emoji)])
|
||||
[lock locked? size]])
|
||||
@@ -41,7 +41,7 @@
|
||||
:border-radius dimensions}))
|
||||
|
||||
(defn initials-avatar
|
||||
[size draw-ring? customization-color theme]
|
||||
[size draw-ring? customization-color]
|
||||
(let [outer-dimensions (get-in sizes [size :outer])
|
||||
inner-dimensions (get-in sizes [size (if draw-ring? :inner :outer)])]
|
||||
{:position :absolute
|
||||
@@ -52,7 +52,7 @@
|
||||
:border-radius inner-dimensions
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:background-color (colors/custom-color-by-theme customization-color 50 60 nil nil theme)}))
|
||||
:background-color (colors/custom-color-by-theme customization-color 50 60)}))
|
||||
|
||||
(def initials-avatar-text
|
||||
{:color colors/white-opa-70})
|
||||
@@ -67,7 +67,7 @@
|
||||
:background-color background}))
|
||||
|
||||
(defn dot
|
||||
[size ring? theme]
|
||||
[size ring?]
|
||||
(let [dimensions (get-in sizes [size :status-indicator])
|
||||
border-width (get-in sizes [size :status-indicator-border])
|
||||
right (case size
|
||||
@@ -89,5 +89,5 @@
|
||||
:height dimensions
|
||||
:border-width border-width
|
||||
:border-radius dimensions
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-100 theme)
|
||||
:border-color (colors/theme-colors colors/white colors/neutral-100 theme)}))
|
||||
:background-color (colors/theme-colors colors/white colors/neutral-100)
|
||||
:border-color (colors/theme-colors colors/white colors/neutral-100)}))
|
||||
|
||||
@@ -1,32 +1,44 @@
|
||||
(ns quo2.components.avatars.user-avatar.view
|
||||
(:require [quo2.components.avatars.user-avatar.style :as style]
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.components.avatars.user-avatar.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
utils.string))
|
||||
[react-native.fast-image :as fast-image]))
|
||||
|
||||
(defn trim-whitespace [s] (string/join " " (string/split (string/trim s) #"\s+")))
|
||||
|
||||
(defn- extract-initials
|
||||
[full-name amount-initials]
|
||||
(let [upper-case-first-letter (comp string/upper-case first)
|
||||
names-list (string/split (trim-whitespace full-name) " ")]
|
||||
(if (= (first names-list) "")
|
||||
""
|
||||
(->> names-list
|
||||
(map upper-case-first-letter)
|
||||
(take amount-initials)
|
||||
(string/join)))))
|
||||
|
||||
(defn initials-avatar
|
||||
[{:keys [full-name size draw-ring? customization-color theme]}]
|
||||
[{:keys [full-name size draw-ring? customization-color]}]
|
||||
(let [font-size (get-in style/sizes [size :font-size])
|
||||
amount-initials (if (#{:xs :xxs :xxxs} size) 1 2)]
|
||||
[rn/view
|
||||
{:accessibility-label :initials-avatar
|
||||
:style (style/initials-avatar size draw-ring? customization-color theme)}
|
||||
:style (style/initials-avatar size draw-ring? customization-color)}
|
||||
[text/text
|
||||
{:style style/initials-avatar-text
|
||||
:size font-size
|
||||
:weight :semi-bold}
|
||||
(utils.string/get-initials full-name amount-initials)]]))
|
||||
(extract-initials full-name amount-initials)]]))
|
||||
|
||||
(def valid-ring-sizes #{:big :medium :small})
|
||||
|
||||
(defn- user-avatar-internal
|
||||
(defn user-avatar
|
||||
"If no `profile-picture` is given, draws the initials based on the `full-name` and
|
||||
uses `ring-background` to display the ring behind the initials when given. Otherwise,
|
||||
shows the `profile-picture` which already comes with the ring drawn."
|
||||
[{:keys [full-name status-indicator? online? size profile-picture ring-background
|
||||
customization-color static? muted? theme]
|
||||
customization-color static? muted?]
|
||||
:or {status-indicator? true
|
||||
online? true
|
||||
size :big
|
||||
@@ -50,14 +62,11 @@
|
||||
{:full-name full-name
|
||||
:size size
|
||||
:draw-ring? draw-ring?
|
||||
:customization-color customization-color
|
||||
:theme theme}])
|
||||
:customization-color customization-color}])
|
||||
(when status-indicator?
|
||||
[rn/view
|
||||
{:accessibility-label :status-indicator
|
||||
:style (style/dot size draw-ring? theme)}
|
||||
:style (style/dot size draw-ring?)}
|
||||
[rn/view
|
||||
{:accessibility-label :inner-status-indicator-dot
|
||||
:style (style/inner-dot size online?)}]])]))
|
||||
|
||||
(def user-avatar (quo.theme/with-theme user-avatar-internal))
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
(ns quo2.components.browser.browser-input.component-spec
|
||||
(:require [quo2.components.browser.browser-input.view :as browser-input]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Browser input"
|
||||
(h/test "Renders empty in default state"
|
||||
(h/render [browser-input/browser-input
|
||||
{:on-change-text (h/mock-fn)
|
||||
:value ""}])
|
||||
(h/is-truthy (h/get-by-label-text :browser-input)))
|
||||
|
||||
(h/test "On change text is fired"
|
||||
(let [on-change-text (h/mock-fn)]
|
||||
(h/render [browser-input/browser-input
|
||||
{:on-change-text on-change-text
|
||||
:value "mock text"}])
|
||||
(h/fire-event :change-text (h/get-by-label-text :browser-input) "mock-text-new")
|
||||
(h/was-called on-change-text)))
|
||||
|
||||
(h/describe "Input Label"
|
||||
(h/test "Doesn't render label text when input is focused"
|
||||
(h/render [browser-input/browser-input
|
||||
{:auto-focus true}])
|
||||
(h/is-null (h/query-by-label-text :browser-input-label)))
|
||||
|
||||
(h/test "Renders label text when input has a value and input is not focused"
|
||||
(h/render [browser-input/browser-input
|
||||
{:default-value "mock default"}])
|
||||
(h/is-truthy (h/query-by-label-text :browser-input-label)))
|
||||
|
||||
(h/test "Renders site favicon when specified"
|
||||
(h/render [browser-input/browser-input
|
||||
{:default-value "mock default" :favicon :i/verified}])
|
||||
(h/is-truthy (h/query-by-label-text :browser-input-favicon)))
|
||||
|
||||
(h/test "Renders lock icon when lock is enabled"
|
||||
(h/render [browser-input/browser-input
|
||||
{:default-value "mock default" :locked? true}])
|
||||
(h/is-truthy (h/query-by-label-text :browser-input-locked-icon))))
|
||||
|
||||
(h/describe "Clear button"
|
||||
(h/test "Doesn't render in default state"
|
||||
(h/render [browser-input/browser-input])
|
||||
(h/is-null (h/query-by-label-text :browser-input-clear-button)))
|
||||
|
||||
(h/test "Renders when there is a value"
|
||||
(h/render [browser-input/browser-input
|
||||
{:default-value "mock text"}])
|
||||
(h/is-truthy (h/query-by-label-text :browser-input-clear-button)))
|
||||
|
||||
(h/test "Is pressable"
|
||||
(let [on-clear (h/mock-fn)]
|
||||
(h/render [browser-input/browser-input
|
||||
{:default-value "mock text"
|
||||
:on-clear on-clear}])
|
||||
(h/is-truthy (h/query-by-label-text :browser-input-clear-button))
|
||||
(h/fire-event :press (h/query-by-label-text :browser-input-clear-button))
|
||||
(h/was-called on-clear)))))
|
||||
@@ -1,56 +0,0 @@
|
||||
(ns quo2.components.browser.browser-input.style
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(def clear-icon-container
|
||||
{:align-items :center
|
||||
:height 20
|
||||
:justify-content :center
|
||||
:margin-left 8
|
||||
:top 4
|
||||
:width 20})
|
||||
|
||||
(def favicon-icon-container
|
||||
{:margin-right 2})
|
||||
|
||||
(defn input
|
||||
[disabled?]
|
||||
(assoc (text/text-style {:size :paragraph-1
|
||||
:weight :regular})
|
||||
:flex 1
|
||||
:min-height 36
|
||||
:min-width 120
|
||||
:opacity (if disabled? 0.3 1)))
|
||||
|
||||
(def lock-icon-container
|
||||
{:margin-left 2})
|
||||
|
||||
(defn active-container
|
||||
[display?]
|
||||
{:align-items :center
|
||||
:flex-direction :row
|
||||
:justify-content :center
|
||||
:opacity (if display? 1 0)})
|
||||
|
||||
(def default-container
|
||||
{:align-items :center
|
||||
:bottom 0
|
||||
:flex-direction :row
|
||||
:left 0
|
||||
:padding-horizontal 20
|
||||
:position :absolute
|
||||
:right 0
|
||||
:top 0
|
||||
:z-index 10})
|
||||
|
||||
(defn text
|
||||
[]
|
||||
(assoc (text/text-style {:size :paragraph-1
|
||||
:weight :medium})
|
||||
:color
|
||||
(colors/theme-colors colors/neutral-100 colors/white)))
|
||||
|
||||
(def root-container
|
||||
{:height 60
|
||||
:padding-horizontal 20
|
||||
:padding-vertical 8})
|
||||
@@ -1,144 +0,0 @@
|
||||
(ns quo2.components.browser.browser-input.view
|
||||
(:require [quo2.components.icon :as icon]
|
||||
[quo2.components.browser.browser-input.style :as style]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo2.theme]
|
||||
[clojure.string :as string]
|
||||
[react-native.platform :as platform]))
|
||||
|
||||
(defn remove-http-https-www
|
||||
[value]
|
||||
(string/replace value #"(https?://(www\.)?|http://)" ""))
|
||||
|
||||
(defn clear-icon-color
|
||||
[blur? theme]
|
||||
(if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)))
|
||||
|
||||
(defn lock-icon-color
|
||||
[blur? theme]
|
||||
(if blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||
|
||||
(defn- clear-button
|
||||
[{:keys [on-press blur? theme]}]
|
||||
[rn/touchable-opacity
|
||||
{:accessibility-label :browser-input-clear-button
|
||||
:on-press on-press
|
||||
:style style/clear-icon-container}
|
||||
[icon/icon :i/clear
|
||||
{:color (clear-icon-color blur? theme)}]])
|
||||
|
||||
(defn lock-icon
|
||||
[{:keys [blur? theme]}]
|
||||
[rn/view
|
||||
[icon/icon :i/locked
|
||||
{:accessibility-label :browser-input-locked-icon
|
||||
:color (lock-icon-color blur? theme)
|
||||
:container-style style/lock-icon-container
|
||||
:size 16}]])
|
||||
|
||||
(defn cursor-color
|
||||
[customization-color theme]
|
||||
(colors/theme-colors (colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
theme))
|
||||
|
||||
(defn placeholder-color
|
||||
[state blur? theme]
|
||||
(cond
|
||||
(and blur? (= state :active))
|
||||
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
|
||||
|
||||
blur?
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
|
||||
|
||||
(= state :active)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
|
||||
:else
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
|
||||
|
||||
(def ^:private props-to-remove
|
||||
[:cursor-color :placeholder-text-color :editable :on-change-text :on-focus
|
||||
:on-blur :on-clear :value :disabled? :blur? :customization-color :theme])
|
||||
|
||||
(defn browser-input-internal
|
||||
[{:keys [default-value]
|
||||
:or {default-value ""}}]
|
||||
(let [state (reagent/atom :default)
|
||||
value (reagent/atom default-value)
|
||||
set-active #(reset! state :active)
|
||||
set-default #(reset! state :default)
|
||||
set-value #(reset! value %)
|
||||
ref (atom nil)
|
||||
clear-input (fn []
|
||||
(.clear ^js @ref)
|
||||
(reset! value ""))
|
||||
focus-input (fn []
|
||||
(set-active)
|
||||
(.focus ^js @ref))]
|
||||
(fn [{:keys [disabled? blur? on-change-text customization-color
|
||||
on-clear on-focus on-blur theme get-ref locked?
|
||||
favicon favicon-color favicon-size]
|
||||
:as props}]
|
||||
(let [clean-props (apply dissoc props props-to-remove)]
|
||||
[rn/view {:style style/root-container}
|
||||
(when (and (seq @value) (= @state :default))
|
||||
[rn/touchable-opacity
|
||||
{:style style/default-container
|
||||
:on-press focus-input}
|
||||
(when favicon
|
||||
[icon/icon favicon
|
||||
{:accessibility-label :browser-input-favicon
|
||||
:color favicon-color
|
||||
:container-style style/favicon-icon-container
|
||||
:size favicon-size}])
|
||||
[rn/text
|
||||
{:accessibility-label :browser-input-label
|
||||
:style (style/text)} (remove-http-https-www @value)]
|
||||
(when locked?
|
||||
[lock-icon
|
||||
{:blur? blur?
|
||||
:theme theme}])])
|
||||
[rn/view {:style (style/active-container (or (empty? @value) (= @state :active)))}
|
||||
[rn/text-input
|
||||
(merge
|
||||
clean-props
|
||||
{:accessibility-label :browser-input
|
||||
:auto-capitalize :none
|
||||
:auto-correct false
|
||||
:cursor-color (cursor-color customization-color theme)
|
||||
:editable (not disabled?)
|
||||
:keyboard-appearance (colors/theme-colors :light :dark theme)
|
||||
:keyboard-type :web-search
|
||||
:on-blur (fn []
|
||||
(set-default)
|
||||
(when on-blur (on-blur)))
|
||||
:on-change-text (fn [new-text]
|
||||
(set-value new-text)
|
||||
(when on-change-text (on-change-text new-text)))
|
||||
:on-focus (fn []
|
||||
(set-active)
|
||||
(when on-focus (on-focus)))
|
||||
:placeholder-text-color (placeholder-color @state blur? theme)
|
||||
:ref (fn [r]
|
||||
(reset! ref r)
|
||||
(when get-ref (get-ref r)))
|
||||
:selection-color (when platform/ios?
|
||||
(cursor-color customization-color theme))
|
||||
:select-text-on-focus true
|
||||
:style (style/input disabled?)})]
|
||||
(when (seq @value)
|
||||
[clear-button
|
||||
{:blur? blur?
|
||||
:on-press (fn []
|
||||
(clear-input)
|
||||
(when on-clear (on-clear)))
|
||||
:theme theme}])]]))))
|
||||
|
||||
(def browser-input (quo2.theme/with-theme browser-input-internal))
|
||||
@@ -0,0 +1,28 @@
|
||||
(ns quo2.components.buttons.--tests--.buttons-component-spec
|
||||
(:require ["@testing-library/react-native" :as rtl]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn render-button
|
||||
([options label]
|
||||
(rtl/render (reagent/as-element [button/button options label]))))
|
||||
|
||||
(js/global.test "default render of button component"
|
||||
(fn []
|
||||
(render-button {:accessibility-label "test-button"} "")
|
||||
(-> (js/expect (rtl/screen.getByLabelText "test-button"))
|
||||
(.toBeTruthy))))
|
||||
|
||||
(js/global.test "button renders with a label"
|
||||
(fn []
|
||||
(render-button {} "test-label")
|
||||
(-> (js/expect (rtl/screen.getByText "test-label"))
|
||||
(.toBeTruthy))))
|
||||
|
||||
(js/global.test "button on-press works"
|
||||
(let [event (js/jest.fn)]
|
||||
(fn []
|
||||
(render-button {:on-press event} "test-label")
|
||||
(rtl/fireEvent.press (rtl/screen.getByText "test-label"))
|
||||
(-> (js/expect event)
|
||||
(.toHaveBeenCalledTimes 1)))))
|
||||
+139
-44
@@ -1,46 +1,12 @@
|
||||
(ns quo2.components.dropdowns.old-button-style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def blur-view
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0})
|
||||
|
||||
(defn before-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
icon-size]}]
|
||||
(merge
|
||||
{:margin-left (or (get override-margins :left)
|
||||
(if (= size 40) 12 8))
|
||||
:margin-right (or (get override-margins :right) 4)
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(when icon-container-size
|
||||
{:width icon-container-size
|
||||
:height icon-container-size})
|
||||
(when icon-background-color
|
||||
{:background-color icon-background-color})
|
||||
(when icon-container-rounded?
|
||||
{:border-radius (/ (or icon-container-size icon-size) 2)})))
|
||||
|
||||
(defn after-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
icon-size]}]
|
||||
(merge
|
||||
{:margin-left (or (get override-margins :left) 4)
|
||||
:margin-right (or (get override-margins :right)
|
||||
(if (= size 40) 12 8))
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(when icon-container-size
|
||||
{:width icon-container-size
|
||||
:height icon-container-size})
|
||||
(when icon-background-color
|
||||
{:background-color icon-background-color})
|
||||
(when icon-container-rounded?
|
||||
{:border-radius (/ (or icon-container-size icon-size) 2)})))
|
||||
(ns quo2.components.buttons.button
|
||||
(:require [quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.blur :as blur]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.buttons.style :as style]))
|
||||
|
||||
(defn themes
|
||||
[customization-color]
|
||||
@@ -213,7 +179,7 @@
|
||||
24 8))})
|
||||
|
||||
(defn style-container
|
||||
[{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
|
||||
[type size disabled background-color border-color icon above width before after blur-active?]
|
||||
(merge {:height size
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
@@ -262,3 +228,132 @@
|
||||
:border-width 1})
|
||||
(when disabled
|
||||
{:opacity 0.3})))
|
||||
|
||||
(defn- button-internal
|
||||
"with label
|
||||
[button opts \"label\"]
|
||||
opts
|
||||
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
|
||||
:danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
|
||||
:size 40 [default] /32/24
|
||||
:icon true/false
|
||||
:community-color '#FFFFFF'
|
||||
:community-text-color '#000000'
|
||||
:before :icon-keyword
|
||||
:after :icon-keyword}
|
||||
|
||||
only icon
|
||||
[button {:icon true} :i/close-circle]"
|
||||
[_ _]
|
||||
(let [pressed-in (reagent/atom false)]
|
||||
(fn
|
||||
[{:keys [on-press disabled type size before after above icon-secondary-no-color
|
||||
width customization-color theme override-background-color pressed
|
||||
on-long-press accessibility-label icon icon-no-color style inner-style test-ID
|
||||
blur-active? override-before-margins override-after-margins icon-size icon-container-size
|
||||
icon-container-rounded?]
|
||||
:or {type :primary
|
||||
size 40
|
||||
customization-color :primary
|
||||
blur-active? true}}
|
||||
children]
|
||||
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
|
||||
blur-overlay-color icon-background-color]}
|
||||
(get-in (themes customization-color)
|
||||
[theme type])
|
||||
state (cond disabled :disabled
|
||||
(or @pressed-in pressed) :pressed
|
||||
:else :default)
|
||||
blur-state (if blur-active? :blurred :default)
|
||||
icon-size (or icon-size (when (= 24 size) 12))
|
||||
icon-secondary-color (or icon-secondary-color icon-color)]
|
||||
[rn/touchable-without-feedback
|
||||
(merge {:test-ID test-ID
|
||||
:disabled disabled
|
||||
:accessibility-label accessibility-label
|
||||
:on-press-in #(reset! pressed-in true)
|
||||
:on-press-out #(reset! pressed-in nil)}
|
||||
(when on-press
|
||||
{:on-press on-press})
|
||||
(when on-long-press
|
||||
{:on-long-press on-long-press}))
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(shape-style-container type icon size)
|
||||
{:width width}
|
||||
style)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(style-container
|
||||
type
|
||||
size
|
||||
disabled
|
||||
(or override-background-color (get background-color state))
|
||||
(get border-color state)
|
||||
icon
|
||||
above
|
||||
width
|
||||
before
|
||||
after
|
||||
blur-active?)
|
||||
(when (= state :pressed) {:opacity 0.9})
|
||||
inner-style)}
|
||||
(when (and (= type :blurred)
|
||||
blur-active?)
|
||||
[blur/view
|
||||
{:blur-radius 20
|
||||
:blur-type blur-type
|
||||
:overlay-color blur-overlay-color
|
||||
:style style/blur-view}])
|
||||
(when above
|
||||
[rn/view
|
||||
[quo2.icons/icon above
|
||||
{:container-style {:margin-bottom 2}
|
||||
:color icon-secondary-color
|
||||
:size icon-size}]])
|
||||
(when before
|
||||
[rn/view
|
||||
{:style (style/before-icon-style
|
||||
{:override-margins override-before-margins
|
||||
:size size
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color (get icon-background-color blur-state)
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon before
|
||||
{:color icon-secondary-color
|
||||
:size icon-size}]])
|
||||
[rn/view
|
||||
(cond
|
||||
(or icon icon-no-color)
|
||||
[quo2.icons/icon children
|
||||
{:color icon-color
|
||||
:no-color icon-no-color
|
||||
:size icon-size}]
|
||||
|
||||
(string? children)
|
||||
[text/text
|
||||
{:size (when (#{56 24} size) :paragraph-2)
|
||||
:weight :medium
|
||||
:number-of-lines 1
|
||||
:style {:color label-color}}
|
||||
|
||||
children]
|
||||
|
||||
(vector? children)
|
||||
children)]
|
||||
(when after
|
||||
[rn/view
|
||||
{:style (style/after-icon-style
|
||||
{:override-margins override-after-margins
|
||||
:size size
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color (get icon-background-color blur-state)
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon after
|
||||
{:no-color icon-secondary-no-color
|
||||
:color icon-secondary-color
|
||||
:size icon-size}]])]]]))))
|
||||
|
||||
(def button (theme/with-theme button-internal))
|
||||
@@ -1,18 +0,0 @@
|
||||
(ns quo2.components.buttons.button.component-spec
|
||||
(:require [quo2.components.buttons.button.view :as button]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "button tests"
|
||||
(h/test "default render of button component"
|
||||
(h/render [button/button {:accessibility-label "test-button"} ""])
|
||||
(h/is-truthy (h/get-by-label-text "test-button")))
|
||||
|
||||
(h/test "button renders with a label"
|
||||
(h/render [button/button {} "test-label"])
|
||||
(h/is-truthy (h/get-by-text "test-label")))
|
||||
|
||||
(h/test "button on-press works"
|
||||
(let [event (h/mock-fn)]
|
||||
(h/render [button/button {:on-press event} "test-label"])
|
||||
(h/fire-event :press (h/get-by-text "test-label"))
|
||||
(h/was-called event))))
|
||||
@@ -1,103 +0,0 @@
|
||||
(ns quo2.components.buttons.button.properties
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn custom-color-type
|
||||
[customization-color icon-only?]
|
||||
{:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color (colors/custom-color customization-color 50)
|
||||
:border-radius (when icon-only? 24)})
|
||||
|
||||
(defn grey-photo
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-background-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
:blur-overlay-color (if pressed?
|
||||
(colors/theme-colors colors/white-opa-50
|
||||
colors/neutral-80-opa-50
|
||||
theme)
|
||||
(colors/theme-colors colors/white-opa-40
|
||||
colors/neutral-80-opa-40
|
||||
theme))
|
||||
:blur-type (if (= theme :light) :light :dark)})
|
||||
|
||||
(defn grey-blur
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme))})
|
||||
|
||||
(defn outline-blur
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme))})
|
||||
|
||||
(defn grey
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||
|
||||
(defn dark-grey
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-20 colors/neutral-90 theme))})
|
||||
|
||||
(defn outline
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:border-color (if pressed?
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-70 theme))})
|
||||
|
||||
(defn ghost
|
||||
[theme pressed?]
|
||||
{:icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:icon-secondary-color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:label-color (colors/theme-colors colors/neutral-100 colors/white theme)
|
||||
:background-color (when pressed?
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
|
||||
|
||||
(defn black
|
||||
[pressed?]
|
||||
{:icon-color colors/white
|
||||
:label-color colors/white
|
||||
:background-color (if pressed? colors/neutral-80 colors/neutral-95)})
|
||||
|
||||
(defn get-values
|
||||
[{:keys [customization-color theme type background pressed? icon-only?]}]
|
||||
(cond
|
||||
(= type :primary) (custom-color-type customization-color icon-only?)
|
||||
(= type :positive) (custom-color-type customization-color icon-only?)
|
||||
(= type :danger) (custom-color-type customization-color icon-only?)
|
||||
;; TODO Remove type blurred - https://github.com/status-im/status-mobile/issues/16535
|
||||
(and (= :photo background) (= type :grey)) (grey-photo theme pressed?)
|
||||
;; TODO Remove type blur-bg - https://github.com/status-im/status-mobile/issues/16535
|
||||
(or (= type :blur-bg)
|
||||
(and (= :blur background) (= type :grey))) (grey-blur theme pressed?)
|
||||
(and (= :blur background) (= type :outline)) (outline-blur theme pressed?)
|
||||
(= type :grey) (grey theme pressed?)
|
||||
(= type :dark-grey) (dark-grey theme pressed?)
|
||||
(= type :outline) (outline theme pressed?)
|
||||
(= type :ghost) (ghost theme pressed?)
|
||||
;; TODO: remove type shell - https://github.com/status-im/status-mobile/issues/16535
|
||||
(or (= type :shell) (= type :black)) (black pressed?)))
|
||||
@@ -1,106 +0,0 @@
|
||||
(ns quo2.components.buttons.button.style)
|
||||
|
||||
(def blur-view
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0})
|
||||
|
||||
(defn icon-style
|
||||
[{:keys [icon-container-size icon-background-color icon-container-rounded?
|
||||
icon-size margin-left margin-right]}]
|
||||
(cond-> (merge {:margin-left margin-left
|
||||
:margin-right margin-right
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
icon-container-size
|
||||
(assoc :width icon-container-size :height icon-container-size)
|
||||
icon-background-color
|
||||
(assoc :background-color icon-background-color)
|
||||
icon-container-rounded?
|
||||
(assoc :border-radius (/ (or icon-container-size icon-size) 2))))
|
||||
|
||||
(defn icon-left-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
icon-size]}]
|
||||
(icon-style
|
||||
{:margin-left (or (get override-margins :left)
|
||||
(if (= size 40) 12 8))
|
||||
:margin-right (or (get override-margins :right) 4)
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size}))
|
||||
|
||||
(defn icon-right-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
icon-size]}]
|
||||
(icon-style {:margin-left (or (get override-margins :left) 4)
|
||||
:margin-right (or (get override-margins :right)
|
||||
(if (= size 40) 12 8))
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size}))
|
||||
|
||||
(defn shape-style-container
|
||||
[size border-radius]
|
||||
{:height size
|
||||
:border-radius (if border-radius
|
||||
border-radius
|
||||
(case size
|
||||
56 12
|
||||
40 12
|
||||
32 10
|
||||
8))})
|
||||
|
||||
(defn style-container
|
||||
[{:keys [size disabled border-radius background-color border-color icon-only? icon-above width
|
||||
icon-left icon-right]}]
|
||||
(merge {:height size
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:flex-direction (if icon-above :column :row)
|
||||
:padding-horizontal (when-not (or icon-only? icon-left icon-right)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
:padding-left (when-not (or icon-only? icon-left)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
:padding-right (when-not (or icon-only? icon-right)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
:padding-top (when-not (or icon-only? icon-left icon-right)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
3))
|
||||
:padding-bottom (when-not (or icon-only? icon-left icon-right)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
4))
|
||||
:overflow :hidden
|
||||
:background-color background-color}
|
||||
(shape-style-container size border-radius)
|
||||
(when width
|
||||
{:width width})
|
||||
(when icon-only?
|
||||
{:width size})
|
||||
(when border-color
|
||||
{:border-color border-color
|
||||
:border-width 1})
|
||||
(when disabled
|
||||
{:opacity 0.3})))
|
||||
@@ -1,139 +0,0 @@
|
||||
(ns quo2.components.buttons.button.view
|
||||
(:require [quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.blur :as blur]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.buttons.button.style :as style]
|
||||
[quo2.components.buttons.button.properties :as button-properties]
|
||||
[quo2.foundations.customization-colors :as customization-colors]))
|
||||
|
||||
(defn- button-internal
|
||||
"with label
|
||||
[button opts \"label\"]
|
||||
opts
|
||||
{on-press callback
|
||||
on-long-press callback
|
||||
disabled boolean
|
||||
:type :primary/:positive:grey/:dark-grey/:outline/:ghost/
|
||||
:danger/:black (TODO remove :photo-bg/:blur-bg/:blur-bg-outline/:shell/:community)
|
||||
background :photo/:blur or nil
|
||||
:size 40 [default] /32/24/56
|
||||
:icon true/false
|
||||
:above :icon-keyword
|
||||
:before :icon-keyword
|
||||
:after :icon-keyword}
|
||||
:customization-color keyword or hexstring
|
||||
:theme :light/:dark
|
||||
only icon
|
||||
[button {:icon true} :i/close-circle]"
|
||||
[_ _]
|
||||
(let [pressed? (reagent/atom false)]
|
||||
(fn
|
||||
[{:keys [on-press on-long-press disabled type background size before after above
|
||||
width customization-color theme override-background-color
|
||||
accessibility-label icon style inner-style]
|
||||
:or {type :primary
|
||||
size 40
|
||||
customization-color (cond (= type :primary) :blue
|
||||
(= type :positive) :success
|
||||
(= type :danger) :danger
|
||||
:else nil)}}
|
||||
children]
|
||||
(let [icon-only? icon ;; TODO Update external api to icon-only? -
|
||||
;; https://github.com/status-im/status-mobile/issues/16535
|
||||
container-style style ;; TODO Update external api to container-style and remove prop width
|
||||
icon-left before ;; TODO Update external api to icon-left
|
||||
icon-right after ;; TODO Update external api to icon-right
|
||||
icon-above above ;; TODO Update external api to icon-above
|
||||
{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
|
||||
blur-overlay-color icon-background-color border-radius]}
|
||||
(button-properties/get-values {:customization-color customization-color
|
||||
:background background
|
||||
:type type
|
||||
:theme theme
|
||||
:pressed? @pressed?
|
||||
:icon-only? icon-only?})
|
||||
icon-size (when (= 24 size) 12)
|
||||
icon-secondary-color (or icon-secondary-color icon-color)]
|
||||
[rn/touchable-without-feedback
|
||||
{:disabled disabled
|
||||
:accessibility-label accessibility-label
|
||||
:on-press-in #(reset! pressed? true)
|
||||
:on-press-out #(reset! pressed? nil)
|
||||
:on-press on-press
|
||||
:on-long-press on-long-press}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(style/shape-style-container size border-radius)
|
||||
{:width width}
|
||||
container-style)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(style/style-container {:size size
|
||||
:disabled disabled
|
||||
:border-radius border-radius
|
||||
:background-color
|
||||
(or override-background-color background-color)
|
||||
:border-color border-color
|
||||
:icon-only? icon-only?
|
||||
:icon-above icon-above
|
||||
:width width
|
||||
:icon-left icon-left
|
||||
:icon-right icon-right})
|
||||
inner-style)}
|
||||
(when customization-color
|
||||
[customization-colors/overlay
|
||||
{:customization-color customization-color
|
||||
:theme theme
|
||||
:pressed? @pressed?}])
|
||||
(when (= background :photo)
|
||||
[blur/view
|
||||
{:blur-radius 20
|
||||
:blur-type blur-type
|
||||
:overlay-color blur-overlay-color
|
||||
:style style/blur-view}])
|
||||
(when icon-above
|
||||
[rn/view
|
||||
[quo2.icons/icon icon-above
|
||||
{:container-style {:margin-bottom 2}
|
||||
:color icon-secondary-color
|
||||
:size icon-size}]])
|
||||
(when icon-left
|
||||
[rn/view
|
||||
{:style (style/icon-left-icon-style
|
||||
{:size size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon icon-left
|
||||
{:color icon-secondary-color
|
||||
:size icon-size}]])
|
||||
[rn/view
|
||||
(cond
|
||||
icon-only?
|
||||
[quo2.icons/icon children
|
||||
{:color icon-color
|
||||
:size icon-size}]
|
||||
|
||||
(string? children)
|
||||
[text/text
|
||||
{:size (when (#{56 24} size) :paragraph-2)
|
||||
:weight :medium
|
||||
:number-of-lines 1
|
||||
:style {:color label-color}}
|
||||
children]
|
||||
|
||||
(vector? children)
|
||||
children)]
|
||||
(when icon-right
|
||||
[rn/view
|
||||
{:style (style/icon-right-icon-style
|
||||
{:size size
|
||||
:icon-background-color icon-background-color
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon icon-right
|
||||
{:color icon-secondary-color
|
||||
:size icon-size}]])]]]))))
|
||||
|
||||
(def button (theme/with-theme button-internal))
|
||||
@@ -62,7 +62,7 @@
|
||||
:customization-color customize jump-to and mention button color}"
|
||||
[_]
|
||||
(let [pressed? (reagent/atom false)]
|
||||
(fn [{:keys [type label on-press customization-color style] :as args}]
|
||||
(fn [{:keys [type label on-press count customization-color style]}]
|
||||
[rn/touchable-opacity
|
||||
{:on-press-in #(reset! pressed? true)
|
||||
:on-press-out #(reset! pressed? false)
|
||||
@@ -102,6 +102,6 @@
|
||||
(case type
|
||||
:jump-to label
|
||||
:search-with-label label
|
||||
(:mention :notification-down :notification-up) (str (:count args)))])
|
||||
(:mention :notification-down :notification-up) (str count))])
|
||||
(when (#{:jump-to :notification-down :notification-up} type)
|
||||
[icon-view type])]])))
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
[quo2.theme :as theme]
|
||||
[react-native.linear-gradient :as linear-gradient]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.buttons.button.view :as button]))
|
||||
[quo2.components.buttons.button :as button]))
|
||||
|
||||
(def ^:private gradients
|
||||
{:light [(colors/alpha colors/neutral-40 0.05) (colors/alpha colors/neutral-40 0)]
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
(ns quo2.components.buttons.style)
|
||||
|
||||
(def blur-view
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0})
|
||||
|
||||
(defn before-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
icon-size]}]
|
||||
(merge
|
||||
{:margin-left (or (get override-margins :left)
|
||||
(if (= size 40) 12 8))
|
||||
:margin-right (or (get override-margins :right) 4)
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(when icon-container-size
|
||||
{:width icon-container-size
|
||||
:height icon-container-size})
|
||||
(when icon-background-color
|
||||
{:background-color icon-background-color})
|
||||
(when icon-container-rounded?
|
||||
{:border-radius (/ (or icon-container-size icon-size) 2)})))
|
||||
|
||||
(defn after-icon-style
|
||||
[{:keys [override-margins size icon-container-size icon-background-color icon-container-rounded?
|
||||
icon-size]}]
|
||||
(merge
|
||||
{:margin-left (or (get override-margins :left) 4)
|
||||
:margin-right (or (get override-margins :right)
|
||||
(if (= size 40) 12 8))
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(when icon-container-size
|
||||
{:width icon-container-size
|
||||
:height icon-container-size})
|
||||
(when icon-background-color
|
||||
{:background-color icon-background-color})
|
||||
(when icon-container-rounded?
|
||||
{:border-radius (/ (or icon-container-size icon-size) 2)})))
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.code.snippet
|
||||
(:require [cljs-bean.core :as bean]
|
||||
[clojure.string :as string]
|
||||
[quo2.components.buttons.button.view :as button]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.code.code.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[react-native.core :as rn]
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
[quo2.components.community.style :as style]
|
||||
[quo2.components.counter.counter :as counter]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.community.icon :as community-icon]
|
||||
@@ -22,8 +21,8 @@
|
||||
:resize-mode :center
|
||||
:size 20
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)}]
|
||||
colors/neutral-40
|
||||
colors/neutral-50)}]
|
||||
(pos? unread-mentions-count)
|
||||
[counter/counter {:type :default} unread-mentions-count]
|
||||
|
||||
@@ -35,7 +34,7 @@
|
||||
{:keys [name
|
||||
locked?
|
||||
status
|
||||
muted
|
||||
muted?
|
||||
unread-messages?
|
||||
unread-mentions-count
|
||||
community-icon
|
||||
@@ -60,7 +59,7 @@
|
||||
:accessibility-label :community-name-text
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail
|
||||
:style {:color (when muted
|
||||
:style {:color (when muted?
|
||||
(colors/theme-colors
|
||||
colors/neutral-40
|
||||
colors/neutral-60))}}
|
||||
@@ -72,15 +71,14 @@
|
||||
{:locked? locked?
|
||||
:tokens tokens}]
|
||||
[notification-view
|
||||
{:muted? muted
|
||||
{:muted? muted?
|
||||
:unread-mentions-count unread-mentions-count
|
||||
:unread-messages? unread-messages?}])]]]])
|
||||
|
||||
(defn communities-membership-list-item
|
||||
[props
|
||||
bottom-sheet?
|
||||
{:keys [name
|
||||
muted
|
||||
muted?
|
||||
unviewed-messages-count
|
||||
unviewed-mentions-count
|
||||
status
|
||||
@@ -107,22 +105,17 @@
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail
|
||||
:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:style (when muted
|
||||
{:color (if (theme/dark?)
|
||||
colors/neutral-60
|
||||
colors/neutral-40)})}
|
||||
:size :paragraph-1}
|
||||
name]]
|
||||
|
||||
[rn/view
|
||||
{:justify-content :center
|
||||
:margin-right (when bottom-sheet?
|
||||
16)}
|
||||
:margin-right 16}
|
||||
(if (= status :gated)
|
||||
[community-view/permission-tag-container
|
||||
{:locked? locked?
|
||||
:tokens tokens}]
|
||||
[notification-view
|
||||
{:muted? muted
|
||||
{:muted? muted?
|
||||
:unread-mentions-count unviewed-mentions-count
|
||||
:unread-messages? (pos? unviewed-messages-count)}])]]])
|
||||
|
||||
@@ -5,17 +5,13 @@
|
||||
[quo2.components.tags.permission-tag :as permission]
|
||||
[quo2.components.tags.tag :as tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.gesture :as gesture]
|
||||
utils.money))
|
||||
[quo.gesture-handler :as gesture-handler] ;;TODO move to quo2
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn community-stats
|
||||
[{:keys [icon members-count icon-color accessibility-label]}]
|
||||
[rn/view
|
||||
{:accessibility-label accessibility-label
|
||||
:style (style/stats-count-container)}
|
||||
[rn/view {:margin-right 2}
|
||||
[{:keys [icon members-count icon-color]}]
|
||||
[rn/view (style/stats-count-container)
|
||||
[rn/view {:margin-right 4}
|
||||
[icons/icon icon
|
||||
{:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
@@ -24,32 +20,29 @@
|
||||
:color icon-color}]]
|
||||
[text/text
|
||||
{:weight :regular
|
||||
:size :paragraph-2}
|
||||
:size :paragraph-1}
|
||||
members-count]])
|
||||
|
||||
(defn community-stats-column
|
||||
[{:keys [type theme blur? members-count active-count]}]
|
||||
(let [icon-color (if (and (= :dark theme) blur?)
|
||||
colors/white-opa-40
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))]
|
||||
[{:keys [type]}]
|
||||
(let [icon-color (colors/theme-colors colors/neutral-50 colors/neutral-40)]
|
||||
[rn/view
|
||||
(if (= type :card-view)
|
||||
(style/card-stats-container)
|
||||
(style/list-stats-container))
|
||||
[community-stats
|
||||
{:accessibility-label :stats-members-count
|
||||
:icon :i/group
|
||||
:members-count (utils.money/format-amount members-count)
|
||||
:icon-color icon-color}]
|
||||
{:icon :i/group
|
||||
:members-count "629.2K" ;;TODO here should be formatted value, use money/format-members from
|
||||
;;outside this component
|
||||
:icon-color icon-color}]
|
||||
[community-stats
|
||||
{:accessibility-label :stats-active-count
|
||||
:icon :i/active-members
|
||||
:members-count (utils.money/format-amount active-count)
|
||||
:icon-color icon-color}]]))
|
||||
{:icon :i/lightning
|
||||
:members-count "112.1K"
|
||||
:icon-color icon-color}]]))
|
||||
|
||||
(defn community-tags
|
||||
[{:keys [tags container-style last-item-style]}]
|
||||
[gesture/scroll-view
|
||||
[gesture-handler/scroll-view
|
||||
{:shows-horizontal-scroll-indicator false
|
||||
:horizontal true
|
||||
:style container-style}
|
||||
@@ -91,16 +84,13 @@
|
||||
:style {:margin-top (if (= size :large) 8 2)}}
|
||||
description])])
|
||||
|
||||
(defn- permission-tag-container-internal
|
||||
[{:keys [locked? blur? tokens on-press theme]}]
|
||||
(defn permission-tag-container
|
||||
[{:keys [locked? tokens on-press]}]
|
||||
[permission/tag
|
||||
{:accessibility-label :permission-tag
|
||||
:background-color (if (and (= :dark theme) blur?)
|
||||
colors/white-opa-10
|
||||
(colors/theme-colors colors/neutral-10 colors/neutral-80 theme))
|
||||
:locked? locked?
|
||||
:tokens tokens
|
||||
:size 24
|
||||
:on-press on-press}])
|
||||
|
||||
(def permission-tag-container (theme/with-theme permission-tag-container-internal))
|
||||
{:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)
|
||||
:locked? locked?
|
||||
:tokens tokens
|
||||
:size 24
|
||||
:on-press on-press}])
|
||||
|
||||
@@ -12,11 +12,11 @@
|
||||
{:style (style/token-row padding?)}
|
||||
(doall
|
||||
(map-indexed (fn [token-index token]
|
||||
(let [{:keys [img-src amount sufficient? purchasable? loading?]} token]
|
||||
(let [{:keys [img-src symbol amount sufficient? purchasable? loading?]} token]
|
||||
^{:key token-index}
|
||||
[rn/view {:style style/token-tag-spacing}
|
||||
[token-tag/token-tag
|
||||
{:symbol (:symbol token)
|
||||
{:symbol symbol
|
||||
:value amount
|
||||
:size 24
|
||||
:sufficient? sufficient?
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
:outline colors/neutral-70}})
|
||||
|
||||
(defn get-color
|
||||
[k]
|
||||
(get-in themes [(theme/get-theme) k]))
|
||||
[key]
|
||||
(get-in themes [(theme/get-theme) key]))
|
||||
|
||||
(defn counter
|
||||
[{:keys [type override-text-color override-bg-color style accessibility-label max-value]
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.dividers.date
|
||||
(:require [quo2.components.markdown.text :as text]
|
||||
[quo2.components.common.separator.view :as separator]
|
||||
[quo2.components.separator :as separator]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn divider
|
||||
[theme]
|
||||
[]
|
||||
{:border-top-width 1
|
||||
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90 theme)
|
||||
:border-top-color (colors/theme-colors colors/neutral-10 colors/neutral-90)
|
||||
:margin-top 8
|
||||
:margin-bottom 7
|
||||
:align-items :center
|
||||
@@ -45,6 +45,6 @@
|
||||
:width 20})
|
||||
|
||||
(defn right-text
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
[override-theme]
|
||||
{:color (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
|
||||
:margin-right 12})
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
(ns quo2.components.drawers.action-drawers.view
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.drawers.action-drawers.style :as style]
|
||||
[quo2.components.icon :as icon]
|
||||
(:require [quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo.theme]))
|
||||
[react-native.core :as rn]
|
||||
[quo2.components.drawers.action-drawers.style :as style]))
|
||||
|
||||
(defn- get-icon-color
|
||||
[danger? theme]
|
||||
[danger? override-theme]
|
||||
(if danger?
|
||||
(colors/theme-colors colors/danger-50 colors/danger-60 theme)
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
|
||||
colors/danger-60
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)))
|
||||
|
||||
(defn- divider
|
||||
[theme]
|
||||
[]
|
||||
[rn/view
|
||||
{:style (style/divider theme)
|
||||
{:style (style/divider)
|
||||
:accessible true
|
||||
:accessibility-label :divider}])
|
||||
|
||||
@@ -25,7 +24,7 @@
|
||||
[rn/view (dissoc props :on-press) child]
|
||||
[rn/touchable-highlight props child]))
|
||||
|
||||
(defn- action-internal
|
||||
(defn- action
|
||||
[{:keys [icon
|
||||
label
|
||||
sub-label
|
||||
@@ -35,66 +34,65 @@
|
||||
disabled?
|
||||
on-press
|
||||
add-divider?
|
||||
theme
|
||||
override-theme
|
||||
accessibility-label
|
||||
icon-color]}]
|
||||
[:<>
|
||||
(when add-divider?
|
||||
[divider theme])
|
||||
[maybe-pressable disabled?
|
||||
{:accessibility-label accessibility-label
|
||||
:style (style/container sub-label disabled?)
|
||||
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 theme)
|
||||
:on-press on-press}
|
||||
[rn/view
|
||||
{:style (style/row-container sub-label)}
|
||||
[rn/view
|
||||
{:accessibility-label :left-icon-for-action
|
||||
:accessible true
|
||||
:style style/left-icon}
|
||||
[icon/icon icon
|
||||
{:color (or icon-color (get-icon-color danger? theme))
|
||||
:size 20}]]
|
||||
[rn/view
|
||||
{:style style/text-container}
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
:weight :medium
|
||||
:style {:color
|
||||
(cond
|
||||
danger? (colors/theme-colors colors/danger-50 colors/danger-60 theme)
|
||||
:else (colors/theme-colors colors/neutral-100 colors/white theme))}}
|
||||
label]
|
||||
(when sub-label
|
||||
icon-color]
|
||||
:as action-props}]
|
||||
(when action-props
|
||||
[:<> {:key label}
|
||||
(when add-divider?
|
||||
[divider])
|
||||
[maybe-pressable disabled?
|
||||
{:accessibility-label accessibility-label
|
||||
:style (style/container sub-label disabled?)
|
||||
:underlay-color (colors/theme-colors colors/neutral-5 colors/neutral-90 override-theme)
|
||||
:on-press on-press}
|
||||
[rn/view
|
||||
{:style (style/row-container sub-label)}
|
||||
[rn/view
|
||||
{:accessibility-label :left-icon-for-action
|
||||
:accessible true
|
||||
:style style/left-icon}
|
||||
[icon/icon icon
|
||||
{:color (or icon-color (get-icon-color danger? override-theme))
|
||||
:size 20}]]
|
||||
[rn/view
|
||||
{:style style/text-container}
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:style {:color
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}}
|
||||
sub-label])]
|
||||
(when (or right-text right-icon)
|
||||
[rn/view {:style style/right-side-container}
|
||||
(when right-text
|
||||
{:size :paragraph-1
|
||||
:weight :medium
|
||||
:style {:color
|
||||
(cond
|
||||
danger? (colors/theme-colors colors/danger-50 colors/danger-60 override-theme)
|
||||
:else (colors/theme-colors colors/neutral-100 colors/white override-theme))}}
|
||||
label]
|
||||
(when sub-label
|
||||
[text/text
|
||||
{:accessibility-label :right-text-for-action
|
||||
:size :paragraph-1
|
||||
:style (style/right-text theme)}
|
||||
right-text])
|
||||
(when right-icon
|
||||
[rn/view
|
||||
{:style style/right-icon
|
||||
:accessible true
|
||||
:accessibility-label :right-icon-for-action}
|
||||
[icon/icon right-icon
|
||||
{:color (get-icon-color danger? theme)
|
||||
:size 20}]])])]]])
|
||||
|
||||
(def ^:private action (quo.theme/with-theme action-internal))
|
||||
{:size :paragraph-2
|
||||
:style {:color
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)}}
|
||||
sub-label])]
|
||||
(when (or right-text right-icon)
|
||||
[rn/view {:style style/right-side-container}
|
||||
(when right-text
|
||||
[text/text
|
||||
{:accessibility-label :right-text-for-action
|
||||
:size :paragraph-1
|
||||
:style (style/right-text override-theme)}
|
||||
right-text])
|
||||
(when right-icon
|
||||
[rn/view
|
||||
{:style style/right-icon
|
||||
:accessible true
|
||||
:accessibility-label :right-icon-for-action}
|
||||
[icon/icon right-icon
|
||||
{:color (get-icon-color danger? override-theme)
|
||||
:size 20}]])])]]]))
|
||||
|
||||
(defn action-drawer
|
||||
[sections]
|
||||
[:<>
|
||||
(doall
|
||||
(for [actions sections]
|
||||
(let [filtered-actions (filter some? actions)]
|
||||
(doall
|
||||
(map #(with-meta [action %] {:key (:label %)}) filtered-actions)))))])
|
||||
(doall
|
||||
(map action actions))))])
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
:margin-bottom (+ (safe-area/get-bottom) 8)})
|
||||
|
||||
(defn title
|
||||
[theme]
|
||||
[shell?]
|
||||
{:color (colors/theme-colors colors/neutral-100
|
||||
colors/white
|
||||
theme)})
|
||||
(when shell? :dark))})
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
(ns quo2.components.drawers.documentation-drawers.view
|
||||
(:require [quo2.components.buttons.button.view :as button]
|
||||
(:require [quo2.components.buttons.button :as button]
|
||||
[quo2.components.drawers.documentation-drawers.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[react-native.core :as rn]
|
||||
[react-native.gesture :as gesture]
|
||||
[quo2.theme :as quo.theme]))
|
||||
[react-native.gesture :as gesture]))
|
||||
|
||||
(defn- view-internal
|
||||
(defn view
|
||||
"Options
|
||||
- `title` Title text
|
||||
- `show-button?` Show button
|
||||
@@ -16,7 +15,7 @@
|
||||
- `shell?` use shell theme
|
||||
`content` Content of the drawer
|
||||
"
|
||||
[{:keys [title show-button? on-press-button button-label button-icon theme shell?]} content]
|
||||
[{:keys [title show-button? on-press-button button-label button-icon shell?]} content]
|
||||
[gesture/scroll-view
|
||||
{:style style/outer-container
|
||||
:always-bounce-vertical false
|
||||
@@ -25,18 +24,18 @@
|
||||
[text/text
|
||||
{:size :heading-2
|
||||
:accessibility-label :documentation-drawer-title
|
||||
:style (style/title theme)
|
||||
:style (style/title shell?)
|
||||
:weight :semi-bold}
|
||||
title]
|
||||
[rn/view {:style style/content :accessibility-label :documentation-drawer-content}
|
||||
content]
|
||||
(when show-button?
|
||||
[button/button
|
||||
{:size 24
|
||||
:type (if shell? :blur-bg-outline :outline)
|
||||
:on-press on-press-button
|
||||
:accessibility-label :documentation-drawer-button
|
||||
:after button-icon}
|
||||
(cond-> {:size 24
|
||||
:type (if shell? :blur-bg-outline :outline)
|
||||
:on-press on-press-button
|
||||
:accessibility-label :documentation-drawer-button
|
||||
:after button-icon}
|
||||
shell? (assoc :override-theme :dark))
|
||||
button-label])]])
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
(ns quo2.components.dropdowns.dropdown
|
||||
(:require [quo2.components.dropdowns.old-button-view :as old-button]))
|
||||
(:require [quo2.components.buttons.button :as button]))
|
||||
|
||||
(defn dropdown
|
||||
[_ _]
|
||||
(fn [{:keys [on-change selected] :as opts} children]
|
||||
;TODO: Dropdown needs to be implemented/refactored to be its own component -
|
||||
;https://github.com/status-im/status-mobile/issues/16456
|
||||
[old-button/button
|
||||
[button/button
|
||||
(merge
|
||||
opts
|
||||
{:after (if selected :i/chevron-top :i/chevron-down)
|
||||
|
||||
@@ -1,138 +0,0 @@
|
||||
(ns quo2.components.dropdowns.old-button-view
|
||||
(:require [quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.blur :as blur]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.components.dropdowns.old-button-style :as style]))
|
||||
|
||||
(defn- button-internal
|
||||
"with label
|
||||
[button opts \"label\"]
|
||||
opts
|
||||
{:type :primary/:secondary/:grey/:dark-grey/:outline/:ghost/
|
||||
:danger/:photo-bg/:blur-bg/:blur-bg-outline/:shell/:community
|
||||
:size 40 [default] /32/24
|
||||
:icon true/false
|
||||
:community-color '#FFFFFF'
|
||||
:community-text-color '#000000'
|
||||
:before :icon-keyword
|
||||
:after :icon-keyword}
|
||||
|
||||
only icon
|
||||
[button {:icon true} :i/close-circle]"
|
||||
[_ _]
|
||||
(let [pressed-in (reagent/atom false)]
|
||||
(fn
|
||||
[{:keys [on-press disabled type size before after above icon-secondary-no-color
|
||||
width customization-color theme override-background-color pressed
|
||||
on-long-press accessibility-label icon icon-no-color style inner-style test-ID
|
||||
blur-active? override-before-margins override-after-margins icon-size icon-container-size
|
||||
icon-container-rounded?]
|
||||
:or {type :primary
|
||||
size 40
|
||||
customization-color :primary
|
||||
blur-active? true}}
|
||||
children]
|
||||
(let [{:keys [icon-color icon-secondary-color background-color label-color border-color blur-type
|
||||
blur-overlay-color icon-background-color]}
|
||||
(get-in (style/themes customization-color)
|
||||
[theme type])
|
||||
state (cond disabled :disabled
|
||||
(or @pressed-in pressed) :pressed
|
||||
:else :default)
|
||||
blur-state (if blur-active? :blurred :default)
|
||||
icon-size (or icon-size (when (= 24 size) 12))
|
||||
icon-secondary-color (or icon-secondary-color icon-color)]
|
||||
[rn/touchable-without-feedback
|
||||
(merge {:test-ID test-ID
|
||||
:disabled disabled
|
||||
:accessibility-label accessibility-label
|
||||
:on-press-in #(reset! pressed-in true)
|
||||
:on-press-out #(reset! pressed-in nil)}
|
||||
(when on-press
|
||||
{:on-press on-press})
|
||||
(when on-long-press
|
||||
{:on-long-press on-long-press}))
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(style/shape-style-container type icon size)
|
||||
{:width width}
|
||||
style)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(style/style-container {:type type
|
||||
:size size
|
||||
:disabled disabled
|
||||
:background-color
|
||||
(or override-background-color (get background-color state))
|
||||
:border-color
|
||||
(get border-color state)
|
||||
:icon icon
|
||||
:above above
|
||||
:width width
|
||||
:before before
|
||||
:after after
|
||||
:blur-active? blur-active?})
|
||||
(when (= state :pressed) {:opacity 0.9})
|
||||
inner-style)}
|
||||
(when (and (= type :blurred)
|
||||
blur-active?)
|
||||
[blur/view
|
||||
{:blur-radius 20
|
||||
:blur-type blur-type
|
||||
:overlay-color blur-overlay-color
|
||||
:style style/blur-view}])
|
||||
(when above
|
||||
[rn/view
|
||||
[quo2.icons/icon above
|
||||
{:container-style {:margin-bottom 2}
|
||||
:color icon-secondary-color
|
||||
:size icon-size}]])
|
||||
(when before
|
||||
[rn/view
|
||||
{:style (style/before-icon-style
|
||||
{:override-margins override-before-margins
|
||||
:size size
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color (get icon-background-color blur-state)
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon before
|
||||
{:color icon-secondary-color
|
||||
:size icon-size}]])
|
||||
[rn/view
|
||||
(cond
|
||||
(or icon icon-no-color)
|
||||
[quo2.icons/icon children
|
||||
{:color icon-color
|
||||
:no-color icon-no-color
|
||||
:size icon-size}]
|
||||
|
||||
(string? children)
|
||||
[text/text
|
||||
{:size (when (#{56 24} size) :paragraph-2)
|
||||
:weight :medium
|
||||
:number-of-lines 1
|
||||
:style {:color label-color}}
|
||||
|
||||
children]
|
||||
|
||||
(vector? children)
|
||||
children)]
|
||||
(when after
|
||||
[rn/view
|
||||
{:style (style/after-icon-style
|
||||
{:override-margins override-after-margins
|
||||
:size size
|
||||
:icon-container-size icon-container-size
|
||||
:icon-background-color (get icon-background-color blur-state)
|
||||
:icon-container-rounded? icon-container-rounded?
|
||||
:icon-size icon-size})}
|
||||
[quo2.icons/icon after
|
||||
{:no-color icon-secondary-no-color
|
||||
:color icon-secondary-color
|
||||
:size icon-size}]])]]]))))
|
||||
|
||||
(def button (theme/with-theme button-internal))
|
||||
@@ -24,3 +24,7 @@
|
||||
{:color colors/white}))
|
||||
|
||||
(def button-container {:margin-top 20})
|
||||
|
||||
(defn upper-button-color
|
||||
[customization-color]
|
||||
(colors/custom-color-by-theme customization-color 50 60))
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.empty-state.empty-state.view
|
||||
(:require [quo2.components.buttons.button.view :as button]
|
||||
(:require [quo2.components.buttons.button :as button]
|
||||
[quo2.components.empty-state.empty-state.styles :as styles]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[react-native.core :as rn]
|
||||
@@ -33,10 +33,10 @@
|
||||
upper-button-on-press :on-press} upper-button]
|
||||
[rn/view {:style styles/button-container}
|
||||
[button/button
|
||||
{:type :primary
|
||||
:size 32
|
||||
:customization-color customization-color
|
||||
:on-press upper-button-on-press}
|
||||
{:type :primary
|
||||
:size 32
|
||||
:override-background-color (styles/upper-button-color customization-color)
|
||||
:on-press upper-button-on-press}
|
||||
upper-button-text]
|
||||
(when-let [{lower-button-text :text
|
||||
lower-button-on-press :on-press} lower-button]
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.header
|
||||
(:require [oops.core :refer [oget]]
|
||||
[quo2.components.buttons.button.view :as button]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
[quo2.components.icons.icons :as icons]
|
||||
[quo2.components.icons.svg :as icons.svg]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn- valid-color?
|
||||
@@ -13,10 +12,11 @@
|
||||
(not (string/blank? color)))))
|
||||
|
||||
(defn memo-icon-fn
|
||||
[{:keys [color color-2 no-color
|
||||
container-style size accessibility-label theme]
|
||||
[icon-name
|
||||
{:keys [color color-2 no-color
|
||||
container-style size accessibility-label]
|
||||
:or {accessibility-label :icon}}
|
||||
icon-name]
|
||||
_]
|
||||
(let [size (or size 20)]
|
||||
^{:key icon-name}
|
||||
(if-let [svg-icon (icons.svg/get-icon icon-name size)]
|
||||
@@ -34,15 +34,15 @@
|
||||
(when (not no-color)
|
||||
{:tint-color (if (and (string? color) (not (string/blank? color)))
|
||||
color
|
||||
(colors/theme-colors colors/neutral-100 colors/white theme))})
|
||||
(colors/theme-colors colors/neutral-100 colors/white))})
|
||||
|
||||
container-style)
|
||||
:accessibility-label accessibility-label
|
||||
:source (icons/icon-source (str (name icon-name) size))}])))
|
||||
|
||||
(def ^:private themed-icon (memoize (quo.theme/with-theme memo-icon-fn)))
|
||||
(def themed-icon (memoize memo-icon-fn))
|
||||
|
||||
(defn icon
|
||||
([icon-name] (icon icon-name nil))
|
||||
([icon-name params]
|
||||
(themed-icon params icon-name)))
|
||||
(themed-icon icon-name params (colors/dark?))))
|
||||
|
||||
@@ -35,5 +35,4 @@
|
||||
(get-icons 16)
|
||||
(get-icons 20)
|
||||
(get-icons 24)
|
||||
(get-icons 32)
|
||||
(get-icons 48)))
|
||||
(get-icons 32)))
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
:error colors/danger-60}})
|
||||
|
||||
(defn get-color
|
||||
[k]
|
||||
(get-in themes [(theme/get-theme) k]))
|
||||
[key]
|
||||
(get-in themes [(theme/get-theme) key]))
|
||||
|
||||
(defn info-message
|
||||
"[info-message opts \"message\"]
|
||||
|
||||
@@ -30,12 +30,12 @@
|
||||
:close-button colors/white}})
|
||||
|
||||
(defn get-color
|
||||
[theme k]
|
||||
(get-in themes [theme k]))
|
||||
[theme key]
|
||||
(get-in themes [theme key]))
|
||||
|
||||
(defn get-color-by-type
|
||||
[theme type k]
|
||||
(get-in themes [theme type k]))
|
||||
[theme type key]
|
||||
(get-in themes [theme type key]))
|
||||
|
||||
(defn container
|
||||
[{:keys [theme type include-button?]}]
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.info.information-box.view
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.components.buttons.button.view :as button]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.info.information-box.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
|
||||
@@ -3,62 +3,62 @@
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn variants-colors
|
||||
[blur? theme]
|
||||
[blur? override-theme]
|
||||
(if blur?
|
||||
{:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
:icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
|
||||
:button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 theme)
|
||||
{:label (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:icon (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 override-theme)
|
||||
:button-border (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-100 colors/white-opa-70 override-theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-10 override-theme)
|
||||
:cursor (colors/theme-colors (colors/custom-color :blue 50)
|
||||
colors/white
|
||||
theme)}
|
||||
{:label (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:icon (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
:button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-50 colors/white theme)
|
||||
override-theme)}
|
||||
{:label (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
|
||||
:icon (colors/theme-colors colors/neutral-50 colors/neutral-40 override-theme)
|
||||
:button-border (colors/theme-colors colors/neutral-30 colors/neutral-70 override-theme)
|
||||
:clear-icon (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
|
||||
:password-icon (colors/theme-colors colors/neutral-50 colors/white override-theme)
|
||||
:cursor (colors/theme-colors (colors/custom-color :blue 50)
|
||||
(colors/custom-color :blue 60)
|
||||
theme)}))
|
||||
override-theme)}))
|
||||
|
||||
(defn status-colors
|
||||
[status blur? theme]
|
||||
[status blur? override-theme]
|
||||
(if blur?
|
||||
(case status
|
||||
:focus
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:error
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:disabled
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)
|
||||
:text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 theme)}
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-80-opa-30 colors/white-opa-20 override-theme)}
|
||||
;; :default
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)})
|
||||
{:border-color (colors/theme-colors colors/neutral-80-opa-10 colors/white-opa-10 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)})
|
||||
(case status
|
||||
:focus
|
||||
{:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
{:border-color (colors/theme-colors colors/neutral-40 colors/neutral-60 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:error
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)}
|
||||
{:border-color (colors/theme-colors colors/danger-opa-40 colors/danger-opa-40 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/white-opa-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)}
|
||||
:disabled
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)
|
||||
:text (colors/theme-colors colors/neutral-40 colors/neutral-40 theme)}
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-40 colors/neutral-40 override-theme)}
|
||||
;; :default
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white theme)})))
|
||||
{:border-color (colors/theme-colors colors/neutral-20 colors/neutral-80 override-theme)
|
||||
:placeholder (colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)
|
||||
:text (colors/theme-colors colors/neutral-100 colors/white override-theme)})))
|
||||
|
||||
(defn input-container
|
||||
[colors-by-status small? disabled?]
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
[quo2.components.markdown.text :as text]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.theme :as quo.theme]))
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(defn- label-&-counter
|
||||
[{:keys [label current-chars char-limit variant-colors]}]
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
(def ^:private custom-props
|
||||
"Custom properties that must be removed from properties map passed to InputText."
|
||||
[:type :blur? :theme :error? :right-icon :left-icon :disabled? :small? :button
|
||||
[:type :blur? :override-theme :error? :right-icon :left-icon :disabled? :small? :button
|
||||
:label :char-limit :on-char-limit-reach :icon-name :multiline? :on-focus :on-blur])
|
||||
|
||||
(defn- base-input
|
||||
@@ -74,15 +74,15 @@
|
||||
(reset! char-count amount-chars)
|
||||
(when (>= amount-chars char-limit)
|
||||
(on-char-limit-reach amount-chars))))]
|
||||
(fn [{:keys [blur? theme error? right-icon left-icon disabled? small? button
|
||||
(fn [{:keys [blur? override-theme error? right-icon left-icon disabled? small? button
|
||||
label char-limit multiline? clearable? on-focus on-blur]
|
||||
:as props}]
|
||||
(let [status-kw (cond
|
||||
disabled? :disabled
|
||||
error? :error
|
||||
:else @status)
|
||||
colors-by-status (style/status-colors status-kw blur? theme)
|
||||
variant-colors (style/variants-colors blur? theme)
|
||||
colors-by-status (style/status-colors status-kw blur? override-theme)
|
||||
variant-colors (style/variants-colors blur? override-theme)
|
||||
clean-props (apply dissoc props custom-props)]
|
||||
[:<>
|
||||
(when (or label char-limit)
|
||||
@@ -101,7 +101,7 @@
|
||||
(cond-> {:style (style/input colors-by-status small? @multiple-lines?)
|
||||
:accessibility-label :input
|
||||
:placeholder-text-color (:placeholder colors-by-status)
|
||||
:keyboard-appearance (quo.theme/theme-value :light :dark theme)
|
||||
:keyboard-appearance (theme/theme-value :light :dark override-theme)
|
||||
:cursor-color (:cursor variant-colors)
|
||||
:editable (not disabled?)
|
||||
:on-focus (fn []
|
||||
@@ -148,11 +148,11 @@
|
||||
:icon-name (if @password-shown? :i/hide :i/reveal)
|
||||
:on-press #(swap! password-shown? not)})])))
|
||||
|
||||
(defn input-internal
|
||||
(defn input
|
||||
"This input supports the following properties:
|
||||
- :type - Can be `:text`(default) or `:password`.
|
||||
- :blur? - Boolean to set the blur color variant.
|
||||
- :theme - Can be `light` or `:dark`.
|
||||
- :override-theme - Can be `light` or `:dark`.
|
||||
- :small? - Boolean to specify if this input is rendered in its small version.
|
||||
- :multiline? - Boolean to specify if this input support multiple lines.
|
||||
- :icon-name - The name of an icon to display at the left of the input.
|
||||
@@ -188,5 +188,3 @@
|
||||
(if (= type :password)
|
||||
[password-input base-props]
|
||||
[base-input base-props])))
|
||||
|
||||
(def input (quo.theme/with-theme input-internal))
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
(ns quo2.components.inputs.profile-input.view
|
||||
(:require
|
||||
[quo2.components.buttons.button.view :as buttons]
|
||||
[quo2.components.buttons.button :as buttons]
|
||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo2.components.inputs.profile-input.style :as style]
|
||||
[quo2.components.inputs.title-input.view :as title-input]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.hole-view :as hole-view]))
|
||||
|
||||
@@ -34,16 +35,16 @@
|
||||
:status-indicator? false
|
||||
:size :medium)]]
|
||||
[buttons/button
|
||||
{:accessibility-label :select-profile-picture-button
|
||||
:type :grey
|
||||
:background :blur
|
||||
:on-press on-press
|
||||
:icon-size 20
|
||||
:width 24
|
||||
:size 24
|
||||
:icon :i/camera
|
||||
:style style/button
|
||||
:inner-style style/button-inner} :i/camera]]
|
||||
{:accessibility-label :select-profile-picture-button
|
||||
:type :grey
|
||||
:override-background-color (colors/alpha colors/white 0.05)
|
||||
:on-press on-press
|
||||
:icon-size 20
|
||||
:width 24
|
||||
:size 24
|
||||
:icon :i/camera
|
||||
:style style/button
|
||||
:inner-style style/button-inner} :i/camera]]
|
||||
[rn/view {:style style/input-container}
|
||||
[title-input/title-input
|
||||
(merge title-input-props
|
||||
|
||||
@@ -17,29 +17,29 @@
|
||||
:text-align-vertical :top))
|
||||
|
||||
(defn placeholder-color
|
||||
[input-state theme blur?]
|
||||
[input-state override-theme blur?]
|
||||
(cond
|
||||
(and (= input-state :focused) blur?)
|
||||
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-20 override-theme)
|
||||
|
||||
(= input-state :focused) ; Not blur
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 theme)
|
||||
(colors/theme-colors colors/neutral-30 colors/neutral-60 override-theme)
|
||||
|
||||
blur? ; :default & blur
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 theme)
|
||||
(colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-30 override-theme)
|
||||
|
||||
:else ; :default & not blur
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-50 theme)))
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-50 override-theme)))
|
||||
|
||||
(defn cursor-color
|
||||
[customization-color theme]
|
||||
[customization-color override-theme]
|
||||
(colors/theme-colors (colors/custom-color customization-color 50)
|
||||
(colors/custom-color customization-color 60)
|
||||
theme))
|
||||
override-theme))
|
||||
|
||||
(defn error-word
|
||||
[theme]
|
||||
[]
|
||||
{:height 22
|
||||
:padding-horizontal 20
|
||||
:background-color colors/danger-50-opa-10
|
||||
:color (colors/theme-colors colors/danger-50 colors/danger-60 theme)})
|
||||
:color (colors/theme-colors colors/danger-50 colors/danger-60)})
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
[quo2.components.inputs.recovery-phrase.style :as style]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.theme :as quo.theme]))
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(def ^:private custom-props
|
||||
[:customization-color :theme :blur? :cursor-color :multiline :on-focus :on-blur
|
||||
[:customization-color :override-theme :blur? :cursor-color :multiline :on-focus :on-blur
|
||||
:placeholder-text-color :mark-errors? :error-pred :word-limit])
|
||||
|
||||
(defn- error-word
|
||||
[text theme]
|
||||
[rn/text {:style (style/error-word theme)}
|
||||
[text]
|
||||
[rn/text {:style (style/error-word)}
|
||||
text])
|
||||
|
||||
(defn- mark-error-words
|
||||
[{:keys [pred-last-word pred-previous-words text word-limit theme]}]
|
||||
[pred-last-word pred-previous-words text word-limit]
|
||||
(let [last-index (dec (count (string/split text #"\s+")))
|
||||
words (map #(apply str %)
|
||||
(partition-by #(= " " %) text))]
|
||||
@@ -31,18 +31,18 @@
|
||||
:always (update :result
|
||||
conj
|
||||
(if invalid-word?
|
||||
[error-word word theme]
|
||||
[error-word word]
|
||||
word)))))
|
||||
{:result [:<>]
|
||||
:idx 0})
|
||||
:result)))
|
||||
|
||||
(defn recovery-phrase-input-internal
|
||||
(defn recovery-phrase-input
|
||||
[_ _]
|
||||
(let [state (reagent/atom :default)
|
||||
set-focused #(reset! state :focused)
|
||||
set-default #(reset! state :default)]
|
||||
(fn [{:keys [customization-color theme blur? on-focus on-blur mark-errors?
|
||||
(fn [{:keys [customization-color override-theme blur? on-focus on-blur mark-errors?
|
||||
error-pred-current-word error-pred-written-words word-limit]
|
||||
:or {customization-color :blue
|
||||
word-limit ##Inf
|
||||
@@ -55,9 +55,9 @@
|
||||
[rn/text-input
|
||||
(merge {:accessibility-label :recovery-phrase-input
|
||||
:style (style/input)
|
||||
:placeholder-text-color (style/placeholder-color @state theme blur?)
|
||||
:cursor-color (style/cursor-color customization-color theme)
|
||||
:keyboard-appearance (quo.theme/theme-value :light :dark theme)
|
||||
:placeholder-text-color (style/placeholder-color @state override-theme blur?)
|
||||
:cursor-color (style/cursor-color customization-color override-theme)
|
||||
:keyboard-appearance (theme/theme-value :light :dark override-theme)
|
||||
:multiline true
|
||||
:on-focus (fn []
|
||||
(set-focused)
|
||||
@@ -67,11 +67,5 @@
|
||||
(when on-blur (on-blur)))}
|
||||
extra-props)
|
||||
(if mark-errors?
|
||||
(mark-error-words {:pred-last-word error-pred-current-word
|
||||
:pred-previous-words error-pred-written-words
|
||||
:text text
|
||||
:word-limit word-limit
|
||||
:theme theme})
|
||||
(mark-error-words error-pred-current-word error-pred-written-words text word-limit)
|
||||
text)]]))))
|
||||
|
||||
(def recovery-phrase-input (quo.theme/with-theme recovery-phrase-input-internal))
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
(ns quo2.components.links.link-preview.view
|
||||
(:require [quo2.components.buttons.button.view :as button]
|
||||
(:require [quo2.components.buttons.button :as button]
|
||||
[quo2.components.links.link-preview.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
(ns quo2.components.list-items.channel
|
||||
(:require [quo2.components.avatars.channel-avatar.view :as channel-avatar]
|
||||
[quo2.components.common.unread-grey-dot.view :as unread-grey-dot]
|
||||
(:require [quo2.components.avatars.channel-avatar :as channel-avatar]
|
||||
[quo2.components.common.unread-grey-dot.view :refer [unread-grey-dot]]
|
||||
[quo2.components.counter.counter :as quo2.counter]
|
||||
[quo2.components.icon :as quo2.icons]
|
||||
[quo2.components.markdown.text :as quo2.text]
|
||||
@@ -13,11 +13,10 @@
|
||||
|
||||
(defn list-item
|
||||
[{:keys [locked? mentions-count unread-messages?
|
||||
muted? is-active-channel? emoji channel-color
|
||||
default-color]
|
||||
muted? is-active-channel? emoji channel-color]
|
||||
:or {channel-color colors/primary-50}
|
||||
:as props}]
|
||||
(let [channel-color (or channel-color default-color)
|
||||
standard-props (apply dissoc props custom-props)
|
||||
(let [standard-props (apply dissoc props custom-props)
|
||||
name-text (:name props)]
|
||||
[rn/touchable-opacity standard-props
|
||||
[rn/view
|
||||
@@ -37,12 +36,11 @@
|
||||
:align-items :center}
|
||||
:accessible true
|
||||
:accessibility-label :chat-name-text}
|
||||
[channel-avatar/view
|
||||
{:size :size/l
|
||||
:locked? locked?
|
||||
:full-name (:name props)
|
||||
:customization-color channel-color
|
||||
:emoji emoji}]
|
||||
[channel-avatar/channel-avatar
|
||||
{:big? true
|
||||
:locked? locked?
|
||||
:emoji-background-color (colors/theme-alpha channel-color 0.1 0.1)
|
||||
:emoji emoji}]
|
||||
[quo2.text/text
|
||||
{:style (cond-> {:margin-left 12}
|
||||
(and (not locked?) muted?)
|
||||
@@ -65,4 +63,4 @@
|
||||
mentions-count]]
|
||||
|
||||
unread-messages?
|
||||
[unread-grey-dot/unread-grey-dot :unviewed-messages-public])])]]))
|
||||
[unread-grey-dot :unviewed-messages-public])])]]))
|
||||
|
||||
@@ -1,70 +0,0 @@
|
||||
(ns quo2.components.list-items.community.component-spec
|
||||
(:require [quo2.components.list-items.community.view :as component]
|
||||
[test-helpers.component :as h]))
|
||||
|
||||
(h/describe "Community list"
|
||||
(h/test "default render"
|
||||
(h/render [component/view {}])
|
||||
(h/is-truthy (h/get-by-label-text :community-item-title))
|
||||
(h/is-null (h/query-by-label-text :community-item-info)))
|
||||
|
||||
(h/describe "type share"
|
||||
(h/test "renders"
|
||||
(h/render [component/view
|
||||
{:type :share
|
||||
:title "Title"
|
||||
:subtitle "Subtitle"}])
|
||||
(h/is-truthy (h/get-by-text "# Title"))
|
||||
(h/is-truthy (h/get-by-text "Subtitle"))
|
||||
(h/is-null (h/query-by-label-text :community-item-info))))
|
||||
|
||||
(h/describe "type engage"
|
||||
(h/test "default, no info"
|
||||
(h/render [component/view {:type :engage}])
|
||||
(h/is-null (h/query-by-label-text :community-item-info)))
|
||||
|
||||
(h/test "info is :navigation"
|
||||
(h/render [component/view {:type :engage :info :navigation}])
|
||||
(h/is-truthy (h/get-by-label-text :info-navigation)))
|
||||
|
||||
(h/test "info is :token-gated"
|
||||
(h/render [component/view {:type :engage :info :token-gated}])
|
||||
(h/is-truthy (h/get-by-label-text :info-token-gated)))
|
||||
|
||||
(h/test "info is :muted"
|
||||
(h/render [component/view {:type :engage :info :muted}])
|
||||
(h/is-truthy (h/get-by-label-text :info-muted)))
|
||||
|
||||
(h/test "info is :notification"
|
||||
(h/render [component/view {:type :engage :info :notification}])
|
||||
(h/is-truthy (h/get-by-label-text :info-notification-dot)))
|
||||
|
||||
(h/test "info is :mention"
|
||||
(h/render [component/view
|
||||
{:type :engage
|
||||
:info :mention
|
||||
:unread-count 9000}])
|
||||
(h/is-truthy (h/get-by-text "99+"))))
|
||||
|
||||
(h/describe "type discover"
|
||||
(h/test "default, no info, no member stats"
|
||||
(h/render [component/view {:type :discover}])
|
||||
(h/is-null (h/query-by-label-text :stats-members-count))
|
||||
(h/is-null (h/query-by-label-text :community-item-info)))
|
||||
|
||||
(h/test "info is :token-gated, show member stats"
|
||||
(let [on-press-info (h/mock-fn)]
|
||||
(h/render [component/view
|
||||
{:type :discover
|
||||
:info :token-gated
|
||||
:locked? true
|
||||
:blur? false
|
||||
:on-press-info on-press-info
|
||||
:members {:members-count 9876 :active-count 1350}
|
||||
:tokens [{:id 1 :group [{:id 1}]}]}])
|
||||
(h/is-truthy (h/get-by-label-text :community-item-info))
|
||||
(h/is-truthy (h/get-by-label-text :permission-tag))
|
||||
(h/is-truthy (h/get-by-label-text :stats-members-count))
|
||||
(h/is-truthy (h/get-by-label-text :stats-active-count))
|
||||
(h/fire-event :press (h/get-by-label-text :permission-tag))
|
||||
(h/was-called on-press-info)))))
|
||||
@@ -1,65 +0,0 @@
|
||||
(ns quo2.components.list-items.community.style
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.shadows :as shadows]))
|
||||
|
||||
(def logo
|
||||
{:border-radius 50
|
||||
:border-width 0
|
||||
:width 32
|
||||
:height 32
|
||||
:margin-right 10})
|
||||
|
||||
(defn notification-dot
|
||||
[blur? theme]
|
||||
{:width 8
|
||||
:height 8
|
||||
:border-radius 4
|
||||
:background-color (if (and (= :dark theme) blur?)
|
||||
colors/white-opa-40
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme))})
|
||||
|
||||
(defn title
|
||||
[{:keys [type info blur? theme]}]
|
||||
{:color (cond
|
||||
(and (= type :engage) (= info :muted))
|
||||
(colors/theme-colors colors/neutral-40 colors/neutral-60 theme)
|
||||
|
||||
(and (= type :engage) (= info :default) (not blur?))
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme)
|
||||
|
||||
(and (= type :engage) (= info :default) (= :dark theme) blur?)
|
||||
colors/white-70-blur
|
||||
|
||||
:else
|
||||
(colors/theme-colors colors/neutral-100 colors/white theme))})
|
||||
|
||||
(defn subtitle
|
||||
[blur? theme]
|
||||
{:color (if (and (= :dark theme) blur?)
|
||||
colors/white-opa-40
|
||||
(colors/theme-colors colors/neutral-50 colors/neutral-40 theme))})
|
||||
|
||||
(defn container
|
||||
[{:keys [type pressed? blur? customization-color theme info]}]
|
||||
(merge {:padding-vertical 8
|
||||
:padding-horizontal 12
|
||||
:border-radius 12
|
||||
:flex-direction :row
|
||||
:align-items :center
|
||||
:background-color (cond
|
||||
(and pressed? (= type :engage) (= info :default) (= :dark theme) blur?)
|
||||
colors/white-opa-5
|
||||
|
||||
(and pressed? (#{:engage :share} type))
|
||||
(colors/theme-alpha customization-color 0.05 0.05)
|
||||
|
||||
(and (not pressed?) (= type :discover) (not blur?))
|
||||
(colors/theme-colors colors/white colors/neutral-90 theme)
|
||||
|
||||
(and (not pressed?) (= type :discover) (= :dark theme) blur?)
|
||||
colors/white-opa-5
|
||||
|
||||
(and pressed? (= type :discover))
|
||||
(colors/theme-colors colors/white :transparent theme))}
|
||||
(when (and (= type :discover) (not pressed?))
|
||||
(shadows/get 3))))
|
||||
@@ -1,165 +0,0 @@
|
||||
(ns quo2.components.list-items.community.view
|
||||
(:require [quo2.components.community.community-view :as community-view]
|
||||
[quo2.components.counter.counter :as counter]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.list-items.community.style :as style]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo.theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn- logo-component
|
||||
[logo]
|
||||
[rn/image {:source logo :style style/logo}])
|
||||
|
||||
(defn- title-component
|
||||
[{:keys [title type] :as props}]
|
||||
[text/text
|
||||
{:weight :semi-bold
|
||||
:size :paragraph-1
|
||||
:accessibility-label :community-item-title
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail
|
||||
:style (style/title props)}
|
||||
(if (= type :share)
|
||||
(str "# " title)
|
||||
title)])
|
||||
|
||||
(defn- subtitle-component
|
||||
[subtitle blur? theme]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:number-of-lines 1
|
||||
:accessibility-label :community-item-subtitle
|
||||
:style (style/subtitle blur? theme)}
|
||||
subtitle])
|
||||
|
||||
(defn- notification-dot
|
||||
[blur? theme]
|
||||
[rn/view
|
||||
{:style (style/notification-dot blur? theme)
|
||||
:accessibility-label :info-notification-dot}])
|
||||
|
||||
(defn- info-component
|
||||
[{:keys [customization-color info type blur? locked? on-press-info theme tokens unread-count]}]
|
||||
(let [component
|
||||
(cond
|
||||
(and (= type :discover) (= info :token-gated) (seq tokens))
|
||||
[community-view/permission-tag-container
|
||||
{:locked? locked?
|
||||
:tokens tokens
|
||||
:on-press on-press-info
|
||||
:theme theme
|
||||
:blur? blur?}]
|
||||
|
||||
(and (= type :engage) (= info :mention) (pos? unread-count))
|
||||
[counter/counter
|
||||
{:type :default
|
||||
:override-bg-color customization-color}
|
||||
unread-count]
|
||||
|
||||
(and (= type :engage) (= info :notification))
|
||||
[notification-dot blur? theme]
|
||||
|
||||
(and (= type :engage) (= info :muted))
|
||||
[icons/icon :i/muted
|
||||
{:accessibility-label :info-muted
|
||||
:color (colors/theme-colors colors/neutral-40 colors/neutral-60 theme)}]
|
||||
|
||||
(and (= type :engage) (= info :token-gated))
|
||||
[icons/icon (if locked? :i/locked :i/unlocked)
|
||||
{:accessibility-label :info-token-gated
|
||||
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}]
|
||||
|
||||
(and (= type :engage) (= info :navigation))
|
||||
[icons/icon :i/chevron-right
|
||||
{:accessibility-label :info-navigation
|
||||
:color (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)}])]
|
||||
(when component
|
||||
[rn/view
|
||||
{:accessibility-label :community-item-info
|
||||
:style {:margin-left 10}}
|
||||
component])))
|
||||
|
||||
(defn- view-internal
|
||||
"Options:
|
||||
|
||||
:type - :discover/engage/share
|
||||
:info - keyword - Acceptable values vary based on the :type option.
|
||||
|
||||
:title - string
|
||||
:logo - image resource
|
||||
:theme - :light/dark
|
||||
|
||||
:container-style - style map - Override styles in top-level view component.
|
||||
|
||||
:members - {:members-count number, :active-count number} - When non-nil, the
|
||||
statistics component will be shown.
|
||||
|
||||
:tokens - A sequence of maps, e.g. [{:id 1 :group [{:id 1 :token-icon an-icon}]}].
|
||||
|
||||
:locked? - boolean - When true, the permission-tag icon or the token gated
|
||||
icon will appear as closed.
|
||||
|
||||
:blur? - boolean - It will be taken into account when true and dark mode is
|
||||
enabled.
|
||||
|
||||
:customization-color - color - It will be passed down to components that
|
||||
should vary based on a custom color.
|
||||
|
||||
:on-press/:on-long-press - fn - Used by the top-level pressable component.
|
||||
|
||||
:on-press-info - fn - Will be called when the info component is pressed.
|
||||
|
||||
:unread-count - number - When the info is :mention, it will be used to show
|
||||
the number of unread mentions.
|
||||
"
|
||||
[]
|
||||
(let [pressed? (reagent/atom false)]
|
||||
(fn [{:keys [members type info tokens locked? title subtitle
|
||||
logo blur? customization-color
|
||||
on-press on-long-press on-press-info
|
||||
container-style unread-count theme]}]
|
||||
[rn/pressable
|
||||
{:accessibility-label :container
|
||||
:on-press-in (fn [] (reset! pressed? true))
|
||||
:on-press on-press
|
||||
:on-long-press on-long-press
|
||||
:on-press-out (fn [] (reset! pressed? false))
|
||||
:style (merge (style/container {:blur? blur?
|
||||
:customization-color customization-color
|
||||
:info info
|
||||
:type type
|
||||
:pressed? @pressed?
|
||||
:theme theme})
|
||||
container-style)}
|
||||
[logo-component logo]
|
||||
[rn/view {:style {:flex 1}}
|
||||
[title-component
|
||||
{:blur? blur?
|
||||
:info info
|
||||
:theme theme
|
||||
:title title
|
||||
:type type}]
|
||||
(when (and (= type :share) subtitle)
|
||||
[subtitle-component subtitle blur? theme])
|
||||
(when (and members (= type :discover))
|
||||
[community-view/community-stats-column
|
||||
{:type :list-view
|
||||
:theme theme
|
||||
:blur? blur?
|
||||
:members-count (:members-count members)
|
||||
:active-count (:active-count members)}])]
|
||||
[info-component
|
||||
{:blur? blur?
|
||||
:customization-color customization-color
|
||||
:info info
|
||||
:type type
|
||||
:locked? locked?
|
||||
:on-press-info on-press-info
|
||||
:theme theme
|
||||
:tokens tokens
|
||||
:unread-count unread-count}]])))
|
||||
|
||||
(def view (quo.theme/with-theme view-internal))
|
||||
@@ -7,11 +7,11 @@
|
||||
(defn themes
|
||||
[type]
|
||||
(case type
|
||||
:main {:icon-color (theme-colors colors/neutral-50 colors/neutral-40)
|
||||
:background (theme-colors colors/white colors/neutral-95)
|
||||
:main {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
|
||||
:background (theme-colors colors/white colors/neutral-90)
|
||||
:text-color (theme-colors colors/neutral-100 colors/white)}
|
||||
:danger {:icon-color (theme-colors colors/danger-50 colors/danger-60)
|
||||
:background (theme-colors colors/white colors/neutral-95)
|
||||
:background (theme-colors colors/white colors/neutral-90)
|
||||
:text-color (theme-colors colors/danger-50 colors/danger-60)}
|
||||
:transparent {:icon-color (theme-colors colors/neutral-50 colors/neutral-10)
|
||||
:text-color (theme-colors colors/neutral-100 colors/white)}))
|
||||
|
||||
@@ -5,8 +5,7 @@
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.fast-image :as fast-image]
|
||||
[react-native.hole-view :as hole-view]
|
||||
[quo2.theme :as quo.theme]))
|
||||
[react-native.hole-view :as hole-view]))
|
||||
|
||||
(def params
|
||||
{32 {:border-radius {:circular 16 :rounded 10}
|
||||
@@ -62,13 +61,13 @@
|
||||
[avatar item type size border-radius]]))
|
||||
|
||||
(defn get-overflow-color
|
||||
[transparent? transparent-color light-color dark-color theme]
|
||||
[transparent? transparent-color light-color dark-color override-theme]
|
||||
(if transparent?
|
||||
transparent-color
|
||||
(colors/theme-colors light-color dark-color theme)))
|
||||
(colors/theme-colors light-color dark-color override-theme)))
|
||||
|
||||
(defn overflow-label
|
||||
[{:keys [label size transparent? border-radius margin-left theme more-than-99-label]}]
|
||||
[label size transparent? border-radius margin-left override-theme more-than-99-label]
|
||||
[rn/view
|
||||
{:style {:width size
|
||||
:height size
|
||||
@@ -81,7 +80,7 @@
|
||||
colors/white-opa-10
|
||||
colors/neutral-20
|
||||
colors/neutral-70
|
||||
theme)}}
|
||||
override-theme)}}
|
||||
(if (= size 16)
|
||||
[quo2.icons/icon :i/more
|
||||
{:size 12
|
||||
@@ -90,7 +89,7 @@
|
||||
colors/white-opa-70
|
||||
colors/neutral-50
|
||||
colors/neutral-40
|
||||
theme)}]
|
||||
override-theme)}]
|
||||
[quo2.text/text
|
||||
{:size (if (= size 32) :paragraph-2 :label)
|
||||
:weight :medium
|
||||
@@ -99,7 +98,7 @@
|
||||
colors/white-opa-70
|
||||
colors/neutral-60
|
||||
colors/neutral-40
|
||||
theme)
|
||||
override-theme)
|
||||
:margin-left -2}}
|
||||
;; If overflow label is below 100, show label as +label (ex. +30), else just show 99+
|
||||
(if (< label 100)
|
||||
@@ -112,7 +111,7 @@
|
||||
(:account :collectible :photo) :rounded
|
||||
:circular))
|
||||
|
||||
(defn- preview-list-internal
|
||||
(defn preview-list
|
||||
"[preview-list opts items]
|
||||
opts
|
||||
{:type :user/:community/:account/:token/:collectible/:dapp
|
||||
@@ -121,7 +120,7 @@
|
||||
:transparent? overflow-label transparent?}
|
||||
items preview list items (only 4 items is required for preview)
|
||||
"
|
||||
[{:keys [type size list-size transparent? theme more-than-99-label]} items]
|
||||
[{:keys [type size list-size transparent? override-theme more-than-99-label]} items]
|
||||
(let [items-arr (into [] items)
|
||||
list-size (or list-size (count items))
|
||||
margin-left (get-in params [size :margin-left])
|
||||
@@ -136,13 +135,5 @@
|
||||
[list-item index type size (get items-arr index) list-size
|
||||
margin-left hole-size hole-radius hole-x hole-y border-radius])
|
||||
(when (> list-size 4)
|
||||
[overflow-label
|
||||
{:label (- list-size 3)
|
||||
:size size
|
||||
:transparent? transparent?
|
||||
:border-radius border-radius
|
||||
:margin-left margin-left
|
||||
:theme theme
|
||||
:more-than-99-label more-than-99-label}])]))
|
||||
|
||||
(def preview-list (quo.theme/with-theme preview-list-internal))
|
||||
[overflow-label (- list-size 3) size transparent? border-radius margin-left override-theme
|
||||
more-than-99-label])]))
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
|
||||
(defn- internal-view
|
||||
[{:keys [content theme blur? parent-height]}]
|
||||
(let [skeleton-height (get-in constants/layout-dimensions [content :height])
|
||||
number-of-skeletons (int (Math/ceil (/ parent-height skeleton-height)))
|
||||
(let [number-of-skeletons (int (Math/floor (/ parent-height
|
||||
(get-in constants/layout-dimensions [content :height]))))
|
||||
color (cond
|
||||
blur? colors/white-opa-5
|
||||
(= theme :dark) colors/neutral-90
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
(ns quo2.components.markdown.text
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.typography :as typography]
|
||||
[quo2.theme :as quo.theme]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(defn text-style
|
||||
[{:keys [size align weight style theme]}]
|
||||
[{:keys [size align weight style]}]
|
||||
(merge (case (or weight :regular)
|
||||
:regular typography/font-regular
|
||||
:medium typography/font-medium
|
||||
@@ -25,23 +25,14 @@
|
||||
{:text-align (or align :auto)}
|
||||
(if (:color style)
|
||||
style
|
||||
(assoc style
|
||||
:color
|
||||
(if (= (or theme (quo.theme/get-theme)) :dark) colors/white colors/neutral-100)))))
|
||||
|
||||
(defn- text-view-internal
|
||||
[props & children]
|
||||
(let [style (text-style props)]
|
||||
(into [rn/text
|
||||
(merge {:style style}
|
||||
(dissoc props :style :size :align :weight :color :theme))]
|
||||
children)))
|
||||
|
||||
(def ^:private text-view (quo.theme/with-theme text-view-internal))
|
||||
(assoc style :color (if (= (theme/get-theme) :dark) colors/white colors/neutral-100)))))
|
||||
|
||||
(defn text
|
||||
[]
|
||||
(let [this (reagent/current-component)
|
||||
props (reagent/props this)
|
||||
children (reagent/children this)]
|
||||
(into [text-view props] children)))
|
||||
(let [this (reagent/current-component)
|
||||
props (reagent/props this)
|
||||
style (text-style props)]
|
||||
(into [rn/text
|
||||
(merge {:style style}
|
||||
(dissoc props :style :size :align :weight :color))]
|
||||
(reagent/children this))))
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
:background colors/neutral-95}})
|
||||
|
||||
(defn get-color
|
||||
[k]
|
||||
(get-in themes [(theme/get-theme) k]))
|
||||
[key]
|
||||
(get-in themes [(theme/get-theme) key]))
|
||||
|
||||
(def ui-images
|
||||
{:light {:horizontal (js/require "../resources/images/ui/message-gap-hborder-light.png")
|
||||
@@ -28,8 +28,8 @@
|
||||
:circles (js/require "../resources/images/ui/message-gap-circle-bg-dark.png")}})
|
||||
|
||||
(defn get-image
|
||||
[k]
|
||||
(get-in ui-images [(theme/get-theme) k]))
|
||||
[key]
|
||||
(get-in ui-images [(theme/get-theme) key]))
|
||||
|
||||
;;; components
|
||||
;;;; borders
|
||||
@@ -82,12 +82,11 @@
|
||||
:border-radius 50}])
|
||||
|
||||
(defn timestamp
|
||||
[s]
|
||||
[str]
|
||||
[text/text
|
||||
{:size :label
|
||||
:style {:text-transform :none
|
||||
:color (get-color :time)}}
|
||||
s])
|
||||
:color (get-color :time)}} str])
|
||||
|
||||
(defn info-button
|
||||
[on-press]
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
|
||||
(defn dynamic-button-view
|
||||
[type dynamic-buttons style]
|
||||
(when-let [{:keys [on-press customization-color label] :as props} (get dynamic-buttons type)]
|
||||
(when-let [{:keys [count on-press customization-color label]} (get dynamic-buttons type)]
|
||||
[dynamic-button/dynamic-button
|
||||
{:type type
|
||||
:label label
|
||||
:on-press on-press
|
||||
:count (:count props)
|
||||
:count count
|
||||
:style style
|
||||
:customization-color customization-color}]))
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.navigation.page-nav
|
||||
(:require [clojure.string :as string]
|
||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo2.components.buttons.button.view :as button]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
|
||||
@@ -25,12 +25,11 @@
|
||||
(def message-body
|
||||
{:color colors/white})
|
||||
|
||||
(defn message-container
|
||||
[attachment]
|
||||
(def message-container
|
||||
{:border-radius 12
|
||||
:margin-top 12
|
||||
:padding-horizontal 12
|
||||
:padding-vertical (if (#{:photo :gif} attachment) 12 8)
|
||||
:padding-vertical 8
|
||||
:background-color colors/white-opa-5})
|
||||
|
||||
(def footer-container
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.notifications.activity-log.view
|
||||
(:require [clojure.string :as string]
|
||||
[quo.core :as quo]
|
||||
[quo2.components.buttons.button.view :as button]
|
||||
[quo2.components.buttons.button :as button]
|
||||
[quo2.components.icon :as icon]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.notifications.activity-log.style :as style]
|
||||
@@ -74,8 +74,8 @@
|
||||
context))))
|
||||
|
||||
(defn- activity-message
|
||||
[{:keys [title body title-number-of-lines body-number-of-lines attachment]}]
|
||||
[rn/view {:style (style/message-container attachment)}
|
||||
[{:keys [title body title-number-of-lines body-number-of-lines]}]
|
||||
[rn/view {:style style/message-container}
|
||||
(when title
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
@@ -150,8 +150,8 @@
|
||||
[activity-reply-text-input props reply-input])
|
||||
(when items
|
||||
[rn/view style/footer-container
|
||||
(for [item items]
|
||||
^{:key (:key item)}
|
||||
(for [{:keys [key] :as item} items]
|
||||
^{:key key}
|
||||
[footer-item-view item replying? reply-input])])])))
|
||||
|
||||
(defn view
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
(ns quo2.components.notifications.activity-logs-photos.style)
|
||||
|
||||
(def photos-container
|
||||
{:flex 1
|
||||
:height 40
|
||||
:flex-direction :row})
|
||||
|
||||
(defn photo
|
||||
[index]
|
||||
{:width 40
|
||||
:height 40
|
||||
:border-radius 10
|
||||
:margin-left (if (= index 0) 0 8)})
|
||||
@@ -1,14 +0,0 @@
|
||||
(ns quo2.components.notifications.activity-logs-photos.view
|
||||
(:require [react-native.core :as rn]
|
||||
[quo2.components.notifications.activity-logs-photos.style :as style]))
|
||||
|
||||
(defn view
|
||||
[{:keys [photos]}]
|
||||
[rn/view {:style style/photos-container}
|
||||
(map-indexed
|
||||
(fn [index photo]
|
||||
^{:key index}
|
||||
[rn/image
|
||||
{:source photo
|
||||
:style (style/photo index)}])
|
||||
photos)])
|
||||
@@ -1,7 +1,7 @@
|
||||
(ns quo2.components.notifications.count-down-circle
|
||||
(:require [goog.string :as gstring]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.theme :as quo.theme]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.core :as rn]
|
||||
[react-native.svg :as svg]
|
||||
[reagent.core :as reagent]))
|
||||
@@ -30,10 +30,10 @@
|
||||
:path-length path-length}))
|
||||
|
||||
(defn- linear-ease
|
||||
[input-time start goal duration]
|
||||
[time start goal duration]
|
||||
(if (zero? duration)
|
||||
start
|
||||
(-> input-time
|
||||
(-> time
|
||||
(/ duration)
|
||||
(* goal)
|
||||
(+ start))))
|
||||
@@ -48,8 +48,8 @@
|
||||
{:color {:dark colors/neutral-80-opa-40
|
||||
:light colors/white-opa-40}})
|
||||
|
||||
(defn- circle-timer-internal
|
||||
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time theme]}]
|
||||
(defn circle-timer
|
||||
[{:keys [color duration size stroke-width trail-color rotation initial-remaining-time]}]
|
||||
(let [rotation (or rotation :clockwise)
|
||||
duration (or duration 4)
|
||||
stroke-width (or stroke-width 1)
|
||||
@@ -98,10 +98,8 @@
|
||||
[svg/path
|
||||
{:d path
|
||||
:fill :none
|
||||
:stroke (or color (get-in themes [:color theme]))
|
||||
:stroke (or color (get-in themes [:color (theme/get-theme)]))
|
||||
:stroke-linecap :square
|
||||
:stroke-width stroke-width
|
||||
:stroke-dasharray path-length
|
||||
:stroke-dashoffset (linear-ease @display-time 0 path-length duration)}])]])})))
|
||||
|
||||
(def circle-timer (quo.theme/with-theme circle-timer-internal))
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user