From 8b47263a10fc641a43cb827ed19be32eaf3a3606 Mon Sep 17 00:00:00 2001 From: Victor Ilyushchenko Date: Fri, 21 Feb 2025 13:33:03 +0300 Subject: [PATCH 1/3] Minor improvements for survey module (#8066) * Minor improvements for survey module Signed-off-by: Victor Ilyushchenko * ff Signed-off-by: Victor Ilyushchenko --------- Signed-off-by: Victor Ilyushchenko --- packages/theme/styles/editors.scss | 37 ++++-- packages/ui/src/components/EditBox.svelte | 29 ++++- plugins/survey-assets/lang/en.json | 3 +- plugins/survey-assets/lang/ru.json | 3 +- .../src/components/EditPoll.svelte | 10 +- .../src/components/EditPollPanel.svelte | 72 ++++++----- .../src/components/EditQuestion.svelte | 116 +++++++++++------- .../src/components/EditSurvey.svelte | 44 +++---- .../src/components/PollQuestion.svelte | 26 ++-- plugins/survey/src/index.ts | 3 +- 10 files changed, 215 insertions(+), 128 deletions(-) diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss index fff4d8a77f..e19972d887 100644 --- a/packages/theme/styles/editors.scss +++ b/packages/theme/styles/editors.scss @@ -19,7 +19,7 @@ .underline { font-weight: 500; - input { + .antiEditBoxInput { padding: 0.25rem 0.5rem; background-color: var(--theme-editbox-focus-color); border-radius: 0.25rem; @@ -43,7 +43,7 @@ &:focus-within::after { content: ''; } } - input { + .antiEditBoxInput { margin: 0; padding: 0; min-width: 0; @@ -86,7 +86,7 @@ border-radius: .375rem; border: 1px solid transparent; - input { + .antiEditBoxInput { color: inherit; &::placeholder { color: var(--theme-darker-color); } @@ -109,7 +109,7 @@ font-weight: 500; font-size: 1.5rem; - input { + .antiEditBoxInput { font: inherit; &::placeholder { @@ -119,17 +119,17 @@ &:hover input:not(:focus)::placeholder { color: var(--input-hover-PlaceholderColor); } - input:focus::placeholder { + .antiEditBoxInput:focus::placeholder { color: var(--input-focus-PlaceholderColor); } &.disabled { box-shadow: inset 0 0 0 1px var(--input-BorderColor); &, - input { + .antiEditBoxInput { cursor: not-allowed; } - input::placeholder { + .antiEditBoxInput::placeholder { color: var(--input-PlaceholderColor); } } @@ -139,4 +139,27 @@ content: ' *'; color: var(--theme-error-color); } + + .antiEditBoxGridWrapper { + display: grid; + &::after { + content: attr(data-value) " "; + white-space: pre-wrap; + visibility: hidden; + z-index: -1; + } + + textarea { + resize: none; + } + + &::after, textarea { + font: inherit; + outline: none; + background-color: transparent; + overflow: hidden; + grid-area: 1 / 1 / 2 / 2; + min-height: 1.25rem; + } + } } diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte index 7799919890..2f5690f735 100644 --- a/packages/ui/src/components/EditBox.svelte +++ b/packages/ui/src/components/EditBox.svelte @@ -29,7 +29,7 @@ export let value: string | number | undefined = undefined export let placeholder: IntlString = plugin.string.EditBoxPlaceholder export let placeholderParam: any | undefined = undefined - export let format: 'text' | 'password' | 'number' = 'text' + export let format: 'text' | 'password' | 'number' | 'text-multiline' = 'text' export let maxDigitsAfterPoint: number | undefined = undefined export let kind: EditStyle = 'editbox' export let autoFocus: boolean = false @@ -43,7 +43,7 @@ const dispatch = createEventDispatcher() - let input: HTMLInputElement + let input: HTMLInputElement | HTMLTextAreaElement let phTranslate: string = '' $: { @@ -135,8 +135,28 @@ class:w-full={fullSize} style:width={maxWidth} > - {#if format === 'password'} + {#if format === 'text-multiline'} +
+