mirror of
https://github.com/stablyai/orca.git
synced 2026-10-19 16:03:26 +00:00
Jinjing
026516f323
* Fix mobile source control drawer overflow and branch-compare state loss - Render BottomDrawer in a native Modal so it covers the full viewport even when mounted inside a ScrollView. - Move the conflict/Abort row onto its own line so it never overflows the branch card, and enlarge the Abort hit target. - Show the committed-on-branch footer even when the changed-files SectionList has no sections, since RN skips ListFooterComponent for empty sections. - Stop branch-compare state from collapsing to idle/error on transient base-ref resolution failures when a ready result should be preserved. * Add mobile source control drawer reload screenshot Attaches an evidence screenshot for the mobile source control drawer overflow / branch-compare state loss fix. * Remove stray temp screenshot file Accidentally committed debug artifact from mobile source control drawer work; not needed in the repo.
247 lines
5.6 KiB
TypeScript
247 lines
5.6 KiB
TypeScript
import { StyleSheet } from 'react-native'
|
|
import { colors, radii, spacing, typography } from '../theme/mobile-theme'
|
|
import { diffStyles } from './mobile-source-control-diff-styles'
|
|
import { listStyles } from './mobile-source-control-list-styles'
|
|
|
|
const baseStyles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.bgBase
|
|
},
|
|
header: {
|
|
backgroundColor: colors.bgPanel,
|
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
borderBottomColor: colors.borderSubtle
|
|
},
|
|
topBar: {
|
|
minHeight: 58,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: spacing.sm
|
|
},
|
|
backButton: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: 18,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginRight: spacing.xs
|
|
},
|
|
backButtonPressed: {
|
|
backgroundColor: colors.bgRaised
|
|
},
|
|
titleBlock: {
|
|
flex: 1,
|
|
minWidth: 0
|
|
},
|
|
title: {
|
|
color: colors.textPrimary,
|
|
fontSize: 16,
|
|
fontWeight: '700'
|
|
},
|
|
meta: {
|
|
color: colors.textSecondary,
|
|
fontSize: typography.metaSize,
|
|
marginTop: 2
|
|
},
|
|
refreshButton: {
|
|
width: 36,
|
|
height: 36,
|
|
borderRadius: radii.button,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
marginLeft: spacing.xs
|
|
},
|
|
refreshButtonPressed: {
|
|
backgroundColor: colors.bgRaised
|
|
},
|
|
refreshButtonDisabled: {
|
|
opacity: 0.45
|
|
},
|
|
summaryCard: {
|
|
margin: spacing.lg,
|
|
marginBottom: spacing.sm,
|
|
padding: spacing.md,
|
|
borderRadius: radii.card,
|
|
backgroundColor: colors.bgPanel,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: colors.borderSubtle
|
|
},
|
|
summaryHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
gap: spacing.md
|
|
},
|
|
branchLine: {
|
|
flex: 1,
|
|
minWidth: 0,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.xs
|
|
},
|
|
branchText: {
|
|
flex: 1,
|
|
color: colors.textPrimary,
|
|
fontSize: typography.bodySize,
|
|
fontWeight: '600'
|
|
},
|
|
syncText: {
|
|
color: colors.textSecondary,
|
|
fontSize: typography.metaSize
|
|
},
|
|
countRow: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: spacing.md,
|
|
marginTop: spacing.sm
|
|
},
|
|
countText: {
|
|
color: colors.textSecondary,
|
|
fontSize: typography.metaSize
|
|
},
|
|
// Separate line under counts — keeps Abort inside the card on narrow phones.
|
|
conflictRow: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
alignItems: 'center',
|
|
gap: spacing.sm,
|
|
marginTop: spacing.sm,
|
|
alignSelf: 'flex-start',
|
|
maxWidth: '100%'
|
|
},
|
|
conflictText: {
|
|
color: colors.statusAmber,
|
|
fontSize: typography.metaSize,
|
|
textTransform: 'capitalize'
|
|
},
|
|
// Match bulk-action hit target so Abort reads as a real control, not a chip.
|
|
abortButton: {
|
|
minHeight: 32,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.xs,
|
|
borderRadius: radii.button,
|
|
borderWidth: 1,
|
|
borderColor: colors.statusAmber,
|
|
backgroundColor: colors.bgRaised,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0
|
|
},
|
|
abortPressed: {
|
|
opacity: 0.75
|
|
},
|
|
abortButtonDisabled: {
|
|
opacity: 0.45
|
|
},
|
|
abortText: {
|
|
color: colors.statusAmber,
|
|
fontSize: typography.bodySize,
|
|
fontWeight: '600',
|
|
textTransform: 'capitalize'
|
|
},
|
|
reconnectBanner: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: spacing.sm,
|
|
marginHorizontal: spacing.lg,
|
|
marginTop: spacing.lg,
|
|
marginBottom: -spacing.sm,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
borderRadius: radii.button,
|
|
backgroundColor: colors.bgRaised,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: colors.statusAmber
|
|
},
|
|
reconnectBannerText: {
|
|
color: colors.textPrimary,
|
|
fontSize: typography.metaSize
|
|
},
|
|
actionError: {
|
|
marginTop: spacing.sm,
|
|
paddingHorizontal: spacing.md,
|
|
paddingVertical: spacing.sm,
|
|
borderRadius: radii.button,
|
|
backgroundColor: colors.bgRaised,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: colors.statusRed
|
|
},
|
|
actionErrorText: {
|
|
color: colors.textPrimary,
|
|
fontSize: typography.metaSize,
|
|
lineHeight: 16
|
|
},
|
|
bulkRow: {
|
|
flexDirection: 'row',
|
|
gap: spacing.sm,
|
|
marginTop: spacing.md
|
|
},
|
|
bulkButton: {
|
|
flex: 1,
|
|
minHeight: 36,
|
|
borderRadius: radii.button,
|
|
backgroundColor: colors.bgRaised,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'row',
|
|
gap: spacing.xs
|
|
},
|
|
bulkMenuButton: {
|
|
width: 42,
|
|
minHeight: 36,
|
|
borderRadius: radii.button,
|
|
backgroundColor: colors.bgRaised,
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
},
|
|
bulkButtonDisabled: {
|
|
opacity: 0.45
|
|
},
|
|
bulkButtonPressed: {
|
|
opacity: 0.75
|
|
},
|
|
bulkButtonText: {
|
|
color: colors.textPrimary,
|
|
fontSize: typography.bodySize,
|
|
fontWeight: '600'
|
|
},
|
|
createPrBlock: {
|
|
marginTop: spacing.md,
|
|
gap: spacing.xs
|
|
},
|
|
createPrButton: {
|
|
minHeight: 42,
|
|
borderRadius: radii.button,
|
|
backgroundColor: colors.textPrimary,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexDirection: 'row',
|
|
gap: spacing.xs,
|
|
paddingHorizontal: spacing.md
|
|
},
|
|
createPrButtonDisabled: {
|
|
backgroundColor: colors.bgRaised,
|
|
borderWidth: StyleSheet.hairlineWidth,
|
|
borderColor: colors.borderSubtle
|
|
},
|
|
createPrButtonPressed: {
|
|
opacity: 0.78
|
|
},
|
|
createPrButtonText: {
|
|
color: colors.bgBase,
|
|
fontSize: typography.bodySize,
|
|
fontWeight: '700'
|
|
},
|
|
createPrButtonTextDisabled: {
|
|
color: colors.textSecondary
|
|
},
|
|
createPrHint: {
|
|
color: colors.textMuted,
|
|
fontSize: typography.metaSize,
|
|
lineHeight: 16
|
|
}
|
|
})
|
|
|
|
export const styles = { ...baseStyles, ...listStyles, ...diffStyles }
|