Skip to content

Commit 51a6a2c

Browse files
minjk-blminjk-bl
committed
popup button box update (preview/cancel/run/add)
1 parent 566cecb commit 51a6a2c

8 files changed

Lines changed: 547 additions & 137 deletions

File tree

‎css/common/frameEditor.css‎

Lines changed: 72 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@
5656

5757
.vp-fe-body {
5858
width: 100%;
59-
height: calc(100% - 30px);
59+
height: calc(100% - 80px);
6060
padding: 10px;
6161
display: grid;
6262
grid-row-gap: 5px;
@@ -296,8 +296,78 @@
296296
padding: 7px;
297297
}
298298

299+
.vp-fe-preview-box {
300+
display: none;
301+
width: 100%;
302+
height: 100px;
303+
position: absolute;
304+
bottom: 50px;
305+
306+
background: #F7F7F7;
307+
border: 0.25px solid #E4E4E4;
308+
padding: 10px;
309+
}
310+
299311
/** buttons */
300312
.vp-fe-btn-box {
313+
/* position: absolute;
314+
bottom: 25px;
315+
right: 25px; */
316+
position: relative;
317+
height: 50px;
318+
border-top: 0.25px solid var(--border-gray-color);
319+
}
320+
.vp-fe-btn {
321+
position: absolute;
322+
}
323+
.vp-fe-btn-preview {
324+
left: 15px;
325+
top: 11px;
326+
}
327+
.vp-fe-btn-cancel {
328+
top: 11px;
329+
right: 105px;
330+
}
331+
.vp-fe-btn-runadd {
332+
position: absolute;
333+
top: 11px;
334+
right: 15px;
335+
width: fit-content;
336+
height: 30px;
337+
background: #F38504;
338+
border-radius: 2px;
339+
}
340+
.vp-fe-btn-run {
341+
display: inline-block;
342+
width: 60px;
343+
border-radius: 2px 0px 0px 2px;
344+
border-right: 0.25px solid white !important;
345+
}
346+
.vp-fe-btn-detail {
347+
display: inline-block;
348+
width: 20px;
349+
border-radius: 0px 2px 2px 0px;
350+
}
351+
.vp-fe-detail-box {
352+
display: none;
353+
background: white;
354+
border: 0.25px solid var(--border-gray-color);
355+
position: absolute;
356+
bottom: 35px;
357+
right: 1px;
358+
width: 84px;
359+
height: 30px;
360+
text-align: center;
361+
line-height: 30px;
362+
}
363+
.vp-fe-detail-item {
364+
color: var(--font-primary);
365+
}
366+
.vp-fe-detail-item:hover {
367+
color: var(--font-hightlight);
368+
background: var(--light-gray-color);
369+
}
370+
/* .vp-fe-btn-box {
301371
position: absolute;
302372
bottom: 10px;
303373
right: 10px;
@@ -331,4 +401,4 @@
331401
.vp-fe-btn-cancel:hover
332402
, .vp-fe-popup-cancel:hover {
333403
background: #ccc;
334-
}
404+
} */

‎css/common/popupPage.css‎

Lines changed: 59 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -51,44 +51,82 @@
5151

5252
.vp-pp-body {
5353
width: 100%;
54-
height: calc(100% - 30px);
54+
height: calc(100% - 80px);
5555
padding: 10px;
5656
display: grid;
5757
grid-row-gap: 5px;
5858
grid-template-rows: 35px 30px 60% calc(40% - 80px);
5959
overflow: auto;
6060
}
6161

62+
.vp-pp-preview-box {
63+
display: none;
64+
width: 100%;
65+
height: 100px;
66+
position: absolute;
67+
bottom: 50px;
68+
69+
background: #F7F7F7;
70+
border: 0.25px solid #E4E4E4;
71+
padding: 10px;
72+
}
6273

6374
/** buttons */
6475
.vp-pp-btn-box {
65-
position: absolute;
76+
/* position: absolute;
6677
bottom: 25px;
67-
right: 25px;
78+
right: 25px; */
79+
position: relative;
80+
height: 50px;
81+
border-top: 0.25px solid var(--border-gray-color);
6882
}
69-
.vp-pp-btn-apply {
70-
width: 80px;
71-
height: 30px;
72-
background: #F37704;
73-
border: 0.25px solid #C4C4C4;
74-
box-sizing: border-box;
75-
border-radius: 2px;
76-
text-align: center;
77-
color: #FFFFFF;
83+
.vp-pp-btn {
84+
position: absolute;
7885
}
79-
.vp-pp-btn-apply:hover {
80-
background: var(--hightlight-color);
86+
.vp-pp-btn-preview {
87+
left: 15px;
88+
top: 11px;
8189
}
8290
.vp-pp-btn-cancel {
83-
width: 80px;
91+
top: 11px;
92+
right: 105px;
93+
}
94+
.vp-pp-btn-runadd {
95+
position: absolute;
96+
top: 11px;
97+
right: 15px;
98+
width: fit-content;
8499
height: 30px;
85-
background: #E5E5E5;
86-
border: 0.25px solid #C4C4C4;
87-
box-sizing: border-box;
100+
background: #F38504;
88101
border-radius: 2px;
102+
}
103+
.vp-pp-btn-run {
104+
display: inline-block;
105+
width: 60px;
106+
border-radius: 2px 0px 0px 2px;
107+
border-right: 0.25px solid white !important;
108+
}
109+
.vp-pp-btn-detail {
110+
display: inline-block;
111+
width: 20px;
112+
border-radius: 0px 2px 2px 0px;
113+
}
114+
.vp-pp-detail-box {
115+
display: none;
116+
background: white;
117+
border: 0.25px solid var(--border-gray-color);
118+
position: absolute;
119+
bottom: 35px;
120+
right: 1px;
121+
width: 84px;
122+
height: 30px;
89123
text-align: center;
90-
color: #696969;
124+
line-height: 30px;
125+
}
126+
.vp-pp-detail-item {
127+
color: var(--font-primary);
91128
}
92-
.vp-pp-btn-cancel:hover {
93-
background: #ccc;
129+
.vp-pp-detail-item:hover {
130+
color: var(--font-hightlight);
131+
background: var(--light-gray-color);
94132
}

‎css/common/subsetEditor.css‎

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757

5858
.vp-ds-body {
5959
width: 100%;
60-
height: calc(100% - 30px);
60+
height: calc(100% - 80px);
6161
padding: 10px;
6262
overflow: auto;
6363
}
@@ -291,36 +291,64 @@
291291

292292
/** buttons */
293293
.vp-ds-btn-box {
294-
position: absolute;
294+
/* position: absolute;
295295
bottom: 25px;
296-
right: 25px;
296+
right: 25px; */
297+
position: relative;
298+
height: 50px;
299+
border-top: 0.25px solid var(--border-gray-color);
297300
}
298-
.vp-ds-btn-apply {
299-
width: 80px;
300-
height: 30px;
301-
background: #F37704;
302-
border: 0.25px solid #C4C4C4;
303-
box-sizing: border-box;
304-
border-radius: 2px;
305-
text-align: center;
306-
color: #FFFFFF;
301+
.vp-ds-btn {
302+
position: absolute;
307303
}
308-
.vp-ds-btn-apply:hover {
309-
background: var(--hightlight-color);
304+
.vp-ds-btn-preview {
305+
left: 15px;
306+
top: 11px;
310307
}
311308
.vp-ds-btn-cancel {
312-
width: 80px;
309+
top: 11px;
310+
right: 105px;
311+
}
312+
.vp-ds-btn-runadd {
313+
position: absolute;
314+
top: 11px;
315+
right: 15px;
316+
width: fit-content;
313317
height: 30px;
314-
background: #E5E5E5;
315-
border: 0.25px solid #C4C4C4;
316-
box-sizing: border-box;
318+
background: #F38504;
317319
border-radius: 2px;
320+
}
321+
.vp-ds-btn-run {
322+
display: inline-block;
323+
width: 60px;
324+
border-radius: 2px 0px 0px 2px;
325+
border-right: 0.25px solid white !important;
326+
}
327+
.vp-ds-btn-detail {
328+
display: inline-block;
329+
width: 20px;
330+
border-radius: 0px 2px 2px 0px;
331+
}
332+
.vp-ds-detail-box {
333+
display: none;
334+
background: white;
335+
border: 0.25px solid var(--border-gray-color);
336+
position: absolute;
337+
bottom: 35px;
338+
right: 1px;
339+
width: 84px;
340+
height: 30px;
318341
text-align: center;
319-
color: #696969;
342+
line-height: 30px;
320343
}
321-
.vp-ds-btn-cancel:hover {
322-
background: #ccc;
344+
.vp-ds-detail-item {
345+
color: var(--font-primary);
323346
}
347+
.vp-ds-detail-item:hover {
348+
color: var(--font-hightlight);
349+
background: var(--light-gray-color);
350+
}
351+
324352

325353
/* data page */
326354
.vp-ds-data-view-all-div {

‎src/api_block/init.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -325,9 +325,10 @@ define([
325325
});
326326

327327
/** Apps Menu Apply event */
328-
$(document).on('popup_apply subset_apply frame_apply', '#vp_appsCode', function(evt) {
328+
$(document).on('popup_run subset_run frame_run', '#vp_appsCode', function(evt) {
329329
var code = evt.code;
330330
var title = evt.title;
331+
var runCell = evt.runCell == true;
331332

332333
var isFirstBlock = false;
333334
const blockList = blockContainer.getBlockList();
@@ -392,7 +393,7 @@ define([
392393
}
393394

394395
// 2. add cell and run cell
395-
createdBlock.runThisBlock();
396+
createdBlock.runThisBlock(runCell);
396397
});
397398

398399
/** Logic, API, Data Analysis 의 > 버튼 클릭 */

0 commit comments

Comments
 (0)