pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 04:11:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: Use Dropdown instead of select in settings for more ui consistency

Browse Source
This commit is contained in:
Prathmesh Vhatkar
2025-01-28 20:15:52 +05:30
parent f70e3fc08b
commit db0339b228
2 changed files with 30 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
webview-ui/src/components/settings/ApiConfigManager.tsx
View File

@@ -1,6 +1,8 @@
import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react" import { VSCodeButton, VSCodeTextField } from "@vscode/webview-ui-toolkit/react"
import { memo, useEffect, useRef, useState } from "react" import { memo, useEffect, useRef, useState } from "react"
import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage" import { ApiConfigMeta } from "../../../../src/shared/ExtensionMessage"
import { Dropdown } from "vscrui"
import type { DropdownOption } from "vscrui"
interface ApiConfigManagerProps { interface ApiConfigManagerProps {
currentApiConfigName?: string currentApiConfigName?: string
@@ -133,28 +135,20 @@ const ApiConfigManager = ({
) : ( ) : (
<> <>
<div style={{ display: "flex", gap: "4px", alignItems: "center" }}> <div style={{ display: "flex", gap: "4px", alignItems: "center" }}>
<select <Dropdown
id="config-profile" id="config-profile"
value={currentApiConfigName} value={currentApiConfigName}
onChange={(e) => onSelectConfig(e.target.value)} onChange={(value: unknown) => {
onSelectConfig((value as DropdownOption).value)
}}
style={{ style={{
flexGrow: 1, minWidth: 130,
padding: "4px 8px", }}
paddingRight: "24px", options={listApiConfigMeta.map((config) => ({
backgroundColor: "var(--vscode-dropdown-background)", value: config.name,
color: "var(--vscode-dropdown-foreground)", label: config.name,
border: "1px solid var(--vscode-dropdown-border)", }))}
borderRadius: "2px", />
height: "28px",
cursor: "pointer",
outline: "none",
}}>
{listApiConfigMeta?.map((config) => (
<option key={config.name} value={config.name}>
{config.name}
</option>
))}
</select>
<VSCodeButton <VSCodeButton
appearance="icon" appearance="icon"
onClick={handleAdd} onClick={handleAdd}

34
webview-ui/src/components/settings/SettingsView.tsx
View File

@@ -5,6 +5,8 @@ import { validateApiConfiguration, validateModelId } from "../../utils/validate"
import { vscode } from "../../utils/vscode" import { vscode } from "../../utils/vscode"
import ApiOptions from "./ApiOptions" import ApiOptions from "./ApiOptions"
import ApiConfigManager from "./ApiConfigManager" import ApiConfigManager from "./ApiConfigManager"
import { Dropdown } from "vscrui"
import type { DropdownOption } from "vscrui"
type SettingsViewProps = { type SettingsViewProps = {
onDone: () => void onDone: () => void
@@ -444,23 +446,21 @@ const SettingsView = ({ onDone }: SettingsViewProps) => {
<h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Browser Settings</h3> <h3 style={{ color: "var(--vscode-foreground)", margin: "0 0 15px 0" }}>Browser Settings</h3>
<div style={{ marginBottom: 15 }}> <div style={{ marginBottom: 15 }}>
<label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Viewport size</label> <label style={{ fontWeight: "500", display: "block", marginBottom: 5 }}>Viewport size</label>
<select <div className="dropdown-container">
value={browserViewportSize} <Dropdown
onChange={(e) => setBrowserViewportSize(e.target.value)} value={browserViewportSize}
style={{ onChange={(value: unknown) => {
width: "100%", setBrowserViewportSize((value as DropdownOption).value)
padding: "4px 8px", }}
backgroundColor: "var(--vscode-input-background)", style={{ width: "100%" }}
color: "var(--vscode-input-foreground)", options={[
border: "1px solid var(--vscode-input-border)", { value: "1280x800", label: "Large Desktop (1280x800)" },
borderRadius: "2px", { value: "900x600", label: "Small Desktop (900x600)" },
height: "28px", { value: "768x1024", label: "Tablet (768x1024)" },
}}> { value: "360x640", label: "Mobile (360x640)" },
<option value="1280x800">Large Desktop (1280x800)</option> ]}
<option value="900x600">Small Desktop (900x600)</option> />
<option value="768x1024">Tablet (768x1024)</option> </div>
<option value="360x640">Mobile (360x640)</option>
</select>
<p <p
style={{ style={{
fontSize: "12px", fontSize: "12px",