MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Improve popover positioning, improve drawer styles and performance

This commit is contained in:
Andrew Kingston 2024-02-27 09:24:26 +00:00
parent a44f348e37
commit 1e74fe0cb7
5 changed files with 114 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/bbui/src/Actions/position_dropdown.js
View File

@ -40,8 +40,12 @@ export default function positionDropdown(element, opts) {
} else { } else {
// Determine vertical styles // Determine vertical styles
if (align === "right-outside" || align === "left-outside") { if (align === "right-outside" || align === "left-outside") {
styles.top = anchorBounds.bottom - elementBounds.height styles.top =
anchorBounds.top + anchorBounds.height / 2 - elementBounds.height / 2
styles.maxHeight = maxHeight styles.maxHeight = maxHeight
if (styles.top + elementBounds.height > window.innerHeight) {
styles.top = window.innerHeight - elementBounds.height
}
} else if ( } else if (
window.innerHeight - anchorBounds.bottom < window.innerHeight - anchorBounds.bottom <
(maxHeight || 100) (maxHeight || 100)

2
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -60,7 +60,7 @@
export let headless = false export let headless = false
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const spacing = 10 const spacing = 11
let visible = false let visible = false
let drawerId = generate() let drawerId = generate()

133
packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
View File

@ -42,7 +42,7 @@
} from "@codemirror/commands" } from "@codemirror/commands"
import { Compartment } from "@codemirror/state" import { Compartment } from "@codemirror/state"
import { javascript } from "@codemirror/lang-javascript" import { javascript } from "@codemirror/lang-javascript"
import { EditorModes, getDefaultTheme } from "./" import { EditorModes } from "./"
import { themeStore } from "stores/portal" import { themeStore } from "stores/portal"
export let label export let label
@ -164,14 +164,7 @@
dispatch("change", docStr) dispatch("change", docStr)
}), }),
keymap.of(buildKeymap()), keymap.of(buildKeymap()),
themeConfig.of([ themeConfig.of([...(isDark ? [oneDark] : [])]),
getDefaultTheme({
height: editorHeight,
resize,
dark: isDark,
}),
...(isDark ? [oneDark] : []),
]),
] ]
} }
@ -182,7 +175,7 @@
complete.push( complete.push(
autocompletion({ autocompletion({
override: [...completions], override: [...completions],
closeOnBlur: true, closeOnBlur: false,
icons: false, icons: false,
optionClass: () => "autocomplete-option", optionClass: () => "autocomplete-option",
}) })
@ -264,14 +257,7 @@
// Issue theme compartment update // Issue theme compartment update
editor.dispatch({ editor.dispatch({
effects: themeConfig.reconfigure([ effects: themeConfig.reconfigure([...(isDark ? [oneDark] : [])]),
getDefaultTheme({
height: editorHeight,
resize,
dark: isDark,
}),
...(isDark ? [oneDark] : []),
]),
}) })
} }
} }
@ -312,6 +298,7 @@
.code-editor :global(.cm-line) { .code-editor :global(.cm-line) {
height: 16px; height: 16px;
padding: 0 var(--spacing-s); padding: 0 var(--spacing-s);
color: var(--spectrum-alias-text-color);
} }
.code-editor :global(.cm-activeLine) { .code-editor :global(.cm-activeLine) {
position: relative; position: relative;
@ -358,30 +345,103 @@
position: relative; position: relative;
} }
/* Cursor color */
.code-editor :global(.cm-focused .cm-cursor) {
border-left-color: var(--spectrum-alias-text-color);
}
/* Placeholder */
.code-editor :global(.cm-placeholder) {
color: var(--spectrum-global-color-gray-700);
font-style: italic;
}
/* Highlight bindings */
.code-editor :global(.binding-wrap) {
color: var(--spectrum-global-color-blue-700);
}
/* Completion popover */ /* Completion popover */
.code-editor :global(.cm-tooltip.cm-completionInfo) { .code-editor :global(.cm-tooltip-autocomplete) {
background: var(--spectrum-global-color-gray-75);
border-radius: 4px;
border: 1px solid var(--spectrum-global-color-gray-200);
}
.code-editor :global(.cm-tooltip-autocomplete > ul) {
max-height: 20em;
}
/* Completion section header*/
.code-editor :global(.info-section) {
display: flex;
align-items: center;
padding: var(--spacing-m); padding: var(--spacing-m);
font-family: var(--font-sans);
font-size: var(--font-size-s);
gap: var(--spacing-m);
color: var(--spectrum-alias-text-color);
font-weight: 600;
} }
.code-editor :global(.cm-tooltip-autocomplete > ul > li[aria-selected]) { .code-editor :global(.info-section:not(:first-of-type)) {
border-radius: var( border-top: 1px solid var(--spectrum-global-color-gray-200);
--spectrum-popover-border-radius,
var(--spectrum-alias-border-radius-regular)
),
var(
--spectrum-popover-border-radius,
var(--spectrum-alias-border-radius-regular)
),
0, 0;
} }
/* Completion item container */
.code-editor :global(.autocomplete-option) {
padding: var(--spacing-s) var(--spacing-m) !important;
padding-left: calc(16px + 2 * var(--spacing-m)) !important;
display: flex;
gap: var(--spacing-m);
align-items: center;
color: var(--spectrum-alias-text-color);
}
/* Highlighted completion item */
.code-editor :global(.autocomplete-option[aria-selected]) {
background: var(--spectrum-global-color-blue-400);
color: white;
}
.code-editor
:global(.autocomplete-option[aria-selected] .cm-completionDetail) {
color: white;
}
/* Completion item label */
.code-editor :global(.cm-completionLabel) {
flex: 1 1 auto;
font-size: var(--font-size-s);
font-family: var(--font-sans);
text-transform: capitalize;
}
/* Completion item type */
.code-editor :global(.autocomplete-option .cm-completionDetail) { .code-editor :global(.autocomplete-option .cm-completionDetail) {
background-color: var(--spectrum-global-color-gray-200); font-family: var(--font-mono);
color: var(--spectrum-global-color-gray-700);
font-style: normal;
text-transform: capitalize;
font-size: 10px;
}
/* Live binding value / helper container */
.code-editor :global(.cm-completionInfo) {
margin-left: var(--spacing-s);
border: 1px solid var(--spectrum-global-color-gray-300);
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);
padding: 4px 6px; background-color: var(--spectrum-global-color-gray-50);
padding: var(--spacing-m);
margin-top: -2px;
}
/* Live binding value / helper value */
.code-editor :global(.binding__description) {
color: var(--spectrum-global-color-gray-700);
font-size: var(--font-size-s);
} }
.code-editor :global(.binding__example) { .code-editor :global(.binding__example) {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-size: 12px; font-size: var(--font-size-s);
font-family: var(--font-mono); font-family: var(--font-mono);
white-space: pre; white-space: pre;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -393,4 +453,13 @@
text-overflow: ellipsis !important; text-overflow: ellipsis !important;
white-space: nowrap !important; white-space: nowrap !important;
} }
/* Wrapper around helpers */
.code-editor :global(.info-bubble) {
font-size: var(--font-size-s);
display: grid;
grid-gap: var(--spacing-s);
grid-template-columns: 1fr;
color: var(--spectrum-global-color-gray-800);
}
</style> </style>

97
packages/builder/src/components/common/CodeEditor/index.js
View File

@ -27,94 +27,6 @@ export const SECTIONS = {
}, },
} }
export const getDefaultTheme = opts => {
const { height, resize, dark } = opts
return EditorView.theme(
{
"&.cm-focused .cm-cursor": {
borderLeftColor: "var(--spectrum-alias-text-color)",
},
"&": {
height: height ? `${height}` : "",
lineHeight: "1.3",
border:
"var(--spectrum-alias-border-size-thin) solid var(--spectrum-alias-border-color)",
borderRadius: "var(--border-radius-s)",
resize: resize ? `${resize}` : "",
overflow: "hidden",
color: "var(--spectrum-alias-text-color)",
},
"& .cm-tooltip.cm-tooltip-autocomplete > ul": {
fontFamily:
"var(--spectrum-alias-body-text-font-family, var(--spectrum-global-font-family-base))",
maxHeight: "16em",
},
"& .cm-placeholder": {
color: "var(--spectrum-alias-text-color)",
fontStyle: "italic",
},
"&.cm-focused": {
outline: "none",
borderColor: "var(--spectrum-alias-border-color-mouse-focus)",
},
// AUTO COMPLETE
"& .cm-completionDetail": {
fontStyle: "unset",
textTransform: "uppercase",
fontSize: "10px",
backgroundColor: "var(--spectrum-global-color-gray-100)",
color: "var(--spectrum-global-color-gray-600)",
},
"& .cm-completionLabel": {
marginLeft:
"calc(var(--spectrum-alias-workflow-icon-size-m) + var(--spacing-m))",
},
"& .info-bubble": {
fontSize: "var(--font-size-s)",
display: "grid",
gridGap: "var(--spacing-s)",
gridTemplateColumns: "1fr",
color: "var(--spectrum-global-color-gray-800)",
},
"& .cm-tooltip": {
marginLeft: "var(--spacing-s)",
border: "1px solid var(--spectrum-global-color-gray-300)",
borderRadius:
"var( --spectrum-popover-border-radius, var(--spectrum-alias-border-radius-regular) )",
backgroundColor: "var(--spectrum-global-color-gray-50)",
},
// Section header
"& .info-section": {
display: "flex",
padding: "var(--spacing-s)",
gap: "var(--spacing-m)",
borderBottom: "1px solid var(--spectrum-global-color-gray-200)",
color: "var(--spectrum-global-color-gray-800)",
fontWeight: "bold",
},
"& .info-section .spectrum-Icon": {
color: "var(--spectrum-global-color-gray-600)",
},
// Autocomplete Option
"& .cm-tooltip.cm-tooltip-autocomplete .autocomplete-option": {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
fontSize: "var(--spectrum-alias-font-size-default)",
padding: "var(--spacing-s)",
color: "var(--spectrum-global-color-gray-800)",
},
"& .cm-tooltip-autocomplete ul li[aria-selected].autocomplete-option": {
backgroundColor: "var(--spectrum-global-color-gray-200)",
},
"& .binding-wrap": {
color: "var(--spectrum-global-color-orange-600)",
},
},
{ dark }
)
}
export const buildHelperInfoNode = (completion, helper) => { export const buildHelperInfoNode = (completion, helper) => {
const ele = document.createElement("div") const ele = document.createElement("div")
ele.classList.add("info-bubble") ele.classList.add("info-bubble")
@ -137,10 +49,11 @@ export const buildHelperInfoNode = (completion, helper) => {
const toSpectrumIcon = name => { const toSpectrumIcon = name => {
return `<svg return `<svg
class="spectrum-Icon spectrum-Icon--sizeM" class="spectrum-Icon spectrum-Icon--sizeS"
focusable="false" focusable="false"
aria-hidden="false" aria-hidden="false"
aria-label="${name}-section-icon" aria-label="${name}-section-icon"
style="color:var(--spectrum-global-color-gray-700)"
> >
<use style="pointer-events: none;" xlink:href="#spectrum-icon-18-${name}" /> <use style="pointer-events: none;" xlink:href="#spectrum-icon-18-${name}" />
</svg>` </svg>`
@ -149,7 +62,9 @@ const toSpectrumIcon = name => {
export const buildSectionHeader = (type, sectionName, icon, rank) => { export const buildSectionHeader = (type, sectionName, icon, rank) => {
const ele = document.createElement("div") const ele = document.createElement("div")
ele.classList.add("info-section") ele.classList.add("info-section")
ele.classList.add(type) if (type) {
ele.classList.add(type)
}
ele.innerHTML = `${toSpectrumIcon(icon)}<span>${sectionName}</span>` ele.innerHTML = `${toSpectrumIcon(icon)}<span>${sectionName}</span>`
return { return {
name: sectionName, name: sectionName,
@ -171,7 +86,7 @@ export const helpersToCompletion = (helpers, mode) => {
}, },
type: "helper", type: "helper",
section: helperSection, section: helperSection,
detail: "FUNCTION", detail: "Function",
apply: (view, completion, from, to) => { apply: (view, completion, from, to) => {
insertBinding(view, from, to, key, mode) insertBinding(view, from, to, key, mode)
}, },

2
packages/builder/src/components/common/bindings/BindingPanel.svelte
View File

@ -332,7 +332,7 @@
/* Tabs */ /* Tabs */
.tabs { .tabs {
padding: var(--spacing-m); padding: var(--spacing-m);
border-bottom: 2px solid transparent; border-bottom: var(--border-light);
} }
.editor-tabs, .editor-tabs,
.side-tabs { .side-tabs {