center button; fix single line button

This commit is contained in:
Mathew Pareles 2025-01-01 22:35:47 -08:00
parent 5dab1a6a77
commit 4a4677b5e2
5 changed files with 16 additions and 7 deletions

View file

@ -170,6 +170,9 @@ export class EditorGroupWatermark extends Disposable {
this.clear();
const box = append(this.shortcuts, $('.watermark-box'));
const boxBelow = append(this.shortcuts, $(''))
boxBelow.style.display = 'flex'
boxBelow.style.flex = 'row'
boxBelow.style.justifyContent = 'center'
const update = async () => {

View file

@ -82,12 +82,15 @@ export function getLanguageFromFileName(fileName: string): string {
export const BlockCode = ({ text, buttonsOnHover, language }: { text: string, buttonsOnHover?: ReactNode, language?: string }) => {
const isSingleLine = !text.includes('\n')
return (<>
<div className={`relative group w-full bg-vscode-editor-bg overflow-hidden isolate`}>
{buttonsOnHover === null ? null : (
<div className="z-[1] absolute top-0 right-0 opacity-0 group-hover:opacity-100 duration-200">
<div className={`flex space-x-2 p-2 ${text.includes('\n') ? 'p-2' : ''}`}>{buttonsOnHover}</div>
<div className={`flex space-x-2 ${isSingleLine ?'': 'p-2' }`}>{buttonsOnHover}</div>
</div>
)}

View file

@ -17,7 +17,7 @@ enum CopyButtonState {
const COPY_FEEDBACK_TIMEOUT = 1000 // amount of time to say 'Copied!'
const CodeButtonsOnHover = ({ diffRepr: text }: { diffRepr: string }) => {
const CodeButtonsOnHover = ({ text }: { text: string }) => {
const accessor = useAccessor()
const [copyButtonState, setCopyButtonState] = useState(CopyButtonState.Copy)
@ -45,16 +45,19 @@ const CodeButtonsOnHover = ({ diffRepr: text }: { diffRepr: string }) => {
})
}, [inlineDiffService])
const isSingleLine = !text.includes('\n')
return <>
<button
className="p-1 hover:brightness-110 bg-vscode-editor-bg border border-vscode-input-border rounded text-xs text-vscode-input-fg"
className={`${isSingleLine ? '' : 'p-1'} text-xs hover:brightness-110 bg-vscode-editor-bg border border-vscode-input-border rounded text-xs text-vscode-input-fg`}
onClick={onCopy}
>
{copyButtonState}
</button>
<button
// btn btn-secondary btn-sm border text-xs text-vscode-input-fg border-vscode-input-border rounded
className="p-1 hover:brightness-110 bg-vscode-editor-bg border border-vscode-input-border rounded text-xs text-vscode-input-fg"
className={`${isSingleLine ? '' : 'p-1'} text-xs hover:brightness-110 bg-vscode-editor-bg border border-vscode-input-border rounded text-xs text-vscode-input-fg`}
onClick={onApply}
>
Apply
@ -76,7 +79,7 @@ const RenderToken = ({ token, nested = false }: { token: Token | string, nested?
return <BlockCode
text={t.text}
// language={t.lang} // instead use vscode to detect language
buttonsOnHover={<CodeButtonsOnHover diffRepr={t.text} />}
buttonsOnHover={<CodeButtonsOnHover text={t.text} />}
/>
}

View file

@ -22,7 +22,7 @@ export const Sidebar = ({ className }: { className: string }) => {
const { isHistoryOpen, currentTab: tab } = sidebarState
const isDark = useIsDark()
return <div className={`@@void-scope ${isDark ? 'dark' : ''}`} style={{ width: '100%', height: '100%' }}>
return <div className={`@@void-scope ${isDark ? 'dark' : ''}`} style={{ width: '100%', height: '100%' }}>
<div className={`flex flex-col px-2 py-2 w-full h-full bg-vscode-sidebar-bg`}>
{/* <span onClick={() => {

View file

@ -383,7 +383,7 @@ const ChatBubble = ({ chatMessage, isLoading }: {
}
return <div className={`${role === 'user' ? 'text-right' : 'text-left'}`}>
<div className={`text-left inline-block p-2 rounded-lg space-y-2 ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full overflow-auto`}>
<div className={`text-left p-2 rounded-lg space-y-2 ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} max-w-full overflow-auto`}>
{chatbubbleContents}
{isLoading && <IconLoading className='opacity-50 text-sm' />}
</div>