mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 11:31:57 +03:00
Add AccountPopup
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
parent
99ddd486a7
commit
ef2daab0a2
@ -243,15 +243,18 @@ a.no-line {
|
||||
&:active { color: var(--theme-content-accent-color); }
|
||||
&:visited { color: var(--theme-caption-color); }
|
||||
}
|
||||
.cursor-pointer { cursor: pointer; }
|
||||
|
||||
/* Text */
|
||||
.small-text { font-size: .75rem; }
|
||||
.fs-title {
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
color: var(--theme-caption-color);
|
||||
user-select: none;
|
||||
}
|
||||
.fs-subtitle { font-size: .75rem; }
|
||||
.fs-bold { font-weight: 500; }
|
||||
|
||||
.over-underline {
|
||||
cursor: pointer;
|
||||
&:hover { text-decoration: underline; }
|
||||
@ -269,7 +272,6 @@ a.no-line {
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
.small-text { font-size: .75rem; }
|
||||
|
||||
.focused-button {
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
|
||||
@ -69,6 +69,9 @@
|
||||
modalHTML.style.top = '4rem'
|
||||
modalHTML.style.bottom = '4rem'
|
||||
modalHTML.style.right = '4rem'
|
||||
} else if (element === 'account') {
|
||||
modalHTML.style.bottom = '2.75rem'
|
||||
modalHTML.style.left = '5rem'
|
||||
} else if (element === 'full') {
|
||||
modalHTML.style.top = '0'
|
||||
modalHTML.style.bottom = '0'
|
||||
|
||||
@ -54,7 +54,7 @@ export interface Tab {
|
||||
|
||||
export type TabModel = Tab[]
|
||||
|
||||
export type PopupAlignment = HTMLElement | 'right' | 'float' | 'full'
|
||||
export type PopupAlignment = HTMLElement | 'right' | 'float' | 'account' | 'full'
|
||||
|
||||
export type TooltipAligment = 'top' | 'bottom' | 'left' | 'right'
|
||||
|
||||
|
||||
@ -142,8 +142,8 @@
|
||||
<div class="flex-col">
|
||||
<div class="fs-title"><EditBox placeholder="John" maxWidth="10rem" bind:value={firstName}/></div>
|
||||
<div class="fs-title mb-1"><EditBox placeholder="Appleseed" maxWidth="10rem" bind:value={lastName}/></div>
|
||||
<div class="fs-subtitle"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
|
||||
<div class="fs-subtitle"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
|
||||
<div class="small-text"><EditBox placeholder="Title" maxWidth="10rem" bind:value={object.title}/></div>
|
||||
<div class="small-text"><EditBox placeholder="Location" maxWidth="10rem" bind:value={object.city}/></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -43,7 +43,7 @@
|
||||
<Avatar avatar={object.$lookup?.attachedTo?.avatar} size={'medium'} />
|
||||
<div class="flex-col ml-2">
|
||||
<div class="fs-title over-underline" on:click={showCandidate}><Label label={formatName(object.$lookup?.attachedTo?.name)} /></div>
|
||||
<div class="fs-subtitle"><Label label={formatName(object.$lookup?.attachedTo?.title)} /></div>
|
||||
<div class="small-text"><Label label={formatName(object.$lookup?.attachedTo?.title)} /></div>
|
||||
</div>
|
||||
</div>
|
||||
<ActionIcon label={'More...'} icon={IconMoreH} size={'small'} />
|
||||
|
||||
@ -0,0 +1,87 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { Label } from '@anticrm/ui'
|
||||
import { Avatar } from '@anticrm/presentation'
|
||||
|
||||
let items: string[] = ['Settings', 'Integrations', 'Support', 'Privacy', 'Terms & policy', 'Sign out']
|
||||
</script>
|
||||
|
||||
<div class="account-popup">
|
||||
<div class="popup-bg" />
|
||||
<div class="flex-row-center header">
|
||||
<Avatar size={'medium'} />
|
||||
<div class="ml-2 flex-col">
|
||||
<div class="overflow-label fs-bold caption-color">User Name</div>
|
||||
<div class="overflow-label small-text content-dark-color">rosamund.chen@gmail.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
{#each items as item }
|
||||
<div class="item">{item}</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.account-popup {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 16rem;
|
||||
min-width: 16rem;
|
||||
max-width: 16rem;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
margin: .75rem 1rem;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
margin: 0 .5rem 1rem;
|
||||
height: fit-content;
|
||||
|
||||
.item {
|
||||
padding: .5rem;
|
||||
color: var(--theme-content-accent-color);
|
||||
border-radius: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: var(--theme-card-bg);
|
||||
border-radius: 1.25rem;
|
||||
backdrop-filter: blur(15px);
|
||||
box-shadow: var(--theme-card-shadow);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,31 +0,0 @@
|
||||
<!--
|
||||
// Copyright © 2020 Anticrm Platform Contributors.
|
||||
//
|
||||
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License. You may
|
||||
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
//
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { TextArea, EditBox, Dialog, ToggleWithLabel, Grid } from '@anticrm/ui'
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
Hello
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
@ -31,7 +31,7 @@
|
||||
|
||||
import { AnyComponent, location, Popup, showPopup, TooltipInstance } from '@anticrm/ui'
|
||||
import core from '@anticrm/core'
|
||||
import CreateUser from './CreateUser.svelte'
|
||||
import AccountPopup from './AccountPopup.svelte'
|
||||
|
||||
export let client: Client
|
||||
|
||||
@ -74,7 +74,9 @@
|
||||
<ActivityStatus status="active"/>
|
||||
<Applications active={currentApp}/>
|
||||
<div class="flex-center" style="min-height: 6.25rem;">
|
||||
<div on:click={(el) => { showPopup(CreateUser, { }, el.target) }}><Avatar size={'medium'} /></div>
|
||||
<div class="cursor-pointer" on:click={(el) => { showPopup(AccountPopup, { }, 'account') }}>
|
||||
<Avatar size={'medium'} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if navigator}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user