add minimized debugger
This commit is contained in:
parent
ddce6c4e89
commit
95cc4d3ccb
|
@ -140,18 +140,13 @@
|
|||
<div id="qr--modal-executeResult"></div>
|
||||
|
||||
<div id="qr--modal-debugButtons">
|
||||
<div title="Resume" id="qr--modal-resume" class="qr--modal-debugButton menu_button">
|
||||
<!-- <span class="qr--glyph">▷</span> -->
|
||||
</div>
|
||||
<div title="Step Over" id="qr--modal-step" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
||||
<!-- <span class="qr--glyph">↷</span><span class="qr--glyph">▪</span> -->
|
||||
</div>
|
||||
<div title="Step Into" id="qr--modal-stepInto" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
||||
<!-- <span class="qr--glyph">↓</span><span class="qr--glyph">▪</span> -->
|
||||
</div>
|
||||
<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton qr--glyph-combo menu_button">
|
||||
<!-- <span class="qr--glyph">↑</span><span class="qr--glyph">▪</span> -->
|
||||
</div>
|
||||
<div title="Resume" id="qr--modal-resume" class="qr--modal-debugButton menu_button"></div>
|
||||
<div title="Step Over" id="qr--modal-step" class="qr--modal-debugButton menu_button"></div>
|
||||
<div title="Step Into" id="qr--modal-stepInto" class="qr--modal-debugButton menu_button"></div>
|
||||
<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton menu_button"></div>
|
||||
<div title="Step Out" id="qr--modal-stepOut" class="qr--modal-debugButton menu_button"></div>
|
||||
<div title="Minimize" id="qr--modal-minimize" class="qr--modal-debugButton menu_button fa-solid fa-minimize"></div>
|
||||
<div title="Maximize" id="qr--modal-maximize" class="qr--modal-debugButton menu_button fa-solid fa-maximize"></div>
|
||||
</div>
|
||||
<div id="qr--modal-debugState"></div>
|
||||
</div>
|
||||
|
|
|
@ -879,6 +879,15 @@ export class QuickReply {
|
|||
stepOutBtn.addEventListener('click', ()=>{
|
||||
this.debugController?.stepOut();
|
||||
});
|
||||
/**@type {HTMLElement}*/
|
||||
const minimizeBtn = dom.querySelector('#qr--modal-minimize');
|
||||
minimizeBtn.addEventListener('click', ()=>{
|
||||
this.editorDom.classList.add('qr--minimized');
|
||||
});
|
||||
const maximizeBtn = dom.querySelector('#qr--modal-maximize');
|
||||
maximizeBtn.addEventListener('click', ()=>{
|
||||
this.editorDom.classList.remove('qr--minimized');
|
||||
});
|
||||
/**@type {boolean}*/
|
||||
let isResizing = false;
|
||||
let resizeStart;
|
||||
|
|
|
@ -337,6 +337,54 @@
|
|||
.popup:has(#qr--modalEditor) {
|
||||
aspect-ratio: unset;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) {
|
||||
min-width: unset;
|
||||
min-height: unset;
|
||||
height: auto !important;
|
||||
width: min-content !important;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
left: unset;
|
||||
bottom: unset;
|
||||
margin: unset;
|
||||
padding: 0;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized)::backdrop {
|
||||
backdrop-filter: unset;
|
||||
background-color: transparent;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-body {
|
||||
flex: 0 0 auto;
|
||||
height: min-content;
|
||||
width: min-content;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor {
|
||||
max-height: 50vh;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--main,
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--resizeHandle,
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > h3,
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > #qr--modal-executeButtons,
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor > #qr--qrOptions > #qr--modal-executeProgress {
|
||||
display: none;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--qrOptions {
|
||||
width: auto;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
|
||||
display: flex;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {
|
||||
display: none;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting.qr--minimized) .popup-content > #qr--modalEditor #qr--modal-debugState {
|
||||
padding-top: 0;
|
||||
}
|
||||
.popup:has(#qr--modalEditor):has(.qr--isExecuting) .popup-controls {
|
||||
display: none;
|
||||
}
|
||||
|
@ -585,7 +633,7 @@
|
|||
width: 2.25em;
|
||||
position: relative;
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton:after {
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton:not(.fa-solid):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
|
@ -606,6 +654,9 @@
|
|||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-stepOut:after {
|
||||
mask-image: url('/img/step-out.svg');
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
|
||||
display: none;
|
||||
}
|
||||
.popup:has(#qr--modalEditor) .popup-content > #qr--modalEditor #qr--modal-executeProgress {
|
||||
--prog: 0;
|
||||
--progColor: #92befc;
|
||||
|
|
|
@ -400,6 +400,56 @@
|
|||
.popup:has(#qr--modalEditor) {
|
||||
aspect-ratio: unset;
|
||||
|
||||
&:has(.qr--isExecuting.qr--minimized) {
|
||||
min-width: unset;
|
||||
min-height: unset;
|
||||
height: auto !important;
|
||||
width: min-content !important;
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
left: unset;
|
||||
bottom: unset;
|
||||
margin: unset;
|
||||
padding: 0;
|
||||
&::backdrop {
|
||||
backdrop-filter: unset;
|
||||
background-color: transparent;
|
||||
}
|
||||
.popup-body {
|
||||
flex: 0 0 auto;
|
||||
height: min-content;
|
||||
width: min-content;
|
||||
}
|
||||
.popup-content {
|
||||
flex: 0 0 auto;
|
||||
margin-top: 0;
|
||||
|
||||
> #qr--modalEditor {
|
||||
max-height: 50vh;
|
||||
> #qr--main,
|
||||
> #qr--resizeHandle,
|
||||
> #qr--qrOptions > h3,
|
||||
> #qr--qrOptions > #qr--modal-executeButtons,
|
||||
> #qr--qrOptions > #qr--modal-executeProgress
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
#qr--qrOptions {
|
||||
width: auto;
|
||||
}
|
||||
#qr--modal-debugButtons .qr--modal-debugButton#qr--modal-maximize {
|
||||
display: flex;
|
||||
}
|
||||
#qr--modal-debugButtons .qr--modal-debugButton#qr--modal-minimize {
|
||||
display: none;
|
||||
}
|
||||
#qr--modal-debugState {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:has(.qr--isExecuting) {
|
||||
.popup-controls {
|
||||
display: none;
|
||||
|
@ -663,7 +713,7 @@
|
|||
aspect-ratio: 1.25 / 1;
|
||||
width: 2.25em;
|
||||
position: relative;
|
||||
&:after {
|
||||
&:not(.fa-solid):after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
|
@ -684,15 +734,9 @@
|
|||
&#qr--modal-stepOut:after {
|
||||
mask-image: url('/img/step-out.svg');
|
||||
}
|
||||
// &.qr--glyph-combo {
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr;
|
||||
// grid-template-rows: 1fr 1fr;
|
||||
// .qr--glyph {
|
||||
// grid-column: 1;
|
||||
// line-height: 0.8;
|
||||
// }
|
||||
// }
|
||||
&#qr--modal-maximize {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue