obsidian-plugin/fbarrca_obsidian-inlineAI
1
0
Fork 0
mirror of https://github.com/fbarrca/obsidian-inlineAI.git synced 2026-07-22 11:50:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve the styling of the command completions

Browse source
This commit is contained in:
Barrca 2025-05-12 23:36:58 +02:00
parent 51c4121e57
commit eea1bfc4fa
2 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/modules/commands/source.ts
View file

@ -38,12 +38,14 @@ function createSlashCommandSource(options: {
// Create the extension that uses our custom completion source.
export function slashCommandAutocompletion(options: { prefix: string, customCommands: SlashCommand[] } = { prefix: '/', customCommands: [] }) {
return autocompletion({
override: [createSlashCommandSource(options)]
override: [createSlashCommandSource(options)],
tooltipClass: () => "tooltip-autocomplete",
optionClass: () => "completion-label",
})
}
// Create a decoration for highlighting slash commands
const slashCommandMark = Decoration.mark({ class: "cm-slashCommand" })
const slashCommandMark = Decoration.mark({ class: "cm-slash-command" })
export function createSlashCommandHighlighter({ prefix, customCommands }: { prefix: string, customCommands: SlashCommand[] }) {
return ViewPlugin.fromClass(class {

31
styles.css
View file

@ -118,25 +118,34 @@
height: 10em;
}
/* Custom reccomendations */
.cm-tooltip-autocomplete {
background-color: var(--background-secondary) !important;
.tooltip-autocomplete{
background-color: var(--background-primary-alt) !important;
color: var(--text-normal) !important;
font-size: var(--font-ui-small) !important;
}
.cm-tooltip.cm-tooltip-below{
top: auto !important;
bottom: -2.2rem !important;
width: min(102%, var(--line-width)) !important;
margin-left: -1.1rem;
overflow: hidden;
border: 1px solid var(--background-modifier-border) !important;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.cm-completionLabel{
.completion-label{
font-size: var(--font-ui-small);
font-weight: var(--font-normal);
font-family: var(--font-interface-theme);
border-radius: 4px;
margin-left: -1em;
}
.cm-tooltip.cm-tooltip-below {
top: 100%;
margin-top: 0.8em;
bottom: auto;
}
/* Slash command highlighting */
.cm-slashCommand {
.cm-slash-command {
color: var(--text-accent);
}