hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-12-24 12:06:57 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add hovers on social links (#127)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2021-09-02 20:05:48 +03:00 committed by GitHub
parent a5869ceb87
commit a12e478e49
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 92 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
plugins/contact-resources/src/components/ChannelsPresenter.svelte
View File

@ -21,6 +21,7 @@ import type { Channel, ChannelProvider } from '@anticrm/contact'
import { getClient } from '@anticrm/presentation'
import { Icon } from '@anticrm/ui'
import IconCopy from './icons/Copy.svelte'
import contact from '@anticrm/contact'
@ -65,40 +66,113 @@ let displayItems: Item[] = []
</script>
<div class="container">
<div class="container" on:click|stopPropagation={() => {}}>
{#each displayItems as item}
<div class="circle">
<div class="circle list">
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
</div>
<div class="window">
<div class="circle circle-icon">
<div class="icon"><Icon icon={item.icon} size={'small'}/></div>
</div>
<div class="flex-grow flex-col caption-color">
<div class="overflow-label label">{item.label}</div>
<div class="overflow-label">{item.value}</div>
</div>
<div class="button" on:click|preventDefault={() => { alert('Copied: ' + item.value) }}>
<IconCopy size={'medium'}/>
</div>
</div>
{/each}
</div>
<style lang="scss">
.container {
position: relative;
display: flex;
flex-direction: row-reverse;
align-items: center;
.circle {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
border: 1px solid var(--theme-bg-focused-color);
border-radius: 50%;
cursor: pointer;
.icon {
// transform-origin: center center;
// transform: scale(.75);
transform-origin: center center;
transform: scale(.75);
opacity: .4;
}
&:hover {
border-color: var(--theme-bg-focused-border);
.icon { opacity: 1; }
&-icon {
margin-right: .75rem;
width: 2.25rem;
height: 2.25rem;
.icon {
transform: none;
opacity: 1;
}
}
}
.circle + .circle { margin-right: .25rem; }
.list {
margin-right: .25rem;
width: 1.5rem;
height: 1.5rem;
&:hover {
border-color: var(--theme-bg-focused-border);
z-index: 5;
.icon { opacity: 1; }
& + .window {
z-index: 4;
visibility: visible;
}
&::after { content: ''; }
}
&::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: -1rem;
}
}
.window {
position: absolute;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
top: 2.25rem;
right: 0;
background-color: var(--theme-button-bg-focused);
border: 1px solid var(--theme-button-border-enabled);
border-radius: .75rem;
box-shadow: 0 .75rem 1.25rem rgba(0, 0, 0, .2);
visibility: hidden;
&:hover {
z-index: 4;
visibility: visible;
}
}
}
.label {
font-weight: 500;
font-size: .75rem;
}
.button {
margin-left: 1.5rem;
opacity: .4;
cursor: pointer;
&:hover { opacity: 1; }
}
</style>

8
plugins/contact-resources/src/components/icons/Copy.svelte Normal file
View File

@ -0,0 +1,8 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'var(--theme-caption-color)'
</script>
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path d="M12,0H6.4C4.9,0,3.6,1.2,3.5,2.7C2.2,2.9,1.1,4.1,1.1,5.5v7.7C1.1,14.7,2.4,16,4,16h5.6c1.5,0,2.7-1.2,2.8-2.7 c1.4-0.2,2.4-1.4,2.4-2.8V2.9C14.9,1.3,13.6,0,12,0z M9.6,14.9H4c-0.9,0-1.7-0.8-1.7-1.7V5.5c0-0.8,0.5-1.4,1.2-1.6v6.7 c0,1.6,1.3,2.9,2.9,2.9h4.9C11.2,14.2,10.5,14.9,9.6,14.9z M13.7,10.5c0,0.9-0.8,1.7-1.7,1.7H6.4c-0.9,0-1.7-0.8-1.7-1.7V2.9 c0-0.9,0.8-1.7,1.7-1.7H12c0.9,0,1.7,0.8,1.7,1.7V10.5z"/>
</svg>