mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-14 13:50:52 -05:00
1d4737ac69
* Add Story for `PdfCompileButton` * Set the CompileButton height so it's similar to BS3 * Add the CompileButton animations * Remove `sm` from CompileButton: makes font size bigger * Use MaterialIcon in compile-button dropdown-toggle * Use MaterialIcon in LayoutDropdown * Fix stripe alignment on Recompile button * Set padding around dropdown caret Per Alexandru's instructions * Prevent border from disappearing on hover * Set the padding of the compile button even on both sides Before: left 12px, right 16px; After: left 16px, right 16px; * Change px values to spacing var * Add some button classes for BS5 only * Don't render the hidden "Compiling…" in BS5, it changes the button width * Prevent `loading="[object Object]"` in the DOM Co-authored-by: Rebeka <rebeka.dekany@overleaf.com> --------- Co-authored-by: Rebeka <rebeka.dekany@overleaf.com> GitOrigin-RevId: 34f1eed03e63f3459243a37c878612a623f321f8
56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { FC } from 'react'
|
|
import type { Meta } from '@storybook/react'
|
|
import PdfCompileButton from '@/features/pdf-preview/components/pdf-compile-button'
|
|
import { ScopeDecorator } from '../decorators/scope'
|
|
import { CompileContext } from '@/shared/context/local-compile-context'
|
|
import { DetachCompileContext } from '@/shared/context/detach-compile-context'
|
|
import { bsVersionDecorator } from '../../../.storybook/utils/with-bootstrap-switcher'
|
|
|
|
export const CompileButton: FC<CompileContext> = (props: CompileContext) => (
|
|
<DetachCompileContext.Provider value={props}>
|
|
<div className="pdf m-5">
|
|
<div className="toolbar toolbar-pdf toolbar-pdf-hybrid btn-toolbar">
|
|
<div className="toolbar-pdf-left">
|
|
<PdfCompileButton />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</DetachCompileContext.Provider>
|
|
)
|
|
|
|
const args: Partial<CompileContext> = {
|
|
autoCompile: false,
|
|
compiling: false,
|
|
draft: false,
|
|
hasChanges: false,
|
|
stopOnFirstError: false,
|
|
stopOnValidationError: false,
|
|
animateCompileDropdownArrow: false,
|
|
}
|
|
|
|
const meta: Meta<typeof CompileButton> = {
|
|
title: 'Editor / Toolbar / Compile Button',
|
|
component: CompileButton,
|
|
// @ts-ignore
|
|
decorators: [ScopeDecorator],
|
|
argTypes: {
|
|
...bsVersionDecorator.argTypes,
|
|
startCompile: { action: 'startCompile' },
|
|
setAutoCompile: { action: 'setAutoCompile' },
|
|
setCompiling: { action: 'setCompiling' },
|
|
setDraft: { action: 'setDraft' },
|
|
setStopOnFirstError: { action: 'setStopOnFirstError' },
|
|
setError: { action: 'setError' },
|
|
setHasLintingError: { action: 'setHasLintingError' },
|
|
setPosition: { action: 'setPosition' },
|
|
setStopOnValidationError: { action: 'setStopOnValidationError' },
|
|
recompileFromScratch: { action: 'recompileFromScratch' },
|
|
stopCompile: { action: 'stopCompile' },
|
|
setAnimateCompileDropdownArrow: {
|
|
action: 'setAnimateCompileDropdownArrow',
|
|
},
|
|
},
|
|
args,
|
|
}
|
|
|
|
export default meta
|