hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-23 22:12:44 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #1461 from hcengineering/configurable-member-presenter-1370

Browse Source 
Board: Add EditMember popup (review fixes)
This commit is contained in:
Anna No 2022-04-20 13:49:20 +07:00 committed by GitHub
commit 30095a6929
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/theme/styles/_layouts.scss
View File

@ -328,13 +328,16 @@ p:last-child { margin-block-end: 0; }
.pl-1 { padding-left: .25rem; }
.pl-2 { padding-left: .5rem; }
.pl-3 { padding-left: .75rem; }
.pl-4 { padding-left: 1rem; }
.pl-8 { padding-left: 2rem; }
.pr-1 { padding-right: .25rem; }
.pr-2 { padding-right: .5rem; }
.pr-3 { padding-right: .75rem; }
.pr-4 { padding-right: 1rem; }
.pr-24 { padding-right: 6rem; }
.pt-2 { padding-top: .5rem; }
.pt-3 { padding-top: .75rem; }
.pt-4 { padding-top: 1rem; }
.pb-2 { padding-bottom: .5rem; }
.pb-4 { padding-bottom: 1rem; }

58
plugins/board-resources/src/components/popups/EditMember.svelte
View File

@ -1,36 +1,26 @@
<script lang="ts">
import { Employee, formatName } from '@anticrm/contact'
import { getFirstName, getLastName } from '@anticrm/contact'
import type { Employee } from '@anticrm/contact'
import type { IntlString } from '@anticrm/platform'
import { ActionIcon, IconClose, Label } from '@anticrm/ui'
import { ContactPresenter } from '@anticrm/contact-resources'
export let member: Employee
export let menuItems: { title: IntlString; handler: () => void }[][]
export let onClose: () => void
const firstName = getFirstName(member.name)
const lastName = getLastName(member.name)
const nameLabel = `${firstName?.[0] ?? ''}${lastName?.[0] ?? ''}`.toUpperCase()
const formattedName = formatName(member.name)
</script>
<div class="antiPopup container pb-4 w-85">
<div class="close-icon">
<div class="antiPopup container w-85">
<div class="absolute pt-3 pr-3" style:top="0" style:right="0">
<ActionIcon icon={IconClose} size={'small'} action={onClose} />
</div>
<div class="flex top p-4">
<div class="avatar flex-center">
<span class="name-label fs-bold">{nameLabel}</span>
</div>
<div class="fs-title mt-4 ml-4">
{formattedName}
</div>
<div class='flex p-3'>
<ContactPresenter value={member} />
</div>
{#if menuItems && menuItems.length > 0}
{#each menuItems as menuSubgroup, i}
{#each menuSubgroup as menuItem}
<div
class="menu-item"
class="menu-item pr-3 pl-3 pt-2 pb-2"
on:click={() => {
menuItem.handler()
onClose()
@ -40,49 +30,17 @@
</div>
{/each}
{#if i + 1 < menuItems.length}
<div class="divisor" />
<div class="bottom-divider ml-3 mr-3 mt-2 mb-2" />
{/if}
{/each}
{/if}
</div>
<style lang="scss">
.avatar {
width: 6rem;
height: 6rem;
background-color: var(--popup-bg-hover);
border: 1px solid var(--caption-color);
border-radius: 3rem;
}
.name-label {
font-size: 2rem;
color: var(--caption-color);
}
.top {
background-image: linear-gradient(to bottom, var(--popup-bg-hover) 0%, var(--popup-bg-hover) 100%);
background-repeat: no-repeat;
background-size: 100% 5rem;
}
.menu-item {
padding: 0.5rem 1rem;
&:hover {
cursor: pointer;
background-color: var(--popup-bg-hover);
}
}
.divisor {
margin: 0.5rem 1rem;
border-bottom: 1px solid var(--divider-color);
}
.close-icon {
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
</style>