Align sidebar header rows and tighten button spacing
This commit is contained in:
@@ -1131,9 +1131,11 @@ const staticStyles = RNStyleSheet.create({
|
|||||||
const styles = StyleSheet.create((theme) => ({
|
const styles = StyleSheet.create((theme) => ({
|
||||||
sidebarHeaderGroup: {
|
sidebarHeaderGroup: {
|
||||||
paddingTop: theme.spacing[2],
|
paddingTop: theme.spacing[2],
|
||||||
// Match WorkspacesSectionHeader's paddingTop below the divider so the divider
|
gap: 2,
|
||||||
// sits visually centered between the Sessions row and the Workspaces header.
|
// Distance from History's bottom edge to the divider. WorkspacesSectionHeader
|
||||||
paddingBottom: theme.spacing[2],
|
// uses a slightly smaller paddingTop to balance the action buttons' centering
|
||||||
|
// offset so the divider reads as visually centered between the two.
|
||||||
|
paddingBottom: theme.spacing[1.5],
|
||||||
borderBottomWidth: 1,
|
borderBottomWidth: 1,
|
||||||
borderBottomColor: theme.colors.border,
|
borderBottomColor: theme.colors.border,
|
||||||
},
|
},
|
||||||
@@ -1142,9 +1144,16 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
gap: theme.spacing[2],
|
gap: theme.spacing[2],
|
||||||
paddingLeft: theme.spacing[2] + theme.spacing[3],
|
// Align the title with the compact rows' icons and the project icons below
|
||||||
paddingRight: theme.spacing[4],
|
// (listContent + projectRow inner padding both spacing[2]).
|
||||||
paddingTop: theme.spacing[2],
|
paddingLeft: theme.spacing[2] + theme.spacing[2],
|
||||||
|
// Align the trailing action pill's right edge with the New workspace and
|
||||||
|
// project row pills (both 8px from the sidebar edge).
|
||||||
|
paddingRight: theme.spacing[2],
|
||||||
|
// Less than sidebarHeaderGroup's paddingBottom: the 28px-tall action buttons
|
||||||
|
// center the title and add their own offset above it, so equal padding reads
|
||||||
|
// as a larger gap than History's. Trim paddingTop to balance it visually.
|
||||||
|
paddingTop: theme.spacing[1],
|
||||||
paddingBottom: theme.spacing[1],
|
paddingBottom: theme.spacing[1],
|
||||||
},
|
},
|
||||||
workspacesSectionTitle: {
|
workspacesSectionTitle: {
|
||||||
|
|||||||
@@ -45,7 +45,6 @@ import {
|
|||||||
ChevronRight,
|
ChevronRight,
|
||||||
Copy,
|
Copy,
|
||||||
ExternalLink,
|
ExternalLink,
|
||||||
FolderPlus,
|
|
||||||
GitPullRequest,
|
GitPullRequest,
|
||||||
Settings,
|
Settings,
|
||||||
MoreVertical,
|
MoreVertical,
|
||||||
@@ -139,7 +138,7 @@ const ThemedActivityIndicator = withUnistyles(ActivityIndicator);
|
|||||||
const ThemedCircleAlert = withUnistyles(CircleAlert);
|
const ThemedCircleAlert = withUnistyles(CircleAlert);
|
||||||
const ThemedCircleCheck = withUnistyles(CircleCheck);
|
const ThemedCircleCheck = withUnistyles(CircleCheck);
|
||||||
const ThemedSyncedLoader = withUnistyles(SyncedLoader);
|
const ThemedSyncedLoader = withUnistyles(SyncedLoader);
|
||||||
const ThemedFolderPlus = withUnistyles(FolderPlus);
|
const ThemedPlus = withUnistyles(Plus);
|
||||||
const ThemedMoreVertical = withUnistyles(MoreVertical);
|
const ThemedMoreVertical = withUnistyles(MoreVertical);
|
||||||
const ThemedTrash2 = withUnistyles(Trash2);
|
const ThemedTrash2 = withUnistyles(Trash2);
|
||||||
const ThemedSettings = withUnistyles(Settings);
|
const ThemedSettings = withUnistyles(Settings);
|
||||||
@@ -948,7 +947,7 @@ function NewWorktreeButton({
|
|||||||
loading ? (
|
loading ? (
|
||||||
<ThemedActivityIndicator size={14} uniProps={foregroundMutedColorMapping} />
|
<ThemedActivityIndicator size={14} uniProps={foregroundMutedColorMapping} />
|
||||||
) : (
|
) : (
|
||||||
<ThemedFolderPlus
|
<ThemedPlus
|
||||||
size={15}
|
size={15}
|
||||||
uniProps={
|
uniProps={
|
||||||
hovered || pressed ? foregroundColorMapping : foregroundMutedColorMapping
|
hovered || pressed ? foregroundColorMapping : foregroundMutedColorMapping
|
||||||
|
|||||||
@@ -52,9 +52,10 @@ export function SidebarHeaderRow({
|
|||||||
const buttonStyle = useCallback(
|
const buttonStyle = useCallback(
|
||||||
({ hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
|
({ hovered }: PressableStateCallbackType & { hovered?: boolean }) => [
|
||||||
styles.button,
|
styles.button,
|
||||||
|
variant === "compact" && styles.buttonCompact,
|
||||||
(Boolean(hovered) || isActive) && styles.buttonHovered,
|
(Boolean(hovered) || isActive) && styles.buttonHovered,
|
||||||
],
|
],
|
||||||
[isActive],
|
[isActive, variant],
|
||||||
);
|
);
|
||||||
|
|
||||||
const renderChildren = useCallback(
|
const renderChildren = useCallback(
|
||||||
@@ -135,6 +136,15 @@ const styles = StyleSheet.create((theme) => ({
|
|||||||
paddingHorizontal: theme.spacing[3],
|
paddingHorizontal: theme.spacing[3],
|
||||||
borderRadius: theme.borderRadius.lg,
|
borderRadius: theme.borderRadius.lg,
|
||||||
},
|
},
|
||||||
|
// Compact header entries (New workspace / History) sit tighter than the
|
||||||
|
// workspace-row shape the base button mirrors.
|
||||||
|
buttonCompact: {
|
||||||
|
minHeight: 32,
|
||||||
|
paddingVertical: theme.spacing[1.5],
|
||||||
|
// Match the project rows' inner padding so the icons align on one vertical
|
||||||
|
// edge with the workspace list below (base button uses a wider spacing[3]).
|
||||||
|
paddingHorizontal: theme.spacing[2],
|
||||||
|
},
|
||||||
buttonHovered: {
|
buttonHovered: {
|
||||||
backgroundColor: theme.colors.surfaceSidebarHover,
|
backgroundColor: theme.colors.surfaceSidebarHover,
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user