Skip to content

Commit a28a0a2

Browse files
jahn96jahn96
authored
Merge pull request #176 from jahn96/ui-fix
UI fixes
2 parents 4a691fd + 3504de9 commit a28a0a2

File tree

5 files changed

+76
-97
lines changed

5 files changed

+76
-97
lines changed

‎junit.xml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<testsuites name="jest tests" tests="0" failures="0" time="0.002">
3+
</testsuites>

‎src/CodeSnippetDisplay.tsx‎

Lines changed: 50 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,7 @@ const CODE_SNIPPET_MORE_OTPIONS_INSERT = 'jp-codeSnippet-more-options-insert';
120120
const CODE_SNIPPET_MORE_OTPIONS_EDIT = 'jp-codeSnippet-more-options-edit';
121121
const CODE_SNIPPET_MORE_OTPIONS_DELETE = 'jp-codeSnippet-more-options-delete';
122122
const CODE_SNIPPET_CREATE_NEW_BTN = 'jp-createSnippetBtn';
123+
const CODE_SNIPPET_NAME = 'jp-codeSnippet-name';
123124

124125
/**
125126
* The threshold in pixels to start a drag event.
@@ -374,11 +375,18 @@ export class CodeSnippetDisplay extends React.Component<
374375
return <span>{elements}</span>;
375376
}
376377
}
377-
return <span onDoubleClick={this.handleRenameSnippet}>{name}</span>;
378+
return (
379+
<span
380+
title={'Double click to rename'}
381+
className={CODE_SNIPPET_NAME}
382+
onDoubleClick={this.handleRenameSnippet}
383+
>
384+
{name}
385+
</span>
386+
);
378387
};
379388

380389
// rename snippet on double click
381-
// TODO: duplicate name check!
382390
private async handleRenameSnippet(
383391
event: React.MouseEvent<HTMLSpanElement, MouseEvent>
384392
): Promise<void> {
@@ -399,30 +407,39 @@ export class CodeSnippetDisplay extends React.Component<
399407
new_element.onblur = async (): Promise<void> => {
400408
if (target.innerHTML !== new_element.value) {
401409
const newName = new_element.value;
402-
this.props.codeSnippetManager
403-
.renameSnippet(oldName, newName)
404-
.then(async (res: boolean) => {
405-
if (res) {
406-
console.log(target);
407-
console.log(new_element);
408-
target.innerHTML = new_element.value;
409-
} else {
410-
new_element.replaceWith(target);
411410

412-
await showDialog({
413-
title: 'Duplicate Name of Code Snippet',
414-
body: <p> {`"${newName}" already exists.`} </p>,
415-
buttons: [Dialog.okButton({ label: 'Dismiss' })],
416-
});
417-
return;
418-
}
411+
const isDuplicateName = this.props.codeSnippetManager.duplicateNameExists(
412+
newName
413+
);
414+
415+
if (isDuplicateName) {
416+
await showDialog({
417+
title: 'Duplicate Name of Code Snippet',
418+
body: <p> {`"${newName}" already exists.`} </p>,
419+
buttons: [Dialog.okButton({ label: 'Dismiss' })],
419420
});
421+
} else {
422+
this.props.codeSnippetManager
423+
.renameSnippet(oldName, newName)
424+
.then(async (res: boolean) => {
425+
if (res) {
426+
target.innerHTML = new_element.value;
427+
} else {
428+
console.log('Error in renaming snippet!');
429+
}
430+
});
431+
}
420432
}
421433
new_element.replaceWith(target);
422434
};
423435
new_element.onkeydown = (event: KeyboardEvent): void => {
424436
switch (event.code) {
425-
case 'Enter' || 'NumpadEnter': // Enter
437+
case 'Enter': // Enter
438+
event.stopPropagation();
439+
event.preventDefault();
440+
new_element.blur();
441+
break;
442+
case 'NumpadEnter': // Enter
426443
event.stopPropagation();
427444
event.preventDefault();
428445
new_element.blur();
@@ -604,9 +621,6 @@ export class CodeSnippetDisplay extends React.Component<
604621
'--preview-max-height',
605622
heightPreview
606623
);
607-
// if (realTarget.getBoundingClientRect().top > window.screen.height / 2) {
608-
// distDown = distDown - 66; //this is bumping it up further if it's close to the end of the screen
609-
// }
610624
const final = distDown.toString(10) + 'px';
611625
document.documentElement.style.setProperty('--preview-distance', final);
612626
}
@@ -1184,7 +1198,7 @@ export class CodeSnippetDisplay extends React.Component<
11841198
}}
11851199
>
11861200
<div key={displayName} className={TITLE_CLASS} id={id.toString()}>
1187-
<div id={id.toString()} title={name} className={DISPLAY_NAME_CLASS}>
1201+
<div id={id.toString()} className={DISPLAY_NAME_CLASS}>
11881202
{this.renderLanguageIcon(language)}
11891203
{this.boldNameOnSearch(id, language, name)}
11901204
</div>
@@ -1212,26 +1226,31 @@ export class CodeSnippetDisplay extends React.Component<
12121226
})}
12131227
</div>
12141228
</div>
1215-
<div className={CODE_SNIPPET_DESC} id={id.toString()}>
1216-
<p id={id.toString()}>{`${codeSnippet.description}`}</p>
1217-
</div>
1229+
{this.renderDescription(codeSnippet, id)}
12181230
</div>
12191231
</div>
12201232
);
12211233
};
12221234

1235+
renderDescription(codeSnippet: ICodeSnippet, id: number): JSX.Element {
1236+
if (codeSnippet.description.length !== 0) {
1237+
return (
1238+
<div className={CODE_SNIPPET_DESC} id={id.toString()}>
1239+
<p id={id.toString()}>{`${codeSnippet.description}`}</p>
1240+
</div>
1241+
);
1242+
} else {
1243+
return null;
1244+
}
1245+
}
1246+
12231247
static getDerivedStateFromProps(
12241248
nextProps: ICodeSnippetDisplayProps,
12251249
prevState: ICodeSnippetDisplayState
12261250
): ICodeSnippetDisplayState {
1227-
console.log('getDerivedStateFromProps');
1228-
console.log(prevState);
1229-
console.log(nextProps);
1230-
12311251
// this is why state doesn't change
12321252
if (prevState.searchValue === '' && prevState.filterTags.length === 0) {
12331253
return {
1234-
// codeSnippets: nextProps.codeSnippetManager.snippets,
12351254
codeSnippets: nextProps.codeSnippets,
12361255
matchIndices: [],
12371256
searchValue: '',
@@ -1240,17 +1259,6 @@ export class CodeSnippetDisplay extends React.Component<
12401259
}
12411260

12421261
if (prevState.searchValue !== '' || prevState.filterTags.length !== 0) {
1243-
// const newSnippets = props.codeSnippets.filter(codeSnippet => {
1244-
// return (
1245-
// state.matchIndices[codeSnippet.id] !== null ||
1246-
// // (state.searchValue !== '' &&
1247-
// // codeSnippet.name.toLowerCase().includes(state.searchValue)) ||
1248-
// // (state.searchValue !== '' &&
1249-
// // codeSnippet.language.toLowerCase().includes(state.searchValue)) ||
1250-
// (codeSnippet.tags &&
1251-
// codeSnippet.tags.some(tag => state.filterTags.includes(tag)))
1252-
// );
1253-
// });
12541262
return {
12551263
codeSnippets: prevState.codeSnippets,
12561264
matchIndices: prevState.matchIndices,
@@ -1380,28 +1388,7 @@ export class CodeSnippetDisplay extends React.Component<
13801388
console.log('Error in deleting the snippet');
13811389
return;
13821390
}
1383-
1384-
// active tags after delete
1385-
// const activeTags = this.getActiveTags();
1386-
1387-
// filterTags: only the tags that are still being used
1388-
// this.setState(state => ({
1389-
// codeSnippets: snippets,
1390-
// filterTags: state.filterTags.filter(tag => activeTags.includes(tag))
1391-
// }), () => console.log(this.state));
13921391
});
1393-
// this.props._codeSnippetWidgetModel.deleteSnippet(codeSnippet.id);
1394-
// this.props._codeSnippetWidgetModel.reorderSnippet();
1395-
// this.props._codeSnippetWidgetModel.updateSnippetContents();
1396-
1397-
// active tags after delete
1398-
// const activeTags = this.getActiveTags();
1399-
1400-
// // filterTags: only the tags that are still being used
1401-
// this.setState(state => ({
1402-
// codeSnippets: this.props.codeSnippetManager.snippets,
1403-
// filterTags: state.filterTags.filter(tag => activeTags.includes(tag))
1404-
// }));
14051392
}
14061393
});
14071394
}

‎src/CodeSnippetInputDialog.ts‎

Lines changed: 2 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -107,8 +107,6 @@ export function showInputDialog(
107107
return null;
108108
}
109109

110-
console.log(idx);
111-
112110
if (validateForm(result) === false) {
113111
showInputDialog(
114112
codeSnippetWidget,
@@ -119,10 +117,6 @@ export function showInputDialog(
119117
body
120118
);
121119
} else {
122-
// if (idx === -1) {
123-
// idx = codeSnippetWidget.codeSnippetWidgetModel.snippets.length;
124-
// }
125-
126120
const tags = result.value.slice(3);
127121
const newSnippet: ICodeSnippet = {
128122
name: result.value[0].replace(' ', ''),
@@ -165,32 +159,10 @@ function createNewSnippet(
165159
}
166160
});
167161

168-
console.log('add');
169-
console.log(codeSnippetManager.snippets);
170-
// const request = contentsService.save(
171-
// 'snippets/' + newSnippet.name + '.json',
172-
// {
173-
// type: 'file',
174-
// format: 'text',
175-
// content: JSON.stringify(newSnippet)
176-
// }
177-
// );
178-
179162
codeSnippetWidget.renderCodeSnippetsSignal.emit(codeSnippetManager.snippets);
180163
showMessage({
181164
body: new MessageHandler(),
182165
});
183-
// request.then(_ => {
184-
// // add the new snippet to the snippet model
185-
// // codeSnippet.codeSnippetWidgetModel.addSnippet(newSnippet, newSnippet.id);
186-
// // codeSnippet.codeSnippetWidgetModel.updateSnippetContents();
187-
// // const newSnippets = codeSnippet.codeSnippetWidgetModel.snippets;
188-
// // codeSnippet.codeSnippets = newSnippets;
189-
// // codeSnippet.renderCodeSnippetsSignal.emit(newSnippets);
190-
// // showMessage({
191-
// // body: new MessageHandler()
192-
// // });
193-
// });
194166
}
195167

196168
/**
@@ -203,7 +175,7 @@ export async function saveOverWriteFile(
203175
): Promise<boolean> {
204176
const newName = newSnippet.name;
205177

206-
await shouldOverwrite(newName).then((res) => {
178+
return await shouldOverwrite(newName).then((res) => {
207179
if (res) {
208180
newSnippet.id = oldSnippet.id;
209181

@@ -222,7 +194,6 @@ export async function saveOverWriteFile(
222194
return true;
223195
}
224196
});
225-
return false;
226197
}
227198

228199
/**
@@ -235,7 +206,7 @@ async function shouldOverwrite(newName: string): Promise<boolean> {
235206
buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Overwrite' })],
236207
};
237208
return showDialog(options).then((result) => {
238-
return Promise.resolve(result.button.accept);
209+
return result.button.accept;
239210
});
240211
}
241212

‎src/FilterTools.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const FILTER_CHECK = 'jp-codeSnippet-filter-check';
2424
const FILTER_TITLE = 'jp-codeSnippet-filter-title';
2525
const FILTER_TOOLS = 'jp-codeSnippet-filterTools';
2626
const FILTER_SEARCHBAR = 'jp-codeSnippet-searchbar';
27-
const FILTER_SEARCHWRAPPER = 'jp-codesnippet-searchwrapper';
27+
const FILTER_SEARCHWRAPPER = 'jp-codeSnippet-searchwrapper';
2828
const FILTER_CLASS = 'jp-codeSnippet-filter';
2929
const FILTER_BUTTON = 'jp-codeSnippet-filter-btn';
3030

@@ -181,7 +181,7 @@ export class FilterTools extends React.Component<
181181
type="text"
182182
placeholder="SEARCH SNIPPETS"
183183
onChange={this.handleSearch}
184-
rightIcon="search"
184+
rightIcon="ui-components:search"
185185
value={this.state.searchValue}
186186
/>
187187
</div>

‎style/base.css‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,21 @@
4040
font-size: var(--jp-ui-font-size1);
4141
white-space: nowrap;
4242
overflow: hidden;
43-
text-overflow: ellipsis;
4443
color: var(--jp-ui-font-color0);
4544
display: flex;
4645
align-items: center;
46+
width: 100%;
47+
}
48+
49+
.jp-codeSnippetsContainer-name span:nth-child(2) {
50+
white-space: nowrap;
51+
overflow: hidden;
52+
text-overflow: ellipsis;
53+
height: 19px;
54+
}
55+
56+
.jp-codeSnippet-name:hover {
57+
cursor: pointer;
4758
}
4859

4960
.jp-codeSnippetsContainer-button {
@@ -86,6 +97,7 @@
8697
display: flex;
8798
flex-direction: column;
8899
justify-content: space-evenly;
100+
overflow: hidden;
89101
}
90102

91103
.jp-codeSnippet-description p {
@@ -309,6 +321,11 @@
309321
font-size: var(--jp-ui-font-size1);
310322
}
311323

324+
.jp-codeSnippet-editor-tag input {
325+
border: none;
326+
background: transparent;
327+
}
328+
312329
.jp-codeSnippet-editor-tag.applied-tag button {
313330
color: var(--jp-ui-font-color1);
314331
}
@@ -319,6 +336,7 @@
319336

320337
.jp-codeSnippet-editor-tag.tag.unapplied-tag input {
321338
border: none;
339+
background: transparent;
322340
}
323341

324342
.jp-codeSnippet-editor-active {

0 commit comments

Comments
 (0)