status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adjust identifiers page to do highlighting (#15752)

This commit is contained in:
watson 2023-05-16 10:38:50 -04:00 committed by Andrea Maria Piana
parent 1503f6b250
commit cebc50d409
No known key found for this signature in database
GPG Key ID: AA6CCA6DE0E06424
8 changed files with 341 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/js/worklets/identifiers_highlighting.js Normal file
View File

@ -0,0 +1,92 @@
import { useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
export function background(color, progress) {
return useDerivedValue(function () {
'worklet';
const r = parseInt(color.substring(1, 3), 16);
const g = parseInt(color.substring(3, 5), 16);
const b = parseInt(color.substring(5, 7), 16);
return progress.value <= 25 ? `rgba(${r}, ${g}, ${b}, .4)` : `rgba(${r}, ${g}, ${b}, .2)`;
});
}
export function opacity(progress) {
return useDerivedValue(function () {
'worklet';
return progress.value <= 25 ? 1 : 0.3;
});
}
export function avatarOpacity(progress) {
return useDerivedValue(function () {
'worklet';
const progressValue = progress.value;
switch (true) {
case progressValue <= 25:
return 1;
case progressValue <= 50:
return 0.1;
default:
return 0.3;
}
});
}
export function ringOpacity(progress) {
return useDerivedValue(function () {
'worklet';
return progress.value <= 50 ? 1 : 0.3;
});
}
export function userHashOpacity(progress) {
return useDerivedValue(function () {
'worklet';
const progressValue = progress.value;
switch (true) {
case progressValue <= 25:
return 1;
case progressValue <= 50:
return 0.3;
case progressValue <= 75:
return 1;
default:
return 0.3;
}
});
}
export function userHashColor(progress) {
return useDerivedValue(function () {
'worklet';
const progressValue = progress.value;
switch (true) {
case progressValue <= 25:
return 'rgba(255, 255, 255, .6)';
case progressValue <= 50:
return 'rgba(255, 255, 255, .6)';
case progressValue <= 75:
return 'rgb(255, 255, 255)';
default:
return 'rgba(255, 255, 255, .6)';
}
});
}
export function emojiHashStyle(progress) {
return useAnimatedStyle(function () {
'worklet';
const progressValue = progress.value;
switch (true) {
case progressValue <= 25:
return { opacity: 1 };
case progressValue <= 75:
return { opacity: 0.3 };
default:
return { opacity: 1 };
}
});
}

4
src/mocks/js_dependencies.cljs
View File

@ -419,6 +419,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
"../src/js/worklets/onboarding_carousel.js" #js {}
"../src/js/worklets/lightbox.js" #js {}
"../src/js/worklets/parallax.js" #js {}
"../src/js/worklets/identifiers_highlighting.js" #js {}
"./fleets.js" default-fleets
"@walletconnect/client" wallet-connect-client
"../translations/ar.json" (js/JSON.parse (slurp "./translations/ar.json"))
@ -435,6 +436,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
"../translations/ru.json" (js/JSON.parse (slurp "./translations/ru.json"))
"../translations/tr.json" (js/JSON.parse (slurp "./translations/tr.json"))
"../translations/zh.json" (js/JSON.parse (slurp "./translations/zh.json"))
"../translations/zh_hant.json" (js/JSON.parse (slurp "./translations/zh_hant.json"))
"../translations/zh_hant.json" (js/JSON.parse (slurp
"./translations/zh_hant.json"))
"../translations/zh_TW.json" (js/JSON.parse (slurp "./translations/zh_TW.json"))
nil))

1
src/react_native/reanimated.cljs
View File

@ -34,6 +34,7 @@
(def create-animated-component (comp reagent/adapt-react-class (.-createAnimatedComponent reanimated)))
(def view (reagent/adapt-react-class (.-View reanimated)))
(def text (reagent/adapt-react-class (.-Text reanimated)))
(def scroll-view (reagent/adapt-react-class (.-ScrollView reanimated)))
(def image (reagent/adapt-react-class (.-Image reanimated)))

69
src/status_im2/contexts/onboarding/identifiers/profile_card/style.cljs Normal file
View File

@ -0,0 +1,69 @@
(ns status-im2.contexts.onboarding.identifiers.profile-card.style
(:require [quo2.foundations.colors :as colors]
[react-native.reanimated :as reanimated]
[quo2.foundations.typography :as typography]))
(def card-view
{:margin-horizontal 20
:margin-bottom :auto
:flex-direction :row})
(defn card-container
[background-color]
(reanimated/apply-animations-to-style
{:background-color background-color}
{:padding-horizontal 12
:padding-top 12
:padding-bottom 12
:flex 1
:border-radius 16}))
(def card-header
{:flex-direction :row
:justify-content :space-between})
(defn avatar
[opacity]
(reanimated/apply-animations-to-style
{:opacity opacity}
{}))
(defn mask-view
[opacity]
(reanimated/apply-animations-to-style
{:opacity opacity}
{:width 48
:background-color :transparent
:height 48
:border-color :black
:border-width 2
:border-radius 44}))
(def picture-avatar-mask
{:width 48
:height 48
:border-radius 48})
(defn user-name-container
[opacity]
(reanimated/apply-animations-to-style
{:opacity opacity}
{:flex-direction :row
:margin-top 8
:align-items :center
:padding-right 12}))
(def user-name
{:color colors/white})
(defn user-hash
[user-hash-color user-hash-opacity]
(reanimated/apply-animations-to-style
{:color user-hash-color
:opacity user-hash-opacity}
(merge typography/monospace
typography/paragraph-1
{:margin-top 2})))
(def emoji-hash
{:margin-top 12})

68
src/status_im2/contexts/onboarding/identifiers/profile_card/view.cljs Normal file
View File

@ -0,0 +1,68 @@
(ns status-im2.contexts.onboarding.identifiers.profile-card.view
(:require [react-native.core :as rn]
[react-native.reanimated :as reanimated]
[react-native.masked-view :as masked-view]
[reagent.core :as reagent]
[quo2.core :as quo]
[quo2.foundations.colors :as colors]
[utils.worklets.identifiers-highlighting :as worklets.identifiers-highlighting]
[status-im2.contexts.onboarding.identifiers.profile-card.style :as style]))
(defn- f-profile-card-component
[{:keys [profile-picture name hash emoji-hash
customization-color progress]
:or {customization-color :turquoise}}]
(let [container-background (worklets.identifiers-highlighting/background
(colors/custom-color customization-color 50)
@progress)
opacity (worklets.identifiers-highlighting/opacity @progress)
avatar-opacity (worklets.identifiers-highlighting/avatar-opacity @progress)
ring-opacity (worklets.identifiers-highlighting/ring-opacity @progress)
user-hash-color (worklets.identifiers-highlighting/user-hash-color @progress)
user-hash-opacity (worklets.identifiers-highlighting/user-hash-opacity @progress)
emoji-hash-style (worklets.identifiers-highlighting/emoji-hash-style @progress)]
[rn/view
{:style style/card-view}
[reanimated/view
{:style (style/card-container container-background)}
[rn/view {:style style/card-header}
[reanimated/view
{:style (style/avatar avatar-opacity)}
[quo/user-avatar
{:full-name name
:profile-picture profile-picture
:override-theme :dark
:size :medium
:status-indicator? false
:customization-color customization-color}]]
[masked-view/masked-view
{:style {:position :absolute}
:mask-element (reagent/as-element
[reanimated/view {:style (style/mask-view ring-opacity)}])}
(when profile-picture
[rn/image
{:accessibility-label :ring-background
:style style/picture-avatar-mask
:source profile-picture}])]]
[reanimated/view
{:style (style/user-name-container opacity)}
[quo/text
{:size :heading-2
:weight :semi-bold
:number-of-lines 1
:style style/user-name} name]]
[reanimated/text
{:number-of-lines 3
:style (style/user-hash user-hash-color user-hash-opacity)}
hash]
[reanimated/view
{:style [emoji-hash-style]}
[quo/text
{:weight :monospace
:number-of-lines 1
:style style/emoji-hash}
emoji-hash]]]]))
(defn profile-card
[props]
[:f> f-profile-card-component props])

6
src/status_im2/contexts/onboarding/identifiers/style.cljs
View File

@ -5,15 +5,11 @@
(def content-container
{:position :absolute
:top 170
:top 166
:bottom 0
:left 0
:right 0})
(def card-style
{:margin-horizontal 20
:margin-bottom :auto})
(def button
{:justify-self :flex-end
:margin-bottom 46

9
src/status_im2/contexts/onboarding/identifiers/view.cljs
View File

@ -5,6 +5,7 @@
[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]
@ -44,15 +45,13 @@
:gesture :tappable
:header-text header-text}]
[rn/view {:style style/content-container}
[quo/profile-card
[profile-card/profile-card
{:profile-picture photo-path
:name display-name
:hash compressed-key
:customization-color color
:emoji-hash emoji-string
:show-emoji-hash? true
:show-user-hash? true
:card-style style/card-style}]
:customization-color color
:progress progress}]
[quo/button
{:accessibility-label :skip-identifiers
:on-press #(rf/dispatch [:navigate-to :enable-notifications])

31
src/utils/worklets/identifiers_highlighting.cljs Normal file
View File

@ -0,0 +1,31 @@
(ns utils.worklets.identifiers-highlighting)
(def worklets (js/require "../src/js/worklets/identifiers_highlighting.js"))
(defn background
[color progress]
(.background ^js worklets color progress))
(defn opacity
[progress]
(.opacity ^js worklets progress))
(defn avatar-opacity
[progress]
(.avatarOpacity ^js worklets progress))
(defn ring-opacity
[progress]
(.ringOpacity ^js worklets progress))
(defn user-hash-color
[progress]
(.userHashColor ^js worklets progress))
(defn user-hash-opacity
[progress]
(.userHashOpacity ^js worklets progress))
(defn emoji-hash-style
[progress]
(.emojiHashStyle ^js worklets progress))