mirror of
https://github.com/voideditor/void
synced 2026-05-24 09:58:23 +00:00
center button; fix single line button
This commit is contained in:
parent
5dab1a6a77
commit
4a4677b5e2
5 changed files with 16 additions and 7 deletions
|
|
@ -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 () => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -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} />}
|
||||
/>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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={() => {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue