wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-04-14 04:08:19 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add maxWidth in EditBox (#117)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-01 18:12:50 +03:00 committed by GitHub
parent 4c10063e14
commit 97798f0097
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/ui/src/components/EditBox.svelte
View File

@ -19,7 +19,7 @@
import Label from './Label.svelte' import Label from './Label.svelte'
export let label: IntlString | undefined export let label: IntlString | undefined
export let width: string | undefined export let maxWidth: string | undefined
export let value: string | undefined export let value: string | undefined
export let placeholder: string = 'placeholder' export let placeholder: string = 'placeholder'
export let password: boolean = false export let password: boolean = false
@ -29,6 +29,9 @@
let text: HTMLElement let text: HTMLElement
let input: HTMLInputElement let input: HTMLInputElement
let style: string
$: style = maxWidth ? `max-width: ${maxWidth};` : ''
function computeSize(t: EventTarget | null) { function computeSize(t: EventTarget | null) {
const target = t as HTMLInputElement const target = t as HTMLInputElement
@ -47,16 +50,14 @@
}) })
</script> </script>
<div class="container" style="{width ? 'width: ' + width : ''}" <div class="container" on:click={() => { input.focus() }}>
on:click={() => { input.focus() }}
>
<div class="hidden-text" bind:this={text}></div> <div class="hidden-text" bind:this={text}></div>
{#if label}<div class="label"><Label label={label}/></div>{/if} {#if label}<div class="label"><Label label={label}/></div>{/if}
<div class="wrap"> <div class="wrap">
{#if password} {#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} {: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} {/if}
</div> </div>
</div> </div>

8
plugins/recruit-resources/src/components/SocialEditor.svelte
View File

@ -56,13 +56,13 @@
<div class="popup-block"> <div class="popup-block">
<span>Contact</span> <span>Contact</span>
{#each providers as provider, i} {#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} {/each}
</div> </div>
<!-- <div class="popup-block"> <!-- <div class="popup-block">
<span>SOCIAL LINKS</span> <span>SOCIAL LINKS</span>
<EditBox label={'Twitter'} placeholder={'@rosychen'} /> <EditBox label={'Twitter'} placeholder={'@rosychen'} maxWidth={'12.5rem'} />
<EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} /> <EditBox label={'Facebook'} placeholder={'facebook/rosamundch'} maxWidth={'12.5rem'} />
</div> --> </div> -->
<Button label="Apply" on:click={() => { dispatch('close', newValues) }}/> <Button label="Apply" on:click={() => { dispatch('close', newValues) }}/>
</div> </div>
@ -72,6 +72,8 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1.5rem 1.25rem; padding: 1.5rem 1.25rem;
width: 15rem;
max-width: 15rem;
color: var(--theme-caption-color); color: var(--theme-caption-color);
background-color: var(--theme-button-bg-hovered); background-color: var(--theme-button-bg-hovered);
border: 1px solid var(--theme-button-border-enabled); border: 1px solid var(--theme-button-border-enabled);