{symbolPaletteAvailable && (
@@ -107,24 +118,25 @@ export const ToolbarItems: FC<{
@@ -134,24 +146,40 @@ export const ToolbarItems: FC<{
@@ -159,7 +187,12 @@ export const ToolbarItems: FC<{
id="toolbar-format-indent-increase"
label={t('toolbar_increase_indent')}
command={commands.indentIncrease}
- icon="indent"
+ icon={
+ bsVersion({
+ bs5: 'format_indent_increase',
+ bs3: 'indent',
+ }) as string
+ }
shortcut={visual ? (isMac ? '⌘]' : 'Ctrl+]') : undefined}
disabled={listDepth < 1}
/>
diff --git a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
index 24aa0cb5b0..b62964e474 100644
--- a/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
+++ b/services/web/frontend/js/features/source-editor/extensions/toolbar/toolbar-panel.ts
@@ -43,10 +43,13 @@ const toolbarTheme = EditorView.theme({
borderColor: 'rgba(125, 125, 125, 0.2)',
backgroundColor: 'var(--editor-toolbar-bg)',
color: 'var(--toolbar-btn-color)',
- '& .popover-content': {
+ '& .popover-content, & .popover-body': {
padding: 0,
},
- '& .arrow': {
+ '& .popover-body': {
+ color: 'inherit',
+ },
+ '& .arrow, & .popover-arrow': {
borderBottomColor: 'rgba(125, 125, 125, 0.2)',
'&:after': {
borderBottomColor: 'var(--editor-toolbar-bg)',
@@ -54,10 +57,12 @@ const toolbarTheme = EditorView.theme({
},
},
'.ol-cm-toolbar-button-menu-popover': {
- '& > .popover-content': {
+ backgroundColor: 'initial',
+ '& > .popover-content, & > .popover-body': {
padding: 0,
+ color: 'initial',
},
- '& .arrow': {
+ '& .arrow, & .popover-arrow': {
display: 'none',
},
'& .list-group': {
@@ -116,6 +121,7 @@ const toolbarTheme = EditorView.theme({
width: '24px',
height: '24px',
overflow: 'hidden',
+ color: 'inherit',
'&:hover, &:focus, &:active, &.active': {
backgroundColor: 'rgba(125, 125, 125, 0.1)',
color: 'inherit',
@@ -204,11 +210,12 @@ const toolbarTheme = EditorView.theme({
'&.top': {
marginBottom: '1px',
},
- '& .arrow': {
+ '& .arrow, & .popover-arrow': {
display: 'none',
},
- '& .popover-content': {
+ '& .popover-content, & > .popover-body': {
padding: '0',
+ color: 'inherit',
},
'& .ol-cm-toolbar-menu': {
width: '120px',
@@ -225,6 +232,7 @@ const toolbarTheme = EditorView.theme({
display: 'flex',
alignItems: 'center',
fontWeight: 'bold',
+ color: 'inherit',
'&.ol-cm-toolbar-menu-item-active': {
backgroundColor: 'rgba(125, 125, 125, 0.1)',
},
diff --git a/services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts b/services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts
index f5219e1416..8fbe81936c 100644
--- a/services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts
+++ b/services/web/frontend/js/features/source-editor/languages/latex/codemirror-dev-tools.ts
@@ -27,7 +27,7 @@ const devToolsButton = ViewPlugin.define(view => {
const addButton = () => {
const button = document.createElement('button')
- button.classList.add('btn', 'formatting-btn', 'formatting-btn--icon')
+ button.classList.add('btn', 'formatting-btn', 'formatting-btn-icon')
button.id = 'cm6-dev-tools-button'
button.textContent = '🦧'
button.style.border = 'none'
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-3/toggle-button-group.tsx b/services/web/frontend/js/features/ui/components/bootstrap-3/toggle-button-group.tsx
new file mode 100644
index 0000000000..2224e6160b
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/bootstrap-3/toggle-button-group.tsx
@@ -0,0 +1,99 @@
+import {
+ Children,
+ cloneElement,
+ isValidElement,
+ useState,
+ useEffect,
+} from 'react'
+import {
+ ToggleButtonGroup as BS3ToggleButtonGroup,
+ ToggleButtonGroupProps as BS3ToggleButtonGroupProps,
+ ToggleButtonProps as BS3ToggleButtonProps,
+} from 'react-bootstrap'
+
+function ToggleButtonGroup
({
+ children,
+ value,
+ defaultValue,
+ onChange,
+ ...props
+}: BS3ToggleButtonGroupProps) {
+ const [selectedValue, setSelectedValue] = useState(
+ defaultValue || (props.type === 'checkbox' ? [] : null)
+ )
+ const isControlled = value !== undefined
+
+ useEffect(() => {
+ if (isControlled) {
+ if (props.type === 'radio') {
+ setSelectedValue(value)
+ } else {
+ if (Array.isArray(value)) {
+ setSelectedValue(Array.from(value))
+ } else {
+ setSelectedValue([value])
+ }
+ }
+ }
+ }, [isControlled, value, props.type])
+
+ const handleButtonClick = (buttonValue: T) => {
+ if (props.type === 'radio') {
+ if (!isControlled) {
+ setSelectedValue(buttonValue)
+ }
+
+ onChange?.(buttonValue as any)
+ } else if (props.type === 'checkbox') {
+ const newValue = Array.isArray(selectedValue)
+ ? selectedValue.includes(buttonValue)
+ ? selectedValue.filter(val => val !== buttonValue) // Deselect
+ : [...selectedValue, buttonValue] // Select
+ : [buttonValue] // Initial selection if value is not array yet
+
+ if (!isControlled) {
+ setSelectedValue(newValue)
+ }
+
+ onChange?.(newValue)
+ }
+ }
+
+ // Clone children and add custom onClick handlers
+ const modifiedChildren = Children.map(children, child => {
+ if (isValidElement(child)) {
+ const childElement = child as React.ReactElement<
+ BS3ToggleButtonProps & { active?: boolean }
+ >
+
+ const isActive =
+ props.type === 'radio'
+ ? selectedValue === childElement.props.value
+ : Array.isArray(selectedValue) &&
+ selectedValue.includes(childElement.props.value as T)
+
+ return cloneElement(childElement, {
+ onClick: () => {
+ handleButtonClick(childElement.props.value as T)
+ },
+ active: isActive,
+ })
+ }
+
+ return child
+ })
+
+ return (
+ {}}
+ >
+ {modifiedChildren}
+
+ )
+}
+
+export default ToggleButtonGroup
diff --git a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx
index 584dae9485..0ba364a19e 100644
--- a/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx
+++ b/services/web/frontend/js/features/ui/components/bootstrap-5/dropdown-menu.tsx
@@ -17,6 +17,7 @@ import type {
} from '@/features/ui/components/types/dropdown-menu-props'
import MaterialIcon from '@/shared/components/material-icon'
import { fixedForwardRef } from '@/utils/react'
+import classnames from 'classnames'
export function Dropdown({ ...props }: DropdownProps) {
return
@@ -26,6 +27,7 @@ function DropdownItem(
{
active,
children,
+ className,
description,
leadingIcon,
trailingIcon,
@@ -74,7 +76,9 @@ function DropdownItem(
return (
size === 'small' ? 'sm' : size === 'large' ? 'lg' : undefined
-export default function OLButton(props: OLButtonProps) {
- const { bs3Props, ...rest } = props
+export default function OLButton({ bs3Props = {}, ...rest }: OLButtonProps) {
+ const { className: _, ...restBs3Props } = bs3Props
// Get all `aria-*` and `data-*` attributes
const extraProps = getAriaAndDataProps(rest)
@@ -52,7 +53,15 @@ export default function OLButton(props: OLButtonProps) {
return (
+
{bs3Props?.loading || rest.children}
}
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx b/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
index 971e043782..e89ea75b34 100644
--- a/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
+++ b/services/web/frontend/js/features/ui/components/ol/ol-form-checkbox.tsx
@@ -20,6 +20,8 @@ function OLFormCheckbox(props: OLFormCheckboxProps) {
inline: rest.inline,
title: rest.title,
autoComplete: rest.autoComplete,
+ defaultChecked: rest.defaultChecked,
+ className: rest.className,
onChange: rest.onChange as (e: React.ChangeEvent) => void,
inputRef: node => {
if (inputRef) {
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-list-group-item.tsx b/services/web/frontend/js/features/ui/components/ol/ol-list-group-item.tsx
new file mode 100644
index 0000000000..c177ee3a1c
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/ol/ol-list-group-item.tsx
@@ -0,0 +1,42 @@
+import { ListGroupItem, ListGroupItemProps } from 'react-bootstrap-5'
+import {
+ ListGroupItem as BS3ListGroupItem,
+ ListGroupItemProps as BS3ListGroupItemProps,
+} from 'react-bootstrap'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
+
+type OLListGroupItemProps = ListGroupItemProps & {
+ bs3Props?: BS3ListGroupItemProps
+}
+
+function OLListGroupItem(props: OLListGroupItemProps) {
+ const { bs3Props, ...rest } = props
+
+ const bs3ListGroupItemProps: BS3ListGroupItemProps = {
+ children: rest.children,
+ active: rest.active,
+ disabled: rest.disabled,
+ href: rest.href,
+ onClick: rest.onClick as BS3ListGroupItemProps['onClick'],
+ ...bs3Props,
+ }
+
+ const extraProps = getAriaAndDataProps(rest)
+ const as = rest.as ?? 'button'
+
+ return (
+ }
+ bs5={
+
+ }
+ />
+ )
+}
+
+export default OLListGroupItem
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-list-group.tsx b/services/web/frontend/js/features/ui/components/ol/ol-list-group.tsx
new file mode 100644
index 0000000000..65af7b3ec3
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/ol/ol-list-group.tsx
@@ -0,0 +1,34 @@
+import { ListGroup, ListGroupProps } from 'react-bootstrap-5'
+import {
+ ListGroup as BS3ListGroup,
+ ListGroupProps as BS3ListGroupProps,
+} from 'react-bootstrap'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
+
+type OLListGroupProps = ListGroupProps & {
+ bs3Props?: BS3ListGroupProps
+}
+
+function OLListGroup(props: OLListGroupProps) {
+ const { bs3Props, ...rest } = props
+
+ const bs3ListGroupProps: BS3ListGroupProps = {
+ children: rest.children,
+ role: rest.role,
+ componentClass: rest.as,
+ ...bs3Props,
+ }
+
+ const extraProps = getAriaAndDataProps(rest)
+ const as = rest.as ?? 'div'
+
+ return (
+ }
+ bs5={}
+ />
+ )
+}
+
+export default OLListGroup
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-overlay.tsx b/services/web/frontend/js/features/ui/components/ol/ol-overlay.tsx
new file mode 100644
index 0000000000..3fa2d3e34a
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/ol/ol-overlay.tsx
@@ -0,0 +1,60 @@
+import { Overlay, OverlayProps } from 'react-bootstrap-5'
+import {
+ Overlay as BS3Overlay,
+ OverlayProps as BS3OverlayProps,
+} from 'react-bootstrap'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+
+type OLOverlayProps = OverlayProps & {
+ bs3Props?: BS3OverlayProps
+}
+
+function OLOverlay(props: OLOverlayProps) {
+ const { bs3Props, ...bs5Props } = props
+
+ let bs3OverlayProps: BS3OverlayProps = {
+ children: bs5Props.children,
+ target: bs5Props.target as BS3OverlayProps['target'],
+ container: bs5Props.container,
+ containerPadding: bs5Props.containerPadding,
+ show: bs5Props.show,
+ rootClose: bs5Props.rootClose,
+ animation: bs5Props.transition,
+ onHide: bs5Props.onHide as BS3OverlayProps['onHide'],
+ onEnter: bs5Props.onEnter as BS3OverlayProps['onEnter'],
+ onEntering: bs5Props.onEntering as BS3OverlayProps['onEntering'],
+ onEntered: bs5Props.onEntered as BS3OverlayProps['onEntered'],
+ onExit: bs5Props.onExit as BS3OverlayProps['onExit'],
+ onExiting: bs5Props.onExiting as BS3OverlayProps['onExiting'],
+ onExited: bs5Props.onExited as BS3OverlayProps['onExited'],
+ }
+
+ if (bs5Props.placement) {
+ const bs3PlacementOptions = [
+ 'top',
+ 'right',
+ 'bottom',
+ 'left',
+ ] satisfies Array<
+ Extract
+ >
+
+ for (const placement of bs3PlacementOptions) {
+ if (placement === bs5Props.placement) {
+ bs3OverlayProps.placement = bs5Props.placement
+ break
+ }
+ }
+ }
+
+ bs3OverlayProps = { ...bs3OverlayProps, ...bs3Props }
+
+ return (
+ }
+ bs5={}
+ />
+ )
+}
+
+export default OLOverlay
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-popover.tsx b/services/web/frontend/js/features/ui/components/ol/ol-popover.tsx
new file mode 100644
index 0000000000..7e6d1feeca
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/ol/ol-popover.tsx
@@ -0,0 +1,85 @@
+import { forwardRef } from 'react'
+import { Popover, PopoverProps } from 'react-bootstrap-5'
+import {
+ Popover as BS3Popover,
+ PopoverProps as BS3PopoverProps,
+} from 'react-bootstrap'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+
+type OLPopoverProps = PopoverProps & {
+ title?: React.ReactNode
+ bs3Props?: BS3PopoverProps
+}
+
+const OLPopover = forwardRef((props, ref) => {
+ // BS3 passes in some props automatically so the `props`
+ // type should be adjusted to reflect the actual received object
+ const propsCombinedWithAutoInjectedBs3Props = props as OLPopoverProps &
+ Pick<
+ BS3PopoverProps,
+ 'arrowOffsetLeft' | 'arrowOffsetTop' | 'positionLeft' | 'positionTop'
+ >
+
+ const {
+ bs3Props,
+ title,
+ children,
+ arrowOffsetLeft,
+ arrowOffsetTop,
+ positionLeft,
+ positionTop,
+ ...bs5Props
+ } = propsCombinedWithAutoInjectedBs3Props
+
+ let bs3PopoverProps: BS3PopoverProps = {
+ children,
+ arrowOffsetLeft,
+ arrowOffsetTop,
+ positionLeft,
+ positionTop,
+ title,
+ id: bs5Props.id,
+ className: bs5Props.className,
+ style: bs5Props.style,
+ }
+
+ if (bs5Props.placement) {
+ const bs3PlacementOptions = [
+ 'top',
+ 'right',
+ 'bottom',
+ 'left',
+ ] satisfies Array<
+ Extract
+ >
+
+ for (const placement of bs3PlacementOptions) {
+ if (placement === bs5Props.placement) {
+ bs3PopoverProps.placement = bs5Props.placement
+ break
+ }
+ }
+ }
+
+ bs3PopoverProps = { ...bs3PopoverProps, ...bs3Props }
+
+ return (
+ }
+ />
+ }
+ bs5={
+
+ {title && {title}}
+ {children}
+
+ }
+ />
+ )
+})
+OLPopover.displayName = 'OLPopover'
+
+export default OLPopover
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-toggle-button-group.tsx b/services/web/frontend/js/features/ui/components/ol/ol-toggle-button-group.tsx
new file mode 100644
index 0000000000..ea874c48a7
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/ol/ol-toggle-button-group.tsx
@@ -0,0 +1,42 @@
+import { ToggleButtonGroup, ToggleButtonGroupProps } from 'react-bootstrap-5'
+import BS3ToggleButtonGroup from '@/features/ui/components/bootstrap-3/toggle-button-group'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
+
+type BS3ToggleButtonGroupProps = React.ComponentProps<
+ typeof BS3ToggleButtonGroup
+>
+
+type OLToggleButtonGroupProps = ToggleButtonGroupProps & {
+ bs3Props?: BS3ToggleButtonGroupProps
+}
+
+function OLToggleButtonGroup(props: OLToggleButtonGroupProps) {
+ const { bs3Props, ...rest } = props
+
+ const bs3ToggleButtonGroupProps = {
+ name: rest.name,
+ type: rest.type,
+ value: rest.value,
+ onChange: rest.onChange,
+ children: rest.children,
+ className: rest.className,
+ defaultValue: rest.defaultValue,
+ defaultChecked: rest.defaultChecked,
+ ...bs3Props,
+ } as BS3ToggleButtonGroupProps
+
+ // Get all `aria-*` and `data-*` attributes
+ const extraProps = getAriaAndDataProps(rest)
+
+ return (
+
+ }
+ bs5={}
+ />
+ )
+}
+
+export default OLToggleButtonGroup
diff --git a/services/web/frontend/js/features/ui/components/ol/ol-toggle-button.tsx b/services/web/frontend/js/features/ui/components/ol/ol-toggle-button.tsx
new file mode 100644
index 0000000000..4415e71bbe
--- /dev/null
+++ b/services/web/frontend/js/features/ui/components/ol/ol-toggle-button.tsx
@@ -0,0 +1,48 @@
+import { ToggleButton, ToggleButtonProps } from 'react-bootstrap-5'
+import {
+ ToggleButton as BS3ToggleButton,
+ ToggleButtonProps as BS3ToggleButtonProps,
+} from 'react-bootstrap'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import { getAriaAndDataProps } from '@/features/utils/bootstrap-5'
+import classnames from 'classnames'
+
+type OLToggleButtonProps = ToggleButtonProps & {
+ bs3Props?: BS3ToggleButtonProps
+}
+
+function OLToggleButton(props: OLToggleButtonProps) {
+ const { bs3Props, ...rest } = props
+
+ const bs3ToggleButtonProps: BS3ToggleButtonProps & { active?: boolean } = {
+ type: rest.type,
+ name: rest.name,
+ active: rest.active,
+ checked: rest.checked,
+ disabled: rest.disabled,
+ onChange: rest.onChange as BS3ToggleButtonProps['onChange'],
+ onClick: rest.onClick as BS3ToggleButtonProps['onClick'],
+ value: rest.value as BS3ToggleButtonProps['value'],
+ children: rest.children,
+ className: classnames(`btn-${props.variant || 'primary'}`, rest.className),
+ ...bs3Props,
+ }
+
+ // Get all `aria-*` and `data-*` attributes
+ const extraProps = getAriaAndDataProps(rest)
+
+ return (
+
+ }
+ bs5={}
+ />
+ )
+}
+
+export default OLToggleButton
diff --git a/services/web/frontend/js/shared/components/beta-badge.tsx b/services/web/frontend/js/shared/components/beta-badge.tsx
index 80e5eaec46..907d53d1e7 100644
--- a/services/web/frontend/js/shared/components/beta-badge.tsx
+++ b/services/web/frontend/js/shared/components/beta-badge.tsx
@@ -1,13 +1,16 @@
import type { FC, ReactNode } from 'react'
import classnames from 'classnames'
-import Tooltip from './tooltip'
-import { OverlayTriggerProps } from 'react-bootstrap'
+import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
+import MaterialIcon from '@/shared/components/material-icon'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
type TooltipProps = {
id: string
text: ReactNode
- placement?: OverlayTriggerProps['placement']
className?: string
+ placement?: NonNullable<
+ React.ComponentProps['overlayProps']
+ >['placement']
}
const BetaBadge: FC<{
@@ -15,7 +18,7 @@ const BetaBadge: FC<{
url?: string
phase?: string
}> = ({ tooltip, url = '/beta/participate', phase = 'beta' }) => {
- let badgeClass
+ let badgeClass: 'info-badge' | 'alpha-badge' | 'beta-badge'
switch (phase) {
case 'release':
badgeClass = 'info-badge'
@@ -29,24 +32,28 @@ const BetaBadge: FC<{
}
return (
-
-
+
{tooltip.text}
+ }
+ bs5={
+
+ }
+ />
-
+
)
}
diff --git a/services/web/frontend/js/shared/components/select.tsx b/services/web/frontend/js/shared/components/select.tsx
index f657d2cda9..addb605194 100644
--- a/services/web/frontend/js/shared/components/select.tsx
+++ b/services/web/frontend/js/shared/components/select.tsx
@@ -12,6 +12,11 @@ import classNames from 'classnames'
import { useSelect } from 'downshift'
import Icon from './icon'
import { useTranslation } from 'react-i18next'
+import BootstrapVersionSwitcher from '@/features/ui/components/bootstrap-5/bootstrap-version-switcher'
+import { Form, Spinner } from 'react-bootstrap-5'
+import FormControl from '@/features/ui/components/bootstrap-5/form/form-control'
+import MaterialIcon from '@/shared/components/material-icon'
+import { DropdownItem } from '@/features/ui/components/bootstrap-5/dropdown-menu'
export type SelectProps = {
// The items rendered as dropdown options.
@@ -79,6 +84,7 @@ export const Select = ({
getItemProps,
highlightedIndex,
openMenu,
+ closeMenu,
} = useSelect({
items: items ?? [],
itemToString,
@@ -117,9 +123,16 @@ export const Select = ({
}
}, [name, itemToString, selectedItem, defaultItem])
+ const handleMenuKeyDown = (event: React.KeyboardEvent) => {
+ if (event.key === 'Escape' && isOpen) {
+ event.stopPropagation()
+ closeMenu()
+ }
+ }
+
const onKeyDown: KeyboardEventHandler = useCallback(
event => {
- if (event.key === 'Enter' && !isOpen) {
+ if ((event.key === 'Enter' || event.key === ' ') && !isOpen) {
event.preventDefault()
;(event.nativeEvent as any).preventDownshiftDefault = true
openMenu()
@@ -135,77 +148,148 @@ export const Select = ({
value = defaultText
}
return (
-
-
- {label ? (
-
- ) : null}
-
-
{value}
+
- {isOpen ? (
-
- ) : (
-
- )}
-
-
-
-
- {isOpen &&
- items?.map((item, index) => {
- const isDisabled = itemToDisabled && itemToDisabled(item)
- return (
- -
-
- {selectedIcon && (
-
- {(selectedItem === item ||
- (!selectedItem && defaultItem === item)) && (
-
- )}
-
- )}
- {itemToString(item)}
-
-
- {itemToSubtitle ? (
-
- {itemToSubtitle(item)}
+ {label ? (
+
- )
- })}
-
-
+
{value}
+
+ {isOpen ? (
+
+ ) : (
+
+ )}
+
+
+
+ {isOpen &&
+ items?.map((item, index) => {
+ const isDisabled = itemToDisabled && itemToDisabled(item)
+ return (
+ -
+
+ {selectedIcon && (
+
+ {(selectedItem === item ||
+ (!selectedItem && defaultItem === item)) && (
+
+ )}
+
+ )}
+ {itemToString(item)}
+
+
+ {itemToSubtitle ? (
+
+ {itemToSubtitle(item)}
+
+ ) : null}
+
+ )
+ })}
+
+
+ }
+ bs5={
+
+ {label ? (
+
+ {label}{' '}
+ {optionalLabel && (
+ ({t('optional')})
+ )}{' '}
+ {loading && (
+
+
+
+ )}
+
+ ) : null}
+
+ }
+ />
+
+ {isOpen &&
+ items?.map((item, index) => {
+ const isDisabled = itemToDisabled && itemToDisabled(item)
+ return (
+ -
+
+ {itemToString(item)}
+
+
+ )
+ })}
+
+
+ }
+ />
)
}
diff --git a/services/web/frontend/js/shared/components/switcher.tsx b/services/web/frontend/js/shared/components/switcher.tsx
deleted file mode 100644
index e75e6bc4b8..0000000000
--- a/services/web/frontend/js/shared/components/switcher.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { FC, createContext, useContext } from 'react'
-
-const SwitcherContext = createContext<
- | {
- name: string
- onChange?: (value: string) => any
- defaultValue?: string
- disabled: boolean
- }
- | undefined
->(undefined)
-
-export const Switcher: FC<{
- name: string
- onChange?: (value: string) => any
- defaultValue?: string
- disabled?: boolean
-}> = ({ name, children, onChange, defaultValue, disabled = false }) => {
- return (
-
-
-
- )
-}
-
-export const SwitcherItem: FC<{
- value: string
- label: string
- checked?: boolean
-}> = ({ value, label, checked = false }) => {
- const ctx = useContext(SwitcherContext)
- if (!ctx) {
- throw new Error('SwitcherItem must be a child of Switcher')
- }
- const { name, onChange, defaultValue, disabled } = ctx
-
- const id = `${name}-option-${value.replace(/\W/g, '')}`
- return (
- <>
-
{
- if (onChange) {
- onChange(evt.target.value)
- }
- }}
- />
-
-
- )
-}
diff --git a/services/web/frontend/stories/switcher.stories.tsx b/services/web/frontend/stories/switcher.stories.tsx
index c713aaf025..da7002ae26 100644
--- a/services/web/frontend/stories/switcher.stories.tsx
+++ b/services/web/frontend/stories/switcher.stories.tsx
@@ -1,28 +1,55 @@
-import { Switcher, SwitcherItem } from '../js/shared/components/switcher'
+import OLToggleButton from '@/features/ui/components/ol/ol-toggle-button'
+import OLToggleButtonGroup from '@/features/ui/components/ol/ol-toggle-button-group'
export const Base = () => {
return (
-
-
-
-
-
-
+
+
+ ¼ width
+
+
+ ½ width
+
+
+ ¾ width
+
+
+ Full width
+
+
)
}
export const Disabled = () => {
return (
-
-
-
-
-
-
+
+
+ ¼ width
+
+
+ ½ width
+
+
+ ¾ width
+
+
+ Full width
+
+
)
}
export default {
- title: 'Shared / Components / Switcher',
- component: Switcher,
+ title: 'Shared / Components / Toggle Button Group',
+ component: OLToggleButtonGroup,
}
diff --git a/services/web/frontend/stylesheets/app/editor/figure-modal.less b/services/web/frontend/stylesheets/app/editor/figure-modal.less
index ab31a3365d..52157ec15e 100644
--- a/services/web/frontend/stylesheets/app/editor/figure-modal.less
+++ b/services/web/frontend/stylesheets/app/editor/figure-modal.less
@@ -1,27 +1,3 @@
-.figure-modal-label {
- font-weight: normal;
- line-height: 100%;
-}
-
-.figure-modal-form tr,
-.figure-modal-form td {
- vertical-align: top;
-}
-
-.figure-modal-footer {
- display: flex;
- justify-content: space-between;
-}
-
-.figure-modal-help-buttons,
-.figure-modal-actions {
- flex: 1 1 auto;
-}
-
-.figure-modal-help-buttons {
- text-align: left;
-}
-
.figure-modal-help-link,
.figure-modal-help-link:hover,
.figure-modal-help-link:focus,
@@ -34,29 +10,32 @@
padding-left: 0;
}
-.figure-modal-switcher-input {
- display: flex;
-}
+.figure-modal-checkbox-input {
+ label {
+ display: inline-block;
+ font-weight: normal;
+ line-height: 100%;
-.figure-modal-checkbox-input,
-.figure-modal-switcher-input {
- margin-top: 16px;
-}
+ .figure-modal-label-content {
+ display: block;
+ overflow: hidden;
+ }
+ }
-.figure-modal-checkbox-input input[type='checkbox'] {
- vertical-align: top;
- margin-right: 12px;
- accent-color: @ol-green;
+ input[type='checkbox'] {
+ margin-right: 12px;
+ margin-top: 2px;
+ vertical-align: top;
+ accent-color: @ol-green;
+ }
}
.figure-modal-switcher-input {
+ position: relative;
+ z-index: 0;
display: flex;
justify-content: space-between;
- vertical-align: middle;
-}
-
-.figure-modal-input-field {
- width: 100%;
+ align-items: center;
}
.file-container {
@@ -71,6 +50,7 @@
.file-container-file {
display: flex;
+ align-items: center;
border: 1px solid @neutral-20;
border-radius: 8px;
background-color: white;
@@ -92,7 +72,6 @@
.file-icon {
font-size: 20px;
- line-height: 40px;
}
.file-action {
@@ -129,17 +108,13 @@
}
.figure-modal-source-button-icon {
- flex: 0 0 auto;
- &.source-icon {
- margin-right: 6px;
- }
-}
-
-.figure-modal-input-label:not(:first-child),
-.figure-modal .select-wrapper:not(:first-child) {
- margin-top: 16px;
+ margin-right: 6px;
}
.figure-modal-upload .uppy-Dashboard-AddFiles-list {
display: none;
}
+
+.select-from-files-btn {
+ vertical-align: baseline;
+}
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less
index d215966aba..4fd7c1b954 100644
--- a/services/web/frontend/stylesheets/app/editor/toolbar.less
+++ b/services/web/frontend/stylesheets/app/editor/toolbar.less
@@ -387,12 +387,12 @@
}
}
-.formatting-btn--icon {
+.formatting-btn-icon {
min-width: 32px;
width: 32px;
}
-.formatting-btn--icon:last-of-type {
+.formatting-btn-icon:last-of-type {
border-right: 1px solid @formatting-btn-border;
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
index 39277ca24b..b92f7f7411 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss
@@ -175,6 +175,24 @@ $tooltip-border-radius: $border-radius-base;
$tooltip-padding-y: $spacing-04;
$tooltip-padding-x: $spacing-06;
+// Popovers
+$popover-font-size: var(--font-size-02);
+$popover-bg: var(--bg-dark-primary);
+$popover-max-width: 320px;
+$popover-border-width: 0px; /* stylelint-disable-line length-zero-no-unit */
+$popover-border-radius: var(--border-radius-base);
+$popover-header-font-size: var(--font-size-02);
+$popover-header-bg: var(--bg-dark-primary);
+$popover-header-color: var(--content-primary-dark);
+$popover-header-padding-y: var(--spacing-04);
+$popover-header-padding-x: var(--spacing-06);
+$popover-body-color: var(--content-primary-dark);
+$popover-body-padding-y: var(--spacing-04);
+$popover-body-padding-x: var(--spacing-06);
+$popover-arrow-width: var(--spacing-04);
+$popover-arrow-height: var(--spacing-02);
+$popover-arrow-color: var(--bg-dark-primary);
+
// Links. Ideally we'd point these to CSS variables but Bootstrap performs
// calculations on link color during compilation.
$link-color: $link-ui;
@@ -228,3 +246,13 @@ $dropdown-padding-y: var(--spacing-02);
$dropdown-item-padding-x: var(--spacing-04);
$dropdown-item-padding-y: var(--spacing-05);
$dropdown-header-color: var(--content-secondary);
+
+// List group
+$list-group-color: var(--content-secondary);
+$list-group-border-width: 0;
+$list-group-border-radius: (--border-radius-base);
+$list-group-item-padding-y: var(--spacing-04);
+$list-group-item-padding-x: var(--spacing-05);
+$list-group-hover-bg: var(--bg-light-secondary);
+$list-group-disabled-color: var(--content-disabled);
+$list-group-disabled-bg: var(--bg-light-primary);
diff --git a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss b/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss
index b486476f67..16d68fb7c3 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/base/bootstrap.scss
@@ -33,8 +33,10 @@
@import 'bootstrap-5/scss/dropdown';
@import 'bootstrap-5/scss/button-group';
@import 'bootstrap-5/scss/badge';
+@import 'bootstrap-5/scss/list-group';
@import 'bootstrap-5/scss/modal';
@import 'bootstrap-5/scss/tooltip';
+@import 'bootstrap-5/scss/popover';
@import 'bootstrap-5/scss/spinners';
@import 'bootstrap-5/scss/card';
@import 'bootstrap-5/scss/close';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
index 7d50253664..523b901bc5 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/all.scss
@@ -6,6 +6,7 @@
@import 'notifications';
@import 'system-messages';
@import 'tooltip';
+@import 'popover';
@import 'card';
@import 'badge';
@import 'form';
@@ -20,3 +21,6 @@
@import 'table';
@import 'blog-posts';
@import 'tabs';
+@import 'beta-badges';
+@import 'list-group';
+@import 'select';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss b/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss
new file mode 100644
index 0000000000..e35528af78
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/beta-badges.scss
@@ -0,0 +1,11 @@
+.info-badge {
+ color: var(--blue-50);
+}
+
+.alpha-badge {
+ color: var(--green-50);
+}
+
+.beta-badge {
+ color: var(--yellow-40);
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
index 1c1a34953d..b68035a672 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/form.scss
@@ -84,7 +84,7 @@
}
.form-label {
- &:has(+ .form-control[disabled]) {
+ &:has(+ .form-control[disabled], + .form-control-wrapper-disabled) {
color: var(--content-disabled);
}
}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/list-group.scss b/services/web/frontend/stylesheets/bootstrap-5/components/list-group.scss
new file mode 100644
index 0000000000..d3bb6db123
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/list-group.scss
@@ -0,0 +1,3 @@
+.list-group-item {
+ min-height: 48px;
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/popover.scss b/services/web/frontend/stylesheets/bootstrap-5/components/popover.scss
new file mode 100644
index 0000000000..d1bacede62
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/popover.scss
@@ -0,0 +1,15 @@
+.popover {
+ @include shadow-md;
+
+ line-height: var(--line-height-02);
+}
+
+.popover-header {
+ padding-bottom: 0;
+ margin-bottom: var(--spacing-02);
+ font-weight: 600;
+
+ & + .popover-body {
+ padding-top: 0;
+ }
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/select.scss b/services/web/frontend/stylesheets/bootstrap-5/components/select.scss
new file mode 100644
index 0000000000..939397bc86
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/select.scss
@@ -0,0 +1,11 @@
+.select-wrapper {
+ position: relative;
+}
+
+.select-trigger {
+ cursor: default;
+}
+
+.select-highlighted {
+ background-color: var(--bg-light-secondary);
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
index 776ea697ff..aad6f1471a 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/all.scss
@@ -10,4 +10,5 @@
@import 'editor/loading-screen';
@import 'editor/outline';
@import 'editor/file-tree';
+@import 'editor/figure-modal';
@import 'website-redesign';
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/figure-modal.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/figure-modal.scss
new file mode 100644
index 0000000000..f071304888
--- /dev/null
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/figure-modal.scss
@@ -0,0 +1,89 @@
+.figure-modal-help-link,
+.figure-modal-help-link:hover,
+.figure-modal-help-link:focus,
+.figure-modal-help-link:active {
+ color: var(--neutral-90) !important;
+ text-decoration: none;
+}
+
+.figure-modal-help-link {
+ padding-left: 0;
+}
+
+.figure-modal-switcher-input {
+ position: relative;
+ z-index: 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.file-container {
+ width: 100%;
+ height: 120px;
+ padding: var(--spacing-07) var(--spacing-08);
+ border: 1px dashed #eaeaea;
+ background-color: #fafafa;
+ justify-content: space-between;
+ border-radius: var(--border-radius-medium);
+}
+
+.file-container-file {
+ display: flex;
+ align-items: center;
+ border: 1px solid var(--neutral-20);
+ border-radius: var(--border-radius-medium);
+ background-color: white;
+ height: 100%;
+ padding: var(--spacing-06) var(--spacing-07);
+}
+
+.file-info {
+ margin-left: var(--spacing-07);
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+.file-name {
+ font-weight: bold;
+}
+
+.figure-modal-source-button-grid {
+ display: grid;
+ justify-content: space-between;
+ gap: 8px;
+ grid-template-columns: 1fr 1fr;
+ margin: 0 auto;
+
+ &:not(:first-of-type) {
+ margin-top: 8px;
+ }
+}
+
+.figure-modal-source-button {
+ display: flex;
+ flex: 1 1 0;
+ align-items: center;
+ box-shadow: 0 2px 4px 0 #1e253029;
+ line-height: 44px;
+ background-color: var(--white);
+ border-radius: var(--border-radius-base);
+ border: none;
+ padding: 0 var(--spacing-04);
+
+ &-title {
+ flex: 1 1 auto;
+ text-align: left;
+ }
+}
+
+.figure-modal-source-button-icon {
+ margin-right: var(--spacing-03);
+}
+
+/* stylelint-disable selector-class-pattern */
+.figure-modal-upload .uppy-Dashboard-AddFiles-list {
+ display: none;
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
index 16801b9292..966593f704 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/ide.scss
@@ -79,7 +79,7 @@
}
.ide-panel-group-resizing {
- background-color: white;
+ background-color: var(--white);
// Hide panel contents while resizing
.ide-react-editor-content,
@@ -188,3 +188,8 @@
opacity: 0.5;
}
}
+
+.full-size {
+ position: absolute;
+ inset: 0;
+}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
index 76b1d3c20b..4c03c0147d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/toolbar.scss
@@ -5,12 +5,18 @@
--toolbar-btn-color: var(--white);
--toolbar-btn-hover-bg-color: var(--neutral-80);
--toolbar-btn-hover-color: var(--white);
+ --toolbar-btn-active-color: var(--white);
+ --toolbar-btn-active-bg-color: var(--green-50);
+ --formatting-btn-color: var(--white);
+ --formatting-btn-bg: var(--neutral-80);
+ --formatting-btn-border: var(--neutral-70);
--project-name-color: var(--neutral-40);
--toolbar-filetree-bg-color: var(--neutral-80);
--project-rename-link-color: var(--neutral-40);
--project-rename-link-color-hover: var(--neutral-20);
--editor-header-logo-background: url(../../../../../public/img/ol-brand/overleaf-o-white.svg)
center / contain no-repeat;
+ --editor-toolbar-bg: var(--neutral-80);
}
@include theme('light') {
@@ -20,12 +26,17 @@
--toolbar-btn-color: var(--neutral-70);
--toolbar-btn-hover-bg-color: var(--neutral-10);
--toolbar-btn-hover-color: var(--neutral-70);
+ --toolbar-btn-active-bg-color: var(--green-50);
+ --formatting-btn-color: var(--neutral-70);
+ --formatting-btn-bg: transparent;
+ --formatting-btn-border: var(--neutral-20);
--project-name-color: var(--neutral-70);
--toolbar-filetree-bg-color: var(--white);
--project-rename-link-color: var(--neutral-70);
--project-rename-link-color-hover: var(--neutral-70);
--editor-header-logo-background: url(../../../../../public/img/ol-brand/overleaf-o.svg)
center / contain no-repeat;
+ --editor-toolbar-bg: var(--white);
}
.toolbar {
@@ -300,3 +311,156 @@
}
}
}
+
+.toolbar-editor {
+ height: 32px;
+ background-color: var(--editor-toolbar-bg);
+ padding: 0 5px;
+ overflow: hidden;
+ position: relative;
+ z-index: 10; // Prevent track changes showing over toolbar
+}
+
+/**************************************
+ Toggle Switch
+***************************************/
+
+.toggle-switch {
+ display: inline-flex;
+ align-items: center;
+ height: 26px;
+ margin-right: var(--spacing-03);
+ border-radius: var(--border-radius-full);
+ background-color: var(--neutral-20);
+ padding: var(--spacing-01);
+}
+
+.toggle-switch-label {
+ display: inline-block;
+ float: left;
+ font-weight: normal;
+ height: 100%;
+ text-align: center;
+ margin: 0;
+ cursor: pointer;
+ user-select: none;
+ color: var(--content-secondary);
+ border-radius: var(--border-radius-full);
+ transition:
+ color 0.12s ease-out,
+ background-color 0.12s ease-out,
+ box-shadow 0.12s ease-out;
+ overflow: hidden;
+
+ span {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ width: 100%;
+ padding: 0 var(--spacing-08);
+ background-size: 200% 100%;
+ background-position: 0 0;
+ transition: background-position 0.12s ease-out;
+ font-size: var(--font-size-02);
+ font-weight: bold;
+ }
+}
+
+.toggle-switch-input {
+ position: absolute;
+ opacity: 0;
+ pointer-events: none;
+}
+
+.toggle-switch-input:disabled + .toggle-switch-label {
+ cursor: not-allowed;
+}
+
+.toggle-switch-input:checked + .toggle-switch-label {
+ span {
+ background-position: -100% 0;
+ }
+
+ color: var(--white);
+ background-color: var(--bg-accent-01);
+ border-radius: var(--border-radius-full);
+ box-shadow: 0 2px 4px rgb(30 37 48 / 16%);
+}
+
+.toggle-switch-input:checked:nth-child(2) + .toggle-switch-label {
+ span {
+ background-position: 100% 0;
+ }
+}
+
+.editor-toggle-switch {
+ display: flex;
+ align-items: center;
+ white-space: nowrap;
+
+ .toggle-switch {
+ margin-left: var(--spacing-03);
+ }
+
+ .toggle-switch-label span {
+ background: none;
+ transition: background 0.12s ease-out;
+ }
+
+ .toggle-switch-label:first-of-type span {
+ padding-left: var(--spacing-04);
+ }
+
+ .toggle-switch-label:last-of-type span {
+ padding-right: var(--spacing-04);
+ border-right: none;
+ }
+}
+
+/**************************************
+ Formatting buttons
+***************************************/
+.formatting-btn {
+ color: var(--formatting-btn-color);
+ background-color: var(--formatting-btn-bg);
+ padding: 0;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: none;
+ border: none;
+ border-left: 1px solid var(--formatting-btn-border);
+ border-radius: 0;
+
+ &:hover {
+ color: var(--formatting-btn-color);
+ }
+
+ &.active {
+ color: var(--white);
+ background-color: var(--toolbar-btn-active-bg-color);
+ box-shadow: none;
+
+ &:focus {
+ color: var(--toolbar-btn-active-color);
+
+ &:not(:focus-visible) {
+ outline: none;
+ }
+ }
+ }
+
+ &:focus {
+ color: var(--formatting-btn-color);
+ }
+}
+
+.formatting-btn-icon {
+ min-width: 32px;
+ width: 32px;
+}
+
+.formatting-btn-icon:last-of-type {
+ border-right: 1px solid var(--formatting-btn-border);
+}
diff --git a/services/web/frontend/stylesheets/components/button-groups.less b/services/web/frontend/stylesheets/components/button-groups.less
index 24a2fd5bcc..927359d61f 100755
--- a/services/web/frontend/stylesheets/components/button-groups.less
+++ b/services/web/frontend/stylesheets/components/button-groups.less
@@ -25,6 +25,20 @@
}
}
+.btn-group {
+ .btn.active {
+ background-color: @neutral-20;
+ }
+
+ .btn[disabled] {
+ cursor: not-allowed;
+ background-color: @neutral-20;
+ border-color: @neutral-20;
+ opacity: 1;
+ color: @neutral-90;
+ }
+}
+
// Prevent double borders when buttons are next to each other
.btn-group {
.btn + .btn,
diff --git a/services/web/frontend/stylesheets/components/switcher.less b/services/web/frontend/stylesheets/components/switcher.less
deleted file mode 100644
index e926fcfcb7..0000000000
--- a/services/web/frontend/stylesheets/components/switcher.less
+++ /dev/null
@@ -1,37 +0,0 @@
-.switcher-input {
- position: absolute;
- opacity: 0;
- pointer-events: none;
-}
-
-.switcher-label {
- border: 1px solid black;
- padding: 4px 16px;
- user-select: none;
-}
-
-.switcher-label:first-of-type {
- border-top-left-radius: 999px;
- border-bottom-left-radius: 999px;
-}
-
-.switcher-label:last-of-type {
- border-top-right-radius: 999px;
- border-bottom-right-radius: 999px;
-}
-
-.switcher-label:not(:first-of-type) {
- border-left-width: 0px;
-}
-
-.switcher-input:checked + .switcher-label {
- background-color: @neutral-20;
-}
-
-.switcher-input:disabled + .switcher-label {
- cursor: not-allowed;
- background-color: @neutral-20;
- border-color: @neutral-20;
- opacity: 1;
- color: @neutral-90;
-}
diff --git a/services/web/frontend/stylesheets/main-style.less b/services/web/frontend/stylesheets/main-style.less
index 4a48bc3597..a0db92f0a2 100644
--- a/services/web/frontend/stylesheets/main-style.less
+++ b/services/web/frontend/stylesheets/main-style.less
@@ -72,7 +72,6 @@
@import 'components/list-group.less';
@import 'components/select.less';
@import 'components/switch.less';
-@import 'components/switcher.less';
@import 'components/stepper.less';
@import 'components/radio-chip.less';
@import 'components/interstitial.less';
diff --git a/services/web/locales/en.json b/services/web/locales/en.json
index c217e708ba..2a5e9e98df 100644
--- a/services/web/locales/en.json
+++ b/services/web/locales/en.json
@@ -2143,7 +2143,9 @@
"took_a_while": "That took a while...",
"toolbar_bullet_list": "Bullet List",
"toolbar_choose_section_heading_level": "Choose section heading level",
+ "toolbar_code_visual_editor_switch": "Code and visual editor switch",
"toolbar_decrease_indent": "Decrease Indent",
+ "toolbar_editor": "Editor tools",
"toolbar_format_bold": "Format Bold",
"toolbar_format_italic": "Format Italic",
"toolbar_increase_indent": "Increase Indent",
@@ -2154,7 +2156,10 @@
"toolbar_insert_inline_math": "Insert Inline Math",
"toolbar_insert_link": "Insert Link",
"toolbar_insert_math": "Insert Math",
+ "toolbar_insert_math_and_symbols": "Insert Math and Symbols",
+ "toolbar_insert_misc": "Insert Misc (links, citations, cross-references, figures, tables)",
"toolbar_insert_table": "Insert Table",
+ "toolbar_list_indentation": "List and Indentation",
"toolbar_numbered_list": "Numbered List",
"toolbar_redo": "Redo",
"toolbar_selected_projects": "Selected projects",
@@ -2163,8 +2168,12 @@
"toolbar_selected_projects_restore": "Restore selected projects",
"toolbar_table_insert_size_table": "Insert __size__ table",
"toolbar_table_insert_table_lowercase": "Insert table",
+ "toolbar_text_formatting": "Text formatting",
+ "toolbar_text_style": "Text style",
"toolbar_toggle_symbol_palette": "Toggle Symbol Palette",
"toolbar_undo": "Undo",
+ "toolbar_undo_redo_actions": "Undo/Redo actions",
+ "toolbar_visibility": "Toolbar visibility",
"tooltip_hide_filetree": "Click to hide the file tree",
"tooltip_hide_pdf": "Click to hide the PDF",
"tooltip_show_filetree": "Click to show the file tree",
diff --git a/services/web/test/frontend/components/shared/split-test-badge.spec.tsx b/services/web/test/frontend/components/shared/split-test-badge.spec.tsx
index 8fa09fa44c..173547e4c1 100644
--- a/services/web/test/frontend/components/shared/split-test-badge.spec.tsx
+++ b/services/web/test/frontend/components/shared/split-test-badge.spec.tsx
@@ -28,9 +28,9 @@ describe('split test badge', function () {
)
- cy.get('a.badge.alpha-badge[href="/alpha/participate"]').contains(
- 'This is an alpha feature'
- )
+ cy.findByRole('link', { name: /this is an alpha feature/i })
+ .should('have.attr', 'href', '/alpha/participate')
+ .find('.badge.alpha-badge')
})
it('does not render the alpha badge when user is not assigned to the variant', function () {
@@ -86,9 +86,9 @@ describe('split test badge', function () {
)
- cy.get('a.badge.beta-badge[href="/beta/participate"]').contains(
- 'This is a beta feature'
- )
+ cy.findByRole('link', { name: /this is a beta feature/i })
+ .should('have.attr', 'href', '/beta/participate')
+ .find('.badge.beta-badge')
})
it('does not render the beta badge when user is not assigned to the variant', function () {
@@ -144,9 +144,9 @@ describe('split test badge', function () {
)
- cy.get('a.badge.info-badge[href="/feedback/form"]').contains(
- 'This is a new feature'
- )
+ cy.findByRole('link', { name: /this is a new feature/i })
+ .should('have.attr', 'href', '/feedback/form')
+ .find('.badge.info-badge')
})
it('does not render the info badge when user is not assigned to the variant', function () {
@@ -218,8 +218,10 @@ describe('split test badge', function () {
)
- cy.get('a.badge.info-badge[href="/beta/participate"]')
- .contains('We are testing this new feature.')
- .contains('Click to give feedback')
+ cy.findByRole('link', {
+ name: /we are testing this new feature.*click to give feedback/i,
+ })
+ .should('have.attr', 'href', '/beta/participate')
+ .find('.badge.info-badge')
})
})