mirror of
https://github.com/hcengineering/platform.git
synced 2024-11-27 01:13:27 +03:00
Add Panel
This commit is contained in:
Alexander Platov
parent
f7086d9bdd
commit
3e001eec5d
@ -163,6 +163,7 @@
|
||||
padding: 1rem;
|
||||
top: 2.25rem;
|
||||
right: 0;
|
||||
min-width: 100%;
|
||||
background-color: var(--theme-button-bg-focused);
|
||||
border: 1px solid var(--theme-button-border-enabled);
|
||||
border-radius: .75rem;
|
||||
|
||||
178
packages/presentation/src/components/Panel.svelte
Normal file
178
packages/presentation/src/components/Panel.svelte
Normal file
@ -0,0 +1,178 @@
|
||||
<!--
|
||||
// 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, Asset } from '@anticrm/platform'
|
||||
import type { AnySvelteComponent } from '@anticrm/ui'
|
||||
// import { ReferenceInput } from '@anticrm/text-editor'
|
||||
import { IconClose, IconExpand, IconActivity, ScrollBox, Button, Label, Icon } from '@anticrm/ui'
|
||||
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
export let label: IntlString
|
||||
export let icon: Asset | AnySvelteComponent
|
||||
export let okAction: () => void
|
||||
export let fullSize: boolean = false
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
</script>
|
||||
|
||||
<div class="overlay"/>
|
||||
<div class="dialog-container" class:fullSize>
|
||||
|
||||
<div class="leftSection">
|
||||
<div class="flex-row-center header">
|
||||
<div class="icon">
|
||||
{#if typeof (icon) === 'string'}
|
||||
<Icon {icon} size={'small'} />
|
||||
{:else}
|
||||
<svelte:component this={icon} size={'small'} />
|
||||
{/if}
|
||||
</div>
|
||||
<div class="title"><Label {label} /></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ScrollBox vertical stretch><slot /></ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rightSection">
|
||||
<div class="flex-row-center header">
|
||||
<div class="icon"><IconActivity size={'small'} /></div>
|
||||
<div class="title">Activity</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<ScrollBox vertical stretch></ScrollBox>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tools">
|
||||
<div class="tool" on:click={() => { fullSize = !fullSize }}><div class="icon"><IconExpand size={'small'} /></div></div>
|
||||
<div class="tool" on:click={() => { dispatch('close') }}><div class="icon"><IconClose size={'small'} /></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog-container {
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
left: 50%;
|
||||
right: 1.5rem;
|
||||
// transition: all .2s;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 3rem);
|
||||
background: rgba(31, 31, 37, 0.7);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0px 44px 154px rgba(0, 0, 0, .75);
|
||||
backdrop-filter: blur(30px);
|
||||
|
||||
.header {
|
||||
flex-shrink: 0;
|
||||
padding: 0 2.5rem;
|
||||
height: 4.5rem;
|
||||
border-bottom: 1px solid var(--theme-card-divider);
|
||||
|
||||
.title {
|
||||
flex-grow: 1;
|
||||
margin-left: .5rem;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.leftSection, .rightSection {
|
||||
flex-basis: 50%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.rightSection {
|
||||
background-color: var(--theme-bg-accent-color);
|
||||
.header { border-bottom: none; }
|
||||
.content { background-color: transparent; }
|
||||
}
|
||||
|
||||
.content {
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
padding: 0 2.5rem;
|
||||
height: max-content;
|
||||
}
|
||||
|
||||
.fullSize {
|
||||
flex-direction: row;
|
||||
left: 1.5rem;
|
||||
|
||||
.leftSection {
|
||||
border-right: 1px solid var(--theme-bg-accent-hover);
|
||||
}
|
||||
.rightSection {
|
||||
background-color: transparent;
|
||||
.header { border-bottom: 1px solid var(--theme-card-divider); }
|
||||
.content { background-color: var(--theme-bg-accent-color); }
|
||||
}
|
||||
}
|
||||
|
||||
.tools {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 1.75rem;
|
||||
right: 2rem;
|
||||
|
||||
.tool {
|
||||
margin-left: .75rem;
|
||||
opacity: .4;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
transform-origin: center center;
|
||||
transform: scale(.75);
|
||||
}
|
||||
&:hover { opacity: 1; }
|
||||
}
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--theme-menu-color);
|
||||
opacity: .7;
|
||||
}
|
||||
</style>
|
||||
@ -23,3 +23,4 @@ export { default as MessageViewer } from './components/MessageViewer.svelte'
|
||||
export { default as AttributeEditor } from './components/AttributeEditor.svelte'
|
||||
export { default as Card } from './components/Card.svelte'
|
||||
export { default as Channels } from './components/Channels.svelte'
|
||||
export { default as Panel } from './components/Panel.svelte'
|
||||
|
||||
@ -57,6 +57,11 @@ $: {
|
||||
modalHTML.style.top = '4rem'
|
||||
modalHTML.style.bottom = '4rem'
|
||||
modalHTML.style.right = '4rem'
|
||||
} else if (element === 'full') {
|
||||
modalHTML.style.top = '0'
|
||||
modalHTML.style.bottom = '0'
|
||||
modalHTML.style.left = '0'
|
||||
modalHTML.style.right = '0'
|
||||
}
|
||||
} else {
|
||||
modalHTML.style.top = '50%'
|
||||
|
||||
10
packages/ui/src/components/icons/Activity.svelte
Normal file
10
packages/ui/src/components/icons/Activity.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M8.4,8.5C8.2,8.4,8,8.3,7.9,8.3c-0.2,0-0.4,0.1-0.5,0.3l-2.9,3.8c-0.2,0.3-0.2,0.7,0.1,1c0.1,0.1,0.3,0.1,0.4,0.1 c0.2,0,0.4-0.1,0.6-0.3L8.1,10l2.8,2.2c0.1,0.1,0.3,0.2,0.5,0.1c0.2,0,0.4-0.1,0.5-0.3l2.8-3.7c0.2-0.3,0.2-0.7-0.1-1 c-0.3-0.2-0.7-0.2-1,0.1l-2.4,3.1L8.4,8.5z"/>
|
||||
<path d="M17.4,0c-1.4,0-2.6,1.2-2.6,2.6c0,1.4,1.2,2.6,2.6,2.6C18.8,5.1,20,4,20,2.5C20,1.1,18.8,0,17.4,0z M17.4,3.7 c-0.6,0-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2c0.6,0,1.2,0.5,1.2,1.2C18.6,3.2,18.1,3.7,17.4,3.7z"/>
|
||||
<path d="M18.5,6.8c-0.4,0-0.7,0.3-0.7,0.7v6.8c0,2.6-1.6,4.3-4,4.3H5.4c-2.5,0-4-1.6-4-4.3V6.5c0-2.6,1.6-4.3,4-4.3h7.1 c0.4,0,0.7-0.3,0.7-0.7s-0.3-0.7-0.7-0.7H5.4C2.2,0.8,0,3.1,0,6.5v7.9C0,17.7,2.2,20,5.4,20h8.4c3.3,0,5.4-2.3,5.4-5.7V7.5 C19.2,7.1,18.9,6.8,18.5,6.8z"/>
|
||||
</svg>
|
||||
@ -3,6 +3,6 @@
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.7,8l5.6-5.6c0.2-0.2,0.2-0.5,0-0.7s-0.5-0.2-0.7,0L8,7.3L2.4,1.6c-0.2-0.2-0.5-0.2-0.7,0s-0.2,0.5,0,0.7L7.3,8l-5.6,5.6 c-0.2,0.2-0.2,0.5,0,0.7c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1L8,8.7l5.6,5.6c0.1,0.1,0.2,0.1,0.4,0.1s0.3,0,0.4-0.1 c0.2-0.2,0.2-0.5,0-0.7L8.7,8z"/>
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.9,8l6.9-6.9c0.2-0.2,0.2-0.6,0-0.9s-0.6-0.2-0.9,0L8,7.1L1.1,0.2c-0.2-0.2-0.6-0.2-0.9,0s-0.2,0.6,0,0.9L7.1,8l-6.9,6.9 c-0.2,0.2-0.2,0.6,0,0.9C0.3,15.9,0.5,16,0.6,16s0.3-0.1,0.4-0.2L8,8.9l6.9,6.9c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2 c0.2-0.2,0.2-0.6,0-0.9L8.9,8z"/>
|
||||
</svg>
|
||||
|
||||
9
packages/ui/src/components/icons/Expand.svelte
Normal file
9
packages/ui/src/components/icons/Expand.svelte
Normal file
@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
|
||||
<path d="M6.9,14.8H2.1l4.7-4.7C7,9.8,7,9.4,6.8,9.2C6.6,9,6.2,9,5.9,9.2l-4.7,4.7V9.1c0-0.3-0.3-0.6-0.6-0.6 S0,8.7,0,9.1v6.3c0,0,0,0,0,0c0,0.1,0,0.2,0,0.2c0,0.1,0.1,0.1,0.1,0.1c0,0,0,0,0,0.1c0,0,0.1,0,0.1,0.1c0,0,0.1,0.1,0.1,0.1 c0.1,0,0.2,0,0.2,0c0,0,0,0,0,0h6.3c0.3,0,0.6-0.3,0.6-0.6C7.6,15,7.3,14.8,6.9,14.8z"/>
|
||||
<path d="M16,0.4c0,0,0-0.1-0.1-0.1c0,0,0-0.1-0.1-0.1c0,0,0,0-0.1,0c0,0-0.1-0.1-0.1-0.1c-0.1,0-0.2,0-0.2,0 c0,0,0,0,0,0H9.1C8.7,0,8.4,0.3,8.4,0.6s0.3,0.6,0.6,0.6h4.8L9.2,5.9C9,6.2,9,6.6,9.2,6.8C9.3,6.9,9.5,7,9.6,7s0.3-0.1,0.4-0.2 l4.7-4.7v4.8c0,0.3,0.3,0.6,0.6,0.6S16,7.3,16,6.9V0.6C16,0.5,16,0.5,16,0.4z"/>
|
||||
</svg>
|
||||
@ -66,6 +66,8 @@ export { default as IconMoreH } from './components/icons/MoreH.svelte'
|
||||
export { default as IconFile } from './components/icons/File.svelte'
|
||||
export { default as IconAttachment } from './components/icons/Attachment.svelte'
|
||||
export { default as IconThread } from './components/icons/Thread.svelte'
|
||||
export { default as IconExpand } from './components/icons/Expand.svelte'
|
||||
export { default as IconActivity } from './components/icons/Activity.svelte'
|
||||
|
||||
export * from './utils'
|
||||
|
||||
|
||||
@ -54,7 +54,7 @@ export interface Tab {
|
||||
|
||||
export type TabModel = Tab[]
|
||||
|
||||
export type PopupAlignment = HTMLElement | 'right' | 'float'
|
||||
export type PopupAlignment = HTMLElement | 'right' | 'float' | 'full'
|
||||
|
||||
export type TooltipAligment = 'top' | 'bottom' | 'left' | 'right'
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ async function onClick() {
|
||||
const clazz = hierarchy.getClass(value._class)
|
||||
const editorMixin = hierarchy.as(clazz, view.mixin.ObjectEditor)
|
||||
const editor = await getResource(editorMixin.editor)
|
||||
showPopup(editor, { object: value }, 'float')
|
||||
showPopup(editor, { object: value }, 'full')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -17,9 +17,10 @@
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import type { Ref, Space, Doc } from '@anticrm/core'
|
||||
import { Tabs } from '@anticrm/ui'
|
||||
import { getClient } from '@anticrm/presentation'
|
||||
import { getClient, Panel } from '@anticrm/presentation'
|
||||
import type { Candidate } from '@anticrm/recruit'
|
||||
import DialogHeader from './DialogHeader.svelte'
|
||||
import Contact from './icons/Contact.svelte'
|
||||
|
||||
import chunter from '@anticrm/chunter'
|
||||
|
||||
@ -97,28 +98,32 @@
|
||||
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<!-- <div class="container">
|
||||
<DialogHeader {space} {object} {newValue} {resume} on:save={ save }/>
|
||||
<div class="tabs-container">
|
||||
<Tabs model={tabModel}/>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<Panel icon={Contact} label={object.firstName + ' ' + object.lastName} on:save={ save } on:close={() => { dispatch('close') }}>
|
||||
|
||||
</Panel>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: var(--theme-bg-color);
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
|
||||
// .container {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// height: 100%;
|
||||
// background-color: var(--theme-bg-color);
|
||||
// border-radius: 1.25rem;
|
||||
// box-shadow: 0px 3.125rem 7.5rem rgba(0, 0, 0, .4);
|
||||
|
||||
.tabs-container {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
padding: 0 2.5rem 2.5rem;
|
||||
}
|
||||
}
|
||||
// .tabs-container {
|
||||
// flex-grow: 1;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// height: fit-content;
|
||||
// padding: 0 2.5rem 2.5rem;
|
||||
// }
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -0,0 +1,26 @@
|
||||
<!--
|
||||
// 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">
|
||||
export let size: 'small' | 'medium' | 'large'
|
||||
const fill: string = 'var(--theme-caption-color)'
|
||||
</script>
|
||||
|
||||
<svg class="svg-{size}" {fill} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.1,11.7c2.1,0,3.8-1.7,3.8-3.8s-1.7-3.8-3.8-3.8S8.4,5.8,8.4,7.9S10.1,11.7,12.1,11.7z M12.1,5.5 c1.3,0,2.3,1.1,2.3,2.3s-1.1,2.3-2.3,2.3S9.8,9.2,9.8,7.9S10.8,5.5,12.1,5.5z"/>
|
||||
<path d="M12,0C5.4,0,0,5.4,0,12c0,6.6,5.4,12,12,12c6.6,0,12-5.4,12-12C24,5.4,18.6,0,12,0z M12,22.6 C6.2,22.6,1.4,17.8,1.4,12C1.4,6.2,6.2,1.4,12,1.4c5.8,0,10.6,4.7,10.6,10.6C22.6,17.8,17.8,22.6,12,22.6z"/>
|
||||
<path d="M18.6,16.2c-0.3-0.9-0.8-1.6-1.5-2.2c-0.9-0.7-2-1.1-3.1-1.1h-1.5h-0.9h-1.5c-1.1,0-2.2,0.4-3.1,1.1 c-0.7,0.6-1.2,1.3-1.5,2.2l-0.2,0.6c-0.1,0.4,0.1,0.8,0.5,0.9c0.1,0,0.1,0,0.2,0c0.3,0,0.6-0.2,0.7-0.5L7,16.7 c0.2-0.6,0.5-1.1,1-1.5c0.6-0.5,1.4-0.8,2.2-0.8h1.5h0.9h1.5c0.8,0,1.6,0.3,2.2,0.8c0.5,0.4,0.8,0.9,1,1.5l0.2,0.6 c0.1,0.3,0.4,0.5,0.7,0.5c0.1,0,0.1,0,0.2,0c0.4-0.1,0.6-0.5,0.5-0.9L18.6,16.2z"/>
|
||||
</svg>
|
||||
Loading…
Reference in New Issue
Block a user