Hide addition text settings in dots

RobolabGs2 · Sep 28, 2024 · 7771855 · 7771855
1 parent 3316b8d
commit 7771855
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 28 deletions.
diff --git a/src/lib/PreviewsContainer.svelte b/src/lib/PreviewsContainer.svelte
@@ -21,6 +21,7 @@
 </script>
 
 <article
+	class="main"
 	class:reverse
 	style="height: {height};min-height: {height};max-height: {height};"
 	on:drop
@@ -58,7 +59,7 @@
 			border: var(--border-secondary-active);
 		}
 	}
-	article {
+	.main {
 		display: flex;
 		flex-direction: column;
 		&.reverse {

diff --git a/src/lib/text/TextEditor.svelte b/src/lib/text/TextEditor.svelte
@@ -81,6 +81,7 @@
 	// https://icons.getbootstrap.com/icons/paint-bucket/
 	const bootstrapFillSvg =
 		'M6.192 2.78c-.458-.677-.927-1.248-1.35-1.643a2.972 2.972 0 0 0-.71-.515c-.217-.104-.56-.205-.882-.02-.367.213-.427.63-.43.896-.003.304.064.664.173 1.044.196.687.556 1.528 1.035 2.402L.752 8.22c-.277.277-.269.656-.218.918.055.283.187.593.36.903.348.627.92 1.361 1.626 2.068.707.707 1.441 1.278 2.068 1.626.31.173.62.305.903.36.262.05.64.059.918-.218l5.615-5.615c.118.257.092.512.05.939-.03.292-.068.665-.073 1.176v.123h.003a1 1 0 0 0 1.993 0H14v-.057a1.01 1.01 0 0 0-.004-.117c-.055-1.25-.7-2.738-1.86-3.494a4.322 4.322 0 0 0-.211-.434c-.349-.626-.92-1.36-1.627-2.067-.707-.707-1.441-1.279-2.068-1.627-.31-.172-.62-.304-.903-.36-.262-.05-.64-.058-.918.219l-.217.216zM4.16 1.867c.381.356.844.922 1.311 1.632l-.704.705c-.382-.727-.66-1.402-.813-1.938a3.283 3.283 0 0 1-.131-.673c.091.061.204.15.337.274zm.394 3.965c.54.852 1.107 1.567 1.607 2.033a.5.5 0 1 0 .682-.732c-.453-.422-1.017-1.136-1.564-2.027l1.088-1.088c.054.12.115.243.183.365.349.627.92 1.361 1.627 2.068.706.707 1.44 1.278 2.068 1.626.122.068.244.13.365.183l-4.861 4.862a.571.571 0 0 1-.068-.01c-.137-.027-.342-.104-.608-.252-.524-.292-1.186-.8-1.846-1.46-.66-.66-1.168-1.32-1.46-1.846-.147-.265-.225-.47-.251-.607a.573.573 0 0 1-.01-.068l3.048-3.047zm2.87-1.935a2.44 2.44 0 0 1-.241-.561c.135.033.324.11.562.241.524.292 1.186.8 1.846 1.46.45.45.83.901 1.118 1.31a3.497 3.497 0 0 0-1.066.091 11.27 11.27 0 0 1-.76-.694c-.66-.66-1.167-1.322-1.458-1.847z';
+	let moreSettings = false;
 </script>
 
 <article>
@@ -110,39 +111,43 @@
 		bind:textCase={style.case}
 		bind:align={style.align}
 		bind:baseline={style.baseline}
+		bind:moreSettings
 		on:change
 	/>
+	{#if moreSettings}
+		<InputGroup>
+			<InputRow>
+				<span>Размер текста</span>
+				<FontSizeStrategyInput bind:value={style.fontSizeStrategy} />
+			</InputRow>
+			<InputRow>
+				<span>Междустрочный интервал</span>
+				<LineSpacingInput bind:value={style.lineSpacing} />
+			</InputRow>
+			{#if container.type === 'global'}
+				<Label>
+					Отступ: <NumberInput
+						min={0}
+						max={100}
+						step={0.5}
+						withRange={true}
+						withButtons={false}
+						value={style.padding * 100}
+						on:input={(ev) => {
+							style.padding = ev.detail / 100;
+						}}
+					/>
+				</Label>
+			{/if}
+		</InputGroup>
+	{/if}
 	<textarea
 		style="width:100%;max-width: 100%;min-width: 100%;"
 		rows="6"
 		bind:value={text}
 		on:change
 	/>
-	<InputGroup>
-		<InputRow>
-			<span>Размер текста</span>
-			<FontSizeStrategyInput bind:value={style.fontSizeStrategy} />
-		</InputRow>
-		<InputRow>
-			<span>Междустрочный интервал</span>
-			<LineSpacingInput bind:value={style.lineSpacing} />
-		</InputRow>
-		{#if container.type === 'global'}
-			<Label>
-				Отступ: <NumberInput
-					min={0}
-					max={100}
-					step={0.5}
-					withRange={true}
-					withButtons={false}
-					value={style.padding * 100}
-					on:input={(ev) => {
-						style.padding = ev.detail / 100;
-					}}
-				/>
-			</Label>
-		{/if}
-	</InputGroup>
+
 	<TabsContainer {tabs} let:tab bind:activeTab={selected}>
 		<div class="icon" title={tab.label}>
 			{#if tab.icon === 'fill'}

diff --git a/src/lib/text/TextSettings.svelte b/src/lib/text/TextSettings.svelte
@@ -14,7 +14,8 @@
 		IconItalic,
 		IconLetterCase,
 		IconLetterCaseLower,
-		IconLetterCaseUpper
+		IconLetterCaseUpper,
+		IconDots
 	} from '@tabler/icons-svelte';
 	import { mdiFormatAlignMiddle } from '@mdi/js';
 	import SvgIcon from '$lib/base/icons/SvgIcon.svelte';
@@ -33,8 +34,10 @@
 	const selectCSS = {
 		height: '48px',
 		width: '100%',
-		main: 'min-width: 52px;max-width: 108px;'
+		main: 'min-width: 52px;max-width: 116px;'
 	};
+
+	export let moreSettings = false;
 </script>
 
 <article>
@@ -112,6 +115,9 @@
 			<IconLetterCaseLower size={20} />
 		{/if}
 	</Select>
+	<ToggleButton title="Ещё настройки" bind:value={moreSettings} width={buttonWidth} on:change>
+		<IconDots size={20} />
+	</ToggleButton>
 </article>
 
 <style lang="scss">