Fix CircleButton (#290)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-10-27 18:57:07 +03:00 committed by GitHub
parent bcc2e09d40
commit a982a5c6c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 3 deletions

View File

@ -20,10 +20,11 @@
export let icon: Asset | AnySvelteComponent
export let size: 'small' | 'medium' | 'large' = 'large'
export let transparent: boolean = false
export let selected: boolean = false
</script>
<div class="icon-button icon-{size}" class:selected on:click>
<div class="icon-button icon-{size}" class:selected class:transparent on:click>
<div class="content">
{#if typeof (icon) === 'string'}
<Icon {icon} size={'small'}/>
@ -49,6 +50,7 @@
pointer-events: none;
}
&.selected { background-color: var(--theme-button-bg-hovered); }
&.transparent { background-color: rgba(31, 31, 37, .3); }
&:hover { border-color: var(--theme-bg-focused-border); }
&:active { background-color: var(--theme-bg-accent-color); }
}

View File

@ -179,11 +179,11 @@
<div class="flex-row-center channels">
{#if !object.channels || object.channels.length === 0}
<CircleButton icon={IconAdd} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
<CircleButton icon={IconAdd} size={'small'} transparent on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
<span><Label label={'Add social links'} /></span>
{:else}
<Channels value={object.channels} size={'small'} />
<CircleButton icon={Edit} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
<CircleButton icon={Edit} size={'small'} transparent on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { object.channels = result })} />
{/if}
</div>