Skip to content

Commit ad5e1ba

Browse files
minjk-blminjk-bl
committed
#36 - Snippets Update for 1) default snippets, 2) cancel export mode, 3) some helper text for user(title)
1 parent 7581beb commit ad5e1ba

3 files changed

Lines changed: 94 additions & 47 deletions

File tree

‎css/file_io/udf.css‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -131,17 +131,21 @@
131131
position: absolute;
132132
top: 0px;
133133
right: 40px;
134-
width: 70px;
135-
height: 50px;
134+
/* width: 70px;
135+
height: 50px; */
136136
border: 0.25px solid var(--border-gray-color);
137137
background: #FFFFFF;
138+
padding: 5px;
138139
}
139140
.vp-sn-menu-item {
140141
height: 25px;
141142
line-height: 25px;
142143
padding: 0px 5px;
143144
cursor: pointer;
144145
}
146+
.vp-sn-menu-item:hover {
147+
color: var(--font-hightlight);
148+
}
145149

146150
.vp-sn-search-box {
147151

@@ -166,23 +170,27 @@
166170
.vp-sn-func-right {
167171
float: right;
168172
}
169-
.vp-sn-filter {
173+
.vp-sn-sort {
170174
cursor: pointer;
171175
}
172-
.vp-sn-filter-menu-box {
176+
.vp-sn-sort-menu-box {
173177
display: none;
174178
position: absolute;
175-
width: 80px;
176-
height: 50px;
179+
/* width: 80px;
180+
height: 50px; */
177181
border: 0.25px solid var(--border-gray-color);
178182
background: #FFFFFF;
183+
padding: 5px;
179184
}
180-
.vp-sn-filter-menu-item {
185+
.vp-sn-sort-menu-item {
181186
height: 25px;
182187
line-height: 25px;
183188
padding: 0px 5px;
184189
cursor: pointer;
185190
}
191+
.vp-sn-sort-menu-item:hover {
192+
color: var(--font-hightlight);
193+
}
186194

187195
.vp-sn-func-export-mode {
188196
display: none;

‎src/file_io/udf.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
Export
1212
<img src="/nbextensions/visualpython/resource/snippets/export.svg" />
1313
</div>
14+
<hr style="margin:0px;"/>
15+
<div class="vp-sn-menu-item" data-menu="default-snippets">Default Snippets</div>
1416
</div>
1517
</div>
1618
</div>
@@ -20,26 +22,24 @@
2022
</div>
2123
<div class="vp-sn-func-box">
2224
<div class="vp-sn-func-left">
23-
<!-- <button class="vp-button vp-sn-button vp-sn-filter" data-menu="filter">
24-
Filter <i class="fa fa-filter"></i>
25-
</button> -->
26-
<div class="vp-sn-filter" data-menu="filter">
25+
<div class="vp-sn-sort" data-menu="sort" title="Sort">
2726
<img src="/nbextensions/visualpython/resource/snippets/sort.svg" />
2827
</div>
29-
<div class="vp-sn-filter-menu-box vp-temp-popup-menu">
30-
<div class="vp-sn-filter-menu-item" data-menu="name">by Names</div>
31-
<div class="vp-sn-filter-menu-item" data-menu="date">by Dates</div>
28+
<div class="vp-sn-sort-menu-box vp-temp-popup-menu">
29+
<div class="vp-sn-sort-menu-item" data-menu="name">by Names</div>
30+
<div class="vp-sn-sort-menu-item" data-menu="date">by Dates</div>
3231
</div>
3332
</div>
3433
<div class="vp-sn-func-right">
3534
<div class="vp-sn-func-export-mode">
3635
<input type="hidden" class="vp-sn-filename" />
3736
<input type="hidden" class="vp-sn-filepath" />
37+
<button class="vp-button cancel vp-sn-export" data-menu="cancel">Cancel</button>
3838
<button class="vp-button activated vp-sn-export" data-menu="export">Export</button>
3939
<input type="checkbox" class="vp-sn-checkbox vp-sn-check-all" />
4040
</div>
4141
<div class="vp-sn-func-default-mode">
42-
<button class="vp-button vp-sn-create" data-menu="create">+ Snippet</button>
42+
<button class="vp-button vp-sn-create" data-menu="create" title="Create new snippet">+ Snippet</button>
4343
</div>
4444
</div>
4545
</div>

‎src/file_io/udf.js‎

Lines changed: 71 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -263,10 +263,10 @@ define([
263263
$(that.wrapSelector('.vp-sn-menu-box')).toggle();
264264
});
265265

266-
// filter menu popup
267-
$(document).on('click', this.wrapSelector('.vp-sn-filter'), function(evt) {
266+
// sort menu popup
267+
$(document).on('click', this.wrapSelector('.vp-sn-sort'), function(evt) {
268268
evt.stopPropagation();
269-
$(that.wrapSelector('.vp-sn-filter-menu-box')).toggle();
269+
$(that.wrapSelector('.vp-sn-sort-menu-box')).toggle();
270270
});
271271

272272
// menu click
@@ -295,6 +295,38 @@ define([
295295
} else if (menu == 'export') {
296296
// set as export mode
297297
$(that.wrapSelector('.vp-sn-body')).addClass('vp-sn-export-mode');
298+
299+
// check all
300+
$(that.wrapSelector('.vp-sn-check-all')).prop('checked', true);
301+
$(that.wrapSelector('.vp-sn-item-check')).prop('checked', true);
302+
} else if (menu == 'default-snippets') {
303+
// import default snippets
304+
var defaultSnippets = {
305+
'default import': 'import numpy as np\nimport pandas as pd\nimport matplotlib.pyplot as plt\n%matplotlib inline\nimport seaborn as sns'
306+
}
307+
var timestamp = new Date().getTime();
308+
309+
var keys = Object.keys(defaultSnippets);
310+
var importKeys = [];
311+
keys.forEach(key => {
312+
var importKey = key;
313+
var importNo = 1;
314+
var titleList = Object.keys(that.codemirrorList);
315+
// set duplicate title
316+
while(titleList.includes(importKey)) {
317+
importKey = key + '_imported' + importNo;
318+
importNo += 1;
319+
}
320+
var newSnippet = { [importKey]: { code: defaultSnippets[key], timestamp: timestamp } };
321+
vpSetting.saveUserDefinedCode(newSnippet);
322+
323+
importKeys.push(importKey);
324+
});
325+
that.importedList = [ ...importKeys ];
326+
327+
that.loadUdfList();
328+
329+
vpCommon.renderSuccessMessage('Default snippets imported');
298330
}
299331
});
300332

@@ -311,8 +343,8 @@ define([
311343
}
312344
});
313345

314-
// filter item
315-
$(document).on('click', this.wrapSelector('.vp-sn-filter-menu-item'), function() {
346+
// sort item
347+
$(document).on('click', this.wrapSelector('.vp-sn-sort-menu-item'), function() {
316348
var menu = $(this).data('menu');
317349
if (menu == 'name') {
318350
// sort by name
@@ -450,30 +482,37 @@ define([
450482

451483
// export snippets
452484
$(document).on('click', this.wrapSelector('.vp-sn-export'), async function() {
453-
var checked = $(that.wrapSelector('.vp-sn-item-check:checked'));
454-
if (checked.length <= 0) {
455-
return ;
456-
}
457-
458-
var loadURLstyle = Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH;
459-
var loadURLhtml = Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.SOURCE_PATH + "component/fileNavigation/index.html";
460-
461-
that.loadCss( loadURLstyle + "component/fileNavigation.css");
485+
var menu = $(this).data('menu');
486+
if (menu == 'cancel') {
487+
// cancel
488+
// return to default mode
489+
$(that.wrapSelector('.vp-sn-body')).removeClass('vp-sn-export-mode');
490+
} else if (menu == 'export') {
491+
var checked = $(that.wrapSelector('.vp-sn-item-check:checked'));
492+
if (checked.length <= 0) {
493+
return ;
494+
}
462495

463-
await $(`<div id="vp_fileNavigation"></div>`)
464-
.load(loadURLhtml, () => {
465-
466-
$('#vp_fileNavigation').removeClass("hide");
467-
$('#vp_fileNavigation').addClass("show");
468-
469-
var { vp_init
470-
, vp_bindEventFunctions } = fileNavigation;
471-
472-
fileNavigation.vp_init(that, "SAVE_SNIPPETS");
473-
// fileNavigation.vp_init(that.getStateAll());
474-
fileNavigation.vp_bindEventFunctions();
475-
})
476-
.appendTo("#site");
496+
var loadURLstyle = Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.STYLE_PATH;
497+
var loadURLhtml = Jupyter.notebook.base_url + vpConst.BASE_PATH + vpConst.SOURCE_PATH + "component/fileNavigation/index.html";
498+
499+
that.loadCss( loadURLstyle + "component/fileNavigation.css");
500+
501+
await $(`<div id="vp_fileNavigation"></div>`)
502+
.load(loadURLhtml, () => {
503+
504+
$('#vp_fileNavigation').removeClass("hide");
505+
$('#vp_fileNavigation').addClass("show");
506+
507+
var { vp_init
508+
, vp_bindEventFunctions } = fileNavigation;
509+
510+
fileNavigation.vp_init(that, "SAVE_SNIPPETS");
511+
// fileNavigation.vp_init(that.getStateAll());
512+
fileNavigation.vp_bindEventFunctions();
513+
})
514+
.appendTo("#site");
515+
}
477516

478517
});
479518

@@ -556,12 +595,12 @@ define([
556595
item.appendFormatLine('<i class="{0}"></i>', 'fa fa-circle vp-sn-imported-item');
557596
}
558597
item.appendFormatLine('<div class="{0}">', 'vp-sn-item-menu');
559-
item.appendFormatLine('<div class="{0}" data-menu="{1}">'
560-
, 'vp-sn-item-menu-item', 'duplicate');
598+
item.appendFormatLine('<div class="{0}" data-menu="{1}" title="{2}">'
599+
, 'vp-sn-item-menu-item', 'duplicate', 'Duplicate');
561600
item.appendFormatLine('<img src="{0}"/>', '/nbextensions/visualpython/resource/snippets/duplicate.svg');
562601
item.appendLine('</div>');
563-
item.appendFormatLine('<div class="{0}" data-menu="{1}">'
564-
, 'vp-sn-item-menu-item', 'delete');
602+
item.appendFormatLine('<div class="{0}" data-menu="{1}" title="{2}">'
603+
, 'vp-sn-item-menu-item', 'delete', 'Delete');
565604
item.appendFormatLine('<img src="{0}"/>', '/nbextensions/visualpython/resource/snippets/delete.svg');
566605
item.appendLine('</div>');
567606
item.appendLine('</div>'); // end of vp-sn-item-menu

0 commit comments

Comments
 (0)