diff --git a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js index 820da8b1d3..9429c94d03 100644 --- a/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js +++ b/services/web/frontend/js/features/editor-navigation-toolbar/components/layout-dropdown-button.js @@ -1,6 +1,6 @@ import { useCallback } from 'react' import PropTypes from 'prop-types' -import { Dropdown, MenuItem } from 'react-bootstrap' +import { Dropdown, MenuItem, OverlayTrigger, Tooltip } from 'react-bootstrap' import { Trans, useTranslation } from 'react-i18next' import Icon from '../../../shared/components/icon' import IconChecked from '../../../shared/components/icon-checked' @@ -91,12 +91,19 @@ function LayoutDropdownButton() { )} {processing ? : } {t('layout')} + Beta feature} + delayHide={100} + > + + handleChangeLayout('sideBySide')}> @@ -121,12 +128,14 @@ function LayoutDropdownButton() { detachRole={detachRole} /> - , - ]} - /> + + , + ]} + /> + - , - ]} - /> + + , + ]} + /> + {detachRole === 'detacher' ? ( @@ -161,6 +172,24 @@ function LayoutDropdownButton() { {t('pdf_in_separate_tab')} )} + + +
+ + + + + The Layout menu and opening the PDF in a new tab are beta + features.{' '} + + {t('give_feedback')}. + + +
diff --git a/services/web/frontend/stylesheets/app/editor/toolbar.less b/services/web/frontend/stylesheets/app/editor/toolbar.less index 073962f7ba..935efdece0 100644 --- a/services/web/frontend/stylesheets/app/editor/toolbar.less +++ b/services/web/frontend/stylesheets/app/editor/toolbar.less @@ -165,6 +165,17 @@ text-decoration: none !important; } +.layout-dropdown { + .pdf-detach-survey { + display: flex; + font-size: @font-size-small; + } + + .pdf-detach-survey-text { + margin-left: @margin-sm; + white-space: normal; + } +} #layout-dropdown-list { a { i, @@ -408,6 +419,11 @@ } .menu-item-with-svg { + a { + align-items: center; + display: flex !important; + } + svg { line, rect {