Skip to content

Commit

Permalink
Add language tooltips (#4237)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RubenRBS
RubenRBS committed Nov 9, 2022
1 parent 8d989c5 commit c7cfda6
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 24 deletions.
4 changes: 3 additions & 1 deletion lib/languages.ts
View file
Expand Up @@ -38,7 +38,8 @@ type DefKeys =
| 'formatter'
| 'logoUrl'
| 'logoUrlDark'
| 'monacoDisassembly';
| 'monacoDisassembly'
| 'tooltip';
type LanguageDefinition = Pick<Language, DefKeys>;

const definitions: Record<LanguageKey, LanguageDefinition> = {
Expand Down Expand Up @@ -85,6 +86,7 @@ const definitions: Record<LanguageKey, LanguageDefinition> = {
formatter: null,
previewFilter: null,
monacoDisassembly: null,
tooltip: 'A collection of asm analysis tools',
},
assembly: {
name: 'Assembly',
Expand Down
37 changes: 19 additions & 18 deletions static/panes/compiler.ts
View file
Expand Up @@ -2289,24 +2289,6 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
this.fullTimingInfo = this.domRoot.find('.full-timing-info');
this.compilerLicenseButton = this.domRoot.find('.compiler-license');
this.setCompilationOptionsPopover(this.compiler ? this.compiler.options : null);
// Dismiss on any click that isn't either in the opening element, inside
// the popover or on any alert
$(document).on('mouseup', e => {
const target = $(e.target);
if (
!target.is(this.prependOptions) &&
this.prependOptions.has(target as unknown as Element).length === 0 &&
target.closest('.popover').length === 0
)
this.prependOptions.popover('hide');

if (
!target.is(this.fullCompilerName) &&
this.fullCompilerName.has(target as unknown as Element).length === 0 &&
target.closest('.popover').length === 0
)
this.fullCompilerName.popover('hide');
});

this.initFilterButtons();

Expand Down Expand Up @@ -2744,6 +2726,25 @@ export class Compiler extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Co
this.eventHub.on('languageChange', this.onLanguageChange, this);

this.eventHub.on('initialised', this.undefer, this);

// Dismiss on any click that isn't either in the opening element, inside
// the popover or on any alert
$(document).on('mouseup', e => {
const target = $(e.target);
if (
!target.is(this.prependOptions) &&
this.prependOptions.has(target as unknown as Element).length === 0 &&
target.closest('.popover').length === 0
)
this.prependOptions.popover('hide');

if (
!target.is(this.fullCompilerName) &&
this.fullCompilerName.has(target as unknown as Element).length === 0 &&
target.closest('.popover').length === 0
)
this.fullCompilerName.popover('hide');
});
}

initCallbacks(): void {
Expand Down
7 changes: 7 additions & 0 deletions static/panes/editor.interfaces.ts
View file
Expand Up @@ -22,6 +22,8 @@
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.

import {Language} from '../../types/languages.interfaces';

export type EditorState = {
filename?: string;
options?: {
Expand All @@ -30,3 +32,8 @@ export type EditorState = {
source?: string;
lang?: string;
};

export type LanguageSelectData = Language & {
logoData?: string;
logoDataDark?: string;
}
40 changes: 35 additions & 5 deletions static/panes/editor.ts
View file
Expand Up @@ -43,7 +43,7 @@ import {MonacoPane} from './pane';
import {Hub} from '../hub';
import {MonacoPaneState} from './pane.interfaces';
import {Container} from 'golden-layout';
import {EditorState} from './editor.interfaces';
import {EditorState, LanguageSelectData} from './editor.interfaces';
import {Language, LanguageKey} from '../../types/languages.interfaces';
import {editor} from 'monaco-editor';
import IModelDeltaDecoration = editor.IModelDeltaDecoration;
Expand Down Expand Up @@ -99,6 +99,7 @@ export class Editor extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Edit
private conformanceViewerButton: JQuery<HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>;
private cppInsightsButton: JQuery<HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>;
private quickBenchButton: JQuery<HTMLElementTagNameMap[keyof HTMLElementTagNameMap]>;
private languageInfoButton: JQuery;
private nothingCtrlSSince?: number;
private nothingCtrlSTimes?: number;
private isCpp: editor.IContextKey<boolean>;
Expand Down Expand Up @@ -551,6 +552,8 @@ export class Editor extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Edit
return this.hub.compilerService.compilersByLang[language?.id ?? ''];
});

this.languageInfoButton = this.domRoot.find('.language-info');
this.languageInfoButton.popover({});
this.languageBtn = this.domRoot.find('.change-language');
this.selectize = new TomSelect(this.languageBtn as any, {
sortField: 'name',
Expand Down Expand Up @@ -1838,6 +1841,7 @@ export class Editor extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Edit
monaco.editor.setModelLanguage(editorModel, this.currentLanguage.monaco);
this.isCpp.set(this.currentLanguage?.id === 'c++');
this.isClean.set(this.currentLanguage?.id === 'clean');
this.updateLanguageTooltip();
this.updateTitle();
this.updateState();
// Broadcast the change to other panels
Expand Down Expand Up @@ -1900,7 +1904,12 @@ export class Editor extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Edit
this.hub.removeEditor(this.id);
}

getSelectizeRenderHtml(data: any, escape: typeof escape_html, width: number, height: number): string {
getSelectizeRenderHtml(
data: LanguageSelectData,
escape: typeof escape_html,
width: number,
height: number
): string {
let result =
'<div class="d-flex" style="align-items: center">' +
'<div class="mr-1 d-flex" style="align-items: center">' +
Expand All @@ -1924,17 +1933,38 @@ export class Editor extends MonacoPane<monaco.editor.IStandaloneCodeEditor, Edit
'px"/>';
}

result += '</div><div>' + escape(data.name) + '</div></div>';
result += '</div><div';
if (data.tooltip) {
result += ' title="' + data.tooltip + '"';
}
result += '>' + escape(data.name) + '</div></div>';
return result;
}

renderSelectizeOption(data: any, escape: typeof escape_html) {
renderSelectizeOption(data: LanguageSelectData, escape: typeof escape_html) {
return this.getSelectizeRenderHtml(data, escape, 23, 23);
}

renderSelectizeItem(data: any, escape: typeof escape_html) {
renderSelectizeItem(data: LanguageSelectData, escape: typeof escape_html) {
return this.getSelectizeRenderHtml(data, escape, 20, 20);
}

onCompiler(compilerId: number, compiler: unknown, options: string, editorId: number, treeId: number): void {}

updateLanguageTooltip() {
this.languageInfoButton.popover('dispose');
if (this.currentLanguage?.tooltip) {
this.languageInfoButton.popover({
title: 'More info about this language',
content: this.currentLanguage.tooltip,
container: 'body',
trigger: 'focus',
placement: 'left',
});
this.languageInfoButton.show();
this.languageInfoButton.prop('title', this.currentLanguage.tooltip);
} else {
this.languageInfoButton.hide();
}
}
}
2 changes: 2 additions & 0 deletions types/languages.interfaces.ts
View file
Expand Up @@ -97,4 +97,6 @@ export interface Language {
previewFilter: RegExp | null;
/** The override for the output (default is "asm") */
monacoDisassembly: string | null;
/** Brief description of the language */
tooltip?: string;
}
3 changes: 3 additions & 0 deletions views/templates/panes/codeEditor.pug
View file
Expand Up @@ -34,7 +34,10 @@ mixin newPaneButton(classId, text, title, label, icon)
.btn-group.btn-group-sm.mx-auto
button.btn.btn-sm.btn-outline-info.ctrlSNothing(disabled=true style="display: none")
span.fas.fa-smile

.btn-group.btn-group-sm.ml-auto(role="group" aria-label="Editor language")
button.btn.btn-sm.language-info
span.fas.fa-info
select.change-language(title="Change this editor's (and associated panels) language" placeholder="Language" disabled=embedded && readOnly)
div.currentCursorPosition
div#v-status
Expand Down

0 comments on commit c7cfda6

Please sign in to comment.