Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitaa55d20

Browse files
author
minjk-bl
committed
Edit popup component not to save to block as default
1 parent3027838 commitaa55d20

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:1px8px05px;
285285
}
286286
/* checkbox */
287-
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox),
287+
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle),
288288
.vp-popup-frameinput[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-frameinput[type=checkbox]:not(.vp-checkbox)+label,
298+
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle)+label,
299299
.vp-popup-frameinput[type=radio]:not(.vp-radio)+label,
300-
.vp-popup-framelabelinput[type=checkbox]:not(.vp-checkbox)+span,
300+
.vp-popup-framelabelinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle)+span,
301301
.vp-popup-framelabelinput[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-frameinput[type=checkbox]:not(.vp-checkbox):disabled+label,
310+
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled+label,
311311
.vp-popup-frameinput[type=radio]:not(.vp-radio):disabled+label,
312-
.vp-popup-framelabelinput[type=checkbox]:not(.vp-checkbox):disabled+span,
312+
.vp-popup-framelabelinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled+span,
313313
.vp-popup-framelabelinput[type=radio]:not(.vp-radio):disabled+span {
314314
color:var(--vp-gray-color);
315315
}
316-
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox)+label::before,
317-
.vp-popup-framelabelinput[type=checkbox]:not(.vp-checkbox)+span::before {
316+
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle)+label::before,
317+
.vp-popup-framelabelinput[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-frameinput[type=checkbox]:not(.vp-checkbox):checked+label::before,
332-
.vp-popup-framelabelinput[type=checkbox]:not(.vp-checkbox):checked+span::before {
331+
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):checked+label::before,
332+
.vp-popup-framelabelinput[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-frameinput[type=checkbox]:not(.vp-checkbox):disabled+label::before,
346-
.vp-popup-framelabelinput[type=checkbox]:not(.vp-checkbox):disabled+span::before {
345+
.vp-popup-frameinput[type=checkbox]:not(.vp-checkbox):not(.vp-toggle):disabled+label::before,
346+
.vp-popup-framelabelinput[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-frameselect::-ms-expand {
450450
display: none;
451451
}
452+
/* toggle slider: <label><input class="vp-toggle" type="checkbox"/><span></span></label> */
453+
.vp-popup-frameinput.vp-toggle {
454+
opacity:0;
455+
width:0;
456+
height:0;
457+
}
458+
459+
.vp-popup-frameinput.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-frameinput[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-frameinput.vp-toggle:checked+span {
490+
background-color:#2196F3;
491+
}
492+
493+
.vp-popup-frameinput.vp-toggle:focus+span {
494+
box-shadow:001px#2196F3;
495+
}
496+
497+
.vp-popup-frameinput.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
<divclass="vp-popup-return"title="Return size of this popup"></div>
6363
<divclass="vp-popup-close"title="Close popup"></div>
6464
</div>
65-
<divclass="vp-popup-body vp-scrollbar">
65+
<divclass="vp-popup-body">
6666
<divclass="vp-popup-body-top-bar vp-italic vp-gray-text vp-no-selection vp-cursor">
6767
<spanid="popupInstall"class="vp-popup-body-top-bar-item"data-type="install">
6868
Install Package
@@ -112,8 +112,9 @@
112112
<divclass="vp-icon-arrow-short-up"></div>
113113
</button>
114114
<divclass="vp-popup-run-detailbox vp-cursor vp-close-on-blur">
115-
<divclass="vp-popup-detail-button"data-type="apply"title="Save to block">Save to block</div>
116-
<divclass="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+
<divclass="vp-popup-detail-button"data-type="run-save"title="Save to block & Run code">Run & Save</div>
117+
<divclass="vp-popup-detail-button"data-type="add"title="Add code to cell">Code to cell</div>
117118
</div>
118119
</div>
119120
<buttontype="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-
letresult=that.run();
463+
varresult=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
varbtnType=$(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+
varresult=that.run();
487+
if(result){
488+
that.save();
489+
}
479490
break;
480491
case'add':
481-
letresult=that.run(false);
492+
varresult=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
letid=tag.id;
790-
letcustomKey=$(tag).data('key');
791808
lettagName=$(tag).prop('tagName');// returns with UpperCase
792809
letnewValue='';
793810
switch(tagName){
@@ -818,7 +835,14 @@ define([
818835
}
819836
break;
820837
}
838+
returnnewValue;
839+
}
840+
841+
_saveSingleState(tag){
842+
letid=tag.id;
843+
letcustomKey=$(tag).data('key');
821844

845+
letnewValue=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-
letpos=$(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+
letpos=$(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)
[8]ページ先頭
©2009-2025 Movatter.jp