Skip to content

Commit 44eb768

Browse files
jahn96jahn96
committed
Make CSS classes more consistent
1 parent d119e97 commit 44eb768

19 files changed

+247
-1158
lines changed

‎src/CodeSnippetDisplay.tsx

+80-165
Large diffs are not rendered by default.

‎src/CodeSnippetEditor.tsx

+39-28
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,46 @@
11
import { CodeEditor, IEditorServices } from '@jupyterlab/codeeditor';
2-
// import { ICodeSnippet } from './CodeSnippetContentsService';
32
import {
43
ReactWidget,
54
showDialog,
65
Dialog,
76
WidgetTracker
87
} from '@jupyterlab/apputils';
9-
import React from 'react';
10-
import { Message } from '@lumino/messaging';
118
import { Button } from '@jupyterlab/ui-components';
9+
import { Contents } from '@jupyterlab/services';
10+
11+
import { Message } from '@lumino/messaging';
12+
13+
import React from 'react';
14+
1215
import { CodeSnippetContentsService } from './CodeSnippetContentsService';
1316
import { CodeSnippetWidget } from './CodeSnippetWidget';
1417
import { SUPPORTED_LANGUAGES } from './index';
1518
import { CodeSnippetEditorTags } from './CodeSnippetEditorTags';
16-
import { Contents } from '@jupyterlab/services';
1719

1820
/**
1921
* CSS style classes
2022
*/
2123
const CODE_SNIPPET_EDITOR = 'jp-codeSnippet-editor';
22-
const CODE_SNIPPET_EDITOR_NAME_LABEL = 'jp-snippet-editor-name-label';
23-
const CODE_SNIPPET_EDITOR_LABEL_ACTIVE = 'jp-snippet-editor-label-active';
24-
const CODE_SNIPPET_EDITOR_INPUT_ACTIVE = 'jp-snippet-editor-active';
25-
const CODE_SNIPPET_EDITOR_NAME_INPUT = 'jp-snippet-editor-name';
26-
const CODE_SNIPPET_EDITOR_DESC_LABEL = 'jp-snippet-editor-description-label';
27-
const CODE_SNIPPET_EDITOR_DESC_INPUT = 'jp-snippet-editor-description';
28-
const CODE_SNIPPET_EDITOR_LANG_INPUT = 'jp-snippet-editor-language';
24+
const CODE_SNIPPET_EDITOR_TITLE = 'jp-codeSnippet-editor-title';
25+
const CODE_SNIPPET_EDITOR_METADATA = 'jp-codeSnippet-editor-metadata';
26+
const CODE_SNIPPET_EDITOR_NAME_LABEL = 'jp-codeSnippet-editor-name-label';
27+
const CODE_SNIPPET_EDITOR_LABEL_ACTIVE = 'jp-codeSnippet-editor-label-active';
28+
const CODE_SNIPPET_EDITOR_INPUT_ACTIVE = 'jp-codeSnippet-editor-active';
29+
const CODE_SNIPPET_EDITOR_NAME_INPUT = 'jp-codeSnippet-editor-name';
30+
const CODE_SNIPPET_EDITOR_DESC_LABEL =
31+
'jp-codeSnippet-editor-description-label';
32+
const CODE_SNIPPET_EDITOR_DESC_INPUT = 'jp-codeSnippet-editor-description';
33+
const CODE_SNIPPET_EDITOR_LANG_INPUT = 'jp-codeSnippet-editor-language';
2934
const CODE_SNIPPET_EDITOR_MIRROR = 'jp-codeSnippetInput-editor';
30-
35+
const CODE_SNIPPET_EDITOR_INPUTAREA = 'jp-codeSnippetInputArea';
36+
const CODE_SNIPPET_EDITOR_INPUTAREA_MIRROR = 'jp-codeSnippetInputArea-editor';
37+
38+
const CODE_SNIPPET_EDITOR_INPUTNAME_VALIDITY =
39+
'jp-codeSnippet-inputName-validity';
40+
const CODE_SNIPPET_EDITOR_INPUTDESC_VALIDITY =
41+
'jp-codeSnippet-inputDesc-validity';
42+
const CODE_SNIPPET_EDITOR_TAGS_LABEL = 'jp-codeSnippet-editor-tags-label';
43+
const CODE_SNIPPET_EDITOR_MIRROR_LABEL = 'jp-codeSnippetInputArea-editorTitle';
3144
const EDITOR_DIRTY_CLASS = 'jp-mod-dirty';
3245

3346
export interface ICodeSnippetEditorMetadata {
@@ -488,7 +501,7 @@ export class CodeSnippetEditor extends ReactWidget {
488501
renderCodeInput(): React.ReactElement {
489502
return (
490503
<section
491-
className="jp-codeSnippetInputArea-editor"
504+
className={CODE_SNIPPET_EDITOR_INPUTAREA_MIRROR}
492505
onMouseDown={this.activateCodeMirror}
493506
>
494507
<div
@@ -527,21 +540,21 @@ export class CodeSnippetEditor extends ReactWidget {
527540
const fromScratch = this._codeSnippetEditorMetaData.fromScratch;
528541
return (
529542
<div
530-
className="jp-codeSnippetInputArea"
543+
className={CODE_SNIPPET_EDITOR_INPUTAREA}
531544
onMouseDown={(
532545
event: React.MouseEvent<HTMLDivElement, MouseEvent>
533546
): void => {
534547
// this.deactivateEditor(event);
535548
this.deactivateEditor(event);
536549
}}
537550
>
538-
<span className="jp-snippet-editor-title">
551+
<span className={CODE_SNIPPET_EDITOR_TITLE}>
539552
{fromScratch ? 'Add New Code Snippet' : 'Edit Code Snippet'}
540553
</span>
541-
<section className="jp-snippet-editor-metadata">
542-
<label className="jp-snippet-editor-name-label">Name</label>
554+
<section className={CODE_SNIPPET_EDITOR_METADATA}>
555+
<label className={CODE_SNIPPET_EDITOR_NAME_LABEL}>Name</label>
543556
<input
544-
className="jp-snippet-editor-name"
557+
className={CODE_SNIPPET_EDITOR_NAME_INPUT}
545558
defaultValue={this._codeSnippetEditorMetaData.name}
546559
placeholder={'Ex. starter_code'}
547560
type="text"
@@ -554,16 +567,14 @@ export class CodeSnippetEditor extends ReactWidget {
554567
this.handleInputFieldChange(event);
555568
}}
556569
></input>
557-
<p className="jp-inputName-validity">
570+
<p className={CODE_SNIPPET_EDITOR_INPUTNAME_VALIDITY}>
558571
{
559-
'Name of the code snippet MUST be alphanumeric or composed of underscore(_)'
572+
'Name of the code snippet MUST be lowercased, alphanumeric or composed of underscore(_)'
560573
}
561574
</p>
562-
<label className="jp-snippet-editor-description-label">
563-
Description
564-
</label>
575+
<label className={CODE_SNIPPET_EDITOR_DESC_LABEL}>Description</label>
565576
<input
566-
className="jp-snippet-editor-description"
577+
className={CODE_SNIPPET_EDITOR_DESC_INPUT}
567578
defaultValue={this._codeSnippetEditorMetaData.description}
568579
placeholder={'Description'}
569580
type="text"
@@ -576,20 +587,20 @@ export class CodeSnippetEditor extends ReactWidget {
576587
this.handleInputFieldChange(event);
577588
}}
578589
></input>
579-
<p className="jp-inputDesc-validity">
590+
<p className={CODE_SNIPPET_EDITOR_INPUTDESC_VALIDITY}>
580591
{
581-
'Description of the code snippet MUST be alphanumeric or composed of underscore(_) or space'
592+
'Description of the code snippet MUST be alphanumeric but can include space or punctuation'
582593
}
583594
</p>
584595
{this.renderLanguages()}
585-
<label className="jp-snippet-editor-tags-label">Tags</label>
596+
<label className={CODE_SNIPPET_EDITOR_TAGS_LABEL}>Tags</label>
586597
<CodeSnippetEditorTags
587598
selectedTags={this.codeSnippetEditorMetadata.selectedTags}
588599
tags={this.codeSnippetEditorMetadata.allTags}
589600
handleChange={this.handleChangeOnTag}
590601
/>
591602
</section>
592-
<span className="jp-codeSnippetInputArea-editorTitle">Code</span>
603+
<span className={CODE_SNIPPET_EDITOR_MIRROR_LABEL}>Code</span>
593604
{this.renderCodeInput()}
594605
<Button className="saveBtn" onClick={this.saveChange}>
595606
{fromScratch ? 'Create' : 'Save'}

‎src/CodeSnippetEditorTags.tsx

+15-7
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,14 @@ interface ICodeSnippetEditorTagState {
1414
addingNewTag: boolean;
1515
}
1616

17+
/**
18+
* CSS STYLING
19+
*/
20+
21+
const CODE_SNIPPET_EDITOR_TAG = 'jp-codeSnippet-editor-tag';
22+
const CODE_SNIPPET_EDITOR_TAG_PLUS_ICON = 'jp-codeSnippet-editor-tag-plusIcon';
23+
const CODE_SNIPPET_EDITOR_TAG_LIST = 'jp-codeSnippet-editor-tagList';
24+
1725
export class CodeSnippetEditorTags extends React.Component<
1826
ICodeSnippetEditorTagProps,
1927
ICodeSnippetEditorTagState
@@ -139,7 +147,7 @@ export class CodeSnippetEditorTags extends React.Component<
139147
const inputBox =
140148
this.state.addingNewTag === true ? (
141149
<ul
142-
className={'jp-codeSnippet-Editor-tag tag unapplied-tag'}
150+
className={`${CODE_SNIPPET_EDITOR_TAG} tag unapplied-tag`}
143151
key={'editor-new-tag'}
144152
>
145153
<input
@@ -156,15 +164,15 @@ export class CodeSnippetEditorTags extends React.Component<
156164
/>
157165
</ul>
158166
) : (
159-
<ul className={'jp-codeSnippet-Editor-tag tag unapplied-tag'}>
167+
<ul className={`${CODE_SNIPPET_EDITOR_TAG} tag unapplied-tag`}>
160168
{/* button */}
161169
<button onClick={(): void => this.setState({ addingNewTag: true })}>
162170
Add Tag
163171
</button>
164172
{/* check icon */}
165173
<addIcon.react
166174
tag="span"
167-
className="jp-codeSnippet-Editor-Tag-plusIcon"
175+
className={CODE_SNIPPET_EDITOR_TAG_PLUS_ICON}
168176
elementPosition="center"
169177
height="16px"
170178
width="16px"
@@ -173,14 +181,14 @@ export class CodeSnippetEditorTags extends React.Component<
173181
</ul>
174182
);
175183
return (
176-
<li className={'jp-codeSnippet-Editor-tags'}>
184+
<li className={CODE_SNIPPET_EDITOR_TAG_LIST}>
177185
{hasTags
178186
? this.state.tags.map((tag: string, index: number) =>
179187
((): JSX.Element => {
180188
if (!this.state.selectedTags) {
181189
return (
182190
<ul
183-
className={'jp-codeSnippet-Editor-tag tag unapplied-tag'}
191+
className={`${CODE_SNIPPET_EDITOR_TAG} tag unapplied-tag`}
184192
id={'editor' + '-' + tag + '-' + index}
185193
key={'editor' + '-' + tag + '-' + index}
186194
>
@@ -192,7 +200,7 @@ export class CodeSnippetEditorTags extends React.Component<
192200
if (this.state.selectedTags.includes(tag)) {
193201
return (
194202
<ul
195-
className={'jp-codeSnippet-Editor-tag tag applied-tag'}
203+
className={`${CODE_SNIPPET_EDITOR_TAG} tag applied-tag`}
196204
id={'editor' + '-' + tag + '-' + index}
197205
key={'editor' + '-' + tag + '-' + index}
198206
>
@@ -211,7 +219,7 @@ export class CodeSnippetEditorTags extends React.Component<
211219
} else {
212220
return (
213221
<ul
214-
className={'jp-codeSnippet-Editor-tag tag unapplied-tag'}
222+
className={`${CODE_SNIPPET_EDITOR_TAG} tag unapplied-tag`}
215223
id={'editor' + '-' + tag + '-' + index}
216224
key={'editor' + '-' + tag + '-' + index}
217225
>

‎src/CodeSnippetForm.tsx

+6-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import '../style/index.css';
21
import { Widget, PanelLayout, Panel } from '@lumino/widgets';
32
import { WidgetTracker, ReactWidget, Styling } from '@jupyterlab/apputils';
43
import { Message, MessageLoop } from '@lumino/messaging';
@@ -8,6 +7,11 @@ import { closeIcon, Button, LabIcon } from '@jupyterlab/ui-components';
87

98
import * as React from 'react';
109

10+
/**
11+
* CSS styling
12+
*/
13+
const CODE_SNIPPET_FORM = 'jp-codeSnippet-form';
14+
1115
/**
1216
* Create and show a dialog.
1317
*
@@ -29,7 +33,7 @@ export function showCodeSnippetForm<T>(
2933
export class CodeSnippetForm<T> extends Widget {
3034
constructor(options: Partial<CodeSnippetForm.IOptions<T>> = {}) {
3135
super();
32-
this.addClass('jp-codeSnippet-Form');
36+
this.addClass(CODE_SNIPPET_FORM);
3337
const normalized = Private.handleOptions(options);
3438
const renderer = normalized.renderer;
3539

0 commit comments

Comments
 (0)