mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-22 21:50:34 +03:00
Add Popup component (#32)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
99c49f39be
commit
0ba043d972
@ -156,3 +156,33 @@ select:-webkit-autofill:focus {
|
||||
.border-primary-button { border-color: var(--primary-button-border); }
|
||||
.border-button-enabled { border: 1px solid var(--theme-button-border-enabled); }
|
||||
.bottom-divider { border-bottom: 1px solid var(--theme-menu-divider); }
|
||||
|
||||
/* Popups */
|
||||
.popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before, .popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: .625rem;
|
||||
height: 1.75rem;
|
||||
clip-path: path('M0.6,8.3l2.7,2.4C4.4,11.8,5,12.8,5,14C5,13.1,5,0.9,5,0c0,1.2-0.6,2.2-1.7,3.2L0.6,5.7 c-0.7,0.6-0.8,1.7-0.2,2.5C0.5,8.2,0.5,8.3,0.6,8.3z');
|
||||
}
|
||||
|
||||
.popup-top-right::after, .popup-top-right::before, .popup-top-left::after, .popup-top-left::before
|
||||
{ transform: rotate(-90deg); }
|
||||
.popup-bottom-right::after, .popup-bottom-right::before, .popup-bottom-left::after, .popup-bottom-left::before
|
||||
{ transform: rotate(90deg); }
|
||||
.popup-top-right::after, .popup-top-left::after, .popup-bottom-right::after, .popup-bottom-left::after
|
||||
{ background-color: var(--theme-button-bg-hovered); }
|
||||
.popup-top-right::before, .popup-top-left::before, .popup-bottom-right::before, .popup-bottom-left::before
|
||||
{ background-color: var(--theme-button-bg-hovered); box-shadow: inset 0 0 0 2rem var(--theme-button-border-enabled); }
|
||||
.popup-top-right::after, .popup-top-left::after
|
||||
{ bottom: -.875rem; }
|
||||
.popup-top-right::before, .popup-top-left::before
|
||||
{ bottom: -.9375rem; }
|
||||
.popup-bottom-right::after, .popup-bottom-left::after
|
||||
{ top: -.875rem; }
|
||||
.popup-bottom-right::before, .popup-bottom-left::before
|
||||
{ top: -.9375rem; }
|
||||
.popup-top-left::after, .popup-top-left::before, .popup-bottom-left::after, .popup-bottom-left::before
|
||||
{ right: 1.5rem; }
|
||||
.popup-top-right::after, .popup-top-right::before, .popup-bottom-right::after, .popup-bottom-right::before
|
||||
{ left: 1.5rem; }
|
||||
|
||||
98
packages/ui/src/components/Popup.svelte
Normal file
98
packages/ui/src/components/Popup.svelte
Normal file
@ -0,0 +1,98 @@
|
||||
<!--
|
||||
// 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 { popupstore as modal } from '..'
|
||||
import Component from './Component.svelte'
|
||||
|
||||
let modalHTML: HTMLElement
|
||||
let modalOHTML: HTMLElement
|
||||
|
||||
function close () {
|
||||
modal.set({ is: undefined, props: {}, element: undefined })
|
||||
}
|
||||
|
||||
function handleKeydown (ev: KeyboardEvent) {
|
||||
if (ev.key === 'Escape' && $modal.is) {
|
||||
close()
|
||||
}
|
||||
}
|
||||
|
||||
function convertRemToPx(rem: number) {
|
||||
return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
|
||||
}
|
||||
|
||||
$: {
|
||||
if (modalHTML) {
|
||||
if ($modal.element) {
|
||||
const rect = $modal.element.getBoundingClientRect()
|
||||
let style: string = 'popup-'
|
||||
if (rect.top > document.body.clientHeight - rect.bottom) {
|
||||
style += 'top-'
|
||||
modalHTML.style.bottom = document.body.clientHeight - rect.top + convertRemToPx(.75) + 'px'
|
||||
} else {
|
||||
style += 'bottom-'
|
||||
modalHTML.style.top = rect.bottom + convertRemToPx(.75) + 'px'
|
||||
}
|
||||
if (rect.left > document.body.clientWidth - rect.right) {
|
||||
style += 'left'
|
||||
modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
|
||||
} else {
|
||||
style += 'right'
|
||||
modalHTML.style.left = rect.left + 'px'
|
||||
}
|
||||
modalHTML.classList.add(style)
|
||||
} else {
|
||||
modalHTML.style.top = '50%'
|
||||
modalHTML.style.left = '50%'
|
||||
modalHTML.style.transform = 'translate(-50%, -50%)'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={handleKeydown} />
|
||||
|
||||
{#if $modal.is}
|
||||
<div class="popup" bind:this={modalHTML}>
|
||||
{#if typeof($modal.is) === 'string'}
|
||||
<Component is={$modal.is} props={$modal.props} on:close={close}/>
|
||||
{:else}
|
||||
<svelte:component this={$modal.is} {...$modal.props} on:close={close} />
|
||||
{/if}
|
||||
</div>
|
||||
<div bind:this={modalOHTML} class="modal-overlay" on:click={close} />
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.popup {
|
||||
position: fixed;
|
||||
padding: .5rem;
|
||||
color: var(--theme-caption-color);
|
||||
background-color: var(--theme-button-bg-hovered);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .75rem;
|
||||
box-shadow: 0px -.5rem 1.25rem rgba(0, 0, 0, .25);
|
||||
z-index: 1001;
|
||||
}
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 1000;
|
||||
}
|
||||
</style>
|
||||
@ -50,6 +50,7 @@ export { default as CheckBoxList } from './components/CheckBoxList.svelte'
|
||||
export { default as IconSize } from './components/IconSize.svelte'
|
||||
export { default as EditWithIcon } from './components/EditWithIcon.svelte'
|
||||
export { default as Loading } from './components/Loading.svelte'
|
||||
export { default as Popup } from './components/Popup.svelte'
|
||||
|
||||
export { default as IconAdd } from './components/icons/Add.svelte'
|
||||
export { default as IconSearch } from './components/icons/Search.svelte'
|
||||
@ -83,3 +84,16 @@ export function closeModal (): void {
|
||||
store.set({ is: undefined, props: {}, element: undefined })
|
||||
}
|
||||
|
||||
export const popupstore = writable<CompAndProps>({
|
||||
is: undefined,
|
||||
props: {},
|
||||
element: undefined
|
||||
})
|
||||
|
||||
export function showPopup (component: AnySvelteComponent | AnyComponent, props: any, element?: HTMLElement): void {
|
||||
popupstore.set({ is: component, props, element: element })
|
||||
}
|
||||
|
||||
export function closePopup (): void {
|
||||
popupstore.set({ is: undefined, props: {}, element: undefined })
|
||||
}
|
||||
|
||||
31
plugins/workbench-resources/src/components/CreateUser.svelte
Normal file
31
plugins/workbench-resources/src/components/CreateUser.svelte
Normal file
@ -0,0 +1,31 @@
|
||||
<!--
|
||||
// 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>
|
||||
@ -17,7 +17,6 @@
|
||||
import ActivityStatus from './ActivityStatus.svelte'
|
||||
import Applications from './Applications.svelte'
|
||||
import NavHeader from './NavHeader.svelte'
|
||||
import avatar from '../../img/avatar.png'
|
||||
|
||||
import { onDestroy } from 'svelte'
|
||||
|
||||
@ -31,8 +30,9 @@
|
||||
import SpaceHeader from './SpaceHeader.svelte'
|
||||
import SpaceView from './SpaceView.svelte'
|
||||
|
||||
import { AnyComponent, location } from '@anticrm/ui'
|
||||
import { AnyComponent, location, Popup, showPopup } from '@anticrm/ui'
|
||||
import core from '@anticrm/core'
|
||||
import CreateUser from './CreateUser.svelte'
|
||||
|
||||
export let client: Client
|
||||
|
||||
@ -75,7 +75,7 @@
|
||||
<ActivityStatus status="active"/>
|
||||
<Applications active={currentApp}/>
|
||||
<div class="flex-center" style="min-height: 6.25rem;">
|
||||
<Avatar size={'medium'} />
|
||||
<div on:click={(el) => { showPopup(CreateUser, { }, el.target) }}><Avatar size={'medium'} /></div>
|
||||
</div>
|
||||
</div>
|
||||
{#if navigator}
|
||||
@ -93,6 +93,7 @@
|
||||
<!-- <div class="aside"><Chat thread/></div> -->
|
||||
</div>
|
||||
<Modal />
|
||||
<Popup />
|
||||
{:else}
|
||||
No client
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user