Skip to content

Commit fc066d6

Browse files
minjk-blminjk-bl
committed
#36 - snippets function added
1 parent 95213c1 commit fc066d6

10 files changed

Lines changed: 851 additions & 162 deletions

File tree

‎css/api_block/index.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,8 @@
5454

5555
.vp-apiblock-menu-search-container {
5656
position: relative;
57+
display: inline-block;
58+
width: 160px;
5759
}
5860

5961
.vp-menu-search-box {
@@ -68,6 +70,65 @@
6870
top: 7px;
6971
}
7072

73+
.vp-apiblock-menu-apps {
74+
display: inline-block;
75+
width: 18px;
76+
height: 27px;
77+
vertical-align: middle;
78+
79+
cursor: pointer;
80+
}
81+
.vp-apiblock-menu-apps-container {
82+
display: none;
83+
position: absolute;
84+
top: 0px;
85+
left: 200px;
86+
width: 210px;
87+
height: 210px;
88+
z-index: 15;
89+
background: rgba(255, 255, 255, 0.8);
90+
grid-template-columns: 60px 60px 60px;
91+
grid-template-rows: 60px 60px 60px;
92+
grid-column-gap: 5px;
93+
grid-row-gap: 5px;
94+
padding: 10px;
95+
box-sizing: border-box;
96+
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
97+
/* border: 0.25px solid #C4C4C4; */
98+
border: 0.25px solid var(--border-gray-color);
99+
border-radius: 5px;
100+
}
101+
.vp-apiblock-menu-apps-container.show {
102+
display: grid !important;
103+
}
104+
105+
.vp-apiblock-menu-apps-item {
106+
width: 60px;
107+
height: 60px;
108+
text-align: center;
109+
border: 0.25px solid #C4C4C4;
110+
box-sizing: border-box;
111+
box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.1);
112+
border-radius: 2px;
113+
padding: 8px 0px;
114+
}
115+
.vp-apiblock-menu-apps-item.line1 {
116+
background: #F9B52A;
117+
}
118+
.vp-apiblock-menu-apps-item.line2 {
119+
background: #EF8F3C
120+
}
121+
.vp-apiblock-menu-apps-item.line3 {
122+
background: #EB773C;
123+
}
124+
.vp-apiblock-menu-apps-item img {
125+
width: 24px;
126+
height: 24px;
127+
}
128+
.vp-apiblock-menu-apps-name {
129+
color: #FFFFFF;
130+
}
131+
71132
.vp-apiblock-menu-box {
72133
background: #FFFFFF;
73134
border: 0.25px solid #E4E4E4;

‎css/common/snippets.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.vp-sn {
2+
position: absolute;
3+
top: 0;
4+
left: 0;
5+
width: 100%;
6+
height: 100%;
7+
8+
z-index: 1200;
9+
10+
background-color: rgba(0,0,0,.4);
11+
}
12+
13+
.vp-sn-container {
14+
position: relative;
15+
left: 50%;
16+
top: 50%;
17+
transform:translate(-50%, -50%);
18+
19+
min-width: 400px;
20+
min-height: 400px;
21+
width: 95%;
22+
height: 95%;
23+
24+
background-color: white;
25+
}
26+
27+
.vp-sn-title {
28+
height: 30px;
29+
padding: 5px 0px 5px 10px;
30+
31+
background-color: #EEE;
32+
border: 1px solid #ddd;;
33+
display: flex;
34+
flex-direction: row;
35+
position: relative;
36+
37+
font-weight: 700;
38+
}
39+
40+
.vp-sn-close {
41+
position: fixed;
42+
z-index: 3;
43+
right: 5px;
44+
width: 20px;
45+
height: 20px;
46+
line-height: 20px;
47+
top: 5px;
48+
text-align: center;
49+
}
50+
51+
.vp-sn-body {
52+
width: 100%;
53+
height: calc(100% - 30px);
54+
padding: 10px;
55+
display: grid;
56+
grid-row-gap: 5px;
57+
grid-template-rows: 35px 30px 60% calc(40% - 80px);
58+
}

‎css/file_io/udf.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,4 +107,165 @@
107107
.vp-cm-popup-menu {
108108
min-height: 20px;
109109
cursor: pointer;
110+
}
111+
112+
113+
/** new */
114+
.vp-sn-body {
115+
padding: 10px;
116+
}
117+
.vp-sn-header {
118+
height: 30px;
119+
}
120+
.vp-sn-header label {
121+
font-weight: bold;
122+
font-size: 13px;
123+
line-height: 16px;
124+
}
125+
.vp-sn-menu {
126+
float: right;
127+
cursor: pointer;
128+
}
129+
.vp-sn-menu-box {
130+
display: none;
131+
position: absolute;
132+
top: 0px;
133+
right: 40px;
134+
width: 70px;
135+
height: 50px;
136+
border: 0.25px solid var(--border-gray-color);
137+
background: #FFFFFF;
138+
}
139+
.vp-sn-menu-item {
140+
height: 25px;
141+
line-height: 25px;
142+
padding: 0px 5px;
143+
cursor: pointer;
144+
}
145+
146+
.vp-sn-search-box {
147+
148+
}
149+
.vp-sn-search {
150+
width: 100%;
151+
height: 30px;
152+
}
153+
.vp-sn-search-box i {
154+
position: absolute;
155+
color: #C4C4C4;
156+
right: 20px;
157+
padding-top: 8px;
158+
}
159+
.vp-sn-func-box {
160+
height: 50px;
161+
padding: 10px 0px;
162+
}
163+
.vp-sn-func-left {
164+
float: left;
165+
}
166+
.vp-sn-func-right {
167+
float: right;
168+
}
169+
.vp-sn-filter {
170+
cursor: pointer;
171+
}
172+
.vp-sn-filter-menu-box {
173+
display: none;
174+
position: absolute;
175+
width: 80px;
176+
height: 50px;
177+
border: 0.25px solid var(--border-gray-color);
178+
background: #FFFFFF;
179+
}
180+
.vp-sn-filter-menu-item {
181+
height: 25px;
182+
line-height: 25px;
183+
padding: 0px 5px;
184+
cursor: pointer;
185+
}
186+
187+
.vp-sn-func-export-mode {
188+
display: none;
189+
}
190+
191+
.vp-sn-item-check {
192+
display: none;
193+
float: right;
194+
margin: 7px 7px !important;
195+
}
196+
197+
/* export mode */
198+
.vp-sn-export-mode .vp-sn-func-export-mode {
199+
display: block;
200+
}
201+
.vp-sn-export-mode .vp-sn-func-default-mode {
202+
display: none;
203+
}
204+
.vp-sn-export-mode .vp-sn-item-menu {
205+
display: none;
206+
}
207+
#vp-wrapper .vp-sn-export-mode input.vp-sn-checkbox {
208+
display: inline-block;
209+
position: relative !important;
210+
width: 13px;
211+
height: 13px;
212+
border: 1px solid #828282;
213+
margin: 0px 15px;
214+
}
215+
216+
217+
/* if snippets list empty */
218+
.vp-sn-table:empty::after {
219+
content: '(No saved snippets)';
220+
color: #C4C4C4;
221+
}
222+
.vp-sn-item {
223+
min-height: 30px;
224+
}
225+
.vp-sn-item.selected {
226+
background: #F5F5F5;
227+
}
228+
.vp-sn-item-header {
229+
height: 30px;
230+
line-height: 30px;
231+
padding: 0px 7px;
232+
border: 0.25px solid var(--border-gray-color);
233+
box-sizing: border-box;
234+
}
235+
.vp-sn-item-header .vp-sn-indicator {
236+
display: inline-block;
237+
cursor: pointer;
238+
background-image: url(../../resource/chevron_big_right.svg);
239+
background-size: contain;
240+
background-repeat: no-repeat;
241+
width: 10px;
242+
height: 10px;
243+
}
244+
.vp-sn-item-header .vp-sn-indicator.open {
245+
background-image: url(../../resource/chevron_big_down.svg) !important;
246+
}
247+
.vp-sn-item-title {
248+
width: calc(100% - 70px);
249+
outline: none;
250+
border: 0.5px solid white !important;
251+
}
252+
.vp-sn-item.selected .vp-sn-item-title {
253+
background: #F5F5F5;
254+
color: var(--font-hightlight);
255+
}
256+
.vp-sn-item-title:focus {
257+
transition: 0.7s;
258+
border: 1px solid #FFCF73;
259+
border: 0.5px solid var(--hightlight-color) !important;
260+
}
261+
.vp-sn-item-menu {
262+
float: right;
263+
}
264+
.vp-sn-item-menu-item {
265+
display: inline-block;
266+
cursor: pointer;
267+
}
268+
.vp-sn-item-code {
269+
display: none;
270+
border: 0.25px solid var(--border-gray-color);
110271
}

‎css/root.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
--grid-line-color: #E4E4E4;
44
--light-gray-color: #F5F5F5;
55
--hightlight-color: #E85401;
6-
6+
--gray-color: #C4C4C4;
7+
78
--font-hightlight: #E85401;
89
--font-primary: #696969;
910
}

‎src/api_block/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,39 @@
1313
<input id="vp_menuSearchBox" class="vp-menu-search-box" type="text" placeholder="Search"/>
1414
<i class="fa fa-search vp-menu-search-icon"></i>
1515
</div>
16+
<div class="vp-apiblock-menu-apps">
17+
<img id="vp_menuApps" src="/nbextensions/visualpython/resource/apps/apps.svg">
18+
<div id="vp_menuAppsContainer" class="vp-apiblock-menu-apps-container">
19+
<div class="vp-apiblock-menu-apps-item line1" data-menu="snippets">
20+
<img src="/nbextensions/visualpython/resource/apps/apps_snippets.svg">
21+
<div class="vp-apiblock-menu-apps-name">Snippets</div>
22+
</div>
23+
<div class="vp-apiblock-menu-apps-item line1" data-menu="variable">
24+
<img src="/nbextensions/visualpython/resource/apps/apps_variable.svg">
25+
<div class="vp-apiblock-menu-apps-name">Variable</div>
26+
</div>
27+
<div class="vp-apiblock-menu-apps-item line1" data-menu="file">
28+
<img src="/nbextensions/visualpython/resource/apps/apps_file.svg">
29+
<div class="vp-apiblock-menu-apps-name">File</div>
30+
</div>
31+
<div class="vp-apiblock-menu-apps-item line2" data-menu="instance">
32+
<img src="/nbextensions/visualpython/resource/apps/apps_instance.svg">
33+
<div class="vp-apiblock-menu-apps-name">Instance</div>
34+
</div>
35+
<div class="vp-apiblock-menu-apps-item line2" data-menu="subset">
36+
<img src="/nbextensions/visualpython/resource/apps/apps_subset.svg">
37+
<div class="vp-apiblock-menu-apps-name">Subset</div>
38+
</div>
39+
<div class="vp-apiblock-menu-apps-item line2" data-menu="frame">
40+
<img src="/nbextensions/visualpython/resource/apps/apps_frame.svg">
41+
<div class="vp-apiblock-menu-apps-name">Frame</div>
42+
</div>
43+
<div class="vp-apiblock-menu-apps-item line3" data-menu="chart">
44+
<img src="/nbextensions/visualpython/resource/apps/apps_chart.svg">
45+
<div class="vp-apiblock-menu-apps-name">Chart</div>
46+
</div>
47+
</div>
48+
</div>
1649

1750
<div class="vp-apiblock-tab-navigation-body
1851
vp-apiblock-tab-navigation-body-1">

0 commit comments

Comments
 (0)