mirror of
https://github.com/bulwarkmail/native.git
synced 2026-11-04 16:06:41 +00:00
fix: keep every thread toolbar button on screen, icon-only in landscape
This commit is contained in:
@@ -36,6 +36,7 @@ import { shareEmailEml } from '../lib/email-export';
|
|||||||
import { useKeywordsStore, keywordToken, type KeywordDef } from '../stores/keywords-store';
|
import { useKeywordsStore, keywordToken, type KeywordDef } from '../stores/keywords-store';
|
||||||
import { useSheetDrag } from '../lib/use-sheet-drag';
|
import { useSheetDrag } from '../lib/use-sheet-drag';
|
||||||
import { useKeyboardObstruction } from '../lib/use-keyboard-obstruction';
|
import { useKeyboardObstruction } from '../lib/use-keyboard-obstruction';
|
||||||
|
import { useLayout } from '../lib/use-layout';
|
||||||
import { useLocaleStore } from '../stores/locale-store';
|
import { useLocaleStore } from '../stores/locale-store';
|
||||||
import {
|
import {
|
||||||
findArchiveMailbox, findTrashMailbox, mailboxAccountId, mailboxesOfAccount, mailboxOfEmail,
|
findArchiveMailbox, findTrashMailbox, mailboxAccountId, mailboxesOfAccount, mailboxOfEmail,
|
||||||
@@ -1562,7 +1563,10 @@ function ToolbarButton({
|
|||||||
}: { icon: React.ReactNode; label: string; onPress?: () => void }) {
|
}: { icon: React.ReactNode; label: string; onPress?: () => void }) {
|
||||||
const c = useColors();
|
const c = useColors();
|
||||||
const styles = React.useMemo(() => makeStyles(c), [c]);
|
const styles = React.useMemo(() => makeStyles(c), [c]);
|
||||||
const showLabels = useSettingsStore((s) => s.showToolbarLabels);
|
// Icons only in a short (landscape) window, which leaves room for the message.
|
||||||
|
const labelsSetting = useSettingsStore((s) => s.showToolbarLabels);
|
||||||
|
const { shortHeight } = useLayout();
|
||||||
|
const showLabels = labelsSetting && !shortHeight;
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
onPress={onPress}
|
onPress={onPress}
|
||||||
@@ -1571,7 +1575,7 @@ function ToolbarButton({
|
|||||||
accessibilityLabel={label}
|
accessibilityLabel={label}
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
{showLabels && <Text style={styles.toolbarActionLabel}>{label}</Text>}
|
{showLabels && <Text style={styles.toolbarActionLabel} numberOfLines={1}>{label}</Text>}
|
||||||
</Pressable>
|
</Pressable>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1581,7 +1585,10 @@ function BottomBarButton({
|
|||||||
}: { icon: React.ReactNode; label: string; onPress?: () => void; disabled?: boolean }) {
|
}: { icon: React.ReactNode; label: string; onPress?: () => void; disabled?: boolean }) {
|
||||||
const c = useColors();
|
const c = useColors();
|
||||||
const styles = React.useMemo(() => makeStyles(c), [c]);
|
const styles = React.useMemo(() => makeStyles(c), [c]);
|
||||||
const showLabels = useSettingsStore((s) => s.showToolbarLabels);
|
// Icons only in a short (landscape) window, which leaves room for the message.
|
||||||
|
const labelsSetting = useSettingsStore((s) => s.showToolbarLabels);
|
||||||
|
const { shortHeight } = useLayout();
|
||||||
|
const showLabels = labelsSetting && !shortHeight;
|
||||||
return (
|
return (
|
||||||
<Pressable
|
<Pressable
|
||||||
onPress={disabled ? undefined : onPress}
|
onPress={disabled ? undefined : onPress}
|
||||||
@@ -1623,11 +1630,16 @@ function makeStyles(c: ThemePalette) {
|
|||||||
borderRadius: radius.full,
|
borderRadius: radius.full,
|
||||||
},
|
},
|
||||||
toolbarEmbedded: { justifyContent: 'flex-end' },
|
toolbarEmbedded: { justifyContent: 'flex-end' },
|
||||||
|
// The actions shrink (labels truncate) rather than push "More" off a
|
||||||
|
// narrow screen, as long German labels at a large font did.
|
||||||
toolbarActions: {
|
toolbarActions: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
|
flexShrink: 1,
|
||||||
},
|
},
|
||||||
toolbarAction: {
|
toolbarAction: {
|
||||||
|
flexShrink: 1,
|
||||||
|
minWidth: 48,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
gap: 2,
|
gap: 2,
|
||||||
|
|||||||
Reference in New Issue
Block a user