Replace the Spreadsheet panel with an improved Data panel (#3037)

* Improve the table data panel

* Add the "Window" menu bar section and polish everything

frontend/src/components/floating-menus/ColorPicker.svelte

@@ -39,6 +39,7 @@
 	export let colorOrGradient: FillChoice;
 	export let allowNone = false;
 	// export let allowTransparency = false; // TODO: Implement
+	export let disabled = false;
 	export let direction: MenuDirection = "Bottom";
 	// TODO: See if this should be made to follow the pattern of DropdownInput.svelte so this could be removed
 	export let open: boolean;
@@ -133,6 +134,8 @@
 	}
 
 	function onPointerDown(e: PointerEvent) {
+		if (disabled) return;
+
 		const target = (e.target || undefined) as HTMLElement | undefined;
 		draggingPickerTrack = target?.closest("[data-saturation-value-picker], [data-hue-picker], [data-alpha-picker]") || undefined;
 
@@ -403,7 +406,7 @@
 	});
 </script>
 
-<FloatingMenu class="color-picker" {open} on:open {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
+<FloatingMenu class="color-picker" classes={{ disabled }} {open} on:open {strayCloses} escapeCloses={strayCloses && !gradientSpectrumDragging} {direction} type="Popover" bind:this={self}>
 	<LayoutRow
 		styles={{
 			"--new-color": newColor.toHexOptionalAlpha(),
@@ -418,7 +421,7 @@
 	>
 		<LayoutCol class="pickers-and-gradient">
 			<LayoutRow class="pickers">
-				<LayoutCol class="saturation-value-picker" on:pointerdown={onPointerDown} data-saturation-value-picker>
+				<LayoutCol class="saturation-value-picker" title={disabled ? "Saturation and value (disabled)" : "Saturation and value"} on:pointerdown={onPointerDown} data-saturation-value-picker>
 					{#if !isNone}
 						<div class="selection-circle" style:top={`${(1 - value) * 100}%`} style:left={`${saturation * 100}%`} />
 					{/if}
@@ -432,12 +435,12 @@
 						/>
 					{/if}
 				</LayoutCol>
-				<LayoutCol class="hue-picker" on:pointerdown={onPointerDown} data-hue-picker>
+				<LayoutCol class="hue-picker" title={disabled ? "Hue (disabled)" : "Hue"} on:pointerdown={onPointerDown} data-hue-picker>
 					{#if !isNone}
 						<div class="selection-needle" style:top={`${(1 - hue) * 100}%`} />
 					{/if}
 				</LayoutCol>
-				<LayoutCol class="alpha-picker" on:pointerdown={onPointerDown} data-alpha-picker>
+				<LayoutCol class="alpha-picker" title={disabled ? "Alpha (disabled)" : "Alpha"} on:pointerdown={onPointerDown} data-alpha-picker>
 					{#if !isNone}
 						<div class="selection-needle" style:top={`${(1 - alpha) * 100}%`} />
 					{/if}
@@ -447,6 +450,7 @@
 				<LayoutRow class="gradient">
 					<SpectrumInput
 						{gradient}
+						{disabled}
 						on:gradient={() => {
 							gradient = gradient;
 							if (gradient) dispatch("colorOrGradient", gradient);
@@ -459,6 +463,7 @@
 					{#if gradientSpectrumInputWidget && activeIndex !== undefined}
 						<NumberInput
 							value={(gradient.positionAtIndex(activeIndex) || 0) * 100}
+							{disabled}
 							on:value={({ detail }) => {
 								if (gradientSpectrumInputWidget && activeIndex !== undefined && detail !== undefined) gradientSpectrumInputWidget.setPosition(activeIndex, detail / 100);
 							}}
@@ -478,7 +483,7 @@
 				styles={{ "--outline-amount": outlineFactor }}
 				tooltip={!newColor.equals(oldColor) ? "Comparison between the present color choice (left) and the color before any change was made (right)" : "The present color choice"}
 			>
-				{#if !newColor.equals(oldColor)}
+				{#if !newColor.equals(oldColor) && !disabled}
 					<div class="swap-button-background"></div>
 					<IconButton class="swap-button" icon="SwapHorizontal" size={16} action={swapNewWithOld} tooltip="Swap" />
 				{/if}
@@ -500,6 +505,7 @@
 				<LayoutRow>
 					<TextInput
 						value={newColor.toHexOptionalAlpha() || "-"}
+						{disabled}
 						on:commitText={({ detail }) => {
 							dispatch("startHistoryTransaction");
 							setColorCode(detail);
@@ -520,6 +526,7 @@
 						{/if}
 						<NumberInput
 							value={strength}
+							{disabled}
 							on:value={({ detail }) => {
 								strength = detail;
 								setColorRGB(channel, detail);
@@ -547,6 +554,7 @@
 						{/if}
 						<NumberInput
 							value={strength}
+							{disabled}
 							on:value={({ detail }) => {
 								strength = detail;
 								setColorHSV(channel, detail);
@@ -573,6 +581,7 @@
 				<Separator type="Related" />
 				<NumberInput
 					value={!isNone ? alpha * 100 : undefined}
+					{disabled}
 					on:value={({ detail }) => {
 						if (detail !== undefined) alpha = detail / 100;
 						setColorAlphaPercent(detail);
@@ -593,14 +602,14 @@
 			<LayoutRow class="leftover-space" />
 			<LayoutRow>
 				{#if allowNone && !gradient}
-					<button class="preset-color none" on:click={() => setColorPreset("none")} title="Set to no color" tabindex="0"></button>
+					<button class="preset-color none" {disabled} on:click={() => setColorPreset("none")} title="Set to no color" tabindex="0"></button>
 					<Separator type="Related" />
 				{/if}
-				<button class="preset-color black" on:click={() => setColorPreset("black")} title="Set to black" tabindex="0"></button>
+				<button class="preset-color black" {disabled} on:click={() => setColorPreset("black")} title="Set to black" tabindex="0"></button>
 				<Separator type="Related" />
-				<button class="preset-color white" on:click={() => setColorPreset("white")} title="Set to white" tabindex="0"></button>
+				<button class="preset-color white" {disabled} on:click={() => setColorPreset("white")} title="Set to white" tabindex="0"></button>
 				<Separator type="Related" />
-				<button class="preset-color pure" on:click={setColorPresetSubtile} tabindex="-1">
+				<button class="preset-color pure" {disabled} on:click={setColorPresetSubtile} tabindex="-1">
 					<div data-pure-tile="red" style="--pure-color: #ff0000; --pure-color-gray: #4c4c4c" title="Set to red" />
 					<div data-pure-tile="yellow" style="--pure-color: #ffff00; --pure-color-gray: #e3e3e3" title="Set to yellow" />
 					<div data-pure-tile="green" style="--pure-color: #00ff00; --pure-color-gray: #969696" title="Set to green" />
@@ -609,7 +618,7 @@
 					<div data-pure-tile="magenta" style="--pure-color: #ff00ff; --pure-color-gray: #696969" title="Set to magenta" />
 				</button>
 				<Separator type="Related" />
-				<IconButton icon="Eyedropper" size={24} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
+				<IconButton icon="Eyedropper" size={24} {disabled} action={activateEyedropperSample} tooltip="Sample a pixel color from the document" />
 			</LayoutRow>
 		</LayoutCol>
 	</LayoutRow>
@@ -954,7 +963,7 @@
 						// For the least jarring luminance conversion, these colors are derived by placing a black layer with the "desaturate" blend mode over the colors.
 						// We don't use the CSS `filter: grayscale(1);` property because it produces overly dark tones for bright colors with a noticeable jump on hover.
 						background: var(--pure-color-gray);
-						transition: background-color 0.2s ease;
+						transition: background-color 0.1s;
 					}
 
 					&:hover div {
@@ -963,5 +972,21 @@
 				}
 			}
 		}
+
+		&.disabled .pickers-and-gradient .pickers :is(.saturation-value-picker, .hue-picker, .alpha-picker),
+		&.disabled .details .preset-color,
+		&.disabled .details .choice-preview {
+			transition: opacity 0.1s;
+
+			&:hover {
+				opacity: 0.5;
+			}
+		}
+
+		&.disabled .details .preset-color.pure:hover div {
+			background: var(--pure-color-gray);
+		}
 	}
+
+	// paddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpaddingpadding
 </style>