Skip to content

Commit 57cbf99

Browse files
author
minjk-bl
committed
Popup - add maximize button
1 parent e68ae27 commit 57cbf99

5 files changed

Lines changed: 79 additions & 3 deletions

File tree

‎css/popupComponent.css‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,19 @@
6565
font-family: 'AppleSDGothicNeo';
6666
color: var(--font-hightlight);
6767
}
68-
.vp-popup-toggle {
68+
.vp-popup-maximize {
69+
position: absolute;
70+
width: 15px;
71+
height: 20px;
72+
top: 4px;
73+
right: 32px;
74+
z-index: 3;
75+
line-height: 20px;
76+
text-align: center;
77+
cursor: pointer;
78+
color: var(--gray-color);
79+
}
80+
.vp-popup-return {
6981
position: absolute;
7082
width: 15px;
7183
height: 20px;
@@ -76,6 +88,19 @@
7688
text-align: center;
7789
cursor: pointer;
7890
color: var(--gray-color);
91+
display: none;
92+
}
93+
.vp-popup-toggle {
94+
position: absolute;
95+
width: 15px;
96+
height: 20px;
97+
top: 4px;
98+
right: 58px;
99+
z-index: 3;
100+
line-height: 20px;
101+
text-align: center;
102+
cursor: pointer;
103+
color: var(--gray-color);
79104
}
80105
.vp-popup-close {
81106
position: absolute;

‎html/popupComponent.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646
<!-- Title -->
4747
</label>
4848
<img class="vp-popup-toggle" src="/nbextensions/visualpython/img/minimize.svg" title="Minimize this popup">
49+
<img class="vp-popup-maximize" src="/nbextensions/visualpython/img/maximize.svg" title="Maximize this popup">
50+
<img class="vp-popup-return" src="/nbextensions/visualpython/img/returnSize.svg" title="Return size of this popup">
4951
<img class="vp-popup-close" src="/nbextensions/visualpython/img/close_big.svg" title="Close popup"/>
5052
</div>
5153
<div class="vp-popup-body vp-scrollbar">

‎img/maximize.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎img/returnSize.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎js/com/component/PopupComponent.js‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -251,12 +251,39 @@ define([
251251
});
252252
// Toggle operation (minimize)
253253
$(this.wrapSelector('.vp-popup-toggle')).on('click', function(evt) {
254-
// that.toggle();
255254
$(that.eventTarget).trigger({
256255
type: 'close_option_page',
257256
component: that
258257
});
259258
});
259+
// Maximize operation
260+
$(this.wrapSelector('.vp-popup-maximize')).on('click', function(evt) {
261+
// save position
262+
that.config.position = $(that.wrapSelector()).position();
263+
// maximize popup
264+
$(that.wrapSelector()).css({
265+
width: '100%',
266+
height: '100%',
267+
top: 0,
268+
left: 0
269+
});
270+
// show / hide buttons
271+
$(this).hide();
272+
$(that.wrapSelector('.vp-popup-return')).show();
273+
});
274+
// Return operation
275+
$(this.wrapSelector('.vp-popup-return')).on('click', function(evt) {
276+
// return size
277+
$(that.wrapSelector()).css({
278+
width: that.config.size.width + 'px',
279+
height: that.config.size.height + 'px',
280+
top: that.config.position.top,
281+
left: that.config.position.left
282+
});
283+
// show / hide buttons
284+
$(this).hide();
285+
$(that.wrapSelector('.vp-popup-maximize')).show();
286+
});
260287

261288
// Click install package
262289
$(this.wrapSelector('#popupInstall')).on('click', function() {
@@ -420,8 +447,14 @@ define([
420447
}
421448

422449
_bindResizable() {
450+
let that = this;
423451
$(this.wrapSelector()).resizable({
424-
handles: 'all'
452+
handles: 'all',
453+
start: function(evt, ui) {
454+
// show / hide buttons
455+
$(that.wrapSelector('.vp-popup-return')).hide();
456+
$(that.wrapSelector('.vp-popup-maximize')).show();
457+
}
425458
});
426459
}
427460

0 commit comments

Comments
 (0)