mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-23 03:22:19 +03:00
Fix Popup Position on default (#89)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
ba851b85ba
commit
9524d5cd09
113
packages/ui/src/components/Dialog copy.svelte
Normal file
113
packages/ui/src/components/Dialog copy.svelte
Normal file
@ -0,0 +1,113 @@
|
||||
<!--
|
||||
// Copyright © 2020, 2021 Anticrm Platform Contributors.
|
||||
// Copyright © 2021 Hardcore Engineering Inc.
|
||||
//
|
||||
// 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 type { IntlString } from '@anticrm/platform'
|
||||
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
import Close from './internal/icons/Close.svelte'
|
||||
import ScrollBox from './ScrollBox.svelte'
|
||||
import Button from './Button.svelte'
|
||||
import Label from './Label.svelte'
|
||||
|
||||
export let label: IntlString
|
||||
export let okLabel: IntlString
|
||||
export let okAction: () => void
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="dialog-container">
|
||||
<form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
|
||||
<div class="flex-between header">
|
||||
<div class="title"><Label {label} /></div>
|
||||
<div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'} /></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ScrollBox vertical stretch><slot /></ScrollBox>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Button label={okLabel} primary />
|
||||
<Button label={'Cancel'} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 45rem;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
background-color: var(--theme-bg-color);
|
||||
border-radius: 1.875rem 0 0 1.875rem;
|
||||
box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: var(--theme-caption-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tool {
|
||||
margin-left: .75rem;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
// margin: 0 2.5rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
direction: rtl;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: .75rem;
|
||||
padding: 0 2.5rem;
|
||||
height: 6rem;
|
||||
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -31,84 +31,66 @@
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="dialog-container">
|
||||
<form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
|
||||
<!-- <div class="flex-between header">
|
||||
<div class="title"><Label {label} /></div>
|
||||
<div class="tool" on:click={() => { dispatch('close') }}><Close size={'small'} /></div>
|
||||
</div> -->
|
||||
<div class="content">
|
||||
<ScrollBox vertical stretch><slot /></ScrollBox>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Button label={okLabel} primary />
|
||||
<Button label={'Cancel'} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<form class="dialog" on:submit|preventDefault={() => { okAction(); dispatch('close') }}>
|
||||
<div class="content">
|
||||
<ScrollBox vertical stretch><slot /></ScrollBox>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<Button label={okLabel} primary />
|
||||
<Button label={'Cancel'} on:click={() => { dispatch('close') }} />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog-container {
|
||||
position: relative;
|
||||
.dialog {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row-reverse;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
flex-direction: column;
|
||||
width: 45rem;
|
||||
height: 100%;
|
||||
background-color: var(--theme-bg-color);
|
||||
border-radius: 1.875rem;
|
||||
box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
|
||||
|
||||
.dialog {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 100px;
|
||||
width: 45rem;
|
||||
min-height: calc(100vh - 100px);
|
||||
max-height: calc(100vh - 100px);
|
||||
background-color: var(--theme-bg-color);
|
||||
border-radius: 1.875rem 0 0 1.875rem;
|
||||
box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
padding: 0 2rem 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: var(--theme-caption-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tool {
|
||||
margin-left: .75rem;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
// margin: 0 2.5rem;
|
||||
height: fit-content;
|
||||
font-weight: 500;
|
||||
font-size: 1.125rem;
|
||||
color: var(--theme-caption-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
direction: rtl;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: .75rem;
|
||||
padding: 0 2.5rem;
|
||||
height: 6rem;
|
||||
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
|
||||
overflow: hidden;
|
||||
.tool {
|
||||
margin-left: .75rem;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
// margin: 0 2.5rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
direction: rtl;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
column-gap: .75rem;
|
||||
padding: 0 2.5rem;
|
||||
height: 6rem;
|
||||
mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 1.25rem, rgba(0, 0, 0, 1) 2.5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -48,17 +48,17 @@
|
||||
}
|
||||
if (rect.left > document.body.clientWidth - rect.right) {
|
||||
// style += 'left'
|
||||
// modalHTML.style.right = document.body.clientWidth - rect.right + 'px'
|
||||
modalHTML.style.right = '0px'
|
||||
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%)'
|
||||
modalHTML.style.top = '16px'
|
||||
modalHTML.style.bottom = '16px'
|
||||
modalHTML.style.right = '16px'
|
||||
// modalHTML.style.transform = 'translateY(-50%)'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
import type { Ref, Class, Doc, Space, FindOptions } from '@anticrm/core'
|
||||
import { buildModel } from '../utils'
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import { Label, showModal, Loading, ScrollBox } from '@anticrm/ui'
|
||||
import { Label, showPopup, Loading, ScrollBox } from '@anticrm/ui'
|
||||
import type { AnyComponent } from '@anticrm/ui'
|
||||
|
||||
import { createQuery } from '@anticrm/presentation'
|
||||
@ -50,7 +50,7 @@
|
||||
const client = getClient()
|
||||
|
||||
function onClick(object: Doc) {
|
||||
showModal(open, { object, space })
|
||||
showPopup(open, { object, space })
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user