Compare commits
8
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Omar Basem
|
a35489d1c5 | ||
|
Omar Basem
|
3d584bcf3f | ||
|
Omar Basem
|
61417c57d7 | ||
|
Omar Basem
|
eab026c89c | ||
|
Omar Basem
|
9a91d994b7 | ||
|
Omar Basem
|
c0079f3cac | ||
|
Omar Basem
|
4fc7a2e0bb | ||
|
Omar Basem
|
9b00955345 |
@@ -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:MobileBugfixesMVP
|
||||
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)
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
{:host "localhost" :port 59423}
|
||||
+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);
|
||||
}
|
||||
|
||||
@@ -1041,7 +1041,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 +1065,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 +1073,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);
|
||||
|
||||
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 |
@@ -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]
|
||||
|
||||
@@ -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,18 +1,17 @@
|
||||
(ns quo2.components.avatars.user-avatar.view
|
||||
(:require [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))
|
||||
|
||||
(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
|
||||
@@ -21,12 +20,12 @@
|
||||
|
||||
(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 +49,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))
|
||||
@@ -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,4 +1,5 @@
|
||||
(ns quo2.components.buttons.button.style)
|
||||
(ns quo2.components.buttons.button.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(def blur-view
|
||||
{:position :absolute
|
||||
@@ -7,97 +8,254 @@
|
||||
: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
|
||||
(defn before-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}))
|
||||
(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 icon-right-icon-style
|
||||
(defn after-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}))
|
||||
(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)})))
|
||||
|
||||
(defn themes
|
||||
[customization-color]
|
||||
{:light
|
||||
{:primary {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default (colors/custom-color customization-color 50)
|
||||
:pressed (colors/custom-color customization-color 60)
|
||||
:disabled (colors/custom-color customization-color 50)}}
|
||||
:secondary {:icon-color colors/primary-50
|
||||
:label-color colors/primary-50
|
||||
:background-color {:default colors/primary-50-opa-20
|
||||
:pressed colors/primary-50-opa-40
|
||||
:disabled colors/primary-50-opa-20}}
|
||||
:grey {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-10
|
||||
:pressed colors/neutral-20
|
||||
:disabled colors/neutral-10}}
|
||||
:dark-grey {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-20
|
||||
:pressed colors/neutral-30
|
||||
:disabled colors/neutral-20}}
|
||||
:outline {:icon-color colors/neutral-50
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:border-color {:default colors/neutral-30
|
||||
:pressed colors/neutral-40
|
||||
:disabled colors/neutral-30}}
|
||||
:ghost {:icon-color colors/neutral-50
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:pressed colors/neutral-10}}
|
||||
:danger {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/danger-50
|
||||
:pressed colors/danger-60
|
||||
:disabled colors/danger-50}}
|
||||
:positive {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/success-50
|
||||
:pressed colors/success-60
|
||||
:disabled colors/success-50-opa-30}}
|
||||
:photo-bg {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-80-opa-40
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/white-opa-40
|
||||
:pressed colors/white-opa-50
|
||||
:disabled colors/white-opa-40}}
|
||||
:blur-bg {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-80-opa-40
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-80-opa-5
|
||||
:pressed colors/neutral-80-opa-10
|
||||
:disabled colors/neutral-80-opa-5}}
|
||||
:blurred {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-100
|
||||
:icon-background-color {:default colors/neutral-20
|
||||
:blurred colors/neutral-80-opa-10}
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-10
|
||||
:pressed colors/neutral-10
|
||||
:disabled colors/neutral-10-opa-10-blur}
|
||||
:blur-overlay-color colors/neutral-10-opa-40-blur
|
||||
:blur-type :light}
|
||||
:blur-bg-outline {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-80-opa-40
|
||||
:label-color colors/neutral-100
|
||||
:border-color {:default colors/neutral-80-opa-10
|
||||
:pressed colors/neutral-80-opa-20
|
||||
:disabled colors/neutral-80-opa-10}}
|
||||
:shell {:icon-color colors/white
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-95
|
||||
:pressed colors/neutral-95
|
||||
:disabled colors/neutral-95}}}
|
||||
:dark
|
||||
{:primary {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default (colors/custom-color customization-color 60)
|
||||
:pressed (colors/custom-color customization-color 50)
|
||||
:disabled (colors/custom-color customization-color 60)}}
|
||||
:secondary {:icon-color colors/primary-50
|
||||
:label-color colors/primary-50
|
||||
:background-color {:default colors/primary-50-opa-20
|
||||
:pressed colors/primary-50-opa-30
|
||||
:disabled colors/primary-50-opa-20}}
|
||||
:grey {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-90
|
||||
:pressed colors/neutral-60
|
||||
:disabled colors/neutral-90}}
|
||||
:dark-grey {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-70
|
||||
:pressed colors/neutral-60
|
||||
:disabled colors/neutral-70}}
|
||||
:outline {:icon-color colors/neutral-40
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:border-color {:default colors/neutral-70
|
||||
:pressed colors/neutral-60
|
||||
:disabled colors/neutral-70}}
|
||||
:ghost {:icon-color colors/neutral-40
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:background-color {:pressed colors/neutral-80}}
|
||||
:danger {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/danger-60
|
||||
:pressed colors/danger-50
|
||||
:disabled colors/danger-60}}
|
||||
:positive {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/success-60
|
||||
:pressed colors/success-50
|
||||
:disabled colors/success-60-opa-30}}
|
||||
:photo-bg {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-30
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-80-opa-40
|
||||
:pressed colors/neutral-80-opa-50
|
||||
:disabled colors/neutral-80-opa-40}}
|
||||
:blur-bg {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/white-opa-5
|
||||
:pressed colors/white-opa-10
|
||||
:disabled colors/white-opa-5}}
|
||||
:blurred {:icon-color colors/white
|
||||
:icon-secondary-color colors/white
|
||||
:icon-background-color {:default colors/neutral-80
|
||||
:blurred colors/white-opa-10}
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-90
|
||||
:pressed colors/neutral-90
|
||||
:disabled colors/neutral-90-opa-10-blur}
|
||||
:blur-overlay-color colors/neutral-80-opa-40
|
||||
:blur-type :dark}
|
||||
:blur-bg-outline {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-40
|
||||
:label-color colors/white
|
||||
:border-color {:default colors/white-opa-10
|
||||
:pressed colors/white-opa-20
|
||||
:disabled colors/white-opa-5}}
|
||||
:shell {:icon-color colors/white
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-95}}}})
|
||||
|
||||
(defn shape-style-container
|
||||
[size border-radius]
|
||||
[type icon size]
|
||||
{:height size
|
||||
:border-radius (if border-radius
|
||||
border-radius
|
||||
:border-radius (if (and icon (#{:primary :secondary :danger} type))
|
||||
24
|
||||
(case size
|
||||
56 12
|
||||
40 12
|
||||
32 10
|
||||
8))})
|
||||
24 8))})
|
||||
|
||||
(defn style-container
|
||||
[{:keys [size disabled border-radius background-color border-color icon-only? icon-above width
|
||||
icon-left icon-right]}]
|
||||
[{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
|
||||
(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)
|
||||
:flex-direction (if above :column :row)
|
||||
:padding-horizontal (when-not (or icon before after)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
:padding-left (when-not (or icon-only? icon-left)
|
||||
24 8))
|
||||
:padding-left (when-not (or icon before)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
:padding-right (when-not (or icon-only? icon-right)
|
||||
24 8))
|
||||
:padding-right (when-not (or icon after)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
8))
|
||||
:padding-top (when-not (or icon-only? icon-left icon-right)
|
||||
24 8))
|
||||
:padding-top (when-not (or icon before after)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
3))
|
||||
:padding-bottom (when-not (or icon-only? icon-left icon-right)
|
||||
24 3))
|
||||
:padding-bottom (when-not (or icon before after)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
4))
|
||||
:overflow :hidden
|
||||
:background-color background-color}
|
||||
(shape-style-container size border-radius)
|
||||
24 4))
|
||||
:overflow :hidden}
|
||||
(when (or (and (= type :blurred) (not blur-active?))
|
||||
(not= type :blurred))
|
||||
{:background-color background-color})
|
||||
(shape-style-container type icon size)
|
||||
(when width
|
||||
{:width width})
|
||||
(when icon-only?
|
||||
(when icon
|
||||
{:width size})
|
||||
(when border-color
|
||||
{:border-color border-color
|
||||
|
||||
@@ -5,116 +5,110 @@
|
||||
[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]))
|
||||
[quo2.components.buttons.button.style :as style]))
|
||||
|
||||
(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
|
||||
{: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
|
||||
:above :icon-keyword
|
||||
:community-color '#FFFFFF'
|
||||
:community-text-color '#000000'
|
||||
: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)]
|
||||
(let [pressed-in (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]
|
||||
[{: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 (cond (= type :primary) :blue
|
||||
(= type :positive) :success
|
||||
(= type :danger) :danger
|
||||
:else nil)}}
|
||||
customization-color :primary
|
||||
blur-active? true}}
|
||||
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)
|
||||
(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
|
||||
{: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}
|
||||
(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 size border-radius)
|
||||
(style/shape-style-container type icon size)
|
||||
{:width width}
|
||||
container-style)}
|
||||
style)}
|
||||
[rn/view
|
||||
{:style (merge
|
||||
(style/style-container {:size size
|
||||
(style/style-container {:type type
|
||||
: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
|
||||
(or override-background-color (get background-color state))
|
||||
:border-color
|
||||
(get border-color state)
|
||||
:icon icon
|
||||
:above above
|
||||
:width width
|
||||
:icon-left icon-left
|
||||
:icon-right icon-right})
|
||||
:before before
|
||||
:after after
|
||||
:blur-active? blur-active?})
|
||||
(when (= state :pressed) {:opacity 0.9})
|
||||
inner-style)}
|
||||
(when customization-color
|
||||
[customization-colors/overlay
|
||||
{:customization-color customization-color
|
||||
:theme theme
|
||||
:pressed? @pressed?}])
|
||||
(when (= background :photo)
|
||||
(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 icon-above
|
||||
(when above
|
||||
[rn/view
|
||||
[quo2.icons/icon icon-above
|
||||
[quo2.icons/icon above
|
||||
{:container-style {:margin-bottom 2}
|
||||
:color icon-secondary-color
|
||||
:size icon-size}]])
|
||||
(when icon-left
|
||||
(when before
|
||||
[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
|
||||
{: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
|
||||
icon-only?
|
||||
(or icon icon-no-color)
|
||||
[quo2.icons/icon children
|
||||
{:color icon-color
|
||||
:size icon-size}]
|
||||
{:color icon-color
|
||||
:no-color icon-no-color
|
||||
:size icon-size}]
|
||||
|
||||
(string? children)
|
||||
[text/text
|
||||
@@ -122,18 +116,23 @@
|
||||
:weight :medium
|
||||
:number-of-lines 1
|
||||
:style {:color label-color}}
|
||||
|
||||
children]
|
||||
|
||||
(vector? children)
|
||||
children)]
|
||||
(when icon-right
|
||||
(when after
|
||||
[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}]])]]]))))
|
||||
{: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,12 +1,10 @@
|
||||
(ns quo2.components.dropdowns.dropdown
|
||||
(:require [quo2.components.dropdowns.old-button-view :as old-button]))
|
||||
(:require [quo2.components.buttons.button.view :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,264 +0,0 @@
|
||||
(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)})))
|
||||
|
||||
(defn themes
|
||||
[customization-color]
|
||||
{:light
|
||||
{:primary {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default (colors/custom-color customization-color 50)
|
||||
:pressed (colors/custom-color customization-color 60)
|
||||
:disabled (colors/custom-color customization-color 50)}}
|
||||
:secondary {:icon-color colors/primary-50
|
||||
:label-color colors/primary-50
|
||||
:background-color {:default colors/primary-50-opa-20
|
||||
:pressed colors/primary-50-opa-40
|
||||
:disabled colors/primary-50-opa-20}}
|
||||
:grey {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-10
|
||||
:pressed colors/neutral-20
|
||||
:disabled colors/neutral-10}}
|
||||
:dark-grey {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-20
|
||||
:pressed colors/neutral-30
|
||||
:disabled colors/neutral-20}}
|
||||
:outline {:icon-color colors/neutral-50
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:border-color {:default colors/neutral-30
|
||||
:pressed colors/neutral-40
|
||||
:disabled colors/neutral-30}}
|
||||
:ghost {:icon-color colors/neutral-50
|
||||
:icon-secondary-color colors/neutral-50
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:pressed colors/neutral-10}}
|
||||
:danger {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/danger-50
|
||||
:pressed colors/danger-60
|
||||
:disabled colors/danger-50}}
|
||||
:positive {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/success-50
|
||||
:pressed colors/success-60
|
||||
:disabled colors/success-50-opa-30}}
|
||||
:photo-bg {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-80-opa-40
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/white-opa-40
|
||||
:pressed colors/white-opa-50
|
||||
:disabled colors/white-opa-40}}
|
||||
:blur-bg {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-80-opa-40
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-80-opa-5
|
||||
:pressed colors/neutral-80-opa-10
|
||||
:disabled colors/neutral-80-opa-5}}
|
||||
:blurred {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-100
|
||||
:icon-background-color {:default colors/neutral-20
|
||||
:blurred colors/neutral-80-opa-10}
|
||||
:label-color colors/neutral-100
|
||||
:background-color {:default colors/neutral-10
|
||||
:pressed colors/neutral-10
|
||||
:disabled colors/neutral-10-opa-10-blur}
|
||||
:blur-overlay-color colors/neutral-10-opa-40-blur
|
||||
:blur-type :light}
|
||||
:blur-bg-outline {:icon-color colors/neutral-100
|
||||
:icon-secondary-color colors/neutral-80-opa-40
|
||||
:label-color colors/neutral-100
|
||||
:border-color {:default colors/neutral-80-opa-10
|
||||
:pressed colors/neutral-80-opa-20
|
||||
:disabled colors/neutral-80-opa-10}}
|
||||
:shell {:icon-color colors/white
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-95
|
||||
:pressed colors/neutral-95
|
||||
:disabled colors/neutral-95}}}
|
||||
:dark
|
||||
{:primary {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default (colors/custom-color customization-color 60)
|
||||
:pressed (colors/custom-color customization-color 50)
|
||||
:disabled (colors/custom-color customization-color 60)}}
|
||||
:secondary {:icon-color colors/primary-50
|
||||
:label-color colors/primary-50
|
||||
:background-color {:default colors/primary-50-opa-20
|
||||
:pressed colors/primary-50-opa-30
|
||||
:disabled colors/primary-50-opa-20}}
|
||||
:grey {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-90
|
||||
:pressed colors/neutral-60
|
||||
:disabled colors/neutral-90}}
|
||||
:dark-grey {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-70
|
||||
:pressed colors/neutral-60
|
||||
:disabled colors/neutral-70}}
|
||||
:outline {:icon-color colors/neutral-40
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:border-color {:default colors/neutral-70
|
||||
:pressed colors/neutral-60
|
||||
:disabled colors/neutral-70}}
|
||||
:ghost {:icon-color colors/neutral-40
|
||||
:icon-secondary-color colors/neutral-40
|
||||
:label-color colors/white
|
||||
:background-color {:pressed colors/neutral-80}}
|
||||
:danger {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/danger-60
|
||||
:pressed colors/danger-50
|
||||
:disabled colors/danger-60}}
|
||||
:positive {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/success-60
|
||||
:pressed colors/success-50
|
||||
:disabled colors/success-60-opa-30}}
|
||||
:photo-bg {:icon-color colors/white
|
||||
:icon-secondary-color colors/neutral-30
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-80-opa-40
|
||||
:pressed colors/neutral-80-opa-50
|
||||
:disabled colors/neutral-80-opa-40}}
|
||||
:blur-bg {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-70
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/white-opa-5
|
||||
:pressed colors/white-opa-10
|
||||
:disabled colors/white-opa-5}}
|
||||
:blurred {:icon-color colors/white
|
||||
:icon-secondary-color colors/white
|
||||
:icon-background-color {:default colors/neutral-80
|
||||
:blurred colors/white-opa-10}
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-90
|
||||
:pressed colors/neutral-90
|
||||
:disabled colors/neutral-90-opa-10-blur}
|
||||
:blur-overlay-color colors/neutral-80-opa-40
|
||||
:blur-type :dark}
|
||||
:blur-bg-outline {:icon-color colors/white
|
||||
:icon-secondary-color colors/white-opa-40
|
||||
:label-color colors/white
|
||||
:border-color {:default colors/white-opa-10
|
||||
:pressed colors/white-opa-20
|
||||
:disabled colors/white-opa-5}}
|
||||
:shell {:icon-color colors/white
|
||||
:label-color colors/white
|
||||
:background-color {:default colors/neutral-95}}}})
|
||||
|
||||
(defn shape-style-container
|
||||
[type icon size]
|
||||
{:height size
|
||||
:border-radius (if (and icon (#{:primary :secondary :danger} type))
|
||||
24
|
||||
(case size
|
||||
56 12
|
||||
40 12
|
||||
32 10
|
||||
24 8))})
|
||||
|
||||
(defn style-container
|
||||
[{:keys [type size disabled background-color border-color icon above width before after blur-active?]}]
|
||||
(merge {:height size
|
||||
:align-items :center
|
||||
:justify-content :center
|
||||
:flex-direction (if above :column :row)
|
||||
:padding-horizontal (when-not (or icon before after)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
24 8))
|
||||
:padding-left (when-not (or icon before)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
24 8))
|
||||
:padding-right (when-not (or icon after)
|
||||
(case size
|
||||
56 16
|
||||
40 16
|
||||
32 12
|
||||
24 8))
|
||||
:padding-top (when-not (or icon before after)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
24 3))
|
||||
:padding-bottom (when-not (or icon before after)
|
||||
(case size
|
||||
56 0
|
||||
40 9
|
||||
32 5
|
||||
24 4))
|
||||
:overflow :hidden}
|
||||
(when (or (and (= type :blurred) (not blur-active?))
|
||||
(not= type :blurred))
|
||||
{:background-color background-color})
|
||||
(shape-style-container type icon size)
|
||||
(when width
|
||||
{:width width})
|
||||
(when icon
|
||||
{:width size})
|
||||
(when border-color
|
||||
{:border-color border-color
|
||||
:border-width 1})
|
||||
(when disabled
|
||||
{:opacity 0.3})))
|
||||
@@ -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))
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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)))
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
[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
|
||||
|
||||
@@ -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))))
|
||||
|
||||
@@ -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]))
|
||||
@@ -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))
|
||||
|
||||
@@ -3,12 +3,10 @@
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.foundations.shadows :as shadows]))
|
||||
|
||||
(defn box-container
|
||||
[theme]
|
||||
(merge (shadows/get 1 theme)
|
||||
{:margin-horizontal 12
|
||||
:border-radius 12
|
||||
:overflow :hidden}))
|
||||
(def box-container
|
||||
{:margin-horizontal 12
|
||||
:border-radius 12
|
||||
:overflow :hidden})
|
||||
|
||||
(def blur-container
|
||||
{:height "100%"
|
||||
@@ -21,33 +19,35 @@
|
||||
|
||||
(defn content-container
|
||||
[theme]
|
||||
{:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
|
||||
:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:padding-vertical 8
|
||||
:padding-left 10
|
||||
:padding-right 8
|
||||
:border-radius 12})
|
||||
(merge
|
||||
(shadows/get 1 theme)
|
||||
{:background-color (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
|
||||
:flex-direction :row
|
||||
:justify-content :space-between
|
||||
:padding-vertical 8
|
||||
:padding-left 10
|
||||
:padding-right 8
|
||||
:border-radius 12}))
|
||||
|
||||
(defn title
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/white colors/neutral-100 theme)})
|
||||
[override-theme]
|
||||
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
|
||||
|
||||
(defn text
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/white colors/neutral-100 theme)})
|
||||
[override-theme]
|
||||
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)})
|
||||
|
||||
(defn icon
|
||||
[theme]
|
||||
{:color (colors/theme-colors colors/white colors/neutral-100 theme)
|
||||
[override-theme]
|
||||
{:color (colors/theme-colors colors/white colors/neutral-100 override-theme)
|
||||
:container-style {:width 20 :height 20}})
|
||||
|
||||
(def left-side-container {:padding 2})
|
||||
(def right-side-container {:padding 4 :flex 1})
|
||||
|
||||
(defn action-container
|
||||
[theme]
|
||||
{:background-color (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 theme)
|
||||
[override-theme]
|
||||
{:background-color (colors/theme-colors colors/white-opa-5 colors/neutral-80-opa-5 override-theme)
|
||||
:flex-direction :row
|
||||
:padding-vertical 3
|
||||
:padding-horizontal 8
|
||||
|
||||
@@ -4,40 +4,33 @@
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.notifications.count-down-circle :as count-down-circle]
|
||||
[quo2.components.notifications.toast.style :as style]
|
||||
[quo2.theme :as quo.theme]
|
||||
[quo2.theme :as theme]
|
||||
[react-native.blur :as blur]
|
||||
[react-native.core :as rn]
|
||||
[utils.i18n :as i18n]))
|
||||
|
||||
(defn toast-action-container
|
||||
[{:keys [on-press style theme]} & children]
|
||||
[{:keys [on-press style]} & children]
|
||||
[rn/touchable-highlight
|
||||
{:on-press on-press
|
||||
:underlay-color :transparent}
|
||||
[into
|
||||
[rn/view
|
||||
{:style (merge (style/action-container theme) style)}]
|
||||
{:style (merge (style/action-container (theme/get-theme)) style)}]
|
||||
children]])
|
||||
|
||||
(defn toast-undo-action-internal
|
||||
[{:keys [undo-duration undo-on-press theme]}]
|
||||
[toast-action-container
|
||||
{:on-press undo-on-press
|
||||
:accessibility-label :toast-undo-action
|
||||
:theme theme}
|
||||
(defn toast-undo-action
|
||||
[duration on-press override-theme]
|
||||
[toast-action-container {:on-press on-press :accessibility-label :toast-undo-action}
|
||||
[rn/view {:style {:margin-right 5}}
|
||||
[count-down-circle/circle-timer {:duration undo-duration}]]
|
||||
[count-down-circle/circle-timer {:duration duration}]]
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/text theme)}
|
||||
{:size :paragraph-2 :weight :medium :style (style/text override-theme)}
|
||||
[i18n/label :t/undo]]])
|
||||
|
||||
(def ^:private toast-undo-action (quo.theme/with-theme toast-undo-action-internal))
|
||||
|
||||
(defn- toast-container-internal
|
||||
[{:keys [left title text right container-style theme]}]
|
||||
[rn/view {:style (merge (style/box-container theme) container-style)}
|
||||
(defn- toast-container
|
||||
[{:keys [left title text right container-style override-theme]}]
|
||||
[rn/view {:style (merge style/box-container container-style)}
|
||||
[blur/view
|
||||
{:style style/blur-container
|
||||
:blur-amount 13
|
||||
@@ -45,7 +38,7 @@
|
||||
:blur-type :transparent
|
||||
:overlay-color :transparent}]
|
||||
|
||||
[rn/view {:style (style/content-container theme)}
|
||||
[rn/view {:style (style/content-container override-theme)}
|
||||
[rn/view {:style style/left-side-container}
|
||||
left]
|
||||
[rn/view {:style style/right-side-container}
|
||||
@@ -53,39 +46,34 @@
|
||||
[text/text
|
||||
{:size :paragraph-1
|
||||
:weight :semi-bold
|
||||
:style (style/title theme)
|
||||
:style (style/title override-theme)
|
||||
:accessibility-label :toast-title}
|
||||
title])
|
||||
(when text
|
||||
[text/text
|
||||
{:size :paragraph-2
|
||||
:weight :medium
|
||||
:style (style/text theme)
|
||||
:style (style/text override-theme)
|
||||
:accessibility-label :toast-content}
|
||||
text])]
|
||||
right]])
|
||||
|
||||
(def ^:private toast-container (quo.theme/with-theme toast-container-internal))
|
||||
|
||||
(defn toast
|
||||
[{:keys [icon icon-color title text action undo-duration undo-on-press container-style
|
||||
theme user]}]
|
||||
(let [context-theme (or theme (quo.theme/get-theme))]
|
||||
[quo.theme/provider {:theme context-theme}
|
||||
[toast-container
|
||||
{:left (cond icon
|
||||
[icon/icon icon
|
||||
(cond-> (style/icon context-theme)
|
||||
icon-color
|
||||
(assoc :color icon-color))]
|
||||
override-theme user]}]
|
||||
[toast-container
|
||||
{:left (cond icon
|
||||
[icon/icon icon
|
||||
(cond-> (style/icon override-theme)
|
||||
icon-color
|
||||
(assoc :color icon-color))]
|
||||
|
||||
user
|
||||
[user-avatar/user-avatar user])
|
||||
:title title
|
||||
:text text
|
||||
:right (if undo-duration
|
||||
[toast-undo-action
|
||||
{:undo-duration undo-duration
|
||||
:undo-on-press undo-on-press}]
|
||||
action)
|
||||
:container-style container-style}]]))
|
||||
user
|
||||
[user-avatar/user-avatar user])
|
||||
:title title
|
||||
:text text
|
||||
:right (if undo-duration
|
||||
[toast-undo-action undo-duration undo-on-press override-theme]
|
||||
action)
|
||||
:container-style container-style
|
||||
:override-theme override-theme}])
|
||||
|
||||
@@ -73,8 +73,7 @@
|
||||
(when show-options-button?
|
||||
[button/button
|
||||
{:size 32
|
||||
:type :grey
|
||||
:background :blur
|
||||
:type :blur-bg
|
||||
:icon true
|
||||
:style style/option-button
|
||||
:on-press on-options-press
|
||||
|
||||
@@ -42,14 +42,7 @@
|
||||
(colors/theme-colors colors/neutral-100 colors/white override-theme))
|
||||
|
||||
(def community-tag
|
||||
{:padding-vertical 2
|
||||
:padding-left 2})
|
||||
|
||||
(def community-tag-text-container
|
||||
{:margin-left 4
|
||||
:flex 1
|
||||
:flex-direction :row
|
||||
:align-items :center})
|
||||
{:padding-vertical 2})
|
||||
|
||||
(defn community-tag-text
|
||||
[override-theme]
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
(ns quo2.components.tags.context-tag.view
|
||||
(:require [quo2.components.avatars.group-avatar :as group-avatar]
|
||||
[quo2.components.avatars.user-avatar.style :as user-avatar-style]
|
||||
[quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
(:require [quo2.components.avatars.user-avatar.view :as user-avatar]
|
||||
[quo2.components.avatars.group-avatar :as group-avatar]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.markdown.text :as text]
|
||||
[quo2.components.tags.context-tag.style :as style]
|
||||
[quo2.components.avatars.user-avatar.style :as user-avatar-style]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn trim-public-key
|
||||
@@ -40,39 +40,31 @@
|
||||
(trim-public-key public-key)]])
|
||||
|
||||
(defn context-tag
|
||||
[{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text?]
|
||||
:as props}
|
||||
photo
|
||||
name
|
||||
channel-name]
|
||||
(let [text-props {:weight :medium
|
||||
:size :paragraph-2
|
||||
:style (assoc text-style :justify-content :center)
|
||||
:number-of-lines 1
|
||||
:ellipsize-mode :tail}
|
||||
[{:keys [text-style blur? no-avatar-placeholder?] :as params} photo name channel-name]
|
||||
(let [text-params {:weight :medium
|
||||
:size :paragraph-2
|
||||
:style (assoc text-style :justify-content :center)}
|
||||
empty-photo? (nil? photo)
|
||||
avatar-size :xxs
|
||||
avatar-outer-size (get-in user-avatar-style/sizes [avatar-size :outer])]
|
||||
[base-tag (update-in props [:style :padding-left] #(or % 3))
|
||||
(if (and empty-photo? no-avatar-placeholder?)
|
||||
[rn/view {:style {:width avatar-outer-size}}]
|
||||
[user-avatar/user-avatar
|
||||
{:full-name name
|
||||
:profile-picture photo
|
||||
:size avatar-size
|
||||
:status-indicator? false}])
|
||||
[rn/view {:style (or text-container-style style/context-tag-text-container)}
|
||||
(if ellipsize-text?
|
||||
[rn/view {:style {:flex 1}}
|
||||
[text/text text-props name]]
|
||||
[text/text text-props (str " " name)])
|
||||
(when channel-name
|
||||
[:<>
|
||||
[icons/icon
|
||||
:i/chevron-right
|
||||
{:color (style/context-tag-icon-color blur?)
|
||||
:size 16}]
|
||||
[text/text text-props (str "# " channel-name)]])]]))
|
||||
[rn/view {:flex-direction :row}
|
||||
[base-tag (assoc-in params [:style :padding-left] 3)
|
||||
(if (and empty-photo? no-avatar-placeholder?)
|
||||
[rn/view {:style {:width avatar-outer-size}}]
|
||||
[user-avatar/user-avatar
|
||||
{:full-name name
|
||||
:profile-picture photo
|
||||
:size avatar-size
|
||||
:status-indicator? false}])
|
||||
[rn/view {:style style/context-tag-text-container}
|
||||
[text/text text-params (str " " name)]
|
||||
(when channel-name
|
||||
[:<>
|
||||
[icons/icon
|
||||
:i/chevron-right
|
||||
{:color (style/context-tag-icon-color blur?)
|
||||
:size 16}]
|
||||
[text/text text-params (str "# " channel-name)]])]]]))
|
||||
|
||||
(defn user-avatar-tag
|
||||
[params username photo]
|
||||
@@ -96,10 +88,8 @@
|
||||
(defn community-tag
|
||||
[avatar community-name {:keys [override-theme] :as params}]
|
||||
[context-tag
|
||||
(merge {:style style/community-tag
|
||||
:text-style (style/community-tag-text override-theme)
|
||||
:text-container-style style/community-tag-text-container
|
||||
:ellipsize-text? true}
|
||||
(merge {:style style/community-tag
|
||||
:text-style (style/community-tag-text override-theme)}
|
||||
params)
|
||||
avatar
|
||||
community-name])
|
||||
|
||||
@@ -12,7 +12,6 @@
|
||||
quo2.components.buttons.dynamic-button
|
||||
quo2.components.buttons.predictive-keyboard.view
|
||||
quo2.components.buttons.slide-button.view
|
||||
quo2.components.browser.browser-input.view
|
||||
quo2.components.code.snippet
|
||||
quo2.components.colors.color-picker.view
|
||||
quo2.components.common.separator.view
|
||||
@@ -63,7 +62,6 @@
|
||||
quo2.components.navigation.floating-shell-button
|
||||
quo2.components.navigation.page-nav
|
||||
quo2.components.notifications.activity-log.view
|
||||
quo2.components.notifications.activity-logs-photos.view
|
||||
quo2.components.notifications.count-down-circle
|
||||
quo2.components.notifications.info-count
|
||||
quo2.components.notifications.notification-dot
|
||||
@@ -140,9 +138,6 @@
|
||||
(def predictive-keyboard quo2.components.buttons.predictive-keyboard.view/view)
|
||||
(def slide-button quo2.components.buttons.slide-button.view/view)
|
||||
|
||||
;;;; BROWSER
|
||||
(def browser-input quo2.components.browser.browser-input.view/browser-input)
|
||||
|
||||
;;;; CODE
|
||||
(def snippet quo2.components.code.snippet/snippet)
|
||||
|
||||
@@ -215,7 +210,6 @@
|
||||
|
||||
;;;; NOTIFICATIONS
|
||||
(def activity-log quo2.components.notifications.activity-log.view/view)
|
||||
(def activity-logs-photos quo2.components.notifications.activity-logs-photos.view/view)
|
||||
(def info-count quo2.components.notifications.info-count/info-count)
|
||||
(def notification-dot quo2.components.notifications.notification-dot/notification-dot)
|
||||
(def count-down-circle quo2.components.notifications.count-down-circle/circle-timer)
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
[quo2.components.buttons.button.component-spec]
|
||||
[quo2.components.buttons.predictive-keyboard.component-spec]
|
||||
[quo2.components.buttons.slide-button.component-spec]
|
||||
[quo2.components.browser.browser-input.component-spec]
|
||||
[quo2.components.colors.color-picker.component-spec]
|
||||
[quo2.components.counter.--tests--.counter-component-spec]
|
||||
[quo2.components.counter.step.component-spec]
|
||||
|
||||
@@ -136,8 +136,6 @@
|
||||
;;Solid
|
||||
(def black "#000000")
|
||||
(def black-opa-0 (alpha black 0))
|
||||
(def black-opa-30 (alpha black 0.3))
|
||||
(def black-opa-60 (alpha black 0.6))
|
||||
(def onboarding-header-black "#000716")
|
||||
|
||||
;;;;Primary
|
||||
@@ -182,8 +180,6 @@
|
||||
(def danger-50 "#E95460")
|
||||
(def danger-60 "#BA434D")
|
||||
|
||||
(def system-yellow "#FFD60A")
|
||||
|
||||
;;50 with transparency
|
||||
(def danger-50-opa-5 (alpha danger-50 0.05))
|
||||
(def danger-50-opa-10 (alpha danger-50 0.1))
|
||||
@@ -248,13 +244,11 @@
|
||||
([color suffix]
|
||||
(custom-color color suffix nil))
|
||||
([color suffix opacity]
|
||||
(let [hex? (not (keyword? color))
|
||||
color-keyword (keyword color)
|
||||
(let [color-keyword (keyword color)
|
||||
base-color (get-in colors-map
|
||||
[color-keyword suffix])]
|
||||
(if hex?
|
||||
color
|
||||
(if opacity (alpha base-color (/ opacity 100)) base-color)))))))
|
||||
[color-keyword suffix]
|
||||
color)]
|
||||
(if opacity (alpha base-color (/ opacity 100)) base-color))))))
|
||||
|
||||
(defn custom-color-by-theme
|
||||
"(custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark)
|
||||
@@ -262,14 +256,11 @@
|
||||
suffix-light 50/60
|
||||
suffix-dark 50/60
|
||||
opacity-light 0-100 (optional)
|
||||
opacity-dark 0-100 (optional)
|
||||
theme :light/:dark (optional)"
|
||||
opacity-dark 0-100 (optional)"
|
||||
([color suffix-light suffix-dark]
|
||||
(custom-color-by-theme color suffix-light suffix-dark nil nil (theme/get-theme)))
|
||||
(custom-color-by-theme color suffix-light suffix-dark nil nil))
|
||||
([color suffix-light suffix-dark opacity-light opacity-dark]
|
||||
(custom-color-by-theme color suffix-light suffix-dark opacity-light opacity-dark (theme/get-theme)))
|
||||
([color suffix-light suffix-dark opacity-light opacity-dark theme]
|
||||
(if (= theme :dark)
|
||||
(if (theme/dark?)
|
||||
(custom-color color suffix-dark opacity-dark)
|
||||
(custom-color color suffix-light opacity-light))))
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
(ns quo2.foundations.customization-colors
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]))
|
||||
|
||||
(defn get-overlay-color
|
||||
[theme pressed? customization-color]
|
||||
(let [community-color (string? customization-color)]
|
||||
(if (or community-color (= theme :light))
|
||||
(colors/alpha colors/black (if pressed? 0.2 0))
|
||||
(colors/alpha colors/black (if pressed? 0 0.2)))))
|
||||
|
||||
(defn overlay
|
||||
[{:keys [theme pressed? customization-color]}]
|
||||
[rn/view
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0
|
||||
:background-color (get-overlay-color theme pressed? customization-color)}])
|
||||
@@ -1,16 +1,8 @@
|
||||
(ns react-native.camera-kit
|
||||
(:require ["react-native-camera-kit" :refer (Camera CameraType)]
|
||||
[reagent.core :as reagent]
|
||||
[oops.core :as oops]
|
||||
[taoensso.timbre :as log]))
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def camera (reagent/adapt-react-class Camera))
|
||||
|
||||
(def camera-type-front (.-Front CameraType))
|
||||
(def camera-type-back (.-Back CameraType))
|
||||
|
||||
(defn capture
|
||||
[^js camera-ref on-success]
|
||||
(-> (.capture camera-ref)
|
||||
(.then #(on-success (oops/oget % :uri)))
|
||||
(.catch #(log/warn "couldn't capture photo" {:error %}))))
|
||||
|
||||
@@ -4,8 +4,8 @@
|
||||
[react-native.share :as share]
|
||||
[react-native.cameraroll :as cameraroll]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im2.config :as config]
|
||||
[react-native.fs :as fs]
|
||||
[status-im2.constants :as constants]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im.utils.platform :as platform]
|
||||
[taoensso.timbre :as log]))
|
||||
@@ -48,7 +48,7 @@
|
||||
[{:keys [db]} chat-id uri]
|
||||
(let [current-chat-id (or chat-id (:current-chat-id db))
|
||||
images (get-in db [:chat/inputs current-chat-id :metadata :sending-image])]
|
||||
(when (and (< (count images) constants/max-album-photos)
|
||||
(when (and (< (count images) config/max-images-batch)
|
||||
(not (get images uri)))
|
||||
{::image-selected [uri current-chat-id]})))
|
||||
|
||||
@@ -68,5 +68,5 @@
|
||||
[{:keys [db]} chat-id]
|
||||
(let [current-chat-id (or chat-id (:current-chat-id db))
|
||||
images (get-in db [:chat/inputs current-chat-id :metadata :sending-image])]
|
||||
(when (< (count images) constants/max-album-photos)
|
||||
(when (< (count images) config/max-images-batch)
|
||||
{::chat-open-image-picker-camera current-chat-id})))
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
(ns status-im.chat.models.mentions
|
||||
(:require [clojure.set :as set]
|
||||
[utils.re-frame :as rf]
|
||||
[taoensso.timbre :as log]
|
||||
[utils.debounce :as debounce]
|
||||
[status-im2.contexts.chat.composer.constants :as constants]))
|
||||
[taoensso.timbre :as log]))
|
||||
|
||||
(defn- transfer-input-segments
|
||||
[segments]
|
||||
@@ -59,22 +57,18 @@
|
||||
mentionable-users))
|
||||
(defn- transfer-mention-result
|
||||
[result]
|
||||
(let [{:keys [input-segments mentionable-users state chat-id new-text call-id call-time]}
|
||||
(let [{:keys [input-segments mentionable-users state chat-id new-text]}
|
||||
(set/rename-keys result
|
||||
{:InputSegments :input-segments
|
||||
:MentionSuggestions :mentionable-users
|
||||
:MentionState :state
|
||||
:ChatID :chat-id
|
||||
:NewText :new-text
|
||||
:CallID :call-id
|
||||
:CallTime :call-time})]
|
||||
:NewText :new-text})]
|
||||
{:chat-id chat-id
|
||||
:input-segments (transfer-input-segments input-segments)
|
||||
:mentionable-users (rename-mentionable-users mentionable-users)
|
||||
:state (rename-state state)
|
||||
:new-text new-text
|
||||
:call-id call-id
|
||||
:call-time call-time}))
|
||||
:new-text new-text}))
|
||||
|
||||
(rf/defn on-error
|
||||
{:events [:mention/on-error]}
|
||||
@@ -104,13 +98,11 @@
|
||||
(assoc-in [:chats/mentions chat-id :mentions] state)
|
||||
(assoc-in [:chat/inputs-with-mentions chat-id] input-segments))}))
|
||||
|
||||
(defonce current-call-id (atom 0))
|
||||
|
||||
(rf/defn on-change-text
|
||||
{:events [:mention/on-change-text]}
|
||||
[{:keys [db]} text]
|
||||
(let [chat-id (:current-chat-id db)
|
||||
params [chat-id text (swap! current-call-id inc) (js/Date.now)]
|
||||
params [chat-id text]
|
||||
method "wakuext_chatMentionOnChangeText"]
|
||||
(log/debug "[mentions] on-change-text" {:params params})
|
||||
{:json-rpc/call [{:method method
|
||||
@@ -124,31 +116,11 @@
|
||||
{:events [:mention/on-change-text-success]}
|
||||
[{:keys [db]} result]
|
||||
(log/debug "[mentions] on-change-text-success" {:result result})
|
||||
(let [{:keys [state chat-id mentionable-users
|
||||
input-segments call-id call-time]} (transfer-mention-result result)]
|
||||
(when (= call-id @current-call-id)
|
||||
(debounce/debounce-and-dispatch [:mention/re-render-text-input
|
||||
{:chat-id chat-id
|
||||
:mentionable-users mentionable-users
|
||||
:state state
|
||||
:input-segments input-segments
|
||||
:call-id call-id
|
||||
:response-time (- (js/Date.now) call-time)}]
|
||||
constants/mention-rerender-debounce-ms)
|
||||
)))
|
||||
|
||||
(rf/defn re-render-text-input
|
||||
{:events [:mention/re-render-text-input]}
|
||||
[{:keys [db]}
|
||||
{:keys [chat-id mentionable-users state input-segments] :as params}]
|
||||
(log/debug "[mentions] re-render-text-input" params)
|
||||
{:db (-> db
|
||||
(assoc-in [:chat/inputs-with-mentions chat-id]
|
||||
input-segments)
|
||||
(assoc-in [:chats/mention-suggestions chat-id]
|
||||
mentionable-users)
|
||||
(assoc-in [:chats/mentions chat-id :mentions]
|
||||
state))})
|
||||
(let [{:keys [state chat-id mentionable-users input-segments]} (transfer-mention-result result)]
|
||||
{:db (-> db
|
||||
(assoc-in [:chats/mention-suggestions chat-id] mentionable-users)
|
||||
(assoc-in [:chats/mentions chat-id :mentions] state)
|
||||
(assoc-in [:chat/inputs-with-mentions chat-id] input-segments))}))
|
||||
|
||||
(rf/defn on-select-mention-success
|
||||
{:events [:mention/on-select-mention-success]}
|
||||
|
||||
@@ -307,7 +307,7 @@
|
||||
|
||||
(defn login
|
||||
[args]
|
||||
(native-module/login-with-keycard (assoc args :node-config {:ProcessBackedupMessages false})))
|
||||
(native-module/login-with-keycard args))
|
||||
|
||||
(defn send-transaction-with-signature
|
||||
[{:keys [transaction signature on-completed]}]
|
||||
|
||||
@@ -75,7 +75,7 @@
|
||||
(assoc :recovered-account? true))
|
||||
:keycard/check-nfc-enabled nil}
|
||||
(bottom-sheet/hide-bottom-sheet-old)
|
||||
(navigation/navigate-to-within-stack [:keycard-recovery-intro :new-to-status])))
|
||||
(navigation/navigate-to :keycard-recovery-intro nil)))
|
||||
|
||||
(rf/defn access-key-pressed
|
||||
{:events [:multiaccounts.recover.ui/recover-multiaccount-button-pressed]}
|
||||
@@ -253,8 +253,7 @@
|
||||
encryption-pass
|
||||
#(let [{:keys [error]} (types/json->clj %)]
|
||||
(if (string/blank? error)
|
||||
(native-module/login-with-keycard
|
||||
(assoc login-params :node-config {:ProcessBackedupMessages true}))
|
||||
(native-module/login-with-keycard login-params)
|
||||
(throw
|
||||
(js/Error.
|
||||
"Please shake the phone to report this error and restart the app. Migration failed unexpectedly.")))))))
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
(ns status-im2.common.device-permissions
|
||||
(:require
|
||||
[quo2.foundations.colors :as colors]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn camera
|
||||
[on-allowed]
|
||||
(rf/dispatch
|
||||
[:request-permissions
|
||||
{:permissions [:camera]
|
||||
:on-allowed on-allowed
|
||||
:on-denied #(rf/dispatch
|
||||
[:toasts/upsert
|
||||
{:icon :i/info
|
||||
:icon-color colors/danger-50
|
||||
:theme :dark
|
||||
:text (i18n/label :t/camera-permission-denied)}])}]))
|
||||
@@ -135,7 +135,9 @@
|
||||
:unmute-chat
|
||||
:mute-chat))
|
||||
:sub-label (when (and muted? (some? muted-till))
|
||||
(i18n/label :t/muted-until {:duration (format-mute-till muted-till)}))
|
||||
(str (i18n/label :t/muted-until)
|
||||
" "
|
||||
(format-mute-till muted-till)))
|
||||
:on-press (if muted?
|
||||
#(unmute-chat-action chat-id)
|
||||
#(mute-chat-action chat-id chat-type muted?))
|
||||
@@ -217,7 +219,7 @@
|
||||
(rf/dispatch [:hide-bottom-sheet])
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:id :remove-nickname
|
||||
:icon :i/correct
|
||||
:icon :correct
|
||||
:icon-color (colors/theme-colors colors/success-60
|
||||
colors/success-50)
|
||||
:text (i18n/label
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
(def snoopy-enabled? (enabled? (get-config :SNOOPY 0)))
|
||||
(def dev-build? (enabled? (get-config :DEV_BUILD 0)))
|
||||
(def max-message-delivery-attempts (js/parseInt (get-config :MAX_MESSAGE_DELIVERY_ATTEMPTS "6")))
|
||||
(def max-images-batch (js/parseInt (get-config :MAX_IMAGES_BATCH "1")))
|
||||
;; NOTE: only disabled in releases
|
||||
(def local-notifications? (enabled? (get-config :LOCAL_NOTIFICATIONS "1")))
|
||||
(def blank-preview? (enabled? (get-config :BLANK_PREVIEW "1")))
|
||||
|
||||
@@ -1,97 +0,0 @@
|
||||
(ns status-im2.contexts.chat.camera.style
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]))
|
||||
|
||||
(def screen-container
|
||||
{:flex 1
|
||||
:background-color colors/black})
|
||||
|
||||
(def flash-container
|
||||
{:position :absolute
|
||||
:top 50
|
||||
:left 25})
|
||||
|
||||
(defn camera-window
|
||||
[width height top]
|
||||
{:width width
|
||||
:height height
|
||||
:top top})
|
||||
|
||||
(def zoom-button-container
|
||||
{:width 37
|
||||
:height 37
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(defn zoom-container
|
||||
[top insets]
|
||||
{:width 157
|
||||
:height 43
|
||||
:border-radius 100
|
||||
:position :absolute
|
||||
:background-color colors/black-opa-60
|
||||
:align-self :center
|
||||
:justify-content :space-around
|
||||
:align-items :center
|
||||
:flex-direction :row
|
||||
:bottom (+ top (:bottom insets) (when platform/android? (:top insets)) 18)})
|
||||
|
||||
(defn zoom-button
|
||||
[size]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:width size
|
||||
:height size}
|
||||
{:background-color colors/black-opa-30
|
||||
:justify-content :center
|
||||
:align-items :center
|
||||
:border-radius 50}))
|
||||
|
||||
(defn bottom-area
|
||||
[top insets]
|
||||
{:left 20
|
||||
:right 20
|
||||
:position :absolute
|
||||
:height (+ top (when platform/android? (:top insets)))
|
||||
:bottom (:bottom insets)})
|
||||
|
||||
(def photo-text
|
||||
{:color colors/system-yellow
|
||||
:margin-top 18
|
||||
:font-size 14
|
||||
:align-self :center})
|
||||
|
||||
(def actions-container
|
||||
{:flex-direction :row
|
||||
:margin-top 20
|
||||
:align-items :center
|
||||
:justify-content :space-between})
|
||||
|
||||
(def outer-circle
|
||||
{:width 69
|
||||
:height 69
|
||||
:background-color colors/black
|
||||
:border-radius 69
|
||||
:border-width 6
|
||||
:border-color colors/white
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(def inner-circle
|
||||
{:width 53
|
||||
:height 53
|
||||
:border-radius 53
|
||||
:background-color colors/white})
|
||||
|
||||
(defn confirmation-container
|
||||
[insets]
|
||||
{:position :absolute
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0
|
||||
:background-color "#131313"
|
||||
:height (+ 69 (:bottom insets))
|
||||
:flex-direction :row
|
||||
:padding-horizontal 20
|
||||
:justify-content :space-between
|
||||
:padding-top 18})
|
||||
@@ -1,101 +0,0 @@
|
||||
(ns status-im2.contexts.chat.camera.view
|
||||
(:require
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.camera-kit :as camera-kit]
|
||||
[react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[utils.i18n :as i18n]
|
||||
[status-im2.contexts.chat.camera.style :as style]
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn- f-zoom-button
|
||||
[{:keys [value current-zoom]}]
|
||||
(let [selected? (= @current-zoom value)
|
||||
size (reanimated/use-shared-value (if selected? 37 25))]
|
||||
(rn/use-effect #(reanimated/animate size (if selected? 37 25)) [@current-zoom])
|
||||
[rn/touchable-opacity
|
||||
{:on-press #(reset! current-zoom value)
|
||||
:style style/zoom-button-container
|
||||
:accessibility-label (str "zoom-" value)}
|
||||
[reanimated/view {:style (style/zoom-button size)}
|
||||
[quo/text
|
||||
{:size (if selected? :paragraph-2 :label)
|
||||
:weight :semi-bold
|
||||
:style {:color (if selected?
|
||||
colors/system-yellow
|
||||
colors/white)}}
|
||||
(str value (when selected? "x"))]]]))
|
||||
|
||||
(defn zoom-button
|
||||
[args]
|
||||
[:f> f-zoom-button args])
|
||||
|
||||
(defn snap-button
|
||||
[camera-ref uri]
|
||||
[rn/view
|
||||
{:style style/outer-circle
|
||||
:accessibility-label :snap}
|
||||
[rn/touchable-opacity
|
||||
{:on-press (fn []
|
||||
(camera-kit/capture @camera-ref #(reset! uri %)))
|
||||
:style style/inner-circle}]])
|
||||
|
||||
(defn camera-screen
|
||||
[]
|
||||
(let [camera-ref (atom nil)
|
||||
uri (reagent/atom nil)
|
||||
current-zoom (reagent/atom "1")]
|
||||
(fn []
|
||||
(let [window (rn/get-window)
|
||||
{:keys [width height]} window
|
||||
camera-window-height (* width 1.33)
|
||||
insets (safe-area/get-insets)
|
||||
top (/ (- height camera-window-height (:bottom insets)) 2)]
|
||||
[rn/view {:style style/screen-container}
|
||||
(when-not @uri
|
||||
[rn/view {:style style/flash-container}
|
||||
[quo/icon :i/flash-camera
|
||||
{:color colors/white
|
||||
:size 24}]])
|
||||
(if @uri
|
||||
[rn/image
|
||||
{:style (style/camera-window width camera-window-height top)
|
||||
:source {:uri @uri}}]
|
||||
[camera-kit/camera
|
||||
{:ref #(reset! camera-ref %)
|
||||
:style (style/camera-window width camera-window-height top)}])
|
||||
(when-not @uri
|
||||
[rn/view {:style (style/zoom-container top insets)}
|
||||
[zoom-button {:value "0.5" :current-zoom current-zoom}]
|
||||
[zoom-button {:value "1" :current-zoom current-zoom}]
|
||||
[zoom-button {:value "2" :current-zoom current-zoom}]
|
||||
[zoom-button {:value "3" :current-zoom current-zoom}]])
|
||||
(if @uri
|
||||
[rn/view {:style (style/confirmation-container insets)}
|
||||
[quo/text
|
||||
{:on-press #(reset! uri nil)
|
||||
:style {:font-size 17
|
||||
:color colors/white}}
|
||||
(i18n/label :t/retake)]
|
||||
[quo/text
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:photo-selector/camera-roll-pick {:uri @uri}])
|
||||
(rf/dispatch [:navigate-back]))
|
||||
:style {:font-size 17
|
||||
:color colors/white}}
|
||||
(i18n/label :t/use-photo)]]
|
||||
[rn/view {:style (style/bottom-area top insets)}
|
||||
[quo/text {:style style/photo-text} (i18n/label :t/PHOTO)]
|
||||
[rn/view {:style style/actions-container}
|
||||
[quo/text
|
||||
{:on-press #(rf/dispatch [:navigate-back])
|
||||
:style {:font-size 17
|
||||
:color colors/white}
|
||||
:accessibility-label :cancel}
|
||||
(i18n/label :t/cancel)]
|
||||
[snap-button camera-ref uri]
|
||||
[quo/icon :i/rotate-camera
|
||||
{:size 48 :color colors/white :accessibility-label :flip-camera}]]])]))))
|
||||
@@ -1,7 +1,6 @@
|
||||
(ns status-im2.contexts.chat.composer.actions.view
|
||||
(:require
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.permissions :as permissions]
|
||||
[react-native.platform :as platform]
|
||||
@@ -10,7 +9,6 @@
|
||||
[status-im2.common.alert.events :as alert]
|
||||
[status-im2.contexts.chat.composer.constants :as comp-constants]
|
||||
[status-im2.contexts.chat.messages.list.view :as messages.list]
|
||||
[status-im2.common.device-permissions :as device-permissions]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.chat.composer.actions.style :as style]
|
||||
@@ -150,32 +148,16 @@
|
||||
50)}]))
|
||||
:max-duration-ms constants/audio-max-duration-ms}]]))
|
||||
|
||||
(defn images-limit-toast
|
||||
[]
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
:icon :info
|
||||
:icon-color colors/danger-50-opa-40
|
||||
:container-style {:top (when platform/ios? 20)}
|
||||
:text (i18n/label :t/only-6-images)}]))
|
||||
|
||||
|
||||
(defn go-to-camera
|
||||
[images-count]
|
||||
(device-permissions/camera #(if (>= images-count constants/max-album-photos)
|
||||
(images-limit-toast)
|
||||
(rf/dispatch [:navigate-to :camera-screen]))))
|
||||
|
||||
(defn camera-button
|
||||
[]
|
||||
(let [images-count (count (vals (rf/sub [:chats/sending-image])))]
|
||||
[quo/button
|
||||
{:on-press #(go-to-camera images-count)
|
||||
:icon true
|
||||
:type :outline
|
||||
:size 32
|
||||
:style {:margin-right 12}}
|
||||
:i/camera]))
|
||||
[quo/button
|
||||
{:on-press #(js/alert "to be implemented")
|
||||
:icon true
|
||||
:type :outline
|
||||
:size 32
|
||||
:style {:margin-right 12}}
|
||||
:i/camera])
|
||||
|
||||
(defn open-photo-selector
|
||||
[{:keys [input-ref]}
|
||||
|
||||
@@ -42,5 +42,3 @@
|
||||
(def ^:const unfurl-debounce-ms
|
||||
"Use a high threshold to prevent unnecessary rendering overhead."
|
||||
400)
|
||||
|
||||
(def ^:const mention-rerender-debounce-ms 500)
|
||||
|
||||
@@ -19,8 +19,7 @@
|
||||
(when (and (empty? @text-value) (not= input-text nil))
|
||||
(reset! text-value input-text)
|
||||
(reset! content-height input-content-height)
|
||||
(reset! saved-cursor-position (count input-text))
|
||||
(rf/dispatch [:mention/on-change-text @text-value]))
|
||||
(reset! saved-cursor-position (count input-text)))
|
||||
(when input-maximized?
|
||||
(reset! maximized? true)))
|
||||
|
||||
@@ -110,6 +109,7 @@
|
||||
(let [edit-text (get-in edit [:content :text])]
|
||||
(when (and edit @input-ref)
|
||||
(.focus ^js @input-ref)
|
||||
(.setNativeProps ^js @input-ref (clj->js {:text edit-text}))
|
||||
(reset! text-value edit-text)
|
||||
(reset! saved-cursor-position (count edit-text)))))
|
||||
[(:message-id edit)]))
|
||||
@@ -126,12 +126,32 @@
|
||||
(.focus ^js @input-ref)))
|
||||
[(:message-id reply)]))
|
||||
|
||||
(defn edit-mentions
|
||||
[{:keys [input-ref]} {:keys [text-value cursor-position]} {:keys [input-with-mentions]}]
|
||||
(rn/use-effect (fn []
|
||||
(let [input-text (reduce (fn [acc item]
|
||||
(str acc (second item)))
|
||||
""
|
||||
input-with-mentions)]
|
||||
(reset! text-value input-text)
|
||||
(reset! cursor-position (count input-text))
|
||||
(js/setTimeout #(when @input-ref
|
||||
(.setNativeProps ^js @input-ref
|
||||
(clj->js {:selection {:start (count input-text)
|
||||
:end (count
|
||||
input-text)}})))
|
||||
300)))
|
||||
[(some #(= :mention (first %)) (seq input-with-mentions))]))
|
||||
|
||||
(defn update-input-mention
|
||||
[{:keys [text-value]}
|
||||
[{:keys [input-ref]}
|
||||
{:keys [text-value]}
|
||||
{:keys [input-text]}]
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
(when (and input-text (not= @text-value input-text))
|
||||
(when @input-ref
|
||||
(.setNativeProps ^js @input-ref (clj->js {:text input-text})))
|
||||
(reset! text-value input-text)
|
||||
(rf/dispatch [:mention/on-change-text input-text])))
|
||||
[input-text]))
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
(ns status-im2.contexts.chat.composer.handlers
|
||||
(:require
|
||||
[clojure.string :as string]
|
||||
[oops.core :as oops]
|
||||
[react-native.core :as rn]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.chat.composer.constants :as constants]
|
||||
[status-im2.contexts.chat.composer.keyboard :as kb]
|
||||
[status-im2.contexts.chat.composer.selection :as selection]
|
||||
@@ -11,8 +13,8 @@
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn focus
|
||||
[props
|
||||
{:keys [focused? lock-selection? gradient-z-index]}
|
||||
[{:keys [input-ref] :as props}
|
||||
{:keys [text-value focused? lock-selection? saved-cursor-position gradient-z-index]}
|
||||
{:keys [height saved-height last-height opacity background-y gradient-opacity container-opacity]
|
||||
:as animations}
|
||||
{:keys [max-height] :as dimensions}]
|
||||
@@ -28,6 +30,9 @@
|
||||
(reanimated/animate gradient-opacity 1)
|
||||
(reset! gradient-z-index 1))
|
||||
(js/setTimeout #(reset! lock-selection? false) 300)
|
||||
(when (and (not-empty @text-value) @input-ref)
|
||||
(.setNativeProps ^js @input-ref
|
||||
(clj->js {:selection {:start @saved-cursor-position :end @saved-cursor-position}})))
|
||||
(kb/handle-refocus-emoji-kb-ios props animations dimensions))
|
||||
|
||||
(defn blur
|
||||
@@ -114,17 +119,23 @@
|
||||
|
||||
(defn change-text
|
||||
[text
|
||||
{:keys [record-reset-fn]}
|
||||
{:keys [text-value recording?]}]
|
||||
{:keys [input-ref record-reset-fn]}
|
||||
{:keys [text-value cursor-position recording?]}]
|
||||
(debounce/debounce-and-dispatch [:link-preview/unfurl-urls text]
|
||||
constants/unfurl-debounce-ms)
|
||||
|
||||
(reset! text-value text)
|
||||
(reagent/next-tick #(when @input-ref
|
||||
(.setNativeProps ^js @input-ref
|
||||
(clj->js {:selection {:start @cursor-position
|
||||
:end @cursor-position}}))))
|
||||
(when @recording?
|
||||
(@record-reset-fn)
|
||||
(reset! recording? false))
|
||||
(rf/dispatch [:chat.ui/set-chat-input-text text])
|
||||
(rf/dispatch [:mention/on-change-text text]))
|
||||
(if (string/ends-with? text "@")
|
||||
(rf/dispatch [:mention/on-change-text text])
|
||||
(debounce/debounce-and-dispatch [:mention/on-change-text text] 300)))
|
||||
|
||||
(defn selection-change
|
||||
[event
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(ns status-im2.contexts.chat.composer.mentions.view
|
||||
(:require
|
||||
[react-native.platform :as platform]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.chat.composer.utils :as utils]
|
||||
@@ -9,12 +10,23 @@
|
||||
[status-im2.common.contact-list-item.view :as contact-list-item]
|
||||
[status-im2.contexts.chat.composer.mentions.style :as style]))
|
||||
|
||||
(defn update-cursor
|
||||
[user {:keys [cursor-position input-ref]}]
|
||||
(when platform/android?
|
||||
(let [new-cursor-pos (+ (count (:primary-name user)) @cursor-position 1)]
|
||||
(reset! cursor-position new-cursor-pos)
|
||||
(reagent/next-tick #(when @input-ref
|
||||
(.setNativeProps ^js @input-ref
|
||||
(clj->js {:selection {:start new-cursor-pos
|
||||
:end
|
||||
new-cursor-pos}})))))))
|
||||
|
||||
(defn mention-item
|
||||
[user _ _ _]
|
||||
[user _ _ render-data]
|
||||
[contact-list-item/contact-list-item
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:chat.ui/select-mention nil user]))}
|
||||
(rf/dispatch [:chat.ui/select-mention nil user])
|
||||
(update-cursor user render-data))}
|
||||
user])
|
||||
|
||||
(defn- f-view
|
||||
|
||||
@@ -125,10 +125,3 @@
|
||||
{:transform [{:translate-y translate-y}]
|
||||
:opacity opacity}
|
||||
{}))
|
||||
|
||||
(def mention
|
||||
{:color (colors/theme-colors colors/primary-50
|
||||
colors/primary-60)
|
||||
:background-color colors/primary-50-opa-10
|
||||
:selection-color :transparent
|
||||
:suppress-highlighting true})
|
||||
|
||||
@@ -23,19 +23,7 @@
|
||||
[status-im2.contexts.chat.composer.handlers :as handler]
|
||||
[status-im2.contexts.chat.composer.gradients.view :as gradients]
|
||||
[status-im2.contexts.chat.composer.selection :as selection]
|
||||
[quo2.theme :as theme]
|
||||
[quo2.core :as quo]))
|
||||
|
||||
(defn styled-text-input-content
|
||||
[input-with-mentions]
|
||||
(reduce (fn
|
||||
[styled-text [chunk-type chunk-content]]
|
||||
(condp = chunk-type
|
||||
:text (conj styled-text chunk-content)
|
||||
:mention (conj styled-text
|
||||
[quo/text {:style style/mention :weight :medium} chunk-content])))
|
||||
[quo/text]
|
||||
input-with-mentions))
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(defn sheet-component
|
||||
[{:keys [insets window-height blur-height opacity background-y]} props state]
|
||||
@@ -73,7 +61,8 @@
|
||||
subs)
|
||||
(effects/edit props state subs)
|
||||
(effects/reply props animations subs)
|
||||
(effects/update-input-mention state subs)
|
||||
(effects/update-input-mention props state subs)
|
||||
(effects/edit-mentions props state subs)
|
||||
(effects/link-previews props state animations subs)
|
||||
(effects/images props state animations subs)
|
||||
[:<>
|
||||
@@ -105,6 +94,7 @@
|
||||
:style (style/input-view state)}
|
||||
[rn/text-input
|
||||
{:ref #(reset! (:input-ref props) %)
|
||||
:default-value @(:text-value state)
|
||||
:on-focus #(handler/focus props state animations dimensions)
|
||||
:on-blur #(handler/blur state animations dimensions subs)
|
||||
:on-content-size-change #(handler/content-size-change %
|
||||
@@ -125,8 +115,7 @@
|
||||
:placeholder-text-color (colors/theme-colors colors/neutral-40 colors/neutral-50)
|
||||
:style (style/input-text props state subs max-height)
|
||||
:max-length constants/max-text-size
|
||||
:accessibility-label :chat-message-input}
|
||||
[styled-text-input-content (:input-with-mentions subs)]]]
|
||||
:accessibility-label :chat-message-input}]]
|
||||
(when chat-screen-loaded?
|
||||
[:<>
|
||||
[gradients/view props state animations show-bottom-gradient?]
|
||||
|
||||
@@ -352,7 +352,7 @@
|
||||
:t/channel-unmuted-successfully))))]
|
||||
{:db (assoc-in db [:chats chat-id :muted-till] muted-till)
|
||||
:dispatch [:toasts/upsert
|
||||
{:icon :i/correct
|
||||
{:icon :correct
|
||||
:icon-color (colors/theme-colors colors/success-60
|
||||
colors/success-50)
|
||||
:text (mute-duration-text (when (some? muted-till)
|
||||
|
||||
@@ -235,9 +235,8 @@
|
||||
(if-not muted
|
||||
(when show-unread-badge?
|
||||
[quo/info-count
|
||||
{:style {:top 16
|
||||
:right 16}
|
||||
:accessibility-label :new-message-counter}
|
||||
{:style {:top 16
|
||||
:right 16}}
|
||||
unviewed-messages-count])
|
||||
[icons/icon :i/muted
|
||||
{:color colors/neutral-40
|
||||
|
||||
@@ -57,7 +57,7 @@
|
||||
uri
|
||||
#(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
:icon :i/correct
|
||||
:icon :correct
|
||||
:icon-color colors/success-50
|
||||
:container-style {:bottom (when platform/android? 20)}
|
||||
:text (i18n/label :t/photo-saved)}])))}]]]))
|
||||
|
||||
@@ -30,13 +30,12 @@
|
||||
(def delivery-state-showing-time-ms 3000)
|
||||
|
||||
(defn avatar-container
|
||||
[{:keys [content last-in-group? pinned-by quoted-message from]} show-reactions? show-user-info?]
|
||||
[{:keys [content last-in-group? pinned-by quoted-message from]} show-reactions?]
|
||||
(if (or (and (seq (:response-to content))
|
||||
quoted-message)
|
||||
last-in-group?
|
||||
pinned-by
|
||||
(not show-reactions?)
|
||||
show-user-info?)
|
||||
(not show-reactions?))
|
||||
[avatar/avatar from :small]
|
||||
[rn/view {:padding-top 2 :width 32}]))
|
||||
|
||||
@@ -48,13 +47,8 @@
|
||||
quoted-message
|
||||
from
|
||||
timestamp]}
|
||||
show-reactions?
|
||||
show-user-info?]
|
||||
(when (or (and (seq response-to) quoted-message)
|
||||
last-in-group?
|
||||
pinned-by
|
||||
(not show-reactions?)
|
||||
show-user-info?)
|
||||
show-reactions?]
|
||||
(when (or (and (seq response-to) quoted-message) last-in-group? pinned-by (not show-reactions?))
|
||||
(let [[primary-name secondary-name] (rf/sub [:contacts/contact-two-names-by-identity from])
|
||||
{:keys [ens-verified added?]} (rf/sub [:contacts/contact-by-address from])]
|
||||
[quo/author
|
||||
@@ -90,7 +84,7 @@
|
||||
(defn user-message-content
|
||||
[]
|
||||
(let [show-delivery-state? (reagent/atom false)]
|
||||
(fn [{:keys [message-data context keyboard-shown? show-reactions? show-user-info?]}]
|
||||
(fn [{:keys [message-data context keyboard-shown? show-reactions?]}]
|
||||
(let [{:keys [content-type quoted-message content
|
||||
outgoing outgoing-status pinned-by]} message-data
|
||||
first-image (first (:album message-data))
|
||||
@@ -135,7 +129,7 @@
|
||||
[rn/view
|
||||
{:style {:padding-horizontal 4
|
||||
:flex-direction :row}}
|
||||
[avatar-container message-data show-reactions? show-user-info?]
|
||||
[avatar-container message-data show-reactions?]
|
||||
(into
|
||||
(if show-reactions?
|
||||
[rn/view]
|
||||
@@ -144,7 +138,7 @@
|
||||
:flex 1
|
||||
:max-height (when-not show-reactions?
|
||||
(* 0.4 height))}}
|
||||
[author message-data show-reactions? show-user-info?]
|
||||
[author message-data show-reactions?]
|
||||
(case content-type
|
||||
|
||||
constants/content-type-text
|
||||
@@ -190,8 +184,7 @@
|
||||
{:message-data message-data
|
||||
:context context
|
||||
:keyboard-shown? keyboard-shown?
|
||||
:show-reactions? true
|
||||
:show-user-info? true}]])}]))
|
||||
:show-reactions? true}]])}]))
|
||||
|
||||
(defn message
|
||||
[{:keys [pinned-by mentioned content-type last-in-group? deleted? deleted-for-me?]
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
[[:toasts/close :delete-message-for-everyone]
|
||||
[:toasts/upsert
|
||||
{:id :delete-message-for-everyone
|
||||
:icon :i/info
|
||||
:icon :info
|
||||
:icon-color colors/danger-50-opa-40
|
||||
:message-deleted-for-everyone-count toast-count
|
||||
:message-deleted-for-everyone-undos existing-undos
|
||||
|
||||
@@ -62,7 +62,7 @@
|
||||
:dispatch-n [[:toasts/close :delete-message-for-me]
|
||||
[:toasts/upsert
|
||||
{:id :delete-message-for-me
|
||||
:icon :i/info
|
||||
:icon :info
|
||||
:icon-color colors/danger-50-opa-40
|
||||
:message-deleted-for-me-count toast-count
|
||||
:message-deleted-for-me-undos existing-undos
|
||||
|
||||
@@ -2,9 +2,9 @@
|
||||
(:require [react-native.cameraroll :as cameraroll]
|
||||
[clojure.string :as string]
|
||||
[re-frame.core :as re-frame]
|
||||
[status-im2.constants :as constants]
|
||||
[utils.i18n :as i18n]
|
||||
[react-native.permissions :as permissions]
|
||||
[status-im2.config :as config]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im.utils.image-processing :as image-processing]
|
||||
[taoensso.timbre :as log]
|
||||
@@ -141,6 +141,6 @@
|
||||
[{:keys [db]} image chat-id]
|
||||
(let [current-chat-id (or chat-id (:current-chat-id db))
|
||||
images (get-in db [:chat/inputs current-chat-id :metadata :sending-image])]
|
||||
(when (and (< (count images) constants/max-album-photos)
|
||||
(when (and (< (count images) config/max-images-batch)
|
||||
(not (some #(= (:uri image) (:uri %)) images)))
|
||||
{:camera-roll-image-selected [image current-chat-id]})))
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
[]
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:id :random-id
|
||||
:icon :i/info
|
||||
:icon :info
|
||||
:icon-color colors/danger-50-opa-40
|
||||
:container-style {:top (when platform/ios? 20)}
|
||||
:text (i18n/label :t/only-6-images)}]))
|
||||
@@ -56,11 +56,11 @@
|
||||
(when (and (not album?) (seq @selected))
|
||||
[rn/view {:style style/clear-container}
|
||||
[quo/button
|
||||
{:type :grey
|
||||
{:type :blurred
|
||||
:size 32
|
||||
:accessibility-label :clear
|
||||
:on-press #(reset! selected [])
|
||||
:background (when blur-active? :photo)}
|
||||
:blur-active? blur-active?}
|
||||
(i18n/label :t/clear)]]))
|
||||
|
||||
(defn remove-selected
|
||||
|
||||
@@ -138,7 +138,7 @@
|
||||
(defn token-gates
|
||||
[{:keys [id]}]
|
||||
(rf/dispatch [:communities/check-permissions-to-join-community id])
|
||||
(fn [{:keys [id color]}]
|
||||
(fn [{:keys [id community-color]}]
|
||||
(let [{:keys [can-request-access?
|
||||
number-of-hold-tokens tokens]} (rf/sub [:community/token-gated-overview id])]
|
||||
[rn/view {:style (style/token-gated-container)}
|
||||
@@ -162,16 +162,16 @@
|
||||
{:tokens tokens
|
||||
:padding? true}]
|
||||
[quo/button
|
||||
{:on-press #(join-gated-community id)
|
||||
:accessibility-label :join-community-button
|
||||
:customization-color color
|
||||
:style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
|
||||
:disabled (not can-request-access?)
|
||||
:before (if can-request-access? :i/unlocked :i/locked)}
|
||||
{:on-press #(join-gated-community id)
|
||||
:accessibility-label :join-community-button
|
||||
:override-background-color community-color
|
||||
:style {:margin-horizontal 12 :margin-top 12 :margin-bottom 12}
|
||||
:disabled (not can-request-access?)
|
||||
:before (if can-request-access? :i/unlocked :i/locked)}
|
||||
(i18n/label :t/join-open-community)]])))
|
||||
|
||||
(defn join-community
|
||||
[{:keys [joined can-join? color permissions token-permissions] :as community}
|
||||
[{:keys [joined can-join? community-color permissions token-permissions] :as community}
|
||||
pending?]
|
||||
(let [access-type (get-access-type (:access permissions))
|
||||
unknown-access? (= access-type :unknown-access)
|
||||
@@ -183,10 +183,10 @@
|
||||
(if token-permissions
|
||||
[token-gates community]
|
||||
[quo/button
|
||||
{:on-press #(rf/dispatch [:open-modal :community-requests-to-join community])
|
||||
:accessibility-label :show-request-to-join-screen-button
|
||||
:customization-color color
|
||||
:before :i/communities}
|
||||
{:on-press #(rf/dispatch [:open-modal :community-requests-to-join community])
|
||||
:accessibility-label :show-request-to-join-screen-button
|
||||
:override-background-color community-color
|
||||
:before :i/communities}
|
||||
(request-to-join-text is-open?)]))
|
||||
|
||||
(when (and (not (or joined pending? token-permissions)) (not (or is-open? node-offline?)))
|
||||
|
||||
@@ -4,18 +4,16 @@
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn navigation-bar
|
||||
[{:keys [top right-section-buttons disable-back-button? stack-id]}]
|
||||
(let [back-event (if stack-id [:navigate-back-within-stack stack-id] [:navigate-back])]
|
||||
[rn/view
|
||||
{:style {:height 56
|
||||
:margin-top top}}
|
||||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:type :blur-bg
|
||||
:icon :i/arrow-left
|
||||
:icon-override-theme :dark
|
||||
:on-press (fn []
|
||||
(when-not disable-back-button?
|
||||
(rf/dispatch back-event)))}
|
||||
:right-section-buttons right-section-buttons}]]))
|
||||
[{:keys [top right-section-buttons disable-back-button?]}]
|
||||
[rn/view
|
||||
{:style {:height 56
|
||||
:margin-top top}}
|
||||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:type :blur-bg
|
||||
:icon :i/arrow-left
|
||||
:icon-override-theme :dark
|
||||
:on-press (when-not disable-back-button?
|
||||
#(rf/dispatch [:navigate-back]))}
|
||||
:right-section-buttons right-section-buttons}]])
|
||||
|
||||
@@ -1,17 +0,0 @@
|
||||
(ns status-im2.contexts.onboarding.common.overlay.style
|
||||
(:require [react-native.reanimated :as reanimated]
|
||||
[quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn blur-container
|
||||
[opacity]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:opacity opacity}
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0}))
|
||||
|
||||
(def blur-style
|
||||
{:flex 1
|
||||
:background-color colors/neutral-80-opa-80-blur})
|
||||
@@ -1,72 +0,0 @@
|
||||
(ns status-im2.contexts.onboarding.common.overlay.view
|
||||
(:require [react-native.reanimated :as reanimated]
|
||||
[react-native.blur :as blur]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.onboarding.common.overlay.style :as style]
|
||||
[status-im2.constants :as constants]))
|
||||
|
||||
(def max-blur-amount 30)
|
||||
|
||||
(defonce timer-interval (atom nil))
|
||||
(defonce blur-dismiss-fn-atom (atom nil))
|
||||
(defonce blur-show-fn-atom (atom nil))
|
||||
|
||||
(defn blur-show
|
||||
[opacity blur-amount]
|
||||
(reanimated/animate opacity
|
||||
1
|
||||
(/ constants/onboarding-modal-animation-duration 2))
|
||||
(js/clearInterval @timer-interval)
|
||||
(reset! timer-interval
|
||||
(js/setInterval
|
||||
(fn []
|
||||
(if (< @blur-amount max-blur-amount)
|
||||
(swap! blur-amount + 1)
|
||||
(js/clearInterval @timer-interval)))
|
||||
(/ constants/onboarding-modal-animation-duration
|
||||
max-blur-amount
|
||||
2))))
|
||||
|
||||
(defn blur-dismiss
|
||||
[opacity blur-amount]
|
||||
(reanimated/animate-delay opacity
|
||||
0
|
||||
(/ constants/onboarding-modal-animation-duration 2)
|
||||
(/ constants/onboarding-modal-animation-duration 2))
|
||||
(reset! timer-interval
|
||||
(js/setInterval
|
||||
(fn []
|
||||
(if (> @blur-amount 0)
|
||||
(swap! blur-amount - 1)
|
||||
(js/clearInterval @timer-interval)))
|
||||
(/ constants/onboarding-modal-animation-duration
|
||||
max-blur-amount
|
||||
2))))
|
||||
|
||||
(defn f-view
|
||||
[blur-amount]
|
||||
(let [opacity (reanimated/use-shared-value 0)
|
||||
blur-show-fn #(blur-show opacity blur-amount)
|
||||
blur-dismiss-fn #(blur-dismiss opacity blur-amount)]
|
||||
(rn/use-effect
|
||||
(fn []
|
||||
(reset! blur-show-fn-atom blur-show-fn)
|
||||
(reset! blur-dismiss-fn-atom blur-dismiss-fn)
|
||||
(fn []
|
||||
(reset! blur-show-fn-atom nil)
|
||||
(reset! blur-dismiss-fn-atom nil))))
|
||||
[reanimated/view
|
||||
{:pointer-events :none
|
||||
:style (style/blur-container opacity)}
|
||||
[blur/view
|
||||
{:blur-amount @blur-amount
|
||||
:blur-radius 25
|
||||
:blur-type :transparent
|
||||
:overlay-color :transparent
|
||||
:style style/blur-style}]]))
|
||||
|
||||
(defn view
|
||||
[]
|
||||
(let [blur-amount (reagent/atom 0)]
|
||||
[:f> f-view blur-amount]))
|
||||
@@ -2,9 +2,11 @@
|
||||
(:require
|
||||
[oops.core :refer [ocall]]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
||||
[status-im2.contexts.onboarding.create-password.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
@@ -175,11 +177,11 @@
|
||||
|
||||
[rn/view {:style style/button-container}
|
||||
[quo/button
|
||||
{:disabled (not meet-requirements?)
|
||||
:customization-color user-color
|
||||
:on-press #(rf/dispatch
|
||||
[:onboarding-2/password-set
|
||||
(security/mask-data @password)])}
|
||||
{:disabled (not meet-requirements?)
|
||||
:override-background-color (colors/custom-color user-color 60)
|
||||
:on-press #(rf/dispatch
|
||||
[:onboarding-2/password-set
|
||||
(security/mask-data @password)])}
|
||||
(i18n/label :t/password-creation-confirm)]]]]))))
|
||||
|
||||
(defn create-password-doc
|
||||
@@ -209,14 +211,14 @@
|
||||
{:content create-password-doc
|
||||
:shell? true}]))]
|
||||
[:<>
|
||||
[background/view true]
|
||||
[rn/touchable-without-feedback
|
||||
{:on-press rn/dismiss-keyboard!
|
||||
:accessible false}
|
||||
[rn/view {:style style/flex-fill}
|
||||
[rn/keyboard-avoiding-view {:style style/flex-fill}
|
||||
[navigation-bar/navigation-bar
|
||||
{:stack-id :new-to-status
|
||||
:top top
|
||||
{:top top
|
||||
:right-section-buttons [{:type :blur-bg
|
||||
:icon :i/info
|
||||
:icon-override-theme :dark
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
|
||||
[utils.re-frame :as rf]
|
||||
[oops.core :as oops]
|
||||
@@ -98,9 +99,7 @@
|
||||
name-too-short? :default
|
||||
:else :success)]
|
||||
[rn/view {:style style/page-container}
|
||||
[navigation-bar/navigation-bar
|
||||
{:stack-id :new-to-status
|
||||
:top navigation-bar-top}]
|
||||
[navigation-bar/navigation-bar {:top navigation-bar-top}]
|
||||
[rn/scroll-view
|
||||
{:content-container-style {:flexGrow 1}}
|
||||
[rn/view {:style style/page-container}
|
||||
@@ -162,16 +161,16 @@
|
||||
:pointer-events :box-none}
|
||||
[button-container @keyboard-shown?
|
||||
[quo/button
|
||||
{:accessibility-label :submit-create-profile-button
|
||||
:type :primary
|
||||
:customization-color @custom-color
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:onboarding-2/profile-data-set
|
||||
{:image-path @profile-pic
|
||||
:display-name @full-name
|
||||
:color @custom-color}]))
|
||||
:style style/continue-button
|
||||
:disabled (or (not valid-name?) (not (seq @full-name)))}
|
||||
{:accessibility-label :submit-create-profile-button
|
||||
:type :primary
|
||||
:override-background-color (colors/custom-color @custom-color 60)
|
||||
:on-press (fn []
|
||||
(rf/dispatch [:onboarding-2/profile-data-set
|
||||
{:image-path @profile-pic
|
||||
:display-name @full-name
|
||||
:color @custom-color}]))
|
||||
:style style/continue-button
|
||||
:disabled (or (not valid-name?) (not (seq @full-name)))}
|
||||
(i18n/label :t/continue)]]]])
|
||||
(finally
|
||||
(oops/ocall show-listener "remove")
|
||||
@@ -182,6 +181,7 @@
|
||||
(let [{:keys [top]} (safe-area/get-insets)
|
||||
onboarding-profile-data (rf/sub [:onboarding-2/profile])]
|
||||
[:<>
|
||||
[background/view true]
|
||||
[:f> f-page
|
||||
{:navigation-bar-top top
|
||||
:onboarding-profile-data onboarding-profile-data}]]))
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
(ns status-im2.contexts.onboarding.enable-biometrics.view
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im2.contexts.onboarding.enable-biometrics.style :as style]
|
||||
@@ -8,6 +9,7 @@
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.common.parallax.view :as parallax]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.common.parallax.whitelist :as whitelist]
|
||||
[status-im2.common.biometric.events :as biometric]))
|
||||
|
||||
@@ -27,17 +29,16 @@
|
||||
profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
||||
[rn/view {:style (style/buttons insets)}
|
||||
[quo/button
|
||||
{:accessibility-label :enable-biometrics-button
|
||||
:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])
|
||||
:before :i/face-id
|
||||
:customization-color profile-color}
|
||||
{:accessibility-label :enable-biometrics-button
|
||||
:on-press #(rf/dispatch [:onboarding-2/enable-biometrics])
|
||||
:before :i/face-id
|
||||
:override-background-color (colors/custom-color profile-color 50)}
|
||||
(i18n/label :t/biometric-enable-button {:bio-type-label bio-type-label})]
|
||||
[quo/button
|
||||
{:accessibility-label :maybe-later-button
|
||||
:background :blur
|
||||
:type :grey
|
||||
:on-press #(rf/dispatch [:onboarding-2/create-account-and-login])
|
||||
:style {:margin-top 12}}
|
||||
{:accessibility-label :maybe-later-button
|
||||
:on-press #(rf/dispatch [:onboarding-2/create-account-and-login])
|
||||
:override-background-color colors/white-opa-5
|
||||
:style {:margin-top 12}}
|
||||
(i18n/label :t/maybe-later)]]))
|
||||
|
||||
(defn enable-biometrics-parallax
|
||||
@@ -68,6 +69,7 @@
|
||||
[]
|
||||
(let [insets (safe-area/get-insets)]
|
||||
[rn/view {:style (style/page-container insets)}
|
||||
[background/view true]
|
||||
(if whitelist/whitelisted?
|
||||
[enable-biometrics-parallax]
|
||||
[enable-biometrics-simple])
|
||||
|
||||
@@ -6,8 +6,9 @@
|
||||
|
||||
(defn page-container
|
||||
[insets]
|
||||
{:flex 1
|
||||
:padding-top (:top insets)})
|
||||
{:flex 1
|
||||
:padding-top (:top insets)
|
||||
:background-color colors/neutral-80-opa-80-blur})
|
||||
|
||||
(def page-illustration
|
||||
{:flex 1
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
(ns status-im2.contexts.onboarding.enable-notifications.view
|
||||
(:require
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[react-native.core :as rn]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im.notifications.core :as notifications]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
||||
[status-im2.contexts.onboarding.enable-notifications.style :as style]
|
||||
[status-im2.contexts.shell.jump-to.utils :as shell.utils]))
|
||||
@@ -25,34 +27,30 @@
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
||||
[rn/view {:style (style/buttons insets)}
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(shell.utils/change-selected-stack-id :communities-stack true nil)
|
||||
(rf/dispatch [::notifications/switch true platform/ios?])
|
||||
(rf/dispatch [:navigate-to-within-stack
|
||||
[:welcome :enable-notifications]]))
|
||||
:type :primary
|
||||
:before :i/notifications
|
||||
:accessibility-label :enable-notifications-button
|
||||
:customization-color profile-color}
|
||||
{:on-press (fn []
|
||||
(shell.utils/change-selected-stack-id :communities-stack true nil)
|
||||
(rf/dispatch [::notifications/switch true platform/ios?])
|
||||
(rf/dispatch [:init-root :welcome]))
|
||||
:type :primary
|
||||
:before :i/notifications
|
||||
:accessibility-label :enable-notifications-button
|
||||
:override-background-color (colors/custom-color profile-color 60)}
|
||||
(i18n/label :t/intro-wizard-title6)]
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(shell.utils/change-selected-stack-id :communities-stack true nil)
|
||||
(rf/dispatch [:navigate-to-within-stack
|
||||
[:welcome :enable-notifications]]))
|
||||
:accessibility-label :enable-notifications-later-button
|
||||
:type :grey
|
||||
:background :blur
|
||||
:style {:margin-top 12}}
|
||||
{:on-press (fn []
|
||||
(shell.utils/change-selected-stack-id :communities-stack true nil)
|
||||
(rf/dispatch [:init-root :welcome]))
|
||||
:accessibility-label :enable-notifications-later-button
|
||||
:override-background-color colors/white-opa-5
|
||||
:style {:margin-top 12}}
|
||||
(i18n/label :t/maybe-later)]]))
|
||||
|
||||
(defn enable-notifications
|
||||
[]
|
||||
(let [insets (safe-area/get-insets)]
|
||||
[rn/view {:style (style/page-container insets)}
|
||||
[navigation-bar/navigation-bar
|
||||
{:stack-id :enable-notifications
|
||||
:disable-back-button? true}]
|
||||
[background/view true]
|
||||
[navigation-bar/navigation-bar {:disable-back-button? true}]
|
||||
[page-title]
|
||||
[rn/view {:style style/page-illustration}
|
||||
[quo/text
|
||||
|
||||
@@ -1,14 +1,16 @@
|
||||
(ns status-im2.contexts.onboarding.enter-seed-phrase.style
|
||||
(:require [react-native.safe-area :as safe-area]))
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.safe-area :as safe-area]))
|
||||
|
||||
(def full-layout {:flex 1})
|
||||
|
||||
(def page-container
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0})
|
||||
{:position :absolute
|
||||
:top 0
|
||||
:bottom 0
|
||||
:left 0
|
||||
:right 0
|
||||
:background-color colors/neutral-80-opa-80-blur})
|
||||
|
||||
(def form-container
|
||||
{:flex 1
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
[reagent.core :as reagent]
|
||||
[status-im.ethereum.mnemonic :as mnemonic]
|
||||
[status-im2.constants :as constants]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
||||
[status-im2.contexts.onboarding.enter-seed-phrase.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
@@ -74,7 +75,6 @@
|
||||
seed-phrase]]
|
||||
[quo/button
|
||||
{:style (style/continue-button keyboard-shown?)
|
||||
:type :primary
|
||||
:disabled button-disabled?
|
||||
:on-press on-submit}
|
||||
(i18n/label :t/continue)]]))
|
||||
@@ -159,8 +159,7 @@
|
||||
[]
|
||||
(let [{navigation-bar-top :top} (safe-area/get-insets)]
|
||||
[rn/view {:style style/full-layout}
|
||||
[background/view true]
|
||||
[rn/keyboard-avoiding-view {:style style/page-container}
|
||||
[navigation-bar/navigation-bar
|
||||
{:stack-id :new-to-status
|
||||
:top navigation-bar-top}]
|
||||
[navigation-bar/navigation-bar {:top navigation-bar-top}]
|
||||
[screen]]]))
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
{:events [:onboarding-2/profile-data-set]}
|
||||
[{:keys [db]} onboarding-data]
|
||||
{:db (update db :onboarding-2/profile merge onboarding-data)
|
||||
:dispatch [:navigate-to-within-stack [:create-profile-password :new-to-status]]})
|
||||
:dispatch [:navigate-to :create-profile-password]})
|
||||
|
||||
(rf/defn enable-biometrics
|
||||
{:events [:onboarding-2/enable-biometrics]}
|
||||
@@ -51,7 +51,7 @@
|
||||
(let [{:keys [display-name seed-phrase password image-path color] :as profile}
|
||||
(:onboarding-2/profile db)]
|
||||
(rf/merge cofx
|
||||
{:dispatch [:navigate-to-within-stack [:generating-keys :new-to-status]]
|
||||
{:dispatch [:navigate-to :generating-keys]
|
||||
:dispatch-later [{:ms constants/onboarding-generating-keys-animation-duration-ms
|
||||
:dispatch [:onboarding-2/navigate-to-identifiers]}]
|
||||
:db (-> db
|
||||
@@ -74,13 +74,10 @@
|
||||
(rf/defn password-set
|
||||
{:events [:onboarding-2/password-set]}
|
||||
[{:keys [db]} password]
|
||||
(let [supported-type (:biometric/supported-type db)]
|
||||
{:db (-> db
|
||||
(assoc-in [:onboarding-2/profile :password] password)
|
||||
(assoc-in [:onboarding-2/profile :auth-method] constants/auth-method-password))
|
||||
:dispatch (if supported-type
|
||||
[:navigate-to-within-stack [:enable-biometrics :new-to-status]]
|
||||
[:onboarding-2/create-account-and-login])}))
|
||||
{:db (-> db
|
||||
(assoc-in [:onboarding-2/profile :password] password)
|
||||
(assoc-in [:onboarding-2/profile :auth-method] constants/auth-method-password))
|
||||
:dispatch [:navigate-to :enable-biometrics]})
|
||||
|
||||
(rf/defn seed-phrase-entered
|
||||
{:events [:onboarding-2/seed-phrase-entered]}
|
||||
@@ -105,14 +102,14 @@
|
||||
[:profile/profile-selected key-uid]))
|
||||
:on-cancel #(re-frame/dispatch [:pop-to-root :multiaccounts])}}
|
||||
{:db (assoc-in db [:onboarding-2/profile :seed-phrase] seed-phrase)
|
||||
:dispatch [:navigate-to-within-stack [:create-profile :new-to-status]]}))
|
||||
:dispatch [:navigate-to :create-profile]}))
|
||||
|
||||
(rf/defn navigate-to-create-profile
|
||||
{:events [:onboarding-2/navigate-to-create-profile]}
|
||||
[{:keys [db]}]
|
||||
;; Restart the flow
|
||||
{:db (dissoc db :onboarding-2/profile)
|
||||
:dispatch [:navigate-to-within-stack [:create-profile :new-to-status]]})
|
||||
:dispatch [:navigate-to :create-profile]})
|
||||
|
||||
(rf/defn onboarding-new-account-finalize-setup
|
||||
{:events [:onboarding-2/finalize-setup]}
|
||||
@@ -135,6 +132,6 @@
|
||||
{:events [:onboarding-2/navigate-to-identifiers]}
|
||||
[{:keys [db]}]
|
||||
(if (:onboarding-2/generated-keys? db)
|
||||
{:dispatch [:navigate-to-within-stack [:identifiers :new-to-status]]}
|
||||
{:dispatch [:navigate-to :identifiers]}
|
||||
{:dispatch-later [{:ms constants/onboarding-generating-keys-navigation-retry-ms
|
||||
:dispatch [:onboarding-2/navigate-to-identifiers]}]}))
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
(ns status-im2.contexts.onboarding.generating-keys.style)
|
||||
(ns status-im2.contexts.onboarding.generating-keys.style
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn page-container
|
||||
[insets]
|
||||
{:flex 1
|
||||
:justify-content :space-between
|
||||
:padding-top (:top insets)})
|
||||
{:flex 1
|
||||
:justify-content :space-between
|
||||
:padding-top (:top insets)
|
||||
:background-color colors/neutral-80-opa-80-blur})
|
||||
|
||||
(defn page-illustration
|
||||
[width]
|
||||
|
||||
@@ -7,7 +7,8 @@
|
||||
[utils.i18n :as i18n]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.common.parallax.view :as parallax]
|
||||
[status-im2.common.parallax.whitelist :as whitelist]))
|
||||
[status-im2.common.parallax.whitelist :as whitelist]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]))
|
||||
|
||||
(defn generate-keys-title
|
||||
[]
|
||||
@@ -142,6 +143,7 @@
|
||||
[]
|
||||
(let [insets (safe-area/get-insets)]
|
||||
[rn/view {:style (style/page-container insets)}
|
||||
[background/view true]
|
||||
(if whitelist/whitelisted?
|
||||
[parallax-page insets]
|
||||
[:f> f-simple-page insets])]))
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
(ns status-im2.contexts.onboarding.identifiers.style)
|
||||
|
||||
(def page-container
|
||||
{:flex 1
|
||||
:overflow :hidden})
|
||||
{:flex 1})
|
||||
|
||||
(def content-container
|
||||
{:position :absolute
|
||||
|
||||
@@ -4,8 +4,10 @@
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im2.contexts.onboarding.identifiers.profile-card.view :as profile-card]
|
||||
[status-im2.contexts.onboarding.identifiers.style :as style]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.contexts.onboarding.common.carousel.view :as carousel]
|
||||
[status-im2.contexts.onboarding.common.carousel.animation :as carousel.animation]))
|
||||
|
||||
@@ -36,6 +38,7 @@
|
||||
(carousel.animation/cleanup-animation progress paused?))
|
||||
[])
|
||||
[:<>
|
||||
[background/view true]
|
||||
[rn/view {:style style/page-container}
|
||||
[carousel/view
|
||||
{:animate? true
|
||||
@@ -54,12 +57,10 @@
|
||||
:customization-color color
|
||||
:progress progress}]
|
||||
[quo/button
|
||||
{:accessibility-label :skip-identifiers
|
||||
:type :grey
|
||||
:background :blur
|
||||
:on-press #(rf/dispatch [:navigate-to-within-stack
|
||||
[:enable-notifications :new-to-status]])
|
||||
:style style/button}
|
||||
{:accessibility-label :skip-identifiers
|
||||
:on-press #(rf/dispatch [:navigate-to :enable-notifications])
|
||||
:override-background-color colors/white-opa-5
|
||||
:style style/button}
|
||||
(i18n/label :t/skip)]]]]))
|
||||
|
||||
(defn view [props] [:f> f-view props])
|
||||
|
||||
@@ -7,8 +7,7 @@
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.constants :as constants]
|
||||
[status-im2.contexts.syncing.scan-sync-code.view :as scan-sync-code]
|
||||
[utils.debounce :as debounce]
|
||||
[status-im2.contexts.onboarding.common.overlay.view :as overlay]))
|
||||
[utils.debounce :as debounce]))
|
||||
|
||||
(defn view
|
||||
[]
|
||||
@@ -25,10 +24,7 @@
|
||||
:heading (i18n/label :t/sign-in)
|
||||
:animated-heading (i18n/label :t/sign-in-by-syncing)
|
||||
:accessibility-label :already-use-status-button}
|
||||
:bottom-card {:on-press (fn []
|
||||
(when @overlay/blur-show-fn-atom
|
||||
(@overlay/blur-show-fn-atom))
|
||||
(rf/dispatch [:open-modal :new-to-status]))
|
||||
:bottom-card {:on-press #(rf/dispatch [:navigate-to :new-to-status])
|
||||
:heading (i18n/label :t/new-to-status)
|
||||
:accessibility-label :new-to-status-button}}
|
||||
[quo/text
|
||||
@@ -42,5 +38,4 @@
|
||||
[quo/text
|
||||
{:on-press #(rf/dispatch [:open-modal :privacy-policy])
|
||||
:style style/highlighted-text}
|
||||
(i18n/label :t/terms-of-service)]]]
|
||||
[overlay/view]])
|
||||
(i18n/label :t/terms-of-service)]]]])
|
||||
|
||||
@@ -5,19 +5,11 @@
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im.keycard.recovery :as keycard]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
|
||||
[status-im2.contexts.onboarding.new-to-status.style :as style]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.onboarding.common.overlay.view :as overlay]
|
||||
[status-im2.contexts.profile.profiles.view :as profiles]))
|
||||
|
||||
(defn navigate-back
|
||||
[]
|
||||
(when @overlay/blur-dismiss-fn-atom
|
||||
(@overlay/blur-dismiss-fn-atom))
|
||||
(when @profiles/pop-animation-fn-atom
|
||||
(@profiles/pop-animation-fn-atom))
|
||||
(rf/dispatch [:dismiss-modal :new-to-status]))
|
||||
[utils.re-frame :as rf]))
|
||||
|
||||
(defn sign-in-options
|
||||
[]
|
||||
@@ -50,7 +42,7 @@
|
||||
:title (i18n/label :t/use-recovery-phrase)
|
||||
:subtitle (i18n/label :t/use-recovery-phrase-subtitle)
|
||||
:image (resources/get-image :ethereum-address)
|
||||
:on-press #(rf/dispatch [:navigate-to-within-stack [:enter-seed-phrase :new-to-status]])}]
|
||||
:on-press #(rf/dispatch [:navigate-to :enter-seed-phrase])}]
|
||||
[rn/view {:style style/space-between-suboptions}]
|
||||
[quo/small-option-card
|
||||
{:variant :icon
|
||||
@@ -97,30 +89,19 @@
|
||||
:style style/doc-content}
|
||||
(i18n/label :t/getting-started-generate-keys-on-keycard-description)]]])
|
||||
|
||||
(defn navigation-bar
|
||||
[top]
|
||||
[rn/view
|
||||
{:style {:height 56
|
||||
:margin-top top}}
|
||||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:type :blur-bg
|
||||
:icon :i/arrow-left
|
||||
:icon-override-theme :dark
|
||||
:on-press navigate-back}
|
||||
:right-section-buttons [{:type :blur-bg
|
||||
:icon :i/info
|
||||
:icon-override-theme :dark
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet
|
||||
{:content getting-started-doc
|
||||
:shell? true}])}]}]])
|
||||
|
||||
(defn new-to-status
|
||||
[]
|
||||
(let [{:keys [top]} (safe-area/get-insets)]
|
||||
[:<>
|
||||
[background/view true]
|
||||
[rn/view {:style style/content-container}
|
||||
[navigation-bar top]
|
||||
[navigation-bar/navigation-bar
|
||||
{:top top
|
||||
:right-section-buttons [{:type :blur-bg
|
||||
:icon :i/info
|
||||
:icon-override-theme :dark
|
||||
:on-press #(rf/dispatch
|
||||
[:show-bottom-sheet
|
||||
{:content getting-started-doc
|
||||
:shell? true}])}]}]
|
||||
[sign-in-options]]]))
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
(ns status-im2.contexts.onboarding.syncing.progress.view
|
||||
(:require [quo2.core :as quo]
|
||||
[utils.i18n :as i18n]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.onboarding.syncing.progress.style :as style]
|
||||
@@ -31,13 +32,13 @@
|
||||
(defn try-again-button
|
||||
[profile-color in-onboarding?]
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:syncing/clear-states])
|
||||
(rf/dispatch [:navigate-back-to
|
||||
(if in-onboarding? :sign-in-intro :sign-in)]))
|
||||
:accessibility-label :try-again-later-button
|
||||
:customization-color profile-color
|
||||
:style style/try-again-button}
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:syncing/clear-states])
|
||||
(rf/dispatch [:navigate-back-to
|
||||
(if in-onboarding? :sign-in-intro :sign-in)]))
|
||||
:accessibility-label :try-again-later-button
|
||||
:override-background-color (colors/custom-color profile-color 60)
|
||||
:style style/try-again-button}
|
||||
(i18n/label :t/try-again)])
|
||||
|
||||
(defn view
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns status-im2.contexts.onboarding.syncing.results.style
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.reanimated :as reanimated]))
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
(defn page-container
|
||||
[top]
|
||||
@@ -14,14 +13,6 @@
|
||||
:padding-bottom 20
|
||||
:background-color colors/neutral-80-opa-80-blur})
|
||||
|
||||
(defn content
|
||||
[translate-x]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:transform [{:translate-x translate-x}]}
|
||||
{:margin-top 56
|
||||
:margin-bottom 26
|
||||
:flex 1}))
|
||||
|
||||
(def current-device
|
||||
{:margin-bottom 19})
|
||||
|
||||
|
||||
@@ -7,9 +7,7 @@
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.onboarding.syncing.results.style :as style]
|
||||
[status-im2.contexts.syncing.device.view :as device]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im2.constants :as constants]))
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]))
|
||||
|
||||
(defn page-title
|
||||
[]
|
||||
@@ -46,36 +44,24 @@
|
||||
:render-fn device/view}]]))
|
||||
|
||||
(defn continue-button
|
||||
[on-press]
|
||||
[]
|
||||
(let [profile-color (:color (rf/sub [:onboarding-2/profile]))]
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(when on-press
|
||||
(on-press))
|
||||
(rf/dispatch [:open-modal :enable-notifications]))
|
||||
:accessibility-label :continue-button
|
||||
:customization0color profile-color
|
||||
:style style/continue-button}
|
||||
{:on-press #(rf/dispatch [:init-root :enable-notifications])
|
||||
:accessibility-label :continue-button
|
||||
:override-background-color (colors/custom-color profile-color 60)
|
||||
:style style/continue-button}
|
||||
(i18n/label :t/continue)]))
|
||||
|
||||
(defn- f-view
|
||||
[]
|
||||
(let [top (safe-area/get-top)
|
||||
translate-x (reanimated/use-shared-value 0)
|
||||
window-width (:width (rn/get-window))]
|
||||
[rn/view {:style (style/page-container top)}
|
||||
[background/view true]
|
||||
[reanimated/view
|
||||
{:style (style/content translate-x)}
|
||||
[page-title]
|
||||
[devices-list]
|
||||
[continue-button
|
||||
#(reanimated/animate-shared-value-with-delay translate-x
|
||||
(- window-width)
|
||||
constants/onboarding-modal-animation-duration
|
||||
:linear
|
||||
200)]]]))
|
||||
|
||||
(defn view
|
||||
[]
|
||||
[:f> f-view])
|
||||
(let [top (safe-area/get-top)]
|
||||
[rn/view {:style (style/page-container top)}
|
||||
[background/view true]
|
||||
[rn/view
|
||||
{:style {:margin-top 56
|
||||
:margin-bottom 26
|
||||
:flex 1}}
|
||||
[page-title]
|
||||
[devices-list]
|
||||
[continue-button]]]))
|
||||
|
||||
@@ -6,8 +6,9 @@
|
||||
|
||||
(defn page-container
|
||||
[insets]
|
||||
{:flex 1
|
||||
:padding-top (:top insets)})
|
||||
{:flex 1
|
||||
:padding-top (:top insets)
|
||||
:background-color colors/neutral-80-opa-80-blur})
|
||||
|
||||
(def page-illustration
|
||||
{:flex 1
|
||||
|
||||
@@ -8,7 +8,8 @@
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[status-im2.constants :as constants]
|
||||
[status-im2.contexts.onboarding.welcome.style :as style]))
|
||||
[status-im2.contexts.onboarding.welcome.style :as style]
|
||||
[status-im2.contexts.onboarding.common.background.view :as background]))
|
||||
|
||||
(defn page-title
|
||||
[]
|
||||
@@ -22,6 +23,7 @@
|
||||
:subtitle (i18n/label :t/welcome-to-web3-sub-title)
|
||||
:subtitle-accessibility-label :welcome-sub-title}]))
|
||||
|
||||
|
||||
(defn navigation-bar
|
||||
[root]
|
||||
[quo/page-nav
|
||||
@@ -30,13 +32,9 @@
|
||||
:align-mid? false
|
||||
:page-nav-color :transparent
|
||||
:left-section {:icon :i/arrow-left
|
||||
;TODO this is wrong - page nav needs updating
|
||||
;https://github.com/status-im/status-mobile/issues/16535
|
||||
; should be type:grey, and page nav can use background instead.
|
||||
:icon-background-color colors/white-opa-5
|
||||
:type :grey
|
||||
:on-press #(rf/dispatch [:navigate-back-within-stack
|
||||
root])}}])
|
||||
:type :shell
|
||||
:on-press #(rf/dispatch [:init-root root])}}])
|
||||
|
||||
(defn dispatch-visibility-status-update
|
||||
[status-type]
|
||||
@@ -51,6 +49,7 @@
|
||||
[rn/view {:style (style/page-container insets)}
|
||||
(when (nil? status-type)
|
||||
(dispatch-visibility-status-update constants/visibility-status-automatic))
|
||||
[background/view true]
|
||||
[navigation-bar :enable-notifications]
|
||||
[page-title]
|
||||
[rn/view {:style style/page-illustration}
|
||||
@@ -58,10 +57,10 @@
|
||||
"Illustration here"]]
|
||||
[rn/view {:style (style/buttons insets)}
|
||||
[quo/button
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:init-root :shell-stack])
|
||||
(rf/dispatch [:universal-links/process-stored-event]))
|
||||
:type :primary
|
||||
:accessibility-label :welcome-button
|
||||
:customization-color profile-color}
|
||||
{:on-press (fn []
|
||||
(rf/dispatch [:init-root :shell-stack])
|
||||
(rf/dispatch [:universal-links/process-stored-event]))
|
||||
:type :primary
|
||||
:accessibility-label :welcome-button
|
||||
:override-background-color (colors/custom-color profile-color 60)}
|
||||
(i18n/label :t/start-using-status)]]]))
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
(ns status-im2.contexts.profile.profiles.style
|
||||
(:require [quo2.foundations.colors :as colors]
|
||||
[react-native.reanimated :as reanimated]))
|
||||
(:require [quo2.foundations.colors :as colors]))
|
||||
|
||||
;; Profiles Section
|
||||
|
||||
@@ -14,15 +13,12 @@
|
||||
{:padding-horizontal 20
|
||||
:margin-bottom (when-not last-item? -24)})
|
||||
|
||||
(defn profiles-container
|
||||
[translate-x]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:transform [{:translate-x translate-x}]}
|
||||
{:position :absolute
|
||||
:left 0
|
||||
:top 0
|
||||
:bottom 0
|
||||
:right 0}))
|
||||
(def profiles-container
|
||||
{:position :absolute
|
||||
:left 0
|
||||
:top 0
|
||||
:bottom 0
|
||||
:right 0})
|
||||
|
||||
(def profiles-header
|
||||
{:flex-direction :row
|
||||
|
||||
@@ -13,39 +13,14 @@
|
||||
[utils.transforms :as types]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[clojure.string :as string]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im2.constants :as constants]))
|
||||
|
||||
(defonce push-animation-fn-atom (atom nil))
|
||||
(defonce pop-animation-fn-atom (atom nil))
|
||||
|
||||
(defn push-animation
|
||||
[translate-x]
|
||||
(let [window-width (:width (rn/get-window))]
|
||||
(reanimated/animate-shared-value-with-delay translate-x
|
||||
(- window-width)
|
||||
constants/onboarding-modal-animation-duration
|
||||
:linear
|
||||
100)))
|
||||
|
||||
(defn pop-animation
|
||||
[translate-x]
|
||||
(reanimated/animate-shared-value-with-delay translate-x
|
||||
0
|
||||
constants/onboarding-modal-animation-duration
|
||||
:linear
|
||||
50))
|
||||
[clojure.string :as string]))
|
||||
|
||||
(defn new-account-options
|
||||
[]
|
||||
[quo/action-drawer
|
||||
[[{:icon :i/profile
|
||||
:label (i18n/label :t/create-new-profile)
|
||||
:on-press (fn []
|
||||
(when @push-animation-fn-atom
|
||||
(@push-animation-fn-atom))
|
||||
(rf/dispatch [:open-modal :new-to-status]))
|
||||
:on-press #(rf/dispatch [:navigate-to :new-to-status])
|
||||
:accessibility-label :create-new-profile}
|
||||
{:icon :i/multi-profile
|
||||
:label (i18n/label :t/add-existing-status-profile)
|
||||
@@ -122,18 +97,11 @@
|
||||
[:profile/profile-selected key-uid])
|
||||
(when-not keycard-pairing (set-hide-profiles)))}]))
|
||||
|
||||
(defn- f-profiles-section
|
||||
(defn profiles-section
|
||||
[{:keys [set-hide-profiles]}]
|
||||
(let [profiles (vals (rf/sub [:profile/profiles-overview]))
|
||||
translate-x (reanimated/use-shared-value 0)]
|
||||
(rn/use-effect (fn []
|
||||
(reset! push-animation-fn-atom #(push-animation translate-x))
|
||||
(reset! pop-animation-fn-atom #(pop-animation translate-x))
|
||||
(fn []
|
||||
(reset! push-animation-fn-atom nil)
|
||||
(reset! pop-animation-fn-atom nil))))
|
||||
[reanimated/view
|
||||
{:style (style/profiles-container translate-x)}
|
||||
(let [profiles (vals (rf/sub [:profile/profiles-overview]))]
|
||||
[rn/view
|
||||
{:style style/profiles-container}
|
||||
[rn/view
|
||||
{:style style/profiles-header}
|
||||
[quo/text
|
||||
@@ -143,7 +111,6 @@
|
||||
(i18n/label :t/profiles-on-device)]
|
||||
[quo/button
|
||||
{:type :primary
|
||||
:customization-color :blue
|
||||
:size 32
|
||||
:icon true
|
||||
:on-press show-new-account-options
|
||||
@@ -157,10 +124,6 @@
|
||||
:set-hide-profiles set-hide-profiles}
|
||||
:render-fn profile-card}]]))
|
||||
|
||||
(defn profiles-section
|
||||
[props]
|
||||
[:f> f-profiles-section props])
|
||||
|
||||
(defn forget-password-doc
|
||||
[]
|
||||
[quo/documentation-drawers
|
||||
@@ -230,11 +193,12 @@
|
||||
:keyboardVerticalOffset (- (safe-area/get-bottom))}
|
||||
[quo/button
|
||||
{:size 32
|
||||
:type :grey
|
||||
:background :blur
|
||||
:type :blur-bg
|
||||
:icon true
|
||||
:on-press set-show-profiles
|
||||
:disabled processing
|
||||
:override-theme :dark
|
||||
:width 32
|
||||
:accessibility-label :show-profiles
|
||||
:style style/multi-profile-button}
|
||||
:i/multi-profile]
|
||||
@@ -286,6 +250,7 @@
|
||||
:type :primary
|
||||
:customization-color (or customization-color :primary)
|
||||
:accessibility-label :login-button
|
||||
:override-theme :dark
|
||||
:before :i/unlocked
|
||||
:disabled (or (not sign-in-enabled?) processing)
|
||||
:on-press login-multiaccount
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
(ns status-im2.contexts.quo-preview.browser.browser-input
|
||||
(:require [quo2.core :as quo]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.safe-area :as safe-area]
|
||||
[reagent.core :as reagent]
|
||||
[utils.re-frame :as rf]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Show Favicon"
|
||||
:key :favicon?
|
||||
:type :boolean}
|
||||
{:label "Locked"
|
||||
:key :locked?
|
||||
:type :boolean}
|
||||
{:label "Disabled"
|
||||
:key :disabled?
|
||||
:type :boolean}])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(reagent/with-let [keyboard-shown? (reagent/atom false)
|
||||
keyboard-show-listener (.addListener rn/keyboard
|
||||
"keyboardWillShow"
|
||||
#(reset! keyboard-shown? true))
|
||||
keyboard-hide-listener (.addListener rn/keyboard
|
||||
"keyboardWillHide"
|
||||
#(reset! keyboard-shown? false))
|
||||
{:keys [bottom top]} (safe-area/get-insets)
|
||||
state (reagent/atom {:blur? false
|
||||
:disabled? false
|
||||
:favicon? false
|
||||
:placeholder "Search or enter dapp domain"
|
||||
:locked? false})]
|
||||
[rn/keyboard-avoiding-view
|
||||
{:style {:flex 1 :padding-top top}}
|
||||
[quo/page-nav
|
||||
{:align-mid? true
|
||||
:mid-section {:type :text-only :main-text ""}
|
||||
:left-section {:icon :i/arrow-left
|
||||
:on-press
|
||||
#(rf/dispatch [:navigate-back])}}]
|
||||
[rn/flat-list
|
||||
{:header [preview/customizer state descriptor]
|
||||
:key-fn str
|
||||
:keyboard-should-persist-taps :always
|
||||
:style {:flex 1}}]
|
||||
[rn/view
|
||||
[quo/browser-input
|
||||
(assoc @state
|
||||
:customization-color :blue
|
||||
:favicon (when (:favicon? @state) :i/verified))]
|
||||
[rn/view {:style {:height (if-not @keyboard-shown? bottom 0)}}]]]
|
||||
(finally
|
||||
(.remove keyboard-show-listener)
|
||||
(.remove keyboard-hide-listener))))
|
||||
|
||||
(defn preview-browser-input
|
||||
[]
|
||||
[rn/view
|
||||
{:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:flex 1}}
|
||||
[cool-preview]])
|
||||
@@ -11,8 +11,8 @@
|
||||
:type :select
|
||||
:options [{:key :primary
|
||||
:value "Primary"}
|
||||
{:key :positive
|
||||
:value "Positive"}
|
||||
{:key :secondary
|
||||
:value "Secondary"}
|
||||
{:key :grey
|
||||
:value "Grey"}
|
||||
{:key :dark-grey
|
||||
@@ -23,8 +23,8 @@
|
||||
:value "Ghost"}
|
||||
{:key :danger
|
||||
:value "Danger"}
|
||||
{:key :black
|
||||
:value "Black"}]}
|
||||
{:key :positive
|
||||
:value "Positive"}]}
|
||||
{:label "Size:"
|
||||
:key :size
|
||||
:type :select
|
||||
@@ -36,13 +36,6 @@
|
||||
:value "32"}
|
||||
{:key 24
|
||||
:value "24"}]}
|
||||
{:label "Background:"
|
||||
:key :background
|
||||
:type :select
|
||||
:options [{:key :blur
|
||||
:value "Blur"}
|
||||
{:key :photo
|
||||
:value "Photo"}]}
|
||||
{:label "Icon:"
|
||||
:key :icon
|
||||
:type :boolean}
|
||||
@@ -60,26 +53,17 @@
|
||||
:type :boolean}
|
||||
{:label "Label"
|
||||
:key :label
|
||||
:type :text}
|
||||
{:label "Customization color:"
|
||||
:key :customization-color
|
||||
:type :select
|
||||
:options (map (fn [color]
|
||||
(let [k (get color :name)]
|
||||
{:key k :value k}))
|
||||
(quo/picker-colors))}])
|
||||
:type :text}])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:label "Press Me"
|
||||
:size 40})
|
||||
label (reagent/cursor state [:label])
|
||||
before (reagent/cursor state [:before])
|
||||
after (reagent/cursor state [:after])
|
||||
above (reagent/cursor state [:above])
|
||||
icon (reagent/cursor state [:icon])
|
||||
type (reagent/cursor state [:type])
|
||||
customization-color (reagent/cursor state [:customization-color])]
|
||||
(let [state (reagent/atom {:label "Press Me"
|
||||
:size 40})
|
||||
label (reagent/cursor state [:label])
|
||||
before (reagent/cursor state [:before])
|
||||
after (reagent/cursor state [:after])
|
||||
above (reagent/cursor state [:above])
|
||||
icon (reagent/cursor state [:icon])]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
@@ -91,14 +75,10 @@
|
||||
:justify-content :center}
|
||||
[quo/button
|
||||
(merge (dissoc @state
|
||||
:customization-color
|
||||
:theme
|
||||
:before
|
||||
:after)
|
||||
{:background (:background @state)
|
||||
:on-press #(println "Hello world!")}
|
||||
(when (and (= type :primary) customization-color)
|
||||
(:customization-color customization-color))
|
||||
{:on-press #(println "Hello world!")}
|
||||
(when @above
|
||||
{:above :i/placeholder})
|
||||
(when @before
|
||||
@@ -110,7 +90,7 @@
|
||||
(defn preview-button
|
||||
[]
|
||||
[rn/view
|
||||
{:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
{:background-color (colors/theme-colors colors/white colors/neutral-90)
|
||||
:flex 1}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
|
||||
@@ -40,9 +40,9 @@
|
||||
[{:source (resources/get-mock-image :photo1)}
|
||||
{:source (resources/get-mock-image :photo2)}
|
||||
{:source (resources/get-mock-image :photo3)}
|
||||
{:source (resources/get-mock-image :photo1)}
|
||||
{:source (resources/get-mock-image :photo2)}
|
||||
{:source (resources/get-mock-image :photo3)}])
|
||||
{:source (resources/get-mock-image :photo4)}
|
||||
{:source (resources/get-mock-image :photo5)}
|
||||
{:source (resources/get-mock-image :photo6)}])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
|
||||
@@ -19,7 +19,6 @@
|
||||
[status-im2.contexts.quo-preview.buttons.slide-button :as slide-button]
|
||||
[status-im2.contexts.quo-preview.buttons.dynamic-button :as dynamic-button]
|
||||
[status-im2.contexts.quo-preview.buttons.predictive-keyboard :as predictive-keyboard]
|
||||
[status-im2.contexts.quo-preview.browser.browser-input :as browser-input]
|
||||
[status-im2.contexts.quo-preview.code.snippet :as code-snippet]
|
||||
[status-im2.contexts.quo-preview.colors.color-picker :as color-picker]
|
||||
[status-im2.contexts.quo-preview.community.community-card-view :as community-card]
|
||||
@@ -63,7 +62,6 @@
|
||||
[status-im2.contexts.quo-preview.navigation.page-nav :as page-nav]
|
||||
[status-im2.contexts.quo-preview.navigation.top-nav :as top-nav]
|
||||
[status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
|
||||
[status-im2.contexts.quo-preview.notifications.activity-logs-photos :as activity-logs-photos]
|
||||
[status-im2.contexts.quo-preview.notifications.notification :as notification]
|
||||
[status-im2.contexts.quo-preview.notifications.toast :as toast]
|
||||
[status-im2.contexts.quo-preview.onboarding.small-option-card :as small-option-card]
|
||||
@@ -142,9 +140,6 @@
|
||||
{:name :predictive-keyboard
|
||||
:options {:topBar {:visible true}}
|
||||
:component predictive-keyboard/preview-predictive-keyboard}]
|
||||
:browser [{:name :browser-input
|
||||
:options {:topBar {:visible false}}
|
||||
:component browser-input/preview-browser-input}]
|
||||
:code [{:name :snippet
|
||||
:options {:topBar {:visible true}}
|
||||
:component code-snippet/preview-code-snippet}]
|
||||
@@ -283,9 +278,6 @@
|
||||
:notifications [{:name :activity-logs
|
||||
:options {:topBar {:visible true}}
|
||||
:component activity-logs/preview-activity-logs}
|
||||
{:name :activity-logs-photos
|
||||
:options {:topBar {:visible true}}
|
||||
:component activity-logs-photos/preview-activity-logs-photos}
|
||||
{:name :toast
|
||||
:options {:topBar {:visible true}}
|
||||
:component toast/preview-toasts}
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
(ns status-im2.contexts.quo-preview.notifications.activity-logs-photos
|
||||
(:require [quo2.core :as quo]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im2.contexts.quo-preview.preview :as preview]))
|
||||
|
||||
(def descriptor
|
||||
[{:label "Photos Count:"
|
||||
:key :count
|
||||
:type :select
|
||||
:options [{:key 1
|
||||
:value "1"}
|
||||
{:key 2
|
||||
:value "2"}
|
||||
{:key 3
|
||||
:value "3"}
|
||||
{:key 4
|
||||
:value "4"}
|
||||
{:key 5
|
||||
:value "5"}
|
||||
{:key 6
|
||||
:value "6"}]}])
|
||||
|
||||
(def mock-photos
|
||||
[(resources/get-mock-image :photo1)
|
||||
(resources/get-mock-image :photo2)
|
||||
(resources/get-mock-image :photo3)
|
||||
(resources/get-mock-image :photo1)
|
||||
(resources/get-mock-image :photo2)
|
||||
(resources/get-mock-image :photo3)])
|
||||
|
||||
(defn cool-preview
|
||||
[]
|
||||
(let [state (reagent/atom {:count 1})]
|
||||
(fn []
|
||||
[rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
|
||||
[rn/view {:padding-bottom 150}
|
||||
[preview/customizer state descriptor]
|
||||
[rn/view
|
||||
[quo/activity-logs-photos {:photos (take (:count @state) mock-photos)}]]]])))
|
||||
|
||||
(defn preview-activity-logs-photos
|
||||
[]
|
||||
[rn/view
|
||||
{:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||
:flex 1}
|
||||
[rn/flat-list
|
||||
{:flex 1
|
||||
:keyboard-should-persist-taps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
@@ -35,7 +35,7 @@
|
||||
:undo-duration 4
|
||||
:undo-on-press #(do
|
||||
(rf/dispatch [:toasts/upsert
|
||||
{:icon :i/correct
|
||||
{:icon :correct
|
||||
:icon-color colors/success-50-opa-40
|
||||
:text "Undo pressed"}])
|
||||
(rf/dispatch [:toasts/close
|
||||
@@ -54,7 +54,7 @@
|
||||
#(do
|
||||
(rf/dispatch
|
||||
[:toasts/upsert
|
||||
{:icon :i/correct :icon-color colors/success-50-opa-40 :text "Undo pressed"}])
|
||||
{:icon :correct :icon-color colors/success-50-opa-40 :text "Undo pressed"}])
|
||||
(rf/dispatch [:toasts/close "Toast: with undo action"]))}])
|
||||
|
||||
(defn toast-button-30s-duration
|
||||
@@ -79,7 +79,7 @@
|
||||
#(rf/dispatch
|
||||
[:toasts/upsert
|
||||
{:id "Toast: 30s duration"
|
||||
:icon :i/info
|
||||
:icon :info
|
||||
:icon-color colors/danger-50-opa-40
|
||||
:text (str "This is an updated example toast" " - " (swap! suffix inc))
|
||||
:duration 3000}])}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user