wieerwill/platform
1
0
Fork 0
mirror of https://github.com/hcengineering/platform.git synced 2025-05-29 11:31:32 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

UI fixes (#1498)

Browse Source 
Signed-off-by: Alexander Platov <sas_lord@mail.ru>
This commit is contained in:
Alexander Platov 2022-04-23 06:51:42 +03:00 committed by GitHub
parent 20e230dd27
commit 51687d1a2b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 116 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/panel/src/components/Panel.svelte
View File

@ -19,7 +19,7 @@
import type { Doc } from '@anticrm/core'
import notification from '@anticrm/notification'
import type { Asset } from '@anticrm/platform'
import { ActionIcon, AnyComponent, AnySvelteComponent, Component, IconExpand, Panel, Scroller } from '@anticrm/ui'
import { Button, AnyComponent, AnySvelteComponent, Component, IconExpand, Panel, Scroller } from '@anticrm/ui'
import { PopupAlignment } from '@anticrm/ui'
export let title: string
@ -40,18 +40,14 @@
<svelte:fragment slot="subtitle">
<slot name="subtitle" />
</svelte:fragment>
<svelte:fragment slot='navigate-actions'>
<slot name='navigate-actions'/>
<svelte:fragment slot="navigate-actions">
<slot name="navigate-actions" />
</svelte:fragment>
<svelte:fragment slot="commands">
<div class='flex-row-center'>
<div class="buttons-group xsmall-gap">
<slot name="actions" />
</div>
<div class='flex-row-center flex-grow gap-2'>
<Component is={calendar.component.DocReminder} props={{ value: object, title }} />
<div class="ml-2">
<Component is={notification.component.LastViewEditor} props={{ value: object }} />
</div>
<Component is={notification.component.LastViewEditor} props={{ value: object }} />
</div>
</svelte:fragment>
@ -64,15 +60,14 @@
</svelte:fragment>
<svelte:fragment slot="actions">
{#if allowFullSize}
<div class="tool">
<ActionIcon
icon={IconExpand}
size={'medium'}
action={() => {
fullSize = !fullSize
}}
/>
</div>
<Button
icon={IconExpand}
size={'medium'}
kind={'transparent'}
on:click={() => {
fullSize = !fullSize
}}
/>
{/if}
</svelte:fragment>
{#if isFullSize}

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

@ -585,6 +585,9 @@ a.no-line {
}
/* Backgrounds & Colors */
.background-body-color { background-color: var(--body-color); }
.background-accent-bg-color { background-color: var(--accent-bg-color); }
.background-theme-content-accent { background-color: var(--theme-content-accent-color); }
.background-theme-bg-color { background-color: var(--theme-bg-color); }
.background-highlight-red { background-color: var(--highlight-red); }

18
packages/theme/styles/panel.scss
View File

@ -19,12 +19,16 @@
min-width: 400px;
background: var(--body-accent);
border: 1px solid var(--divider-color);
border-radius: .5rem;
flex-direction: row;
box-shadow: var(--popup-shadow);
// left: 1rem;
.ac-header.divide { border-bottom: 1px solid var(--theme-card-divider); }
.ac-header {
&.highlight { background-color: var(--accent-bg-color); }
&.divide { border-bottom: 1px solid var(--theme-card-divider); }
}
.ad-section-50 {
display: flex;
@ -39,8 +43,9 @@
.ad-tools {
position: absolute;
display: flex;
top: 1.375rem;
right: 2rem;
top: 1.25rem;
right: 1.25rem;
&.grow-reverse {
display: flex;
flex-direction: row-reverse;
@ -48,12 +53,5 @@
align-items: center;
}
}
.tool {
margin-left: 1rem;
color: var(--theme-content-accent-color);
cursor: pointer;
&:hover { color: var(--theme-caption-color); }
}
}

40
packages/ui/src/components/Panel.svelte
View File

@ -16,7 +16,7 @@
import type { Asset } from '@anticrm/platform'
import { createEventDispatcher } from 'svelte'
import { AnySvelteComponent } from '../types'
import ActionIcon from './ActionIcon.svelte'
import Button from './Button.svelte'
import Icon from './Icon.svelte'
import IconClose from './icons/Close.svelte'
@ -35,19 +35,22 @@
<div class="antiPanel antiComponent" bind:clientWidth={innerWidth}>
<div class:panel-content={!rightSection} class:ad-section-50={rightSection} class:divide={rightSection}>
{#if showHeader}
<div class="ac-header short mirror divide">
<div class="tool flex-row-center">
<ActionIcon
<div class="ac-header short mirror divide highlight">
<div class="ml-2 mr-2">
<Button
icon={IconClose}
size={'medium'}
action={() => {
kind={'transparent'}
on:click={() => {
dispatch('close')
}} />
</div>
{#if $$slots['navigate-actions']}
<slot name="navigate-actions" />
<div class="buttons-group xxsmall-gap">
<slot name="navigate-actions" />
</div>
{/if}
<div class="ac-header__wrap-title flex-grow">
<div class="ml-4 ac-header__wrap-title flex-grow">
{#if icon}
<div class="ac-header__icon">
<Icon {icon} size={'large'} />
@ -59,23 +62,27 @@
</div>
</div>
{#if rightSection}
<div class="flex">
<div class="buttons-group xsmall-gap mr-4">
<slot name="commands" />
</div>
{/if}
</div>
{:else}
<div class="ac-header short mirror divide">
<div class="tool flex-row-center">
<ActionIcon
<div class="ml-2 mr-2">
<Button
icon={IconClose}
size={'medium'}
action={() => {
kind={'transparent'}
on:click={() => {
dispatch('close')
}} />
}}
/>
</div>
{#if $$slots['navigate-actions']}
<slot name="navigate-actions" />
<div class="buttons-group xxsmall-gap">
<slot name="navigate-actions" />
</div>
{/if}
</div>
{/if}
@ -95,11 +102,9 @@
<slot name="rightSection" />
{/if}
<div class="ad-tools flex-row-center flex-grow h-4" class:grow-reverse={reverseCommands}>
<div class="ad-tools buttons-group xsmall-gap h-4" class:grow-reverse={reverseCommands}>
{#if !rightSection && $$slots.commands}
<div class="flex">
<slot name="commands" />
</div>
<slot name="commands" />
{/if}
<slot name="actions" />
</div>
@ -112,5 +117,4 @@
flex-direction: column;
align-content: stretch;
}
</style>

17
packages/ui/src/components/PanelInstance.svelte
View File

@ -89,7 +89,7 @@
{:else}
<slot name='panel-header'/>
<div class="panel-instance" class:bg={props.element === 'content'} bind:this={modalHTML}>
<div class="p-2 w-full h-full">
<div class="panel-container" class:padding={props.element === 'content'}>
<svelte:component
this={component}
bind:this={componentInstance}
@ -117,8 +117,14 @@
z-index: 401;
position: fixed;
background-color: transparent;
&.bg {
background-color: var(--theme-bg-color);
&.bg { background-color: var(--body-color); }
.panel-container {
padding: .5rem;
width: 100%;
height: 100%;
&.padding { padding: .75rem; }
}
}
.modal-overlay {
@ -128,8 +134,7 @@
left: 0;
width: 100%;
height: 100%;
&.show {
background: rgba(0, 0, 0, 0.5);
}
&.show { background: rgba(0, 0, 0, .5); }
}
</style>

8
packages/ui/src/components/icons/DownOutline.svelte Normal file
View File

@ -0,0 +1,8 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M4.2,4.9L3,6.1l5,5l5-5l-1.2-1.2L8,8.7L4.2,4.9z"/>
</svg>

8
packages/ui/src/components/icons/UpOutline.svelte Normal file
View File

@ -0,0 +1,8 @@
<script lang="ts">
export let size: 'small' | 'medium' | 'large'
const fill: string = 'currentColor'
</script>
<svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M4.2,11.1L3,9.9l5-5l5,5l-1.2,1.2L8,7.3L4.2,11.1z"/>
</svg>

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

@ -94,6 +94,8 @@ export { default as IconExpand } from './components/icons/Expand.svelte'
export { default as IconActivity } from './components/icons/Activity.svelte'
export { default as IconUp } from './components/icons/Up.svelte'
export { default as IconDown } from './components/icons/Down.svelte'
export { default as IconUpOutline } from './components/icons/UpOutline.svelte'
export { default as IconDownOutline } from './components/icons/DownOutline.svelte'
export { default as IconShare } from './components/icons/Share.svelte'
export { default as IconDelete } from './components/icons/Delete.svelte'
export { default as IconEdit } from './components/icons/Edit.svelte'

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

@ -118,6 +118,7 @@ export function fitPopupPositionedElement (modalHTML: HTMLElement, alignment: Po
const rectPopup = modalHTML.getBoundingClientRect()
modalHTML.style.left = modalHTML.style.right = modalHTML.style.top = modalHTML.style.bottom = ''
modalHTML.style.maxHeight = modalHTML.style.height = ''
modalHTML.style.maxWidth = modalHTML.style.width = ''
if (alignment.position) {
if (alignment.position.v === 'top') {
modalHTML.style.top = `${rect.top}px`
@ -188,10 +189,10 @@ export function fitPopupElement (modalHTML: HTMLElement, element?: PopupAlignmen
show = true
} else if (element === 'content' && contentPanel !== undefined) {
const rect = contentPanel.getBoundingClientRect()
modalHTML.style.top = `calc(${rect.top}px)`
modalHTML.style.height = `${Math.min(rect.height, window.innerHeight - rect.top)}px`
modalHTML.style.left = `calc(${rect.left}px)`
modalHTML.style.width = `${Math.min(rect.width, window.innerWidth - rect.left)}px`
modalHTML.style.top = `${rect.top + 1}px`
modalHTML.style.height = `${Math.min(rect.height - 1, window.innerHeight - rect.top - 1)}px`
modalHTML.style.left = `${rect.left + 1}px`
modalHTML.style.width = `${Math.min(rect.width - 1, window.innerWidth - rect.left - 1)}px`
} else if (element === 'middle') {
if (contentPanel !== undefined) {
const rect = contentPanel.getBoundingClientRect()

4
plugins/activity-resources/src/components/Activity.svelte
View File

@ -57,14 +57,14 @@
{#if fullSize || transparent}
{#if transparent !== undefined && !transparent}
<div class="ac-header short mirror-tool divide">
<div class="ac-header short mirror-tool highlight">
<div class="ac-header__wrap-title">
<div class="flex-center icon"><IconActivity size={'small'} /></div>
<span class="ac-header__title"><Label label={activity.string.Activity} /></span>
</div>
</div>
{/if}
<div class="flex-col h-full min-h-0" class:background-bg-accent={!transparent}>
<div class="flex-col h-full min-h-0" class:background-accent-bg-color={!transparent}>
<Scroller>
<div class="p-10 select-text">
{#if txes}

15
plugins/calendar-resources/src/components/DocReminder.svelte
View File

@ -16,7 +16,7 @@
import { EmployeeAccount } from '@anticrm/contact'
import { Doc,getCurrentAccount } from '@anticrm/core'
import { getClient } from '@anticrm/presentation'
import { ActionIcon,showPopup } from '@anticrm/ui'
import { Button, showPopup, Tooltip } from '@anticrm/ui'
import calendar from '../plugin'
import CreateReminder from './CreateReminder.svelte'
import DocRemindersPopup from './DocRemindersPopup.svelte'
@ -45,8 +45,11 @@
}
</script>
{#if isEvent}
<ActionIcon size='medium' label={calendar.string.RemindMeAt} icon={calendar.icon.Reminder} action={(e) => click(e)} />
{:else}
<ActionIcon size='medium' label={calendar.string.Reminders} icon={calendar.icon.Reminder} action={(e) => click(e)} />
{/if}
<Tooltip label={isEvent ? calendar.string.RemindMeAt : calendar.string.Reminders}>
<Button
size={'medium'}
kind={'transparent'}
icon={calendar.icon.Reminder}
on:click={(e) => click(e)}
/>
</Tooltip>

4
plugins/contact-resources/src/components/ChannelsDropdown.svelte
View File

@ -257,11 +257,15 @@
width: min-content;
.tooltip {
overflow: hidden;
position: absolute;
padding: .25rem .5rem;
bottom: 100%;
left: 50%;
width: auto;
min-width: 0;
white-space: nowrap;
text-overflow: ellipsis;
background-color: var(--accent-bg-color);
border: 1px solid var(--button-border-color);
border-radius: .25rem;

7
plugins/notification-assets/assets/icons.svg
View File

@ -3,11 +3,10 @@
<path d="M9.78261 18.7959C9.78261 20.0132 10.7754 21 12 21C13.2246 21 14.2174 20.0132 14.2174 18.7959M19.3905 14.7551C18.7778 14.7551 18.2826 14.2631 18.2826 13.6524V9.24462C18.2826 5.79553 15.4703 3 12 3C8.52965 3 5.71739 5.79481 5.71739 9.24462V13.6524C5.71739 14.2609 5.2205 14.7551 4.60947 14.7551C3.99732 14.7551 3.5 15.2496 3.5 15.8571C3.5 16.4658 3.99753 16.9592 4.61235 16.9592H19.3876C20.0015 16.9592 20.5 16.4646 20.5 15.8571C20.5 15.2497 20.0014 14.7551 19.3905 14.7551Z"/>
</symbol>
<symbol id="track" viewBox="0 0 24 24">
<path d="M9.78261 18.7959C9.78261 20.0132 10.7754 21 12 21C13.2246 21 14.2174 20.0132 14.2174 18.7959M19.3905 14.7551C18.7778 14.7551 18.2826 14.2631 18.2826 13.6524V9.24462C18.2826 5.79553 15.4703 3 12 3C8.52965 3 5.71739 5.79481 5.71739 9.24462V13.6524C5.71739 14.2609 5.2205 14.7551 4.60947 14.7551C3.99732 14.7551 3.5 15.2496 3.5 15.8571C3.5 16.4658 3.99753 16.9592 4.61235 16.9592H19.3876C20.0015 16.9592 20.5 16.4646 20.5 15.8571C20.5 15.2497 20.0014 14.7551 19.3905 14.7551Z" fill="none"
stroke="currentColor"/>
<path d="M21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.1-0.9c-0.5,0.2-1.1,0.4-1.6,0.4l0.1,0.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2 c0.4,0.6,0.7,1.2,0.7,1.3c0,0.1-0.1,0.1-0.1,0.2c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4 l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1c1,0,1.9,0.3,2.7,0.7c0.4-0.5,0.9-0.9,1.4-1.1C15,1.5,13.5,1,12,1 C8.2,1,5,3.9,4.5,7.7l-0.4,2.7c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3 c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5C10.1,22.6,11,23,12,23s2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3 c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3C22.9,16.8,22.6,16.2,21.7,15z M13.6,20.6c-1,0.8-2.3,0.8-3.2,0 c-0.4-0.2-0.6-0.7-0.8-1.2h4.9C14.2,19.9,14,20.3,13.6,20.6z" />
<circle fill="var(--warning-color)" cx="18" cy="5.9" r="3"/>
</symbol>
<symbol id="donttrack" viewBox="0 0 24 24">
<path stroke="currentColor" fill="none" d="m9.78261,18.7959c0,1.2173 0.99279,2.2041 2.21739,2.2041c1.2246,0 2.2174,-0.9868 2.2174,-2.2041m5.1731,-4.0408c-0.6127,0 -1.1079,-0.492 -1.1079,-1.1027l0,-4.40778c0,-3.44909 -2.8123,-6.24462 -6.2826,-6.24462c-3.47035,0 -6.28261,2.79481 -6.28261,6.24462l0,4.40778c0,0.6085 -0.49689,1.1027 -1.10792,1.1027c-0.61215,0 -1.10947,0.4945 -1.10947,1.102c0,0.6087 0.49753,1.1021 1.11235,1.1021l14.77525,0c0.6139,0 1.1124,-0.4946 1.1124,-1.1021c0,-0.6074 -0.4986,-1.102 -1.1095,-1.102z" id="svg_1"/>
<line id="svg_2" y2="2.59025" x2="21.49529" y1="21.40975" x1="2.6758" stroke="currentColor" fill="none"/>
<path d="M21.7,15l-0.2,0.1L21.7,15L21,13.8c-0.6-1.1-1.1-2.3-1.2-3.4l-0.4-2.7C19,3.9,15.8,1,12,1S5,3.9,4.5,7.7l-0.4,2.7 c-0.1,1.2-0.5,2.4-1.2,3.4L2.2,15c-0.7,1.2-1.1,1.8-1,2.6c0.1,0.5,0.4,1,0.7,1.3c0.6,0.5,1.3,0.5,2.7,0.5h3c0.2,1,0.8,1.9,1.5,2.5 C10.1,22.6,11,23,12,23c1,0,2-0.4,2.7-1.1c0.7-0.6,1.2-1.5,1.5-2.5h3c1.4,0,2.1,0,2.7-0.5c0.4-0.4,0.6-0.8,0.7-1.3 C22.9,16.8,22.6,16.2,21.7,15z M14.5,19.4c-0.2,0.5-0.5,0.8-0.8,1.2l0,0c-1,0.8-2.3,0.8-3.2,0c-0.4-0.2-0.6-0.7-0.8-1.2H14.5z M20.9,17.5c-0.1,0.1-1,0.1-1.5,0.1H4.8c-0.6,0-1.4,0-1.5-0.1l-0.1-0.1c0-0.1,0.5-0.8,0.7-1.4l0.7-1.2c0.7-1.3,1.2-2.6,1.4-4.2 l0.4-2.7c0.4-3,2.7-5.1,5.7-5.1s5.4,2.1,5.7,5.1l0.4,2.7c0.1,1.5,0.6,2.9,1.4,4.2l0.7,1.2c0.4,0.6,0.7,1.2,0.7,1.3 C21,17.4,20.9,17.4,20.9,17.5z" />
</symbol>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

18
plugins/notification-resources/src/components/LastViewEditor.svelte
View File

@ -14,7 +14,7 @@
-->
<script lang="ts">
import { Doc } from '@anticrm/core'
import { ActionIcon } from '@anticrm/ui'
import { Button, Tooltip } from '@anticrm/ui'
import notification from '../plugin'
import { NotificationClientImpl } from '../utils'
@ -26,8 +26,14 @@
$: subscribed = lastView !== undefined && lastView !== -1
</script>
{#if !subscribed}
<ActionIcon size='medium' label={notification.string.Track} icon={notification.icon.Track} action={() => { notificationClient.updateLastView(value._id, value._class, undefined, true) }} />
{:else}
<ActionIcon size='medium' label={notification.string.DontTrack} icon={notification.icon.DontTrack} action={() => { notificationClient.unsubscribe(value._id) }} />
{/if}
<Tooltip label={subscribed ? notification.string.DontTrack : notification.string.Track}>
<Button
size={'medium'}
kind={'transparent'}
icon={subscribed ? notification.icon.DontTrack : notification.icon.Track}
on:click={() => {
if (subscribed) notificationClient.unsubscribe(value._id)
else notificationClient.updateLastView(value._id, value._class, undefined, true)
}}
/>
</Tooltip>

8
plugins/tracker-resources/src/components/issues/EditIssue.svelte
View File

@ -19,7 +19,7 @@
import { createQuery, getClient, UserBox } from '@anticrm/presentation'
import { StyledTextBox } from '@anticrm/text-editor'
import type { Issue, Team } from '@anticrm/tracker'
import { AnyComponent, Button, EditBox, Grid, IconDown, IconUp } from '@anticrm/ui'
import { AnyComponent, Button, EditBox, Grid, IconDownOutline, IconUpOutline } from '@anticrm/ui'
import { createEventDispatcher, onMount } from 'svelte'
import tracker from '../../plugin'
// import Card from '../Card.svelte'
@ -74,10 +74,8 @@
{/if}
</svelte:fragment>
<svelte:fragment slot="navigate-actions">
<div class="tool flex gap-1">
<Button icon={IconDown}/>
<Button icon={IconUp}/>
</div>
<Button icon={IconDownOutline} kind={'secondary'} size={'medium'} />
<Button icon={IconUpOutline} kind={'secondary'} size={'medium'} />
</svelte:fragment>
<div class="p-10">
<Grid column={1} rowGap={1.5}>

8
plugins/view-resources/src/components/EditDoc.svelte
View File

@ -26,7 +26,7 @@
getClient,
KeyedAttribute
} from '@anticrm/presentation'
import { AnyComponent, Button, Component, IconDown, IconUp, Label, PopupAlignment, showPanel } from '@anticrm/ui'
import { AnyComponent, Button, Component, IconDownOutline, IconUpOutline, Label, PopupAlignment, showPanel } from '@anticrm/ui'
import view from '@anticrm/view'
import { createEventDispatcher, onDestroy } from 'svelte'
import ActionContext from './ActionContext.svelte'
@ -270,10 +270,8 @@
}}
>
<svelte:fragment slot="navigate-actions">
<div class="tool flex-row-center gap-1 mr-4">
<Button icon={IconDown} kind={'no-border'} on:click={() => next(true)}/>
<Button icon={IconUp} kind={'no-border'} on:click={() => next(false)}/>
</div>
<Button icon={IconDownOutline} kind={'secondary'} size={'medium'} on:click={() => next(true)}/>
<Button icon={IconUpOutline} kind={'secondary'} size={'medium'} on:click={() => next(false)}/>
</svelte:fragment>
<div class="w-full" slot="subtitle">
{#if !headerLoading}