refactor tools wrap styling

gradio-app · Oct 24, 2024 · f1b3851 · f1b3851
1 parent 90d9d14
commit f1b3851
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 47 deletions.
diff --git a/js/imageeditor/shared/ImageEditor.svelte b/js/imageeditor/shared/ImageEditor.svelte
@@ -356,9 +356,9 @@
 		<div class="wrap" bind:this={canvas_wrap}>
 			<div bind:this={pixi_target} class="stage-wrap" class:bg={!bg}></div>
 		</div>
-		<div class="tools-wrap">
-			<slot />
-		</div>
+		<!-- <div class="tools-wrap"> -->
+		<slot />
+		<!-- </div> -->
 		<div
 			class="canvas"
 			class:no-border={!bg && $active_tool === "bg" && !history}
@@ -406,18 +406,6 @@
 		width: auto;
 	}
 
-	.tools-wrap {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		padding: 0 var(--spacing-xl) 0 0;
-		border: 1px solid var(--block-border-color);
-		border-radius: var(--radius-sm);
-		margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
-		width: fit-content;
-		margin: 0 auto;
-	}
-
 	.image-container {
 		display: flex;
 		height: 100%;

diff --git a/js/imageeditor/shared/InteractiveImageEditor.svelte b/js/imageeditor/shared/InteractiveImageEditor.svelte
@@ -229,38 +229,40 @@
 	{sources}
 	crop_constraint={!!crop_constraint}
 >
-	<Tools {i18n}>
-		<Layers layer_files={value?.layers || null} enable_layers={layers} />
-
-		<Sources
-			bind:dragging
-			{i18n}
-			{root}
-			{sources}
-			{upload}
-			{stream_handler}
-			bind:bg
-			bind:active_mode
-			background_file={value?.background || value?.composite || null}
-		></Sources>
-
-		{#if transforms.includes("crop")}
-			<Crop {crop_constraint} />
-		{/if}
-		{#if brush}
-			<Brush
-				color_mode={brush.color_mode}
-				default_color={brush.default_color}
-				default_size={brush.default_size}
-				colors={brush.colors}
-				mode="draw"
-			/>
-		{/if}
-
-		{#if brush && eraser}
-			<Brush default_size={eraser.default_size} mode="erase" />
-		{/if}
-	</Tools>
+	<div class="tools-wrap">
+		<Tools {i18n}>
+			<Layers layer_files={value?.layers || null} enable_layers={layers} />
+
+			<Sources
+				bind:dragging
+				{i18n}
+				{root}
+				{sources}
+				{upload}
+				{stream_handler}
+				bind:bg
+				bind:active_mode
+				background_file={value?.background || value?.composite || null}
+			></Sources>
+
+			{#if transforms.includes("crop")}
+				<Crop {crop_constraint} />
+			{/if}
+			{#if brush}
+				<Brush
+					color_mode={brush.color_mode}
+					default_color={brush.default_color}
+					default_size={brush.default_size}
+					colors={brush.colors}
+					mode="draw"
+				/>
+			{/if}
+
+			{#if brush && eraser}
+				<Brush default_size={eraser.default_size} mode="erase" />
+			{/if}
+		</Tools>
+	</div>
 
 	{#if !bg && !history && active_mode !== "webcam" && status !== "error"}
 		<div class="empty wrap" style:height={`${editor_height}px`}>
@@ -328,4 +330,18 @@
 	.or {
 		color: var(--body-text-color-subdued);
 	}
+
+	.tools-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		padding: 0 var(--spacing-xl) 0 0;
+		border: 1px solid var(--block-border-color);
+		border-radius: var(--radius-sm);
+		margin: var(--spacing-xxl) 0 var(--spacing-xxl) 0;
+		width: fit-content;
+		margin: 0 auto;
+		position: sticky;
+		bottom: 10px;
+	}
 </style>