mirror of
https://github.com/hcengineering/platform.git
synced 2024-12-22 11:01:54 +03:00
UBER-345: fixed Inbox. (#3325)
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov
GitHub
parent
10f033ba41
commit
792c35bcc1
@ -51,6 +51,7 @@
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.header { background-color: var(--theme-comp-header-color); }
|
||||
&.filled { background-color: var(--theme-bg-color); }
|
||||
&.filledNav { background-color: var(--theme-navpanel-color); }
|
||||
&.border-left { border-left: 1px solid var(--theme-divider-color); }
|
||||
|
||||
@ -794,16 +794,11 @@
|
||||
.inbox-activity__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// flex-grow: 1;
|
||||
color: var(--theme-caption-color);
|
||||
|
||||
&.shrink { padding: .75rem 0; }
|
||||
&:not(.shrink) { padding: 1rem 0; }
|
||||
&.read {
|
||||
opacity: .6;
|
||||
|
||||
.time { color: var(--theme-content-color); }
|
||||
}
|
||||
// &.read {}
|
||||
}
|
||||
|
||||
.time { color: var(--theme-halfcontent-color); }
|
||||
@ -816,7 +811,10 @@
|
||||
background-color: var(--theme-inbox-notify);
|
||||
border-radius: 50%;
|
||||
|
||||
&.people { background-color: var(--theme-inbox-counter-bgcolor); }
|
||||
&.people {
|
||||
top: 1.5rem;
|
||||
background-color: var(--theme-inbox-people-notify);
|
||||
}
|
||||
}
|
||||
.counter {
|
||||
display: flex;
|
||||
@ -835,7 +833,7 @@
|
||||
}
|
||||
&.people {
|
||||
color: var(--theme-inbox-people-notify);
|
||||
background-color: var(--theme-inbox-counter-bgcolor);
|
||||
background-color: var(--theme-inbox-people-counter-bgcolor);
|
||||
}
|
||||
}
|
||||
.arrow {
|
||||
@ -854,8 +852,16 @@
|
||||
border-radius: 0.25rem;
|
||||
|
||||
.notify { left: .125rem; }
|
||||
.inbox-activity__content { padding: 1rem 1.25rem; }
|
||||
.counter.float { right: 1.25rem; }
|
||||
.inbox-activity__content {
|
||||
padding: 1rem 1.25rem;
|
||||
|
||||
&.shrink { padding: .75rem 1.25rem; }
|
||||
}
|
||||
.counter {
|
||||
visibility: hidden;
|
||||
|
||||
&.float { right: 1.25rem; }
|
||||
}
|
||||
.arrow { right: 1.25rem; }
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,12 +19,12 @@
|
||||
|
||||
export let model: TabModel
|
||||
export let selected = 0
|
||||
export let withPadding: boolean = false
|
||||
export let padding: string | undefined = undefined
|
||||
export let noMargin: boolean = false
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
</script>
|
||||
|
||||
<TabsControl {model} {withPadding} {noMargin} {size} bind:selected>
|
||||
<TabsControl {model} {padding} {noMargin} {size} bind:selected>
|
||||
<svelte:fragment slot="rightButtons">
|
||||
{#if $$slots.rightButtons}
|
||||
<div class="flex">
|
||||
|
||||
@ -18,18 +18,12 @@
|
||||
|
||||
export let model: TabBase[]
|
||||
export let selected = 0
|
||||
export let withPadding: boolean = false
|
||||
export let padding: string | undefined = undefined
|
||||
export let noMargin: boolean = false
|
||||
export let size: 'small' | 'medium' = 'medium'
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="flex-stretch tabs-container"
|
||||
class:small={size === 'small'}
|
||||
class:pr-4={withPadding}
|
||||
class:pl-4={withPadding}
|
||||
class:noMargin
|
||||
>
|
||||
<div class="flex-stretch tabs-container" class:small={size === 'small'} style:padding class:noMargin>
|
||||
{#each model as tab, i}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
|
||||
@ -111,6 +111,24 @@
|
||||
})
|
||||
|
||||
let selected = 0
|
||||
|
||||
function onKeydown (key: KeyboardEvent): void {
|
||||
if (key.code === 'ArrowUp') {
|
||||
key.stopPropagation()
|
||||
key.preventDefault()
|
||||
selected--
|
||||
}
|
||||
if (key.code === 'ArrowDown') {
|
||||
key.stopPropagation()
|
||||
key.preventDefault()
|
||||
selected++
|
||||
}
|
||||
if (key.code === 'Enter') {
|
||||
key.preventDefault()
|
||||
key.stopPropagation()
|
||||
// dispatch('open', selected)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ActionContext
|
||||
@ -128,6 +146,7 @@
|
||||
value={item}
|
||||
selected={selected === i}
|
||||
{viewlets}
|
||||
on:keydown={onKeydown}
|
||||
on:click={() => {
|
||||
selected = i
|
||||
}}
|
||||
|
||||
@ -136,6 +136,24 @@
|
||||
dispatch('dm', id)
|
||||
}
|
||||
}
|
||||
|
||||
function onKeydown (key: KeyboardEvent): void {
|
||||
if (key.code === 'ArrowUp') {
|
||||
key.stopPropagation()
|
||||
key.preventDefault()
|
||||
selected--
|
||||
}
|
||||
if (key.code === 'ArrowDown') {
|
||||
key.stopPropagation()
|
||||
key.preventDefault()
|
||||
selected++
|
||||
}
|
||||
if (key.code === 'Enter') {
|
||||
key.preventDefault()
|
||||
key.stopPropagation()
|
||||
changeSelected(selected)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<ActionContext
|
||||
@ -144,7 +162,8 @@
|
||||
}}
|
||||
/>
|
||||
<div class="flex-between header bottom-divider">
|
||||
<div class="flex-row-center flex-gap-1">
|
||||
<div class="flex-row-center">
|
||||
<div class="clear-mins flex-no-shrink mr-4">
|
||||
<ActionIcon
|
||||
icon={IconBack}
|
||||
size="medium"
|
||||
@ -152,24 +171,23 @@
|
||||
dispatch('close')
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{#if employee}
|
||||
<Avatar size="medium" avatar={employee.avatar} />
|
||||
<span class="font-medium">{getName(employee)}</span>
|
||||
<Avatar size="smaller" avatar={employee.avatar} />
|
||||
<span class="font-medium mx-2">{getName(employee)}</span>
|
||||
{/if}
|
||||
{#if newTxes > 0}
|
||||
<div class="counter">
|
||||
<span class="counter">
|
||||
{newTxes}
|
||||
</div>
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if me !== accountId}
|
||||
<div>
|
||||
<Button label={chunter.string.Message} kind="primary" on:click={openDM} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="clear-mins container">
|
||||
<Scroller>
|
||||
<div class="inbox-activity">
|
||||
<Scroller noStretch>
|
||||
{#if loading}
|
||||
<Loading />
|
||||
{:else}
|
||||
@ -178,6 +196,7 @@
|
||||
value={item}
|
||||
selected={selected === i}
|
||||
{viewlets}
|
||||
on:keydown={onKeydown}
|
||||
on:click={() => {
|
||||
selected = i
|
||||
changeSelected(selected)
|
||||
@ -190,18 +209,21 @@
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
padding: 0.5rem 1rem;
|
||||
height: 3.25rem;
|
||||
flex-shrink: 0;
|
||||
padding: 0.625rem 1.25rem 0.625rem 1.75rem;
|
||||
min-width: 0;
|
||||
min-height: 3.25rem;
|
||||
background-color: var(--theme-comp-header-color);
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
color: #2b5190;
|
||||
background-color: var(--theme-calendar-today-bgcolor);
|
||||
height: 1.375rem;
|
||||
width: 1.375rem;
|
||||
color: var(--theme-inbox-people-notify);
|
||||
background-color: var(--theme-inbox-people-counter-bgcolor);
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
|
||||
<div class="flex-row-top h-full">
|
||||
{#if visibileNav}
|
||||
<div class="antiPanel-component border-right indent aside min-w-100">
|
||||
<div class="antiPanel-component header border-right aside min-w-100 flex-no-shrink">
|
||||
{#if selectedEmployee === undefined}
|
||||
<Tabs
|
||||
bind:selected={selectedTab}
|
||||
@ -93,7 +93,7 @@
|
||||
on:open={(e) => {
|
||||
selectedEmployee = e.detail
|
||||
}}
|
||||
withPadding
|
||||
padding={'0 1.75rem'}
|
||||
noMargin
|
||||
size="small"
|
||||
>
|
||||
|
||||
@ -63,17 +63,19 @@
|
||||
function showMenu (e: MouseEvent) {
|
||||
showPopup(Menu, { object: value, baseMenuClass: value._class }, getEventPositionElement(e))
|
||||
}
|
||||
|
||||
let div: HTMLDivElement
|
||||
$: if (selected && div !== undefined) div.focus()
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
{#if doc}
|
||||
<div class="inbox-activity__container" class:selected>
|
||||
<div bind:this={div} class="inbox-activity__container" class:selected tabindex="-1" on:keydown on:click>
|
||||
{#if newTxes > 0 && !selected}<div class="notify" />{/if}
|
||||
<div
|
||||
class="inbox-activity__content clear-mins"
|
||||
class="inbox-activity__content flex-grow clear-mins"
|
||||
class:read={newTxes === 0}
|
||||
on:contextmenu|preventDefault={showMenu}
|
||||
on:click
|
||||
>
|
||||
<div class="flex-row-center flex-no-shrink mr-8">
|
||||
{#if presenter}
|
||||
|
||||
@ -85,7 +85,7 @@
|
||||
>
|
||||
{#if newTxes > 0 && !selected}<div class="notify people" />{/if}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="inbox-activity__content shrink clear-mins" class:read={newTxes === 0}>
|
||||
<div class="inbox-activity__content shrink flex-grow clear-mins" class:read={newTxes === 0}>
|
||||
<div class="flex-row-center gap-2">
|
||||
<Avatar avatar={employee?.avatar} size="small" />
|
||||
{#if employee}
|
||||
@ -124,64 +124,3 @@
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- <style lang="scss">
|
||||
.time {
|
||||
align-self: flex-end;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-right: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
display: flex;
|
||||
border-radius: 0.25rem;
|
||||
flex-grow: 1;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-hover);
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--highlight-select);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--highlight-select-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
margin-right: 0.5rem;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notify {
|
||||
height: 0.5rem;
|
||||
width: 0.5rem;
|
||||
min-width: 0.5rem;
|
||||
margin-top: 1.25rem;
|
||||
margin-right: 0.5rem;
|
||||
background-color: #2b5190;
|
||||
border-radius: 50%;
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 1.25rem;
|
||||
width: 1.25rem;
|
||||
color: #2b5190;
|
||||
background-color: var(--theme-calendar-today-bgcolor);
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style> -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user