From 97798f00975abbc63fc5771a1b2eae63d69995d4 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 1 Sep 2021 18:12:50 +0300
Subject: [PATCH] Add maxWidth in EditBox (#117)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
packages/ui/src/components/EditBox.svelte | 13 +++++++------
.../src/components/SocialEditor.svelte | 8 +++++---
2 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/packages/ui/src/components/EditBox.svelte b/packages/ui/src/components/EditBox.svelte
index 06a611f758..2a258aa768 100644
--- a/packages/ui/src/components/EditBox.svelte
+++ b/packages/ui/src/components/EditBox.svelte
@@ -19,7 +19,7 @@
import Label from './Label.svelte'
export let label: IntlString | undefined
- export let width: string | undefined
+ export let maxWidth: string | undefined
export let value: string | undefined
export let placeholder: string = 'placeholder'
export let password: boolean = false
@@ -29,6 +29,9 @@
let text: HTMLElement
let input: HTMLInputElement
+ let style: string
+
+ $: style = maxWidth ? `max-width: ${maxWidth};` : ''
function computeSize(t: EventTarget | null) {
const target = t as HTMLInputElement
@@ -47,16 +50,14 @@
})
</script>
-<div class="container" style="{width ? 'width: ' + width : ''}"
- on:click={() => { input.focus() }}
->
+<div class="container" on:click={() => { input.focus() }}>
<div class="hidden-text" bind:this={text}></div>
{#if label}<div class="label"><Label label={label}/></div>{/if}
<div class="wrap">
{#if password}
- <input bind:this={input} type="password" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
+ <input bind:this={input} type="password" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} />
{:else}
- <input bind:this={input} type="text" bind:value {placeholder} on:input={(ev) => ev.target && computeSize(ev.target)} />
+ <input bind:this={input} type="text" bind:value {placeholder} {style} on:input={(ev) => ev.target && computeSize(ev.target)} />
{/if}
</div>
</div>
diff --git a/plugins/recruit-resources/src/components/SocialEditor.svelte b/plugins/recruit-resources/src/components/SocialEditor.svelte
index 3a41f41c95..00aca6c33e 100644
--- a/plugins/recruit-resources/src/components/SocialEditor.svelte
+++ b/plugins/recruit-resources/src/components/SocialEditor.svelte
@@ -56,13 +56,13 @@
<div class="popup-block">
<span>Contact</span>
{#each providers as provider, i}
- <EditBox label={provider.label} placeholder={'+7 (000) 000-00-00'} bind:value={newValues[i].value}/>
+ <EditBox label={provider.label} placeholder={'+7 (000) 000-00-00'} bind:value={newValues[i].value} maxWidth={'12.5rem'}/>
{/each}
</div>
<!-- <div class="popup-block">
<span>SOCIAL LINKS</span>
- <EditBox label={'Twitter'} placeholder={'@rosychen'} />
- <EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} />
+ <EditBox label={'Twitter'} placeholder={'@rosychen'} maxWidth={'12.5rem'} />
+ <EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} maxWidth={'12.5rem'} />
</div> -->
<Button label="Apply" on:click={() => { dispatch('close', newValues) }}/>
</div>
@@ -72,6 +72,8 @@
display: flex;
flex-direction: column;
padding: 1.5rem 1.25rem;
+ width: 15rem;
+ max-width: 15rem;
color: var(--theme-caption-color);
background-color: var(--theme-button-bg-hovered);
border: 1px solid var(--theme-button-border-enabled);