From c2766b4e195ce56bed196ed563ba7df6d9663c2e Mon Sep 17 00:00:00 2001 From: Alexander Platov Date: Thu, 5 May 2022 11:29:46 +0300 Subject: [PATCH] Update Telegram and Email layouts. Fix Channels. (#1639) Signed-off-by: Andrey Sobolev --- packages/theme/styles/_colors.scss | 10 +- packages/theme/styles/_layouts.scss | 15 + packages/theme/styles/common.scss | 16 +- packages/theme/styles/components.scss | 3 + packages/ui/lang/en.json | 3 +- packages/ui/lang/ru.json | 3 +- packages/ui/src/components/Button.svelte | 1 + packages/ui/src/components/Panel.svelte | 2 +- packages/ui/src/components/Scroller.svelte | 53 +- .../ui/src/components/TooltipInstance.svelte | 45 +- packages/ui/src/plugin.ts | 3 +- packages/ui/src/popups.ts | 4 +- .../activity-assets/src/tsdoc-metadata.json | 22 +- .../src/components/AttachmentPresenter.svelte | 61 +- .../src/components/ChannelEditor.svelte | 89 ++- .../src/components/ChannelsDropdown.svelte | 179 ++--- .../src/components/ChannelsEditor.svelte | 7 +- .../src/components/ChannelsPresenter.svelte | 4 +- plugins/gmail-assets/lang/en.json | 1 + plugins/gmail-assets/lang/ru.json | 3 +- plugins/gmail-assets/src/tsdoc-metadata.json | 22 +- .../src/components/Chats.svelte | 87 +-- .../src/components/FullMessage.svelte | 135 ++-- .../src/components/FullMessageContent.svelte | 10 +- .../src/components/Main.svelte | 23 +- .../src/components/Message.svelte | 25 +- .../src/components/Messages.svelte | 27 +- .../src/components/NewMessage.svelte | 230 +++---- .../src/components/SharedMessages.svelte | 2 +- .../src/components/icons/Inbox.svelte | 637 ++++++++++++++++++ plugins/gmail-resources/src/plugin.ts | 1 + plugins/telegram-assets/lang/en.json | 3 +- plugins/telegram-assets/lang/ru.json | 3 +- .../src/components/Chat.svelte | 27 +- .../src/components/Message.svelte | 4 +- .../src/components/SharedMessages.svelte | 2 +- plugins/telegram-resources/src/plugin.ts | 3 +- tests/sanity/tests/settings.spec.ts | 1 + 38 files changed, 1174 insertions(+), 592 deletions(-) create mode 100644 plugins/gmail-resources/src/components/icons/Inbox.svelte diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index 130a6293a4..3fcdb11d5e 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -109,6 +109,9 @@ --toggle-on-bg-color: #5e6ad2; --toggle-on-bg-hover: #828fff; + --incoming-msg: rgba(67, 67, 72, .3); + --outcoming-msg: rgba(67, 67, 72, .6); + --theme-bg-color: #18181e; --theme-bg-selection: #282830; --theme-bg-checked: #262b39; @@ -125,8 +128,6 @@ --theme-border-modal: rgba(0, 0, 0, .2); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); --theme-chat-divider: rgb(36, 36, 41); - --theme-incoming-msg: rgba(67, 67, 72, .3); - --theme-outcoming-msg: rgba(67, 67, 72, .6); --theme-card-bg: #282830; --theme-card-bg-dark: rgba(222, 222, 240, .1); @@ -250,6 +251,9 @@ --toggle-on-bg-color: #6e79d6; --toggle-on-bg-hover: #535db3; + --incoming-msg: rgba(67, 67, 72, .3); + --outcoming-msg: rgba(67, 67, 72, .6); + --theme-bg-color: #FFFFFF; --theme-bg-selection: #F1F1F4; --theme-menu-color: #E7E7E7; @@ -264,8 +268,6 @@ --theme-border-modal: rgba(0, 0, 0, .2); --theme-chat-selection: radial-gradient(135.96% 3333.35% at -2.36% -27.63%, rgba(210, 183, 156, 0.11) 0%, rgba(204, 196, 184, 0.0785128) 20.8%, rgba(104, 104, 114, 0.11) 100%); --theme-chat-divider: rgb(233, 233, 233); - --theme-incoming-msg: rgba(67, 67, 72, .3); - --theme-outcoming-msg: rgba(67, 67, 72, .6); --theme-card-bg: #FFF; --theme-card-bg-dark: rgba(255, 255, 255, .3); diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 70c44698b6..14eaef9d7d 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -116,6 +116,15 @@ p:last-child { margin-block-end: 0; } float: left; } +input.search { + margin: 0; + color: #d6d6d6; + border: none; + caret-color: var(--caret-color); + + &.padding { padding: .625rem .75rem; } +} + /* Flex */ .flex { display: flex; } .inline-flex { display: inline-flex; } @@ -374,6 +383,7 @@ p:last-child { margin-block-end: 0; } .px-2 { padding: 0 .5rem; } .px-3 { padding: 0 .75rem; } .px-4 { padding: 0 1rem; } +.py-4 { padding: 1rem 0; } .py-10 { padding: 2.5rem 0; } .p-1 { padding: .25rem; } @@ -606,6 +616,11 @@ a.no-line { background-color: var(--theme-bg-accent-color); &:hover { background-color: var(--theme-menu-divider); } } +.scroll-divider-color::-webkit-scrollbar-thumb { + background-color: var(--divider-color); + &:horizontal { border-radius: .25rem .25rem 0 0; } + &:hover { background-color: var(--popup-bg-hover); } +} /* Backgrounds & Colors */ .background-body-color { background-color: var(--body-color); } diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index a615860647..6e19fe46ce 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -209,23 +209,23 @@ /* Basic */ .antiTitle { - .icon-wrapper, - .title-wrapper { + .icon-wrapper, &.icon-wrapper, + .title-wrapper, &.title-wrapper { display: flex; flex-wrap: nowrap; min-width: 0; } - .title-wrapper { + .title-wrapper, &.title-wrapper { flex-direction: column; flex-grow: 1; } - .icon-wrapper { align-items: center; } + .icon-wrapper, &.icon-wrapper { align-items: center; } - .wrapped-icon { + .wrapped-icon, &.wrapped-icon { margin-right: .75rem; color: var(--content-color); } - .wrapped-title { + .wrapped-title, &.wrapped-title { min-width: 0; font-weight: 500; font-size: 1rem; @@ -236,7 +236,7 @@ white-space: nowrap; user-select: none; } - .wrapped-subtitle { + .wrapped-subtitle, &.wrapped-subtitle { min-width: 0; font-size: 0.75rem; color: var(--dark-color); @@ -249,5 +249,7 @@ -webkit-line-clamp: 2; line-clamp: 2; user-select: none; + + b { color: var(--content-color); } } } diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index c1eab49fbe..8434988ab7 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -425,6 +425,9 @@ } } +// THead background-color in Tooltip +.popup-tooltip .antiTable .scroller-thead { background-color: var(--accent-bg-color); } + // Hide row menu in Tooltip .popup-tooltip .antiTable .antiTable-body__row:hover .antiTable-cells__firstCell .antiTable-cells__firstCell-menuRow { visibility: hidden; } diff --git a/packages/ui/lang/en.json b/packages/ui/lang/en.json index 16db726c01..faed064e55 100644 --- a/packages/ui/lang/en.json +++ b/packages/ui/lang/en.json @@ -32,6 +32,7 @@ "MinutesAfter": "{minutes, plural, =1 {in a minute} other {in # minutes}}", "HoursAfter": "{hours, plural, =1 {in an hour} other {in # hours}}", "DaysAfter": "{days, plural, =1 {in a day} other {in # days}}", - "NoActionsDefined": "No actions applicable" + "NoActionsDefined": "No actions applicable", + "Incoming": "Incoming" } } diff --git a/packages/ui/lang/ru.json b/packages/ui/lang/ru.json index ffd70e54d4..00ec555ca0 100644 --- a/packages/ui/lang/ru.json +++ b/packages/ui/lang/ru.json @@ -32,6 +32,7 @@ "MinutesAfter": "{minutes, plural, =1 {через минуту} other {через # минут}}", "HoursAfter": "{hours, plural, =1 {через час} other {через # часа}}", "DaysAfter": "{days, plural, =1 {через день} other {через # дней}}", - "NoActionsDefined": "Нет доступных действий" + "NoActionsDefined": "Нет доступных действий", + "Incoming": "Входящие" } } diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte index d28a916da2..0a9c25eba2 100644 --- a/packages/ui/src/components/Button.svelte +++ b/packages/ui/src/components/Button.svelte @@ -74,6 +74,7 @@ on:click on:focus on:blur + on:mousemove > {#if icon && !loading}
- {#if asideFloat} + {#if asideFloat && $$slots.aside && isAside} {#if $$slots.utils}
{/if}
-
{:else if enabled} -
-
-
Gmail
-
-
-
+
- { - selectable = !selectable - }} - /> {:else} -
+
{/if}
-
- - {#if messages} + +
+ {#if messages && messages.length > 0} +
+ {:else} +
+ +
+
{/if} - -
- - +
+ diff --git a/plugins/gmail-resources/src/components/FullMessage.svelte b/plugins/gmail-resources/src/components/FullMessage.svelte index e48dcf1c16..2674a47f4d 100644 --- a/plugins/gmail-resources/src/components/FullMessage.svelte +++ b/plugins/gmail-resources/src/components/FullMessage.svelte @@ -17,7 +17,7 @@ import { SharedMessage } from '@anticrm/gmail' import Button from '@anticrm/ui/src/components/Button.svelte' import { createEventDispatcher } from 'svelte' - import { IconArrowLeft, Label } from '@anticrm/ui' + import { IconArrowLeft, Label, Scroller } from '@anticrm/ui' import gmail from '../plugin' import FullMessageContent from './FullMessageContent.svelte' import { createQuery } from '@anticrm/presentation' @@ -48,89 +48,76 @@ $: user = currentMessage.incoming ? currentMessage.receiver : currentMessage.sender -
-
{ - dispatch('close') - }} - > - -
-
-
{currentMessage.subject}
-
-