Skip to content

Commit cee048c

Browse files
minjk-blminjk-bl
authored
Merge pull request #213 from minjk-bl/devops
Devops
2 parents d5dacbb + cc79808 commit cee048c

30 files changed

Lines changed: 1412 additions & 148 deletions

‎visualpython/css/component/popupComponent.css‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,24 @@
8181
font-family: 'AppleSDGothicNeo';
8282
color: var(--vp-font-highlight);
8383
}
84+
.vp-popup-docs {
85+
position: absolute;
86+
width: 15px;
87+
height: 20px;
88+
top: 4px;
89+
right: 85px;
90+
z-index: 3;
91+
line-height: 20px;
92+
text-align: center;
93+
cursor: pointer;
94+
color: var(--vp-gray-color);
95+
}
96+
.vp-popup-docs > div {
97+
width: 20px;
98+
height: 20px;
99+
/* LAB: img to background-image */
100+
background: center / contain no-repeat url(../../img/docs.svg);
101+
}
84102
.vp-popup-maximize {
85103
position: absolute;
86104
width: 15px;

‎visualpython/css/m_apps/frame.css‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99
/* grid-template-rows: 35px 30px 60% calc(40% - 80px); */
1010
/* grid-template-rows: 35px 30px calc(100% - 80px); */
1111
/* grid-template-rows: 35px 65px calc(100% - 110px); */
12-
grid-template-rows: 35px 65px 35px calc(100% - 145px);
12+
/* grid-template-rows: 35px 65px 35px calc(100% - 145px); */
13+
grid-template-rows: 65px 30px calc(100% - 115px);
1314
grid-template-columns: 100%;
1415
}
1516

@@ -55,11 +56,22 @@
5556
}
5657
.vp-fe-toolbar {
5758
/* border-top: 1px solid var(--vp-border-gray-color); */
58-
padding-top: 5px;
59+
/* padding-top: 5px; */
5960
}
6061
.vp-fe-toolbar-item {
61-
width: 100px;
62-
margin-right: 5px;
62+
width: 50px;
63+
height: 50px;
64+
/* margin-right: 5px; */
65+
display: inline-block;
66+
border: 0.25px solid var(--vp-border-gray-color);
67+
box-sizing: border-box;
68+
box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%);
69+
border-radius: 3px;
70+
line-height: 40px;
71+
vertical-align: middle;
72+
cursor: pointer;
73+
padding: 5px;
74+
text-align: center;
6375
}
6476
.vp-fe-menu-box {
6577
position: absolute;

‎visualpython/css/m_apps/information.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
#vp_varDetailTable:empty::after {
2+
content: '(Select variables to preview the data.)';
3+
color: var(--vp-highlight-color);
4+
font-style: italic;
5+
}
6+
#vp_varDetailTable {
7+
width: 100%;
8+
height: 300px;
9+
overflow: auto;
10+
}
11+
12+
.vp-information-body {
13+
display: grid;
14+
grid-template-columns: calc(50% - 8px) calc(50% - 8px);
15+
grid-template-rows: 100%;
16+
grid-row-gap: 5px;
17+
grid-column-gap: 15px;
18+
align-items: baseline;
19+
align-content: baseline;
20+
height: 100%;
21+
}
22+
.vp-information-left-box,
23+
.vp-information-right-box {
24+
height: 100%;
25+
}
26+
.vp-information-left-box {
27+
display: grid;
28+
grid-template-rows: 30px 10px 30px calc(100% - 75px);
29+
}
30+
.vp-information-toolbox {
31+
height: 30px;
32+
}
33+
/* dropdown menu */
34+
.vp-dropdown {
35+
position: relative;
36+
display: inline-block;
37+
}
38+
.vp-dropdown-content {
39+
display: none;
40+
position: absolute;
41+
background-color: var(--vp-background-color);
42+
min-width: 100px;
43+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
44+
z-index: 1;
45+
}
46+
.vp-dropdown-content .vp-dropdown-item {
47+
height: 30px;
48+
line-height: 30px;
49+
background: var(--vp-background-color);
50+
border: 0.25px solid var(--vp-border-gray-color);
51+
box-sizing: border-box;
52+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
53+
border-radius: 2px;
54+
font-size: 13px;
55+
text-align: left;
56+
color: var(--vp-font-primary);
57+
cursor: pointer;
58+
-webkit-touch-callout: none;
59+
-webkit-user-select: none;
60+
-khtml-user-select: none;
61+
-moz-user-select: none;
62+
-ms-user-select: none;
63+
user-select: none;
64+
text-overflow: ellipsis;
65+
/* overflow: hidden; */
66+
white-space: nowrap;
67+
padding: 0px 5px;
68+
}
69+
.vp-dropdown-content .vp-dropdown-item:not(.disabled):not(.selected):hover {
70+
background-color: var(--vp-border-gray-color);
71+
}
72+
.vp-dropdown:not(.disabled):hover .vp-dropdown-content {
73+
display: block;
74+
}
75+
.vp-dropdown:not(.disabled):hover .vp-drop-button:not(.selected) {
76+
background-color: var(--vp-border-gray-color);
77+
}
78+
.vp-drop-button.selected,
79+
.vp-dropdown-content .vp-dropdown-item.selected {
80+
background-color: var(--vp-highlight-color);
81+
color: var(--vp-background-color);
82+
}
83+
.vp-drop-button {
84+
background-color: var(--vp-background-color);
85+
color: var(--vp-font-primary);
86+
padding: 5px 7px;
87+
border: 0.25px solid var(--vp-border-gray-color);
88+
cursor: pointer;
89+
height: 30px;
90+
font-size: 13px;
91+
}
92+
.vp-information-menu.disabled {
93+
color: var(--vp-gray-color);
94+
cursor: not-allowed;
95+
}
96+
.vp-variable-preview {
97+
margin-top: 5px;
98+
align-content: baseline;
99+
}
100+
.vp-variable-preview thead th {
101+
cursor: pointer;
102+
}
103+
.vp-variable-preview thead th.selected {
104+
background-color: var(--vp-highlight-color);
105+
color: var(--vp-background-color);
106+
}
107+
.vp-information-preview-header {
108+
height: 30px;
109+
line-height: 30px;
110+
margin-bottom: 5px;
111+
}
112+
.vp-information-run-button {
113+
display: inline-block;
114+
width: 80px;
115+
height: 30px;
116+
line-height: 20px;
117+
background: var(--vp-highlight-color);
118+
/* border: 0.25px solid var(--vp-border-gray-color); */
119+
box-sizing: border-box;
120+
box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%);
121+
border-radius: 3px;
122+
padding: 5px 10px;
123+
font-size: 13px;
124+
vertical-align: middle;
125+
text-align: center;
126+
color: white;
127+
float: right;
128+
cursor: pointer;
129+
}
130+
.vp-information-preview-box {
131+
min-height: 352px;
132+
width: 100%;
133+
height: calc(100% - 40px);
134+
grid-template-rows: 25px 10px calc(100% - 35px);
135+
grid-row-gap: 0px;
136+
}
137+
.vp-information-preview-content:empty::after {
138+
content: 'No preview data';
139+
color: var(--vp-gray-color);
140+
}
141+
.vp-information-preview-content {
142+
align-content: baseline;
143+
}
144+
.vp-information-preview-box img {
145+
width: 100%;
146+
height: 100%;
147+
}

‎visualpython/css/menuFrame.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -356,7 +356,7 @@ input.vp-menu-search-box {
356356
.vp-menuitem.apps .apps_file {
357357
background: top / contain no-repeat url(../img/apps/apps_file.svg);
358358
}
359-
.vp-menuitem.apps .apps_variable {
359+
.vp-menuitem.apps .apps_information {
360360
background: top / contain no-repeat url(../img/apps/apps_variable.svg);
361361
}
362362
.vp-menuitem.apps .apps_snippets {

‎visualpython/css/root.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@ input.vp-input {
8888
input.vp-input::placeholder {
8989
color: var(--vp-gray-color);
9090
}
91+
input.vp-input:disabled,
92+
select.vp-select:disabled {
93+
cursor: not-allowed;
94+
}
9195

9296
/* image icons */
9397
/* LAB: img to background-image */
@@ -125,6 +129,9 @@ input.vp-input::placeholder {
125129
width: 16px;
126130
height: 16px;
127131
}
132+
.vp-icon-run.white {
133+
background: center / contain no-repeat url(../img/snippets/run_white.svg);
134+
}
128135
.vp-icon-save {
129136
background: center / contain no-repeat url(../img/snippets/save_orange.svg);
130137
width: 16px;
@@ -369,6 +376,75 @@ button.vp-button {
369376
.vp-accordian.vp-open + .vp-accordian-box {
370377
display: block !important;
371378
}
379+
/*
380+
* Dropdown menus
381+
* - Usage: set these structure using tag's class
382+
* <vp-dropdown>
383+
* <vp-drop-button></vp-drop-button>
384+
* <vp-dropdown-content>
385+
* <vp-dropdown-item></vp-dropdown-item>
386+
* <vp-dropdown-item></vp-dropdown-item>
387+
* </vp-dropdown-content>
388+
* <vp-dropdown>
389+
*/
390+
.vp-dropdown {
391+
position: relative;
392+
display: inline-block;
393+
}
394+
.vp-dropdown-content {
395+
display: none;
396+
position: absolute;
397+
background-color: var(--vp-background-color);
398+
min-width: 100px;
399+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
400+
z-index: 1;
401+
}
402+
.vp-dropdown-content .vp-dropdown-item {
403+
height: 30px;
404+
line-height: 30px;
405+
background: var(--vp-background-color);
406+
border: 0.25px solid var(--vp-border-gray-color);
407+
box-sizing: border-box;
408+
box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
409+
border-radius: 2px;
410+
font-size: 13px;
411+
text-align: left;
412+
color: var(--vp-font-primary);
413+
cursor: pointer;
414+
-webkit-touch-callout: none;
415+
-webkit-user-select: none;
416+
-khtml-user-select: none;
417+
-moz-user-select: none;
418+
-ms-user-select: none;
419+
user-select: none;
420+
text-overflow: ellipsis;
421+
/* overflow: hidden; */
422+
white-space: nowrap;
423+
padding: 0px 5px;
424+
}
425+
.vp-dropdown-content .vp-dropdown-item:not(.disabled):not(.selected):hover {
426+
background-color: var(--vp-border-gray-color);
427+
}
428+
.vp-dropdown:not(.disabled):hover .vp-dropdown-content {
429+
display: block;
430+
}
431+
.vp-dropdown:not(.disabled):hover .vp-drop-button:not(.selected) {
432+
background-color: var(--vp-border-gray-color);
433+
}
434+
.vp-drop-button.selected,
435+
.vp-dropdown-content .vp-dropdown-item.selected {
436+
background-color: var(--vp-highlight-color);
437+
color: var(--vp-background-color);
438+
}
439+
.vp-drop-button {
440+
background-color: var(--vp-background-color);
441+
color: var(--vp-font-primary);
442+
padding: 5px 7px;
443+
border: 0.25px solid var(--vp-border-gray-color);
444+
cursor: pointer;
445+
height: 30px;
446+
font-size: 13px;
447+
}
372448
/* cursor */
373449
.vp-cursor {
374450
cursor: pointer;

0 commit comments

Comments
 (0)