Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Independent scrolling of the code editor in an embedded Lite app in the playground mode #10575

Merged
merged 12 commits into from
Feb 20, 2025
+77 −55
Merged

Independent scrolling of the code editor in an embedded Lite app in the playground mode #10575

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
84e8c0e
Make the preview and the code editor scroll independently in an embed…
whitphx Feb 12, 2025
a792bdc
Merge .wrapper to .parent-container
whitphx Feb 12, 2025
d166e0b
Refactoring
whitphx Feb 12, 2025
7de4704
Refactoring
whitphx Feb 12, 2025
1399b71
Preview block dominates the height
whitphx Feb 12, 2025
2863e26
add changeset
gradio-pr-bot Feb 12, 2025
f0d5f32
Keep code editor height >0 during loading
whitphx Feb 17, 2025
581c484
Set .code-editor height
whitphx Feb 17, 2025
3cfb9dd
Fix
whitphx Feb 17, 2025
2b857a1
Merge branch 'main' into lite-playground-independent-scroll
whitphx Feb 17, 2025
30feba2
add changeset
gradio-pr-bot Feb 17, 2025
86b3719
Set default layout as horizontal
whitphx Feb 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/plenty-chicken-grow.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@gradio/lite": minor
---

feat:Independent scrolling of the code editor in an embedded Lite app in the playground mode
129 changes: 74 additions & 55 deletions js/lite/src/Playground.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,41 +101,41 @@
</script>

<div class="parent-container" bind:this={parent_container}>
<div class="wrapper">
<div class="loading-panel">
<div class="code-header">app.py</div>
{#if !loaded}
<div style="display: flex;"></div>
<div class="loading-section">
<div class="loading-dot"></div>
{loading_text}
</div>
{:else}
<div class="buttons">
<div class="run">
<button
class="button"
on:click={() => {
dispatch("code", { code });
}}
>
Run
<div class="shortcut">⌘+↵</div>
</button>
</div>
</div>
<div style="flex-grow: 1"></div>
<div class="loading-section">
<img src={lightning} alt="lightning icon" class="lightning-logo" />
Interactive
<div class="loading-panel">
<div class="code-header">app.py</div>
{#if !loaded}
<div style="display: flex;"></div>
<div class="loading-section">
<div class="loading-dot"></div>
{loading_text}
</div>
{:else}
<div class="buttons">
<div class="run">
<button
class="button"
on:click={() => {
dispatch("code", { code });
}}
>
Run
<div class="shortcut">⌘+↵</div>
</button>
</div>
{/if}
</div>
<div
class:horizontal={layout === "horizontal"}
class:vertical={layout === "vertical"}
class="child-container"
>
</div>
<div style="flex-grow: 1"></div>
<div class="loading-section">
<img src={lightning} alt="lightning icon" class="lightning-logo" />
Interactive
</div>
{/if}
</div>
<div
class:horizontal={layout === "horizontal"}
class:vertical={layout === "vertical"}
class="child-container"
>
<div class="half-container">
<div
class:code-editor-border={loaded}
class="code-editor"
Expand All @@ -151,59 +151,79 @@
/>
</Block>
</div>
{#if loaded}
</div>
{#if loaded}
<div class="half-container">
<div class="preview">
<slot></slot>
</div>
{/if}
</div>
</div>
{/if}
</div>
</div>

<style>
.wrapper {
width: 100%;
height: 100%;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.parent-container {
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid rgb(229 231 235);
border-radius: 0.375rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
overflow: scroll;
}

:global(.dark .parent-container) {
border-color: #374151 !important;
color-scheme: dark !important;
}

.child-container {
flex-grow: 1;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.child-container.horizontal {
flex-direction: row;
}
.child-container.vertical {
flex-direction: column;
height: 100%;
overflow: hidden;
}

.horizontal {
flex-direction: row !important;
.half-container {
position: relative;
flex-grow: 1;
}
.child-container.horizontal .half-container {
width: 50%;
}
.child-container.vertical .half-container {
height: 50%;
overflow: scroll;
}

.vertical {
flex-direction: column !important;
.child-container.horizontal .code-editor.code-editor-border {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.vertical .code-editor-border {
border-right: none !important;
border-right: none;
}

.horizontal .code-editor-border {
border-right: 1px solid rgb(229 231 235);
border-bottom: none;
}
:global(.dark .horizontal .code-editor-border) {
border-right: 1px solid #374151 !important;
border-right: 1px solid #374151;
}

@media (min-width: 768px) {
Expand All @@ -214,11 +234,12 @@
border-right: 1px solid rgb(229 231 235);
}
:global(.dark .code-editor-border) {
border-right: 1px solid #374151 !important;
border-right: 1px solid #374151;
}
}

.code-editor {
height: 100%;
flex: 1 1 50%;
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -277,9 +298,7 @@
}

.preview {
flex: 1 1 50%;
display: flex;
flex-direction: column;
min-height: 100%;
}

.buttons {
Expand Down
Loading