diff --git a/src/CodeSnippetDisplay.tsx b/src/CodeSnippetDisplay.tsx index bab96f3..6c2c368 100644 --- a/src/CodeSnippetDisplay.tsx +++ b/src/CodeSnippetDisplay.tsx @@ -3,7 +3,13 @@ import { PathExt } from '@jupyterlab/coreutils'; import { DocumentWidget } from '@jupyterlab/docregistry'; import { FileEditor } from '@jupyterlab/fileeditor'; import { Notebook, NotebookPanel } from '@jupyterlab/notebook'; -import { LabIcon, addIcon } from '@jupyterlab/ui-components'; +import { + LabIcon, + addIcon, + pythonIcon, + fileIcon, + rKernelIcon +} from '@jupyterlab/ui-components'; import { CodeEditor, IEditorServices } from '@jupyterlab/codeeditor'; import * as nbformat from '@jupyterlab/nbformat'; import { JupyterFrontEnd } from '@jupyterlab/application'; @@ -24,7 +30,6 @@ import React from 'react'; import { CodeSnippetWidgetModel } from './CodeSnippetWidgetModel'; import { FilterTools } from './FilterTools'; -import moreSVGstr from '../style/icon/jupyter_moreicon.svg'; import { showPreview } from './PreviewSnippet'; import { showMoreOptions } from './MoreOptions'; import { @@ -32,6 +37,45 @@ import { CodeSnippetContentsService } from './CodeSnippetContentsService'; +import moreSVGstr from '../style/icon/jupyter_moreicon.svg'; +import { + babelIcon, + javaIcon, + juliaIcon, + matlabIcon, + schemeIcon, + processingIcon, + scalaIcon, + groovyIcon, + forthIcon, + haskellIcon, + rubyIcon, + typescriptIcon, + javascriptIcon, + coffeescriptIcon, + livescriptIcon, + csharpIcon, + fsharpIcon, + goIcon, + erlangIcon, + ocamlIcon, + fortranIcon, + perlIcon, + phpIcon, + clojureIcon, + luaIcon, + purescriptIcon, + cppIcon, + prologIcon, + lispIcon, + cIcon, + kotlinIcon, + nodejsIcon, + coconutIcon, + sbtIcon, + rustIcon, + qsharpIcon +} from './CodeSnippetLanguages'; /** * The CSS class added to code snippet widget. */ @@ -77,7 +121,7 @@ const JUPYTER_CELL_MIME = 'application/vnd.jupyter.cells'; * Icon for more options */ const moreOptionsIcon = new LabIcon({ - name: 'custom-ui-compnents:moreOptions', + name: 'custom-ui-components:moreOptions', svgstr: moreSVGstr }); @@ -245,28 +289,40 @@ export class CodeSnippetDisplay extends React.Component< // Bold text in snippet name based on search private boldNameOnSearch = ( - filter: string, - displayed: string + searchValue: string, + language: string, + name: string ): JSX.Element => { - const name: string = displayed; + const displayName = language + name; + if ( - filter !== '' && - displayed.toLowerCase().includes(filter.toLowerCase()) + searchValue !== '' && + displayName.toLowerCase().includes(searchValue.toLowerCase()) ) { - const startIndex: number = name + const startIndex: number = displayName .toLowerCase() - .indexOf(filter.toLowerCase()); - const endIndex: number = startIndex + filter.length; - const start = name.substring(0, startIndex); - const bolded = name.substring(startIndex, endIndex); - const end = name.substring(endIndex); - return ( - - {start} - {bolded} - {end} - - ); + .indexOf(searchValue.toLowerCase()); + + // Pythonlanguage + // if (startIndex > language.length - 1) { + // } + const endIndex: number = startIndex + searchValue.length; + console.log(endIndex); + console.log(language.length); + if (endIndex <= language.length) { + return {name}; + } else { + const start = displayName.substring(language.length, startIndex); + const bolded = displayName.substring(startIndex, endIndex); + const end = displayName.substring(endIndex); + return ( + + {start} + {bolded} + {end} + + ); + } } return {name}; }; @@ -444,6 +500,439 @@ export class CodeSnippetDisplay extends React.Component< ); } + private renderLanguageIcon(language: string): JSX.Element { + switch (language) { + case 'Python': { + return ( + + ); + } + case 'Java': { + return ( + + ); + } + case 'R': { + return ( + + ); + } + case 'Julia': { + return ( + + ); + } + case 'Matlab': { + return ( + + ); + } + case 'Scheme': { + return ( + + ); + } + case 'Processing': { + return ( + + ); + } + case 'Scala': { + return ( + + ); + } + case 'Groovy': { + return ( + + ); + } + case 'Fortran': { + return ( + + ); + } + case 'Haskell': { + return ( + + ); + } + case 'Ruby': { + return ( + + ); + } + case 'TypeScript': { + return ( + + ); + } + case 'JavaScript': { + return ( + + ); + } + case 'CoffeeScript': { + return ( + + ); + } + case 'LiveScript': { + return ( + + ); + } + case 'C#': { + return ( + + ); + } + case 'F#': { + return ( + + ); + } + case 'Go': { + return ( + + ); + } + case 'Erlang': { + return ( + + ); + } + case 'OCaml': { + return ( + + ); + } + case 'Forth': { + return ( + + ); + } + case 'Perl': { + return ( + + ); + } + case 'PHP': { + return ( + + ); + } + case 'Clojure': { + return ( + + ); + } + case 'Lua': { + return ( + + ); + } + case 'PureScript': { + return ( + + ); + } + case 'C++': { + return ( + + ); + } + case 'Prolog': { + return ( + + ); + } + case 'Common Lisp': { + return ( + + ); + } + case 'C': { + return ( + + ); + } + case 'Kotlin': { + return ( + + ); + } + case 'NodeJS': { + return ( + + ); + } + case 'Coconut': { + return ( + + ); + } + case 'Babel': { + return ( + + ); + } + case 'sbt': { + return ( + + ); + } + case 'Rust': { + return ( + + ); + } + case 'Q#': { + return ( + + ); + } + default: { + return ( + + ); + } + } + } // Render display of code snippet list private renderCodeSnippet = ( codeSnippet: ICodeSnippet, @@ -451,6 +940,8 @@ export class CodeSnippetDisplay extends React.Component< ): JSX.Element => { const buttonClasses = BUTTON_CLASS; const displayName = '[' + codeSnippet.language + '] ' + codeSnippet.name; + const name = codeSnippet.name; + const language = codeSnippet.language; const actionButtons = [ { @@ -508,7 +999,8 @@ export class CodeSnippetDisplay extends React.Component< title={codeSnippet.name} className={DISPLAY_NAME_CLASS} > - {this.boldNameOnSearch(this.state.searchValue, displayName)} + {this.renderLanguageIcon(codeSnippet.language)} + {this.boldNameOnSearch(this.state.searchValue, language, name)}
{actionButtons.map(btn => { diff --git a/src/CodeSnippetEditor.tsx b/src/CodeSnippetEditor.tsx index 231e434..4bcdadd 100644 --- a/src/CodeSnippetEditor.tsx +++ b/src/CodeSnippetEditor.tsx @@ -14,7 +14,7 @@ import React from 'react'; import { CodeSnippetContentsService } from './CodeSnippetContentsService'; import { CodeSnippetWidget } from './CodeSnippetWidget'; -import { SUPPORTED_LANGUAGES } from './index'; +import { SUPPORTED_LANGUAGES } from './CodeSnippetLanguages'; import { CodeSnippetEditorTags } from './CodeSnippetEditorTags'; /** @@ -323,10 +323,18 @@ export class CodeSnippetEditor extends ReactWidget { message += 'Name must be filled out\n'; status = false; } + if (name.match(/[^a-z0-9_]+/)) { + message += 'Wrong format of the name\n'; + status = false; + } if (description === '') { message += 'Description must be filled out\n'; status = false; } + if (description.match(/[^a-zA-Z0-9_ ,.?!]+/)) { + message += 'Wrong format of the description\n'; + status = false; + } if (language === '') { message += 'Language must be filled out'; status = false; @@ -457,6 +465,13 @@ export class CodeSnippetEditor extends ReactWidget { this.saved = false; } + handleOnBlur(event: React.FocusEvent): void { + const target = event.target as HTMLElement; + if (!target.classList.contains('touched')) { + target.classList.add('touched'); + } + } + /** * TODO: clean CSS style class - "Use constant" */ @@ -527,6 +542,7 @@ export class CodeSnippetEditor extends ReactWidget { onChange={(event: React.ChangeEvent): void => { this.handleInputFieldChange(event); }} + onBlur={this.handleOnBlur} >

{ @@ -549,6 +565,7 @@ export class CodeSnippetEditor extends ReactWidget { onChange={(event: React.ChangeEvent): void => { this.handleInputFieldChange(event); }} + onBlur={this.handleOnBlur} >

{ @@ -569,7 +586,7 @@ export class CodeSnippetEditor extends ReactWidget { Code {this.renderCodeInput()}

); diff --git a/src/CodeSnippetInputDialog.ts b/src/CodeSnippetInputDialog.ts index 1eb5d02..792302e 100644 --- a/src/CodeSnippetInputDialog.ts +++ b/src/CodeSnippetInputDialog.ts @@ -12,7 +12,7 @@ import { import { CodeSnippetWidget } from './CodeSnippetWidget'; import { CodeSnippetWidgetModel } from './CodeSnippetWidgetModel'; -import { SUPPORTED_LANGUAGES } from './index'; +import { SUPPORTED_LANGUAGES } from './CodeSnippetLanguages'; import { showMessage } from './ConfirmMessage'; import { showCodeSnippetForm, CodeSnippetForm } from './CodeSnippetForm'; @@ -214,20 +214,29 @@ export function validateForm( const name = input.value[0]; const description = input.value[1]; const language = input.value[2]; + if (name === '') { message += 'Name must be filled out\n'; status = false; } + if (name.match(/[^a-z0-9_]+/)) { + message += 'Wrong format of the name\n'; + status = false; + } if (description === '') { message += 'Description must be filled out\n'; status = false; } + if (description.match(/[^a-zA-Z0-9_ ,.?!]+/)) { + message += 'Wrong format of the description\n'; + status = false; + } if (language === '') { message += 'Language must be filled out'; status = false; } if (!SUPPORTED_LANGUAGES.includes(language)) { - message += '\nLanguage must be one of the options'; + message += 'Language must be one of the options'; status = false; } if (status === false) { @@ -278,6 +287,13 @@ class Private { static selectedTags: string[] = []; static allTags: string[]; + static handleOnBlur(event: Event): void { + const target = event.target as HTMLElement; + if (!target.classList.contains('touched')) { + target.classList.add('touched'); + } + } + /** * Create the node for a rename handler. This is what's creating all of the elements to be displayed. */ @@ -300,6 +316,7 @@ class Private { name.className = CODE_SNIPPET_DIALOG_INPUT; name.required = true; name.pattern = '[a-zA-Z0-9_]+'; + name.onblur = Private.handleOnBlur; const descriptionTitle = document.createElement('label'); descriptionTitle.textContent = 'Description*'; @@ -307,6 +324,7 @@ class Private { description.className = CODE_SNIPPET_DIALOG_INPUT; description.required = true; description.pattern = '[a-zA-Z0-9_ ,.?!]+'; + description.onblur = Private.handleOnBlur; const languageTitle = document.createElement('label'); languageTitle.textContent = 'Language*'; @@ -316,6 +334,7 @@ class Private { languageInput.required = true; const languageOption = document.createElement('datalist'); languageOption.id = 'languages'; + languageOption.onblur = Private.handleOnBlur; SUPPORTED_LANGUAGES.sort(); for (const language of SUPPORTED_LANGUAGES) { diff --git a/src/CodeSnippetLanguages.ts b/src/CodeSnippetLanguages.ts new file mode 100644 index 0000000..a17c7db --- /dev/null +++ b/src/CodeSnippetLanguages.ts @@ -0,0 +1,287 @@ +import { LabIcon } from '@jupyterlab/ui-components'; + +import babelSVGstr from '../style/icon/language_icons/babel.svg'; +import cSVGstr from '../style/icon/language_icons/c.svg'; +import clojureSVGstr from '../style/icon/language_icons/clojure.svg'; +import coconutSVGstr from '../style/icon/language_icons/coconut.svg'; +import coffeescriptSVGstr from '../style/icon/language_icons/coffeescript.svg'; +import cppSVGstr from '../style/icon/language_icons/cpp.svg'; +import csharpSVGstr from '../style/icon/language_icons/csharp.svg'; +import erlangSVGstr from '../style/icon/language_icons/erlang.svg'; +import forthSVGstr from '../style/icon/language_icons/forth.svg'; +import fortranSVGstr from '../style/icon/language_icons/fortran.svg'; +import fsharpSVGstr from '../style/icon/language_icons/fsharp.svg'; +import goSVGstr from '../style/icon/language_icons/go.svg'; +import groovySVGstr from '../style/icon/language_icons/groovy.svg'; +import haskellSVGstr from '../style/icon/language_icons/haskell.svg'; +import javaSVGstr from '../style/icon/language_icons/java.svg'; +import javascriptSVGstr from '../style/icon/language_icons/javascript.svg'; +import juliaSVGstr from '../style/icon/language_icons/julia.svg'; +import kotlinSVGstr from '../style/icon/language_icons/kotlin.svg'; +import lispSVGstr from '../style/icon/language_icons/lisp.svg'; +import livescriptSVGstr from '../style/icon/language_icons/livescript.svg'; +import luaSVGstr from '../style/icon/language_icons/lua.svg'; +import matlabSVGstr from '../style/icon/language_icons/matlab.svg'; +import nodejsSVGstr from '../style/icon/language_icons/nodejs.svg'; +import ocamlSVGstr from '../style/icon/language_icons/ocaml.svg'; +import perlSVGstr from '../style/icon/language_icons/perl.svg'; +import phpSVGstr from '../style/icon/language_icons/php.svg'; +import processingSVGstr from '../style/icon/language_icons/processing.svg'; +import prologSVGstr from '../style/icon/language_icons/prolog.svg'; +import purescriptSVGstr from '../style/icon/language_icons/purescript.svg'; +import qsharpSVGstr from '../style/icon/language_icons/qsharp.svg'; +import rubySVGstr from '../style/icon/language_icons/ruby.svg'; +import rustSVGstr from '../style/icon/language_icons/rust.svg'; +import sbtSVGstr from '../style/icon/language_icons/sbt.svg'; +import scalaSVGstr from '../style/icon/language_icons/scala.svg'; +import schemeSVGstr from '../style/icon/language_icons/scheme.svg'; +import typescriptSVGstr from '../style/icon/language_icons/typescript.svg'; + +/** + * List of languages supported by JupyterLab + */ +export const SUPPORTED_LANGUAGES = [ + 'Python', + 'Java', + 'R', + 'Julia', + 'Matlab', + 'Octave', + 'Scheme', + 'Processing', + 'Scala', + 'Groovy', + 'Agda', + 'Fortran', + 'Haskell', + 'Ruby', + 'TypeScript', + 'JavaScript', + 'CoffeeScript', + 'LiveScript', + 'C#', + 'F#', + 'Go', + 'Galileo', + 'Erlang', + 'PARI/GP', + 'Aldor', + 'OCaml', + 'Forth', + 'Perl', + 'PHP', + 'Scilab', + 'bash', + 'zsh', + 'Clojure', + 'Hy', + 'Lua', + 'PureScript', + 'Q', + 'Cryptol', + 'C++', + 'Xonsh', + 'Prolog', + 'Common Lisp', + 'Maxima', + 'C', + 'Kotlin', + 'Pike', + 'NodeJS', + 'Singular', + 'TaQL', + 'Coconut', + 'Babel', + 'Clojurescript', + 'sbt', + 'Guile', + 'Stata', + 'Racekt', + 'SQL', + 'HiveQL', + 'Rust', + 'Rascal', + 'Q#' +]; + +/** + * Language icons + */ +export const babelIcon = new LabIcon({ + name: 'custom-ui-components:babel', + svgstr: babelSVGstr +}); + +export const javaIcon = new LabIcon({ + name: 'custom-ui-components:java', + svgstr: javaSVGstr +}); + +export const juliaIcon = new LabIcon({ + name: 'custom-ui-components:julia', + svgstr: juliaSVGstr +}); + +export const matlabIcon = new LabIcon({ + name: 'custom-ui-components:matlab', + svgstr: matlabSVGstr +}); + +export const schemeIcon = new LabIcon({ + name: 'custom-ui-components:scheme', + svgstr: schemeSVGstr +}); + +export const processingIcon = new LabIcon({ + name: 'custom-ui-components:processing', + svgstr: processingSVGstr +}); + +export const scalaIcon = new LabIcon({ + name: 'custom-ui-components:scala', + svgstr: scalaSVGstr +}); + +export const groovyIcon = new LabIcon({ + name: 'custom-ui-components:groovy', + svgstr: groovySVGstr +}); + +export const fortranIcon = new LabIcon({ + name: 'custom-ui-components:fortran', + svgstr: fortranSVGstr +}); + +export const haskellIcon = new LabIcon({ + name: 'custom-ui-components:haskell', + svgstr: haskellSVGstr +}); + +export const rubyIcon = new LabIcon({ + name: 'custom-ui-components:ruby', + svgstr: rubySVGstr +}); + +export const typescriptIcon = new LabIcon({ + name: 'custom-ui-components:typescript', + svgstr: typescriptSVGstr +}); + +export const javascriptIcon = new LabIcon({ + name: 'custom-ui-components:javascript', + svgstr: javascriptSVGstr +}); + +export const coffeescriptIcon = new LabIcon({ + name: 'custom-ui-components:coffeescript', + svgstr: coffeescriptSVGstr +}); + +export const livescriptIcon = new LabIcon({ + name: 'custom-ui-components:livescript', + svgstr: livescriptSVGstr +}); +export const csharpIcon = new LabIcon({ + name: 'custom-ui-components:csharp', + svgstr: csharpSVGstr +}); + +export const fsharpIcon = new LabIcon({ + name: 'custom-ui-components:fsharp', + svgstr: fsharpSVGstr +}); + +export const goIcon = new LabIcon({ + name: 'custom-ui-components:go', + svgstr: goSVGstr +}); + +export const erlangIcon = new LabIcon({ + name: 'custom-ui-components:erlang', + svgstr: erlangSVGstr +}); + +export const ocamlIcon = new LabIcon({ + name: 'custom-ui-components:ocaml', + svgstr: ocamlSVGstr +}); + +export const forthIcon = new LabIcon({ + name: 'custom-ui-components:forth', + svgstr: forthSVGstr +}); + +export const perlIcon = new LabIcon({ + name: 'custom-ui-components:perl', + svgstr: perlSVGstr +}); + +export const phpIcon = new LabIcon({ + name: 'custom-ui-components:php', + svgstr: phpSVGstr +}); + +export const clojureIcon = new LabIcon({ + name: 'custom-ui-components:clojure', + svgstr: clojureSVGstr +}); + +export const luaIcon = new LabIcon({ + name: 'custom-ui-components:lua', + svgstr: luaSVGstr +}); + +export const purescriptIcon = new LabIcon({ + name: 'custom-ui-components:purescript', + svgstr: purescriptSVGstr +}); + +export const cppIcon = new LabIcon({ + name: 'custom-ui-components:cpp', + svgstr: cppSVGstr +}); + +export const prologIcon = new LabIcon({ + name: 'custom-ui-components:prolog', + svgstr: prologSVGstr +}); + +export const lispIcon = new LabIcon({ + name: 'custom-ui-components:lisp', + svgstr: lispSVGstr +}); + +export const cIcon = new LabIcon({ + name: 'custom-ui-components:c', + svgstr: cSVGstr +}); + +export const kotlinIcon = new LabIcon({ + name: 'custom-ui-components:kotlin', + svgstr: kotlinSVGstr +}); + +export const nodejsIcon = new LabIcon({ + name: 'custom-ui-components:nodejs', + svgstr: nodejsSVGstr +}); + +export const coconutIcon = new LabIcon({ + name: 'custom-ui-components:coconut', + svgstr: coconutSVGstr +}); + +export const sbtIcon = new LabIcon({ + name: 'custom-ui-components:sbt', + svgstr: sbtSVGstr +}); + +export const rustIcon = new LabIcon({ + name: 'custom-ui-components:rust', + svgstr: rustSVGstr +}); + +export const qsharpIcon = new LabIcon({ + name: 'custom-ui-components:qsharp', + svgstr: qsharpSVGstr +}); diff --git a/src/index.ts b/src/index.ts index ef934ca..d9fd34e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -23,73 +23,6 @@ import { const CODE_SNIPPET_EXTENSION_ID = 'code-snippet-extension'; -/** - * List of languages supported by JupyterLab - */ -export const SUPPORTED_LANGUAGES = [ - 'Python', - 'Java', - 'R', - 'Julia', - 'Matlab', - 'Octave', - 'Scheme', - 'Processing', - 'Scala', - 'Groovy', - 'Agda', - 'Fortran', - 'Haskell', - 'Ruby', - 'TypeScript', - 'JavaScript', - 'CoffeeScript', - 'LiveScript', - 'C#', - 'F#', - 'Go', - 'Galileo', - 'Erlang', - 'PARI/GP', - 'Aldor', - 'OCaml', - 'Forth', - 'Perl', - 'PHP', - 'Scilab', - 'bash', - 'zsh', - 'Clojure', - 'Hy', - 'Lua', - 'PureScript', - 'Q', - 'Cryptol', - 'C++', - 'Xonsh', - 'Prolog', - 'Common Lisp', - 'Maxima', - 'C', - 'Kotlin', - 'Pike', - 'NodeJS', - 'Singular', - 'TaQL', - 'Coconut', - 'Babel', - 'Clojurescript', - 'sbt', - 'Guile', - 'Stata', - 'Racekt', - 'SQL', - 'HiveQL', - 'Rust', - 'Rascal', - 'Q#' -]; - /** * Snippet Editor Icon */ @@ -149,8 +82,6 @@ function activateCodeSnippet( // open code Snippet Editor const openCodeSnippetEditor = (args: ICodeSnippetEditorMetadata): void => { - console.log(args); - // codeSnippetEditors are in the main area const widgetId = `jp-codeSnippet-editor-${args.id}`; diff --git a/style/icon/language_icons/babel.svg b/style/icon/language_icons/babel.svg new file mode 100644 index 0000000..d0088b2 --- /dev/null +++ b/style/icon/language_icons/babel.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/c.svg b/style/icon/language_icons/c.svg new file mode 100644 index 0000000..9b93813 --- /dev/null +++ b/style/icon/language_icons/c.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/clojure.svg b/style/icon/language_icons/clojure.svg new file mode 100644 index 0000000..d83efd7 --- /dev/null +++ b/style/icon/language_icons/clojure.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/coconut.svg b/style/icon/language_icons/coconut.svg new file mode 100644 index 0000000..f2b9237 --- /dev/null +++ b/style/icon/language_icons/coconut.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/coffeescript.svg b/style/icon/language_icons/coffeescript.svg new file mode 100644 index 0000000..ab61449 --- /dev/null +++ b/style/icon/language_icons/coffeescript.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/cpp.svg b/style/icon/language_icons/cpp.svg new file mode 100644 index 0000000..048b1bc --- /dev/null +++ b/style/icon/language_icons/cpp.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/csharp.svg b/style/icon/language_icons/csharp.svg new file mode 100644 index 0000000..3171d1e --- /dev/null +++ b/style/icon/language_icons/csharp.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/erlang.svg b/style/icon/language_icons/erlang.svg new file mode 100644 index 0000000..9ca39a0 --- /dev/null +++ b/style/icon/language_icons/erlang.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/forth.svg b/style/icon/language_icons/forth.svg new file mode 100644 index 0000000..e9fa1b0 --- /dev/null +++ b/style/icon/language_icons/forth.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/fortran.svg b/style/icon/language_icons/fortran.svg new file mode 100644 index 0000000..47054a6 --- /dev/null +++ b/style/icon/language_icons/fortran.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/fsharp.svg b/style/icon/language_icons/fsharp.svg new file mode 100644 index 0000000..505e0b5 --- /dev/null +++ b/style/icon/language_icons/fsharp.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/go.svg b/style/icon/language_icons/go.svg new file mode 100644 index 0000000..37be0ca --- /dev/null +++ b/style/icon/language_icons/go.svg @@ -0,0 +1,8 @@ + diff --git a/style/icon/language_icons/groovy.svg b/style/icon/language_icons/groovy.svg new file mode 100644 index 0000000..e2c510c --- /dev/null +++ b/style/icon/language_icons/groovy.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/haskell.svg b/style/icon/language_icons/haskell.svg new file mode 100644 index 0000000..b2fbd26 --- /dev/null +++ b/style/icon/language_icons/haskell.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/java.svg b/style/icon/language_icons/java.svg new file mode 100644 index 0000000..09d623b --- /dev/null +++ b/style/icon/language_icons/java.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/javascript.svg b/style/icon/language_icons/javascript.svg new file mode 100644 index 0000000..3820649 --- /dev/null +++ b/style/icon/language_icons/javascript.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/julia.svg b/style/icon/language_icons/julia.svg new file mode 100644 index 0000000..882e947 --- /dev/null +++ b/style/icon/language_icons/julia.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/kotlin.svg b/style/icon/language_icons/kotlin.svg new file mode 100644 index 0000000..b00e0c7 --- /dev/null +++ b/style/icon/language_icons/kotlin.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/lisp.svg b/style/icon/language_icons/lisp.svg new file mode 100644 index 0000000..696a4f2 --- /dev/null +++ b/style/icon/language_icons/lisp.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/livescript.svg b/style/icon/language_icons/livescript.svg new file mode 100644 index 0000000..e3001a2 --- /dev/null +++ b/style/icon/language_icons/livescript.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/lua.svg b/style/icon/language_icons/lua.svg new file mode 100644 index 0000000..128835e --- /dev/null +++ b/style/icon/language_icons/lua.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/matlab.svg b/style/icon/language_icons/matlab.svg new file mode 100644 index 0000000..d73c160 --- /dev/null +++ b/style/icon/language_icons/matlab.svg @@ -0,0 +1,8 @@ + +Layer 1 + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/nodejs.svg b/style/icon/language_icons/nodejs.svg new file mode 100644 index 0000000..1004b57 --- /dev/null +++ b/style/icon/language_icons/nodejs.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/ocaml.svg b/style/icon/language_icons/ocaml.svg new file mode 100644 index 0000000..1fe9732 --- /dev/null +++ b/style/icon/language_icons/ocaml.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/perl.svg b/style/icon/language_icons/perl.svg new file mode 100644 index 0000000..ea2646f --- /dev/null +++ b/style/icon/language_icons/perl.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/php.svg b/style/icon/language_icons/php.svg new file mode 100644 index 0000000..0802fe2 --- /dev/null +++ b/style/icon/language_icons/php.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/processing.svg b/style/icon/language_icons/processing.svg new file mode 100644 index 0000000..4c66664 --- /dev/null +++ b/style/icon/language_icons/processing.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/style/icon/language_icons/prolog.svg b/style/icon/language_icons/prolog.svg new file mode 100644 index 0000000..21dc492 --- /dev/null +++ b/style/icon/language_icons/prolog.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/purescript.svg b/style/icon/language_icons/purescript.svg new file mode 100644 index 0000000..8c66fa8 --- /dev/null +++ b/style/icon/language_icons/purescript.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/qsharp.svg b/style/icon/language_icons/qsharp.svg new file mode 100644 index 0000000..bd3c850 --- /dev/null +++ b/style/icon/language_icons/qsharp.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/ruby.svg b/style/icon/language_icons/ruby.svg new file mode 100644 index 0000000..d3daeb6 --- /dev/null +++ b/style/icon/language_icons/ruby.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/rust.svg b/style/icon/language_icons/rust.svg new file mode 100644 index 0000000..e7284b3 --- /dev/null +++ b/style/icon/language_icons/rust.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/style/icon/language_icons/sbt.svg b/style/icon/language_icons/sbt.svg new file mode 100644 index 0000000..b253a64 --- /dev/null +++ b/style/icon/language_icons/sbt.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/style/icon/language_icons/scala.svg b/style/icon/language_icons/scala.svg new file mode 100644 index 0000000..1bb31c4 --- /dev/null +++ b/style/icon/language_icons/scala.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/scheme.svg b/style/icon/language_icons/scheme.svg new file mode 100644 index 0000000..03506c1 --- /dev/null +++ b/style/icon/language_icons/scheme.svg @@ -0,0 +1 @@ + diff --git a/style/icon/language_icons/typescript.svg b/style/icon/language_icons/typescript.svg new file mode 100644 index 0000000..19d9ef6 --- /dev/null +++ b/style/icon/language_icons/typescript.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/style/index.css b/style/index.css index bb5a2f8..b02c712 100644 --- a/style/index.css +++ b/style/index.css @@ -41,6 +41,7 @@ overflow: hidden; text-overflow: ellipsis; color: var(--jp-ui-font-color0); + display: flex; } .jp-codeSnippetsContainer-button { @@ -402,7 +403,7 @@ mark.jp-codeSnippet-search-bolding { .jp-codeSnippet-filter-arrow-up { position: absolute; - margin-top: 22px; + margin-top: 20px; border: var(--jp-border-width) solid var(--jp-border-color1); border-width: 0 var(--jp-border-width) var(--jp-border-width) 0; padding: 4px; @@ -511,10 +512,15 @@ mark.jp-codeSnippet-search-bolding { background: var(--jp-dialog-background); } -.jp-codeSnippet-dialog-input:invalid, -.jp-codeSnippet-editor-name:invalid, -.jp-codeSnippet-editor-description:invalid, -.jp-codeSnippet-editor-language:invalid { +/* .jp-codesnippet-editor-name:required { + border-color: #808080; + border-width: 3px; +} */ + +.jp-codeSnippet-dialog-input.touched:invalid, +.jp-codeSnippet-editor-name.touched:invalid, +.jp-codeSnippet-editor-description.touched:invalid, +.jp-codeSnippet-editor-language.touched:invalid { border: var(--jp-border-width) solid var(--jp-error-color1); }