Skip to content

Commit

Permalink
Add icons to languages in dropdown (#3298)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RubenRBS
RubenRBS committed May 12, 2022
1 parent db60af5 commit 5087a9e
Show file tree
Hide file tree
Showing 38 changed files with 1,452 additions and 0 deletions.
44 changes: 44 additions & 0 deletions lib/languages.js
View file
Expand Up @@ -59,230 +59,274 @@ export const languages = {
alias: ['gcc', 'cpp'],
previewFilter: /^\s*#include/,
formatter: 'clangformat',
logoUrl: 'c++.svg',
},
llvm: {
name: 'LLVM IR',
monaco: 'llvm-ir',
extensions: ['.ll'],
alias: [],
logoUrl: 'llvm.png',
},
cppx: {
name: 'Cppx',
monaco: 'cppp',
extensions: ['.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'],
alias: [],
previewFilter: /^\s*#include/,
logoUrl: 'c++.svg',
},
cppx_gold: {
name: 'Cppx-Gold',
monaco: 'cppx-gold',
extensions: ['.usyntax', '.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'],
alias: [],
logoUrl: 'c++.svg', // TODO: Find a better alternative
},
cppx_blue: {
name: 'Cppx-Blue',
monaco: 'cppx-blue',
extensions: ['.blue', '.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'],
alias: [],
logoUrl: 'c++.svg', // TODO: Find a better alternative
},
c: {
name: 'C',
monaco: 'nc',
extensions: ['.c', '.h'],
alias: [],
previewFilter: /^\s*#include/,
logoUrl: 'c.svg',
},
openclc: {
name: 'OpenCL C',
monaco: 'openclc',
extensions: ['.cl', '.ocl'],
alias: [],
logoUrl: 'opencl.svg',
logoUrlDark: 'opencl-dark.svg',
},
cpp_for_opencl: {
name: 'C++ for OpenCL',
monaco: 'cpp-for-opencl',
extensions: ['.clcpp', '.cl', '.ocl'],
alias: [],
logoUrl: 'opencl.svg', // TODO: Find a better alternative
logoUrlDark: 'opencl-dark.svg',
},
rust: {
name: 'Rust',
monaco: 'rust',
extensions: ['.rs'],
alias: [],
formatter: 'rustfmt',
logoUrl: 'rust.svg',
logoUrlDark: 'rust-dark.svg',
},
d: {
name: 'D',
monaco: 'd',
extensions: ['.d'],
alias: [],
logoUrl: 'd.svg',
},
erlang: {
name: 'Erlang',
monaco: 'erlang',
extensions: ['.erl', '.hrl'],
alias: [],
logoUrl: 'erlang.svg',
},
go: {
name: 'Go',
monaco: 'go',
extensions: ['.go'],
alias: [],
logoUrl: 'go.svg',
},
ispc: {
name: 'ispc',
monaco: 'ispc',
extensions: ['.ispc'],
alias: [],
logoUrl: 'ispc.png',
},
haskell: {
name: 'Haskell',
monaco: 'haskell',
extensions: ['.hs', '.haskell'],
alias: [],
logoUrl: 'haskell.png',
},
java: {
name: 'Java',
monaco: 'java',
extensions: ['.java'],
alias: [],
logoUrl: 'java.svg',
},
kotlin: {
name: 'Kotlin',
monaco: 'kotlin',
extensions: ['.kt'],
alias: [],
logoUrl: 'kotlin.png',
},
scala: {
name: 'Scala',
monaco: 'scala',
extensions: ['.scala'],
alias: [],
logoUrl: 'scala.png',
},
ocaml: {
name: 'OCaml',
monaco: 'ocaml',
extensions: ['.ml', '.mli'],
alias: [],
logoUrl: 'ocaml.svg',
},
python: {
name: 'Python',
monaco: 'python',
extensions: ['.py'],
alias: [],
logoUrl: 'python.svg',
},
swift: {
name: 'Swift',
monaco: 'swift',
extensions: ['.swift'],
alias: [],
logoUrl: 'swift.svg',
},
pascal: {
name: 'Pascal',
monaco: 'pascal',
extensions: ['.pas', '.dpr'],
alias: [],
logoUrl: 'pascal.svg', // TODO: Find a better alternative
logoUrlDark: 'pascal-dark.svg',
},
fortran: {
id: 'fortran',
name: 'Fortran',
monaco: 'fortran',
extensions: ['.f90', '.F90', '.f95', '.F95', '.f'],
alias: [],
logoUrl: 'fortran.svg',
},
assembly: {
name: 'Assembly',
monaco: 'asm',
extensions: ['.asm'],
alias: ['asm'],
logoUrl: 'assembly.png', // TODO: Find a better alternative
},
analysis: {
name: 'Analysis',
monaco: 'asm',
extensions: ['.asm'], // maybe add more? Change to a unique one?
alias: ['tool', 'tools'],
logoUrl: 'analysis.png', // TODO: Find a better alternative
},
cuda: {
name: 'CUDA C++',
monaco: 'cuda',
extensions: ['.cu'],
alias: ['nvcc'],
monacoDisassembly: 'ptx',
logoUrl: 'cuda.svg',
logoUrlDark: 'cuda-dark.svg',
},
zig: {
name: 'Zig',
monaco: 'zig',
extensions: ['.zig'],
alias: [],
logoUrl: 'zig.svg',
},
clean: {
name: 'Clean',
monaco: 'clean',
extensions: ['.icl'],
alias: [],
logoUrl: 'clean.svg', // TODO: Find a better alternative
},
ada: {
name: 'Ada',
monaco: 'ada',
extensions: ['.adb', '.ads'],
alias: [],
logoUrl: 'ada.svg',
logoUrlDark: 'ada-dark.svg',
},
nim: {
name: 'Nim',
monaco: 'nim',
extensions: ['.nim'],
alias: [],
logoUrl: 'nim.svg',
},
crystal: {
name: 'Crystal',
monaco: 'crystal',
extensions: ['.cr'],
alias: [],
logoUrl: 'crystal.svg',
logoUrlDark: 'crystal-dark.svg',
},
circle: {
name: 'C++ (Circle)',
monaco: 'cppcircle',
extensions: ['.cpp', '.cxx', '.h', '.hpp', '.hxx', '.c'],
alias: [],
previewFilter: /^\s*#include/,
logoUrl: 'c++.svg', // TODO: Find a better alternative
},
ruby: {
name: 'Ruby',
monaco: 'ruby',
extensions: ['.rb'],
alias: [],
monacoDisassembly: 'asmruby',
logoUrl: 'ruby.svg',
},
cmake: {
name: 'CMake',
monaco: 'cmake',
extensions: ['.txt'],
alias: [],
logoUrl: 'cmake.svg',
},
csharp: {
name: 'C#',
monaco: 'csharp',
extensions: ['.cs'],
alias: [],
logoUrl: 'dotnet.svg',
},
fsharp: {
name: 'F#',
monaco: 'fsharp',
extensions: ['.fs'],
alias: [],
logoUrl: 'fsharp.svg',
},
vb: {
name: 'Visual Basic',
monaco: 'vb',
extensions: ['.vb'],
alias: [],
logoUrl: 'dotnet.svg',
},
dart: {
name: 'Dart',
monaco: 'dart',
extensions: ['.dart'],
alias: [],
formatter: 'dartformat',
logoUrl: 'dart.svg',
},
typescript: {
name: 'TypeScript',
Expand Down
21 changes: 21 additions & 0 deletions static/main.js
View file
Expand Up @@ -52,6 +52,12 @@ var HistoryWidget = require('./widgets/history-widget').HistoryWidget;
var History = require('./history');
var Presentation = require('./presentation').Presentation;

var logos = require.context(
'../views/resources/logos',
false,
/\.(png|svg)$/
);

if (!window.PRODUCTION) {
require('./tests/_all');
}
Expand Down Expand Up @@ -436,6 +442,19 @@ function removeOrphanedMaximisedItemFromConfig(config) {
}
}

function setupLanguageLogos(languages) {
_.each(languages, function (lang) {
try {
lang.logoData = logos('./' + lang.logoUrl);
if (lang.logoUrlDark) {
lang.logoDataDark = logos('./' + lang.logoUrlDark);
}
} catch (ignored) {
lang.logoData = '';
}
}, this);
}

// eslint-disable-next-line max-statements
function start() {
initializeResetLayoutLink();
Expand Down Expand Up @@ -463,6 +482,8 @@ function start() {
}
}

setupLanguageLogos(options.languages);

// Cookie domains are matched as a RE against the window location. This allows a flexible
// way that works across multiple domains (e.g. godbolt.org and compiler-explorer.com).
// We allow this to be configurable so that (for example), gcc.godbolt.org and d.godbolt.org
Expand Down
26 changes: 26 additions & 0 deletions static/panes/editor.js
View file
Expand Up @@ -148,6 +148,10 @@ function Editor(hub, state, container) {
plugins: ['dropdown_input'],
onChange: _.bind(this.onLanguageChange, this),
closeAfterSelect: true,
render: {
option: renderSelectizeOption,
item: renderSelectizeItem,
},
});

// We suppress posting changes until the user has stopped typing by:
Expand Down Expand Up @@ -1660,6 +1664,28 @@ Editor.prototype.close = function () {
this.hub.removeEditor(this.id);
};

function getSelectizeRenderHtml(data, escape, width, height) {
var result = '<div class="d-flex" style="align-items: center">' +
'<div class="mr-1">' +
'<img src="' + data.logoData
+ '" class="' + (data.logoDataDark ? 'theme-light-only' : '')
+ '" width="' + width + '" style="max-height: ' + height + 'px"/>';
if (data.logoDataDark) {
result += '<img src="' + data.logoDataDark
+ '" class="theme-dark-only" width="' + width + '" style="max-height: ' + height + 'px"/>';
}
result += '</div><div>' + escape(data.name) + '</div></div>';
return result;
}

function renderSelectizeOption(data, escape) {
return getSelectizeRenderHtml(data, escape, 23, 23);
}

function renderSelectizeItem(data, escape) {
return getSelectizeRenderHtml(data, escape, 20, 20);
}

module.exports = {
Editor: Editor,
};

0 comments on commit 5087a9e

Please sign in to comment.