Suggestion to condense the modal view for selecting callouts

[andrew-m-j]

I just installed the plugin and think its a great solution to remembering callouts - I had the same trouble.

I wanted to suggest condensing the pop-up view that suggests callout types. The current view (at least for me) only shows four types of callout. I know you can start to type and match an option, but scrolling through the list isn't very helpful given the height. It seems like there is quite a bit of room around the icons and text.

I'm not sure how the modal is rendered, but is this possible to change via html or css somewhere?

[cwfryer]

The items in the callout modal are rendered using the HTML component constructor in src/suggest/callout-suggest.ts lines 127-144.

public constructor(containerEl: HTMLElement, options: CalloutCompletion) {
    super();
    const { icon, label } = options;

    const frag = document.createDocumentFragment();

    // Build the callout.
    const calloutEl = (this.calloutEl = frag.createDiv({ cls: ['callout', 'calloutmanager-preview'] }));
    const titleElContainer = calloutEl.createDiv({ cls: 'callout-title' });
    this.iconEl = titleElContainer.createDiv({ cls: 'callout-icon' });
    const titleEl = (this.titleEl = titleElContainer.createDiv({ cls: 'callout-title-inner' }));
    titleEl.textContent = label;
    this.setIcon(icon);
    this.setCalloutID(label);

    // Attach to the container.
    CalloutPreviewComponent.prototype.attachTo.call(this, containerEl);
}

It doesn't do anything special, it just sets the classes of the components of the callout to be rendered (title, icon, the callout itself, etc) and then lets your theme render them accordingly.

I like it how it is so I don't intend to make any changes, but feel free to edit it how you like it. Whatever you change in the constructor is what's going to be rendered.

If you want to edit the plugin directly without having to compile it from typescript, I found the constructor on lines 911-923 of main.js

You could also write some complicated custom CSS snippets to accomplish what you want, but it's probably easier to just edit the constructor and take out / change the classes that are applied.