Skip to content

Commit 124541a

Browse files
author
minjk-bl
committed
Jupyter Lab support
1 parent 9811c3b commit 124541a

110 files changed

Lines changed: 1812 additions & 329 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
<img src="https://i.esdrop.com/d/7o0dj05m8rnz/JNGCMedl18.png" width="45%">
22

3-
[![PyPI version shields.io](https://img.shields.io/pypi/v/visualpython)](https://pypi.python.org/pypi/visualpython/)
3+
[![PyPI version shields.io](https://img.shields.io/pypi/v/jupyterlab-visualpython)](https://pypi.python.org/pypi/jupyterlab-visualpython/)
44
![Python: 3.x](https://img.shields.io/badge/Python-3.x-yellowgreen)
55
[![License: GPLv3](https://img.shields.io/badge/License-GPLv3-brightgreen)](https://github.com/visualpython/visualpython/blob/main/LICENSE)
6-
[![Code of Conduct: Contributor Covenant](https://img.shields.io/badge/Code%20of%20Conduct-Contributor%20Covenant-pink)](https://github.com/visualpython/visualpython/blob/main/CODE_OF_CONDUCT.md)
76
[![Downloads](https://static.pepy.tech/personalized-badge/visualpython?period=total&units=international_system&left_color=grey&right_color=orange&left_text=Downloads)](https://pepy.tech/project/visualpython)
87
[![Issues: ](https://img.shields.io/github/issues/visualpython/visualpython?color=%23FF6347)](https://github.com/visualpython/visualpython/issues)
8+
[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/visualpython/visualpython-binder/HEAD?labpath=index.ipynb)
99

1010
## Introduction
11-
Visual Python is a GUI-based Python code generator, developed on the **Jupyter Notebook** and **Google Colab** as an extension. <br>
11+
Visual Python is a GUI-based Python code generator, developed on the **Jupyter Lab**, **Jupyter Notebook** and **Google Colab** as an extension. <br>
1212
Visual Python is an open source project started for students who struggle with coding during Python classes for data science.
1313

1414
<br>
@@ -21,6 +21,25 @@ Try Visual Python if you would like to: <br>
2121
<br>
2222
<img src="https://github.com/visualpython/visualpython/blob/main/img/Visual%20Python_2.2.8.gif?raw=true" width="95%">
2323

24+
## Getting Started with Jupyter Lab
25+
26+
### 1. Requirements
27+
28+
Visual Python is an extension to Jupyter Lab, so you must have Jupyter Lab installed already.<br>
29+
- Python version 3.x
30+
- Jupyter lab environment
31+
32+
### 2. How to Install
33+
34+
**1) Install package from**
35+
```
36+
pip install jupyterlab-visualpython
37+
```
38+
39+
**2) Activate Visual Python on Jupyter Lab**
40+
41+
Click orange square button on the right side of the Jupyter Lab.
42+
2443
## Getting Started with Jupyter Notebook
2544

2645
### 1. Requirements

‎css/component/dataSelector.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,15 @@
44
}
55
.vp-ds-filter {
66
position: relative;
7-
width: 20px;
8-
height: 20px;
7+
/* width: 20px;
8+
height: 20px; */
99
right: 25px;
1010
cursor: pointer;
11+
/* LAB: img to background-image */
12+
display: inline-block;
13+
background: center / contain no-repeat url(../../img/filter.svg);
14+
width: 12px;
15+
height: 12px;
1116
}
1217
.vp-ds-box input.vp-ds-target {
1318
padding-right: 23px;

‎css/component/infoModal.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@
3333
.vp-infoModal-icon {
3434
font-size: 26px;
3535
color: var(--font-primary);
36+
/* LAB: img to background-image */
37+
background-image: url(../../img/info_circle.svg);
38+
background-repeat: no-repeat;
39+
background-size: contain;
40+
width: 24px;
41+
height: 24px;
3642
}
3743
.vp-infoModal-titleStr {
3844
color: var(--font-primary);

‎css/component/innerFuncViewer.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,12 @@
5757
color: #C4C4C4;
5858
right: 10px;
5959
padding-top: 4px;
60+
61+
/* LAB: img to background-image */
62+
background: center / contain no-repeat url(../../img/search.svg);
63+
width: 20px;
64+
height: 20px;
65+
top: 5px;
6066
}
6167
/* Empty List */
6268
.vp-if-table {

‎css/component/popupComponent.css‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,11 @@
3030
.vp-popup-frame * {
3131
box-sizing: border-box !important;
3232
}
33-
.CodeMirror-scroll, .CodeMirror-sizer, .CodeMirror-gutter, .CodeMirror-gutters, .CodeMirror-linenumber {
33+
.vp-popup-frame .CodeMirror-scroll,
34+
.vp-popup-frame .CodeMirror-sizer,
35+
.vp-popup-frame .CodeMirror-gutter,
36+
.vp-popup-frame .CodeMirror-gutters,
37+
.vp-popup-frame .CodeMirror-linenumber {
3438
-moz-box-sizing: content-box !important;
3539
box-sizing: content-box !important;
3640
}
@@ -84,6 +88,8 @@
8488
text-align: center;
8589
cursor: pointer;
8690
color: var(--gray-color);
91+
/* LAB: img to background-image */
92+
background: center / contain no-repeat url(../../img/max_window.svg);
8793
}
8894
.vp-popup-return {
8995
position: absolute;
@@ -97,6 +103,8 @@
97103
cursor: pointer;
98104
color: var(--gray-color);
99105
display: none;
106+
/* LAB: img to background-image */
107+
background: center / contain no-repeat url(../../img/min_window.svg);
100108
}
101109
.vp-popup-toggle {
102110
position: absolute;
@@ -109,6 +117,8 @@
109117
text-align: center;
110118
cursor: pointer;
111119
color: var(--gray-color);
120+
/* LAB: img to background-image */
121+
background: center / contain no-repeat url(../../img/minimize.svg);
112122
}
113123
.vp-popup-close {
114124
position: absolute;
@@ -120,6 +130,8 @@
120130
line-height: 20px;
121131
text-align: center;
122132
cursor: pointer;
133+
/* LAB: img to background-image */
134+
background: center / contain no-repeat url(../../img/close_big.svg);
123135
}
124136
.vp-popup-body {
125137
position: relative;
@@ -368,7 +380,7 @@
368380

369381
/* resizable handler */
370382
.vp-popup-frame .ui-resizable-se {
371-
background-image: url('');
383+
background-image: none; /* LAB: url('') to none */
372384
}
373385

374386
/* inner popup */
@@ -418,6 +430,11 @@
418430
line-height: 20px;
419431
text-align: center;
420432
cursor: pointer;
433+
/* LAB: img to background-image */
434+
background-image: url(../../img/close_big.svg);
435+
background-repeat: no-repeat;
436+
background-size: contain;
437+
height: 100%;
421438
}
422439
/* variable popup */
423440
.vp-variable-popup-box {
@@ -466,6 +483,11 @@
466483
line-height: 20px;
467484
text-align: center;
468485
cursor: pointer;
486+
/* LAB: img to background-image */
487+
background-image: url(../../img/close_big.svg);
488+
background-repeat: no-repeat;
489+
background-size: contain;
490+
height: 100%;
469491
}
470492
/* body top-bar */
471493
.vp-popup-body-top-bar {
@@ -480,7 +502,7 @@
480502
.vp-popup-body-top-bar-item:hover {
481503
color: var(--font-highlight);
482504
}
483-
.vp-popup-body-top-bar-item img {
505+
.vp-popup-body-top-bar-item div {
484506
-moz-box-sizing: border-box;
485507
box-sizing: border-box;
486508
width: 22px; /* Width of new image */
@@ -489,28 +511,28 @@
489511
margin-bottom: 5px;
490512
margin-left: 4px;
491513
}
492-
.vp-popup-body-top-bar-item[data-type="install"] img {
514+
.vp-popup-body-top-bar-item[data-type="install"] div {
493515
background: url(../../img/import.svg) no-repeat;
494516
}
495-
.vp-popup-body-top-bar-item[data-type="install"]:hover img {
517+
.vp-popup-body-top-bar-item[data-type="install"]:hover div {
496518
background: url(../../img/import_activated.svg) no-repeat;
497519
}
498520
.vp-popup-body-top-bar-item[data-type="import"] {
499521
margin-left: 10px;
500522
}
501-
.vp-popup-body-top-bar-item[data-type="import"] img {
523+
.vp-popup-body-top-bar-item[data-type="import"] div {
502524
background: url(../../img/import.svg) no-repeat;
503525
}
504-
.vp-popup-body-top-bar-item[data-type="import"]:hover img {
526+
.vp-popup-body-top-bar-item[data-type="import"]:hover div {
505527
background: url(../../img/import_activated.svg) no-repeat;
506528
}
507529
.vp-popup-body-top-bar-item[data-type="package"] {
508530
margin-left: 10px;
509531
}
510-
.vp-popup-body-top-bar-item[data-type="package"] img {
532+
.vp-popup-body-top-bar-item[data-type="package"] div {
511533
background: url(../../img/setting.svg) no-repeat;
512534
}
513-
.vp-popup-body-top-bar-item[data-type="package"]:hover img {
535+
.vp-popup-body-top-bar-item[data-type="package"]:hover div {
514536
background: url(../../img/setting_activated.svg) no-repeat;
515537
}
516538

‎css/component/successMessage.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@
2323
.vp-successMessage-icon {
2424
margin-left: 15px;
2525
color: var(--font-highlight);
26+
/* LAB: img to background-image */
27+
background: top / contain no-repeat url(../../img/code.svg);
28+
height: 100%;
2629
}
2730
#vp_successMessage {
2831
position: absolute;

‎css/m_apps/bind.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,8 @@
2121
display: inline-block;
2222
cursor: pointer;
2323
margin-left: 5px;
24+
/* LAB: img to background-image */
25+
background: center / contain no-repeat url(../../img/refresh.svg);
26+
width: 18px;
27+
height: 19px;
2428
}

‎css/m_apps/frame.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,10 @@
4848
display: inline-block;
4949
cursor: pointer;
5050
margin-left: 5px;
51+
/* LAB: img to background-image */
52+
background: center / contain no-repeat url(../../img/refresh.svg);
53+
width: 18px;
54+
height: 19px;
5155
}
5256
.vp-fe-toolbar {
5357
/* border-top: 1px solid var(--border-gray-color); */

‎css/m_apps/groupby.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
display: inline-block;
99
cursor: pointer;
1010
margin-left: 5px;
11+
/* LAB: img to background-image */
12+
background: center / contain no-repeat url(../../img/refresh.svg);
13+
width: 18px;
14+
height: 19px;
1115
}
1216
.vp-gb-df-box label {
1317
font-weight: bold;

‎css/m_apps/import.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
border-radius: 3px;
77
padding: 5px;
88
cursor: pointer;
9+
/* LAB: add size */
10+
font-size: 13px;
911
}
1012
.vp-tab-button.vp-tab-selected {
1113
color: var(--font-highlight);

0 commit comments

Comments
 (0)