MediaMetz/gemini-cli
1
0
Fork 0
mirror of https://github.com/google-gemini/gemini-cli.git synced 2026-05-14 13:53:02 -07:00
Code Issues Packages Projects Releases Wiki Activity

refactor(UI): created constants file for ThemeDialog (#26446)

Browse Source
This commit is contained in:
Dev Randalpura
2026-05-04 12:28:33 -05:00
committed by GitHub
parent 88bdadc9c6
commit 0657d315fb
2 changed files with 48 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/cli/src/ui/components/ThemeDialog.constants.ts
+33
View File
@@ -0,0 +1,33 @@
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
/** The fraction of the dialog width allocated to the selection (left) pane. */
export const SELECTION_PANE_WIDTH_PERCENTAGE = 0.45;
/** The fraction of the dialog width allocated to the preview (right) pane. */
export const PREVIEW_PANE_WIDTH_PERCENTAGE = 0.55;
/**
* A safety margin to prevent text from touching the preview pane border.
* Note: This is specific to the ThemeDialog layout and is unrelated to
* SHELL_WIDTH_FRACTION in AppContainer.
*/
export const PREVIEW_PANE_WIDTH_SAFETY_MARGIN = 0.9;
/**
* Combined horizontal padding from the dialog and preview pane used
* to calculate available width for the code preview.
*/
export const TOTAL_HORIZONTAL_PADDING = 4;
/** Padding for the dialog container. */
export const DIALOG_PADDING = 2;
/** Fixed vertical space taken by preview pane elements (title, borders, margins). */
export const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
/** Height of the tab/scope selection hint at the bottom. */
export const TAB_TO_SELECT_HEIGHT = 2;
packages/cli/src/ui/components/ThemeDialog.tsx
+15 -16
View File
@@ -77,6 +77,16 @@ function generateThemeItem(
};
}
import {
DIALOG_PADDING,
PREVIEW_PANE_FIXED_VERTICAL_SPACE,
PREVIEW_PANE_WIDTH_PERCENTAGE,
PREVIEW_PANE_WIDTH_SAFETY_MARGIN,
SELECTION_PANE_WIDTH_PERCENTAGE,
TAB_TO_SELECT_HEIGHT,
TOTAL_HORIZONTAL_PADDING,
} from './ThemeDialog.constants.js';
export function ThemeDialog({
onSelect,
onCancel,
@@ -190,14 +200,6 @@ export function ThemeDialog({
settings,
);
// Constants for calculating preview pane layout.
// These values are based on the JSX structure below.
const PREVIEW_PANE_WIDTH_PERCENTAGE = 0.55;
// A safety margin to prevent text from touching the border.
// This is a complete hack unrelated to the 0.9 used in App.tsx
const PREVIEW_PANE_WIDTH_SAFETY_MARGIN = 0.9;
// Combined horizontal padding from the dialog and preview pane.
const TOTAL_HORIZONTAL_PADDING = 4;
const colorizeCodeWidth = Math.max(
Math.floor(
(terminalWidth - TOTAL_HORIZONTAL_PADDING) *
@@ -207,9 +209,7 @@ export function ThemeDialog({
1,
);
const DIALOG_PADDING = 2;
const selectThemeHeight = themeItems.length + 1;
const TAB_TO_SELECT_HEIGHT = 2;
availableTerminalHeight = availableTerminalHeight ?? Number.MAX_SAFE_INTEGER;
availableTerminalHeight -= 2; // Top and bottom borders.
availableTerminalHeight -= TAB_TO_SELECT_HEIGHT;
@@ -224,10 +224,6 @@ export function ThemeDialog({
totalLeftHandSideHeight -= DIALOG_PADDING;
}
// Vertical space taken by elements other than the two code blocks in the preview pane.
// Includes "Preview" title, borders, and margin between blocks.
const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 8;
// The right column doesn't need to ever be shorter than the left column.
availableTerminalHeight = Math.max(
availableTerminalHeight,
@@ -252,6 +248,9 @@ export function ThemeDialog({
themeManager.getTheme(highlightedThemeName || DEFAULT_THEME.name) ||
DEFAULT_THEME;
const leftColumnWidth = `${SELECTION_PANE_WIDTH_PERCENTAGE * 100}%`;
const rightColumnWidth = `${PREVIEW_PANE_WIDTH_PERCENTAGE * 100}%`;
return (
<Box
borderStyle="round"
@@ -266,7 +265,7 @@ export function ThemeDialog({
{mode === 'theme' ? (
<Box flexDirection="row">
{/* Left Column: Selection */}
<Box flexDirection="column" width="45%" paddingRight={2}>
<Box flexDirection="column" width={leftColumnWidth} paddingRight={2}>
<Text bold={mode === 'theme'} wrap="truncate">
{mode === 'theme' ? '> ' : ' '}Select Theme{' '}
<Text color={theme.text.secondary}>
@@ -340,7 +339,7 @@ export function ThemeDialog({
</Box>
{/* Right Column: Preview */}
<Box flexDirection="column" width="55%" paddingLeft={2}>
<Box flexDirection="column" width={rightColumnWidth} paddingLeft={2}>
<Text bold color={theme.text.primary}>
Preview
</Text>