Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Layout] Base #6907

Merged
merged 75 commits into from
Dec 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
75 commits
Select commit Hold shift + click to select a range
6df90b2
Add common gutter styles as hook
estrattonbailey Dec 2, 2024
e406bad
Add computed scrollbar gutter CSS vars
estrattonbailey Dec 2, 2024
63844a8
Add new layout components
estrattonbailey Dec 2, 2024
e88b3e4
Replace layout components in settings screens
estrattonbailey Dec 2, 2024
48f44fd
Remove old back button
estrattonbailey Dec 2, 2024
6c31ad4
Invert web border logic for easier migration
estrattonbailey Dec 2, 2024
b636224
Clean up Slot API
estrattonbailey Dec 2, 2024
2fd9151
Port over FF handling of scrollbar offset
estrattonbailey Dec 3, 2024
2a60f35
Trade boilerplate for ease of use
estrattonbailey Dec 3, 2024
dd4d944
Limit to one line
estrattonbailey Dec 3, 2024
264a866
Allow two lines, fix wrapping
estrattonbailey Dec 3, 2024
b7f356b
Fix alignment
estrattonbailey Dec 3, 2024
50cea19
sticky headers
mozzius Dec 4, 2024
faf0c27
set max with on header and center
mozzius Dec 4, 2024
6a6faf3
[Layout] Notifications Header (#6910)
estrattonbailey Dec 4, 2024
ce7ab43
Replace Hashtag header (#6928)
estrattonbailey Dec 4, 2024
2aecb48
[Layout] ChatList header (#6929)
estrattonbailey Dec 4, 2024
1819e08
Add web borders to Chat settings
estrattonbailey Dec 4, 2024
2ffbd11
Remove unused var
estrattonbailey Dec 4, 2024
3a518f9
Move ChatList header outside center
estrattonbailey Dec 4, 2024
199015d
Replace empty chat layout
estrattonbailey Dec 4, 2024
ba2162f
fix breakpoints
mozzius Dec 4, 2024
a0db0e1
[Layout] Scrollbar gutters (#6908)
estrattonbailey Dec 4, 2024
fae2c63
use correct scroll insets (#6950)
mozzius Dec 4, 2024
274a263
[Layout] Feeds headers (#6913)
estrattonbailey Dec 4, 2024
0981491
[Layout] Every other screen (#6953)
mozzius Dec 4, 2024
abbc570
delete `SimpleViewHeader` and fix screens (#6956)
mozzius Dec 4, 2024
c426fe5
Make Layout.Center not full height
estrattonbailey Dec 4, 2024
2ec78e6
Refactor List to use Layout.Center, remove built-in borders
estrattonbailey Dec 4, 2024
df01417
Fix Home screen
estrattonbailey Dec 4, 2024
9a7ca14
Refactor PagerWithHeader to use Layout components
estrattonbailey Dec 4, 2024
5a3c0e0
Replace components in ProfileFeed and ProfileList
estrattonbailey Dec 4, 2024
934782f
Borders on Profile
estrattonbailey Dec 4, 2024
5b4c0bd
Search screen replacements
estrattonbailey Dec 4, 2024
5323d23
use new header for profile subpage header (#6958)
mozzius Dec 4, 2024
a5ef82f
Search AutocompleteResults
estrattonbailey Dec 4, 2024
a8b98dc
use new header for starter pack wizard (#6957)
mozzius Dec 4, 2024
1611d44
Fix post thread
estrattonbailey Dec 4, 2024
ed7bd12
Enable borders by default
estrattonbailey Dec 4, 2024
a2fb626
Moderation muted and blocked accounts
estrattonbailey Dec 4, 2024
e740bdd
Fix scrollbar offset on Labeler
estrattonbailey Dec 4, 2024
7df55eb
Remove ScrollView from Moderation
estrattonbailey Dec 4, 2024
03b871e
Remove ScrollView from Deactivated
estrattonbailey Dec 4, 2024
6a3854b
Remove ScrollView from onboarding
estrattonbailey Dec 4, 2024
0c24e5e
Remove ScrollView from SignupQueued
estrattonbailey Dec 4, 2024
bb99323
Mark deprecations
estrattonbailey Dec 4, 2024
a3778d1
fix lint
mozzius Dec 4, 2024
2ac21c1
Fix double borders on profile load
estrattonbailey Dec 4, 2024
0a9eb0e
Remove unneeded CenteredView from noty Feed
estrattonbailey Dec 4, 2024
46a4d9b
Remove double Center layout on Notifications screen
estrattonbailey Dec 4, 2024
7cd3e2d
Remove double Center layout on ChatList screen
estrattonbailey Dec 4, 2024
9645e0d
Handle scrollbar offset in chat
estrattonbailey Dec 4, 2024
7693712
Use new atom for other scrollbar offsets
estrattonbailey Dec 4, 2024
d8dc0d2
Remove borders from old views
estrattonbailey Dec 4, 2024
491573d
Better doc
estrattonbailey Dec 4, 2024
bba6567
Remove temp migration prop
estrattonbailey Dec 4, 2024
050563e
Fix new atom usage on native
estrattonbailey Dec 5, 2024
7681046
Clean up Hashtag screen
estrattonbailey Dec 5, 2024
ccae2f5
Layout docs
estrattonbailey Dec 5, 2024
e5953be
Clarify usage in Pager
estrattonbailey Dec 5, 2024
a96b93a
Handle nested offset contexts
estrattonbailey Dec 5, 2024
d3bd2a4
Clean up Layout
estrattonbailey Dec 5, 2024
df9c05a
fix feeds page
mozzius Dec 5, 2024
3d48925
asymmetric header on native (#6969)
mozzius Dec 5, 2024
c8c03ed
Reusable header const
estrattonbailey Dec 5, 2024
b82551c
Fix up home header
estrattonbailey Dec 5, 2024
44d739a
Add back button to convo
estrattonbailey Dec 5, 2024
002e328
Add hitslop to header buttons
estrattonbailey Dec 5, 2024
08dc17b
Comment
estrattonbailey Dec 5, 2024
3e261aa
Better handling on native for new atom
estrattonbailey Dec 5, 2024
11f2efe
Format
estrattonbailey Dec 5, 2024
b6ce210
Fix nested flatlist on mod screens
estrattonbailey Dec 5, 2024
42702f1
Use react-remove-scroll-bar directly
estrattonbailey Dec 6, 2024
c5314b9
Fix notification count overflow on web
estrattonbailey Dec 6, 2024
8914f1e
Clarify doc
estrattonbailey Dec 6, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/icons/floppyDisk_stroke2_corner0_rounded.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 7 additions & 2 deletions bskyweb/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
}
html {
background-color: white;
scrollbar-gutter: stable both-edges;
}
@media (prefers-color-scheme: dark) {
html {
Expand Down Expand Up @@ -76,9 +75,15 @@
top: 50%;
transform: translateX(-50%) translateY(-50%) translateY(-50px);
}
/* We need this style to prevent web dropdowns from shifting the display when opening */
/**
* We need these styles to prevent shifting due to scrollbar show/hide on
* OSs that have them enabled by default. This also handles cases where the
* screen wouldn't otherwise scroll, and therefore hide the scrollbar and
* shift the content, by forcing the page to show a scrollbar.
*/
body {
width: 100%;
overflow-y: scroll;
}
</style>

Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,7 @@
"react-native-web": "~0.19.11",
"react-native-web-webview": "^1.0.2",
"react-native-webview": "13.10.2",
"react-remove-scroll-bar": "^2.3.6",
"react-responsive": "^9.0.2",
"react-textarea-autosize": "^8.5.3",
"rn-fetch-blob": "^0.12.0",
Expand Down
22 changes: 21 additions & 1 deletion src/alf/atoms.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native'

import * as tokens from '#/alf/tokens'
import {ios, native, web} from '#/alf/util/platform'
import {ios, native, platform, web} from '#/alf/util/platform'
import * as Layout from '#/components/Layout'

export const atoms = {
debug: {
Expand All @@ -21,6 +22,9 @@ export const atoms = {
relative: {
position: 'relative',
},
sticky: web({
position: 'sticky',
}),
inset_0: {
top: 0,
left: 0,
Expand Down Expand Up @@ -941,4 +945,20 @@ export const atoms = {
transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
transitionDuration: '100ms',
}),

/**
* {@link Layout.SCROLLBAR_OFFSET}
*/
scrollbar_offset: platform({
web: {
transform: [
{
translateX: Layout.SCROLLBAR_OFFSET,
},
],
},
native: {
transform: [],
},
}) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
} as const
1 change: 1 addition & 0 deletions src/alf/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
export * from '#/alf/util/flatten'
export * from '#/alf/util/platform'
export * from '#/alf/util/themeSelector'
export * from '#/alf/util/useGutterStyles'

export type Alf = {
themeName: ThemeName
Expand Down Expand Up @@ -74,7 +75,7 @@
const setFontScaleAndPersist = React.useCallback<
Alf['fonts']['setFontScale']
>(
fontScale => {

Check warning on line 78 in src/alf/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters

'fontScale' is already declared in the upper scope on line 69 column 10
setFontScale(fontScale)
persistFontScale(fontScale)
setFontScaleMultiplier(computeFontScaleMultiplier(fontScale))
Expand All @@ -87,7 +88,7 @@
const setFontFamilyAndPersist = React.useCallback<
Alf['fonts']['setFontFamily']
>(
fontFamily => {

Check warning on line 91 in src/alf/index.tsx

View workflow job for this annotation

GitHub Actions / Run linters

'fontFamily' is already declared in the upper scope on line 85 column 10
setFontFamily(fontFamily)
persistFontFamily(fontFamily)
},
Expand Down
21 changes: 21 additions & 0 deletions src/alf/util/useGutterStyles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react'

import {atoms as a, useBreakpoints, ViewStyleProp} from '#/alf'

export function useGutterStyles({
top,
bottom,
}: {
top?: boolean
bottom?: boolean
} = {}) {
const {gtMobile} = useBreakpoints()
return React.useMemo<ViewStyleProp['style']>(() => {
return [
a.px_lg,
top && a.pt_md,
bottom && a.pb_md,
gtMobile && [a.px_xl, top && a.pt_lg, bottom && a.pb_lg],
]
}, [gtMobile, top, bottom])
}
2 changes: 2 additions & 0 deletions src/components/Dialog/index.web.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {useLingui} from '@lingui/react'
import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
import {useFocusGuards} from '@radix-ui/react-focus-guards'
import {FocusScope} from '@radix-ui/react-focus-scope'
import {RemoveScrollBar} from 'react-remove-scroll-bar'

import {logger} from '#/logger'
import {useDialogStateControlContext} from '#/state/dialogs'
Expand Down Expand Up @@ -103,6 +104,7 @@ export function Outer({
{isOpen && (
<Portal>
<Context.Provider value={context}>
<RemoveScrollBar />
<TouchableWithoutFeedback
accessibilityHint={undefined}
accessibilityLabel={_(msg`Close active dialog`)}
Expand Down
100 changes: 0 additions & 100 deletions src/components/Layout.tsx

This file was deleted.

Loading
Loading