From 6c8e014d261ba724356a57eefe2dc6456b1846b2 Mon Sep 17 00:00:00 2001 From: Mike Mhlv Date: Thu, 3 Oct 2024 14:12:13 +0100 Subject: [PATCH 1/2] JS-5460: bookmark styles --- src/scss/block/bookmark.scss | 24 +++++++++++++++++------- src/ts/component/block/bookmark.tsx | 6 +++--- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/src/scss/block/bookmark.scss b/src/scss/block/bookmark.scss index 0ef466423d..e21e0b97a2 100644 --- a/src/scss/block/bookmark.scss +++ b/src/scss/block/bookmark.scss @@ -23,26 +23,36 @@ .side.left { width: 100%; padding: 16px; position: relative; } .side.right { border-radius: 0px 8px 8px 0px; overflow: hidden; display: none; } - .name { @include text-common; line-height: 20px; font-weight: 500; @include clamp2; margin-bottom: 2px; } - .descr { @include text-small; line-height: 16px; color: var(--color-text-secondary); margin-bottom: 4px; @include clamp2; } + .name { @include text-common; line-height: 20px; font-weight: 500; @include clamp2; } + .descr { @include text-small; line-height: 16px; color: var(--color-text-secondary); @include clamp2; } .archive { position: absolute; right: 10px; top: 10px; z-index: 1; } } - .inner.isVertical { display: flex; flex-direction: column-reverse; } + .inner.isVertical { display: flex; flex-direction: column; } .inner.isVertical { .side.left { width: 100%; border-radius: 0px; } - .side.right { aspect-ratio: 7/3; width: 100%; border-radius: 0px; border-bottom: 0.05em solid var(--color-shape-secondary); } + .side.right { aspect-ratio: 7/3; width: 100%; border-radius: 0px; } + + .link, + .name { margin-bottom: 4px; } + .descr { @include clamp3; } } .inner.withImage { .sides { align-items: stretch; } .side.left { width: calc(100% - 28%); padding: 16px 12px 16px 16px; } - .side.right { width: 28%; min-height: 90px; display: block; position: relative; overflow: hidden; } + .side.right { width: 28%; min-height: 90px; display: flex; justify-content: flex-start; align-items: center; position: relative; overflow: hidden; } + .side.right { + .img { width: calc(100% - 16px); height: calc(100% - 32px); position: static; left: auto; top: auto; border-radius: 4px; } + } } .inner.withImage.isVertical { .side.left { width: 100%; } - .side.right { width: 100%; } + .side.right { width: 100%; padding: 0px 16px 16px; aspect-ratio: unset; } + .side.right { + .img { width: 100%; height: auto; } + } } .link { @@ -58,4 +68,4 @@ .block.blockBookmark > .wrapContent > .selectionTarget.isSelectionSelected::after { left: 0px; width: 100%; border-radius: 8px; } .block.blockBookmark.withContent > .wrapContent > .selectionTarget.isSelectionSelected::after { border-radius: 8px; } -} \ No newline at end of file +} diff --git a/src/ts/component/block/bookmark.tsx b/src/ts/component/block/bookmark.tsx index df2d6d0eca..765e687d28 100644 --- a/src/ts/component/block/bookmark.tsx +++ b/src/ts/component/block/bookmark.tsx @@ -95,12 +95,12 @@ const BlockBookmark = observer(class BlockBookmark extends React.Component
- -
{iconImage ? : ''} {U.Common.shortUrl(url)}
+ + {archive}
@@ -274,4 +274,4 @@ const BlockBookmark = observer(class BlockBookmark extends React.Component Date: Thu, 3 Oct 2024 21:03:28 +0100 Subject: [PATCH 2/2] JS-5460: chat bookmark rework --- src/scss/block/chat/attachment.scss | 28 +++++++++++++------ .../component/block/chat/attachment/index.tsx | 22 ++++++++++++--- src/ts/lib/api/command.ts | 2 +- src/ts/lib/util/data.ts | 2 +- 4 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/scss/block/chat/attachment.scss b/src/scss/block/chat/attachment.scss index 5ebcefd40b..16de28344b 100644 --- a/src/scss/block/chat/attachment.scss +++ b/src/scss/block/chat/attachment.scss @@ -1,6 +1,6 @@ .attachments { display: flex; gap: 8px; flex-wrap: wrap; max-width: 540px; } -.attachments { - .attachment { +.attachments{ + .attachment { position: relative; border: 1px solid var(--color-shape-tertiary); background: var(--color-bg-primary); box-shadow: 0px 0px 4px rgba(0,0,0,0.05); min-width: calc(532px / 2); width: calc(532px / 2); height: 72px; border-radius: 8px; display: flex; flex-direction: row; align-items: center;; } @@ -10,8 +10,8 @@ .iconObject { flex-shrink: 0; background-color: var(--color-shape-tertiary); border-radius: 6px; } .info { flex-grow: 1; width: 100%; } - .icon.remove { - opacity: 0; transition: $transitionAllCommon; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; background-size: 8px; + .icon.remove { + opacity: 0; transition: $transitionAllCommon; position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; background-size: 8px; background-image: url('~img/icon/chat/buttons/remove.svg'); background-color: var(--color-bg-primary); border-radius: 50%; box-shadow: 0px 1px 4px rgba(0,0,0,0.2); } @@ -23,14 +23,26 @@ } } - .attachment.isFile, .attachment.isBookmark { + .attachment.isFile { .iconObject { background-color: unset; } .descr { display: flex; flex-direction: row; gap: 0px 6px; align-items: center; color: var(--color-text-secondary); } } + .attachment.isBookmark { width: unset !important; height: unset; min-width: 200px; } .attachment.isBookmark { - .url { @include text-overflow-nw; } - .info { display: flex; flex-direction: column; gap: 2px 0px; } + .inner { display: flex; flex-direction: column; padding: 16px; gap: 8px 0px; max-width: 360px; } + .inner { + .side.left { display: flex; flex-direction: column; gap: 4px 0px; width: 100%; align-items: flex-start; } + .side.left { + .link { @include text-small; color: var(--color-text-secondary); display: flex; justify-content: flex-start; align-items: center; gap: 0px 6px; } + .name { @include text-common; line-height: 20px; font-weight: 500; @include clamp2; } + .descr { @include text-small; line-height: 16px; color: var(--color-text-secondary); @include clamp3; } + } + .side.right { width: 328px; height: 172px; position: relative; display: flex; align-items: center; padding: 0px; background: none; border-radius: 4px; overflow: hidden; } + .side.right { + .img { object-fit: cover; width: 100%; height: 100%; } + } + } } .attachment.isImage { width: 72px; height: 72px; min-width: unset; display: flex; align-items: center; justify-content: center; } @@ -118,4 +130,4 @@ .attachments.layout-10 { .attachment { @include cnt-4; } .attachment:nth-child(-n + 6) { @include cnt-3; } -} \ No newline at end of file +} diff --git a/src/ts/component/block/chat/attachment/index.tsx b/src/ts/component/block/chat/attachment/index.tsx index ac81752cea..4eee2ed3ff 100644 --- a/src/ts/component/block/chat/attachment/index.tsx +++ b/src/ts/component/block/chat/attachment/index.tsx @@ -145,15 +145,29 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component -
-
+
+
+
-
{U.Common.shortUrl(object.source)}
+ {U.Common.shortUrl(source)}
+ +
+
+ {picture ? : ''}
); diff --git a/src/ts/lib/api/command.ts b/src/ts/lib/api/command.ts index fc88540b2d..df9e50b732 100644 --- a/src/ts/lib/api/command.ts +++ b/src/ts/lib/api/command.ts @@ -2214,4 +2214,4 @@ export const ChatGetMessagesByIds = (objectId: string, ids: string[], callBack?: request.setMessageidsList(ids); dispatcher.request(ChatGetMessagesByIds.name, request, callBack); -}; \ No newline at end of file +}; diff --git a/src/ts/lib/util/data.ts b/src/ts/lib/util/data.ts index f10c9fd6a1..1749ae4d4c 100644 --- a/src/ts/lib/util/data.ts +++ b/src/ts/lib/util/data.ts @@ -480,7 +480,7 @@ class UtilData { }; chatRelationKeys () { - return J.Relation.default.concat([ 'source' ]); + return J.Relation.default.concat([ 'source', 'picture' ]); }; createSession (phrase: string, key: string, callBack?: (message: any) => void) {