mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #18782 from overleaf/mj-symbol-palette-inline
[web] Move symbol palette icon inline GitOrigin-RevId: 8d05cbf5211009870b8107c3c620af0e701a04dd
This commit is contained in:
parent
4087345a2a
commit
d2ae97427d
2 changed files with 15 additions and 5 deletions
|
@ -82,6 +82,7 @@ const createAutoComplete = (enabled: boolean) => {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const AUTOCOMPLETE_LINE_HEIGHT = 1.4
|
||||||
/**
|
/**
|
||||||
* Styles for the autocomplete menu
|
* Styles for the autocomplete menu
|
||||||
*/
|
*/
|
||||||
|
@ -113,9 +114,20 @@ const autocompleteTheme = EditorView.baseTheme({
|
||||||
'.cm-tooltip.cm-tooltip-autocomplete li[role="option"]': {
|
'.cm-tooltip.cm-tooltip-autocomplete li[role="option"]': {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
lineHeight: 1.4, // increase the line height from default 1.2, for a larger target area
|
lineHeight: AUTOCOMPLETE_LINE_HEIGHT, // increase the line height from default 1.2, for a larger target area
|
||||||
outline: '1px solid transparent',
|
outline: '1px solid transparent',
|
||||||
},
|
},
|
||||||
|
'.cm-tooltip .cm-completionDetail': {
|
||||||
|
flex: '1 0 auto',
|
||||||
|
fontSize: 'calc(var(--font-size) * 1.4)',
|
||||||
|
lineHeight: `calc(var(--font-size) * ${AUTOCOMPLETE_LINE_HEIGHT})`,
|
||||||
|
overflow: 'hidden',
|
||||||
|
// By default CodeMirror styles the details as italic
|
||||||
|
fontStyle: 'normal !important',
|
||||||
|
// We use this element for the symbol palette, so change the font to the
|
||||||
|
// symbol palette font
|
||||||
|
fontFamily: "'Stix Two Math', serif",
|
||||||
|
},
|
||||||
'&light .cm-tooltip.cm-tooltip-autocomplete li[role="option"]:hover': {
|
'&light .cm-tooltip.cm-tooltip-autocomplete li[role="option"]:hover': {
|
||||||
outlineColor: '#abbffe',
|
outlineColor: '#abbffe',
|
||||||
backgroundColor: 'rgba(233, 233, 253, 0.4)',
|
backgroundColor: 'rgba(233, 233, 253, 0.4)',
|
||||||
|
|
|
@ -902,10 +902,8 @@ describe('autocomplete', { scrollBehavior: false }, function () {
|
||||||
|
|
||||||
// the symbol completion should exist
|
// the symbol completion should exist
|
||||||
cy.findAllByRole('option', {
|
cy.findAllByRole('option', {
|
||||||
name: /^\\alpha\s+Greek$/,
|
name: /^\\alpha\s+𝛼\s+Greek$/,
|
||||||
}).should('have.length', 1)
|
}).should('have.length', 1)
|
||||||
|
|
||||||
cy.get('body').should('contain', 'Lowercase Greek letter alpha')
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('does not display symbol completions in autocomplete when the feature is disabled', function () {
|
it('does not display symbol completions in autocomplete when the feature is disabled', function () {
|
||||||
|
@ -933,7 +931,7 @@ describe('autocomplete', { scrollBehavior: false }, function () {
|
||||||
cy.findAllByRole('listbox').should('have.length', 1)
|
cy.findAllByRole('listbox').should('have.length', 1)
|
||||||
|
|
||||||
cy.findAllByRole('option', {
|
cy.findAllByRole('option', {
|
||||||
name: /^\\alpha\s+Greek$/,
|
name: /^\\alpha\s+𝛼\s+Greek$/,
|
||||||
}).should('have.length', 0)
|
}).should('have.length', 0)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue