From c7cfda6a3fe61894e8604d21678a2f07dbc64dcb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rub=C3=A9n=20Rinc=C3=B3n=20Blanco?= Date: Wed, 9 Nov 2022 02:53:04 +0100 Subject: [PATCH] Add language tooltips (#4237) --- lib/languages.ts | 4 ++- static/panes/compiler.ts | 37 ++++++++++++------------- static/panes/editor.interfaces.ts | 7 +++++ static/panes/editor.ts | 40 ++++++++++++++++++++++++---- types/languages.interfaces.ts | 2 ++ views/templates/panes/codeEditor.pug | 3 +++ 6 files changed, 69 insertions(+), 24 deletions(-) diff --git a/lib/languages.ts b/lib/languages.ts index 78cd7789467..a3a61eea93f 100644 --- a/lib/languages.ts +++ b/lib/languages.ts @@ -38,7 +38,8 @@ type DefKeys = | 'formatter' | 'logoUrl' | 'logoUrlDark' - | 'monacoDisassembly'; + | 'monacoDisassembly' + | 'tooltip'; type LanguageDefinition = Pick; const definitions: Record = { @@ -85,6 +86,7 @@ const definitions: Record = { formatter: null, previewFilter: null, monacoDisassembly: null, + tooltip: 'A collection of asm analysis tools', }, assembly: { name: 'Assembly', diff --git a/static/panes/compiler.ts b/static/panes/compiler.ts index 0a29f3b44de..8dcf6e81e85 100644 --- a/static/panes/compiler.ts +++ b/static/panes/compiler.ts @@ -2289,24 +2289,6 @@ export class Compiler extends MonacoPane { - 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(); @@ -2744,6 +2726,25 @@ export class Compiler extends MonacoPane { + 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 { diff --git a/static/panes/editor.interfaces.ts b/static/panes/editor.interfaces.ts index 946e1f0af18..1fe06db0e33 100644 --- a/static/panes/editor.interfaces.ts +++ b/static/panes/editor.interfaces.ts @@ -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?: { @@ -30,3 +32,8 @@ export type EditorState = { source?: string; lang?: string; }; + +export type LanguageSelectData = Language & { + logoData?: string; + logoDataDark?: string; +} diff --git a/static/panes/editor.ts b/static/panes/editor.ts index 6ae3f487c9e..decacb688cb 100644 --- a/static/panes/editor.ts +++ b/static/panes/editor.ts @@ -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; @@ -99,6 +99,7 @@ export class Editor extends MonacoPane; private cppInsightsButton: JQuery; private quickBenchButton: JQuery; + private languageInfoButton: JQuery; private nothingCtrlSSince?: number; private nothingCtrlSTimes?: number; private isCpp: editor.IContextKey; @@ -551,6 +552,8 @@ export class Editor extends MonacoPane' + @@ -1924,17 +1933,38 @@ export class Editor extends MonacoPane'; } - result += '
' + escape(data.name) + '
'; + result += ''; 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(); + } + } } diff --git a/types/languages.interfaces.ts b/types/languages.interfaces.ts index 4bae853861b..cf0cf3cf9e2 100644 --- a/types/languages.interfaces.ts +++ b/types/languages.interfaces.ts @@ -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; } diff --git a/views/templates/panes/codeEditor.pug b/views/templates/panes/codeEditor.pug index 9cc4e7a2422..f66e4e1d5be 100644 --- a/views/templates/panes/codeEditor.pug +++ b/views/templates/panes/codeEditor.pug @@ -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