hcengineering/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2024-11-22 11:42:30 +03:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update Notifications layout (#2500)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2023-01-12 18:50:41 +03:00 committed by GitHub
parent 6e1ae06beb
commit c74f48d044
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 346 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/presentation/src/components/ObjectPopup.svelte
View File

@ -27,7 +27,8 @@
ListView,
showPopup,
tooltip,
resizeObserver
resizeObserver,
deviceOptionsStore
} from '@hcengineering/ui'
import { createEventDispatcher } from 'svelte'
import presentation from '..'
@ -206,7 +207,13 @@
}}
>
<div class="header flex-between">
<EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />
<EditBox
kind={'search-style'}
focusIndex={1}
focus={!$deviceOptionsStore.isMobile}
bind:value={search}
{placeholder}
/>
{#if create !== undefined}
<div class="mx-2">
<Button

5
packages/presentation/src/components/ObjectSearchPopup.svelte
View File

@ -25,7 +25,8 @@
IconSearch,
Label,
ListView,
resizeObserver
resizeObserver,
deviceOptionsStore
} from '@hcengineering/ui'
import { createEventDispatcher } from 'svelte'
import presentation from '../plugin'
@ -171,7 +172,7 @@
{/each}
</div>
<EditBox
focus
focus={!$deviceOptionsStore.isMobile}
icon={IconSearch}
kind={'search-style'}
focusIndex={0}

4
packages/presentation/src/components/SpacesMultiPopup.svelte
View File

@ -17,7 +17,7 @@
import { translate } from '@hcengineering/platform'
import { createEventDispatcher, onMount } from 'svelte'
import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
import { tooltip, CheckBox, resizeObserver } from '@hcengineering/ui'
import { tooltip, CheckBox, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
import { createQuery } from '../utils'
import presentation from '..'
import SpaceInfo from './SpaceInfo.svelte'
@ -85,7 +85,7 @@
}
onMount(() => {
if (input) input.focus()
if (input && !$deviceOptionsStore.isMobile) input.focus()
})
</script>

1
packages/theme/styles/_layouts.scss
View File

@ -452,6 +452,7 @@ input.search {
.pt-3 { padding-top: .75rem; }
.pt-4 { padding-top: 1rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-1 { padding-bottom: .25rem; }
.pb-2 { padding-bottom: .5rem; }
.pb-3 { padding-bottom: .75rem; }
.pb-4 { padding-bottom: 1rem; }

23
packages/theme/styles/popups.scss
View File

@ -419,27 +419,30 @@
overflow: hidden;
display: flex;
flex-direction: column;
width: max-content;
height: max-content;
padding-bottom: 0.5rem;
min-width: 42rem;
max-width: 42rem;
height: 22rem;
padding: .5rem;
min-height: 22rem;
max-height: 22rem;
background: var(--popup-bg-color);
border-radius: 0.5rem;
border-radius: .5rem;
box-shadow: var(--popup-shadow);
.header {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 1rem;
padding: 0 .75rem .5rem 1rem;
height: 3rem;
border-bottom: 1px solid var(--popup-divider);
min-height: 0;
}
.space {
flex-shrink: 0;
height: .25rem;
&.x2 { height: .5rem; }
&.x3 { height: .75rem; }
}
}
.notifyPopup .comment::after,
.notifyPopup .mention::after { content: none !important; }
.notifyPopup .content .mention { margin-top: 0 !important; }
.helpAndSupportPopup {
min-height: 100%;

3
packages/ui/src/components/Button.svelte
View File

@ -28,6 +28,7 @@
export let size: ButtonSize = 'medium'
export let shape: ButtonShape = undefined
export let icon: Asset | AnySvelteComponent | undefined = undefined
export let iconProps: any | undefined = undefined
export let justify: 'left' | 'center' = 'center'
export let disabled: boolean = false
export let loading: boolean = false
@ -105,7 +106,7 @@
>
{#if icon && !loading}
<div class="btn-icon pointer-events-none" class:resetIconSize>
<Icon bind:icon size={iconSize} />
<Icon bind:icon size={iconSize} {iconProps} />
</div>
{/if}
{#if loading}

4
packages/ui/src/components/ColorPopup.svelte
View File

@ -18,7 +18,7 @@
import { createEventDispatcher, onMount } from 'svelte'
import { getPlatformColor } from '../colors'
import ListView from './ListView.svelte'
import { resizeObserver } from '..'
import { resizeObserver, deviceOptionsStore } from '..'
export let placeholder: IntlString | undefined = undefined
export let placeholderParam: any | undefined = undefined
@ -70,7 +70,7 @@
}
let input: HTMLElement
onMount(() => {
if (input) input.focus()
if (input && !$deviceOptionsStore.isMobile) input.focus()
})
</script>

4
packages/ui/src/components/DropdownLabelsPopup.svelte
View File

@ -20,7 +20,7 @@
import plugin from '../plugin'
import CheckBox from './CheckBox.svelte'
import ListView from './ListView.svelte'
import { resizeObserver } from '..'
import { resizeObserver, deviceOptionsStore } from '..'
export let placeholder: IntlString = plugin.string.SearchDots
export let items: DropdownTextItem[]
@ -35,7 +35,7 @@
let searchInput: HTMLInputElement
onMount(() => {
if (searchInput) searchInput.focus()
if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
})
let selection = 0

4
packages/ui/src/components/DropdownPopup.svelte
View File

@ -20,7 +20,7 @@
import plugin from '../plugin'
import Icon from './Icon.svelte'
import ListView from './ListView.svelte'
import { resizeObserver } from '..'
import { resizeObserver, deviceOptionsStore } from '..'
export let icon: Asset | AnySvelteComponent
export let placeholder: IntlString = plugin.string.SearchDots
@ -37,7 +37,7 @@
let searchInput: HTMLInputElement
onMount(() => {
if (searchInput) searchInput.focus()
if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
})
let selection = 0

4
packages/ui/src/components/SelectPopup.svelte
View File

@ -23,7 +23,7 @@
import Label from './Label.svelte'
import ListView from './ListView.svelte'
import type { AnySvelteComponent } from '../types'
import { resizeObserver } from '../resize'
import { resizeObserver, deviceOptionsStore } from '..'
interface ValueType {
id: number | string | null
@ -132,7 +132,7 @@
<EditBox
kind={'search-style'}
focusIndex={1}
focus
focus={!$deviceOptionsStore.isMobile}
bind:value={search}
{placeholder}
{placeholderParam}

27
packages/ui/src/components/icons/CheckAll.svelte Normal file
View File

@ -0,0 +1,27 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path
{fill}
d="M7.1,13.2c0.3,0.3,0.8,0.3,1.1,0c0.3-0.3,0.3-0.8,0-1.1l-0.6-0.6c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1L7.1,13.2z"
fill-rule="evenodd"
clip-rule="evenodd"
/>
<path
{fill}
d="M22.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L12,15.9l-0.1-0.1c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l0.6,0.6c0.3,0.3,0.8,0.3,1.1,0l10-10C22.8,7.2,22.8,6.8,22.5,6.5z"
fill-rule="evenodd"
clip-rule="evenodd"
/>
<path
{fill}
d="M17.5,6.5c-0.3-0.3-0.8-0.3-1.1,0L7,15.9l-4.5-4.5c-0.3-0.3-0.8-0.3-1.1,0c-0.3,0.3-0.3,0.8,0,1.1l5,5c0.3,0.3,0.8,0.3,1.1,0l10-10C17.8,7.2,17.8,6.8,17.5,6.5z"
fill-rule="evenodd"
clip-rule="evenodd"
/>
</g>
</svg>

2
packages/ui/src/components/icons/Delete.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
export let fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">

1
packages/ui/src/index.ts
View File

@ -124,6 +124,7 @@ export { default as IconEdit } from './components/icons/Edit.svelte'
export { default as IconInfo } from './components/icons/Info.svelte'
export { default as IconBlueCheck } from './components/icons/BlueCheck.svelte'
export { default as IconCheck } from './components/icons/Check.svelte'
export { default as IconCheckAll } from './components/icons/CheckAll.svelte'
export { default as IconArrowLeft } from './components/icons/ArrowLeft.svelte'
export { default as IconArrowRight } from './components/icons/ArrowRight.svelte'
export { default as IconNavPrev } from './components/icons/NavPrev.svelte'

9
packages/ui/src/popups.ts
View File

@ -255,12 +255,21 @@ export function fitPopupElement (
} else if (element === 'account') {
newProps.bottom = '2.75rem'
newProps.left = '5rem'
newProps.minWidth = newProps.maxWidth = '42rem'
newProps.maxHeight = 'calc(100vh - 5.5rem)'
show = true
} else if (element === 'account-portrait') {
newProps.bottom = 'calc(var(--app-panel-width) + .75rem)'
newProps.right = '.5rem'
newProps.minWidth = newProps.maxWidth = 'calc(100vw - 1rem)'
newProps.maxHeight = 'calc(100vh - var(--app-panel-width) - 1.5rem)'
show = true
} else if (element === 'account-mobile') {
newProps.bottom = '.5rem'
newProps.left = 'calc(var(--app-panel-width) + .5rem)'
newProps.minWidth = newProps.maxWidth = 'calc(100vw - var(--app-panel-width) - 1rem)'
newProps.maxHeight = 'calc(100vh - 1rem)'
show = true
} else if (element === 'full' && contentPanel === undefined) {
newProps.top = '0'
newProps.bottom = '0'

20
plugins/activity-resources/src/components/TxView.svelte
View File

@ -43,6 +43,7 @@
export let showIcon: boolean = true
export let isNew: boolean = false
export let isNextNew: boolean = false
export let contentHidden: boolean = false
// export let showDocument = false
let ptx: DisplayTx | undefined
@ -305,7 +306,7 @@
</div>
{#if viewlet && viewlet.component && viewlet.display !== 'inline'}
<div class="activity-content {viewlet.display}">
<div class="activity-content {viewlet.display}" class:contentHidden>
<ShowMore ignore={edit}>
{#if tx.collectionAttribute !== undefined && (tx.txDocIds?.size ?? 0) > 1}
<div class="flex-row-center flex-grow flex-wrap clear-mins">
@ -456,4 +457,21 @@
.lower {
text-transform: lowercase;
}
.activity-content {
overflow: hidden;
visibility: visible;
max-height: max-content;
opacity: 1;
transition-property: max-height, opacity;
transition-timing-function: ease-in-out;
transition-duration: 0.15s;
&.contentHidden {
visibility: hidden;
padding: 0;
margin-top: -0.5rem;
max-height: 0;
opacity: 0;
}
}
</style>

53
plugins/chunter-resources/src/components/CommentPresenter.svelte
View File

@ -16,35 +16,52 @@
<script lang="ts">
import { AttachmentDocList } from '@hcengineering/attachment-resources'
import type { Comment } from '@hcengineering/chunter'
import chunter from '@hcengineering/chunter'
import { formatName } from '@hcengineering/contact'
import { Avatar, getClient, MessageViewer } from '@hcengineering/presentation'
import { TimeSince, ShowMore } from '@hcengineering/ui'
import { TimeSince, ShowMore, Icon } from '@hcengineering/ui'
import { getUser } from '../utils'
export let value: Comment
export let inline: boolean = false
export let disableClick = false
const client = getClient()
const cutId = (str: string): string => {
return str.slice(0, 4) + '...' + str.slice(-4)
}
</script>
<div class="flex-row-top">
<div class="avatar">
<Avatar size={'medium'} />
</div>
<div class="flex-grow flex-col">
<div class="header">
<div class="fs-title">
{#await getUser(client, value.modifiedBy) then user}
{#if user}{formatName(user.name)}{/if}
{/await}
</div>
<div class="content-trans-color ml-4"><TimeSince value={value.modifiedOn} /></div>
{#if inline}
<a class="flex-presenter inline-presenter" href="#{disableClick ? null : ''}">
<div class="icon">
<Icon icon={chunter.icon.Thread} size={'small'} />
</div>
<span class="label nowrap">Message</span>
</a>
&nbsp;<span class="content-dark-color">#{cutId(value._id.toString())}</span>
{:else}
<div class="flex-row-top">
<div class="avatar">
<Avatar size={'medium'} />
</div>
<div class="flex-grow flex-col">
<div class="header">
<div class="fs-title">
{#await getUser(client, value.modifiedBy) then user}
{#if user}{formatName(user.name)}{/if}
{/await}
</div>
<div class="content-trans-color ml-4"><TimeSince value={value.modifiedOn} /></div>
</div>
<ShowMore limit={126} fixed>
<MessageViewer message={value.message} />
<AttachmentDocList {value} />
</ShowMore>
</div>
<ShowMore limit={126} fixed>
<MessageViewer message={value.message} />
<AttachmentDocList {value} />
</ShowMore>
</div>
</div>
{/if}
<style lang="scss">
.avatar {

2
plugins/chunter-resources/src/components/activity/TxBacklinkReference.svelte
View File

@ -62,7 +62,7 @@
<svelte:component this={targetPresenter.presenter} value={target} />
</div>
{/if}
<span class="lower"><Label label={chunter.string.In} /></span>
<span style:text-transform={'lowercase'}><Label label={chunter.string.In} /></span>
<div class="ml-2">
<svelte:component this={presenter.presenter} value={doc} />
</div>

9
plugins/contact-resources/src/components/EmployeePreviewPopup.svelte
View File

@ -2,7 +2,7 @@
import { Employee, EmployeeAccount, formatName, Status } from '@hcengineering/contact'
import { getCurrentAccount, Ref, Hierarchy, WithLookup } from '@hcengineering/core'
import { Avatar, createQuery, getClient } from '@hcengineering/presentation'
import { Button, getPanelURI, Label, showPopup } from '@hcengineering/ui'
import { Button, getPanelURI, Label, showPopup, resizeObserver } from '@hcengineering/ui'
import EmployeeSetStatusPopup from './EmployeeSetStatusPopup.svelte'
import contact from '../plugin'
import EmployeeStatusPresenter from './EmployeeStatusPresenter.svelte'
@ -55,7 +55,12 @@
}
</script>
<div class="antiPopup p-4 flex-col">
<div
class="antiPopup p-4 flex-col"
use:resizeObserver={() => {
dispatch('changeContent')
}}
>
{#if employee}
<div class="flex-col-center pb-2">
<Avatar size="x-large" avatar={employee?.avatar} />

3
plugins/notification-resources/package.json
View File

@ -40,6 +40,7 @@
"@hcengineering/activity": "^0.6.0",
"@hcengineering/contact": "^0.6.9",
"@hcengineering/core": "^0.6.20",
"@hcengineering/view": "^0.6.2"
"@hcengineering/view": "^0.6.2",
"@hcengineering/view-resources": "^0.6.0"
}
}

214
plugins/notification-resources/src/components/NotificationView.svelte
View File

@ -16,11 +16,13 @@
<script lang="ts">
import { TxViewlet } from '@hcengineering/activity'
import { ActivityKey, DisplayTx, newDisplayTx, TxView } from '@hcengineering/activity-resources'
import core, { Doc, TxCUD, TxProcessor, WithLookup } from '@hcengineering/core'
import core, { Doc, TxCUD, TxProcessor, WithLookup, Ref, Class } from '@hcengineering/core'
import { Notification, NotificationStatus } from '@hcengineering/notification'
import { getClient } from '@hcengineering/presentation'
import { ActionIcon, Component, getPlatformColor, IconBack, IconCheck, IconDelete } from '@hcengineering/ui'
import { Button, Component, getPlatformColor, IconBack, IconCheck, IconDelete } from '@hcengineering/ui'
import type { AnyComponent } from '@hcengineering/ui'
import view from '@hcengineering/view'
import { getObjectPreview } from '@hcengineering/view-resources'
import plugin from '../plugin'
export let notification: WithLookup<Notification>
@ -46,72 +48,168 @@
}
$: displayTx = getDisplayTx(notification)
let presenter: AnyComponent | undefined
let doc: Doc | undefined
let visible: boolean = false
async function updatePreviewPresenter (ref?: Ref<Class<Doc>>): Promise<void> {
presenter = ref !== undefined ? await getObjectPreview(client, ref) : undefined
}
$: if (displayTx) updatePreviewPresenter(displayTx.tx.objectClass)
$: if (presenter !== undefined && displayTx) {
client.findOne(displayTx.tx.objectClass, { _id: displayTx.tx.objectId }).then((res) => (doc = res))
}
</script>
{#if displayTx}
{@const isNew = notification.status !== NotificationStatus.Read}
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<div class="content">
<div class="flex-row">
<div class="bottom-divider mb-2">
<div class="flex-row-center mb-2 mt-2">
<div class="notify mr-4" style:color={isNew ? getPlatformColor(11) : '#555555'} />
<div
class="flex-shrink"
on:click={() => {
changeState(notification, NotificationStatus.Read)
}}
>
<Component
is={view.component.ObjectPresenter}
props={{
objectId: displayTx.tx.objectId,
_class: displayTx.tx.objectClass,
value: displayTx.doc,
inline: true
}}
/>
</div>
<div class="flex flex-reverse flex-gap-3 flex-grow">
<ActionIcon
icon={IconDelete}
label={plugin.string.Remove}
size={'medium'}
action={() => {
client.remove(notification)
}}
/>
<ActionIcon
icon={isNew ? IconCheck : IconBack}
iconProps={!isNew ? { kind: 'curve' } : {}}
label={plugin.string.MarkAsRead}
size={'medium'}
action={() => {
changeState(notification, isNew ? NotificationStatus.Read : NotificationStatus.Notified)
}}
/>
</div>
</div>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div
class="content {isNew ? 'new' : 'readed'} with-document"
class:visible
style:--color={isNew ? getPlatformColor(11) : '#555555'}
on:click|preventDefault|stopPropagation={() => {
changeState(notification, NotificationStatus.Read)
visible = !visible
}}
>
<div class="subheader">
<div class="flex-grow">
<Component
is={view.component.ObjectPresenter}
props={{
objectId: displayTx.tx.objectId,
_class: displayTx.tx.objectClass,
value: displayTx.doc,
inline: true
}}
/>
</div>
<div class="buttons-group xsmall-gap">
<Button
icon={isNew ? IconCheck : IconBack}
iconProps={!isNew ? { kind: 'curve' } : {}}
kind={'transparent'}
showTooltip={{ label: plugin.string.MarkAsRead }}
size={'medium'}
on:click={() => {
if (!isNew && visible) visible = false
changeState(notification, isNew ? NotificationStatus.Read : NotificationStatus.Notified)
}}
/>
<Button
icon={IconDelete}
kind={'transparent'}
showTooltip={{ label: plugin.string.Remove }}
size={'medium'}
on:click={() => {
client.remove(notification)
}}
/>
</div>
<TxView tx={displayTx} {viewlets} showIcon={false} />
</div>
<TxView tx={displayTx} {viewlets} showIcon={false} contentHidden={!visible} />
{#if presenter && doc}
<div class="document-preview">
<Component is={presenter} props={{ object: doc }} />
</div>
{/if}
</div>
{/if}
<style lang="scss">
.content {
padding: 0.5rem;
border-radius: 0.5rem;
border: 1px solid transparent;
}
.notify {
width: 0.5rem;
height: 0.5rem;
border-radius: 0.25rem;
outline: 1px solid transparent;
outline-offset: 2px;
transition: all 0.1s ease-in-out;
z-index: -1;
background-color: currentColor;
position: relative;
display: flex;
flex-direction: column;
padding: 0.5rem 0.75rem 0.75rem;
min-height: 0;
border: 1px solid var(--button-border-color);
border-radius: 0.75rem;
transition-property: border-color, background-color, height;
transition-duration: 0.3s, 0.15s, 0.15s;
transition-timing-function: ease-in-out;
&:not(:last-child) {
margin-bottom: 0.75rem;
}
&.new {
background-color: var(--popup-bg-hover);
}
&.readed {
background-color: var(--body-accent);
}
&:hover {
border-color: var(--button-border-hover);
}
&.with-document {
cursor: pointer;
&::before {
content: '';
position: absolute;
bottom: -0.25rem;
left: 1rem;
right: 1rem;
width: calc(100% - 2rem);
height: 0.75rem;
background-color: var(--body-accent);
border: 1px solid var(--divider-color);
border-radius: 0.5rem;
z-index: -1;
transition: bottom 0.15s ease-in-out;
box-shadow: var(--primary-shadow);
}
&:hover::before {
bottom: -0.4rem;
}
&.visible::before {
bottom: 0.25rem;
}
}
.subheader {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 0 0.5rem 1.75rem;
margin-bottom: 0.5rem;
min-height: 0;
border-bottom: 1px solid var(--divider-color);
&::before {
content: '';
position: absolute;
top: 50%;
left: 0.5rem;
width: 0.5rem;
height: 0.5rem;
background-color: var(--color);
transform: translateY(calc(-50% - 0.25rem));
border-radius: 50%;
}
}
.document-preview {
overflow: hidden;
visibility: hidden;
margin-top: -0.5rem;
padding: 0;
max-height: 0;
background-color: var(--body-color);
border: 1px solid var(--divider-color);
border-radius: 0.5rem;
opacity: 0;
transition-property: margin-top, max-height, opacity;
transition-timing-function: ease-in-out;
transition-duration: 0.15s;
}
&.visible .document-preview {
visibility: visible;
margin-top: 0.5rem;
padding: 0.75rem 1rem;
max-height: max-content;
opacity: 1;
}
}
</style>

45
plugins/notification-resources/src/components/NotificationsPopup.svelte
View File

@ -20,7 +20,7 @@
import core, { getCurrentAccount, WithLookup } from '@hcengineering/core'
import { Notification, NotificationStatus } from '@hcengineering/notification'
import { createQuery, getClient } from '@hcengineering/presentation'
import { ActionIcon, IconCheck, IconDelete, Scroller } from '@hcengineering/ui'
import { Button, IconCheckAll, IconDelete, Scroller } from '@hcengineering/ui'
import Label from '@hcengineering/ui/src/components/Label.svelte'
import notification from '../plugin'
import NotificationView from './NotificationView.svelte'
@ -80,29 +80,32 @@
<div class="notifyPopup" class:justify-center={notifications.length === 0}>
<div class="header flex-between">
<span class="fs-title overflow-label"><Label label={notification.string.Notifications} /></span>
<div class="flex flex-gap-2">
<ActionIcon
icon={IconCheck}
label={notification.string.MarkAllAsRead}
size={'medium'}
action={markAsReadNotifications}
/>
<ActionIcon
icon={IconDelete}
label={notification.string.RemoveAll}
size={'medium'}
action={deleteNotifications}
/>
</div>
{#if notifications.length > 0}
<div class="buttons-group xxsmall-gap">
<Button
icon={IconCheckAll}
kind={'list'}
showTooltip={{ label: notification.string.MarkAllAsRead }}
size={'medium'}
on:click={markAsReadNotifications}
/>
<Button
icon={IconDelete}
kind={'list'}
showTooltip={{ label: notification.string.RemoveAll }}
size={'medium'}
on:click={deleteNotifications}
/>
</div>
{/if}
</div>
{#if notifications.length > 0}
<Scroller>
<div class="px-2 clear-mins">
{#each notifications as n}
<NotificationView notification={n} {viewlets} />
{/each}
</div>
<Scroller padding={'0 .5rem'}>
{#each notifications as n}
<NotificationView notification={n} {viewlets} />
{/each}
</Scroller>
<div class="space x3" />
{:else}
<div class="flex-grow flex-center">
<Label label={notification.string.NoNotifications} />

2
plugins/tags-resources/src/components/TagsDropdownEditor.svelte
View File

@ -73,8 +73,6 @@
async function removeTag (id: Ref<TagReference>): Promise<void> {
dispatch('delete', id)
}
$: console.log('[!!!] items: ', items)
$: console.log('[!!!] items - count: ', items.length)
</script>
<Button

5
plugins/tags-resources/src/components/TagsFilter.svelte
View File

@ -25,7 +25,8 @@
Label,
Loading,
resizeObserver,
showPopup
showPopup,
deviceOptionsStore
} from '@hcengineering/ui'
import { Filter } from '@hcengineering/view'
import { FilterQuery } from '@hcengineering/view-resources'
@ -80,7 +81,7 @@
})
onMount(() => {
if (searchInput) searchInput.focus()
if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
})
const toggleGroup = (ev: MouseEvent): void => {

5
plugins/tags-resources/src/components/TagsPopup.svelte
View File

@ -27,7 +27,8 @@
IconClose,
Label,
showPopup,
resizeObserver
resizeObserver,
deviceOptionsStore
} from '@hcengineering/ui'
import { createEventDispatcher, onMount } from 'svelte'
import tags from '../plugin'
@ -98,7 +99,7 @@
return ''
}
onMount(() => {
if (searchElement) searchElement.focus()
if (searchElement && !$deviceOptionsStore.isMobile) searchElement.focus()
})
const tagSort = (a: TagElement, b: TagElement) => {
const r = (b.refCount ?? 0) - (a.refCount ?? 0)

9
plugins/templates-resources/src/components/TemplatePopup.svelte
View File

@ -17,7 +17,7 @@
import { createQuery } from '@hcengineering/presentation'
import { MessageTemplate } from '@hcengineering/templates'
import { TextEditorHandler } from '@hcengineering/text-editor'
import { closePopup, EditWithIcon, IconSearch, Label } from '@hcengineering/ui'
import { closePopup, EditWithIcon, IconSearch, Label, deviceOptionsStore } from '@hcengineering/ui'
import templates from '../plugin'
export let editor: TextEditorHandler
@ -67,7 +67,12 @@
<svelte:window on:keydown={onKeyDown} />
<div class="antiPopup template-popup">
<div class="mt-4 mb-4">
<EditWithIcon icon={IconSearch} bind:value={query} placeholder={templates.string.SearchTemplate} />
<EditWithIcon
icon={IconSearch}
bind:value={query}
placeholder={templates.string.SearchTemplate}
focus={!$deviceOptionsStore.isMobile}
/>
</div>
<Label label={templates.string.Suggested} />
<div class="scroll mt-2">

9
plugins/tracker-resources/src/components/SpacesPopup.svelte
View File

@ -15,7 +15,7 @@
<script lang="ts">
import { afterUpdate, createEventDispatcher } from 'svelte'
import ui, { Label, EditWithIcon, IconSearch } from '@hcengineering/ui'
import ui, { Label, EditWithIcon, IconSearch, deviceOptionsStore } from '@hcengineering/ui'
import SpaceInfo from './SpaceInfo.svelte'
import type { Ref, Class, Space, DocumentQuery } from '@hcengineering/core'
@ -40,7 +40,12 @@
<div class="antiPopup antiPopup-withHeader">
<div class="ap-space" />
<div class="ap-header">
<EditWithIcon icon={IconSearch} bind:value={search} placeholder={ui.string.SearchDots} focus />
<EditWithIcon
icon={IconSearch}
bind:value={search}
placeholder={ui.string.SearchDots}
focus={!$deviceOptionsStore.isMobile}
/>
<div class="ap-caption"><Label label={ui.string.Suggested} /></div>
</div>
<div class="ap-space" />

2
plugins/tracker-resources/src/components/projects/ProjectBrowser.svelte
View File

@ -62,7 +62,7 @@
const space = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
const showCreateDialog = async () => {
showPopup(NewProject, { space, targetElement: null }, null)
showPopup(NewProject, { space, targetElement: null }, 'top')
}
const handleViewModeChanged = (newMode: ProjectsViewMode) => {

2
plugins/tracker-resources/src/components/sprints/SprintBrowser.svelte
View File

@ -67,7 +67,7 @@
const space = typeof query.space === 'string' ? query.space : tracker.team.DefaultTeam
const showCreateDialog = async () => {
showPopup(NewSprint, { space, targetElement: null }, null)
showPopup(NewSprint, { space, targetElement: null }, 'top')
}
const handleViewModeChanged = (newMode: SprintViewMode) => {

2
plugins/tracker-resources/src/components/templates/IssueTemplatesView.svelte
View File

@ -67,7 +67,7 @@
$: if (docWidth > 900 && docSize) docSize = false
const showCreateDialog = async () => {
showPopup(CreateIssueTemplate, { targetElement: null }, null)
showPopup(CreateIssueTemplate, { targetElement: null }, 'top')
}
</script>

4
plugins/view-resources/src/components/filter/ObjectFilter.svelte
View File

@ -18,7 +18,7 @@
import presentation, { getClient } from '@hcengineering/presentation'
import type { State } from '@hcengineering/task'
import task from '@hcengineering/task'
import ui, { Button, CheckBox, Label, Loading, resizeObserver } from '@hcengineering/ui'
import ui, { Button, CheckBox, Label, Loading, resizeObserver, deviceOptionsStore } from '@hcengineering/ui'
import { Filter } from '@hcengineering/view'
import { createEventDispatcher, onMount } from 'svelte'
import view from '../../plugin'
@ -127,7 +127,7 @@
})
onMount(() => {
if (searchInput) searchInput.focus()
if (searchInput && !$deviceOptionsStore.isMobile) searchInput.focus()
})
const dispatch = createEventDispatcher()

1
plugins/view-resources/src/index.ts
View File

@ -91,6 +91,7 @@ export {
buildModel,
getCollectionCounter,
getObjectPresenter,
getObjectPreview,
LoadingProps,
setActiveViewletId,
getActiveViewletId,