zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

[APP-735] Post language improvements (#982)

Browse source 
* Fix composer character-counter bouncing around UI elements

* Fix composer toolbar padding when keyboard is dismissed on iOS

* Use the full name of the language in the composer footer

* Add headings to the DropdownButton

* Update the composer language control to use a simpler dropdown

* Fix lint

* Add translate link to Post component used in notifications

* Fix lint
This commit is contained in:
Paul Frazee 2023-07-06 20:28:10 -05:00 • committed by GitHub
parent f05c2f06d6
commit e14c9783e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 189 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/view/com/util/forms/DropdownButton.tsx
View file

@ -24,6 +24,7 @@ import {shareUrl} from 'lib/sharing'
const HITSLOP = {left: 10, top: 10, right: 10, bottom: 10}
const ESTIMATED_BTN_HEIGHT = 50
const ESTIMATED_SEP_HEIGHT = 16
const ESTIMATED_HEADING_HEIGHT = 60
export interface DropdownItemButton {
testID?: string
@ -34,7 +35,14 @@ export interface DropdownItemButton {
export interface DropdownItemSeparator {
sep: true
}
export type DropdownItem = DropdownItemButton | DropdownItemSeparator
export interface DropdownItemHeading {
heading: true
label: string
}
export type DropdownItem =
| DropdownItemButton
| DropdownItemSeparator
| DropdownItemHeading
type MaybeDropdownItem = DropdownItem | false | undefined
export type DropdownButtonType = ButtonType | 'bare'
@ -48,6 +56,7 @@ interface DropdownButtonProps {
menuWidth?: number
children?: React.ReactNode
openToRight?: boolean
openUpwards?: boolean
rightOffset?: number
bottomOffset?: number
accessibilityLabel?: string
@ -63,6 +72,7 @@ export function DropdownButton({
menuWidth,
children,
openToRight = false,
openUpwards = false,
rightOffset = 0,
bottomOffset = 0,
accessibilityLabel,
@ -91,13 +101,15 @@ export function DropdownButton({
estimatedMenuHeight += ESTIMATED_SEP_HEIGHT
} else if (item && isBtn(item)) {
estimatedMenuHeight += ESTIMATED_BTN_HEIGHT
} else if (item && isHeading(item)) {
estimatedMenuHeight += ESTIMATED_HEADING_HEIGHT
}
}
const newX = openToRight
? pageX + width + rightOffset
: pageX + width - menuWidth
let newY = pageY + height + bottomOffset
if (newY + estimatedMenuHeight > winHeight) {
if (openUpwards || newY + estimatedMenuHeight > winHeight) {
newY -= estimatedMenuHeight
}
createDropdownMenu(
@ -357,6 +369,14 @@ const DropdownItems = ({
return (
<View key={index} style={[styles.separator, separatorColor]} />
)
} else if (isHeading(item)) {
return (
<View style={[styles.heading, pal.border]} key={index}>
<Text style={[pal.text, styles.headingLabel]}>
{item.label}
</Text>
</View>
)
}
return null
})}
@ -368,8 +388,11 @@ const DropdownItems = ({
function isSep(item: DropdownItem): item is DropdownItemSeparator {
return 'sep' in item && item.sep
}
function isHeading(item: DropdownItem): item is DropdownItemHeading {
return 'heading' in item && item.heading
}
function isBtn(item: DropdownItem): item is DropdownItemButton {
return !isSep(item)
return !isSep(item) && !isHeading(item)
}
const styles = StyleSheet.create({
@ -403,7 +426,7 @@ const styles = StyleSheet.create({
paddingTop: 12,
},
icon: {
marginLeft: 6,
marginLeft: 2,
marginRight: 8,
},
label: {
@ -413,4 +436,17 @@ const styles = StyleSheet.create({
borderTopWidth: 1,
marginVertical: 8,
},
heading: {
flexDirection: 'row',
justifyContent: 'center',
paddingVertical: 10,
paddingLeft: 15,
paddingRight: 20,
borderBottomWidth: 1,
marginBottom: 6,
},
headingLabel: {
fontSize: 18,
fontWeight: '500',
},
})