Skip to content

Commit aa55d20

Browse files
author
minjk-bl
committed
Edit popup component not to save to block as default
1 parent 3027838 commit aa55d20

File tree

3 files changed

+138
-40
lines changed

3 files changed

+138
-40
lines changed

‎visualpython/css/component/popupComponent.css

Lines changed: 62 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,7 @@
160160
width: 100%;
161161
height: calc(100% - 80px);
162162
padding: 15px;
163-
overflow: auto;
163+
/* overflow: auto; */
164164
}
165165
.vp-popup-content {
166166
min-height: calc(100% - 30px);
@@ -284,7 +284,7 @@
284284
padding: 1px 8px 0 5px;
285285
}
286286
/* checkbox */
287-
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox),
287+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle),
288288
.vp-popup-frame input[type=radio]:not(.vp-radio) {
289289
position: absolute;
290290
width: 1px;
@@ -295,9 +295,9 @@
295295
clip: rect(0, 0, 0, 0);
296296
border: 0;
297297
}
298-
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label,
298+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + label,
299299
.vp-popup-frame input[type=radio]:not(.vp-radio) + label,
300-
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span,
300+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + span,
301301
.vp-popup-frame label input[type=radio]:not(.vp-radio) + span {
302302
display: inline-block;
303303
position: relative;
@@ -307,14 +307,14 @@
307307
line-height: 15px;
308308
vertical-align: middle;
309309
}
310-
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label,
310+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + label,
311311
.vp-popup-frame input[type=radio]:not(.vp-radio):disabled + label,
312-
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span,
312+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + span,
313313
.vp-popup-frame label input[type=radio]:not(.vp-radio):disabled + span {
314314
color: var(--vp-gray-color);
315315
}
316-
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox) + label::before,
317-
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox) + span::before {
316+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + label::before,
317+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle) + span::before {
318318
content: '';
319319
position: absolute;
320320
left: 0;
@@ -328,8 +328,8 @@
328328
border: none;
329329
box-sizing: border-box;
330330
}
331-
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):checked + label::before,
332-
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):checked + span::before {
331+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):checked + label::before,
332+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):checked + span::before {
333333
content: '';
334334
position: absolute;
335335
left: 0;
@@ -342,8 +342,8 @@
342342
border: none;
343343
box-sizing: border-box;
344344
}
345-
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):disabled + label::before,
346-
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):disabled + span::before {
345+
.vp-popup-frame input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + label::before,
346+
.vp-popup-frame label input[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled + span::before {
347347
content: '';
348348
position: absolute;
349349
left: 0;
@@ -449,6 +449,56 @@
449449
.vp-popup-frame select::-ms-expand {
450450
display: none;
451451
}
452+
/* toggle slider: <label><input class="vp-toggle" type="checkbox"/><span></span></label> */
453+
.vp-popup-frame input.vp-toggle {
454+
opacity: 0;
455+
width: 0;
456+
height: 0;
457+
}
458+
459+
.vp-popup-frame input.vp-toggle + span {
460+
position: relative;
461+
cursor: pointer;
462+
display: inline-block;
463+
width: 27px;
464+
height: 15px;
465+
top: 0;
466+
left: 0;
467+
right: 0;
468+
bottom: 0;
469+
border-radius: 34px;
470+
background-color: #ccc;
471+
-webkit-transition: .4s;
472+
transition: .4s;
473+
}
474+
475+
.vp-popup-frame input[type=checkbox].vp-toggle + span:before {
476+
position: absolute;
477+
content: "";
478+
height: 12px;
479+
width: 12px;
480+
left: 2px;
481+
bottom: 1.1px;
482+
border-radius: 50%;
483+
background: none;
484+
background-color: white;
485+
-webkit-transition: .4s;
486+
transition: .4s;
487+
}
488+
489+
.vp-popup-frame input.vp-toggle:checked + span {
490+
background-color: #2196F3;
491+
}
492+
493+
.vp-popup-frame input.vp-toggle:focus + span {
494+
box-shadow: 0 0 1px #2196F3;
495+
}
496+
497+
.vp-popup-frame input.vp-toggle:checked + span:before {
498+
-webkit-transform: translateX(12px);
499+
-ms-transform: translateX(12px);
500+
transform: translateX(12px);
501+
}
452502
/* Big Selector */
453503
.vp-popup-frame .vp-big-select {
454504
border: 2px solid #FFCF73;

‎visualpython/html/component/popupComponent.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
<div class="vp-popup-return" title="Return size of this popup"></div>
6363
<div class="vp-popup-close" title="Close popup"></div>
6464
</div>
65-
<div class="vp-popup-body vp-scrollbar">
65+
<div class="vp-popup-body">
6666
<div class="vp-popup-body-top-bar vp-italic vp-gray-text vp-no-selection vp-cursor">
6767
<span id="popupInstall" class="vp-popup-body-top-bar-item" data-type="install">
6868
Install Package
@@ -112,8 +112,9 @@
112112
<div class="vp-icon-arrow-short-up"></div>
113113
</button>
114114
<div class="vp-popup-run-detailbox vp-cursor vp-close-on-blur">
115-
<div class="vp-popup-detail-button" data-type="apply" title="Save to block">Save to block</div>
116-
<div class="vp-popup-detail-button" data-type="add" title="Save to block & Add cell">Code to cell</div>
115+
<!-- <div class="vp-popup-detail-button" data-type="apply" title="Save to block">Save to block</div> -->
116+
<div class="vp-popup-detail-button" data-type="run-save" title="Save to block & Run code">Run & Save</div>
117+
<div class="vp-popup-detail-button" data-type="add" title="Add code to cell">Code to cell</div>
117118
</div>
118119
</div>
119120
<button type="button" class="vp-button activated vp-popup-button vp-popup-save-button" data-type="save" title="Save to target" style="display:none;">OK</button>

‎visualpython/js/com/component/PopupComponent.js

Lines changed: 72 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,13 @@ define([
112112
// show footer
113113
runButton: true,
114114
footer: true,
115+
// position and size
115116
position: { right: 10, top: 120 },
116117
size: { width: 400, height: 550 },
118+
// additional modes and infos
117119
saveOnly: false, // apply mode
120+
resizable: true,
121+
autoScroll: true,
118122
checkModules: [], // module aliases or function names
119123
docs: 'https://visual-python.gitbook.io/docs/getting-started/welcome-to-visual-python',
120124
helpInfo: {
@@ -456,9 +460,10 @@ define([
456460
}
457461
break;
458462
case 'run':
459-
let result = that.run();
463+
var result = that.run();
460464
if (result) {
461-
that.save();
465+
// that.save();
466+
that.close();
462467
}
463468
break;
464469
case 'show-detail':
@@ -474,13 +479,20 @@ define([
474479
$(this.wrapSelector('.vp-popup-detail-button')).on('click', function(evt) {
475480
var btnType = $(this).data('type');
476481
switch(btnType) {
477-
case 'apply':
478-
that.save();
482+
// case 'apply':
483+
// that.save();
484+
// break;
485+
case 'run-save':
486+
var result = that.run();
487+
if (result) {
488+
that.save();
489+
}
479490
break;
480491
case 'add':
481-
let result = that.run(false);
492+
var result = that.run(false);
482493
if (result) {
483-
that.save();
494+
// that.save();
495+
that.close();
484496
}
485497
break;
486498
}
@@ -599,7 +611,7 @@ define([
599611
let {
600612
installButton, importButton, packageButton,
601613
codeview, dataview, helpview, runButton, footer,
602-
sizeLevel, position, docs
614+
sizeLevel, position, autoScroll, docs
603615
} = this.config;
604616

605617
// apply link to docs
@@ -668,6 +680,10 @@ define([
668680
break;
669681
}
670682

683+
if (autoScroll) {
684+
$(this.wrapSelector('.vp-popup-body')).addClass('vp-scrollbar');
685+
}
686+
671687
// set detailed size
672688
$(this.wrapSelector()).css({
673689
width: this.config.size.width + 'px',
@@ -683,7 +699,9 @@ define([
683699
}
684700

685701
this._bindDraggable();
686-
this._bindResizable();
702+
if (this.config.resizable) {
703+
this._bindResizable();
704+
}
687705
}
688706

689707
templateForInnerPopup() {
@@ -785,9 +803,8 @@ define([
785803
vpLog.display(VP_LOG_TYPE.DEVELOP, 'savedState', that.state);
786804
}
787805

788-
_saveSingleState(tag) {
806+
_getTagValue(tag) {
789807
let id = tag.id;
790-
let customKey = $(tag).data('key');
791808
let tagName = $(tag).prop('tagName'); // returns with UpperCase
792809
let newValue = '';
793810
switch(tagName) {
@@ -818,7 +835,14 @@ define([
818835
}
819836
break;
820837
}
838+
return newValue;
839+
}
840+
841+
_saveSingleState(tag) {
842+
let id = tag.id;
843+
let customKey = $(tag).data('key');
821844

845+
let newValue = this._getTagValue(tag);
822846
// if custom key is available, use it
823847
if (customKey && customKey != '') {
824848
// allow custom key until level 2
@@ -947,30 +971,52 @@ define([
947971
* - focus popup
948972
* - bind codemirror
949973
*/
950-
open() {
974+
open(targetFrame=undefined) {
951975
vpLog.display(VP_LOG_TYPE.DEVELOP, 'open popup', this);
952976
this.loadState();
953977

954978
this._beforeOpen();
955-
this.show();
956-
957-
// set popup position if its top-left side is outside of view
958-
let pos = $(this.wrapSelector()).position();
959-
if (pos) {
960-
if (pos.top < 0) {
961-
$(this.wrapSelector()).css({ top: 0 });
962-
}
963-
if (pos.left < 0) {
964-
$(this.wrapSelector()).css({ left: 0 });
979+
if (targetFrame !== undefined) {
980+
// hide popup frame
981+
$(this.wrapSelector('.vp-popup-header')).hide();
982+
$(this.wrapSelector('.vp-popup-footer')).hide();
983+
// set width and height to 100%
984+
$(this.wrapSelector()).css({
985+
width: '100%',
986+
height: '100%',
987+
'min-height': 'unset',
988+
display: 'block',
989+
position: 'initial',
990+
border: '0px'
991+
});
992+
$(this.wrapSelector('.vp-popup-body')).css({
993+
padding: '0px'
994+
});
995+
// show on targetFrame
996+
$(this.wrapSelector()).appendTo($(targetFrame));
997+
} else {
998+
this.show();
999+
1000+
// set popup position if its top-left side is outside of view
1001+
let pos = $(this.wrapSelector()).position();
1002+
if (pos) {
1003+
if (pos.top < 0) {
1004+
$(this.wrapSelector()).css({ top: 0 });
1005+
}
1006+
if (pos.left < 0) {
1007+
$(this.wrapSelector()).css({ left: 0 });
1008+
}
9651009
}
9661010
}
9671011

9681012
this._bindCodemirror();
9691013

970-
$(this.eventTarget).trigger({
971-
type: 'focus_option_page',
972-
component: this
973-
});
1014+
if (targetFrame !== undefined) {
1015+
$(this.eventTarget).trigger({
1016+
type: 'focus_option_page',
1017+
component: this
1018+
});
1019+
}
9741020
}
9751021

9761022
setSaveOnlyMode() {
@@ -1004,6 +1050,7 @@ define([
10041050

10051051
remove() {
10061052
vpLog.display(VP_LOG_TYPE.DEVELOP, 'remove popup', this);
1053+
this._unbindResizable();
10071054
this._unbindEvent();
10081055
this.closeHelpView();
10091056
$(this.wrapSelector()).remove();

0 commit comments

Comments
 (0)