WEBDIENSTE/huly-platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2026-09-13 13:17:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add AccountPopup

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
2021-11-17 18:20:30 +03:00
parent 99ddd486a7
commit ef2daab0a2
8 changed files with 102 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/workbench-resources/src/components/AccountPopup.svelte
+87
View File
@@ -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>
plugins/workbench-resources/src/components/CreateUser.svelte
-31
View File
@@ -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>
plugins/workbench-resources/src/components/Workbench.svelte
+4 -2
View File
@@ -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}