Skip to content

Commit 06b6d50

Browse files
llbtlllbtl
committed
small design changes
1 parent 8b27681 commit 06b6d50

12 files changed

Lines changed: 72 additions & 69 deletions

File tree

‎css/api_block/index.css‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -154,11 +154,13 @@
154154
}
155155
.vp-apiblock-menu-box {
156156
background: #FFFFFF;
157+
width: 100px;
157158
border: 0.25px solid #E4E4E4;
158159
padding: 5px;
159160
z-index: 50;
160161
}
161162
.vp-apiblock-menu-item {
163+
color: var(--font-primary);
162164
padding: 5px;
163165
}
164166
.vp-apiblock-menu-item:hover {
@@ -243,7 +245,7 @@
243245
padding: 10px;
244246
}
245247
.vp-apiblock-option-container {
246-
padding: 1rem 0;
248+
padding: 1rem 1rem 0 0;
247249
}
248250
.vp-apiblock-option-buttons-container {
249251
position: sticky;
@@ -580,7 +582,7 @@
580582
.vp-apiblock-blockoption-input {
581583
border: 1px solid #d4d4d4;
582584
color: #252525;
583-
outline: 0px;
585+
outline-color: var(--hightlight-color);
584586
width: 100%;
585587
padding: 5px 0rem;
586588
padding-left: 0.75rem;
@@ -834,7 +836,7 @@
834836
white-space:nowrap;
835837
word-wrap:normal;
836838
overflow:hidden;
837-
font-size:12px;
839+
font-size:13px;
838840
}
839841

840842
/* API Block Font */
@@ -1032,7 +1034,7 @@
10321034
background-position: center;
10331035
}
10341036
.vp-apiblock-body .vp-option-vertical-table-layout th {
1035-
padding: 0px;
1037+
padding: 2px 5px 2px 16px;
10361038
}
10371039
.vp-apiblock-body .vp-note-node-controls {
10381040
display: none;

‎css/common/instanceEditor.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
}
1111
.vp-ins-select-title {
1212
font-weight: 700;
13-
color: var(--hightlight-color);
13+
color: var(--font-hightlight);
1414
padding: 5px 5px 5px 0px;
1515
}
1616
#vp-wrapper .vp-ins-select-container input.vp-ins-search {
@@ -54,7 +54,7 @@
5454
border-bottom: 0.25px solid var(--light-gray-color);
5555
}
5656
.vp-ins-select-item.selected {
57-
color : var(--hightlight-color);
57+
color : var(--font-hightlight);
5858
background: var(--light-gray-color);
5959
}
6060
.vp-ins-select-item span {

‎css/file_io/fileio.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
#vp_fileioPage .vp-fileio-type {
2-
border: 2px solid var(--hightlight-color);
2+
border: 1px solid var(--hightlight-color);
33
width: 100%;
44
height: 35px;
55
background-position: 97% 50%;

‎css/main.css‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ body {
9696
padding: 3px 7px;
9797
color: var(--font-primary);
9898
background: #FFFFFF;
99-
outline: none;
99+
outline-color: var(--hightlight-color);
100100
border: 0.25px solid var(--border-gray-color);
101101
box-sizing: border-box;
102102
}
@@ -195,7 +195,7 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
195195
line-height: 16px;
196196
padding: 5px 16px 3px 9px;
197197
background: url(../resource/unfold_more.svg), #F5F5F5;
198-
background-position: 95% 50%;
198+
background-position: 97% 50%;
199199
background-size: 11px 11px;
200200
background-repeat: no-repeat;
201201
outline: none;
@@ -492,7 +492,6 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
492492
.vp-accordion-container .vp-accordion-header {
493493
height: 25px;
494494
background-color: #FFFFFF;
495-
padding: 5px;
496495
cursor: pointer;
497496
color: var(--font-primary);
498497
}
@@ -1041,10 +1040,10 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
10411040
resize: none;
10421041
outline: none;
10431042
color: #C4C4C4;
1044-
border-top: 0.25px solid #C4C4C4;
1043+
border-top: 0.25px solid #E4E4E4;
10451044
border-right: none;
1046-
border-bottom: 0.25px solid #C4C4C4;
1047-
border-left: 0.25px solid #C4C4C4;
1045+
border-bottom: 0.25px solid #E4E4E4;
1046+
border-left: 0.25px solid #E4E4E4;
10481047
background-color: #F5F5F5;
10491048
overflow-y: hidden;
10501049
text-align: right;
@@ -1060,7 +1059,7 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
10601059
color: var(--font-primary);
10611060
white-space: nowrap;
10621061
overflow-x: auto;
1063-
border: 0.25px solid #696969;
1062+
border: 0.25px solid #E4E4E4;
10641063
font-family: Consola
10651064
}
10661065

@@ -1069,6 +1068,10 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
10691068
width: 100%;
10701069
min-height: 30px;
10711070
background-color: rgb(247 247 247);
1071+
border-top: 0.25px solid #E4E4E4;
1072+
border-right: 0.25px solid #E4E4E4;
1073+
border-bottom: none;
1074+
border-left: 0.25px solid #E4E4E4;
10721075
}
10731076
.vp-markdown-editor-toolbar .vp-markdown-editor-toolbar-btn-title {
10741077
background-image: url(../resource/font-size-2.svg);
@@ -1186,13 +1189,13 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
11861189

11871190
/* Table Layout */
11881191
.vp-option-vertical-table-layout {
1189-
width: 100%;
1192+
/* width: 100%; */
11901193
border-collapse: collapse;
11911194
table-layout: fixed;
11921195
color: var(--font-primary);
11931196
}
11941197
.vp-option-vertical-table-layout th {
1195-
min-width: 150px;
1198+
min-width: 130px;
11961199
max-width: 300px;
11971200
vertical-align: middle;
11981201
text-align: left;
@@ -1256,7 +1259,7 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
12561259
top: 50%;
12571260
transform:translate(-50%, -50%);
12581261
width: 400px;
1259-
height: 150px;
1262+
height: 170px;
12601263
padding: 2rem;
12611264
background-color: white;
12621265
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
@@ -1265,7 +1268,7 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
12651268
display: flex;
12661269
flex-direction: row;
12671270
align-items: center;
1268-
justify-content: flex-start;
1271+
justify-content: center;
12691272

12701273
width: 100%;
12711274
height: 80px;
@@ -1279,15 +1282,16 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
12791282
display: flex;
12801283
flex-direction: column;
12811284
justify-content: space-evenly;
1282-
height: 100%;
1285+
align-items: center;
1286+
height: 80%;
12831287
}
12841288
#vp_multiButtonModal .vp-modal-button {
1285-
min-width: 80px;
1286-
height: 24px;
1289+
min-width: 100px;
1290+
height: 30px;
12871291
font-family: AppleSDGothicNeo;
12881292
font-style: normal;
12891293
font-weight: normal;
1290-
font-size: 13px;
1294+
font-size: 14px;
12911295
line-height: 21px;
12921296
text-align: center;
12931297
color: var(--font-primary);
@@ -1296,21 +1300,17 @@ input[type=number]::-webkit-inner-spin-button { margin-left: 5px; }
12961300
box-sizing: border-box;
12971301
border-radius: 2px;
12981302
}
1299-
#vp_multiButtonModal .vp-modal-button:focus,
1300-
#vp_multiButtonModal .vp-modal-button:active {
1301-
border: 2px solid black;
1302-
}
13031303
#vp_multiButtonModal .vp-modal-button-2 {
1304-
background-color:#828282;
1304+
background-color: var(--font-hightlight);
13051305
color: white;
13061306
margin-right: 10px;
13071307
}
13081308
#vp_multiButtonModal .vp-multi-button-modal-buttons {
13091309
display: flex;
13101310
align-items: center;
1311-
justify-content: space-between;
1311+
justify-content: space-around;
13121312
width: 100%;
1313-
height: 30px;
1313+
height: 60px;
13141314
}
13151315

13161316
/* No Selection */

‎css/matplotlib/plot.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
line-height: 25px;
2424
vertical-align: middle;
2525
font-weight: bold;
26-
font-size: 13px;
26+
font-size: 14px;
2727
text-align: left;
2828
padding: 2px 5px 2px 16px;
2929
}
@@ -111,13 +111,13 @@
111111
/* Plot Kind */
112112
.vp-plot-kind {
113113
/* background: #F5F5F5; */
114-
width: 500px;
114+
width: 430px;
115115
display: grid;
116-
grid-template-rows: repeat(2, 100px);
116+
grid-template-rows: repeat(2, 90px);
117117
grid-template-columns: repeat(6, 1fr);
118118
grid-auto-rows: 100px;
119-
grid-gap: 4.5px;
120-
margin-bottom: 20px;
119+
grid-gap: 2.5px;
120+
margin: 5px 0px 30px 10px;
121121
}
122122
.vp-plot-item {
123123
/* display: flex; */
@@ -175,14 +175,14 @@
175175
margin-top: 5px;
176176
}
177177
.vp-plot-item.selected .vp-plot-thumb {
178-
border: 1px solid var(--hightlight-color);
178+
border: 2px solid var(--hightlight-color);
179179
}
180180
.vp-plot-item.selected .vp-plot-name {
181181
color: var(--font-hightlight) !important;
182182
}
183183
.vp-plot-item .vp-plot-thumb {
184184
width: 100%;
185-
height: 80%;
185+
height: 75%;
186186
background-size: contain;
187187
background-repeat: no-repeat;
188188
background-position: center center;

‎css/pandas/commonPandas.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
width: 95%;
33
}
44
#vp-wrapper .vp-option-page table.vp-option-table td {
5-
padding-top: 3.5px;
6-
padding-bottom: 3.5px;
5+
padding-top: 4.5px;
6+
padding-bottom: 2.5px;
77
}
88
#vp-wrapper .vp-option-page .vp-option-table select.var-multi, select.option-multi {
99
height: 60px;
@@ -46,6 +46,7 @@
4646
-moz-appearance: none;
4747
appearance: none;
4848
padding: 0px 5px 0px 5px;
49+
cursor: pointer;
4950
}
5051

5152
/* Select Option Design */

‎src/api_block/blockContainer.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1123,16 +1123,16 @@ define([
11231123
if (prevSelectedBlock && prevSelectedBlock.isModified) {
11241124
// Ask to save
11251125
var apiBlockPackage = this.getImportPackageThis();
1126-
apiBlockPackage.openMultiBtnModal_new('Save Changes', `Save changes before cancel?'`,['Save', 'Cancel'], [() => {
1127-
// apply
1128-
// $(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON).trigger(STR_CLICK);
1129-
blockContainerThis.applyBlock();
1130-
callback(true);
1131-
},() => {
1126+
apiBlockPackage.openMultiBtnModal_new('Unsaved Changes', 'Save changes before leave?',['Don’t save', 'Save'], [() => {
11321127
// cancel
11331128
// $(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_CANCEL_BUTTON).trigger(STR_CLICK);
11341129
blockContainerThis.cancelBlock();
11351130
callback(false);
1131+
},() => {
1132+
// apply
1133+
// $(VP_ID_PREFIX + VP_APIBLOCK_BOARD_OPTION_APPLY_BUTTON).trigger(STR_CLICK);
1134+
blockContainerThis.applyBlock();
1135+
callback(true);
11361136
}]);
11371137
} else {
11381138
callback(false);

‎src/file_io/import.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@
6161
<div id="vp_userOption" class="vp-list-container vp-accordion-content">
6262
<input type="hidden" id="vp_importMeta"/>
6363
<table id="vp_tblImport" class="vp-tbl-basic w90">
64-
<colgroup><col width="*"/><col width="120px"/><col width="30px"/></colgroup>
64+
<colgroup><col width="40%"/><col width="40%"/><col width="*"/></colgroup>
6565
<tr>
6666
<th>Library Name</th>
6767
<th>Alias</th>

‎src/file_io/variables.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div class="vp-option-page" id="vp_varPage">
22
<div id="vp_var_variableBox">
33
<table class="vp-option-table vp-option-horizontal-table-layout">
4-
<colgroup><col width="*"/><col width="35%"/></colgroup>
4+
<colgroup><col width="150px"/><col width="*"/></colgroup>
55
<tr>
66
<th title="click to copy"><span class="vp-multilang" data-caption-id="varName">Variable Name</span> <i id="vp_varRefresh" class="fa fa-refresh"></i></th>
77
<th><span class="vp-multilang" data-caption-id="dataType">Data Type</span></th>

‎src/matplotlib/plot.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<table id="vp_varViewList" class="vp-option-table vp-var-view-list no-selection">
66
<colgroup><col width="40%"/><col width="*"/></colgroup>
77
<thead>
8-
<tr><th>Variable</th><th>DataType</th></tr>
8+
<tr><th>Variable</th><th>Data Type</th></tr>
99
<tr><th colspan="2"><hr style="margin: 0px;"/></th></tr>
1010
</thead>
1111
<tbody>
@@ -19,8 +19,8 @@
1919
<colgroup><col width="40%"/><col width="*"/></colgroup>
2020
<thead>
2121
<tr>
22-
<th>columns</th>
23-
<th>methods</th>
22+
<th>Column</th>
23+
<th>Method</th>
2424
</tr>
2525
</thead>
2626
<tbody>
@@ -88,25 +88,25 @@
8888
<div class="vp-plot-item" id="vp_plotHist" data-kind="hist" data-show-text="Histogram">
8989
<div class="vp-plot-thumb hist"></div>
9090
</div>
91-
<div class="vp-plot-item" id="vp_plotBox" data-kind="boxplot" data-show-text="Box Plot">
91+
<div class="vp-plot-item" id="vp_plotBox" data-kind="boxplot" data-show-text="Box">
9292
<div class="vp-plot-thumb boxplot"></div>
9393
</div>
94-
<div class="vp-plot-item" id="vp_plotStack" data-kind="stackplot" data-show-text="Stack Plot">
94+
<div class="vp-plot-item" id="vp_plotStack" data-kind="stackplot" data-show-text="Stack">
9595
<div class="vp-plot-thumb stackplot"></div>
9696
</div>
97-
<div class="vp-plot-item" id="vp_plotPie" data-kind="pie" data-show-text="Pie Chart">
97+
<div class="vp-plot-item" id="vp_plotPie" data-kind="pie" data-show-text="Pie">
9898
<div class="vp-plot-thumb pie"></div>
9999
</div>
100-
<div class="vp-plot-item" id="vp_plotScatter" data-kind="scatter" data-show-text="Scatter Plot">
100+
<div class="vp-plot-item" id="vp_plotScatter" data-kind="scatter" data-show-text="Scatter">
101101
<div class="vp-plot-thumb scatter"></div>
102102
</div>
103-
<div class="vp-plot-item" id="vp_plotHexbin" data-kind="hexbin" data-show-text="Hexbin Plot">
103+
<div class="vp-plot-item" id="vp_plotHexbin" data-kind="hexbin" data-show-text="Hexbin">
104104
<div class="vp-plot-thumb hexbin"></div>
105105
</div>
106-
<div class="vp-plot-item" id="vp_plotContour" data-kind="contour" data-show-text="Contour Plot">
106+
<div class="vp-plot-item" id="vp_plotContour" data-kind="contour" data-show-text="Contour">
107107
<div class="vp-plot-thumb contour"></div>
108108
</div>
109-
<div class="vp-plot-item" id="vp_plotImshow" data-kind="imshow" data-show-text="Image Plot">
109+
<div class="vp-plot-item" id="vp_plotImshow" data-kind="imshow" data-show-text="Image">
110110
<div class="vp-plot-thumb imshow"></div>
111111
</div>
112112
<div class="vp-plot-item" id="vp_plotErrorbar" data-kind="errorbar" data-show-text="Error Bar">

0 commit comments

Comments
 (0)