Skip to content

Commit e62613e

Browse files
pmeisenpmeisen
committed
added first framework for the dev-studio
1 parent 72cc182 commit e62613e

File tree

3 files changed

+73
-4
lines changed

3 files changed

+73
-4
lines changed

‎dist/breinify-dev-studio.js

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
this.isVisible = true;
2222

2323
this.render();
24-
this.hookConsole();
24+
//this.hookConsole();
2525
this.toggleDevStudio();
2626
}
2727

@@ -33,6 +33,8 @@
3333
button.close-btn { background: transparent; border: none; color: #ccc; font-size: 18px; cursor: pointer; padding: 0 6px; user-select: none; }
3434
button.close-btn:hover { color: white; }
3535
#panel { position: fixed; bottom: 0; right: 0; width: 400px; height: 80vh; max-height: 1000px; font-family: monospace; font-size: 12px; color: #fff; background: #1e1e1e; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-top-left-radius: 6px; display: flex; flex-direction: column; z-index: 999999; transition: transform 0.2s ease-out, opacity 0.2s ease-out; overflow: hidden; }
36+
#resize-handle { position: absolute; left: 0; top: 0; width: 6px; height: 100%; cursor: ew-resize; z-index: 1000001; }
37+
#resize-handle:hover { background: rgba(255, 255, 255, 0.1); }
3638
header { background: #111; padding: 6px 10px; display: flex; align-items: center; user-select: none; border-top-left-radius: 6px; color: #eee; }
3739
header > .tabs { display: flex; gap: 10px; flex-grow: 1; }
3840
header button.tab { background: transparent; border: none; color: #ccc; cursor: pointer; padding: 4px 8px; font-size: 12px; border-bottom: 2px solid transparent; transition: border-color 0.15s ease; }
@@ -47,6 +49,7 @@
4749
::-webkit-scrollbar-thumb:hover { background: #555; }
4850
</style>
4951
<div id="panel">
52+
<div id="resize-handle"></div>
5053
<div class="title">
5154
<div style="flex-grow: 1; align-content: center;">Breinify DevStudio</div>
5255
<button class="close-btn" title="Hide Breinify DevStudio">&#x2715;</button>
@@ -75,6 +78,36 @@
7578
this.$toggleButton.click(() => this.toggleDevStudio());
7679

7780
this.$tabs.click(e => this.switchTab(e));
81+
82+
const $resizeHandle = this.$shadowRoot.find('#resize-handle')
83+
.data('isResizing', false);
84+
$resizeHandle.mousedown(e => {
85+
$resizeHandle.data({
86+
isResizing: true,
87+
startX: e.clientX,
88+
startWidth: $resizeHandle.parent()[0].getBoundingClientRect().width
89+
});
90+
91+
$('body').css('user-select', 'none');
92+
e.preventDefault();
93+
});
94+
$(document).on('mouseup blur', e => {
95+
if ($resizeHandle.data('isResizing') === true) {
96+
$resizeHandle.data('isResizing', false);
97+
$('body').css('user-select', '');
98+
}
99+
});
100+
$(document).mousemove(e => {
101+
if (!$resizeHandle.data('isResizing') === true) {
102+
return;
103+
}
104+
105+
const startWidth = $resizeHandle.data('startWidth');
106+
const dx = $resizeHandle.data('startX') - e.clientX;
107+
const newWidth = Math.min(Math.max(startWidth + dx, 200), 1000);
108+
109+
$resizeHandle.parent().css('width', newWidth + 'px');
110+
});
78111
}
79112

80113
toggleDevStudio() {

‎dist/breinify-dev-studio.min.js

Lines changed: 5 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/plugins/DevStudio.js

Lines changed: 34 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
this.isVisible = true;
2222

2323
this.render();
24-
this.hookConsole();
24+
//this.hookConsole();
2525
this.toggleDevStudio();
2626
}
2727

@@ -33,6 +33,8 @@
3333
button.close-btn { background: transparent; border: none; color: #ccc; font-size: 18px; cursor: pointer; padding: 0 6px; user-select: none; }
3434
button.close-btn:hover { color: white; }
3535
#panel { position: fixed; bottom: 0; right: 0; width: 400px; height: 80vh; max-height: 1000px; font-family: monospace; font-size: 12px; color: #fff; background: #1e1e1e; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-top-left-radius: 6px; display: flex; flex-direction: column; z-index: 999999; transition: transform 0.2s ease-out, opacity 0.2s ease-out; overflow: hidden; }
36+
#resize-handle { position: absolute; left: 0; top: 0; width: 6px; height: 100%; cursor: ew-resize; z-index: 1000001; }
37+
#resize-handle:hover { background: rgba(255, 255, 255, 0.1); }
3638
header { background: #111; padding: 6px 10px; display: flex; align-items: center; user-select: none; border-top-left-radius: 6px; color: #eee; }
3739
header > .tabs { display: flex; gap: 10px; flex-grow: 1; }
3840
header button.tab { background: transparent; border: none; color: #ccc; cursor: pointer; padding: 4px 8px; font-size: 12px; border-bottom: 2px solid transparent; transition: border-color 0.15s ease; }
@@ -47,6 +49,7 @@
4749
::-webkit-scrollbar-thumb:hover { background: #555; }
4850
</style>
4951
<div id="panel">
52+
<div id="resize-handle"></div>
5053
<div class="title">
5154
<div style="flex-grow: 1; align-content: center;">Breinify DevStudio</div>
5255
<button class="close-btn" title="Hide Breinify DevStudio">&#x2715;</button>
@@ -75,6 +78,36 @@
7578
this.$toggleButton.click(() => this.toggleDevStudio());
7679

7780
this.$tabs.click(e => this.switchTab(e));
81+
82+
const $resizeHandle = this.$shadowRoot.find('#resize-handle')
83+
.data('isResizing', false);
84+
$resizeHandle.mousedown(e => {
85+
$resizeHandle.data({
86+
isResizing: true,
87+
startX: e.clientX,
88+
startWidth: $resizeHandle.parent()[0].getBoundingClientRect().width
89+
});
90+
91+
$('body').css('user-select', 'none');
92+
e.preventDefault();
93+
});
94+
$(document).on('mouseup blur', e => {
95+
if ($resizeHandle.data('isResizing') === true) {
96+
$resizeHandle.data('isResizing', false);
97+
$('body').css('user-select', '');
98+
}
99+
});
100+
$(document).mousemove(e => {
101+
if (!$resizeHandle.data('isResizing') === true) {
102+
return;
103+
}
104+
105+
const startWidth = $resizeHandle.data('startWidth');
106+
const dx = $resizeHandle.data('startX') - e.clientX;
107+
const newWidth = Math.min(Math.max(startWidth + dx, 200), 1000);
108+
109+
$resizeHandle.parent().css('width', newWidth + 'px');
110+
});
78111
}
79112

80113
toggleDevStudio() {

0 commit comments

Comments
 (0)