Skip to content

Commit dd4b2ab

Browse files
minjk-blminjk-bl
committed
#31 - Edit Frame Editor as popup
1 parent 07ba8aa commit dd4b2ab

7 files changed

Lines changed: 620 additions & 110 deletions

File tree

‎css/common/frameEditor.css‎

Lines changed: 89 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222

2323
min-width: 400px;
2424
min-height: 400px;
25-
width: 90%;
26-
height: 90%;
25+
width: 95%;
26+
height: 95%;
2727

2828
background-color: white;
2929
}
@@ -41,7 +41,8 @@
4141
font-weight: 700;
4242
}
4343

44-
.vp-fe-close {
44+
.vp-fe-close,
45+
.vp-fe-popup-close {
4546
position: fixed;
4647
z-index: 3;
4748
right: 5px;
@@ -54,10 +55,31 @@
5455

5556
.vp-fe-body {
5657
width: 100%;
57-
height: 100%;
58+
height: calc(100% - 30px);
5859
padding: 10px;
5960
display: grid;
6061
grid-row-gap: 5px;
62+
grid-template-rows: 35px 30px 60% calc(40% - 80px);
63+
}
64+
65+
/* preview code */
66+
.vp-fe-preview {
67+
width: 100%;
68+
height: 35px;
69+
background-image: repeating-linear-gradient( to right, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--grid-line-color) 0, var(--grid-line-color) 0.25px, transparent 1px, transparent 5px );
70+
background-color: white;
71+
border: 0.25px solid #E4E4E4;
72+
}
73+
.vp-fe-preview textarea {
74+
display: none;
75+
}
76+
77+
.vp-fe-preview .CodeMirror-code .cm-variable {
78+
background-color: rgba(47, 133, 90, 0.2);
79+
}
80+
81+
.vp-fe-preview .CodeMirror-code .cm-string {
82+
background-color: rgba(246, 173, 85, 0.2);
6183
}
6284

6385
.vp-fe-df-box {
@@ -74,18 +96,23 @@
7496
}
7597

7698
.vp-fe-menu-box {
77-
display: grid;
78-
grid-template-columns: repeat(6, 1fr);
99+
position: fixed;
100+
top: 0;
101+
left: 0;
102+
background: #FFFFFF;
103+
z-index: 70;
104+
/* display: grid;
105+
grid-template-columns: repeat(6, 1fr); */
79106
}
80107

81108
.vp-fe-menu-box .vp-fe-menu-item {
82-
height: 30px;
109+
height: 25px;
110+
line-height: 25px;
83111
background: #FFFFFF;
84112
border: 0.25px solid #E4E4E4;
85113
box-sizing: border-box;
86114
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
87115
border-radius: 2px;
88-
line-height: 30px;
89116
font-size: 11px;
90117
text-align: center;
91118
color: #696969;
@@ -107,15 +134,42 @@
107134
background: #F8F8F8;
108135
}
109136

110-
.vp-fe-info {
111-
margin: 0px;
137+
.vp-fe-menu-sub-box {
138+
display: none;
139+
position: absolute;
140+
left: 100%;
112141
}
113-
.vp-fe-info .vp-accordion-header {
114-
background: #F5F5F5;
142+
143+
.vp-fe-menu-item:hover .vp-fe-menu-sub-box {
144+
display: block;
145+
}
146+
147+
.vp-fe-popup-box {
148+
position: absolute;
149+
left: 50%;
150+
top: 50%;
151+
transform: translate(-50%, -50%);
152+
min-width: 400px;
153+
/* min-height: 150px; */
154+
width: 30%;
155+
height: fit-content;
156+
background-color: white;
157+
z-index: 200;
158+
border: 0.25px solid var(--border-gray-color);
159+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
160+
}
161+
162+
.vp-fe-popup-body {
163+
padding: 10px;
164+
}
165+
166+
.vp-fe-popup-button-box {
167+
float: right;
168+
padding: 5px;
115169
}
116170

117171
.vp-fe-table {
118-
height: 350px;
172+
height: 100%;
119173
background: var(--border-gray-color);
120174
overflow: auto;
121175
}
@@ -139,7 +193,8 @@
139193
}
140194

141195
.vp-fe-table th.selected {
142-
color: var(--hightlight-color);
196+
/* color: var(--hightlight-color); */
197+
background: #add3fd;
143198
}
144199

145200
.vp-fe-table th:hover {
@@ -171,15 +226,26 @@
171226

172227
.vp-fe-info {
173228
width: 100%;
229+
height: 100%;
230+
margin: 0px;
231+
}
232+
233+
.vp-fe-info-title {
234+
width: 100%;
235+
height: 20px;
236+
line-height: 20px;
237+
font-weight: bold;
238+
background: #F5F5F5;
174239
}
175240

176241
.vp-fe-info-content {
177242
width: 100%;
243+
height: calc(100% - 20px);
178244
overflow: auto;
179245
}
180246

181247
.vp-fe-info-content pre {
182-
width: 300px;
248+
/* width: 300px; */
183249
padding:10px;
184250
white-space: pre-wrap;
185251
overflow: auto;
@@ -196,7 +262,8 @@
196262
bottom: 10px;
197263
right: 10px;
198264
}
199-
.vp-fe-btn-apply {
265+
.vp-fe-btn-apply
266+
, .vp-fe-popup-ok {
200267
width: 80px;
201268
height: 30px;
202269
background: #F37704;
@@ -206,10 +273,12 @@
206273
text-align: center;
207274
color: #FFFFFF;
208275
}
209-
.vp-fe-btn-apply:hover {
276+
.vp-fe-btn-apply:hover
277+
, .vp-fe-popup-ok:hover {
210278
background: var(--hightlight-color);
211279
}
212-
.vp-fe-btn-cancel {
280+
.vp-fe-btn-cancel
281+
, .vp-fe-popup-cancel {
213282
width: 80px;
214283
height: 30px;
215284
background: #E5E5E5;
@@ -219,6 +288,7 @@
219288
text-align: center;
220289
color: #696969;
221290
}
222-
.vp-fe-btn-cancel:hover {
291+
.vp-fe-btn-cancel:hover
292+
, .vp-fe-popup-cancel:hover {
223293
background: #ccc;
224294
}

‎css/common/subsetEditor.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,7 @@
331331
overflow: auto;
332332
}
333333
.vp-ds-data-view-box table {
334-
width: 100%;
334+
/* width: 100%; */
335335
height: 100%;
336336
}
337337
.vp-ds-data-error-box {

‎css/pandas/commonPandas.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,13 @@
100100
width: 116px;
101101
}
102102

103+
#vp-wrapper .vp-textarea {
104+
border: 0.25px solid var(--border-gray-color);
105+
width: 100%;
106+
height: 100px;
107+
margin: 0px;
108+
}
109+
103110
/* 공통 스타일 */
104111
.w100 { width: 100%; }
105112
.w90 { width: 90%; }

0 commit comments

Comments
 (0)