Blurred Dots Background #4685

swansontec · 2024-01-06T00:22:08Z

CHANGELOG

Does this branch warrant an entry to the CHANGELOG?

Yes
No

Dependencies

none

Requirements

If you have made any visual changes to the GUI. Make sure you have:

Tested on iOS device
Tested on Android device
Tested on small-screen device (iPod Touch)
Tested on large-screen device (tablet)

To see the specific tasks where the Asana app for GitHub is being used, see below:
- https://app.asana.com/0/0/1206061725717176

samholmes

My feedback is a few fixups regarding theming configuration and mainly a concern about configurability for white-labels. I think we have the opportunity to consider infrastructure here to render different background components whether some complex SVG, a simple background image, or a gradient of some kind. All of these requirements can be handled in a custom component which may be "used" throughout the app and configured for each white-label configuration.

src/components/progress-indicators/LoadingSplashScreen.tsx

src/components/ui4/DotsBackground.tsx

src/theme/variables/edgeDark.ts

src/types/Theme.ts

src/theme/variables/testDark.ts

src/theme/variables/edgeDark.ts

samholmes · 2024-01-08T20:13:11Z

src/components/ui4/DotsBackground.tsx

+  /**
+   * We are simulating the blur using a radial gradient,
+   * since it's cheaper and looks better.
+   *
+   * To do this, we slice a ring off the outside of each dot and
+   * replace it with the gradient. The sliced-off ring has a width of blurR,
+   * and the gradient ring has a width of 2 * blurR.
+   * This means the circle radius will expand by blurR.
+   *
+   * If the circle is smaller than blurR,
+   * then we can't slice off a big enough ring,
+   * so we reduce the opacity towards 0 to compensate.
+   */


I have a vague idea on how this works. Looking closely it does look like its the correct implementation for this description, but I have to double check math more to verify.

To do a blur mathematically, imagine a circle of radius blurRadius, which slides over the scene from left to right. The average color inside the circle becomes the new color for the pixel at the very center of the circle. This imaginary circle is called the "filter kernel" in signal processing lingo.

As it slides, the filter kernel first begins to intersect the background dot at a distance of blurRadius away. As it continues to slide through, the ratio of dot color to background color increases, until the filter kernel is fully inside the background dot. This happens when the kernel is blurRadius in. So, the total distance from 0% to 100% opacity is 2 * blurRadius.

The "filter kernel" corresponds to the camera's iris in physical reality, where a single point on the film receives color from the entire circular lens. If the camera is out-of-focus, this circle will be projected out into space and perform the averaging operation I just described.

This seems like something that could be better understood by a video. Though, thanks for clarifying as it does help me better understand blur algorithms.

src/components/ui4/DotsBackground.tsx

src/components/scenes/LoginScene.tsx

samholmes

Also this shouldn't have been removed.

src/components/scenes/TransactionListScene.tsx

paullinator

Overall I see that the implementation works but I'm concerned that there was a lot of custom engineering work done for a specific design. A blurview on top of flat dots would have allowed more flexibility in the future should we ever want squares, triangles, or even images under the blurview. As is we'd have to write very specific code once again for other implementations.

paullinator · 2024-01-08T07:26:53Z

src/components/common/SceneWrapper.tsx

-  // Settings for when using ScrollView
-  keyboardShouldPersistTaps?: 'always' | 'never' | 'handled'
+  // Adjusts the blurred dots background:
+  accentColor?: string


Maybe this could be more general like a dotColorOverride: Array<string | undefined> which can override any of the dot colors.

Note the the design from @madpaiement has the bottom left dot removed completely and having the override array would allow this

I did it by adding a property to the theme, since the app shouldn't care how many dots the theme wants or where they are positioned.

src/components/ui4/DotsBackground.tsx

paullinator · 2024-01-08T20:34:41Z

src/theme/variables/edgeDark.ts

@@ -121,10 +121,16 @@ export const edgeDark: Theme = {
  loadingIcon: palette.edgeMint,

  // Background
-  // backgroundGradientColors: [palette.navyAqua, palette.navyAquaDarker], // For vertical gradient
-  backgroundGradientColors: [palette.darkestNavy, palette.darkAqua],


We still need a backgroundGradient for the TxList Scene per design.

I don't see the backgroundGradient reinstated from the fixup commits.

paullinator · 2024-01-09T20:55:59Z

src/types/Theme.ts

@@ -3,6 +3,9 @@ import { asNumber, asObject } from 'cleaners'
 export type ImageProp = { uri: string } | number

 export interface ThemeDot {
+  // We the dot color with the accent color, we want to keep the dot color,
+  // or drop the dot:
+  accent?: 'keep' | 'drop'


Hmm. I won't fight back hard on this but this is another bizarre api at is SO specific to our current design. I would have still preferred a simple accent array that allows any of the dots to be changed programmatically after the Theme is applied.

I do agree, but for the sake of time let's roll with it. Also worth noting, the verbiage in the comment is a little word-jumbled.

paullinator · 2024-01-09T20:58:57Z

src/components/scenes/TransactionListScene.tsx

@@ -249,6 +251,7 @@ function TransactionListComponent(props: Props) {
    <SceneWrapper accentColor={iconColor} hasNotifications hasTabs>
      {({ insetStyles }) => (
        <>
+          <LinearGradient colors={[backgroundGradientColor, '#00000000']} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} style={StyleSheet.absoluteFill} />


Hard coding black in to the gradient will not allow us to do light mode or whitelabels with different colors. Due to time constraints, I won't push back on this today but I'll create a task to add the gradient color to the theme. Ideally something like

theme.txListBackgroundGradient and theme.txDetailsBackgroundGradient which would have the full gradient capabilities of arbitrary direction and colors.

Agree that this color should be in the theme now that I think about it. I messed up on my PR prior and should have invented a new theme field for it. Good idea to create break away task.

Oh, good catch! We should use theme.background.color.

paullinator · 2024-01-09T21:00:03Z

@samholmes I added my comments but nothing that needs fixing in the PR. I'll let you give it the final approval

samholmes · 2024-01-09T21:22:39Z

src/components/progress-indicators/LoadingSplashScreen.tsx

  )
 }

-const Container = styled(View)({
+const ViewContainer = styled(View)({


I'd say it's actual name (Container) is a higher priority then the underlying component type it extends. The reasoning here is that unique names are quicker to read rather than all the JSX prefixed with very common prefixes (ViewFoo, ViewBar, TextBaz, TextInputBoz versus FooView, BarView, BazText, BozTextInput). I'll leave it up to you if you want to make any changes, so this is just optional feedback/thoughts and generally my opinion. Perhaps we can discuss a convention with the team for naming things (2nd hardest problem in CS).

samholmes · 2024-01-09T21:25:36Z

src/components/scenes/TransactionListScene.tsx

@@ -249,6 +251,7 @@ function TransactionListComponent(props: Props) {
    <SceneWrapper accentColor={iconColor} hasNotifications hasTabs>
      {({ insetStyles }) => (
        <>
+          <LinearGradient colors={[backgroundGradientColor, '#00000000']} start={{ x: 0, y: 0 }} end={{ x: 0, y: 1 }} style={StyleSheet.absoluteFill} />


Agree that this color should be in the theme now that I think about it. I messed up on my PR prior and should have invented a new theme field for it. Good idea to create break away task.

samholmes · 2024-01-09T21:33:17Z

src/types/Theme.ts

@@ -3,6 +3,9 @@ import { asNumber, asObject } from 'cleaners'
 export type ImageProp = { uri: string } | number

 export interface ThemeDot {
+  // We the dot color with the accent color, we want to keep the dot color,
+  // or drop the dot:
+  accent?: 'keep' | 'drop'


I do agree, but for the sake of time let's roll with it. Also worth noting, the verbiage in the comment is a little word-jumbled.

samholmes · 2024-01-09T22:04:32Z

src/components/ui4/DotsBackground.tsx

+  /**
+   * We are simulating the blur using a radial gradient,
+   * since it's cheaper and looks better.
+   *
+   * To do this, we slice a ring off the outside of each dot and
+   * replace it with the gradient. The sliced-off ring has a width of blurR,
+   * and the gradient ring has a width of 2 * blurR.
+   * This means the circle radius will expand by blurR.
+   *
+   * If the circle is smaller than blurR,
+   * then we can't slice off a big enough ring,
+   * so we reduce the opacity towards 0 to compensate.
+   */


This seems like something that could be better understood by a video. Though, thanks for clarifying as it does help me better understand blur algorithms.

samholmes

Approved with some optional feedback

swansontec · 2024-01-10T00:03:49Z

/autosquash

All fixed.

swansontec force-pushed the william/dots-background branch from 73f6f33 to 17ef344 Compare January 6, 2024 01:14

samholmes requested changes Jan 8, 2024

View reviewed changes

src/components/scenes/TransactionListScene.tsx Show resolved Hide resolved

paullinator previously requested changes Jan 8, 2024

View reviewed changes

swansontec force-pushed the william/dots-background branch from 17ef344 to 5fb13ec Compare January 9, 2024 00:42

paullinator reviewed Jan 9, 2024

View reviewed changes

samholmes reviewed Jan 9, 2024

View reviewed changes

samholmes approved these changes Jan 9, 2024

View reviewed changes

swansontec force-pushed the william/dots-background branch from 438fc35 to 44fe524 Compare January 9, 2024 23:48

samholmes approved these changes Jan 10, 2024

View reviewed changes

swansontec added 5 commits January 9, 2024 16:11

Remove the SceneWrapper background option

46895cf

Remove unused ClickableRow props

3fe9703

Remove unused Theme.backgroundLoadingOverlay

65517d3

Remove login background image support

f74c1ee

Replace the gradient background with blurred dots

017d659

swansontec force-pushed the william/dots-background branch from 7c310a8 to 017d659 Compare January 10, 2024 00:14

swansontec enabled auto-merge January 10, 2024 00:14

swansontec merged commit c4db920 into develop Jan 10, 2024
2 checks passed

swansontec deleted the william/dots-background branch January 10, 2024 00:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blurred Dots Background #4685

Blurred Dots Background #4685

swansontec commented Jan 6, 2024 •

edited

Loading

samholmes left a comment

samholmes Jan 8, 2024

swansontec Jan 9, 2024 •

edited

Loading

samholmes Jan 9, 2024

samholmes left a comment

paullinator left a comment

paullinator Jan 8, 2024

paullinator Jan 8, 2024

swansontec Jan 9, 2024

paullinator Jan 8, 2024

samholmes Jan 9, 2024

paullinator Jan 9, 2024

samholmes Jan 9, 2024

paullinator Jan 9, 2024

samholmes Jan 9, 2024

swansontec Jan 9, 2024 •

edited

Loading

paullinator commented Jan 9, 2024

samholmes Jan 9, 2024

samholmes Jan 9, 2024

samholmes Jan 9, 2024

samholmes Jan 9, 2024

samholmes left a comment

swansontec commented Jan 10, 2024

Blurred Dots Background #4685

Blurred Dots Background #4685

Conversation

swansontec commented Jan 6, 2024 • edited Loading

CHANGELOG

Dependencies

Requirements

samholmes left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

swansontec Jan 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samholmes left a comment

Choose a reason for hiding this comment

paullinator left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

swansontec Jan 9, 2024 • edited Loading

Choose a reason for hiding this comment

paullinator commented Jan 9, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samholmes left a comment

Choose a reason for hiding this comment

swansontec commented Jan 10, 2024

swansontec commented Jan 6, 2024 •

edited

Loading

swansontec Jan 9, 2024 •

edited

Loading

swansontec Jan 9, 2024 •

edited

Loading