From 5d4cc2d4af9f1b34a97fc266ea44306b2746344e Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 13 Sep 2024 18:13:03 +0200 Subject: [PATCH 01/54] change interval to 5 min + mention empty state --- src/json/text.json | 1 + src/scss/menu/block/mention.scss | 2 ++ src/ts/component/block/chat.tsx | 6 ++---- src/ts/component/menu/block/mention.tsx | 5 ++--- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/json/text.json b/src/json/text.json index 5e83342592..bbd072d8b3 100644 --- a/src/json/text.json +++ b/src/json/text.json @@ -160,6 +160,7 @@ "commonFile": "File", "commonMembers": "Members", "commonEntrySpace": "My First Space", + "commonNothingFound": "Nothing found", "pluralDay": "day|days", "pluralObject": "Object|Objects", diff --git a/src/scss/menu/block/mention.scss b/src/scss/menu/block/mention.scss index 866dc1916c..07bb0199a8 100644 --- a/src/scss/menu/block/mention.scss +++ b/src/scss/menu/block/mention.scss @@ -13,5 +13,7 @@ .name { margin: 0px; } .caption { display: none; } } + + .emptySearch { text-align: left; } } } \ No newline at end of file diff --git a/src/ts/component/block/chat.tsx b/src/ts/component/block/chat.tsx index 7a31b48336..e97f125e09 100644 --- a/src/ts/component/block/chat.tsx +++ b/src/ts/component/block/chat.tsx @@ -13,7 +13,7 @@ interface State { isLoading: boolean; }; -const GROUP_TIME = 60; +const GROUP_TIME = 300; const BlockChat = observer(class BlockChat extends React.Component { @@ -174,7 +174,7 @@ const BlockChat = observer(class BlockChat extends React.Component `${it}.${ns}`).join(' ')); @@ -195,8 +195,6 @@ const BlockChat = observer(class BlockChat extends React.Component this.scrollToMessage(message.id)); - U.Common.getScrollContainer(isPopup).on(`scroll.${ns}`, e => this.onScroll(e)); }; diff --git a/src/ts/component/menu/block/mention.tsx b/src/ts/component/menu/block/mention.tsx index 0ee5c584fa..c2ceb65dac 100644 --- a/src/ts/component/menu/block/mention.tsx +++ b/src/ts/component/menu/block/mention.tsx @@ -98,7 +98,7 @@ const MenuBlockMention = observer(class MenuBlockMention extends React.Component return ( {!items.length && !isLoading ? ( - + ) : ''} {items.length ? ( @@ -346,13 +346,12 @@ const MenuBlockMention = observer(class MenuBlockMention extends React.Component resize () { const { getId, position } = this.props; - const { isLoading } = this.state; const items = this.getItems(); const obj = $(`#${getId()} .content`); let height = 16; if (!items.length) { - height = isLoading ? height + 40 : 160; + height += HEIGHT_ITEM; } else { height = items.reduce((res: number, current: any) => res + this.getRowHeight(current), height); }; From 3991fe7823ea5b85e7cdd1c5ea02dbb0ffcc81c4 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 13 Sep 2024 18:57:18 +0200 Subject: [PATCH 02/54] refactoring --- src/ts/component/menu/index.tsx | 2 +- src/ts/component/menu/object.tsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/ts/component/menu/index.tsx b/src/ts/component/menu/index.tsx index 828b135e8d..fcbeaebefd 100644 --- a/src/ts/component/menu/index.tsx +++ b/src/ts/component/menu/index.tsx @@ -977,7 +977,7 @@ const Menu = observer(class Menu extends React.Component { if (item.itemId) { el = menu.find(`#item-${$.escapeSelector(item.itemId)}`); }; - if (item.id && !el) { + if (item.id && (!el || !el.length)) { el = menu.find(`#item-${$.escapeSelector(item.id)}`); }; diff --git a/src/ts/component/menu/object.tsx b/src/ts/component/menu/object.tsx index 60e66ae8c5..8f9be6e33f 100644 --- a/src/ts/component/menu/object.tsx +++ b/src/ts/component/menu/object.tsx @@ -115,8 +115,8 @@ class MenuObject extends React.Component { let pageLink = { id: 'pageLink', icon: 'link', name: translate('commonCopyLink') }; let pageReload = { id: 'pageReload', icon: 'reload', name: translate('menuObjectReloadFromSource') }; let createWidget = { id: 'createWidget', icon: 'createWidget', name: translate('menuObjectCreateWidget') }; - let download = { id: 'download', icon: 'download', name: translate('commonDownload') }; - let open = { id: 'open', icon: 'expand', name: translate('menuObjectDownloadOpen') }; + let downloadFile = { id: 'downloadFile', icon: 'download', name: translate('commonDownload') }; + let openFile = { id: 'openFile', icon: 'expand', name: translate('menuObjectDownloadOpen') }; if (isTemplate) { template = { id: 'pageCreate', icon: 'template', name: translate('commonCreateObject') }; @@ -179,8 +179,8 @@ class MenuObject extends React.Component { const allowedWidget = canWrite && !object.isArchived && !S.Block.checkBlockTypeExists(rootId); const allowedExport = !isFilePreview && !U.Object.isChatLayout(object.layout); const allowedPrint = !isFilePreview; - const allowedDownload = U.Object.isInFileLayouts(object.layout); - const allowedOpen = U.Object.isInFileLayouts(object.layout); + const allowedDownloadFile = U.Object.isInFileLayouts(object.layout); + const allowedOpenFile = U.Object.isInFileLayouts(object.layout); if (!allowedArchive) archive = null; if (!allowedLock) pageLock = null; @@ -198,8 +198,8 @@ class MenuObject extends React.Component { if (!allowedAddCollection) addCollection = null; if (!allowedExport) pageExport = null; if (!allowedPrint) print = null; - if (!allowedDownload) download = null; - if (!allowedOpen) open = null; + if (!allowedDownloadFile) downloadFile = null; + if (!allowedOpenFile) openFile = null; if (!canWrite) { template = null; @@ -218,7 +218,7 @@ class MenuObject extends React.Component { { children: [ linkTo, addCollection ] }, { children: [ search, pageLink, pageInstall, pageCopy, archive, remove ] }, { children: [ print ] }, - { children: [ open, download ] }, + { children: [ openFile, downloadFile ] }, ]; } else { if (isTemplate) { @@ -516,12 +516,12 @@ class MenuObject extends React.Component { break; }; - case 'open': { + case 'openFile': { Action.openFile(object.id, route); break; }; - case 'download': { + case 'downloadFile': { Action.downloadFile(object.id, route, U.Object.isImageLayout(object.layout)); break; }; From b4d413b5929ec88fdc3913867ceca6cada11a1e8 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 13 Sep 2024 19:16:15 +0200 Subject: [PATCH 03/54] fixes --- src/scss/block/chat/form.scss | 2 +- src/ts/component/block/chat/buttons.tsx | 6 ++++-- src/ts/component/block/chat/form.tsx | 3 +-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/scss/block/chat/form.scss b/src/scss/block/chat/form.scss index 914114f741..acc71c6fd7 100644 --- a/src/scss/block/chat/form.scss +++ b/src/scss/block/chat/form.scss @@ -34,7 +34,7 @@ .buttons { display: flex; gap: 0px 8px; padding: 10px 16px 0px 16px; margin-left: -4px; } .buttons { .icon { width: 28px; height: 28px; background-size: 20px 20px; margin: 0px; border-radius: 6px; transition: none; } - .icon:hover { background-color: var(--color-shape-highlight-medium); } + .icon:hover, .icon.hover { background-color: var(--color-shape-highlight-medium); } /* Chat buttons */ .icon.plus { background-image: url('~img/icon/chat/buttons/plus.svg'); } diff --git a/src/ts/component/block/chat/buttons.tsx b/src/ts/component/block/chat/buttons.tsx index 128da82af8..181bae1800 100644 --- a/src/ts/component/block/chat/buttons.tsx +++ b/src/ts/component/block/chat/buttons.tsx @@ -83,7 +83,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component { raf(() => { S.Menu.open('blockMention', { + element: `#button-${blockId}-${I.ChatButton.Mention}`, ...this.caretMenuParam(), data: { rootId, @@ -898,12 +899,10 @@ const ChatForm = observer(class ChatForm extends React.Component { }; caretMenuParam () { - const { blockId } = this.props; const win = $(window); const rect = U.Common.getSelectionRect(); return { - element: `#block-${blockId} #messageBox`, className: 'fixed', recalcRect: () => { const rect = U.Common.getSelectionRect(); From 9396a56a9f90b7dc2f77fbb5931e83670b3eaf81 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 13 Sep 2024 19:17:01 +0200 Subject: [PATCH 04/54] fix buttons --- src/ts/component/block/chat/buttons.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ts/component/block/chat/buttons.tsx b/src/ts/component/block/chat/buttons.tsx index 181bae1800..d9e1d96c29 100644 --- a/src/ts/component/block/chat/buttons.tsx +++ b/src/ts/component/block/chat/buttons.tsx @@ -121,7 +121,8 @@ const ChatButtons = observer(class ChatButtons extends React.Component Date: Fri, 13 Sep 2024 22:19:18 +0200 Subject: [PATCH 05/54] fix crash --- src/ts/component/form/editable.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ts/component/form/editable.tsx b/src/ts/component/form/editable.tsx index a4a630356c..013a5aab85 100644 --- a/src/ts/component/form/editable.tsx +++ b/src/ts/component/form/editable.tsx @@ -171,6 +171,10 @@ class Editable extends React.Component { }; raf(() => { + if (!this._isMounted) { + return; + }; + const el = $(this.refEditable).get(0); el.focus({ preventScroll: true }); From 07118d0d9dd274b9d44324471fbaf4cd9c483467 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Sat, 14 Sep 2024 20:31:24 +0200 Subject: [PATCH 06/54] file names in audio --- src/ts/component/block/chat/attachment/index.tsx | 2 +- src/ts/component/block/media/audio.tsx | 6 +++--- src/ts/component/util/object/cover.tsx | 4 ++-- src/ts/lib/util/file.ts | 2 ++ 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/ts/component/block/chat/attachment/index.tsx b/src/ts/component/block/chat/attachment/index.tsx index d2e0658c14..b2e73c79d0 100644 --- a/src/ts/component/block/chat/attachment/index.tsx +++ b/src/ts/component/block/chat/attachment/index.tsx @@ -198,7 +198,7 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component; diff --git a/src/ts/component/block/media/audio.tsx b/src/ts/component/block/media/audio.tsx index 01aca01e31..fb084a809b 100644 --- a/src/ts/component/block/media/audio.tsx +++ b/src/ts/component/block/media/audio.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import $ from 'jquery'; import { observer } from 'mobx-react'; import { InputWithFile, Loader, Error, MediaAudio, Icon } from 'Component'; -import { I, S, J, translate, focus, keyboard, Action } from 'Lib'; +import { I, S, J, U, translate, focus, keyboard, Action } from 'Lib'; const BlockAudio = observer(class BlockAudio extends React.Component { @@ -26,7 +26,7 @@ const BlockAudio = observer(class BlockAudio extends React.Component { case I.ObjectLayout.Audio: { cn.push('coverAudio'); - content = ; + content = ; break; }; diff --git a/src/ts/lib/util/file.ts b/src/ts/lib/util/file.ts index 4ffd504be5..1fdee72c0b 100644 --- a/src/ts/lib/util/file.ts +++ b/src/ts/lib/util/file.ts @@ -175,6 +175,8 @@ class UtilFile { const name = String(object.name || ''); const fileExt = String(object.fileExt || ''); + console.log(object); + if (!fileExt || new RegExp(`\\.${U.Common.regexEscape(fileExt)}$`).test(name)) { return name; }; From a49f4d5119e5fa948fb6439865df22354be607aa Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Sun, 15 Sep 2024 11:07:36 +0200 Subject: [PATCH 07/54] add limits --- src/json/constant.ts | 13 +++-- src/ts/component/block/chat/buttons.tsx | 6 +-- src/ts/component/block/chat/form.tsx | 50 ++++++++++++------- src/ts/component/block/chat/message/index.tsx | 27 ++++++++-- src/ts/lib/util/file.ts | 2 - 5 files changed, 67 insertions(+), 31 deletions(-) diff --git a/src/json/constant.ts b/src/json/constant.ts index 4d5b5d89d8..5d2a7deeb4 100644 --- a/src/json/constant.ts +++ b/src/json/constant.ts @@ -39,10 +39,15 @@ export default { graphDepth: 5, chat: { - messages: 100, - attachments: 10, - mentions: 10, - text: 2000, + messages: 100, + attachments: 10, + files: 10, + mentions: 10, + text: 2000, + reactions: { + self: 10, + all: 20, + }, } }, diff --git a/src/ts/component/block/chat/buttons.tsx b/src/ts/component/block/chat/buttons.tsx index d9e1d96c29..23da6bc149 100644 --- a/src/ts/component/block/chat/buttons.tsx +++ b/src/ts/component/block/chat/buttons.tsx @@ -16,7 +16,7 @@ interface Props extends I.BlockComponent { onMenuClose: () => void; onMention: () => void; getObjectFromPath: (path: string) => void; - onAddFiles: (files: any, callBack?: () => void) => void; + addFiles: (files: any, callBack?: () => void) => void; removeBookmark: (url: string) => void; }; @@ -231,7 +231,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component { Action.openFileDialog([], paths => { if (paths.length) { - onAddFiles([ getObjectFromPath(paths[0]) ]); + addFiles([ getObjectFromPath(paths[0]) ]); }; }); }; diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx index df874c8432..db42d08b01 100644 --- a/src/ts/component/block/chat/form.tsx +++ b/src/ts/component/block/chat/form.tsx @@ -56,7 +56,7 @@ const ChatForm = observer(class ChatForm extends React.Component { this.onDragOver = this.onDragOver.bind(this); this.onDragLeave = this.onDragLeave.bind(this); this.onDrop = this.onDrop.bind(this); - this.onAddFiles = this.onAddFiles.bind(this); + this.addFiles = this.addFiles.bind(this); this.onSend = this.onSend.bind(this); this.onEdit = this.onEdit.bind(this); this.onEditClear = this.onEditClear.bind(this); @@ -158,7 +158,7 @@ const ChatForm = observer(class ChatForm extends React.Component { onChatButtonSelect={this.onChatButtonSelect} onTextButtonToggle={this.onTextButtonToggle} getObjectFromPath={this.getObjectFromPath} - onAddFiles={this.onAddFiles} + addFiles={this.addFiles} onMenuClose={this.onMenuClose} removeBookmark={this.removeBookmark} /> @@ -180,14 +180,14 @@ const ChatForm = observer(class ChatForm extends React.Component { if (storage) { const text = String(storage.text || ''); const marks = storage.marks || []; - const attachments = storage.attachments || []; + const attachments = this.checkLimit('attachments', storage.attachments || []); const length = text.length; this.marks = marks; this.updateMarkup(text, length, length); if (attachments) { - this.setState({ attachments }); + this.setAttachments(attachments); }; }; }; @@ -439,7 +439,7 @@ const ChatForm = observer(class ChatForm extends React.Component { }; if (list.length) { - this.setState({ files: files.concat(list) }); + this.addFiles(list); }; }; @@ -477,18 +477,20 @@ const ChatForm = observer(class ChatForm extends React.Component { node.removeClass('isDraggingOver'); keyboard.disableCommonDrop(true); - this.onAddFiles(list, scrollToBottom); + this.addFiles(list, scrollToBottom); keyboard.disableCommonDrop(false); }; - onAddFiles (list: any[], callBack?: () => void) { - const { files } = this.state; + addFiles (list: any[], callBack?: () => void) { + this.setFiles(list.concat(this.state.files), callBack); + }; - this.setState({ files: files.concat(list) }, () => { - if (callBack) { - callBack(); - }; - }); + setAttachments (list: any[], callBack?: () => void) { + this.setState({ attachments: this.checkLimit('attachments', list) }, callBack); + }; + + setFiles (list: any[], callBack?: () => void) { + this.setState({ files: this.checkLimit('files', list) }, callBack); }; onSend () { @@ -610,7 +612,7 @@ const ChatForm = observer(class ChatForm extends React.Component { this.replyingId = ''; this.updateMarkup(text, l, l); - this.setState({ attachments }, () => { + this.setAttachments(attachments, () => { this.refEditable.setRange(this.range); }); }; @@ -697,7 +699,7 @@ const ChatForm = observer(class ChatForm extends React.Component { switch (type) { case I.ChatButton.Object: { - this.setState({ attachments: attachments.concat(item) }, () => scrollToBottom()); + this.setAttachments([ item ].concat(attachments), () => scrollToBottom()); break; }; @@ -742,7 +744,7 @@ const ChatForm = observer(class ChatForm extends React.Component { object.isTmp = true; attachments.unshift(object); - this.setState({ attachments }); + this.setAttachments(attachments); }); break; }; @@ -814,7 +816,7 @@ const ChatForm = observer(class ChatForm extends React.Component { isTmp: true, }); - this.setState({ files }); + this.setFiles(files); }; C.LinkPreview(url, (message: any) => { @@ -839,7 +841,7 @@ const ChatForm = observer(class ChatForm extends React.Component { }); if (files.length != filtered.length) { - this.setState({ files: filtered }); + this.setFiles(filtered); }; }; @@ -848,7 +850,7 @@ const ChatForm = observer(class ChatForm extends React.Component { const filtered = files.filter(it => U.Object.isBookmarkLayout(it.layout) && (it.source != url)); if (files.length != filtered.length) { - this.setState({ files: filtered }); + this.setFiles(filtered); }; }; @@ -932,6 +934,16 @@ const ChatForm = observer(class ChatForm extends React.Component { return this.range ? this.range.to - this.range.from > 0 : false; }; + checkLimit (type: string, list: any[]) { + const limit = J.Constant.limit.chat; + + if (list.length > limit[type]) { + list = list.slice(0, limit[type]); + }; + + return list; + }; + updateMarkup (value: string, from: number, to: number) { this.range = { from, to }; this.refEditable.setValue(Mark.toHtml(value, this.marks)); diff --git a/src/ts/component/block/chat/message/index.tsx b/src/ts/component/block/chat/message/index.tsx index c0669aafcd..c863100f25 100644 --- a/src/ts/component/block/chat/message/index.tsx +++ b/src/ts/component/block/chat/message/index.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import $ from 'jquery'; import { observer } from 'mobx-react'; import { IconObject, Icon, ObjectName, Label } from 'Component'; -import { I, S, U, C, Mark, translate, Preview } from 'Lib'; +import { I, S, U, C, J, Mark, translate, Preview } from 'Lib'; import Attachment from '../attachment'; @@ -46,9 +46,12 @@ const ChatMessage = observer(class ChatMessage extends React.Component { const hasAttachments = attachments.length; const isSelf = creator == account.id; const attachmentsLayout = this.getAttachmentsClass(); + const canAddReaction = this.canAddReaction(); const cn = [ 'message' ]; const ca = [ 'attachments', attachmentsLayout ]; + console.log('canAddReaction', canAddReaction); + let reply = null; if (replyToMessageId) { const replyToMessage = S.Chat.getReply(rootId, replyToMessageId); @@ -172,7 +175,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component { {reactions.map((item: any, i: number) => ( ))} - {!readonly ? ( + {!readonly && canAddReaction ? ( ) : ''} @@ -185,7 +188,7 @@ const ChatMessage = observer(class ChatMessage extends React.Component { {!readonly ? (
- {!hasReactions ? : ''} + {!hasReactions && canAddReaction ? : ''}
@@ -316,6 +319,24 @@ const ChatMessage = observer(class ChatMessage extends React.Component { return c.join(' '); }; + canAddReaction (): boolean { + const { account } = S.Auth; + const { rootId, id } = this.props; + const message = S.Chat.getMessage(rootId, id); + const reactions = message.reactions || []; + const { self, all } = J.Constant.limit.chat.reactions; + + let cntSelf = 0; + + reactions.forEach(it => { + if (it.authors.includes(account.id)) { + cntSelf++; + }; + }); + + return (cntSelf < self) && (reactions.length < all); + }; + }); export default ChatMessage; \ No newline at end of file diff --git a/src/ts/lib/util/file.ts b/src/ts/lib/util/file.ts index 1fdee72c0b..4ffd504be5 100644 --- a/src/ts/lib/util/file.ts +++ b/src/ts/lib/util/file.ts @@ -175,8 +175,6 @@ class UtilFile { const name = String(object.name || ''); const fileExt = String(object.fileExt || ''); - console.log(object); - if (!fileExt || new RegExp(`\\.${U.Common.regexEscape(fileExt)}$`).test(name)) { return name; }; From 02b7d24a0e1af87ef313e03d7529f60daa0728b8 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Sun, 15 Sep 2024 11:23:01 +0200 Subject: [PATCH 08/54] remove debug --- src/ts/component/block/chat/message/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/ts/component/block/chat/message/index.tsx b/src/ts/component/block/chat/message/index.tsx index c863100f25..23cec8549f 100644 --- a/src/ts/component/block/chat/message/index.tsx +++ b/src/ts/component/block/chat/message/index.tsx @@ -50,8 +50,6 @@ const ChatMessage = observer(class ChatMessage extends React.Component { const cn = [ 'message' ]; const ca = [ 'attachments', attachmentsLayout ]; - console.log('canAddReaction', canAddReaction); - let reply = null; if (replyToMessageId) { const replyToMessage = S.Chat.getReply(rootId, replyToMessageId); From 68e0421b1922c60cc2e04cdbb533443b7e640335 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Sun, 15 Sep 2024 11:44:50 +0200 Subject: [PATCH 09/54] fix double loading --- src/ts/component/block/chat.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/ts/component/block/chat.tsx b/src/ts/component/block/chat.tsx index e97f125e09..9df880b244 100644 --- a/src/ts/component/block/chat.tsx +++ b/src/ts/component/block/chat.tsx @@ -21,8 +21,8 @@ const BlockChat = observer(class BlockChat extends React.Component this.forceUpdate()); }; - if (!U.Common.compareJSON(replies, this.replies)) { + if (this.replies && !U.Common.compareJSON(replies, this.replies)) { this.replies = replies; this.loadReplies(() => this.forceUpdate()); }; @@ -274,8 +274,6 @@ const BlockChat = observer(class BlockChat extends React.Component { if (!message.error.code) { message.messages.forEach(it => S.Chat.setReply(rootId, it)); From 6132edaf9573efac7d5a12bc829761d1fcef1e37 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Sun, 15 Sep 2024 12:22:12 +0200 Subject: [PATCH 10/54] JS-5335: fix --- src/ts/component/menu/block/link.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/ts/component/menu/block/link.tsx b/src/ts/component/menu/block/link.tsx index 564accd683..3d38af49e3 100644 --- a/src/ts/component/menu/block/link.tsx +++ b/src/ts/component/menu/block/link.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import $ from 'jquery'; import { observer } from 'mobx-react'; import { MenuItemVertical, Filter, ObjectName } from 'Component'; -import { I, S, U, J, keyboard, focus, translate, analytics } from 'Lib'; +import { I, S, U, J, keyboard, focus, translate, analytics, Preview } from 'Lib'; import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized'; interface State { @@ -236,6 +236,7 @@ const MenuBlockLink = observer(class MenuBlockLink extends React.Component Date: Sun, 15 Sep 2024 21:01:43 +0200 Subject: [PATCH 11/54] JS-5347: icons refactoring --- src/scss/block/dataview.scss | 9 ++------- src/scss/block/embed.scss | 4 ++-- src/scss/component/icon.scss | 2 ++ src/scss/menu/smile.scss | 5 +---- src/scss/page/main/history.scss | 3 +-- src/scss/popup/settings.scss | 2 +- src/ts/component/block/dataview/controls.tsx | 4 ++-- src/ts/component/block/dataview/head.tsx | 2 +- src/ts/component/block/embed.tsx | 2 +- src/ts/component/form/phrase.tsx | 4 ++-- src/ts/component/menu/block/link.tsx | 2 +- src/ts/component/page/main/history/right.tsx | 2 +- 12 files changed, 17 insertions(+), 24 deletions(-) diff --git a/src/scss/block/dataview.scss b/src/scss/block/dataview.scss index c46964ef8f..07bf6621d3 100644 --- a/src/scss/block/dataview.scss +++ b/src/scss/block/dataview.scss @@ -64,10 +64,7 @@ .dataviewHead { display: flex; flex-direction: row; align-items: center; gap: 0px 2px; width: 100%; color: var(--color-text-primary); } .dataviewHead { - .icon.source { - width: 28px; height: 28px; background-size: 24px; background-image: url('~img/icon/dataview/button/source0.svg'); opacity: 0; - flex-shrink: 0; - } + .icon.source { background-image: url('~img/icon/dataview/button/source0.svg'); opacity: 0; flex-shrink: 0; } .icon.source.active { opacity: 1; } .editableWrap { @include text-header2; height: 28px; @include text-overflow-nw; } @@ -124,9 +121,7 @@ } } - .icon { position: relative; width: 28px; height: 28px; background-size: 20px; border-radius: 6px; transition: $transitionAllCommon; } - .icon:hover, .icon.hover { background-color: var(--color-shape-highlight-medium); } - + .icon { position: relative; transition: $transitionAllCommon; } .icon.btn-filter { background-image: url('~img/icon/dataview/button/filter0.svg'); } .icon.btn-filter.on { background-image: url('~img/icon/dataview/button/filter1.svg'); } .icon.btn-sort { background-image: url('~img/icon/dataview/button/sort0.svg'); } diff --git a/src/scss/block/embed.scss b/src/scss/block/embed.scss index 72b24627b6..2b4653141c 100644 --- a/src/scss/block/embed.scss +++ b/src/scss/block/embed.scss @@ -89,8 +89,8 @@ } .icon.source { - position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; opacity: 0; border-radius: 4px; - background-color: rgba(37, 37, 37, 0.35); background-image: url('~img/icon/block/edit.svg'); transition: $transitionAllCommon; + position: absolute; top: 10px; right: 10px; opacity: 0; border-radius: 6px; background-color: rgba(37, 37, 37, 0.35); + background-image: url('~img/icon/block/edit.svg'); transition: $transitionAllCommon; } .icon.resize { diff --git a/src/scss/component/icon.scss b/src/scss/component/icon.scss index 54c052f8a5..9e9dedcf20 100644 --- a/src/scss/component/icon.scss +++ b/src/scss/component/icon.scss @@ -4,6 +4,8 @@ display: inline-block; vertical-align: middle; background-size: 100% 100%; background-repeat: no-repeat; background-position: center center; transition: $transitionAllCommon; position: relative; } +.icon.withBackground { width: 28px !important; height: 28px !important; background-size: 20px !important; border-radius: 6px; } +.icon.withBackground:hover, .icon.withBackground.hover { background-color: var(--color-shape-highlight-medium) !important; }; .arrow { background-position: center center; transition: $transitionAllCommon; background-repeat: no-repeat; background-size: 100% 100%; } diff --git a/src/scss/menu/smile.scss b/src/scss/menu/smile.scss index 5de2fbc2de..6db9c0dd1e 100644 --- a/src/scss/menu/smile.scss +++ b/src/scss/menu/smile.scss @@ -115,10 +115,7 @@ .dropzone.isDraggingOver { background: var(--color-system-drop-zone); } .dropzone { - .icon.coverUpload { - width: 28px; height: 28px; background-image: url('~img/icon/cover/upload.svg'); - display: block; - } + .icon.coverUpload { width: 28px; height: 28px; background-image: url('~img/icon/cover/upload.svg'); display: block; } .label { span { color: var(--color-text-secondary); } } diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index c6c1b487e5..cdc2ccea52 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -21,8 +21,7 @@ } > .head { .name { @include text-overflow-nw; } - .icon.close { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; background-image: url('~img/icon/close.svg'); } - .icon.close:hover { background-color: var(--color-shape-highlight-medium); } + .icon.close { background-image: url('~img/icon/close.svg'); } } > .scroll { display: flex; flex-direction: column; gap: 12px 0px; overflow-y: auto; flex-grow: 1; padding: 0px 12px 12px 12px; } diff --git a/src/scss/popup/settings.scss b/src/scss/popup/settings.scss index bb0caaa1d4..cd1184d097 100644 --- a/src/scss/popup/settings.scss +++ b/src/scss/popup/settings.scss @@ -149,7 +149,7 @@ .word { @include text-small; font-weight: 500; margin: 0; } .bg { filter: blur(8px); opacity: 0.5; } - .icon { width: 28px; height: 28px; background-size: 20px; margin: 0px; top: 12px; right: 12px; border-radius: 6px; z-index: 1; } + .icon { margin: 0px; top: 12px; right: 12px; z-index: 1; } .icon.hide { background-image: url('~img/icon/popup/settings/phraseToggle0.svg'); } .icon.see { background-image: url('~img/icon/popup/settings/phraseToggle1.svg'); background-color: var(--color-shape-tertiary); } } diff --git a/src/ts/component/block/dataview/controls.tsx b/src/ts/component/block/dataview/controls.tsx index adb9a66052..81ad125cc4 100644 --- a/src/ts/component/block/dataview/controls.tsx +++ b/src/ts/component/block/dataview/controls.tsx @@ -76,7 +76,7 @@ const Controls = observer(class Controls extends React.Component { const ButtonItem = (item: any) => { const elementId = `button-${block.id}-${item.id}`; - const cn = [ `btn-${item.id}` ]; + const cn = [ `btn-${item.id}`, 'withBackground' ]; if (item.on) { cn.push('on'); @@ -152,7 +152,7 @@ const Controls = observer(class Controls extends React.Component { this.refFilter = ref} placeholder={translate('blockDataviewSearch')} - icon="search" + icon="search withBackground" tooltip={translate('commonSearch')} tooltipCaption={`${cmd} + F`} onChange={onFilterChange} diff --git a/src/ts/component/block/dataview/head.tsx b/src/ts/component/block/dataview/head.tsx index beff06b95d..50963aa5ad 100644 --- a/src/ts/component/block/dataview/head.tsx +++ b/src/ts/component/block/dataview/head.tsx @@ -51,7 +51,7 @@ const Head = observer(class Head extends React.Component let icon = null; if (targetObjectId && !isCollection) { - icon = ; + icon = ; } else { icon =
; }; diff --git a/src/ts/component/block/embed.tsx b/src/ts/component/block/embed.tsx index f91cc97bfe..22170c9d8f 100644 --- a/src/ts/component/block/embed.tsx +++ b/src/ts/component/block/embed.tsx @@ -112,7 +112,7 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component ); } else { - source = ; + source = ; placeholder = U.Common.sprintf(translate('blockEmbedPlaceholder'), menuItem.name); empty = !text ? U.Common.sprintf(translate('blockEmbedEmpty'), menuItem.name) : ''; diff --git a/src/ts/component/form/phrase.tsx b/src/ts/component/form/phrase.tsx index 7021aabc0b..e62e8fd8ef 100644 --- a/src/ts/component/form/phrase.tsx +++ b/src/ts/component/form/phrase.tsx @@ -128,8 +128,8 @@ class Phrase extends React.Component {
{placeholderEl} - - + + ); }; diff --git a/src/ts/component/menu/block/link.tsx b/src/ts/component/menu/block/link.tsx index 3d38af49e3..11236af0e6 100644 --- a/src/ts/component/menu/block/link.tsx +++ b/src/ts/component/menu/block/link.tsx @@ -427,4 +427,4 @@ const MenuBlockLink = observer(class MenuBlockLink extends React.Component
{translate('commonVersionHistory')}
- +
Date: Mon, 16 Sep 2024 08:49:56 +0200 Subject: [PATCH 12/54] JS-5363: fix --- src/ts/component/menu/object.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ts/component/menu/object.tsx b/src/ts/component/menu/object.tsx index 8f9be6e33f..70befe9e8d 100644 --- a/src/ts/component/menu/object.tsx +++ b/src/ts/component/menu/object.tsx @@ -335,6 +335,7 @@ class MenuObject extends React.Component { onClick: (details: any) => { C.ObjectCreate({ ...details, layout: I.ObjectLayout.Collection }, [], '', collectionType?.uniqueKey, S.Common.space, message => { Action.addToCollection(message.objectId, [ rootId ]); + U.Object.openAuto(message.details); }); }, }, From 4e7d5353270b0ca6c9c18485d777abe506235d87 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 16 Sep 2024 08:51:46 +0200 Subject: [PATCH 13/54] JS-5363: fix --- src/ts/component/menu/dataview/context.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/component/menu/dataview/context.tsx b/src/ts/component/menu/dataview/context.tsx index 064b5c5189..f69097e444 100644 --- a/src/ts/component/menu/dataview/context.tsx +++ b/src/ts/component/menu/dataview/context.tsx @@ -316,7 +316,7 @@ class MenuContext extends React.Component { onClick: (details: any) => { C.ObjectCreate({ ...details, layout: I.ObjectLayout.Collection }, [], '', collectionType?.uniqueKey, S.Common.space, message => { Action.addToCollection(message.objectId, objectIds); - U.Object.openConfig(message.details); + U.Object.openAuto(message.details); }); }, }, From 1eeea83fb9964cf4508565e76781a8e8075e3ec0 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 16 Sep 2024 10:17:54 +0200 Subject: [PATCH 14/54] JS-5365: All content update --- extension/scss/common.scss | 10 +- src/json/text.json | 3 +- src/scss/block/chat.scss | 6 +- src/scss/block/common.scss | 54 +++---- src/scss/common.scss | 4 +- src/scss/component/common.scss | 62 +++---- src/scss/component/media/common.scss | 4 +- src/scss/component/preview/common.scss | 4 +- src/scss/component/sidebar.scss | 215 +------------------------ src/scss/component/sidebar/object.scss | 106 ++++++++++++ src/scss/component/sidebar/widget.scss | 111 +++++++++++++ src/scss/form/common.scss | 24 +-- src/scss/list/common.scss | 6 +- src/scss/menu/common.scss | 84 +++++----- src/scss/page/common.scss | 36 ++--- src/scss/popup/common.scss | 38 ++--- src/scss/theme/dark/common.scss | 10 +- src/scss/widget/common.scss | 8 +- src/scss/widget/view/common.scss | 10 +- src/ts/component/sidebar/index.tsx | 3 +- src/ts/component/sidebar/object.tsx | 152 ++++++++--------- src/ts/component/widget/buttons.tsx | 2 +- src/ts/lib/sidebar.ts | 13 +- 23 files changed, 475 insertions(+), 490 deletions(-) create mode 100644 src/scss/component/sidebar/object.scss create mode 100644 src/scss/component/sidebar/widget.scss diff --git a/extension/scss/common.scss b/extension/scss/common.scss index 69b33dc3cc..7ffe90835a 100644 --- a/extension/scss/common.scss +++ b/extension/scss/common.scss @@ -1,6 +1,6 @@ html.anytypeWebclipper-iframe, html.anytypeWebclipper-popup { - @import "~scss/font.scss"; + @import "~scss/font"; @import "~scss/_mixins"; /* Text */ @@ -98,10 +98,10 @@ html.anytypeWebclipper-popup { --line-height-description: 26px; --letter-spacing-description: -0.28px; - @import "~scss/common.scss"; - @import "~scss/form/common.scss"; - @import "~scss/component/common.scss"; - @import "~scss/menu/common.scss"; + @import "~scss/common"; + @import "~scss/form/common"; + @import "~scss/component/common"; + @import "~scss/menu/common"; @import "~scss/block/common"; * { box-sizing: border-box; border: 0px; margin: 0px; padding: 0px; } diff --git a/src/json/text.json b/src/json/text.json index bbd072d8b3..25f579929f 100644 --- a/src/json/text.json +++ b/src/json/text.json @@ -161,6 +161,7 @@ "commonMembers": "Members", "commonEntrySpace": "My First Space", "commonNothingFound": "Nothing found", + "commonAllContent": "All content", "pluralDay": "day|days", "pluralObject": "Object|Objects", @@ -1748,8 +1749,6 @@ "widgetEmptyLabelCreate": "There are no Objects here,
create the first one", "widgetShowAll": "See all Objects", - "widgetButtonAllContent": "All content", - "phrasePlaceholder": "Please enter your Key", "navigationAccount": "Spaces", diff --git a/src/scss/block/chat.scss b/src/scss/block/chat.scss index 68d7b00240..09ed7dad38 100644 --- a/src/scss/block/chat.scss +++ b/src/scss/block/chat.scss @@ -30,8 +30,8 @@ > .date.hide { opacity: 0; } } - @import "./chat/attachment.scss"; - @import "./chat/message.scss"; - @import "./chat/form.scss"; + @import "./chat/attachment"; + @import "./chat/message"; + @import "./chat/form"; } } diff --git a/src/scss/block/common.scss b/src/scss/block/common.scss index 3c7e4873bb..f2b0eacdc8 100644 --- a/src/scss/block/common.scss +++ b/src/scss/block/common.scss @@ -108,30 +108,30 @@ .block > .wrapMenu > .icon.dnd { opacity: 1; } } -@import "./markup.scss"; -@import "./bookmark.scss"; -@import "./cover.scss"; -@import "./dataview.scss"; -@import "./dataview/cell.scss"; -@import "./dataview/view/board.scss"; -@import "./dataview/view/common.scss"; -@import "./dataview/view/gallery.scss"; -@import "./dataview/view/grid.scss"; -@import "./dataview/view/list.scss"; -@import "./dataview/view/calendar.scss"; -@import "./dataview/view/graph.scss"; -@import "./div.scss"; -@import "./featured.scss"; -@import "./file.scss"; -@import "./iconPage.scss"; -@import "./iconUser.scss"; -@import "./layout.scss"; -@import "./link.scss"; -@import "./media.scss"; -@import "./relation.scss"; -@import "./table.scss"; -@import "./tableOfContents.scss"; -@import "./text.scss"; -@import "./type.scss"; -@import "./embed.scss"; -@import "./chat.scss"; \ No newline at end of file +@import "./markup"; +@import "./bookmark"; +@import "./cover"; +@import "./dataview"; +@import "./dataview/cell"; +@import "./dataview/view/board"; +@import "./dataview/view/common"; +@import "./dataview/view/gallery"; +@import "./dataview/view/grid"; +@import "./dataview/view/list"; +@import "./dataview/view/calendar"; +@import "./dataview/view/graph"; +@import "./div"; +@import "./featured"; +@import "./file"; +@import "./iconPage"; +@import "./iconUser"; +@import "./layout"; +@import "./link"; +@import "./media"; +@import "./relation"; +@import "./table"; +@import "./tableOfContents"; +@import "./text"; +@import "./type"; +@import "./embed"; +@import "./chat"; \ No newline at end of file diff --git a/src/scss/common.scss b/src/scss/common.scss index 25034449c9..f55b3747cf 100644 --- a/src/scss/common.scss +++ b/src/scss/common.scss @@ -202,5 +202,5 @@ a { color: var(--color-text-primary); } .icon.download { display: none; } } -@import "scss/debug.scss"; -@import "scss/font.scss"; \ No newline at end of file +@import "scss/debug"; +@import "scss/font"; \ No newline at end of file diff --git a/src/scss/component/common.scss b/src/scss/component/common.scss index 38614ab354..0f179ea555 100644 --- a/src/scss/component/common.scss +++ b/src/scss/component/common.scss @@ -1,32 +1,32 @@ -@import "./cover.scss"; -@import "./deleted.scss"; -@import "./dragbox.scss"; -@import "./dragLayer.scss"; -@import "./dotIndicator.scss"; -@import "./editor.scss"; -@import "./emptySearch.scss"; -@import "./error.scss"; -@import "./footer.scss"; -@import "./frame.scss"; -@import "./header.scss"; -@import "./headSimple.scss"; -@import "./icon.scss"; -@import "./iconObject.scss"; -@import "./loader.scss"; -@import "./pager.scss"; -@import "./progress.scss"; -@import "./selection.scss"; -@import "./sidebar.scss"; -@import "./vault.scss"; -@import "./sync.scss"; -@import "./tag.scss"; -@import "./title.scss"; -@import "./toast.scss"; -@import "./tooltip.scss"; -@import "./navigation.scss"; -@import "./hightlight.scss"; -@import "./progressBar.scss"; -@import "./share.scss"; +@import "./cover"; +@import "./deleted"; +@import "./dragbox"; +@import "./dragLayer"; +@import "./dotIndicator"; +@import "./editor"; +@import "./emptySearch"; +@import "./error"; +@import "./footer"; +@import "./frame"; +@import "./header"; +@import "./headSimple"; +@import "./icon"; +@import "./iconObject"; +@import "./loader"; +@import "./pager"; +@import "./progress"; +@import "./selection"; +@import "./sidebar"; +@import "./vault"; +@import "./sync"; +@import "./tag"; +@import "./title"; +@import "./toast"; +@import "./tooltip"; +@import "./navigation"; +@import "./hightlight"; +@import "./progressBar"; +@import "./share"; -@import "./preview/common.scss"; -@import "./media/common.scss"; \ No newline at end of file +@import "./preview/common"; +@import "./media/common"; \ No newline at end of file diff --git a/src/scss/component/media/common.scss b/src/scss/component/media/common.scss index bb09caaa48..2578eff67c 100644 --- a/src/scss/component/media/common.scss +++ b/src/scss/component/media/common.scss @@ -1,2 +1,2 @@ -@import "./audio.scss"; -@import "./video.scss"; \ No newline at end of file +@import "./audio"; +@import "./video"; \ No newline at end of file diff --git a/src/scss/component/preview/common.scss b/src/scss/component/preview/common.scss index ff07a599d3..ae9346e7e6 100644 --- a/src/scss/component/preview/common.scss +++ b/src/scss/component/preview/common.scss @@ -47,5 +47,5 @@ .featured { @include text-very-small; color: var(--color-control-active); } } -@import "./link.scss"; -@import "./object.scss"; \ No newline at end of file +@import "./link"; +@import "./object"; \ No newline at end of file diff --git a/src/scss/component/sidebar.scss b/src/scss/component/sidebar.scss index 7da9d0cdbc..17837c9492 100644 --- a/src/scss/component/sidebar.scss +++ b/src/scss/component/sidebar.scss @@ -15,222 +15,17 @@ #sidebarToggle.sidebarAnimation { transition: left $transitionSidebarTime linear; } #sidebarToggle:hover, #sidebarToggle.hover { background-color: var(--color-shape-highlight-medium); background-image: url('~img/icon/widget/toggle1.svg'); } -.sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; left: 0px; height: 100%; display: flex; } +.sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; left: 0px; height: 100%; } .sidebar.anim { transition-property: width; transition-duration: $transitionSidebarTime; transition-timing-function: linear; } .sidebar.withVault { left: $vaultWidthCollapsed; } .sidebar.isClosed { left: 0px !important; } .sidebar { - > #containerWidget { - height: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0; - background-color: var(--color-shape-tertiary); - } - > #containerWidget { - > .head { - display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px; - gap: 0px 8px; overflow: hidden; - } - > .head { - .status { - @include text-small; font-weight: 500; @include text-overflow-nw; text-align: center; color: var(--color-text-secondary); - display: inline-block; -webkit-app-region: no-drag; - } - - .icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; cursor: default; -webkit-app-region: no-drag; } - .icon:hover { background-color: var(--color-shape-highlight-medium); } - .icon.toggle { background-image: url('~img/icon/widget/toggle0.svg'); } - .icon.toggle:hover { background-image: url('~img/icon/widget/toggle1.svg'); } - } - - > .body { height: calc(100% - 52px); padding: 0px 12px 12px 12px; position: relative; flex-grow: 1; overflow: auto; overscroll-behavior: none; } - > .body { - @keyframes shake1 { - 0% { transform: rotate(-0.5deg); } - 100% { transform: rotate(0.5deg); } - } - - @keyframes shake2 { - 0% { transform: rotate(0.5deg); } - 100% { transform: rotate(-0.5deg); } - } - - .list { display: flex; flex-direction: column; gap: 12px 0px; } - .list { - > .buttons { display: flex; justify-content: center; width: 100%; gap: 0px 8px; } - > .buttons { - .button { - box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 100%; min-width: 60px; max-width: 200px; background-color: var(--color-bg-primary); - color: var(--color-text-secondary); font-weight: 400; white-space: nowrap; - } - .button:hover { background-color: var(--color-shape-tertiary); } - - .button.disabled { background: var(--color-shape-tertiary); max-width: 80px; } - .button.grey { - box-shadow: 0px 0px; background: var(--color-shape-highlight-medium); border-radius: 6px; @include text-common; color: var(--color-text-primary); line-height: 26px; width: auto; - padding: 0px 10px; - } - } - - > .dropTarget.firstTarget, - > .dropTarget.lastTarget - { position: relative; } - - > .dropTarget.lastTarget { display: flex; flex-direction: column; gap: 12px 0px; } - - > .dropTarget.firstTarget.isOver, - > .dropTarget.lastTarget.isOver - { box-shadow: 0px 0px !important; } - - > .dropTarget.firstTarget.isOver::before, - > .dropTarget.lastTarget.isOver::before { - content: ""; position: absolute; background: var(--color-system-accent-100); width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 12px; - } - - > .dropTarget.firstTarget.isOver::before { bottom: -7px; } - > .dropTarget.lastTarget.isOver::before { top: -7px; } - - .widget.isEditable.isOver::before { - content: ""; position: absolute; background: var(--color-system-accent-100); height: 2px; width: calc(100% - 24px); border-radius: 2px; - left: 12px; - } - .widget.isEditable.isOver.top::before { top: -7px; } - .widget.isEditable.isOver.bottom::before { bottom: -7px; } - } - - .list.isEditing { - > .buttons { position: sticky; bottom: 0px; left: 0px; padding: 0px 16px; } - - .widget:not(.isEditable) { opacity: 0.5; } - .widget:not(.isEditable) { - .dimmer { cursor: default; } - } - - .widget { - .icon.remove { display: block; } - } - .widget { - .dimmer { display: block; } - } - - .widget.widgetSpace:hover { - .side.left { width: 100%; } - .side.right { display: none; } - } - - .widget.isEditable:nth-child(2n + 1) { animation: shake1 0.2s linear infinite alternate; } - .widget.isEditable:nth-child(2n + 2) { animation: shake2 0.2s linear infinite alternate; } - .widget.isEditable:hover { - .head { - > .buttons { display: flex; } - .iconWrap.options { display: none; } - } - } - - .widget.button { cursor: default; animation: none; } - } - - .list.isListPreview { overflow: hidden; height: 100%; } - } - } - - > #containerObject { - background-color: var(--color-bg-primary); border-right: 1px solid var(--color-shape-secondary); display: flex; flex-direction: column; width: 336px; - } - > #containerObject { - > .head { padding: 12px 0px 0px 0px; display: flex; flex-direction: column; gap: 8px 0px; overflow: hidden; } - > .head { - .title { @include text-paragraph; font-weight: 600; padding: 0px 16px 0px 11px; } - - .sides { display: flex; flex-direction: row; gap: 0px 8px; } - .sides { - .side.left { flex-grow: 1; } - .side.right { flex-shrink: 0; } - .side.right:empty { display: none; } - } - - .sides.sidesSort { padding: 0px 10px 0px 5px; } - .sides.sidesFilter { padding: 0px 16px 0px 11px; } - - .icon.sort { width: 28px; height: 28px; background-size: 20px; background-image: url('~img/icon/store/sort.svg'); border-radius: 6px; } - .icon.sort:hover, .icon.sort.hover { background-color: var(--color-shape-highlight-medium); } - - .select { border: 0px; padding: 4px 20px 4px 6px; font-weight: 500; } - .select { - .clickable { - .icon { display: none; } - } - } - - .filter { padding: 0px 4px; border-radius: 6px; border: 1px solid var(--color-shape-secondary); } - .filter { - .inner { height: 26px; } - .line { display: none; } - } - } - - > .body { flex-grow: 1; overflow: hidden; } - > .body { - .ReactVirtualized__List { padding: 8px 8px 12px 3px; overscroll-behavior: none; } - - .items { height: 100%; } - - .item { padding: 8px; display: flex; flex-direction: row; align-items: center; gap: 0px 12px; position: relative; } - .item { - .iconObject { flex-shrink: 0; border-radius: 6px; } - .iconObject.c48:not(.isTask) { background-color: var(--color-shape-tertiary); } - - .info { width: 100%; display: flex; flex-direction: column; gap: 2px 0px; } - .name { @include text-overflow-nw; width: 100%; } - - .bottomWrap { - display: flex; @include text-overflow-nw; width: 100%; @include text-small; color: var(--color-text-secondary); gap: 0px 6px; - align-items: center; - } - .bottomWrap { - .type { max-width: 40%; @include text-overflow-nw; flex-shrink: 0; } - .descr { position: relative; @include text-overflow-nw; max-width: 100%; } - .descr:empty { display: none; } - .bullet { width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-text-secondary); flex-shrink: 0; display: none; } - } - } - - .item.withDescr { - .bullet { display: block; } - } - - .item.withIcon { - .info { width: calc(100% - 60px); } - } - - .item.isType, .item.isRelation { gap: 0px; } - .item.isType, .item.isRelation { - .info { width: calc(100% - 26px); } - .nameWrap { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; } - .descrWrap { - .type, .descr::before { display: none; } - } - } - - .item.isType.withIcon { - .descrWrap { padding-left: 26px; } - } - .item.isRelation.withIcon { - .descrWrap { padding-left: 28px; } - } - - .item.isFile { - .iconObject { background-color: unset !important; } - } - - .item::before { - content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1; - pointer-events: none; border-radius: 6px; - } - .item:hover::before, .item.active::before { background: var(--color-shape-highlight-medium); } - } - } + @import "./sidebar/widget"; + @import "./sidebar/object"; + - .resize-h { width: 10px; height: 100%; cursor: col-resize; z-index: 2; flex-shrink: 0; position: relative; margin-left: -5px; } + .resize-h { width: 10px; height: 100%; cursor: col-resize; z-index: 2; flex-shrink: 0; position: absolute; right: -5px; top: 0px; } .resize-h { .resize-handle { position: absolute; left: 6px; top: 50%; margin: -16px 0px 0px 0px; transition: $transitionAllCommon; diff --git a/src/scss/component/sidebar/object.scss b/src/scss/component/sidebar/object.scss new file mode 100644 index 0000000000..be6d879482 --- /dev/null +++ b/src/scss/component/sidebar/object.scss @@ -0,0 +1,106 @@ +> #containerObject { width: 100%; height: 100%; overflow: hidden; background-color: var(--color-shape-tertiary); padding: 52px 12px 12px 12px; } +> #containerObject { + > .inner { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--color-bg-primary); border-radius: 12px; } + > .inner { + > .head { display: flex; flex-direction: column; gap: 8px 0px; overflow: hidden; } + > .head { + .titleWrap { + display: flex; flex-direction: row; align-items: center; gap: 0px 8px; width: 100%; padding: 20px 16px 8px 10px; + } + .titleWrap { + .title { @include text-paragraph; font-weight: 600; flex-grow: 1; } + .icon.back { + width: 24px; height: 24px; border-radius: 4px; background-size: 20px; flex-shrink: 0; background-image: url('~img/icon/widget/back.svg'); + } + .icon.back:hover { background-color: var(--color-shape-highlight-medium); } + } + + .sides { display: flex; flex-direction: row; gap: 0px 8px; } + .sides { + .side.left { flex-grow: 1; } + .side.right { flex-shrink: 0; } + .side.right:empty { display: none; } + } + + .sides.sidesSort { padding: 0px 10px; } + .sides.sidesFilter { padding: 0px 16px; } + + .icon.sort { width: 28px; height: 28px; background-size: 20px; background-image: url('~img/icon/store/sort.svg'); border-radius: 6px; } + .icon.sort:hover, .icon.sort.hover { background-color: var(--color-shape-highlight-medium); } + + .select { border: 0px; padding: 4px 20px 4px 6px; font-weight: 500; } + .select { + .clickable { + .icon { display: none; } + } + } + + .filter { padding: 0px 4px; border-radius: 6px; border: 1px solid var(--color-shape-secondary); } + .filter { + .inner { height: 26px; } + .line { display: none; } + } + } + + > .body { flex-grow: 1; overflow: hidden; } + > .body { + .ReactVirtualized__List { padding: 8px; overscroll-behavior: none; } + + .items { height: 100%; } + + .item { padding: 8px; display: flex; flex-direction: row; align-items: center; gap: 0px 12px; position: relative; } + .item { + .iconObject { flex-shrink: 0; border-radius: 6px; } + .iconObject.c48:not(.isTask) { background-color: var(--color-shape-tertiary); } + + .info { width: 100%; display: flex; flex-direction: column; gap: 2px 0px; } + .name { @include text-overflow-nw; width: 100%; } + + .bottomWrap { + display: flex; @include text-overflow-nw; width: 100%; @include text-small; color: var(--color-text-secondary); gap: 0px 6px; + align-items: center; + } + .bottomWrap { + .type { max-width: 40%; @include text-overflow-nw; flex-shrink: 0; } + .descr { position: relative; @include text-overflow-nw; max-width: 100%; } + .descr:empty { display: none; } + .bullet { width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-text-secondary); flex-shrink: 0; display: none; } + } + } + + .item.withDescr { + .bullet { display: block; } + } + + .item.withIcon { + .info { width: calc(100% - 60px); } + } + + .item.isType, .item.isRelation { gap: 0px; } + .item.isType, .item.isRelation { + .info { width: calc(100% - 26px); } + .nameWrap { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; } + .descrWrap { + .type, .descr::before { display: none; } + } + } + + .item.isType.withIcon { + .descrWrap { padding-left: 26px; } + } + .item.isRelation.withIcon { + .descrWrap { padding-left: 28px; } + } + + .item.isFile { + .iconObject { background-color: unset !important; } + } + + .item::before { + content: ""; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(79,79,79,0); z-index: 1; + pointer-events: none; border-radius: 6px; + } + .item:hover::before, .item.active::before { background: var(--color-shape-highlight-medium); } + } + } +} \ No newline at end of file diff --git a/src/scss/component/sidebar/widget.scss b/src/scss/component/sidebar/widget.scss new file mode 100644 index 0000000000..1e4f70866f --- /dev/null +++ b/src/scss/component/sidebar/widget.scss @@ -0,0 +1,111 @@ +> #containerWidget { + height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0; + background-color: var(--color-shape-tertiary); +} +> #containerWidget { + > .head { + display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px; + gap: 0px 8px; overflow: hidden; + } + > .head { + .status { + @include text-small; font-weight: 500; @include text-overflow-nw; text-align: center; color: var(--color-text-secondary); + display: inline-block; -webkit-app-region: no-drag; + } + + .icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; cursor: default; -webkit-app-region: no-drag; } + .icon:hover { background-color: var(--color-shape-highlight-medium); } + .icon.toggle { background-image: url('~img/icon/widget/toggle0.svg'); } + .icon.toggle:hover { background-image: url('~img/icon/widget/toggle1.svg'); } + } + + > .body { height: calc(100% - 52px); padding: 0px 12px 12px 12px; position: relative; flex-grow: 1; overflow: auto; overscroll-behavior: none; } + > .body { + @keyframes shake1 { + 0% { transform: rotate(-0.5deg); } + 100% { transform: rotate(0.5deg); } + } + + @keyframes shake2 { + 0% { transform: rotate(0.5deg); } + 100% { transform: rotate(-0.5deg); } + } + + .list { display: flex; flex-direction: column; gap: 12px 0px; } + .list { + > .buttons { display: flex; justify-content: center; width: 100%; gap: 0px 8px; } + > .buttons { + .button { + box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; width: 100%; min-width: 60px; max-width: 200px; background-color: var(--color-bg-primary); + color: var(--color-text-secondary); font-weight: 400; white-space: nowrap; + } + .button:hover { background-color: var(--color-shape-tertiary); } + + .button.disabled { background: var(--color-shape-tertiary); max-width: 80px; } + .button.grey { + box-shadow: 0px 0px; background: var(--color-shape-highlight-medium); border-radius: 6px; @include text-common; color: var(--color-text-primary); line-height: 26px; width: auto; + padding: 0px 10px; + } + } + + > .dropTarget.firstTarget, + > .dropTarget.lastTarget + { position: relative; } + + > .dropTarget.lastTarget { display: flex; flex-direction: column; gap: 12px 0px; } + + > .dropTarget.firstTarget.isOver, + > .dropTarget.lastTarget.isOver + { box-shadow: 0px 0px !important; } + + > .dropTarget.firstTarget.isOver::before, + > .dropTarget.lastTarget.isOver::before { + content: ""; position: absolute; background: var(--color-system-accent-100); width: calc(100% - 28px); height: 2px; border-radius: 2px; left: 12px; + } + + > .dropTarget.firstTarget.isOver::before { bottom: -7px; } + > .dropTarget.lastTarget.isOver::before { top: -7px; } + + .widget.isEditable.isOver::before { + content: ""; position: absolute; background: var(--color-system-accent-100); height: 2px; width: calc(100% - 24px); border-radius: 2px; + left: 12px; + } + .widget.isEditable.isOver.top::before { top: -7px; } + .widget.isEditable.isOver.bottom::before { bottom: -7px; } + } + + .list.isEditing { + > .buttons { position: sticky; bottom: 0px; left: 0px; padding: 0px 16px; } + + .widget:not(.isEditable) { opacity: 0.5; } + .widget:not(.isEditable) { + .dimmer { cursor: default; } + } + + .widget { + .icon.remove { display: block; } + } + .widget { + .dimmer { display: block; } + } + + .widget.widgetSpace:hover { + .side.left { width: 100%; } + .side.right { display: none; } + } + + .widget.isEditable:nth-child(2n + 1) { animation: shake1 0.2s linear infinite alternate; } + .widget.isEditable:nth-child(2n + 2) { animation: shake2 0.2s linear infinite alternate; } + .widget.isEditable:hover { + .head { + > .buttons { display: flex; } + .iconWrap.options { display: none; } + } + } + + .widget.button { cursor: default; animation: none; } + } + + .list.isListPreview { overflow: hidden; height: 100%; } + } +} \ No newline at end of file diff --git a/src/scss/form/common.scss b/src/scss/form/common.scss index 65321f1592..b3b70f39b8 100644 --- a/src/scss/form/common.scss +++ b/src/scss/form/common.scss @@ -1,12 +1,12 @@ -@import "./button.scss"; -@import "./drag.scss"; -@import "./filter.scss"; -@import "./input.scss"; -@import "./inputWithFile.scss"; -@import "./inputWithLabel.scss"; -@import "./phrase.scss"; -@import "./pin.scss"; -@import "./select.scss"; -@import "./switch.scss"; -@import "./textarea.scss"; -@import "./editable.scss"; \ No newline at end of file +@import "./button"; +@import "./drag"; +@import "./filter"; +@import "./input"; +@import "./inputWithFile"; +@import "./inputWithLabel"; +@import "./phrase"; +@import "./pin"; +@import "./select"; +@import "./switch"; +@import "./textarea"; +@import "./editable"; \ No newline at end of file diff --git a/src/scss/list/common.scss b/src/scss/list/common.scss index f828f49ee3..74e728802e 100644 --- a/src/scss/list/common.scss +++ b/src/scss/list/common.scss @@ -1,3 +1,3 @@ -@import "./object.scss"; -@import "./previewObject.scss"; -@import "./objectManager.scss"; \ No newline at end of file +@import "./object"; +@import "./previewObject"; +@import "./objectManager"; \ No newline at end of file diff --git a/src/scss/menu/common.scss b/src/scss/menu/common.scss index e7a95dad0c..ef5276e856 100644 --- a/src/scss/menu/common.scss +++ b/src/scss/menu/common.scss @@ -259,45 +259,45 @@ html.platformWindows { } } -@import "./icon.scss"; -@import "./button.scss"; -@import "./help.scss"; -@import "./onboarding.scss"; -@import "./relation.scss"; -@import "./select.scss"; -@import "./smile.scss"; -@import "./type.scss"; -@import "./widget.scss"; -@import "./quickCapture.scss"; -@import "./syncStatus.scss"; -@import "./graph.scss"; - -@import "./search/object.scss"; -@import "./search/text.scss"; - -@import "./preview/object.scss"; - -@import "./block/common.scss"; -@import "./block/add.scss"; -@import "./block/context.scss"; -@import "./block/cover.scss"; -@import "./block/latex.scss"; -@import "./block/link.scss"; -@import "./block/linkSettings.scss"; -@import "./block/mention.scss"; -@import "./block/relation.scss"; - -@import "./dataview/calendar.scss"; -@import "./dataview/common.scss"; -@import "./dataview/create/bookmark.scss"; -@import "./dataview/file.scss"; -@import "./dataview/filter.scss"; -@import "./dataview/group.scss"; -@import "./dataview/object.scss"; -@import "./dataview/option.scss"; -@import "./dataview/relation.scss"; -@import "./dataview/sort.scss"; -@import "./dataview/source.scss"; -@import "./dataview/text.scss"; -@import "./dataview/view.scss"; -@import "./dataview/template.scss"; +@import "./icon"; +@import "./button"; +@import "./help"; +@import "./onboarding"; +@import "./relation"; +@import "./select"; +@import "./smile"; +@import "./type"; +@import "./widget"; +@import "./quickCapture"; +@import "./syncStatus"; +@import "./graph"; + +@import "./search/object"; +@import "./search/text"; + +@import "./preview/object"; + +@import "./block/common"; +@import "./block/add"; +@import "./block/context"; +@import "./block/cover"; +@import "./block/latex"; +@import "./block/link"; +@import "./block/linkSettings"; +@import "./block/mention"; +@import "./block/relation"; + +@import "./dataview/calendar"; +@import "./dataview/common"; +@import "./dataview/create/bookmark"; +@import "./dataview/file"; +@import "./dataview/filter"; +@import "./dataview/group"; +@import "./dataview/object"; +@import "./dataview/option"; +@import "./dataview/relation"; +@import "./dataview/sort"; +@import "./dataview/source"; +@import "./dataview/text"; +@import "./dataview/view"; +@import "./dataview/template"; diff --git a/src/scss/page/common.scss b/src/scss/page/common.scss index f9e8c3a079..2e0fe972c4 100644 --- a/src/scss/page/common.scss +++ b/src/scss/page/common.scss @@ -1,18 +1,18 @@ -@import "./auth.scss"; -@import "./main/edit.scss"; -@import "./main/graph.scss"; -@import "./main/history.scss"; -@import "./main/media.scss"; -@import "./main/navigation.scss"; -@import "./main/relation.scss"; -@import "./main/set.scss"; -@import "./main/store.scss"; -@import "./main/type.scss"; -@import "./main/archive.scss"; -@import "./main/graph.scss"; -@import "./main/navigation.scss"; -@import "./main/empty.scss"; -@import "./main/import.scss"; -@import "./main/invite.scss"; -@import "./main/membership.scss"; -@import "./main/chat.scss"; \ No newline at end of file +@import "./auth"; +@import "./main/edit"; +@import "./main/graph"; +@import "./main/history"; +@import "./main/media"; +@import "./main/navigation"; +@import "./main/relation"; +@import "./main/set"; +@import "./main/store"; +@import "./main/type"; +@import "./main/archive"; +@import "./main/graph"; +@import "./main/navigation"; +@import "./main/empty"; +@import "./main/import"; +@import "./main/invite"; +@import "./main/membership"; +@import "./main/chat"; \ No newline at end of file diff --git a/src/scss/popup/common.scss b/src/scss/popup/common.scss index bebdf66634..ae606eda40 100644 --- a/src/scss/popup/common.scss +++ b/src/scss/popup/common.scss @@ -32,22 +32,22 @@ html.platformWindows { } } -@import "./about.scss"; -@import "./confirm.scss"; -@import "./export.scss"; -@import "./help.scss"; -@import "./invite.scss"; -@import "./membership.scss"; -@import "./migration.scss"; -@import "./objectManager.scss"; -@import "./page.scss"; -@import "./phrase.scss"; -@import "./pin.scss"; -@import "./preview.scss"; -@import "./prompt.scss"; -@import "./relation.scss"; -@import "./search.scss"; -@import "./settings.scss"; -@import "./shortcut.scss"; -@import "./usecase.scss"; -@import "./share.scss"; +@import "./about"; +@import "./confirm"; +@import "./export"; +@import "./help"; +@import "./invite"; +@import "./membership"; +@import "./migration"; +@import "./objectManager"; +@import "./page"; +@import "./phrase"; +@import "./pin"; +@import "./preview"; +@import "./prompt"; +@import "./relation"; +@import "./search"; +@import "./settings"; +@import "./shortcut"; +@import "./usecase"; +@import "./share"; diff --git a/src/scss/theme/dark/common.scss b/src/scss/theme/dark/common.scss index b8bcae0090..bfba9f8d94 100644 --- a/src/scss/theme/dark/common.scss +++ b/src/scss/theme/dark/common.scss @@ -322,11 +322,11 @@ html.themeDark { .icon.close { background-color: var(--color-bg-secondary); } } - @import "./menu.scss"; - @import "./popup.scss"; - @import "./page.scss"; - @import "./block.scss"; - @import "./widget.scss"; + @import "./menu"; + @import "./popup"; + @import "./page"; + @import "./block"; + @import "./widget"; } html.platformWindows.themeDark, html.platformLinux.themeDark { diff --git a/src/scss/widget/common.scss b/src/scss/widget/common.scss index 5e4448cf9a..6271cb73a6 100644 --- a/src/scss/widget/common.scss +++ b/src/scss/widget/common.scss @@ -104,7 +104,7 @@ .head > .flex > .clickable { width: calc(100% - 36px); } } -@import "./space.scss"; -@import "./buttons.scss"; -@import "./tree.scss"; -@import "./view/common.scss"; \ No newline at end of file +@import "./space"; +@import "./buttons"; +@import "./tree"; +@import "./view/common"; \ No newline at end of file diff --git a/src/scss/widget/view/common.scss b/src/scss/widget/view/common.scss index 9a0c889784..9126b4e36a 100644 --- a/src/scss/widget/view/common.scss +++ b/src/scss/widget/view/common.scss @@ -40,9 +40,9 @@ } .widget.widgetView { - @import "./board.scss"; - @import "./calendar.scss"; - @import "./gallery.scss"; - @import "./list.scss"; - @import "./graph.scss"; + @import "./board"; + @import "./calendar"; + @import "./gallery"; + @import "./list"; + @import "./graph"; } \ No newline at end of file diff --git a/src/ts/component/sidebar/index.tsx b/src/ts/component/sidebar/index.tsx index 7c7e9d69de..940239cf03 100644 --- a/src/ts/component/sidebar/index.tsx +++ b/src/ts/component/sidebar/index.tsx @@ -50,11 +50,10 @@ const Sidebar = observer(class Sidebar extends React.Component { id="sidebar" className={cn.join(' ')} > - + {showObject ? : }
- {showObject ? : ''}
); diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index c4a6bf1529..31250c5d7d 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -82,74 +82,79 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S id="containerObject" ref={ref => this.node = ref} > -
- - - <div className="sides sidesSort"> - <div className="side left"> - <Select - id="object-select-type" - ref={ref => this.refSelect = ref} - value="" - options={typeOptions} - onChange={this.onSwitchType} - menuParam={{ - className: 'fixed', - classNameWrap: 'fromSidebar', - }} - /> + <div className="inner"> + <div className="head"> + <div className="titleWrap"> + <Icon className="back" onClick={() => sidebar.objectContainerToggle()} /> + <Title text={translate('commonAllContent')} /> </div> - <div className="side right"> - <Icon id="button-object-sort" className="sort" onClick={this.onSort} /> - </div> - </div> - <div className="sides sidesFilter"> - <div className="side left"> - <Filter - ref={ref => this.refFilter = ref} - icon="search" - placeholder={translate('commonSearch')} - onChange={this.onFilterChange} - onClear={this.onFilterClear} - /> + <div className="sides sidesSort"> + <div className="side left"> + <Select + id="object-select-type" + ref={ref => this.refSelect = ref} + value="" + options={typeOptions} + onChange={this.onSwitchType} + menuParam={{ + className: 'fixed', + classNameWrap: 'fromSidebar', + }} + /> + </div> + <div className="side right"> + <Icon id="button-object-sort" className="sort" onClick={this.onSort} /> + </div> </div> - <div className="side right"> - {isAllowedObject ? <Button color="blank" className="c28" text={translate('commonNew')} onClick={this.onAdd} /> : ''} + + <div className="sides sidesFilter"> + <div className="side left"> + <Filter + ref={ref => this.refFilter = ref} + icon="search" + placeholder={translate('commonSearch')} + onChange={this.onFilterChange} + onClear={this.onFilterClear} + /> + </div> + <div className="side right"> + {isAllowedObject ? <Button color="blank" className="c28" text={translate('commonNew')} onClick={this.onAdd} /> : ''} + </div> </div> </div> - </div> - <div className="body"> - {this.cache && items.length && !isLoading ? ( - <div className="items"> - <InfiniteLoader - rowCount={items.length + 1} - loadMoreRows={this.loadMoreRows} - isRowLoaded={({ index }) => !!items[index]} - threshold={LIMIT} - > - {({ onRowsRendered }) => ( - <AutoSizer className="scrollArea"> - {({ width, height }) => ( - <List - ref={ref => this.refList = ref} - width={width} - height={height} - deferredMeasurmentCache={this.cache} - rowCount={items.length} - rowHeight={HEIGHT} - rowRenderer={rowRenderer} - onRowsRendered={onRowsRendered} - overscanRowCount={10} - scrollToAlignment="center" - /> - )} - </AutoSizer> - )} - </InfiniteLoader> - </div> - ) : ''} + <div className="body"> + {this.cache && items.length && !isLoading ? ( + <div className="items"> + <InfiniteLoader + rowCount={items.length + 1} + loadMoreRows={this.loadMoreRows} + isRowLoaded={({ index }) => !!items[index]} + threshold={LIMIT} + > + {({ onRowsRendered }) => ( + <AutoSizer className="scrollArea"> + {({ width, height }) => ( + <List + ref={ref => this.refList = ref} + width={width} + height={height} + deferredMeasurmentCache={this.cache} + rowCount={items.length} + rowHeight={HEIGHT} + rowRenderer={rowRenderer} + onRowsRendered={onRowsRendered} + overscanRowCount={10} + scrollToAlignment="center" + /> + )} + </AutoSizer> + )} + </InfiniteLoader> + </div> + ) : ''} + </div> </div> </div> ); @@ -172,7 +177,6 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S this.refSelect.setOptions(this.getTypeOptions()); this.refSelect.setValue(this.type); - this.rebind(); this.load(true); }; @@ -188,28 +192,6 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S componentWillUnmount(): void { window.clearTimeout(this.timeoutFilter); - this.unbind(); - }; - - unbind () { - $(window).off('click.sidebarContainerObject'); - }; - - rebind () { - this.unbind(); - - $(window).on('click.sidebarContainerObject', (e: any) => { - const target = $(e.target); - - if ( - !target.parents('#containerObject').length && - !target.parents('#header').length && - !target.parents('.menus').length && - !target.parents('.popups').length - ) { - sidebar.objectContainerToggle(); - }; - }); }; load (clear: boolean, callBack?: (message: any) => void) { diff --git a/src/ts/component/widget/buttons.tsx b/src/ts/component/widget/buttons.tsx index c57e102a51..48e9d2870d 100644 --- a/src/ts/component/widget/buttons.tsx +++ b/src/ts/component/widget/buttons.tsx @@ -46,7 +46,7 @@ const WidgetButtons = observer(class WidgetSpace extends React.Component<I.Widge getItems () { const space = U.Space.getSpaceview(); const ret = [ - { id: 'all', name: translate('widgetButtonAllContent') }, + { id: 'all', name: translate('commonAllContent') }, //{ id: 'store', name: translate('commonLibrary') }, { id: 'bin', name: translate('commonBin') }, ]; diff --git a/src/ts/lib/sidebar.ts b/src/ts/lib/sidebar.ts index 2c66e84ce4..b70faf635c 100644 --- a/src/ts/lib/sidebar.ts +++ b/src/ts/lib/sidebar.ts @@ -13,8 +13,6 @@ class Sidebar { isClosed: false, }; obj: JQuery<HTMLElement> = null; - containerWidget: JQuery<HTMLElement> = null; - containerObject: JQuery<HTMLElement> = null; page: JQuery<HTMLElement> = null; header: JQuery<HTMLElement> = null; footer: JQuery<HTMLElement> = null; @@ -57,8 +55,6 @@ class Sidebar { initObjects () { this.obj = $('#sidebar'); - this.containerWidget = this.obj.find('#containerWidget'); - this.containerObject = this.obj.find('#containerObject'); this.page = $('#page.isFull'); this.header = this.page.find('#header'); this.footer = this.page.find('#footer'); @@ -75,8 +71,6 @@ class Sidebar { return; }; - S.Common.showObjectSet(false); - this.obj.addClass('anim'); this.setElementsWidth(width); this.setAnimating(true); @@ -134,8 +128,8 @@ class Sidebar { }; setElementsWidth (width: any): void { - this.containerWidget.find('> .head').css({ width }); - this.containerWidget.find('> .body').css({ width }); + this.obj.find('> .head').css({ width }); + this.obj.find('> .body').css({ width }); }; setWidth (w: number): void { @@ -287,7 +281,7 @@ class Sidebar { const width = v.isClosed ? 0 : v.width; - this.containerWidget.css({ width }); + this.obj.css({ width }); }; /** @@ -330,7 +324,6 @@ class Sidebar { objectContainerToggle () { S.Common.showObjectSet(!S.Common.showObject); - requestAnimationFrame(() => this.resizePage(null, false)); }; }; From f5809a25c407ea51a79d139a3ec9a0b373c4eb89 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 10:36:19 +0200 Subject: [PATCH 15/54] fixes --- src/scss/component/sidebar/object.scss | 4 +++- src/ts/component/menu/index.tsx | 9 ++++----- src/ts/component/sidebar/object.tsx | 5 +++-- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/src/scss/component/sidebar/object.scss b/src/scss/component/sidebar/object.scss index be6d879482..14b22a87c2 100644 --- a/src/scss/component/sidebar/object.scss +++ b/src/scss/component/sidebar/object.scss @@ -12,7 +12,9 @@ .icon.back { width: 24px; height: 24px; border-radius: 4px; background-size: 20px; flex-shrink: 0; background-image: url('~img/icon/widget/back.svg'); } - .icon.back:hover { background-color: var(--color-shape-highlight-medium); } + } + .titleWrap:hover { + .icon.back { background-color: var(--color-shape-highlight-medium); } } .sides { display: flex; flex-direction: row; gap: 0px 8px; } diff --git a/src/ts/component/menu/index.tsx b/src/ts/component/menu/index.tsx index fcbeaebefd..8eb693760f 100644 --- a/src/ts/component/menu/index.tsx +++ b/src/ts/component/menu/index.tsx @@ -530,6 +530,10 @@ const Menu = observer(class Menu extends React.Component<I.Menu, State> { oy = top; }; + if (isFixed) { + oy -= scrollTop; + }; + let x = ox; let y = oy; let flipX = false; @@ -584,11 +588,6 @@ const Menu = observer(class Menu extends React.Component<I.Menu, State> { break; }; - if (isFixed) { - oy -= scrollTop; - y -= scrollTop; - }; - x = Math.max(borderLeft, x); x = Math.min(ww - width - J.Size.menuBorder, x); diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index 31250c5d7d..9e7c92af37 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -84,8 +84,8 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S > <div className="inner"> <div className="head"> - <div className="titleWrap"> - <Icon className="back" onClick={() => sidebar.objectContainerToggle()} /> + <div className="titleWrap" onClick={() => sidebar.objectContainerToggle()}> + <Icon className="back" /> <Title text={translate('commonAllContent')} /> </div> @@ -100,6 +100,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S menuParam={{ className: 'fixed', classNameWrap: 'fromSidebar', + offsetY: 4, }} /> </div> From bc854a6c8975d8c8859462d1f6abe5e83c336032 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 10:43:53 +0200 Subject: [PATCH 16/54] fixes --- src/ts/component/sidebar/object.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index 9e7c92af37..9c7c56a31b 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -331,25 +331,31 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S onSort (e: any) { const options = U.Menu.getObjectContainerSortOptions(this.sortId, this.sortType); + let menuContext = null; + S.Menu.open('select', { element: '#sidebar #containerObject #button-object-sort', horizontal: I.MenuDirection.Right, offsetY: 4, className: 'fixed', classNameWrap: 'fromSidebar', + onOpen: context => menuContext = context, data: { options, - value: this.sortId, + noClose: true, onSelect: (e: any, item: any) => { this.sortId = item.id; this.sortType = item.type; this.load(true); const storage = this.storageGet(); + const options = U.Menu.getObjectContainerSortOptions(this.sortId, this.sortType); storage.sort[this.type] = { id: item.id, type: item.type }; this.storageSet(storage); + + menuContext.ref.updateOptions(options); }, } }); From 14953bfe05e55ef15d12f26a91795df0b8259505 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 12:17:54 +0200 Subject: [PATCH 17/54] JS-5347: icons refactoring --- src/scss/block/chat/form.scss | 3 +-- src/scss/component/header.scss | 3 +-- src/scss/component/navigation.scss | 2 +- src/scss/component/sidebar.scss | 4 ++-- src/scss/component/sidebar/object.scss | 3 +-- src/scss/component/sidebar/widget.scss | 11 ----------- src/scss/page/main/store.scss | 3 +-- src/scss/popup/preview.scss | 4 +--- src/scss/popup/settings.scss | 12 +++--------- src/ts/component/block/chat/buttons.tsx | 3 ++- src/ts/component/header/index.tsx | 2 +- src/ts/component/header/main/object.tsx | 4 ++-- src/ts/component/page/main/store.tsx | 2 +- src/ts/component/popup/page/settings/space/index.tsx | 2 +- src/ts/component/popup/page/settings/space/list.tsx | 2 +- src/ts/component/popup/page/settings/space/share.tsx | 4 ++-- src/ts/component/popup/preview.tsx | 2 +- src/ts/component/sidebar/index.tsx | 1 + src/ts/component/sidebar/object.tsx | 2 +- 19 files changed, 24 insertions(+), 45 deletions(-) diff --git a/src/scss/block/chat/form.scss b/src/scss/block/chat/form.scss index acc71c6fd7..81255033e8 100644 --- a/src/scss/block/chat/form.scss +++ b/src/scss/block/chat/form.scss @@ -33,8 +33,7 @@ .buttons { display: flex; gap: 0px 8px; padding: 10px 16px 0px 16px; margin-left: -4px; } .buttons { - .icon { width: 28px; height: 28px; background-size: 20px 20px; margin: 0px; border-radius: 6px; transition: none; } - .icon:hover, .icon.hover { background-color: var(--color-shape-highlight-medium); } + .icon { margin: 0px; transition: none; } /* Chat buttons */ .icon.plus { background-image: url('~img/icon/chat/buttons/plus.svg'); } diff --git a/src/scss/component/header.scss b/src/scss/component/header.scss index 271bd2711e..1366fd124e 100644 --- a/src/scss/component/header.scss +++ b/src/scss/component/header.scss @@ -51,8 +51,7 @@ .headerBanner.withMenu.active:after { transform: rotateZ(180deg); } .sync { -webkit-app-region: no-drag; flex-shrink: 0; } - .icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; -webkit-app-region: no-drag; flex-shrink: 0; } - .icon:hover, .icon.hover { background-color: var(--color-shape-highlight-medium); } + .icon { -webkit-app-region: no-drag; flex-shrink: 0; } .icon.more { background-image: url('~img/icon/header/more.svg'); } .icon.settings { background-image: url('~img/icon/header/settings.svg'); } diff --git a/src/scss/component/navigation.scss b/src/scss/component/navigation.scss index ffef827929..2529e9a193 100644 --- a/src/scss/component/navigation.scss +++ b/src/scss/component/navigation.scss @@ -13,7 +13,7 @@ .inner { display: flex; flex-direction: row; gap: 0px 20px; align-items: center; justify-content: center; position: relative; z-index: 1; } .iconWrap { - width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; + width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; position: relative; transition: $transitionAllCommon; } .iconWrap:not(.disabled):hover, .iconWrap.active { background-color: rgba(37, 37, 37, 0.15); } diff --git a/src/scss/component/sidebar.scss b/src/scss/component/sidebar.scss index 17837c9492..caa7ee2b1b 100644 --- a/src/scss/component/sidebar.scss +++ b/src/scss/component/sidebar.scss @@ -9,11 +9,11 @@ .sidebarAnimation { transition: width $transitionSidebarTime linear; } #sidebarToggle { - width: 28px; height: 28px; background-size: 20px; border-radius: 6px; position: fixed; left: 84px; top: 12px; backdrop-filter: blur(20px); + position: fixed; left: 84px; top: 12px; backdrop-filter: blur(20px); background-image: url('~img/icon/widget/toggle0.svg'); z-index: 22; -webkit-app-region: no-drag; transition: none; } #sidebarToggle.sidebarAnimation { transition: left $transitionSidebarTime linear; } -#sidebarToggle:hover, #sidebarToggle.hover { background-color: var(--color-shape-highlight-medium); background-image: url('~img/icon/widget/toggle1.svg'); } +#sidebarToggle:hover, #sidebarToggle.hover { background-color: var(--color-shape-highlight-medium) !important; background-image: url('~img/icon/widget/toggle1.svg'); } .sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; left: 0px; height: 100%; } .sidebar.anim { transition-property: width; transition-duration: $transitionSidebarTime; transition-timing-function: linear; } diff --git a/src/scss/component/sidebar/object.scss b/src/scss/component/sidebar/object.scss index 14b22a87c2..28d9beb02d 100644 --- a/src/scss/component/sidebar/object.scss +++ b/src/scss/component/sidebar/object.scss @@ -27,8 +27,7 @@ .sides.sidesSort { padding: 0px 10px; } .sides.sidesFilter { padding: 0px 16px; } - .icon.sort { width: 28px; height: 28px; background-size: 20px; background-image: url('~img/icon/store/sort.svg'); border-radius: 6px; } - .icon.sort:hover, .icon.sort.hover { background-color: var(--color-shape-highlight-medium); } + .icon.sort { background-image: url('~img/icon/store/sort.svg') } .select { border: 0px; padding: 4px 20px 4px 6px; font-weight: 500; } .select { diff --git a/src/scss/component/sidebar/widget.scss b/src/scss/component/sidebar/widget.scss index 1e4f70866f..d01fd139ea 100644 --- a/src/scss/component/sidebar/widget.scss +++ b/src/scss/component/sidebar/widget.scss @@ -7,17 +7,6 @@ display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px; gap: 0px 8px; overflow: hidden; } - > .head { - .status { - @include text-small; font-weight: 500; @include text-overflow-nw; text-align: center; color: var(--color-text-secondary); - display: inline-block; -webkit-app-region: no-drag; - } - - .icon { width: 28px; height: 28px; background-size: 20px; border-radius: 6px; cursor: default; -webkit-app-region: no-drag; } - .icon:hover { background-color: var(--color-shape-highlight-medium); } - .icon.toggle { background-image: url('~img/icon/widget/toggle0.svg'); } - .icon.toggle:hover { background-image: url('~img/icon/widget/toggle1.svg'); } - } > .body { height: calc(100% - 52px); padding: 0px 12px 12px 12px; position: relative; flex-grow: 1; overflow: auto; overscroll-behavior: none; } > .body { diff --git a/src/scss/page/main/store.scss b/src/scss/page/main/store.scss index 887fdf66b0..d0e734b4fd 100644 --- a/src/scss/page/main/store.scss +++ b/src/scss/page/main/store.scss @@ -41,8 +41,7 @@ .tab { display: inline-block; @include text-header3; color: var(--color-control-active); transition: $transitionAllCommon; } .tab:hover, .tab.active { color: var(--color-text-primary); } - .icon.sort { width: 28px; height: 28px; background-size: 20px; background-image: url('~img/icon/store/sort.svg'); border-radius: 6px; } - .icon.sort:hover, .icon.sort.hover { background-color: var(--color-shape-highlight-medium); } + .icon.sort { background-image: url('~img/icon/store/sort.svg'); } } .loaderWrapper { position: relative !important; } diff --git a/src/scss/popup/preview.scss b/src/scss/popup/preview.scss index f90186a5c4..e511f643d9 100644 --- a/src/scss/popup/preview.scss +++ b/src/scss/popup/preview.scss @@ -15,9 +15,7 @@ .name { @include text-overflow-nw; } .side.right { text-align: right; } - - .icon.more { width: 28px; height: 28px; background-size: 20px; background-image: url('~img/icon/popup/preview/more.svg'); border-radius: 6px; }; - .icon.more:hover { background-color: var(--color-shape-highlight-medium); }; + .icon.more { background-image: url('~img/icon/popup/preview/more.svg'); }; } .wrap { width: 100%; height: 100%; overflow: hidden; line-height: 0px; } .media { width: 100%; height: 100%; object-fit: contain; margin: 0px auto; } diff --git a/src/scss/popup/settings.scss b/src/scss/popup/settings.scss index cd1184d097..a0ddf3059d 100644 --- a/src/scss/popup/settings.scss +++ b/src/scss/popup/settings.scss @@ -283,8 +283,7 @@ } .input { height: 40px; border-radius: inherit; padding: 0px; font-weight: 500; } - .icon.more { width: 28px; height: 28px; background-size: 20px; border-radius: 4px; background-image: url('~img/icon/menu/action/more0.svg'); } - .icon.more:hover { background-color: var(--color-shape-highlight-medium); } + .icon.more { background-image: url('~img/icon/menu/action/more0.svg'); } } } @@ -431,9 +430,8 @@ .creator { display: flex; flex-wrap: nowrap; align-items: center; gap: 0px 6px; @include text-small; color: var(--color-text-secondary); } } - .icon { width: 28px; height: 28px; background-size: 20px; border-radius: 4px; } .icon.more { background-image: url('~img/icon/menu/action/more0.svg'); } - .icon:hover, .icon.active { background-color: var(--color-shape-highlight-medium); } + .icon.active { background-color: var(--color-shape-highlight-medium); } } } @@ -470,10 +468,8 @@ .icons { display: flex; align-items: center; gap: 0px 6px; flex-direction: row; } .icons { - .icon { width: 28px; height: 28px; background-size: 20px; border-radius: 4px; } .icon.question { background-image: url('~img/icon/question.svg'); } .icon.more { background-image: url('~img/icon/menu/action/more0.svg'); } - .icon:hover { background-color: var(--color-shape-highlight-medium); } } } @@ -496,9 +492,7 @@ } .input { height: 40px; border-radius: inherit; padding: 0px; font-weight: 500; } - .icon.more { width: 28px; height: 28px; background-size: 20px; border-radius: 4px; background-image: url('~img/icon/menu/action/more0.svg'); } - .icon.more:hover { background-color: var(--color-shape-highlight-medium); } - + .icon.more { background-image: url('~img/icon/menu/action/more0.svg'); } .button { flex-shrink: 0; } } } diff --git a/src/ts/component/block/chat/buttons.tsx b/src/ts/component/block/chat/buttons.tsx index 23da6bc149..f25f2ad1a0 100644 --- a/src/ts/component/block/chat/buttons.tsx +++ b/src/ts/component/block/chat/buttons.tsx @@ -46,7 +46,8 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St return ( <div className="buttons"> {buttons.map((item: any, i: number) => { - const cn = [ item.icon ]; + const cn = [ item.icon, 'withBackground' ]; + if (item.isActive) { cn.push('isActive'); }; diff --git a/src/ts/component/header/index.tsx b/src/ts/component/header/index.tsx index e08408f4d0..bf6883520e 100644 --- a/src/ts/component/header/index.tsx +++ b/src/ts/component/header/index.tsx @@ -86,7 +86,7 @@ class Header extends React.Component<Props> { return ( <React.Fragment> <Icon - className="expand" + className="expand withBackground" tooltip={translate('commonOpenObject')} onClick={onOpen || this.onExpand} /> diff --git a/src/ts/component/header/main/object.tsx b/src/ts/component/header/main/object.tsx index 5e93e4cfa6..4ed1280129 100644 --- a/src/ts/component/header/main/object.tsx +++ b/src/ts/component/header/main/object.tsx @@ -87,8 +87,8 @@ const HeaderMainObject = observer(class HeaderMainObject extends React.Component </div> <div className="side right"> - {showMenu ? <Icon id="button-header-relation" tooltip="Relations" tooltipCaption={`${cmd} + Shift + R`} className="relation" onClick={this.onRelation} /> : ''} - {showMenu ? <Icon id="button-header-more" tooltip="Menu" className="more" onClick={this.onMore} /> : ''} + {showMenu ? <Icon id="button-header-relation" tooltip="Relations" tooltipCaption={`${cmd} + Shift + R`} className="relation withBackground" onClick={this.onRelation} /> : ''} + {showMenu ? <Icon id="button-header-more" tooltip="Menu" className="more withBackground" onClick={this.onMore} /> : ''} </div> </React.Fragment> ); diff --git a/src/ts/component/page/main/store.tsx b/src/ts/component/page/main/store.tsx index e97144d68b..5217fa8a14 100644 --- a/src/ts/component/page/main/store.tsx +++ b/src/ts/component/page/main/store.tsx @@ -137,7 +137,7 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag <div className="side right"> <Icon id="button-store-sort" - className="sort" + className="sort withBackground" onClick={this.onSort} tooltip={translate('pageMainStoreSort')} /> diff --git a/src/ts/component/popup/page/settings/space/index.tsx b/src/ts/component/popup/page/settings/space/index.tsx index ccc24a5981..817ae6f740 100644 --- a/src/ts/component/popup/page/settings/space/index.tsx +++ b/src/ts/component/popup/page/settings/space/index.tsx @@ -193,7 +193,7 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R <div className="inviteLinkWrapper"> <div className="inputWrapper"> <Input ref={ref => this.refInput = ref} readonly={true} value={U.Space.getInviteLink(cid, key)} onClick={() => this.refInput?.select()} /> - <Icon id="button-more-link" className="more" onClick={this.onMoreLink} /> + <Icon id="button-more-link" className="more withBackground" onClick={this.onMoreLink} /> </div> </div> </div> diff --git a/src/ts/component/popup/page/settings/space/list.tsx b/src/ts/component/popup/page/settings/space/list.tsx index e33f72d676..8d28372314 100644 --- a/src/ts/component/popup/page/settings/space/list.tsx +++ b/src/ts/component/popup/page/settings/space/list.tsx @@ -38,7 +38,7 @@ const PopupSettingsPageSpacesList = observer(class PopupSettingsPageSpacesList e <div className="col">{participant ? translate(`participantPermissions${participant.permissions}`) : ''}</div> <div className="col">{translate(`spaceStatus${space.spaceAccountStatus}`)}</div> <div className="col colMore"> - {hasMenu ? <Icon id={`icon-more-${space.id}`} className="more" onClick={() => this.onMore(space)} /> : ''} + {hasMenu ? <Icon id={`icon-more-${space.id}`} className="more withBackground" onClick={() => this.onMore(space)} /> : ''} </div> </div> ); diff --git a/src/ts/component/popup/page/settings/space/share.tsx b/src/ts/component/popup/page/settings/space/share.tsx index f10cdce611..9ae612de31 100644 --- a/src/ts/component/popup/page/settings/space/share.tsx +++ b/src/ts/component/popup/page/settings/space/share.tsx @@ -176,7 +176,7 @@ const PopupSettingsSpaceShare = observer(class PopupSettingsSpaceShare extends R <Title text={translate('popupSettingsSpaceShareTitle')} /> <div className="icons"> - <Icon className="question" onClick={this.onInfo} /> + <Icon className="question withBackground" onClick={this.onInfo} /> {space.isShared ? <Icon id="button-more-space" className="more" onClick={this.onMoreSpace} /> : ''} </div> </div> @@ -189,7 +189,7 @@ const PopupSettingsSpaceShare = observer(class PopupSettingsSpaceShare extends R <div className="inviteLinkWrapper"> <div className="inputWrapper"> <Input ref={ref => this.refInput = ref} readonly={true} value={U.Space.getInviteLink(cid, key)} onClick={() => this.refInput?.select()} /> - <Icon id="button-more-link" className="more" onClick={this.onMoreLink} /> + <Icon id="button-more-link" className="more withBackground" onClick={this.onMoreLink} /> </div> <Button ref={ref => this.refCopy = ref} onClick={this.onCopy} className="c40" color="blank" text={translate('commonCopyLink')} /> </div> diff --git a/src/ts/component/popup/preview.tsx b/src/ts/component/popup/preview.tsx index 4ef1a74c42..45fb98362b 100644 --- a/src/ts/component/popup/preview.tsx +++ b/src/ts/component/popup/preview.tsx @@ -44,7 +44,7 @@ class PopupPreview extends React.Component<I.Popup> { if (object) { name = <ObjectName object={object} />; - menu = <Icon id="button-header-more" tooltip="Menu" className="more" onClick={this.onMore} />; + menu = <Icon id="button-header-more" tooltip="Menu" className="more withBackground" onClick={this.onMore} />; }; return ( diff --git a/src/ts/component/sidebar/index.tsx b/src/ts/component/sidebar/index.tsx index 940239cf03..be8cb4cce5 100644 --- a/src/ts/component/sidebar/index.tsx +++ b/src/ts/component/sidebar/index.tsx @@ -39,6 +39,7 @@ const Sidebar = observer(class Sidebar extends React.Component { <React.Fragment> <Icon id="sidebarToggle" + className="withBackground" tooltipCaption={`${cmd} + \\, ${cmd} + .`} tooltipY={I.MenuDirection.Bottom} onClick={this.onToggleClick} diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index 9c7c56a31b..1add2838e2 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -105,7 +105,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S /> </div> <div className="side right"> - <Icon id="button-object-sort" className="sort" onClick={this.onSort} /> + <Icon id="button-object-sort" className="sort withBackground" onClick={this.onSort} /> </div> </div> From af71f2b2269303b1d2b9db783d0e35263131d3b6 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 13:28:44 +0200 Subject: [PATCH 18/54] small fixes --- src/ts/component/sidebar/object.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index 1add2838e2..d44e609a98 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -309,7 +309,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S }; onClick (item: any) { - U.Object.openConfig(item); + U.Object.openAuto(item); }; onContext (item: any) { From db4b649592e474e8ea55d506551e87e5f753a68e Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 14:18:27 +0200 Subject: [PATCH 19/54] JS-5378: default icons --- dist/img/icon/object/big/bookmark.svg | 4 + dist/img/icon/object/big/chat.svg | 3 + dist/img/icon/object/big/page.svg | 4 + dist/img/icon/object/big/set.svg | 14 ++ dist/img/icon/object/big/tag.svg | 4 + dist/img/icon/object/big/type.svg | 34 +++++ dist/img/icon/object/small/bookmark.svg | 4 + dist/img/icon/object/small/chat.svg | 3 + dist/img/icon/object/small/page.svg | 4 + dist/img/icon/object/small/set.svg | 14 ++ dist/img/icon/object/small/tag.svg | 3 + dist/img/icon/object/small/type.svg | 34 +++++ src/scss/component/iconObject.scss | 4 +- src/scss/page/common.scss | 1 - src/scss/page/main/navigation.scss | 4 +- src/scss/popup/settings.scss | 2 - src/ts/component/block/featured.tsx | 2 +- src/ts/component/menu/block/link.tsx | 2 +- src/ts/component/menu/item/vertical.tsx | 4 +- src/ts/component/menu/search/object.tsx | 2 +- src/ts/component/menu/select.tsx | 4 +- .../component/page/elements/head/simple.tsx | 2 +- src/ts/component/page/main/empty.tsx | 2 +- src/ts/component/page/main/navigation.tsx | 8 +- .../popup/page/settings/space/create.tsx | 2 +- .../popup/page/settings/space/index.tsx | 2 +- src/ts/component/popup/settings.tsx | 2 +- src/ts/component/sidebar/object/item.tsx | 4 +- src/ts/component/util/iconObject.tsx | 125 +++++++++--------- src/ts/component/vault/item.tsx | 2 +- src/ts/component/widget/space.tsx | 2 +- src/ts/interface/menu.ts | 2 +- 32 files changed, 212 insertions(+), 91 deletions(-) create mode 100644 dist/img/icon/object/big/bookmark.svg create mode 100644 dist/img/icon/object/big/chat.svg create mode 100644 dist/img/icon/object/big/page.svg create mode 100644 dist/img/icon/object/big/set.svg create mode 100644 dist/img/icon/object/big/tag.svg create mode 100644 dist/img/icon/object/big/type.svg create mode 100644 dist/img/icon/object/small/bookmark.svg create mode 100644 dist/img/icon/object/small/chat.svg create mode 100644 dist/img/icon/object/small/page.svg create mode 100644 dist/img/icon/object/small/set.svg create mode 100644 dist/img/icon/object/small/tag.svg create mode 100644 dist/img/icon/object/small/type.svg diff --git a/dist/img/icon/object/big/bookmark.svg b/dist/img/icon/object/big/bookmark.svg new file mode 100644 index 0000000000..91264540d1 --- /dev/null +++ b/dist/img/icon/object/big/bookmark.svg @@ -0,0 +1,4 @@ +<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8341 15.5313L22.9549 13.4104C24.7123 11.6531 24.7123 8.80382 22.9549 7.04646C21.1976 5.28911 18.3483 5.28911 16.591 7.04646L13.409 10.2284C11.6516 11.9858 11.6516 14.835 13.409 16.5924C14.1668 17.3502 15.1276 17.7812 16.1164 17.8855C15.9735 18.1846 15.7781 18.465 15.5303 18.7128L15.0365 19.2066C14.0517 18.9435 13.1209 18.4256 12.3483 17.6531C10.0052 15.3099 10.0052 11.5109 12.3483 9.16779L15.5303 5.9858C17.8735 3.64266 21.6724 3.64266 24.0156 5.9858C26.3587 8.32895 26.3587 12.1279 24.0156 14.4711L20.8339 17.6527C20.9339 16.9494 20.934 16.2346 20.8341 15.5313Z" fill="#B6B6B6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16582 14.4727L7.04507 16.5935C5.28771 18.3508 5.28771 21.2001 7.04507 22.9574C8.80243 24.7148 11.6517 24.7148 13.409 22.9574L16.591 19.7755C18.3484 18.0181 18.3484 15.1689 16.591 13.4115C15.8332 12.6537 14.8723 12.2227 13.8835 12.1184C14.0265 11.8193 14.2219 11.539 14.4696 11.2912L14.9636 10.7973C15.9483 11.0604 16.8791 11.5783 17.6517 12.3508C19.9948 14.694 19.9948 18.493 17.6517 20.8361L14.4697 24.0181C12.1265 26.3612 8.32756 26.3612 5.98441 24.0181C3.64126 21.675 3.64126 17.876 5.98441 15.5328L9.16598 12.3512C9.066 13.0546 9.06594 13.7694 9.16582 14.4727Z" fill="#B6B6B6"/> +</svg> diff --git a/dist/img/icon/object/big/chat.svg b/dist/img/icon/object/big/chat.svg new file mode 100644 index 0000000000..39c518e249 --- /dev/null +++ b/dist/img/icon/object/big/chat.svg @@ -0,0 +1,3 @@ +<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M8.16667 24C7.4537 24 7.25 23.4561 7.61111 23.0245C7.96296 22.5928 8.88889 21.6432 9.40741 20.8489C9.48148 20.7194 9.43519 20.5899 9.2963 20.5209C6.32407 19.036 4.5 16.6101 4.5 13.8475C4.5 9.50504 9.16667 6 15 6C20.8333 6 25.5 9.50504 25.5 13.8475C25.5 18.1468 21.0741 21.6863 14.3981 21.6863C14.2778 21.6863 14.1574 21.6777 14.037 21.6691C13.9074 21.6691 13.7778 21.7122 13.6204 21.8158C12.0463 22.8691 9.27778 24 8.16667 24Z" stroke="#B6B6B6" stroke-width="1.5"/> +</svg> diff --git a/dist/img/icon/object/big/page.svg b/dist/img/icon/object/big/page.svg new file mode 100644 index 0000000000..d1acfce456 --- /dev/null +++ b/dist/img/icon/object/big/page.svg @@ -0,0 +1,4 @@ +<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M0.75 3C0.75 1.75736 1.75736 0.75 3 0.75H10.1893L17.25 7.81066V21C17.25 22.2426 16.2426 23.25 15 23.25H3C1.75736 23.25 0.75 22.2426 0.75 21V3Z" stroke="#B6B6B6" stroke-width="1.5"/> +<path d="M9.75 0.75V8.25H17.25" stroke="#B6B6B6" stroke-width="1.5"/> +</svg> diff --git a/dist/img/icon/object/big/set.svg b/dist/img/icon/object/big/set.svg new file mode 100644 index 0000000000..09c54f8319 --- /dev/null +++ b/dist/img/icon/object/big/set.svg @@ -0,0 +1,14 @@ +<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" fill="#F2F2F2"/> +<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" fill="#F2F2F2"/> +<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" fill="#F2F2F2"/> +<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" stroke="#B6B6B6" stroke-width="1.5"/> +<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" fill="#F2F2F2"/> +<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" fill="#F2F2F2"/> +<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" fill="#F2F2F2"/> +<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" stroke="#B6B6B6" stroke-width="1.5"/> +<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" fill="#F2F2F2"/> +<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" fill="#F2F2F2"/> +<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" fill="#F2F2F2"/> +<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" stroke="#B6B6B6" stroke-width="1.5"/> +</svg> diff --git a/dist/img/icon/object/big/tag.svg b/dist/img/icon/object/big/tag.svg new file mode 100644 index 0000000000..9d326ca154 --- /dev/null +++ b/dist/img/icon/object/big/tag.svg @@ -0,0 +1,4 @@ +<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M1.59099 12.9697L13.591 0.96967L13.0624 0.441079L13.591 0.96967C13.7316 0.829018 13.9224 0.75 14.1213 0.75H18.8787C19.0776 0.75 19.2684 0.829018 19.409 0.969668L23.0303 4.59099L23.5607 4.06066L23.0303 4.59099C23.171 4.73164 23.25 4.92241 23.25 5.12132V9.87868C23.25 10.0776 23.171 10.2684 23.0303 10.409L11.0303 22.409C10.7374 22.7019 10.2626 22.7019 9.96967 22.409L1.59099 14.0303C1.2981 13.7374 1.2981 13.2626 1.59099 12.9697Z" stroke="#B6B6B6" stroke-width="1.5"/> +<circle cx="17.25" cy="6.75" r="1.5" fill="#B6B6B6"/> +</svg> diff --git a/dist/img/icon/object/big/type.svg b/dist/img/icon/object/big/type.svg new file mode 100644 index 0000000000..2aed77f13d --- /dev/null +++ b/dist/img/icon/object/big/type.svg @@ -0,0 +1,34 @@ +<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_6542_2595)"> +<rect x="15" y="3.33044" width="16.5" height="16.5" rx="1.5" transform="rotate(45 15 3.33044)" stroke="#B6B6B6" stroke-width="1.5"/> +<mask id="path-2-inside-1_6542_2595" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2544 10.4576C23.7272 10.322 24.1732 10.0679 24.5456 9.6955C25.7172 8.52393 25.7172 6.62444 24.5456 5.45286C23.3741 4.28129 21.4746 4.28129 20.303 5.45286C19.9297 5.8262 19.6753 6.27346 19.5399 6.74753L18.4468 7.84062L22.1591 11.5529L23.2544 10.4576Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2544 10.4576C23.7272 10.322 24.1732 10.0679 24.5456 9.6955C25.7172 8.52393 25.7172 6.62444 24.5456 5.45286C23.3741 4.28129 21.4746 4.28129 20.303 5.45286C19.9297 5.8262 19.6753 6.27346 19.5399 6.74753L18.4468 7.84062L22.1591 11.5529L23.2544 10.4576Z" fill="#F2F2F2"/> +<path d="M23.2544 10.4576L22.8407 9.0158L22.468 9.12274L22.1937 9.39697L23.2544 10.4576ZM19.5399 6.74753L20.6005 7.80819L20.8754 7.53329L20.9822 7.15947L19.5399 6.74753ZM18.4468 7.84062L17.3861 6.77996L16.3255 7.84062L17.3861 8.90128L18.4468 7.84062ZM22.1591 11.5529L21.0984 12.6136L22.1591 13.6742L23.2198 12.6136L22.1591 11.5529ZM23.485 8.63484C23.2969 8.82288 23.0753 8.9485 22.8407 9.0158L23.6681 11.8995C24.3791 11.6955 25.0495 11.313 25.6063 10.7562L23.485 8.63484ZM23.485 6.51352C24.0708 7.09931 24.0708 8.04906 23.485 8.63484L25.6063 10.7562C27.3637 8.9988 27.3637 6.14956 25.6063 4.3922L23.485 6.51352ZM21.3637 6.51352C21.9494 5.92774 22.8992 5.92774 23.485 6.51352L25.6063 4.3922C23.8489 2.63484 20.9997 2.63484 19.2423 4.3922L21.3637 6.51352ZM20.9822 7.15947C21.0494 6.92428 21.1752 6.70201 21.3637 6.51352L19.2423 4.3922C18.6841 4.9504 18.3012 5.62264 18.0976 6.33558L20.9822 7.15947ZM19.5075 8.90128L20.6005 7.80819L18.4792 5.68687L17.3861 6.77996L19.5075 8.90128ZM23.2198 10.4923L19.5075 6.77996L17.3861 8.90128L21.0984 12.6136L23.2198 10.4923ZM22.1937 9.39697L21.0984 10.4923L23.2198 12.6136L24.3151 11.5183L22.1937 9.39697Z" fill="#B6B6B6" mask="url(#path-2-inside-1_6542_2595)"/> +<rect x="21.6289" y="6.77588" width="2.25" height="3" transform="rotate(45 21.6289 6.77588)" fill="#F2F2F2"/> +<mask id="path-5-inside-2_6542_2595" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M7.8724 11.5799C8.00779 12.054 8.26217 12.5014 8.63555 12.8747C9.80712 14.0463 11.7066 14.0463 12.8782 12.8747C14.0498 11.7032 14.0498 9.80367 12.8782 8.6321C12.5058 8.2597 12.0599 8.00568 11.5871 7.87002L10.4917 6.77462L6.77941 10.4869L7.8724 11.5799Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M7.8724 11.5799C8.00779 12.054 8.26217 12.5014 8.63555 12.8747C9.80712 14.0463 11.7066 14.0463 12.8782 12.8747C14.0498 11.7032 14.0498 9.80367 12.8782 8.6321C12.5058 8.2597 12.0599 8.00568 11.5871 7.87002L10.4917 6.77462L6.77941 10.4869L7.8724 11.5799Z" fill="#F2F2F2"/> +<path d="M7.8724 11.5799L9.31475 11.1681L9.20799 10.7942L8.93306 10.5193L7.8724 11.5799ZM11.5871 7.87002L10.5265 8.93068L10.8007 9.20487L11.1734 9.31183L11.5871 7.87002ZM10.4917 6.77462L11.5524 5.71396L10.4917 4.6533L9.43106 5.71396L10.4917 6.77462ZM6.77941 10.4869L5.71875 9.42627L4.65809 10.4869L5.71875 11.5476L6.77941 10.4869ZM9.69621 11.8141C9.50771 11.6256 9.38191 11.4033 9.31475 11.1681L6.43005 11.9918C6.63366 12.7048 7.01663 13.3771 7.57489 13.9354L9.69621 11.8141ZM11.8175 11.8141C11.2317 12.3999 10.282 12.3999 9.69621 11.8141L7.57489 13.9354C9.33225 15.6928 12.1815 15.6928 13.9389 13.9354L11.8175 11.8141ZM11.8175 9.69276C12.4033 10.2785 12.4033 11.2283 11.8175 11.8141L13.9389 13.9354C15.6962 12.178 15.6962 9.3288 13.9389 7.57144L11.8175 9.69276ZM11.1734 9.31183C11.4079 9.37913 11.6295 9.50474 11.8175 9.69276L13.9389 7.57144C13.3821 7.01466 12.7118 6.63222 12.0009 6.42821L11.1734 9.31183ZM9.43106 7.83528L10.5265 8.93068L12.6478 6.80936L11.5524 5.71396L9.43106 7.83528ZM7.84007 11.5476L11.5524 7.83528L9.43106 5.71396L5.71875 9.42627L7.84007 11.5476ZM8.93306 10.5193L7.84007 9.42627L5.71875 11.5476L6.81174 12.6406L8.93306 10.5193Z" fill="#B6B6B6" mask="url(#path-5-inside-2_6542_2595)"/> +<rect x="11.5527" y="9.96045" width="2.25" height="3" transform="rotate(135 11.5527 9.96045)" fill="#F2F2F2"/> +<mask id="path-8-inside-3_6542_2595" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4126 22.1239C17.9398 21.9882 17.4938 21.7342 17.1214 21.3618C15.9498 20.1902 15.9498 18.2907 17.1214 17.1191C18.2929 15.9476 20.1924 15.9476 21.364 17.1191C21.7373 17.4925 21.9917 17.9397 22.1271 18.4138L23.2202 19.5069L19.5079 23.2192L18.4126 22.1239Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4126 22.1239C17.9398 21.9882 17.4938 21.7342 17.1214 21.3618C15.9498 20.1902 15.9498 18.2907 17.1214 17.1191C18.2929 15.9476 20.1924 15.9476 21.364 17.1191C21.7373 17.4925 21.9917 17.9397 22.1271 18.4138L23.2202 19.5069L19.5079 23.2192L18.4126 22.1239Z" fill="#F2F2F2"/> +<path d="M18.4126 22.1239L18.8262 20.6821L19.199 20.789L19.4732 21.0632L18.4126 22.1239ZM22.1271 18.4138L21.0664 19.4744L20.7915 19.1995L20.6848 18.8257L22.1271 18.4138ZM23.2202 19.5069L24.2809 18.4462L25.3415 19.5069L24.2809 20.5675L23.2202 19.5069ZM19.5079 23.2192L20.5685 24.2798L19.5079 25.3405L18.4472 24.2798L19.5079 23.2192ZM18.182 20.3011C18.3701 20.4891 18.5917 20.6148 18.8262 20.6821L17.9989 23.5657C17.2879 23.3617 16.6175 22.9793 16.0607 22.4224L18.182 20.3011ZM18.182 18.1798C17.5962 18.7656 17.5962 19.7153 18.182 20.3011L16.0607 22.4224C14.3033 20.6651 14.3033 17.8158 16.0607 16.0585L18.182 18.1798ZM20.3033 18.1798C19.7175 17.594 18.7678 17.594 18.182 18.1798L16.0607 16.0585C17.8181 14.3011 20.6673 14.3011 22.4247 16.0585L20.3033 18.1798ZM20.6848 18.8257C20.6176 18.5905 20.4918 18.3683 20.3033 18.1798L22.4247 16.0585C22.9829 16.6167 23.3658 17.2889 23.5694 18.0018L20.6848 18.8257ZM22.1595 20.5675L21.0664 19.4744L23.1878 17.3531L24.2809 18.4462L22.1595 20.5675ZM18.4472 22.1585L22.1595 18.4462L24.2809 20.5675L20.5685 24.2798L18.4472 22.1585ZM19.4732 21.0632L20.5685 22.1585L18.4472 24.2798L17.3519 23.1845L19.4732 21.0632Z" fill="#B6B6B6" mask="url(#path-8-inside-3_6542_2595)"/> +<rect width="2.25" height="3" transform="matrix(-0.707107 0.707107 0.707107 0.707107 20.0381 18.4431)" fill="#F2F2F2"/> +<mask id="path-11-inside-4_6542_2595" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4601 23.2515C10.3247 23.7257 10.0703 24.173 9.69697 24.5464C8.5254 25.7179 6.6259 25.7179 5.45433 24.5464C4.28276 23.3748 4.28276 21.4753 5.45433 20.3037C5.82672 19.9313 6.27267 19.6773 6.7454 19.5416L7.8408 18.4463L11.5531 22.1586L10.4601 23.2515Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4601 23.2515C10.3247 23.7257 10.0703 24.173 9.69697 24.5464C8.5254 25.7179 6.6259 25.7179 5.45433 24.5464C4.28276 23.3748 4.28276 21.4753 5.45433 20.3037C5.82672 19.9313 6.27267 19.6773 6.7454 19.5416L7.8408 18.4463L11.5531 22.1586L10.4601 23.2515Z" fill="#F2F2F2"/> +<path d="M10.4601 23.2515L9.01777 22.8397L9.12453 22.4658L9.39946 22.1909L10.4601 23.2515ZM6.7454 19.5416L7.80606 20.6023L7.53187 20.8765L7.15914 20.9835L6.7454 19.5416ZM7.8408 18.4463L6.78014 17.3856L7.8408 16.3249L8.90146 17.3856L7.8408 18.4463ZM11.5531 22.1586L12.6138 21.0979L13.6744 22.1586L12.6138 23.2192L11.5531 22.1586ZM8.63631 23.4857C8.82481 23.2972 8.95061 23.0749 9.01777 22.8397L11.9025 23.6634C11.6989 24.3764 11.3159 25.0488 10.7576 25.607L8.63631 23.4857ZM6.51499 23.4857C7.10077 24.0715 8.05052 24.0715 8.63631 23.4857L10.7576 25.607C9.00027 27.3644 6.15103 27.3644 4.39367 25.607L6.51499 23.4857ZM6.51499 21.3644C5.9292 21.9502 5.9292 22.8999 6.51499 23.4857L4.39367 25.607C2.63631 23.8497 2.63631 21.0004 4.39367 19.2431L6.51499 21.3644ZM7.15914 20.9835C6.92462 21.0508 6.703 21.1764 6.51499 21.3644L4.39367 19.2431C4.95045 18.6863 5.62071 18.3039 6.33165 18.0998L7.15914 20.9835ZM8.90146 19.5069L7.80606 20.6023L5.68474 18.481L6.78014 17.3856L8.90146 19.5069ZM10.4924 23.2192L6.78014 19.5069L8.90146 17.3856L12.6138 21.0979L10.4924 23.2192ZM9.39946 22.1909L10.4924 21.0979L12.6138 23.2192L11.5208 24.3122L9.39946 22.1909Z" fill="#B6B6B6" mask="url(#path-11-inside-4_6542_2595)"/> +<rect width="2.25" height="3" transform="matrix(0.707107 0.707107 0.707107 -0.707107 6.77979 21.6311)" fill="#F2F2F2"/> +</g> +<defs> +<clipPath id="clip0_6542_2595"> +<rect width="30" height="30" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/dist/img/icon/object/small/bookmark.svg b/dist/img/icon/object/small/bookmark.svg new file mode 100644 index 0000000000..c7311dc9a9 --- /dev/null +++ b/dist/img/icon/object/small/bookmark.svg @@ -0,0 +1,4 @@ +<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8895 10.3538L15.3034 8.9398C16.475 7.76822 16.475 5.86873 15.3034 4.69715C14.1319 3.52558 12.2324 3.52558 11.0608 4.69715L8.93949 6.81848C7.76792 7.99005 7.76792 9.88954 8.93949 11.0611C9.44476 11.5664 10.0854 11.8537 10.7447 11.9232C10.6494 12.1228 10.519 12.3099 10.3537 12.4753L10.0249 12.804C9.36827 12.6287 8.74755 12.2834 8.23238 11.7682C6.67028 10.2061 6.67028 7.67347 8.23238 6.11137L10.3537 3.99005C11.9158 2.42795 14.4485 2.42795 16.0106 3.99005C17.5727 5.55215 17.5727 8.08481 16.0106 9.6469L13.8895 11.7679C13.9561 11.2991 13.9561 10.8226 13.8895 10.3538Z" fill="#B6B6B6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M6.11102 9.6472L4.69704 11.0612C3.52547 12.2328 3.52547 14.1322 4.69704 15.3038C5.86861 16.4754 7.76811 16.4754 8.93968 15.3038L11.061 13.1825C12.2326 12.0109 12.2326 10.1114 11.061 8.93986C10.5557 8.43459 9.91506 8.14723 9.25579 8.07778C9.35113 7.87814 9.48147 7.69104 9.64682 7.52568L9.97556 7.19695C10.6322 7.37232 11.2529 7.71759 11.7681 8.23275C13.3302 9.79485 13.3302 12.3275 11.7681 13.8896L9.64679 16.0109C8.08469 17.573 5.55203 17.573 3.98993 16.0109C2.42784 14.4488 2.42784 11.9162 3.98993 10.3541L6.11096 8.23305C6.04438 8.70189 6.0444 9.17837 6.11102 9.6472Z" fill="#B6B6B6"/> +</svg> diff --git a/dist/img/icon/object/small/chat.svg b/dist/img/icon/object/small/chat.svg new file mode 100644 index 0000000000..b152243030 --- /dev/null +++ b/dist/img/icon/object/small/chat.svg @@ -0,0 +1,3 @@ +<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M5.44444 16C4.96914 16 4.83333 15.6374 5.07407 15.3496C5.30864 15.0619 5.92593 14.4288 6.2716 13.8993C6.32099 13.8129 6.29012 13.7266 6.19753 13.6806C4.21605 12.6906 3 11.0734 3 9.23165C3 6.33669 6.11111 4 10 4C13.8889 4 17 6.33669 17 9.23165C17 12.0978 14.0494 14.4576 9.59877 14.4576C9.51852 14.4576 9.43827 14.4518 9.35802 14.446C9.2716 14.446 9.18519 14.4748 9.08025 14.5439C8.03086 15.246 6.18519 16 5.44444 16Z" stroke="#B6B6B6"/> +</svg> diff --git a/dist/img/icon/object/small/page.svg b/dist/img/icon/object/small/page.svg new file mode 100644 index 0000000000..489c23389b --- /dev/null +++ b/dist/img/icon/object/small/page.svg @@ -0,0 +1,4 @@ +<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M4.5 4C4.5 3.17157 5.17157 2.5 6 2.5H10.7929L15.5 7.20711V16C15.5 16.8284 14.8284 17.5 14 17.5H6C5.17157 17.5 4.5 16.8284 4.5 16V4Z" fill="white" stroke="#B6B6B6"/> +<path d="M10.5 2.5V7.5H15.5" stroke="#B6B6B6"/> +</svg> diff --git a/dist/img/icon/object/small/set.svg b/dist/img/icon/object/small/set.svg new file mode 100644 index 0000000000..1cf05091d4 --- /dev/null +++ b/dist/img/icon/object/small/set.svg @@ -0,0 +1,14 @@ +<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" fill="white"/> +<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" fill="white"/> +<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" fill="white"/> +<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" stroke="#B6B6B6"/> +<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" fill="white"/> +<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" fill="white"/> +<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" fill="white"/> +<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" stroke="#B6B6B6"/> +<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" fill="white"/> +<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" fill="white"/> +<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" fill="white"/> +<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" stroke="#B6B6B6"/> +</svg> diff --git a/dist/img/icon/object/small/tag.svg b/dist/img/icon/object/small/tag.svg new file mode 100644 index 0000000000..eb105754da --- /dev/null +++ b/dist/img/icon/object/small/tag.svg @@ -0,0 +1,3 @@ +<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M1.06066 8.64645L9.06066 0.646447C9.15443 0.552679 9.28161 0.5 9.41421 0.5H12.5858C12.7184 0.5 12.8456 0.552679 12.9393 0.646447L15.3536 3.06066C15.4473 3.15443 15.5 3.28161 15.5 3.41421V6.58579C15.5 6.7184 15.4473 6.84557 15.3536 6.93934L7.35355 14.9393C7.15829 15.1346 6.84171 15.1346 6.64645 14.9393L1.06066 9.35355C0.865398 9.15829 0.865398 8.84171 1.06066 8.64645Z" stroke="#B6B6B6"/> +</svg> \ No newline at end of file diff --git a/dist/img/icon/object/small/type.svg b/dist/img/icon/object/small/type.svg new file mode 100644 index 0000000000..e3ac6717d3 --- /dev/null +++ b/dist/img/icon/object/small/type.svg @@ -0,0 +1,34 @@ +<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_6542_2567)"> +<rect x="10" y="2.22176" width="11" height="11" rx="1" transform="rotate(45 10 2.22176)" stroke="#B6B6B6"/> +<mask id="path-2-inside-1_6542_2567" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M15.502 6.97273C15.8176 6.88238 16.1153 6.71291 16.3639 6.46432C17.145 5.68327 17.145 4.41694 16.3639 3.63589C15.5829 2.85484 14.3165 2.85484 13.5355 3.63589C13.2869 3.88449 13.1174 4.18224 13.0271 4.49786L12.2981 5.22688L13.5355 6.46432L14.7729 7.70176L15.502 6.97273Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M15.502 6.97273C15.8176 6.88238 16.1153 6.71291 16.3639 6.46432C17.145 5.68327 17.145 4.41694 16.3639 3.63589C15.5829 2.85484 14.3165 2.85484 13.5355 3.63589C13.2869 3.88449 13.1174 4.18224 13.0271 4.49786L12.2981 5.22688L13.5355 6.46432L14.7729 7.70176L15.502 6.97273Z" fill="white"/> +<path d="M15.502 6.97273L15.2268 6.01135L14.9779 6.08258L14.7948 6.26562L15.502 6.97273ZM13.0271 4.49786L13.7342 5.20496L13.9172 5.02192L13.9885 4.77306L13.0271 4.49786ZM12.2981 5.22688L11.5909 4.51978L10.8838 5.22688L11.5909 5.93399L12.2981 5.22688ZM14.7729 7.70176L14.0658 8.40886L14.7729 9.11597L15.48 8.40886L14.7729 7.70176ZM15.6568 5.75721C15.5313 5.88272 15.3833 5.96652 15.2268 6.01135L15.7772 7.93412C16.2518 7.79824 16.6993 7.54311 17.071 7.17143L15.6568 5.75721ZM15.6568 4.343C16.0473 4.73352 16.0473 5.36669 15.6568 5.75721L17.071 7.17143C18.2426 5.99985 18.2426 4.10036 17.071 2.92879L15.6568 4.343ZM14.2426 4.343C14.6331 3.95248 15.2663 3.95248 15.6568 4.343L17.071 2.92879C15.8995 1.75721 14 1.75721 12.8284 2.92879L14.2426 4.343ZM13.9885 4.77306C14.0333 4.61648 14.1171 4.46851 14.2426 4.343L12.8284 2.92879C12.4567 3.30047 12.2016 3.748 12.0657 4.22265L13.9885 4.77306ZM13.0052 5.93399L13.7342 5.20496L12.32 3.79075L11.5909 4.51978L13.0052 5.93399ZM14.2426 5.75721L13.0052 4.51978L11.5909 5.93399L12.8284 7.17143L14.2426 5.75721ZM15.48 6.99465L14.2426 5.75721L12.8284 7.17143L14.0658 8.40886L15.48 6.99465ZM14.7948 6.26562L14.0658 6.99465L15.48 8.40886L16.2091 7.67984L14.7948 6.26562Z" fill="#B6B6B6" mask="url(#path-2-inside-1_6542_2567)"/> +<rect x="14.4194" y="4.51978" width="1.5" height="2" transform="rotate(45 14.4194 4.51978)" fill="white"/> +<mask id="path-5-inside-2_6542_2567" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5.24895 7.72364C5.3393 8.03926 5.50877 8.33701 5.75736 8.5856C6.53841 9.36665 7.80474 9.36665 8.58579 8.5856C9.36684 7.80455 9.36684 6.53822 8.58579 5.75717C8.33719 5.50858 8.03944 5.33911 7.72382 5.24876L6.9948 4.51974L5.75736 5.75717L4.51992 6.99461L5.24895 7.72364Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5.24895 7.72364C5.3393 8.03926 5.50877 8.33701 5.75736 8.5856C6.53841 9.36665 7.80474 9.36665 8.58579 8.5856C9.36684 7.80455 9.36684 6.53822 8.58579 5.75717C8.33719 5.50858 8.03944 5.33911 7.72382 5.24876L6.9948 4.51974L5.75736 5.75717L4.51992 6.99461L5.24895 7.72364Z" fill="white"/> +<path d="M5.24895 7.72364L6.21033 7.44843L6.1391 7.19957L5.95606 7.01653L5.24895 7.72364ZM7.72382 5.24876L7.01672 5.95587L7.19976 6.13891L7.44862 6.21015L7.72382 5.24876ZM6.9948 4.51974L7.7019 3.81263L6.9948 3.10552L6.28769 3.81263L6.9948 4.51974ZM4.51992 6.99461L3.81282 6.2875L3.10571 6.99461L3.81282 7.70172L4.51992 6.99461ZM6.46447 7.87849C6.33896 7.75299 6.25516 7.60501 6.21033 7.44843L4.28756 7.99884C4.42344 8.4735 4.67857 8.92103 5.05025 9.29271L6.46447 7.87849ZM7.87868 7.87849C7.48816 8.26902 6.85499 8.26902 6.46447 7.87849L5.05025 9.29271C6.22183 10.4643 8.12132 10.4643 9.29289 9.29271L7.87868 7.87849ZM7.87868 6.46428C8.2692 6.8548 8.2692 7.48797 7.87868 7.87849L9.29289 9.29271C10.4645 8.12113 10.4645 6.22164 9.29289 5.05007L7.87868 6.46428ZM7.44862 6.21015C7.6052 6.25497 7.75317 6.33877 7.87868 6.46428L9.29289 5.05007C8.92121 4.67839 8.47368 4.42325 7.99903 4.28738L7.44862 6.21015ZM6.28769 5.22684L7.01672 5.95587L8.43093 4.54166L7.7019 3.81263L6.28769 5.22684ZM6.46447 6.46428L7.7019 5.22684L6.28769 3.81263L5.05025 5.05007L6.46447 6.46428ZM5.22703 7.70172L6.46447 6.46428L5.05025 5.05007L3.81282 6.2875L5.22703 7.70172ZM5.95606 7.01653L5.22703 6.2875L3.81282 7.70172L4.54184 8.43074L5.95606 7.01653Z" fill="#B6B6B6" mask="url(#path-5-inside-2_6542_2567)"/> +<rect x="7.70166" y="6.64111" width="1.5" height="2" transform="rotate(135 7.70166 6.64111)" fill="white"/> +<mask id="path-8-inside-3_6542_2567" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2759 14.7511C11.9603 14.6607 11.6625 14.4912 11.4139 14.2426C10.6329 13.4616 10.6329 12.1953 11.4139 11.4142C12.195 10.6332 13.4613 10.6332 14.2423 11.4142C14.4909 11.6628 14.6604 11.9606 14.7507 12.2762L15.4798 13.0052L14.2423 14.2426L13.0049 15.4801L12.2759 14.7511Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2759 14.7511C11.9603 14.6607 11.6625 14.4912 11.4139 14.2426C10.6329 13.4616 10.6329 12.1953 11.4139 11.4142C12.195 10.6332 13.4613 10.6332 14.2423 11.4142C14.4909 11.6628 14.6604 11.9606 14.7507 12.2762L15.4798 13.0052L14.2423 14.2426L13.0049 15.4801L12.2759 14.7511Z" fill="white"/> +<path d="M12.2759 14.7511L12.5511 13.7897L12.7999 13.8609L12.983 14.0439L12.2759 14.7511ZM14.7507 12.2762L14.0436 12.9833L13.8606 12.8002L13.7894 12.5514L14.7507 12.2762ZM15.4798 13.0052L16.1869 12.2981L16.894 13.0052L16.1869 13.7123L15.4798 13.0052ZM13.0049 15.4801L13.712 16.1872L13.0049 16.8943L12.2978 16.1872L13.0049 15.4801ZM12.121 13.5355C12.2465 13.661 12.3945 13.7448 12.5511 13.7897L12.0007 15.7124C11.526 15.5766 11.0785 15.3214 10.7068 14.9497L12.121 13.5355ZM12.121 12.1213C11.7305 12.5118 11.7305 13.145 12.121 13.5355L10.7068 14.9497C9.53523 13.7782 9.53523 11.8787 10.7068 10.7071L12.121 12.1213ZM13.5352 12.1213C13.1447 11.7308 12.5115 11.7308 12.121 12.1213L10.7068 10.7071C11.8784 9.53553 13.7779 9.53553 14.9494 10.7071L13.5352 12.1213ZM13.7894 12.5514C13.7445 12.3948 13.6607 12.2468 13.5352 12.1213L14.9494 10.7071C15.3211 11.0788 15.5763 11.5263 15.7121 12.001L13.7894 12.5514ZM14.7727 13.7123L14.0436 12.9833L15.4579 11.5691L16.1869 12.2981L14.7727 13.7123ZM13.5352 13.5355L14.7727 12.2981L16.1869 13.7123L14.9494 14.9497L13.5352 13.5355ZM12.2978 14.773L13.5352 13.5355L14.9494 14.9497L13.712 16.1872L12.2978 14.773ZM12.983 14.0439L13.712 14.773L12.2978 16.1872L11.5688 15.4582L12.983 14.0439Z" fill="#B6B6B6" mask="url(#path-8-inside-3_6542_2567)"/> +<rect width="1.5" height="2" transform="matrix(-0.707107 0.707107 0.707107 0.707107 13.3584 12.2981)" fill="white"/> +<mask id="path-11-inside-4_6542_2567" fill="white"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97224 15.502C6.88189 15.8176 6.71242 16.1153 6.46383 16.3639C5.68278 17.145 4.41645 17.145 3.6354 16.3639C2.85436 15.5829 2.85436 14.3165 3.6354 13.5355C3.884 13.2869 4.18175 13.1174 4.49737 13.0271L5.2264 12.2981L6.46383 13.5355L7.70127 14.7729L6.97224 15.502Z"/> +</mask> +<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97224 15.502C6.88189 15.8176 6.71242 16.1153 6.46383 16.3639C5.68278 17.145 4.41645 17.145 3.6354 16.3639C2.85436 15.5829 2.85436 14.3165 3.6354 13.5355C3.884 13.2869 4.18175 13.1174 4.49737 13.0271L5.2264 12.2981L6.46383 13.5355L7.70127 14.7729L6.97224 15.502Z" fill="white"/> +<path d="M6.97224 15.502L6.01086 15.2268L6.0821 14.9779L6.26514 14.7948L6.97224 15.502ZM4.49737 13.0271L5.20448 13.7342L5.02144 13.9172L4.77257 13.9885L4.49737 13.0271ZM5.2264 12.2981L4.51929 11.5909L5.2264 10.8838L5.9335 11.5909L5.2264 12.2981ZM7.70127 14.7729L8.40838 14.0658L9.11548 14.7729L8.40838 15.48L7.70127 14.7729ZM5.75673 15.6568C5.88223 15.5313 5.96603 15.3833 6.01086 15.2268L7.93363 15.7772C7.79775 16.2518 7.54262 16.6993 7.17094 17.071L5.75673 15.6568ZM4.34251 15.6568C4.73304 16.0473 5.3662 16.0473 5.75673 15.6568L7.17094 17.071C5.99937 18.2426 4.09987 18.2426 2.9283 17.071L4.34251 15.6568ZM4.34251 14.2426C3.95199 14.6331 3.95199 15.2663 4.34251 15.6568L2.9283 17.071C1.75673 15.8995 1.75673 14 2.9283 12.8284L4.34251 14.2426ZM4.77257 13.9885C4.61599 14.0333 4.46802 14.1171 4.34251 14.2426L2.9283 12.8284C3.29998 12.4567 3.74751 12.2016 4.22217 12.0657L4.77257 13.9885ZM5.9335 13.0052L5.20448 13.7342L3.79026 12.32L4.51929 11.5909L5.9335 13.0052ZM5.75673 14.2426L4.51929 13.0052L5.9335 11.5909L7.17094 12.8284L5.75673 14.2426ZM6.99416 15.48L5.75673 14.2426L7.17094 12.8284L8.40838 14.0658L6.99416 15.48ZM6.26514 14.7948L6.99416 14.0658L8.40838 15.48L7.67935 16.2091L6.26514 14.7948Z" fill="#B6B6B6" mask="url(#path-11-inside-4_6542_2567)"/> +<rect width="1.5" height="2" transform="matrix(0.707107 0.707107 0.707107 -0.707107 4.51953 14.4194)" fill="white"/> +</g> +<defs> +<clipPath id="clip0_6542_2567"> +<rect width="20" height="20" fill="white"/> +</clipPath> +</defs> +</svg> diff --git a/src/scss/component/iconObject.scss b/src/scss/component/iconObject.scss index c5dd8d338c..db6963d0a6 100644 --- a/src/scss/component/iconObject.scss +++ b/src/scss/component/iconObject.scss @@ -95,9 +95,9 @@ } .iconObject.c40.isRelation, .iconObject.c48.isRelation { border-radius: 8px; background-color: var(--color-shape-tertiary); } -.iconObject.c40.withLetter, .iconObject.c48.withLetter { border-radius: 8px; } +.iconObject.c40.withDefault, .iconObject.c48.withDefault { border-radius: 8px; } -.iconObject.withLetter { background-color: var(--color-shape-tertiary); } +.iconObject.withDefault { background-color: var(--color-shape-tertiary); } .iconObject.withImage { border-radius: 2px !important; background-color: unset !important; } .iconObject.withImage.c64, diff --git a/src/scss/page/common.scss b/src/scss/page/common.scss index 2e0fe972c4..0812eb5e84 100644 --- a/src/scss/page/common.scss +++ b/src/scss/page/common.scss @@ -10,7 +10,6 @@ @import "./main/type"; @import "./main/archive"; @import "./main/graph"; -@import "./main/navigation"; @import "./main/empty"; @import "./main/import"; @import "./main/invite"; diff --git a/src/scss/page/main/navigation.scss b/src/scss/page/main/navigation.scss index fe5b912230..0c9c2a4375 100644 --- a/src/scss/page/main/navigation.scss +++ b/src/scss/page/main/navigation.scss @@ -17,9 +17,7 @@ } .item { .inner { padding: 12px; display: flex; align-items: center; gap: 0px 16px; height: 100%; } - - .iconObject { flex-shrink: 0; background: var(--color-shape-primary); border-radius: 6px; } - .iconObject.isTask { background: none; } + .iconObject { flex-shrink: 0; background: var(--color-shape-tertiary); border-radius: 6px; } .info { border: 0px; flex-grow: 1; width: calc(100% - 64px); } .name { width: 100%; line-height: 22px; height: 22px; @include text-overflow-nw; } diff --git a/src/scss/popup/settings.scss b/src/scss/popup/settings.scss index a0ddf3059d..36e0bdc493 100644 --- a/src/scss/popup/settings.scss +++ b/src/scss/popup/settings.scss @@ -34,8 +34,6 @@ display: flex; flex-direction: column; justify-content: space-between; } > .side.left { - .iconObject.withLetter { background-color: var(--color-shape-primary); } - .section { margin: 0px 0px 12px 0px; } .section.account { margin-bottom: 8px; } .section:last-child { margin: 0px; } diff --git a/src/ts/component/block/featured.tsx b/src/ts/component/block/featured.tsx index 1b27e0f3b9..57e0701a91 100644 --- a/src/ts/component/block/featured.tsx +++ b/src/ts/component/block/featured.tsx @@ -852,7 +852,7 @@ const BlockFeatured = observer(class BlockFeatured extends React.Component<Props noFlipY: true, data: { options, - forceLetter: true, + withDefault: true, onSelect: (e: any, item: any) => { U.Object.openAuto(item); } diff --git a/src/ts/component/menu/block/link.tsx b/src/ts/component/menu/block/link.tsx index 11236af0e6..3951e217a4 100644 --- a/src/ts/component/menu/block/link.tsx +++ b/src/ts/component/menu/block/link.tsx @@ -96,7 +96,7 @@ const MenuBlockLink = observer(class MenuBlockLink extends React.Component<I.Men description={type ? type.name : undefined} style={param.style} iconSize={40} - forceLetter={true} + withDefault={true} className={cn.join(' ')} /> ); diff --git a/src/ts/component/menu/item/vertical.tsx b/src/ts/component/menu/item/vertical.tsx index 327f93bb83..6d269accd4 100644 --- a/src/ts/component/menu/item/vertical.tsx +++ b/src/ts/component/menu/item/vertical.tsx @@ -10,7 +10,7 @@ class MenuItemVertical extends React.Component<I.MenuItem> { render () { const { id, icon, object, inner, name, description, caption, color, arrow, checkbox, isActive, withDescription, withSwitch, withSelect, withMore, - className, style, iconSize, switchValue, selectValue, options, readonly, forceLetter, onClick, onSwitch, onSelect, onMouseEnter, onMouseLeave, onMore, + className, style, iconSize, switchValue, selectValue, options, readonly, withDefault, onClick, onSwitch, onSelect, onMouseEnter, onMouseLeave, onMore, selectMenuParam, subComponent, note, sortArrow } = this.props; const cn = [ 'item' ]; @@ -57,7 +57,7 @@ class MenuItemVertical extends React.Component<I.MenuItem> { }; if (object) { - iconMainElement = <IconObject object={object} size={iconSize} forceLetter={forceLetter} />; + iconMainElement = <IconObject object={object} size={iconSize} withDefault={withDefault} />; if (object.isHidden) { cn.push('isHidden'); diff --git a/src/ts/component/menu/search/object.tsx b/src/ts/component/menu/search/object.tsx index 01b78a25a8..4eaa61ab04 100644 --- a/src/ts/component/menu/search/object.tsx +++ b/src/ts/component/menu/search/object.tsx @@ -93,7 +93,7 @@ const MenuSearchObject = observer(class MenuSearchObject extends React.Component if (isBig && !item.isAdd) { props.withDescription = true; - props.forceLetter = true; + props.withDefault = true; props.iconSize = 40; } else { props.caption = (type ? type.name : undefined); diff --git a/src/ts/component/menu/select.tsx b/src/ts/component/menu/select.tsx index 2238d9fd89..2c6d905aa0 100644 --- a/src/ts/component/menu/select.tsx +++ b/src/ts/component/menu/select.tsx @@ -34,7 +34,7 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> { render () { const { param } = this.props; const { data } = param; - const { filter, value, disabled, placeholder, noVirtualisation, forceLetter, menuLabel } = data; + const { filter, value, disabled, placeholder, noVirtualisation, withDefault, menuLabel } = data; const items = this.getItems(true); const withFilter = this.isWithFilter(); @@ -98,7 +98,7 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> { onClick={e => this.onClick(e, item)} onMouseEnter={e => this.onMouseEnter(e, item)} style={item.style} - forceLetter={forceLetter} + withDefault={withDefault} /> ); }; diff --git a/src/ts/component/page/elements/head/simple.tsx b/src/ts/component/page/elements/head/simple.tsx index 80cbe3ae60..be5babdab0 100644 --- a/src/ts/component/page/elements/head/simple.tsx +++ b/src/ts/component/page/elements/head/simple.tsx @@ -128,7 +128,7 @@ const HeadSimple = observer(class Controls extends React.Component<Props> { size={32} iconSize={32} object={object} - forceLetter={true} + withDefault={true} canEdit={canEditIcon} /> ) : ''} diff --git a/src/ts/component/page/main/empty.tsx b/src/ts/component/page/main/empty.tsx index cd5ae0c0a3..c16a400e7d 100644 --- a/src/ts/component/page/main/empty.tsx +++ b/src/ts/component/page/main/empty.tsx @@ -30,7 +30,7 @@ const PageMainEmpty = observer(class PageMainEmpty extends React.Component<I.Pag /> <div className="wrapper"> - <IconObject object={space} size={96} forceLetter={true} /> + <IconObject object={space} size={96} withDefault={true} /> <Title text={space.name} /> <Label text={translate('pageMainEmptyDescription')} /> diff --git a/src/ts/component/page/main/navigation.tsx b/src/ts/component/page/main/navigation.tsx index 7cc66262e8..f9d2df4352 100644 --- a/src/ts/component/page/main/navigation.tsx +++ b/src/ts/component/page/main/navigation.tsx @@ -58,7 +58,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo const { id, layout, name, snippet } = item || {}; const isFile = U.Object.isInFileLayouts(layout); const cn = [ 'item', U.Data.layoutClass(id, layout) ]; - const iconSize = isFile ? 48 : 24; + const iconSize = isFile ? 48 : null; let description = null; if (isFile) { @@ -76,7 +76,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo onMouseLeave={() => this.unsetActive()} > <div className="inner" onClick={e => this.onClick(e, item)}> - <IconObject object={item} forceLetter={true} size={48} iconSize={iconSize} /> + <IconObject object={item} withDefault={true} size={48} iconSize={iconSize} /> <div className="info"> <ObjectName object={item} /> {description} @@ -118,7 +118,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo const { id, name, layout, snippet, coverType, coverId, coverX, coverY, coverScale } = item; const isFile = U.Object.isInFileLayouts(layout); const cn = [ 'item', U.Data.layoutClass(id, layout), 'selected' ]; - const iconSize = isFile ? 48 : 24; + const iconSize = isFile ? 48 : null; let description = null; if (isFile) { @@ -130,7 +130,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo return ( <div id={`item-${id}`} className={cn.join(' ')}> - <IconObject object={item} forceLetter={true} size={48} iconSize={iconSize} /> + <IconObject object={item} withDefault={true} size={48} iconSize={iconSize} /> <ObjectName object={item} /> {description} diff --git a/src/ts/component/popup/page/settings/space/create.tsx b/src/ts/component/popup/page/settings/space/create.tsx index ec807bdbd7..1f15b902b8 100644 --- a/src/ts/component/popup/page/settings/space/create.tsx +++ b/src/ts/component/popup/page/settings/space/create.tsx @@ -52,7 +52,7 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R id="spaceIcon" size={96} object={space} - forceLetter={true} + withDefault={true} canEdit={false} menuParam={{ horizontal: I.MenuDirection.Center }} /> diff --git a/src/ts/component/popup/page/settings/space/index.tsx b/src/ts/component/popup/page/settings/space/index.tsx index 817ae6f740..77c9d8cef5 100644 --- a/src/ts/component/popup/page/settings/space/index.tsx +++ b/src/ts/component/popup/page/settings/space/index.tsx @@ -103,7 +103,7 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R id="spaceIcon" size={96} object={space} - forceLetter={true} + withDefault={true} canEdit={canWrite} menuParam={{ horizontal: I.MenuDirection.Center }} onSelect={this.onSelect} diff --git a/src/ts/component/popup/settings.tsx b/src/ts/component/popup/settings.tsx index 6e8a5ae26c..626f3986f6 100644 --- a/src/ts/component/popup/settings.tsx +++ b/src/ts/component/popup/settings.tsx @@ -144,7 +144,7 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop if (action.id == 'account') { if (participant) { name = participant?.globalName || participant?.name; - icon = <IconObject object={{ ...participant, name }} size={36} iconSize={36} forceLetter={true} />; + icon = <IconObject object={{ ...participant, name }} size={36} iconSize={36} withDefault={true} />; }; cn.push('itemAccount'); diff --git a/src/ts/component/sidebar/object/item.tsx b/src/ts/component/sidebar/object/item.tsx index f37f9be8d4..2caa40b5d7 100644 --- a/src/ts/component/sidebar/object/item.tsx +++ b/src/ts/component/sidebar/object/item.tsx @@ -29,10 +29,10 @@ const ObjectItem = observer(class ObjectItem extends React.Component<Props> { if (U.Object.isTypeOrRelationLayout(item.layout)) { const size = U.Object.isTypeLayout(item.layout) ? 18 : 20; - iconSmall = <IconObject object={item} size={size} iconSize={18} />; + iconSmall = <IconObject object={item} size={size} iconSize={18} withDefault={true} />; } else { const iconSize = isFile ? 48 : null; - iconLarge = <IconObject object={item} size={48} iconSize={iconSize} />; + iconLarge = <IconObject object={item} size={48} iconSize={iconSize} withDefault={true} />; }; if (item.id == rootId) { diff --git a/src/ts/component/util/iconObject.tsx b/src/ts/component/util/iconObject.tsx index ea6c64148a..0758f07327 100644 --- a/src/ts/component/util/iconObject.tsx +++ b/src/ts/component/util/iconObject.tsx @@ -21,7 +21,7 @@ interface Props { tooltip?: string; tooltipY?: I.MenuDirection.Top | I.MenuDirection.Bottom; color?: string; - forceLetter?: boolean; + withDefault?: boolean; noGallery?: boolean; noUpload?: boolean; noRemove?: boolean; @@ -94,21 +94,7 @@ const FontSize = { 128: 72, }; -const Relation: any = { small: {}, big: {} }; - -for (const i in I.RelationType) { - const it = Number(i); - - if (isNaN(Number(it)) || [ I.RelationType.Icon, I.RelationType.Relations ].includes(it)) { - continue; - }; - - const key = U.Common.toCamelCase(I.RelationType[i]); - - Relation.small[i] = require(`img/icon/relation/small/${key}.svg`).default; - Relation.big[i] = require(`img/icon/relation/big/${key}.svg`).default; -}; - +const DefaultIcons = [ 'page', 'task', 'set', 'chat', 'bookmark', 'type' ]; const Ghost = require('img/icon/ghost.svg').default; const CheckboxTask = { @@ -147,7 +133,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; render () { - const { className, size, canEdit, forceLetter, style } = this.props; + const { className, size, canEdit, withDefault, style } = this.props; const { theme } = S.Common; const object = this.getObject(); const layout = Number(object.layout) || I.ObjectLayout.Page; @@ -166,10 +152,10 @@ const IconObject = observer(class IconObject extends React.Component<Props> { let icon = null; let icn = []; - const onLetter = () => { - cn.push('withLetter'); + const defaultIcon = (type: string) => { + cn.push('withDefault'); icn = icn.concat([ 'iconCommon', 'c' + iconSize ]); - icon = <img src={this.commonSvg()} className={icn.join(' ')} />; + icon = <img src={this.defaultIcon(type)} className={icn.join(' ')} />; }; switch (layout) { @@ -182,8 +168,22 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconEmoji || iconImage || iconClass) { icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; } else - if (forceLetter) { - onLetter(); + if (withDefault) { + defaultIcon('page'); + }; + break; + }; + + case I.ObjectLayout.Chat: { + if (iconImage) { + cn.push('withImage'); + }; + + if (iconEmoji || iconImage || iconClass) { + icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; + } else + if (withDefault) { + defaultIcon('chat'); }; break; }; @@ -196,20 +196,20 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconEmoji || iconImage) { icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; } else - if (forceLetter) { - onLetter(); + if (withDefault) { + defaultIcon('set'); }; break; }; case I.ObjectLayout.Human: case I.ObjectLayout.Participant: { + icn = icn.concat([ 'iconImage', 'c' + iconSize ]); + if (iconImage) { cn.push('withImage'); - icn = icn.concat([ 'iconImage', 'c' + iconSize ]); icon = <img src={S.Common.imageUrl(iconImage, iconSize * 2)} className={icn.join(' ')} />; } else { - icn = icn.concat([ 'iconImage', 'c' + iconSize ]); icon = <img src={this.userSvg()} className={icn.join(' ')} />; }; break; @@ -221,8 +221,14 @@ const IconObject = observer(class IconObject extends React.Component<Props> { break; }; - case I.ObjectLayout.Dashboard: + case I.ObjectLayout.Dashboard: { + break; + }; + case I.ObjectLayout.Note: { + if (withDefault) { + defaultIcon('page'); + }; break; }; @@ -230,18 +236,22 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconEmoji) { icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; } else - if (forceLetter) { - onLetter(); + if (withDefault) { + defaultIcon('type'); }; break; }; case I.ObjectLayout.Relation: { - const key = iconSize < 28 ? 'small' : 'big'; - if (Relation[key][relationFormat]) { - icn = icn.concat([ 'iconCommon', 'c' + iconSize ]); - icon = <img src={Relation[key][relationFormat]} className={icn.join(' ')} />; + if ([ I.RelationType.Icon, I.RelationType.Relations ].includes(relationFormat)) { + break; }; + + const key = iconSize < 28 ? 'small' : 'big'; + const src = require(`img/icon/relation/${key}/${relationFormat}.svg`).default; + + icn = icn.concat([ 'iconCommon', 'c' + iconSize ]); + icon = <img src={src} className={icn.join(' ')} />; break; }; @@ -249,6 +259,9 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconImage) { icn = icn.concat([ 'iconCommon', 'c' + iconSize ]); icon = <img src={S.Common.imageUrl(iconImage, iconSize * 2)} className={icn.join(' ')} />; + } else + if (withDefault) { + defaultIcon('bookmark'); }; break; }; @@ -275,14 +288,13 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; case I.ObjectLayout.SpaceView: { + icn = icn.concat([ 'iconImage', 'c' + iconSize ]); + cn.push('withImage'); + if (iconImage) { - cn.push('withImage'); - icn = icn.concat([ 'iconImage', 'c' + iconSize ]); icon = <img src={S.Common.imageUrl(iconImage, iconSize * 2)} className={icn.join(' ')} />; } else { - cn.push('withOption withImage'); - - icn = icn.concat([ 'iconImage', 'c' + iconSize ]); + cn.push('withOption'); icon = <img src={this.gradientSvg(iconOption || 1, 0.35)} className={icn.join(' ')} />; }; break; @@ -437,7 +449,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; iconSize () { - const { size, iconSize, forceLetter } = this.props; + const { size, iconSize, withDefault } = this.props; const object = this.getObject(); const { layout, iconImage, iconEmoji, isDeleted } = object; @@ -450,7 +462,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if ((size == 18) && (U.Object.isTaskLayout(layout))) { s = 16; } else - if ((size == 48) && U.Object.isRelationLayout(layout)) { + if ((size == 48) && (U.Object.isRelationLayout(layout) || withDefault)) { s = 28; } else if (size >= 40) { @@ -461,16 +473,6 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if ([ I.ObjectLayout.Set, I.ObjectLayout.SpaceView ].includes(layout) && iconImage) { s = size; }; - - if (!iconImage && !iconEmoji) { - if ([ I.ObjectLayout.Set, I.ObjectLayout.Type ].includes(layout)) { - s = size; - }; - - if (![ I.ObjectLayout.Task, I.ObjectLayout.Relation ].includes(layout) && forceLetter) { - s = size; - }; - }; }; if (iconSize) { @@ -541,18 +543,6 @@ const IconObject = observer(class IconObject extends React.Component<Props> { return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); }; - commonSvg (): string { - const { size } = this.props; - const object = this.getObject(); - const { layout } = object; - const iconSize = this.iconSize(); - const name = this.iconName(); - const text = `<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central" fill="${this.svgColor()}" font-family="Helvetica" font-weight="medium" font-size="${this.fontSize(layout, size)}px">${name}</text>`; - const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 ${iconSize} ${iconSize}" xml:space="preserve" height="${iconSize}px" width="${iconSize}px">${text}</svg>`; - - return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); - }; - iconName () { const object = this.getObject(); @@ -564,6 +554,17 @@ const IconObject = observer(class IconObject extends React.Component<Props> { return name; }; + defaultIcon (type: string) { + const iconSize = this.iconSize(); + const key = iconSize < 28 ? 'small' : 'big'; + + if (DefaultIcons.includes(type)) { + return require(`img/icon/object/${key}/${type}.svg`).default; + }; + + return ''; + }; + }); export default IconObject; diff --git a/src/ts/component/vault/item.tsx b/src/ts/component/vault/item.tsx index 441f6aac57..c4b3f85495 100644 --- a/src/ts/component/vault/item.tsx +++ b/src/ts/component/vault/item.tsx @@ -22,7 +22,7 @@ const VaultItem = observer(class Vault extends React.Component<Props> { if (!isButton) { const object = U.Menu.getVaultItems().find(it => it.id == id); - icon = <IconObject object={object} size={36} iconSize={36} forceLetter={true} />; + icon = <IconObject object={object} size={36} iconSize={36} withDefault={true} />; } else { cn.push(`isButton ${id}`); }; diff --git a/src/ts/component/widget/space.tsx b/src/ts/component/widget/space.tsx index e620b63cde..3948f736b4 100644 --- a/src/ts/component/widget/space.tsx +++ b/src/ts/component/widget/space.tsx @@ -24,7 +24,7 @@ const WidgetSpace = observer(class WidgetSpace extends React.Component<I.WidgetC <IconObject id="widget-space-icon" object={{ ...space, layout: I.ObjectLayout.SpaceView }} - forceLetter={true} + withDefault={true} size={28} iconSize={28} menuParam={{ className: 'fixed' }} diff --git a/src/ts/interface/menu.ts b/src/ts/interface/menu.ts index 620936874a..e9017c5bf1 100644 --- a/src/ts/interface/menu.ts +++ b/src/ts/interface/menu.ts @@ -80,7 +80,7 @@ export interface MenuItem { readonly?: boolean; style?: any; iconSize?: number; - forceLetter?: boolean; + withDefault?: boolean; options?: I.Option[]; selectMenuParam?: any; isActive?: boolean; From 5a344f5e7bcf3eda91b24e06126d256bb9c994b9 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 14:24:31 +0200 Subject: [PATCH 20/54] default icons fixes --- src/json/theme.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/json/theme.ts b/src/json/theme.ts index bb1934d6b0..c3dea897a9 100644 --- a/src/json/theme.ts +++ b/src/json/theme.ts @@ -37,9 +37,9 @@ export default { }, icon: { - text: '#fff', + text: '#b6b6b6', bg: { - grey: '#bfbfbf', + grey: '#f2f2f2', black: '#252525', brown: '#b6b6b6', orange: '#ffb522', @@ -98,9 +98,9 @@ export default { }, icon: { - text: '#fff', + text: '#9a9a9a', bg: { - grey: '#606060', + grey: '#2b2b2b', black: '#252525', brown: '#b6b6b6', orange: '#ffb522', From 49ed50c15ed65ca31e327fb4a23d3a9f8b1d9698 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 14:29:16 +0200 Subject: [PATCH 21/54] fix default icons --- src/scss/component/sidebar/object.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/scss/component/sidebar/object.scss b/src/scss/component/sidebar/object.scss index 28d9beb02d..fb3c9d7945 100644 --- a/src/scss/component/sidebar/object.scss +++ b/src/scss/component/sidebar/object.scss @@ -79,6 +79,8 @@ .item.isType, .item.isRelation { gap: 0px; } .item.isType, .item.isRelation { + .iconObject { background-color: unset; } + .info { width: calc(100% - 26px); } .nameWrap { display: flex; flex-direction: row; align-items: center; gap: 0px 8px; } .descrWrap { From feb7a49f3c3bdabf68d164a78c9840306556322e Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 14:29:50 +0200 Subject: [PATCH 22/54] fix default icons --- src/ts/component/block/chat/attachment/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ts/component/block/chat/attachment/index.tsx b/src/ts/component/block/chat/attachment/index.tsx index b2e73c79d0..d7cb13cafb 100644 --- a/src/ts/component/block/chat/attachment/index.tsx +++ b/src/ts/component/block/chat/attachment/index.tsx @@ -130,7 +130,7 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro return ( <div className="clickable" onClick={this.onOpen}> - <IconObject object={object} size={48} iconSize={iconSize} /> + <IconObject object={object} size={48} iconSize={iconSize} withDefault={true} /> <div className="info"> <ObjectName object={object} /> @@ -147,7 +147,7 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro <div className="clickable" onClick={this.onOpen}> <div className="info"> <div className="descr"> - <IconObject object={object} size={14} /> + <IconObject object={object} size={14} withDefault={true} /> <div className="url">{U.Common.shortUrl(object.source)}</div> </div> <ObjectName object={object} /> From dc7e48b4ea464d537d8052f5909f9ac39ed86dd3 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 14:40:52 +0200 Subject: [PATCH 23/54] fix default icons --- src/ts/component/block/chat/attachment/index.tsx | 2 +- src/ts/component/util/iconObject.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ts/component/block/chat/attachment/index.tsx b/src/ts/component/block/chat/attachment/index.tsx index d7cb13cafb..403fea2cee 100644 --- a/src/ts/component/block/chat/attachment/index.tsx +++ b/src/ts/component/block/chat/attachment/index.tsx @@ -232,4 +232,4 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro }); -export default ChatAttachment; +export default ChatAttachment; \ No newline at end of file diff --git a/src/ts/component/util/iconObject.tsx b/src/ts/component/util/iconObject.tsx index 0758f07327..bd4a496f4c 100644 --- a/src/ts/component/util/iconObject.tsx +++ b/src/ts/component/util/iconObject.tsx @@ -248,7 +248,8 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; const key = iconSize < 28 ? 'small' : 'big'; - const src = require(`img/icon/relation/${key}/${relationFormat}.svg`).default; + const name = U.Common.toCamelCase(I.RelationType[relationFormat]); + const src = require(`img/icon/relation/${key}/${name}.svg`).default; icn = icn.concat([ 'iconCommon', 'c' + iconSize ]); icon = <img src={src} className={icn.join(' ')} />; From d4256a9869faeadd854b127dac36b68455673166 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 14:46:11 +0200 Subject: [PATCH 24/54] fix icons --- src/scss/component/sidebar/object.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/scss/component/sidebar/object.scss b/src/scss/component/sidebar/object.scss index fb3c9d7945..41be20799a 100644 --- a/src/scss/component/sidebar/object.scss +++ b/src/scss/component/sidebar/object.scss @@ -52,7 +52,7 @@ .item { padding: 8px; display: flex; flex-direction: row; align-items: center; gap: 0px 12px; position: relative; } .item { .iconObject { flex-shrink: 0; border-radius: 6px; } - .iconObject.c48:not(.isTask) { background-color: var(--color-shape-tertiary); } + .iconObject.c48 { background-color: var(--color-shape-tertiary); } .info { width: 100%; display: flex; flex-direction: column; gap: 2px 0px; } .name { @include text-overflow-nw; width: 100%; } From 8dcaa8393c718d1954d1245d6fa436e52bdb2532 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 14:51:28 +0200 Subject: [PATCH 25/54] refactoring and renaming --- src/json/text.json | 1 - src/ts/component/sidebar/object.tsx | 2 +- src/ts/component/widget/buttons.tsx | 8 +------- 3 files changed, 2 insertions(+), 9 deletions(-) diff --git a/src/json/text.json b/src/json/text.json index 25f579929f..35dd816c05 100644 --- a/src/json/text.json +++ b/src/json/text.json @@ -161,7 +161,6 @@ "commonMembers": "Members", "commonEntrySpace": "My First Space", "commonNothingFound": "Nothing found", - "commonAllContent": "All content", "pluralDay": "day|days", "pluralObject": "Object|Objects", diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index d44e609a98..54beb0872d 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -86,7 +86,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S <div className="head"> <div className="titleWrap" onClick={() => sidebar.objectContainerToggle()}> <Icon className="back" /> - <Title text={translate('commonAllContent')} /> + <Title text={translate('commonLibrary')} /> </div> <div className="sides sidesSort"> diff --git a/src/ts/component/widget/buttons.tsx b/src/ts/component/widget/buttons.tsx index 48e9d2870d..281af31e56 100644 --- a/src/ts/component/widget/buttons.tsx +++ b/src/ts/component/widget/buttons.tsx @@ -46,8 +46,7 @@ const WidgetButtons = observer(class WidgetSpace extends React.Component<I.Widge getItems () { const space = U.Space.getSpaceview(); const ret = [ - { id: 'all', name: translate('commonAllContent') }, - //{ id: 'store', name: translate('commonLibrary') }, + { id: 'all', name: translate('commonLibrary') }, { id: 'bin', name: translate('commonBin') }, ]; @@ -73,11 +72,6 @@ const WidgetButtons = observer(class WidgetSpace extends React.Component<I.Widge break; }; - case 'store': { - U.Object.openEvent(e, { layout: I.ObjectLayout.Store }); - break; - }; - case 'bin': { U.Object.openEvent(e, { layout: I.ObjectLayout.Archive }); break; From e8c1fe9de19693ea8730d90493899b23ed9fc7f2 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 15:00:48 +0200 Subject: [PATCH 26/54] filter templates from all objects --- src/ts/component/sidebar/object.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index 54beb0872d..8315c26342 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -197,10 +197,12 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S load (clear: boolean, callBack?: (message: any) => void) { const option = U.Menu.getObjectContainerSortOptions(this.sortId, this.sortType).find(it => it.id == this.sortId); + const template = S.Record.getTemplateType(); let sorts: I.Sort[] = []; let filters: I.Filter[] = [ { relationKey: 'layout', condition: I.FilterCondition.NotEqual, value: I.ObjectLayout.Participant }, + { relationKey: 'type', condition: I.FilterCondition.NotEqual, value: template?.id }, ]; if (option) { From 108d7e473d6e3e0e905d68950ac5737499792f09 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 15:37:12 +0200 Subject: [PATCH 27/54] bump middleware version --- middleware.version | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/middleware.version b/middleware.version index 04b1a7b0da..1cb8c152ba 100644 --- a/middleware.version +++ b/middleware.version @@ -1 +1 @@ -0.36.0-rc3 +0.36.0-rc4 \ No newline at end of file From 34049cd546f9dfff508da4f65e259a739485523a Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 15:42:59 +0200 Subject: [PATCH 28/54] JS-5207: fix --- src/ts/lib/action.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ts/lib/action.ts b/src/ts/lib/action.ts index 05ae6e9fad..47c3f97fae 100644 --- a/src/ts/lib/action.ts +++ b/src/ts/lib/action.ts @@ -471,8 +471,8 @@ class Action { import (type: I.ImportType, extensions: string[], options?: any, callBack?: (message: any) => void) { const fileOptions: any = { - properties: [ 'openFile' ], - filters: [ + properties: [ 'openFile', 'multiSelections' ], + filters: [ { name: 'Filtered extensions', extensions }, ], }; From e288eae4497a7aad5f9cff140a3d0b9382c62f31 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 16:12:09 +0200 Subject: [PATCH 29/54] JS-5378: default icons logic --- dist/img/icon/default/bookmark.svg | 4 ++ dist/img/icon/default/chat.svg | 3 ++ dist/img/icon/default/page.svg | 4 ++ dist/img/icon/default/set.svg | 5 +++ dist/img/icon/default/tag.svg | 3 ++ dist/img/icon/default/type.svg | 10 +++++ dist/img/icon/object/big/bookmark.svg | 4 -- dist/img/icon/object/big/chat.svg | 3 -- dist/img/icon/object/big/page.svg | 4 -- dist/img/icon/object/big/set.svg | 14 ------- dist/img/icon/object/big/tag.svg | 4 -- dist/img/icon/object/big/type.svg | 34 --------------- dist/img/icon/object/small/bookmark.svg | 4 -- dist/img/icon/object/small/chat.svg | 3 -- dist/img/icon/object/small/page.svg | 4 -- dist/img/icon/object/small/set.svg | 14 ------- dist/img/icon/object/small/tag.svg | 3 -- dist/img/icon/object/small/type.svg | 34 --------------- src/scss/component/iconObject.scss | 3 -- .../component/block/chat/attachment/index.tsx | 4 +- src/ts/component/menu/block/link.tsx | 1 - src/ts/component/menu/item/vertical.tsx | 2 +- src/ts/component/menu/search/object.tsx | 1 - src/ts/component/menu/select.tsx | 1 - .../component/page/elements/head/simple.tsx | 1 - src/ts/component/page/main/empty.tsx | 2 +- src/ts/component/page/main/navigation.tsx | 4 +- .../popup/page/settings/space/create.tsx | 1 - .../popup/page/settings/space/index.tsx | 1 - src/ts/component/popup/settings.tsx | 2 +- src/ts/component/sidebar/object/item.tsx | 4 +- src/ts/component/util/iconObject.tsx | 41 +++++++------------ src/ts/component/vault/item.tsx | 2 +- src/ts/component/widget/space.tsx | 1 - 34 files changed, 54 insertions(+), 171 deletions(-) create mode 100644 dist/img/icon/default/bookmark.svg create mode 100644 dist/img/icon/default/chat.svg create mode 100644 dist/img/icon/default/page.svg create mode 100644 dist/img/icon/default/set.svg create mode 100644 dist/img/icon/default/tag.svg create mode 100644 dist/img/icon/default/type.svg delete mode 100644 dist/img/icon/object/big/bookmark.svg delete mode 100644 dist/img/icon/object/big/chat.svg delete mode 100644 dist/img/icon/object/big/page.svg delete mode 100644 dist/img/icon/object/big/set.svg delete mode 100644 dist/img/icon/object/big/tag.svg delete mode 100644 dist/img/icon/object/big/type.svg delete mode 100644 dist/img/icon/object/small/bookmark.svg delete mode 100644 dist/img/icon/object/small/chat.svg delete mode 100644 dist/img/icon/object/small/page.svg delete mode 100644 dist/img/icon/object/small/set.svg delete mode 100644 dist/img/icon/object/small/tag.svg delete mode 100644 dist/img/icon/object/small/type.svg diff --git a/dist/img/icon/default/bookmark.svg b/dist/img/icon/default/bookmark.svg new file mode 100644 index 0000000000..18457c6548 --- /dev/null +++ b/dist/img/icon/default/bookmark.svg @@ -0,0 +1,4 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8895 9.35378L14.3034 7.9398C15.475 6.76822 15.475 4.86873 14.3034 3.69715C13.1319 2.52558 11.2324 2.52558 10.0608 3.69715L7.93949 5.81848C6.76792 6.99005 6.76792 8.88954 7.93949 10.0611C8.44476 10.5664 9.08543 10.8537 9.7447 10.9232C9.64936 11.1228 9.51902 11.3099 9.35366 11.4753L9.02493 11.804C8.36827 11.6287 7.74755 11.2834 7.23238 10.7682C5.67028 9.20613 5.67028 6.67347 7.23238 5.11137L9.3537 2.99005C10.9158 1.42795 13.4485 1.42795 15.0106 2.99005C16.5727 4.55215 16.5727 7.08481 15.0106 8.6469L12.8895 10.7679C12.9561 10.2991 12.9561 9.82261 12.8895 9.35378Z" fill="#B6B6B6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5.11078 8.6472L3.69679 10.0612C2.52522 11.2328 2.52522 13.1322 3.69679 14.3038C4.86837 15.4754 6.76786 15.4754 7.93944 14.3038L10.0608 12.1825C11.2323 11.0109 11.2323 9.11143 10.0608 7.93986C9.55548 7.43459 8.91482 7.14723 8.25554 7.07778C8.35088 6.87814 8.48123 6.69104 8.64658 6.52568L8.97531 6.19695C9.63197 6.37232 10.2527 6.71759 10.7679 7.23275C12.33 8.79485 12.33 11.3275 10.7679 12.8896L8.64654 15.0109C7.08445 16.573 4.55179 16.573 2.98969 15.0109C1.42759 13.4488 1.42759 10.9162 2.98969 9.35407L5.11071 7.23305C5.04413 7.70189 5.04415 8.17837 5.11078 8.6472Z" fill="#B6B6B6"/> +</svg> \ No newline at end of file diff --git a/dist/img/icon/default/chat.svg b/dist/img/icon/default/chat.svg new file mode 100644 index 0000000000..ab09768bcb --- /dev/null +++ b/dist/img/icon/default/chat.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.5C4.97911 3.5 2 5.96091 2 8.75482C2 10.543 3.14804 12.1748 5.15412 13.2037C5.29569 13.2762 5.4333 13.4041 5.49674 13.5934C5.56175 13.7874 5.52674 13.9806 5.44207 14.1326L5.435 14.1452L5.42721 14.1575C5.22248 14.4795 4.9456 14.8211 4.70038 15.1101C4.58848 15.242 4.48687 15.3589 4.3978 15.4613C4.32024 15.5505 4.25219 15.6288 4.19514 15.6965C4.3268 15.6856 4.51914 15.6484 4.76715 15.5776C5.05907 15.4942 5.3974 15.3734 5.75156 15.2268C6.46322 14.9322 7.20567 14.5473 7.73144 14.1861L7.73461 14.184L7.73462 14.184C7.90134 14.0713 8.09031 13.9906 8.31217 13.9906H8.33055L8.34889 13.992C8.43797 13.9986 8.50559 14.0033 8.57011 14.0033C13.2037 14.0033 16 11.5088 16 8.75482C16 5.96091 13.0209 3.5 9 3.5ZM1 8.75482C1 5.17981 4.68755 2.5 9 2.5C13.3124 2.5 17 5.17981 17 8.75482C17 12.3064 13.4735 15.0033 8.57011 15.0033C8.4836 15.0033 8.39911 14.9982 8.32622 14.993C8.3192 14.9968 8.30917 15.0027 8.29583 15.0117C7.69744 15.4224 6.88985 15.8379 6.13403 16.1508C5.75405 16.308 5.37892 16.4428 5.04171 16.5391C4.71363 16.6328 4.38784 16.7 4.11905 16.7C3.73857 16.7 3.36014 16.543 3.18336 16.1798C3.01055 15.8248 3.11435 15.4408 3.33243 15.1714C3.41185 15.0716 3.53462 14.9301 3.6688 14.7755C3.75658 14.6744 3.84925 14.5676 3.93785 14.4631C4.09048 14.2832 4.24236 14.0978 4.37529 13.9197C2.3189 12.7557 1 10.9079 1 8.75482Z" fill="#B6B6B6"/> +</svg> \ No newline at end of file diff --git a/dist/img/icon/default/page.svg b/dist/img/icon/default/page.svg new file mode 100644 index 0000000000..8dc0182a1b --- /dev/null +++ b/dist/img/icon/default/page.svg @@ -0,0 +1,4 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M5 16H13C13.5523 16 14 15.5523 14 15V6.41421L9.58579 2H5C4.44772 2 4 2.44772 4 3V15C4 15.5523 4.44772 16 5 16ZM10 1H5C3.89543 1 3 1.89543 3 3V15C3 16.1046 3.89543 17 5 17H13C14.1046 17 15 16.1046 15 15V6L10 1Z" fill="#B6B6B6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M9 1.5H10V6H14.5V7H9V1.5Z" fill="#B6B6B6"/> +</svg> \ No newline at end of file diff --git a/dist/img/icon/default/set.svg b/dist/img/icon/default/set.svg new file mode 100644 index 0000000000..1f4e2e9598 --- /dev/null +++ b/dist/img/icon/default/set.svg @@ -0,0 +1,5 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4409 10.7207L13.3228 11.2797L15.7639 12.5003L9.00002 15.8822L2.23608 12.5003L4.67693 11.2799L3.5589 10.7208L1.78887 11.6058C1.05182 11.9744 1.05182 13.0262 1.78887 13.3947L8.5528 16.7767C8.83433 16.9174 9.1657 16.9174 9.44723 16.7767L16.2112 13.3947C16.9482 13.0262 16.9482 11.9744 16.2112 11.6058L14.4409 10.7207Z" fill="#B6B6B6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5589 7.2207L13.4408 7.77972L15.7639 8.94128L9.00002 12.3232L2.23608 8.94127L4.55897 7.77983L3.44094 7.22082L1.78887 8.04685C1.05182 8.41537 1.05182 9.46718 1.78887 9.8357L8.5528 13.2177C8.83433 13.3584 9.1657 13.3584 9.44723 13.2177L16.2112 9.8357C16.9482 9.46718 16.9482 8.41537 16.2112 8.04685L14.5589 7.2207Z" fill="#B6B6B6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99974 8.88208L15.7637 5.50011L8.99974 2.11815L2.2358 5.50011L8.99974 8.88208ZM16.2109 6.39454C16.9479 6.02602 16.9479 4.97421 16.2109 4.60569L9.44695 1.22372C9.16543 1.08296 8.83405 1.08296 8.55253 1.22372L1.78859 4.60569C1.05154 4.97421 1.05154 6.02602 1.78859 6.39454L8.55253 9.77651C8.83405 9.91727 9.16542 9.91727 9.44695 9.77651L16.2109 6.39454Z" fill="#B6B6B6"/> +</svg> \ No newline at end of file diff --git a/dist/img/icon/default/tag.svg b/dist/img/icon/default/tag.svg new file mode 100644 index 0000000000..faa240f673 --- /dev/null +++ b/dist/img/icon/default/tag.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M2.41406 10L10.4141 2L13.5856 2L15.9998 4.41421L15.9999 7.58579L7.99985 15.5858L2.41406 10ZM1.70696 9.29289L9.70696 1.29289C9.89449 1.10536 10.1488 1 10.4141 1H13.5856C13.8509 1 14.1052 1.10536 14.2927 1.29289L16.707 3.70711C16.8945 3.89464 16.9998 4.149 16.9998 4.41421V7.58579C16.9998 7.851 16.8945 8.10536 16.707 8.29289L8.70696 16.2929C8.31643 16.6834 7.68327 16.6834 7.29274 16.2929L1.70696 10.7071C1.31643 10.3166 1.31643 9.68342 1.70696 9.29289ZM12.5 6.5C13.0523 6.5 13.5 6.05228 13.5 5.5C13.5 4.94772 13.0523 4.5 12.5 4.5C11.9477 4.5 11.5 4.94772 11.5 5.5C11.5 6.05228 11.9477 6.5 12.5 6.5Z" fill="#B6B6B6"/> +</svg> \ No newline at end of file diff --git a/dist/img/icon/default/type.svg b/dist/img/icon/default/type.svg new file mode 100644 index 0000000000..88be9faabd --- /dev/null +++ b/dist/img/icon/default/type.svg @@ -0,0 +1,10 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0_6588_8717)"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9779 5.08264L14.2268 5.0114C14.3834 4.96658 14.5314 4.88278 14.6569 4.75727C15.0474 4.36675 15.0474 3.73358 14.6569 3.34306C14.2663 2.95253 13.6332 2.95253 13.2427 3.34306C13.1172 3.46856 13.0333 3.61654 12.9885 3.77312L12.9173 4.02198L12.0052 4.93405L9.35357 2.2824C9.15831 2.08714 8.84173 2.08714 8.64646 2.2824L6.70192 4.22694L6.72415 4.24917C7.03964 4.3397 7.33777 4.50924 7.5858 4.75727C8.36685 5.53832 8.36685 6.80465 7.5858 7.5857C6.80476 8.36675 5.53843 8.36675 4.75738 7.5857C4.50935 7.33767 4.3398 7.03954 4.24928 6.72405L4.22705 6.70182L2.2825 8.64636C2.08724 8.84162 2.08724 9.1582 2.2825 9.35347L4.93415 12.0051L4.02209 12.9172L3.77323 12.9884C3.61664 13.0332 3.46867 13.117 3.34316 13.2426C2.95264 13.6331 2.95264 14.2662 3.34316 14.6568C3.73369 15.0473 4.36685 15.0473 4.75738 14.6568C4.88288 14.5313 4.96669 14.3833 5.01151 14.2267L5.08275 13.9778L5.99481 13.0658L8.64646 15.7174C8.84173 15.9127 9.15831 15.9127 9.35357 15.7174L11.2981 13.7729L11.2759 13.7507C10.9604 13.6601 10.6623 13.4906 10.4142 13.2426C9.63318 12.4615 9.63318 11.1952 10.4142 10.4141C11.1953 9.63308 12.4616 9.63308 13.2427 10.4141C13.4907 10.6622 13.6602 10.9603 13.7508 11.2758L13.773 11.298L15.7175 9.35347C15.9128 9.1582 15.9128 8.84162 15.7175 8.64636L13.0659 5.99471L13.9779 5.08264ZM13.773 12.7122L12.8265 11.7657C12.8119 11.5311 12.7149 11.3006 12.5356 11.1212C12.145 10.7307 11.5119 10.7307 11.1213 11.1212C10.7308 11.5118 10.7308 12.1449 11.1213 12.5354C11.3007 12.7148 11.5312 12.8118 11.7658 12.8264L12.7123 13.7729L10.0607 16.4245C9.47489 17.0103 8.52514 17.0103 7.93936 16.4245L5.99481 14.48L5.97289 14.5019C5.88255 14.8175 5.71308 15.1153 5.46448 15.3639C4.68343 16.1449 3.41711 16.1449 2.63606 15.3639C1.85501 14.5828 1.85501 13.3165 2.63606 12.5354C2.88465 12.2869 3.1824 12.1174 3.49802 12.027L3.51994 12.0051L1.5754 10.0606C0.98961 9.47479 0.98961 8.52504 1.5754 7.93925L4.22705 5.2876L5.17354 6.23409C5.18817 6.46877 5.28515 6.69926 5.46448 6.87859C5.85501 7.26912 6.48817 7.26912 6.8787 6.87859C7.26922 6.48807 7.26922 5.8549 6.8787 5.46438C6.69937 5.28505 6.46887 5.18807 6.2342 5.17343L5.28771 4.22694L7.93936 1.57529C8.52514 0.989505 9.47489 0.989505 10.0607 1.57529L12.0052 3.51983L12.0271 3.49792C12.1175 3.1823 12.287 2.88454 12.5356 2.63595C13.3166 1.8549 14.5829 1.8549 15.364 2.63595C16.145 3.417 16.145 4.68333 15.364 5.46438C15.1154 5.71297 14.8176 5.88244 14.502 5.97279L14.4801 5.99471L16.4246 7.93925C17.0104 8.52504 17.0104 9.47479 16.4246 10.0606L13.773 12.7122Z" fill="#B6B6B6"/> +</g> +<defs> +<clipPath id="clip0_6588_8717"> +<rect width="18" height="18" fill="white"/> +</clipPath> +</defs> +</svg> \ No newline at end of file diff --git a/dist/img/icon/object/big/bookmark.svg b/dist/img/icon/object/big/bookmark.svg deleted file mode 100644 index 91264540d1..0000000000 --- a/dist/img/icon/object/big/bookmark.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8341 15.5313L22.9549 13.4104C24.7123 11.6531 24.7123 8.80382 22.9549 7.04646C21.1976 5.28911 18.3483 5.28911 16.591 7.04646L13.409 10.2284C11.6516 11.9858 11.6516 14.835 13.409 16.5924C14.1668 17.3502 15.1276 17.7812 16.1164 17.8855C15.9735 18.1846 15.7781 18.465 15.5303 18.7128L15.0365 19.2066C14.0517 18.9435 13.1209 18.4256 12.3483 17.6531C10.0052 15.3099 10.0052 11.5109 12.3483 9.16779L15.5303 5.9858C17.8735 3.64266 21.6724 3.64266 24.0156 5.9858C26.3587 8.32895 26.3587 12.1279 24.0156 14.4711L20.8339 17.6527C20.9339 16.9494 20.934 16.2346 20.8341 15.5313Z" fill="#B6B6B6"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M9.16582 14.4727L7.04507 16.5935C5.28771 18.3508 5.28771 21.2001 7.04507 22.9574C8.80243 24.7148 11.6517 24.7148 13.409 22.9574L16.591 19.7755C18.3484 18.0181 18.3484 15.1689 16.591 13.4115C15.8332 12.6537 14.8723 12.2227 13.8835 12.1184C14.0265 11.8193 14.2219 11.539 14.4696 11.2912L14.9636 10.7973C15.9483 11.0604 16.8791 11.5783 17.6517 12.3508C19.9948 14.694 19.9948 18.493 17.6517 20.8361L14.4697 24.0181C12.1265 26.3612 8.32756 26.3612 5.98441 24.0181C3.64126 21.675 3.64126 17.876 5.98441 15.5328L9.16598 12.3512C9.066 13.0546 9.06594 13.7694 9.16582 14.4727Z" fill="#B6B6B6"/> -</svg> diff --git a/dist/img/icon/object/big/chat.svg b/dist/img/icon/object/big/chat.svg deleted file mode 100644 index 39c518e249..0000000000 --- a/dist/img/icon/object/big/chat.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M8.16667 24C7.4537 24 7.25 23.4561 7.61111 23.0245C7.96296 22.5928 8.88889 21.6432 9.40741 20.8489C9.48148 20.7194 9.43519 20.5899 9.2963 20.5209C6.32407 19.036 4.5 16.6101 4.5 13.8475C4.5 9.50504 9.16667 6 15 6C20.8333 6 25.5 9.50504 25.5 13.8475C25.5 18.1468 21.0741 21.6863 14.3981 21.6863C14.2778 21.6863 14.1574 21.6777 14.037 21.6691C13.9074 21.6691 13.7778 21.7122 13.6204 21.8158C12.0463 22.8691 9.27778 24 8.16667 24Z" stroke="#B6B6B6" stroke-width="1.5"/> -</svg> diff --git a/dist/img/icon/object/big/page.svg b/dist/img/icon/object/big/page.svg deleted file mode 100644 index d1acfce456..0000000000 --- a/dist/img/icon/object/big/page.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M0.75 3C0.75 1.75736 1.75736 0.75 3 0.75H10.1893L17.25 7.81066V21C17.25 22.2426 16.2426 23.25 15 23.25H3C1.75736 23.25 0.75 22.2426 0.75 21V3Z" stroke="#B6B6B6" stroke-width="1.5"/> -<path d="M9.75 0.75V8.25H17.25" stroke="#B6B6B6" stroke-width="1.5"/> -</svg> diff --git a/dist/img/icon/object/big/set.svg b/dist/img/icon/object/big/set.svg deleted file mode 100644 index 09c54f8319..0000000000 --- a/dist/img/icon/object/big/set.svg +++ /dev/null @@ -1,14 +0,0 @@ -<svg width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" fill="#F2F2F2"/> -<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" fill="#F2F2F2"/> -<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" fill="#F2F2F2"/> -<path d="M24.4813 16.5792C25.0341 16.8556 25.0341 17.6444 24.4813 17.9208L14.3354 22.9938C14.1243 23.0993 13.8757 23.0993 13.6646 22.9938L3.51869 17.9208C2.96591 17.6444 2.96591 16.8556 3.51869 16.5792L13.6646 11.5062C13.8757 11.4007 14.1243 11.4007 14.3354 11.5062L24.4813 16.5792Z" stroke="#B6B6B6" stroke-width="1.5"/> -<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" fill="#F2F2F2"/> -<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" fill="#F2F2F2"/> -<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" fill="#F2F2F2"/> -<path d="M24.4813 11.3292C25.0341 11.6056 25.0341 12.3944 24.4813 12.6708L14.3354 17.7438C14.1243 17.8493 13.8757 17.8493 13.6646 17.7438L3.51869 12.6708C2.96591 12.3944 2.96591 11.6056 3.51869 11.3292L13.6646 6.25623C13.8757 6.15066 14.1243 6.15066 14.3354 6.25623L24.4813 11.3292Z" stroke="#B6B6B6" stroke-width="1.5"/> -<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" fill="#F2F2F2"/> -<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" fill="#F2F2F2"/> -<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" fill="#F2F2F2"/> -<path d="M24.4813 6.07918C25.0341 6.35557 25.0341 7.14443 24.4813 7.42082L14.3354 12.4938C14.1243 12.5993 13.8757 12.5993 13.6646 12.4938L3.51869 7.42082C2.96591 7.14443 2.96591 6.35557 3.51869 6.07918L13.6646 1.00623C13.8757 0.900658 14.1243 0.900658 14.3354 1.00623L24.4813 6.07918Z" stroke="#B6B6B6" stroke-width="1.5"/> -</svg> diff --git a/dist/img/icon/object/big/tag.svg b/dist/img/icon/object/big/tag.svg deleted file mode 100644 index 9d326ca154..0000000000 --- a/dist/img/icon/object/big/tag.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M1.59099 12.9697L13.591 0.96967L13.0624 0.441079L13.591 0.96967C13.7316 0.829018 13.9224 0.75 14.1213 0.75H18.8787C19.0776 0.75 19.2684 0.829018 19.409 0.969668L23.0303 4.59099L23.5607 4.06066L23.0303 4.59099C23.171 4.73164 23.25 4.92241 23.25 5.12132V9.87868C23.25 10.0776 23.171 10.2684 23.0303 10.409L11.0303 22.409C10.7374 22.7019 10.2626 22.7019 9.96967 22.409L1.59099 14.0303C1.2981 13.7374 1.2981 13.2626 1.59099 12.9697Z" stroke="#B6B6B6" stroke-width="1.5"/> -<circle cx="17.25" cy="6.75" r="1.5" fill="#B6B6B6"/> -</svg> diff --git a/dist/img/icon/object/big/type.svg b/dist/img/icon/object/big/type.svg deleted file mode 100644 index 2aed77f13d..0000000000 --- a/dist/img/icon/object/big/type.svg +++ /dev/null @@ -1,34 +0,0 @@ -<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g clip-path="url(#clip0_6542_2595)"> -<rect x="15" y="3.33044" width="16.5" height="16.5" rx="1.5" transform="rotate(45 15 3.33044)" stroke="#B6B6B6" stroke-width="1.5"/> -<mask id="path-2-inside-1_6542_2595" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2544 10.4576C23.7272 10.322 24.1732 10.0679 24.5456 9.6955C25.7172 8.52393 25.7172 6.62444 24.5456 5.45286C23.3741 4.28129 21.4746 4.28129 20.303 5.45286C19.9297 5.8262 19.6753 6.27346 19.5399 6.74753L18.4468 7.84062L22.1591 11.5529L23.2544 10.4576Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M23.2544 10.4576C23.7272 10.322 24.1732 10.0679 24.5456 9.6955C25.7172 8.52393 25.7172 6.62444 24.5456 5.45286C23.3741 4.28129 21.4746 4.28129 20.303 5.45286C19.9297 5.8262 19.6753 6.27346 19.5399 6.74753L18.4468 7.84062L22.1591 11.5529L23.2544 10.4576Z" fill="#F2F2F2"/> -<path d="M23.2544 10.4576L22.8407 9.0158L22.468 9.12274L22.1937 9.39697L23.2544 10.4576ZM19.5399 6.74753L20.6005 7.80819L20.8754 7.53329L20.9822 7.15947L19.5399 6.74753ZM18.4468 7.84062L17.3861 6.77996L16.3255 7.84062L17.3861 8.90128L18.4468 7.84062ZM22.1591 11.5529L21.0984 12.6136L22.1591 13.6742L23.2198 12.6136L22.1591 11.5529ZM23.485 8.63484C23.2969 8.82288 23.0753 8.9485 22.8407 9.0158L23.6681 11.8995C24.3791 11.6955 25.0495 11.313 25.6063 10.7562L23.485 8.63484ZM23.485 6.51352C24.0708 7.09931 24.0708 8.04906 23.485 8.63484L25.6063 10.7562C27.3637 8.9988 27.3637 6.14956 25.6063 4.3922L23.485 6.51352ZM21.3637 6.51352C21.9494 5.92774 22.8992 5.92774 23.485 6.51352L25.6063 4.3922C23.8489 2.63484 20.9997 2.63484 19.2423 4.3922L21.3637 6.51352ZM20.9822 7.15947C21.0494 6.92428 21.1752 6.70201 21.3637 6.51352L19.2423 4.3922C18.6841 4.9504 18.3012 5.62264 18.0976 6.33558L20.9822 7.15947ZM19.5075 8.90128L20.6005 7.80819L18.4792 5.68687L17.3861 6.77996L19.5075 8.90128ZM23.2198 10.4923L19.5075 6.77996L17.3861 8.90128L21.0984 12.6136L23.2198 10.4923ZM22.1937 9.39697L21.0984 10.4923L23.2198 12.6136L24.3151 11.5183L22.1937 9.39697Z" fill="#B6B6B6" mask="url(#path-2-inside-1_6542_2595)"/> -<rect x="21.6289" y="6.77588" width="2.25" height="3" transform="rotate(45 21.6289 6.77588)" fill="#F2F2F2"/> -<mask id="path-5-inside-2_6542_2595" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M7.8724 11.5799C8.00779 12.054 8.26217 12.5014 8.63555 12.8747C9.80712 14.0463 11.7066 14.0463 12.8782 12.8747C14.0498 11.7032 14.0498 9.80367 12.8782 8.6321C12.5058 8.2597 12.0599 8.00568 11.5871 7.87002L10.4917 6.77462L6.77941 10.4869L7.8724 11.5799Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M7.8724 11.5799C8.00779 12.054 8.26217 12.5014 8.63555 12.8747C9.80712 14.0463 11.7066 14.0463 12.8782 12.8747C14.0498 11.7032 14.0498 9.80367 12.8782 8.6321C12.5058 8.2597 12.0599 8.00568 11.5871 7.87002L10.4917 6.77462L6.77941 10.4869L7.8724 11.5799Z" fill="#F2F2F2"/> -<path d="M7.8724 11.5799L9.31475 11.1681L9.20799 10.7942L8.93306 10.5193L7.8724 11.5799ZM11.5871 7.87002L10.5265 8.93068L10.8007 9.20487L11.1734 9.31183L11.5871 7.87002ZM10.4917 6.77462L11.5524 5.71396L10.4917 4.6533L9.43106 5.71396L10.4917 6.77462ZM6.77941 10.4869L5.71875 9.42627L4.65809 10.4869L5.71875 11.5476L6.77941 10.4869ZM9.69621 11.8141C9.50771 11.6256 9.38191 11.4033 9.31475 11.1681L6.43005 11.9918C6.63366 12.7048 7.01663 13.3771 7.57489 13.9354L9.69621 11.8141ZM11.8175 11.8141C11.2317 12.3999 10.282 12.3999 9.69621 11.8141L7.57489 13.9354C9.33225 15.6928 12.1815 15.6928 13.9389 13.9354L11.8175 11.8141ZM11.8175 9.69276C12.4033 10.2785 12.4033 11.2283 11.8175 11.8141L13.9389 13.9354C15.6962 12.178 15.6962 9.3288 13.9389 7.57144L11.8175 9.69276ZM11.1734 9.31183C11.4079 9.37913 11.6295 9.50474 11.8175 9.69276L13.9389 7.57144C13.3821 7.01466 12.7118 6.63222 12.0009 6.42821L11.1734 9.31183ZM9.43106 7.83528L10.5265 8.93068L12.6478 6.80936L11.5524 5.71396L9.43106 7.83528ZM7.84007 11.5476L11.5524 7.83528L9.43106 5.71396L5.71875 9.42627L7.84007 11.5476ZM8.93306 10.5193L7.84007 9.42627L5.71875 11.5476L6.81174 12.6406L8.93306 10.5193Z" fill="#B6B6B6" mask="url(#path-5-inside-2_6542_2595)"/> -<rect x="11.5527" y="9.96045" width="2.25" height="3" transform="rotate(135 11.5527 9.96045)" fill="#F2F2F2"/> -<mask id="path-8-inside-3_6542_2595" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4126 22.1239C17.9398 21.9882 17.4938 21.7342 17.1214 21.3618C15.9498 20.1902 15.9498 18.2907 17.1214 17.1191C18.2929 15.9476 20.1924 15.9476 21.364 17.1191C21.7373 17.4925 21.9917 17.9397 22.1271 18.4138L23.2202 19.5069L19.5079 23.2192L18.4126 22.1239Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M18.4126 22.1239C17.9398 21.9882 17.4938 21.7342 17.1214 21.3618C15.9498 20.1902 15.9498 18.2907 17.1214 17.1191C18.2929 15.9476 20.1924 15.9476 21.364 17.1191C21.7373 17.4925 21.9917 17.9397 22.1271 18.4138L23.2202 19.5069L19.5079 23.2192L18.4126 22.1239Z" fill="#F2F2F2"/> -<path d="M18.4126 22.1239L18.8262 20.6821L19.199 20.789L19.4732 21.0632L18.4126 22.1239ZM22.1271 18.4138L21.0664 19.4744L20.7915 19.1995L20.6848 18.8257L22.1271 18.4138ZM23.2202 19.5069L24.2809 18.4462L25.3415 19.5069L24.2809 20.5675L23.2202 19.5069ZM19.5079 23.2192L20.5685 24.2798L19.5079 25.3405L18.4472 24.2798L19.5079 23.2192ZM18.182 20.3011C18.3701 20.4891 18.5917 20.6148 18.8262 20.6821L17.9989 23.5657C17.2879 23.3617 16.6175 22.9793 16.0607 22.4224L18.182 20.3011ZM18.182 18.1798C17.5962 18.7656 17.5962 19.7153 18.182 20.3011L16.0607 22.4224C14.3033 20.6651 14.3033 17.8158 16.0607 16.0585L18.182 18.1798ZM20.3033 18.1798C19.7175 17.594 18.7678 17.594 18.182 18.1798L16.0607 16.0585C17.8181 14.3011 20.6673 14.3011 22.4247 16.0585L20.3033 18.1798ZM20.6848 18.8257C20.6176 18.5905 20.4918 18.3683 20.3033 18.1798L22.4247 16.0585C22.9829 16.6167 23.3658 17.2889 23.5694 18.0018L20.6848 18.8257ZM22.1595 20.5675L21.0664 19.4744L23.1878 17.3531L24.2809 18.4462L22.1595 20.5675ZM18.4472 22.1585L22.1595 18.4462L24.2809 20.5675L20.5685 24.2798L18.4472 22.1585ZM19.4732 21.0632L20.5685 22.1585L18.4472 24.2798L17.3519 23.1845L19.4732 21.0632Z" fill="#B6B6B6" mask="url(#path-8-inside-3_6542_2595)"/> -<rect width="2.25" height="3" transform="matrix(-0.707107 0.707107 0.707107 0.707107 20.0381 18.4431)" fill="#F2F2F2"/> -<mask id="path-11-inside-4_6542_2595" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4601 23.2515C10.3247 23.7257 10.0703 24.173 9.69697 24.5464C8.5254 25.7179 6.6259 25.7179 5.45433 24.5464C4.28276 23.3748 4.28276 21.4753 5.45433 20.3037C5.82672 19.9313 6.27267 19.6773 6.7454 19.5416L7.8408 18.4463L11.5531 22.1586L10.4601 23.2515Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4601 23.2515C10.3247 23.7257 10.0703 24.173 9.69697 24.5464C8.5254 25.7179 6.6259 25.7179 5.45433 24.5464C4.28276 23.3748 4.28276 21.4753 5.45433 20.3037C5.82672 19.9313 6.27267 19.6773 6.7454 19.5416L7.8408 18.4463L11.5531 22.1586L10.4601 23.2515Z" fill="#F2F2F2"/> -<path d="M10.4601 23.2515L9.01777 22.8397L9.12453 22.4658L9.39946 22.1909L10.4601 23.2515ZM6.7454 19.5416L7.80606 20.6023L7.53187 20.8765L7.15914 20.9835L6.7454 19.5416ZM7.8408 18.4463L6.78014 17.3856L7.8408 16.3249L8.90146 17.3856L7.8408 18.4463ZM11.5531 22.1586L12.6138 21.0979L13.6744 22.1586L12.6138 23.2192L11.5531 22.1586ZM8.63631 23.4857C8.82481 23.2972 8.95061 23.0749 9.01777 22.8397L11.9025 23.6634C11.6989 24.3764 11.3159 25.0488 10.7576 25.607L8.63631 23.4857ZM6.51499 23.4857C7.10077 24.0715 8.05052 24.0715 8.63631 23.4857L10.7576 25.607C9.00027 27.3644 6.15103 27.3644 4.39367 25.607L6.51499 23.4857ZM6.51499 21.3644C5.9292 21.9502 5.9292 22.8999 6.51499 23.4857L4.39367 25.607C2.63631 23.8497 2.63631 21.0004 4.39367 19.2431L6.51499 21.3644ZM7.15914 20.9835C6.92462 21.0508 6.703 21.1764 6.51499 21.3644L4.39367 19.2431C4.95045 18.6863 5.62071 18.3039 6.33165 18.0998L7.15914 20.9835ZM8.90146 19.5069L7.80606 20.6023L5.68474 18.481L6.78014 17.3856L8.90146 19.5069ZM10.4924 23.2192L6.78014 19.5069L8.90146 17.3856L12.6138 21.0979L10.4924 23.2192ZM9.39946 22.1909L10.4924 21.0979L12.6138 23.2192L11.5208 24.3122L9.39946 22.1909Z" fill="#B6B6B6" mask="url(#path-11-inside-4_6542_2595)"/> -<rect width="2.25" height="3" transform="matrix(0.707107 0.707107 0.707107 -0.707107 6.77979 21.6311)" fill="#F2F2F2"/> -</g> -<defs> -<clipPath id="clip0_6542_2595"> -<rect width="30" height="30" fill="white"/> -</clipPath> -</defs> -</svg> diff --git a/dist/img/icon/object/small/bookmark.svg b/dist/img/icon/object/small/bookmark.svg deleted file mode 100644 index c7311dc9a9..0000000000 --- a/dist/img/icon/object/small/bookmark.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8895 10.3538L15.3034 8.9398C16.475 7.76822 16.475 5.86873 15.3034 4.69715C14.1319 3.52558 12.2324 3.52558 11.0608 4.69715L8.93949 6.81848C7.76792 7.99005 7.76792 9.88954 8.93949 11.0611C9.44476 11.5664 10.0854 11.8537 10.7447 11.9232C10.6494 12.1228 10.519 12.3099 10.3537 12.4753L10.0249 12.804C9.36827 12.6287 8.74755 12.2834 8.23238 11.7682C6.67028 10.2061 6.67028 7.67347 8.23238 6.11137L10.3537 3.99005C11.9158 2.42795 14.4485 2.42795 16.0106 3.99005C17.5727 5.55215 17.5727 8.08481 16.0106 9.6469L13.8895 11.7679C13.9561 11.2991 13.9561 10.8226 13.8895 10.3538Z" fill="#B6B6B6"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M6.11102 9.6472L4.69704 11.0612C3.52547 12.2328 3.52547 14.1322 4.69704 15.3038C5.86861 16.4754 7.76811 16.4754 8.93968 15.3038L11.061 13.1825C12.2326 12.0109 12.2326 10.1114 11.061 8.93986C10.5557 8.43459 9.91506 8.14723 9.25579 8.07778C9.35113 7.87814 9.48147 7.69104 9.64682 7.52568L9.97556 7.19695C10.6322 7.37232 11.2529 7.71759 11.7681 8.23275C13.3302 9.79485 13.3302 12.3275 11.7681 13.8896L9.64679 16.0109C8.08469 17.573 5.55203 17.573 3.98993 16.0109C2.42784 14.4488 2.42784 11.9162 3.98993 10.3541L6.11096 8.23305C6.04438 8.70189 6.0444 9.17837 6.11102 9.6472Z" fill="#B6B6B6"/> -</svg> diff --git a/dist/img/icon/object/small/chat.svg b/dist/img/icon/object/small/chat.svg deleted file mode 100644 index b152243030..0000000000 --- a/dist/img/icon/object/small/chat.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M5.44444 16C4.96914 16 4.83333 15.6374 5.07407 15.3496C5.30864 15.0619 5.92593 14.4288 6.2716 13.8993C6.32099 13.8129 6.29012 13.7266 6.19753 13.6806C4.21605 12.6906 3 11.0734 3 9.23165C3 6.33669 6.11111 4 10 4C13.8889 4 17 6.33669 17 9.23165C17 12.0978 14.0494 14.4576 9.59877 14.4576C9.51852 14.4576 9.43827 14.4518 9.35802 14.446C9.2716 14.446 9.18519 14.4748 9.08025 14.5439C8.03086 15.246 6.18519 16 5.44444 16Z" stroke="#B6B6B6"/> -</svg> diff --git a/dist/img/icon/object/small/page.svg b/dist/img/icon/object/small/page.svg deleted file mode 100644 index 489c23389b..0000000000 --- a/dist/img/icon/object/small/page.svg +++ /dev/null @@ -1,4 +0,0 @@ -<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M4.5 4C4.5 3.17157 5.17157 2.5 6 2.5H10.7929L15.5 7.20711V16C15.5 16.8284 14.8284 17.5 14 17.5H6C5.17157 17.5 4.5 16.8284 4.5 16V4Z" fill="white" stroke="#B6B6B6"/> -<path d="M10.5 2.5V7.5H15.5" stroke="#B6B6B6"/> -</svg> diff --git a/dist/img/icon/object/small/set.svg b/dist/img/icon/object/small/set.svg deleted file mode 100644 index 1cf05091d4..0000000000 --- a/dist/img/icon/object/small/set.svg +++ /dev/null @@ -1,14 +0,0 @@ -<svg width="18" height="16" viewBox="0 0 18 16" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" fill="white"/> -<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" fill="white"/> -<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" fill="white"/> -<path d="M15.9875 11.0528C16.3561 11.237 16.3561 11.763 15.9875 11.9472L9.22361 15.3292C9.08284 15.3996 8.91716 15.3996 8.77639 15.3292L2.01246 11.9472C1.64394 11.763 1.64393 11.237 2.01246 11.0528L8.77639 7.67082C8.91716 7.60044 9.08284 7.60044 9.22361 7.67082L15.9875 11.0528Z" stroke="#B6B6B6"/> -<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" fill="white"/> -<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" fill="white"/> -<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" fill="white"/> -<path d="M15.9875 7.55279C16.3561 7.73705 16.3561 8.26295 15.9875 8.44721L9.22361 11.8292C9.08284 11.8996 8.91716 11.8996 8.77639 11.8292L2.01246 8.44721C1.64394 8.26295 1.64393 7.73705 2.01246 7.55279L8.77639 4.17082C8.91716 4.10044 9.08284 4.10044 9.22361 4.17082L15.9875 7.55279Z" stroke="#B6B6B6"/> -<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" fill="white"/> -<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" fill="white"/> -<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" fill="white"/> -<path d="M15.9875 4.05279C16.3561 4.23705 16.3561 4.76295 15.9875 4.94721L9.22361 8.32918C9.08284 8.39956 8.91716 8.39956 8.77639 8.32918L2.01246 4.94721C1.64394 4.76295 1.64393 4.23705 2.01246 4.05279L8.77639 0.67082C8.91716 0.600439 9.08284 0.600439 9.22361 0.67082L15.9875 4.05279Z" stroke="#B6B6B6"/> -</svg> diff --git a/dist/img/icon/object/small/tag.svg b/dist/img/icon/object/small/tag.svg deleted file mode 100644 index eb105754da..0000000000 --- a/dist/img/icon/object/small/tag.svg +++ /dev/null @@ -1,3 +0,0 @@ -<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M1.06066 8.64645L9.06066 0.646447C9.15443 0.552679 9.28161 0.5 9.41421 0.5H12.5858C12.7184 0.5 12.8456 0.552679 12.9393 0.646447L15.3536 3.06066C15.4473 3.15443 15.5 3.28161 15.5 3.41421V6.58579C15.5 6.7184 15.4473 6.84557 15.3536 6.93934L7.35355 14.9393C7.15829 15.1346 6.84171 15.1346 6.64645 14.9393L1.06066 9.35355C0.865398 9.15829 0.865398 8.84171 1.06066 8.64645Z" stroke="#B6B6B6"/> -</svg> \ No newline at end of file diff --git a/dist/img/icon/object/small/type.svg b/dist/img/icon/object/small/type.svg deleted file mode 100644 index e3ac6717d3..0000000000 --- a/dist/img/icon/object/small/type.svg +++ /dev/null @@ -1,34 +0,0 @@ -<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g clip-path="url(#clip0_6542_2567)"> -<rect x="10" y="2.22176" width="11" height="11" rx="1" transform="rotate(45 10 2.22176)" stroke="#B6B6B6"/> -<mask id="path-2-inside-1_6542_2567" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M15.502 6.97273C15.8176 6.88238 16.1153 6.71291 16.3639 6.46432C17.145 5.68327 17.145 4.41694 16.3639 3.63589C15.5829 2.85484 14.3165 2.85484 13.5355 3.63589C13.2869 3.88449 13.1174 4.18224 13.0271 4.49786L12.2981 5.22688L13.5355 6.46432L14.7729 7.70176L15.502 6.97273Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M15.502 6.97273C15.8176 6.88238 16.1153 6.71291 16.3639 6.46432C17.145 5.68327 17.145 4.41694 16.3639 3.63589C15.5829 2.85484 14.3165 2.85484 13.5355 3.63589C13.2869 3.88449 13.1174 4.18224 13.0271 4.49786L12.2981 5.22688L13.5355 6.46432L14.7729 7.70176L15.502 6.97273Z" fill="white"/> -<path d="M15.502 6.97273L15.2268 6.01135L14.9779 6.08258L14.7948 6.26562L15.502 6.97273ZM13.0271 4.49786L13.7342 5.20496L13.9172 5.02192L13.9885 4.77306L13.0271 4.49786ZM12.2981 5.22688L11.5909 4.51978L10.8838 5.22688L11.5909 5.93399L12.2981 5.22688ZM14.7729 7.70176L14.0658 8.40886L14.7729 9.11597L15.48 8.40886L14.7729 7.70176ZM15.6568 5.75721C15.5313 5.88272 15.3833 5.96652 15.2268 6.01135L15.7772 7.93412C16.2518 7.79824 16.6993 7.54311 17.071 7.17143L15.6568 5.75721ZM15.6568 4.343C16.0473 4.73352 16.0473 5.36669 15.6568 5.75721L17.071 7.17143C18.2426 5.99985 18.2426 4.10036 17.071 2.92879L15.6568 4.343ZM14.2426 4.343C14.6331 3.95248 15.2663 3.95248 15.6568 4.343L17.071 2.92879C15.8995 1.75721 14 1.75721 12.8284 2.92879L14.2426 4.343ZM13.9885 4.77306C14.0333 4.61648 14.1171 4.46851 14.2426 4.343L12.8284 2.92879C12.4567 3.30047 12.2016 3.748 12.0657 4.22265L13.9885 4.77306ZM13.0052 5.93399L13.7342 5.20496L12.32 3.79075L11.5909 4.51978L13.0052 5.93399ZM14.2426 5.75721L13.0052 4.51978L11.5909 5.93399L12.8284 7.17143L14.2426 5.75721ZM15.48 6.99465L14.2426 5.75721L12.8284 7.17143L14.0658 8.40886L15.48 6.99465ZM14.7948 6.26562L14.0658 6.99465L15.48 8.40886L16.2091 7.67984L14.7948 6.26562Z" fill="#B6B6B6" mask="url(#path-2-inside-1_6542_2567)"/> -<rect x="14.4194" y="4.51978" width="1.5" height="2" transform="rotate(45 14.4194 4.51978)" fill="white"/> -<mask id="path-5-inside-2_6542_2567" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M5.24895 7.72364C5.3393 8.03926 5.50877 8.33701 5.75736 8.5856C6.53841 9.36665 7.80474 9.36665 8.58579 8.5856C9.36684 7.80455 9.36684 6.53822 8.58579 5.75717C8.33719 5.50858 8.03944 5.33911 7.72382 5.24876L6.9948 4.51974L5.75736 5.75717L4.51992 6.99461L5.24895 7.72364Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M5.24895 7.72364C5.3393 8.03926 5.50877 8.33701 5.75736 8.5856C6.53841 9.36665 7.80474 9.36665 8.58579 8.5856C9.36684 7.80455 9.36684 6.53822 8.58579 5.75717C8.33719 5.50858 8.03944 5.33911 7.72382 5.24876L6.9948 4.51974L5.75736 5.75717L4.51992 6.99461L5.24895 7.72364Z" fill="white"/> -<path d="M5.24895 7.72364L6.21033 7.44843L6.1391 7.19957L5.95606 7.01653L5.24895 7.72364ZM7.72382 5.24876L7.01672 5.95587L7.19976 6.13891L7.44862 6.21015L7.72382 5.24876ZM6.9948 4.51974L7.7019 3.81263L6.9948 3.10552L6.28769 3.81263L6.9948 4.51974ZM4.51992 6.99461L3.81282 6.2875L3.10571 6.99461L3.81282 7.70172L4.51992 6.99461ZM6.46447 7.87849C6.33896 7.75299 6.25516 7.60501 6.21033 7.44843L4.28756 7.99884C4.42344 8.4735 4.67857 8.92103 5.05025 9.29271L6.46447 7.87849ZM7.87868 7.87849C7.48816 8.26902 6.85499 8.26902 6.46447 7.87849L5.05025 9.29271C6.22183 10.4643 8.12132 10.4643 9.29289 9.29271L7.87868 7.87849ZM7.87868 6.46428C8.2692 6.8548 8.2692 7.48797 7.87868 7.87849L9.29289 9.29271C10.4645 8.12113 10.4645 6.22164 9.29289 5.05007L7.87868 6.46428ZM7.44862 6.21015C7.6052 6.25497 7.75317 6.33877 7.87868 6.46428L9.29289 5.05007C8.92121 4.67839 8.47368 4.42325 7.99903 4.28738L7.44862 6.21015ZM6.28769 5.22684L7.01672 5.95587L8.43093 4.54166L7.7019 3.81263L6.28769 5.22684ZM6.46447 6.46428L7.7019 5.22684L6.28769 3.81263L5.05025 5.05007L6.46447 6.46428ZM5.22703 7.70172L6.46447 6.46428L5.05025 5.05007L3.81282 6.2875L5.22703 7.70172ZM5.95606 7.01653L5.22703 6.2875L3.81282 7.70172L4.54184 8.43074L5.95606 7.01653Z" fill="#B6B6B6" mask="url(#path-5-inside-2_6542_2567)"/> -<rect x="7.70166" y="6.64111" width="1.5" height="2" transform="rotate(135 7.70166 6.64111)" fill="white"/> -<mask id="path-8-inside-3_6542_2567" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2759 14.7511C11.9603 14.6607 11.6625 14.4912 11.4139 14.2426C10.6329 13.4616 10.6329 12.1953 11.4139 11.4142C12.195 10.6332 13.4613 10.6332 14.2423 11.4142C14.4909 11.6628 14.6604 11.9606 14.7507 12.2762L15.4798 13.0052L14.2423 14.2426L13.0049 15.4801L12.2759 14.7511Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2759 14.7511C11.9603 14.6607 11.6625 14.4912 11.4139 14.2426C10.6329 13.4616 10.6329 12.1953 11.4139 11.4142C12.195 10.6332 13.4613 10.6332 14.2423 11.4142C14.4909 11.6628 14.6604 11.9606 14.7507 12.2762L15.4798 13.0052L14.2423 14.2426L13.0049 15.4801L12.2759 14.7511Z" fill="white"/> -<path d="M12.2759 14.7511L12.5511 13.7897L12.7999 13.8609L12.983 14.0439L12.2759 14.7511ZM14.7507 12.2762L14.0436 12.9833L13.8606 12.8002L13.7894 12.5514L14.7507 12.2762ZM15.4798 13.0052L16.1869 12.2981L16.894 13.0052L16.1869 13.7123L15.4798 13.0052ZM13.0049 15.4801L13.712 16.1872L13.0049 16.8943L12.2978 16.1872L13.0049 15.4801ZM12.121 13.5355C12.2465 13.661 12.3945 13.7448 12.5511 13.7897L12.0007 15.7124C11.526 15.5766 11.0785 15.3214 10.7068 14.9497L12.121 13.5355ZM12.121 12.1213C11.7305 12.5118 11.7305 13.145 12.121 13.5355L10.7068 14.9497C9.53523 13.7782 9.53523 11.8787 10.7068 10.7071L12.121 12.1213ZM13.5352 12.1213C13.1447 11.7308 12.5115 11.7308 12.121 12.1213L10.7068 10.7071C11.8784 9.53553 13.7779 9.53553 14.9494 10.7071L13.5352 12.1213ZM13.7894 12.5514C13.7445 12.3948 13.6607 12.2468 13.5352 12.1213L14.9494 10.7071C15.3211 11.0788 15.5763 11.5263 15.7121 12.001L13.7894 12.5514ZM14.7727 13.7123L14.0436 12.9833L15.4579 11.5691L16.1869 12.2981L14.7727 13.7123ZM13.5352 13.5355L14.7727 12.2981L16.1869 13.7123L14.9494 14.9497L13.5352 13.5355ZM12.2978 14.773L13.5352 13.5355L14.9494 14.9497L13.712 16.1872L12.2978 14.773ZM12.983 14.0439L13.712 14.773L12.2978 16.1872L11.5688 15.4582L12.983 14.0439Z" fill="#B6B6B6" mask="url(#path-8-inside-3_6542_2567)"/> -<rect width="1.5" height="2" transform="matrix(-0.707107 0.707107 0.707107 0.707107 13.3584 12.2981)" fill="white"/> -<mask id="path-11-inside-4_6542_2567" fill="white"> -<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97224 15.502C6.88189 15.8176 6.71242 16.1153 6.46383 16.3639C5.68278 17.145 4.41645 17.145 3.6354 16.3639C2.85436 15.5829 2.85436 14.3165 3.6354 13.5355C3.884 13.2869 4.18175 13.1174 4.49737 13.0271L5.2264 12.2981L6.46383 13.5355L7.70127 14.7729L6.97224 15.502Z"/> -</mask> -<path fill-rule="evenodd" clip-rule="evenodd" d="M6.97224 15.502C6.88189 15.8176 6.71242 16.1153 6.46383 16.3639C5.68278 17.145 4.41645 17.145 3.6354 16.3639C2.85436 15.5829 2.85436 14.3165 3.6354 13.5355C3.884 13.2869 4.18175 13.1174 4.49737 13.0271L5.2264 12.2981L6.46383 13.5355L7.70127 14.7729L6.97224 15.502Z" fill="white"/> -<path d="M6.97224 15.502L6.01086 15.2268L6.0821 14.9779L6.26514 14.7948L6.97224 15.502ZM4.49737 13.0271L5.20448 13.7342L5.02144 13.9172L4.77257 13.9885L4.49737 13.0271ZM5.2264 12.2981L4.51929 11.5909L5.2264 10.8838L5.9335 11.5909L5.2264 12.2981ZM7.70127 14.7729L8.40838 14.0658L9.11548 14.7729L8.40838 15.48L7.70127 14.7729ZM5.75673 15.6568C5.88223 15.5313 5.96603 15.3833 6.01086 15.2268L7.93363 15.7772C7.79775 16.2518 7.54262 16.6993 7.17094 17.071L5.75673 15.6568ZM4.34251 15.6568C4.73304 16.0473 5.3662 16.0473 5.75673 15.6568L7.17094 17.071C5.99937 18.2426 4.09987 18.2426 2.9283 17.071L4.34251 15.6568ZM4.34251 14.2426C3.95199 14.6331 3.95199 15.2663 4.34251 15.6568L2.9283 17.071C1.75673 15.8995 1.75673 14 2.9283 12.8284L4.34251 14.2426ZM4.77257 13.9885C4.61599 14.0333 4.46802 14.1171 4.34251 14.2426L2.9283 12.8284C3.29998 12.4567 3.74751 12.2016 4.22217 12.0657L4.77257 13.9885ZM5.9335 13.0052L5.20448 13.7342L3.79026 12.32L4.51929 11.5909L5.9335 13.0052ZM5.75673 14.2426L4.51929 13.0052L5.9335 11.5909L7.17094 12.8284L5.75673 14.2426ZM6.99416 15.48L5.75673 14.2426L7.17094 12.8284L8.40838 14.0658L6.99416 15.48ZM6.26514 14.7948L6.99416 14.0658L8.40838 15.48L7.67935 16.2091L6.26514 14.7948Z" fill="#B6B6B6" mask="url(#path-11-inside-4_6542_2567)"/> -<rect width="1.5" height="2" transform="matrix(0.707107 0.707107 0.707107 -0.707107 4.51953 14.4194)" fill="white"/> -</g> -<defs> -<clipPath id="clip0_6542_2567"> -<rect width="20" height="20" fill="white"/> -</clipPath> -</defs> -</svg> diff --git a/src/scss/component/iconObject.scss b/src/scss/component/iconObject.scss index db6963d0a6..4b8f21284a 100644 --- a/src/scss/component/iconObject.scss +++ b/src/scss/component/iconObject.scss @@ -95,9 +95,6 @@ } .iconObject.c40.isRelation, .iconObject.c48.isRelation { border-radius: 8px; background-color: var(--color-shape-tertiary); } -.iconObject.c40.withDefault, .iconObject.c48.withDefault { border-radius: 8px; } - -.iconObject.withDefault { background-color: var(--color-shape-tertiary); } .iconObject.withImage { border-radius: 2px !important; background-color: unset !important; } .iconObject.withImage.c64, diff --git a/src/ts/component/block/chat/attachment/index.tsx b/src/ts/component/block/chat/attachment/index.tsx index 403fea2cee..e8346db830 100644 --- a/src/ts/component/block/chat/attachment/index.tsx +++ b/src/ts/component/block/chat/attachment/index.tsx @@ -130,7 +130,7 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro return ( <div className="clickable" onClick={this.onOpen}> - <IconObject object={object} size={48} iconSize={iconSize} withDefault={true} /> + <IconObject object={object} size={48} iconSize={iconSize} /> <div className="info"> <ObjectName object={object} /> @@ -147,7 +147,7 @@ const ChatAttachment = observer(class ChatAttachment extends React.Component<Pro <div className="clickable" onClick={this.onOpen}> <div className="info"> <div className="descr"> - <IconObject object={object} size={14} withDefault={true} /> + <IconObject object={object} size={14} /> <div className="url">{U.Common.shortUrl(object.source)}</div> </div> <ObjectName object={object} /> diff --git a/src/ts/component/menu/block/link.tsx b/src/ts/component/menu/block/link.tsx index 3951e217a4..05c3b06801 100644 --- a/src/ts/component/menu/block/link.tsx +++ b/src/ts/component/menu/block/link.tsx @@ -96,7 +96,6 @@ const MenuBlockLink = observer(class MenuBlockLink extends React.Component<I.Men description={type ? type.name : undefined} style={param.style} iconSize={40} - withDefault={true} className={cn.join(' ')} /> ); diff --git a/src/ts/component/menu/item/vertical.tsx b/src/ts/component/menu/item/vertical.tsx index 6d269accd4..0294c00363 100644 --- a/src/ts/component/menu/item/vertical.tsx +++ b/src/ts/component/menu/item/vertical.tsx @@ -57,7 +57,7 @@ class MenuItemVertical extends React.Component<I.MenuItem> { }; if (object) { - iconMainElement = <IconObject object={object} size={iconSize} withDefault={withDefault} />; + iconMainElement = <IconObject object={object} size={iconSize} />; if (object.isHidden) { cn.push('isHidden'); diff --git a/src/ts/component/menu/search/object.tsx b/src/ts/component/menu/search/object.tsx index 4eaa61ab04..32376c2257 100644 --- a/src/ts/component/menu/search/object.tsx +++ b/src/ts/component/menu/search/object.tsx @@ -93,7 +93,6 @@ const MenuSearchObject = observer(class MenuSearchObject extends React.Component if (isBig && !item.isAdd) { props.withDescription = true; - props.withDefault = true; props.iconSize = 40; } else { props.caption = (type ? type.name : undefined); diff --git a/src/ts/component/menu/select.tsx b/src/ts/component/menu/select.tsx index 2c6d905aa0..a4b8d27cea 100644 --- a/src/ts/component/menu/select.tsx +++ b/src/ts/component/menu/select.tsx @@ -98,7 +98,6 @@ const MenuSelect = observer(class MenuSelect extends React.Component<I.Menu> { onClick={e => this.onClick(e, item)} onMouseEnter={e => this.onMouseEnter(e, item)} style={item.style} - withDefault={withDefault} /> ); }; diff --git a/src/ts/component/page/elements/head/simple.tsx b/src/ts/component/page/elements/head/simple.tsx index be5babdab0..9426363966 100644 --- a/src/ts/component/page/elements/head/simple.tsx +++ b/src/ts/component/page/elements/head/simple.tsx @@ -128,7 +128,6 @@ const HeadSimple = observer(class Controls extends React.Component<Props> { size={32} iconSize={32} object={object} - withDefault={true} canEdit={canEditIcon} /> ) : ''} diff --git a/src/ts/component/page/main/empty.tsx b/src/ts/component/page/main/empty.tsx index c16a400e7d..1f8a11ed85 100644 --- a/src/ts/component/page/main/empty.tsx +++ b/src/ts/component/page/main/empty.tsx @@ -30,7 +30,7 @@ const PageMainEmpty = observer(class PageMainEmpty extends React.Component<I.Pag /> <div className="wrapper"> - <IconObject object={space} size={96} withDefault={true} /> + <IconObject object={space} size={96} /> <Title text={space.name} /> <Label text={translate('pageMainEmptyDescription')} /> diff --git a/src/ts/component/page/main/navigation.tsx b/src/ts/component/page/main/navigation.tsx index f9d2df4352..16f08c2b0e 100644 --- a/src/ts/component/page/main/navigation.tsx +++ b/src/ts/component/page/main/navigation.tsx @@ -76,7 +76,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo onMouseLeave={() => this.unsetActive()} > <div className="inner" onClick={e => this.onClick(e, item)}> - <IconObject object={item} withDefault={true} size={48} iconSize={iconSize} /> + <IconObject object={item} size={48} iconSize={iconSize} /> <div className="info"> <ObjectName object={item} /> {description} @@ -130,7 +130,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo return ( <div id={`item-${id}`} className={cn.join(' ')}> - <IconObject object={item} withDefault={true} size={48} iconSize={iconSize} /> + <IconObject object={item} size={48} iconSize={iconSize} /> <ObjectName object={item} /> {description} diff --git a/src/ts/component/popup/page/settings/space/create.tsx b/src/ts/component/popup/page/settings/space/create.tsx index 1f15b902b8..e92b20e583 100644 --- a/src/ts/component/popup/page/settings/space/create.tsx +++ b/src/ts/component/popup/page/settings/space/create.tsx @@ -52,7 +52,6 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R id="spaceIcon" size={96} object={space} - withDefault={true} canEdit={false} menuParam={{ horizontal: I.MenuDirection.Center }} /> diff --git a/src/ts/component/popup/page/settings/space/index.tsx b/src/ts/component/popup/page/settings/space/index.tsx index 77c9d8cef5..6d626f1908 100644 --- a/src/ts/component/popup/page/settings/space/index.tsx +++ b/src/ts/component/popup/page/settings/space/index.tsx @@ -103,7 +103,6 @@ const PopupSettingsSpaceIndex = observer(class PopupSettingsSpaceIndex extends R id="spaceIcon" size={96} object={space} - withDefault={true} canEdit={canWrite} menuParam={{ horizontal: I.MenuDirection.Center }} onSelect={this.onSelect} diff --git a/src/ts/component/popup/settings.tsx b/src/ts/component/popup/settings.tsx index 626f3986f6..0fa4ff84db 100644 --- a/src/ts/component/popup/settings.tsx +++ b/src/ts/component/popup/settings.tsx @@ -144,7 +144,7 @@ const PopupSettings = observer(class PopupSettings extends React.Component<I.Pop if (action.id == 'account') { if (participant) { name = participant?.globalName || participant?.name; - icon = <IconObject object={{ ...participant, name }} size={36} iconSize={36} withDefault={true} />; + icon = <IconObject object={{ ...participant, name }} size={36} iconSize={36} />; }; cn.push('itemAccount'); diff --git a/src/ts/component/sidebar/object/item.tsx b/src/ts/component/sidebar/object/item.tsx index 2caa40b5d7..f37f9be8d4 100644 --- a/src/ts/component/sidebar/object/item.tsx +++ b/src/ts/component/sidebar/object/item.tsx @@ -29,10 +29,10 @@ const ObjectItem = observer(class ObjectItem extends React.Component<Props> { if (U.Object.isTypeOrRelationLayout(item.layout)) { const size = U.Object.isTypeLayout(item.layout) ? 18 : 20; - iconSmall = <IconObject object={item} size={size} iconSize={18} withDefault={true} />; + iconSmall = <IconObject object={item} size={size} iconSize={18} />; } else { const iconSize = isFile ? 48 : null; - iconLarge = <IconObject object={item} size={48} iconSize={iconSize} withDefault={true} />; + iconLarge = <IconObject object={item} size={48} iconSize={iconSize} />; }; if (item.id == rootId) { diff --git a/src/ts/component/util/iconObject.tsx b/src/ts/component/util/iconObject.tsx index bd4a496f4c..92645873fb 100644 --- a/src/ts/component/util/iconObject.tsx +++ b/src/ts/component/util/iconObject.tsx @@ -21,7 +21,6 @@ interface Props { tooltip?: string; tooltipY?: I.MenuDirection.Top | I.MenuDirection.Bottom; color?: string; - withDefault?: boolean; noGallery?: boolean; noUpload?: boolean; noRemove?: boolean; @@ -133,7 +132,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; render () { - const { className, size, canEdit, withDefault, style } = this.props; + const { className, size, canEdit, style } = this.props; const { theme } = S.Common; const object = this.getObject(); const layout = Number(object.layout) || I.ObjectLayout.Page; @@ -153,6 +152,10 @@ const IconObject = observer(class IconObject extends React.Component<Props> { let icn = []; const defaultIcon = (type: string) => { + if (!DefaultIcons.includes(type)) { + return; + }; + cn.push('withDefault'); icn = icn.concat([ 'iconCommon', 'c' + iconSize ]); icon = <img src={this.defaultIcon(type)} className={icn.join(' ')} />; @@ -167,8 +170,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconEmoji || iconImage || iconClass) { icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; - } else - if (withDefault) { + } else { defaultIcon('page'); }; break; @@ -181,8 +183,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconEmoji || iconImage || iconClass) { icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; - } else - if (withDefault) { + } else { defaultIcon('chat'); }; break; @@ -195,8 +196,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconEmoji || iconImage) { icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; - } else - if (withDefault) { + } else { defaultIcon('set'); }; break; @@ -226,17 +226,14 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; case I.ObjectLayout.Note: { - if (withDefault) { - defaultIcon('page'); - }; + defaultIcon('page'); break; }; case I.ObjectLayout.Type: { if (iconEmoji) { icon = <IconEmoji {...this.props} className={icn.join(' ')} iconClass={iconClass} size={iconSize} icon={iconEmoji} objectId={iconImage} />; - } else - if (withDefault) { + } else { defaultIcon('type'); }; break; @@ -260,8 +257,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if (iconImage) { icn = icn.concat([ 'iconCommon', 'c' + iconSize ]); icon = <img src={S.Common.imageUrl(iconImage, iconSize * 2)} className={icn.join(' ')} />; - } else - if (withDefault) { + } else { defaultIcon('bookmark'); }; break; @@ -450,9 +446,9 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; iconSize () { - const { size, iconSize, withDefault } = this.props; + const { size, iconSize } = this.props; const object = this.getObject(); - const { layout, iconImage, iconEmoji, isDeleted } = object; + const { layout, iconImage, isDeleted } = object; let s = IconSize[size]; @@ -463,7 +459,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { if ((size == 18) && (U.Object.isTaskLayout(layout))) { s = 16; } else - if ((size == 48) && (U.Object.isRelationLayout(layout) || withDefault)) { + if ((size == 48) && U.Object.isRelationLayout(layout)) { s = 28; } else if (size >= 40) { @@ -556,14 +552,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { }; defaultIcon (type: string) { - const iconSize = this.iconSize(); - const key = iconSize < 28 ? 'small' : 'big'; - - if (DefaultIcons.includes(type)) { - return require(`img/icon/object/${key}/${type}.svg`).default; - }; - - return ''; + return require(`img/icon/default/${type}.svg`).default; }; }); diff --git a/src/ts/component/vault/item.tsx b/src/ts/component/vault/item.tsx index c4b3f85495..3ca1ba38cc 100644 --- a/src/ts/component/vault/item.tsx +++ b/src/ts/component/vault/item.tsx @@ -22,7 +22,7 @@ const VaultItem = observer(class Vault extends React.Component<Props> { if (!isButton) { const object = U.Menu.getVaultItems().find(it => it.id == id); - icon = <IconObject object={object} size={36} iconSize={36} withDefault={true} />; + icon = <IconObject object={object} size={36} iconSize={36} />; } else { cn.push(`isButton ${id}`); }; diff --git a/src/ts/component/widget/space.tsx b/src/ts/component/widget/space.tsx index 3948f736b4..d4d9b52ca5 100644 --- a/src/ts/component/widget/space.tsx +++ b/src/ts/component/widget/space.tsx @@ -24,7 +24,6 @@ const WidgetSpace = observer(class WidgetSpace extends React.Component<I.WidgetC <IconObject id="widget-space-icon" object={{ ...space, layout: I.ObjectLayout.SpaceView }} - withDefault={true} size={28} iconSize={28} menuParam={{ className: 'fixed' }} From 52cc8a9282b40a8e8d9252d495ce86c7dc16117b Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 16:46:33 +0200 Subject: [PATCH 30/54] JS-5383: update items in the Flow --- src/scss/page/main/navigation.scss | 41 +++++++++---------- src/ts/component/page/main/navigation.tsx | 48 ++++++----------------- src/ts/component/sidebar/object.tsx | 6 +-- src/ts/component/sidebar/object/item.tsx | 17 +++++--- 4 files changed, 47 insertions(+), 65 deletions(-) diff --git a/src/scss/page/main/navigation.scss b/src/scss/page/main/navigation.scss index 0c9c2a4375..02ce92efe9 100644 --- a/src/scss/page/main/navigation.scss +++ b/src/scss/page/main/navigation.scss @@ -13,26 +13,32 @@ .item { transition: $transitionAllCommon; position: relative; line-height: 48px; margin-bottom: 16px; padding: 0px; - border: 1px solid var(--color-shape-secondary); border-radius: 8px; + border: 1px solid var(--color-shape-secondary); border-radius: 8px; display: flex; flex-direction: row; align-items: center; + gap: 0px 12px; padding: 12px; } .item { - .inner { padding: 12px; display: flex; align-items: center; gap: 0px 16px; height: 100%; } .iconObject { flex-shrink: 0; background: var(--color-shape-tertiary); border-radius: 6px; } - .info { border: 0px; flex-grow: 1; width: calc(100% - 64px); } .name { width: 100%; line-height: 22px; height: 22px; @include text-overflow-nw; } - .descr { width: 100%; @include text-small; max-height: 18px; @include text-overflow-nw; color: var(--color-text-secondary); } - .icon.arrow { - width: 24px; height: 24px; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); - background-image: url('~img/arrow/nav0.svg'); + .bottomWrap { + display: flex; @include text-overflow-nw; width: 100%; @include text-small; color: var(--color-text-secondary); gap: 0px 6px; + align-items: center; } - - .icon.arrow { - width: 24px; height: 24px; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); - background-image: url('~img/arrow/nav0.svg'); + .bottomWrap { + .type { max-width: 40%; @include text-overflow-nw; flex-shrink: 0; } + .descr { position: relative; @include text-overflow-nw; max-width: 100%; } + .descr:empty { display: none; } + .bullet { width: 2px; height: 2px; border-radius: 50%; background-color: var(--color-text-secondary); flex-shrink: 0; display: none; } } } + .item::before { + content: ''; width: 24px; height: 24px; position: absolute; right: -24px; top: 50%; transform: translateY(-50%); + background-image: url('~img/arrow/nav0.svg'); + } + .item.withDescr { + .bullet { display: block; } + } .item.isFile { .iconObject { background-color: unset; } @@ -40,6 +46,7 @@ .item.selected { padding: 16px; border-radius: 8px; border: 1px solid var(--color-shape-secondary); transition: $transitionAllCommon; height: auto; + display: block; } .item.selected { .iconObject { margin-bottom: 8px; } @@ -58,9 +65,7 @@ } .item.active { background: none; border-color: var(--color-system-accent-100) !important; box-shadow: 0px 0px 0px 1px var(--color-system-accent-100) inset; } - .item.active { - .icon.arrow { background-image: url('~img/arrow/nav1.svg'); } - } + .item.active::before { background-image: url('~img/arrow/nav1.svg'); } .item.empty { line-height: 78px; cursor: default; padding: 0px 16px; } .item.empty { @@ -69,14 +74,10 @@ } .items.right { - .item { - .icon.arrow { right: auto; left: -24px; } - } + .item::before { right: auto; left: -24px; } } .items.center { - .item { - .icon.arrow { display: none; } - } + .item::before { display: none; } } } \ No newline at end of file diff --git a/src/ts/component/page/main/navigation.tsx b/src/ts/component/page/main/navigation.tsx index 16f08c2b0e..e890f6a993 100644 --- a/src/ts/component/page/main/navigation.tsx +++ b/src/ts/component/page/main/navigation.tsx @@ -3,9 +3,11 @@ import $ from 'jquery'; import raf from 'raf'; import { observer } from 'mobx-react'; import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized'; -import { Icon, Button, Cover, Loader, IconObject, Header, Footer, ObjectName, ObjectDescription } from 'Component'; +import { Icon, Button, Cover, Loader, IconObject, Header, Footer, ObjectName, ObjectDescription, ObjectType } from 'Component'; import { I, C, S, U, keyboard, focus, translate } from 'Lib'; +import Item from 'Component/sidebar/object/item'; + interface State { loading: boolean; info: I.PageInfo; @@ -54,40 +56,12 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo const { info, pagesIn, pagesOut, loading } = this.state; const rootId = this.getRootId(); - const Item = (item: any) => { - const { id, layout, name, snippet } = item || {}; - const isFile = U.Object.isInFileLayouts(layout); - const cn = [ 'item', U.Data.layoutClass(id, layout) ]; - const iconSize = isFile ? 48 : null; - - let description = null; - if (isFile) { - cn.push('isFile'); - description = <div className="descr">{U.File.size(item.sizeInBytes)}</div>; - } else { - description = <ObjectDescription object={item} />; - }; + const rowRenderer = (list: I.PageInfo[], cache: any, { index, key, style, parent, panel }) => { + const item: any = list[index]; - return ( - <div - id={`item-${id}`} - className={cn.join(' ')} - onMouseEnter={e => this.onOver(e, item)} - onMouseLeave={() => this.unsetActive()} - > - <div className="inner" onClick={e => this.onClick(e, item)}> - <IconObject object={item} size={48} iconSize={iconSize} /> - <div className="info"> - <ObjectName object={item} /> - {description} - </div> - </div> - <Icon className="arrow" /> - </div> - ); - }; + item.index = index; + item.panel = panel; - const rowRenderer = (list: I.PageInfo[], cache: any, { index, key, style, parent, panel }) => { return ( <CellMeasurer key={key} @@ -97,7 +71,11 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo rowIndex={index} > <div className="row" style={style}> - <Item {...list[index]} index={index} panel={panel} /> + <Item + item={item} + onMouseEnter={() => this.onOver(item)} + onMouseLeave={() => this.unsetActive()} + /> </div> </CellMeasurer> ); @@ -413,7 +391,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo node.find('.items .item.active').removeClass('active'); }; - onOver (e: any, item: any) { + onOver (item: any) { if (!keyboard.isMouseDisabled) { this.panel = item.panel; this.n = item.index; diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index 8315c26342..c99f353667 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; -import raf from 'raf'; -import $ from 'jquery'; import { observer } from 'mobx-react'; import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized'; -import { Title, Filter, Select, Icon, IconObject, Button, ObjectName, ObjectDescription, ObjectType } from 'Component'; +import { Title, Filter, Select, Icon, Button } from 'Component'; import { I, U, J, S, translate, Storage, sidebar, keyboard, analytics } from 'Lib'; import Item from './object/item'; @@ -67,9 +65,9 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S rowIndex={param.index} > <Item - rootId={rootId} item={item} style={param.style} + isActive={rootId == item.id} onClick={() => this.onClick(item)} onContext={() => this.onContext(item)} /> diff --git a/src/ts/component/sidebar/object/item.tsx b/src/ts/component/sidebar/object/item.tsx index f37f9be8d4..471cd032ae 100644 --- a/src/ts/component/sidebar/object/item.tsx +++ b/src/ts/component/sidebar/object/item.tsx @@ -5,11 +5,13 @@ import { IconObject, ObjectName, ObjectDescription, ObjectType } from 'Component import { U, S } from 'Lib'; interface Props { - rootId: string; item: any; - style: any; - onClick: (item: any) => void; - onContext: (item: any) => void; + style?: any; + isActive?: boolean; + onClick?: (item: any) => void; + onContext?: (item: any) => void; + onMouseEnter?: (item: any) => void; + onMouseLeave?: (item: any) => void; }; const ObjectItem = observer(class ObjectItem extends React.Component<Props> { @@ -17,7 +19,7 @@ const ObjectItem = observer(class ObjectItem extends React.Component<Props> { node = null; render() { - const { rootId, item, style, onClick, onContext } = this.props; + const { item, style, isActive, onClick, onContext, onMouseEnter, onMouseLeave } = this.props; const cn = [ 'item', U.Data.layoutClass(item.id, item.layout) ]; const type = S.Record.getTypeById(item.type); const isFile = U.Object.isInFileLayouts(item.layout); @@ -35,7 +37,7 @@ const ObjectItem = observer(class ObjectItem extends React.Component<Props> { iconLarge = <IconObject object={item} size={48} iconSize={iconSize} />; }; - if (item.id == rootId) { + if (isActive) { cn.push('active'); }; @@ -49,10 +51,13 @@ const ObjectItem = observer(class ObjectItem extends React.Component<Props> { return ( <div ref={ref => this.node = ref} + id={`item-${item.id}`} className={cn.join(' ')} style={style} onClick={onClick} onContextMenu={onContext} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} > {iconLarge} <div className="info"> From 3f8d9b4c35da4f95c6e51ac2eb55b5c61b673ff0 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 16:48:48 +0200 Subject: [PATCH 31/54] JS-5383: update items in the Flow --- src/ts/component/page/main/navigation.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ts/component/page/main/navigation.tsx b/src/ts/component/page/main/navigation.tsx index e890f6a993..221b84df75 100644 --- a/src/ts/component/page/main/navigation.tsx +++ b/src/ts/component/page/main/navigation.tsx @@ -73,6 +73,7 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo <div className="row" style={style}> <Item item={item} + onClick={e => this.onClick(e, item)} onMouseEnter={() => this.onOver(item)} onMouseLeave={() => this.unsetActive()} /> From 0eedb2ce97bba485a35b87b82f16535bc22bdfb8 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 17:01:05 +0200 Subject: [PATCH 32/54] remove header from archive --- src/ts/component/page/main/archive.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/ts/component/page/main/archive.tsx b/src/ts/component/page/main/archive.tsx index 90a23dbb28..1df3a914ec 100644 --- a/src/ts/component/page/main/archive.tsx +++ b/src/ts/component/page/main/archive.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import $ from 'jquery'; import { observer } from 'mobx-react'; -import { Title, Header, Footer, Icon, ListObjectManager } from 'Component'; +import { Title, Footer, Icon, ListObjectManager } from 'Component'; import { I, U, J, translate, Action } from 'Lib'; const PageMainArchive = observer(class PageMainArchive extends React.Component<I.PageComponent> { @@ -34,13 +34,6 @@ const PageMainArchive = observer(class PageMainArchive extends React.Component<I return ( <div className="wrapper"> - <Header - {...this.props} - text={translate('commonBin')} - component="mainEmpty" - layout={I.ObjectLayout.Archive} - /> - <div className="body"> <div className="titleWrapper"> <Icon className="archive" /> From 0e29f54004144c1bd65c79571fae06813874bc62 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 17:05:06 +0200 Subject: [PATCH 33/54] refactoring --- src/scss/page/main/navigation.scss | 2 +- src/ts/component/page/main/navigation.tsx | 17 +++++++---------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/src/scss/page/main/navigation.scss b/src/scss/page/main/navigation.scss index 02ce92efe9..9f57bbbe93 100644 --- a/src/scss/page/main/navigation.scss +++ b/src/scss/page/main/navigation.scss @@ -67,7 +67,7 @@ .item.active { background: none; border-color: var(--color-system-accent-100) !important; box-shadow: 0px 0px 0px 1px var(--color-system-accent-100) inset; } .item.active::before { background-image: url('~img/arrow/nav1.svg'); } - .item.empty { line-height: 78px; cursor: default; padding: 0px 16px; } + .item.empty { height: 80px; cursor: default; padding: 12px; } .item.empty { .name { display: inline-block; vertical-align: middle; } } diff --git a/src/ts/component/page/main/navigation.tsx b/src/ts/component/page/main/navigation.tsx index 221b84df75..13ca397990 100644 --- a/src/ts/component/page/main/navigation.tsx +++ b/src/ts/component/page/main/navigation.tsx @@ -3,7 +3,7 @@ import $ from 'jquery'; import raf from 'raf'; import { observer } from 'mobx-react'; import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized'; -import { Icon, Button, Cover, Loader, IconObject, Header, Footer, ObjectName, ObjectDescription, ObjectType } from 'Component'; +import { Button, Cover, Loader, IconObject, Header, Footer, ObjectName, ObjectDescription } from 'Component'; import { I, C, S, U, keyboard, focus, translate } from 'Lib'; import Item from 'Component/sidebar/object/item'; @@ -82,16 +82,13 @@ const PageMainNavigation = observer(class PageMainNavigation extends React.Compo ); }; - const ItemEmpty = (item: any) => { - return ( - <div className="row"> - <div className="item empty"> - <div className="name">{item.name}</div> - <Icon className="arrow" /> - </div> + const ItemEmpty = (item: any) => ( + <div className="row"> + <div className="item empty"> + <div className="name">{item.name}</div> </div> - ); - }; + </div> + ); const Selected = (item: any) => { const { id, name, layout, snippet, coverType, coverId, coverX, coverY, coverScale } = item; From 08421a6c74156d60ae95e21734761bada164b03e Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 17:21:24 +0200 Subject: [PATCH 34/54] JS-5379: fix mermaid theme switching --- src/ts/component/block/embed.tsx | 4 +-- src/ts/component/util/media/mermaid.tsx | 36 +++++++++++++++++-------- 2 files changed, 27 insertions(+), 13 deletions(-) diff --git a/src/ts/component/block/embed.tsx b/src/ts/component/block/embed.tsx index 22170c9d8f..c8b66f6fde 100644 --- a/src/ts/component/block/embed.tsx +++ b/src/ts/component/block/embed.tsx @@ -55,7 +55,7 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp }; render () { - const { isOnline } = S.Common; + const { isOnline, theme } = S.Common; const { isShowing, isEditing } = this.state; const { readonly, block } = this.props; const { content, fields, hAlign } = block; @@ -188,8 +188,8 @@ const BlockEmbed = observer(class BlockEmbed extends React.Component<I.BlockComp this.setText(block.content.text); this.setValue(this.text); this.setContent(this.text); - this.rebind(); this.onScroll(); + this.rebind(); }; rebind () { diff --git a/src/ts/component/util/media/mermaid.tsx b/src/ts/component/util/media/mermaid.tsx index b445e886ea..79377725a4 100644 --- a/src/ts/component/util/media/mermaid.tsx +++ b/src/ts/component/util/media/mermaid.tsx @@ -1,23 +1,38 @@ import * as React from 'react'; import $ from 'jquery'; import mermaid from 'mermaid'; +import { observer } from 'mobx-react'; import { J, S } from 'Lib'; interface Props { chart: string; }; -class Mermaid extends React.Component<Props> { +const Mermaid = observer(class Mermaid extends React.Component<Props> { node = null; render () { + const { theme } = S.Common; + const { chart } = this.props; + return ( - <div ref={ref => this.node = ref} className="mermaid">{this.props.chart}</div> + <div ref={ref => this.node = ref} className="mermaid">{chart}</div> ); }; componentDidMount () { + this.init(); + mermaid.contentLoaded(); + }; + + async componentDidUpdate (prevProps: Props) { + this.init(); + $(this.node).removeAttr('data-processed'); + await this.drawDiagram(); + }; + + init () { const theme = (J.Theme[S.Common.getThemeClass()] || {}).mermaid; if (theme) { @@ -29,17 +44,16 @@ class Mermaid extends React.Component<Props> { mermaid.initialize({ theme: 'base', themeVariables: theme }); }; - - mermaid.contentLoaded(); }; - componentDidUpdate (prevProps: Props) { - if (prevProps.chart !== this.props.chart) { - $(this.node).removeAttr('data-processed'); - mermaid.contentLoaded(); - }; - }; + async drawDiagram () { + const node = $(this.node); + const { chart } = this.props; + const { svg } = await mermaid.render('mermaid-chart', chart); + + node.html(svg); + }; -}; +}); export default Mermaid; \ No newline at end of file From e658b3eed573578a36b1a8efce8c08f9907d6d77 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 17:24:54 +0200 Subject: [PATCH 35/54] fix dark mode --- src/scss/theme/dark/common.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/scss/theme/dark/common.scss b/src/scss/theme/dark/common.scss index bfba9f8d94..193f8dc2f5 100644 --- a/src/scss/theme/dark/common.scss +++ b/src/scss/theme/dark/common.scss @@ -294,6 +294,18 @@ html.themeDark { .sidebar { background-color: var(--color-bg-secondary); box-shadow: 0px 4px 16px rgba(0,0,0,0.2); } .sidebar.fixed { box-shadow: 0px 0px rgba(0,0,0,0); } + .sidebar { + .icon.back { background-image: url('#{$themePath}/icon/widget/back.svg'); } + > #containerObject { + > .inner { + > .head { + .titleWrap { + .icon.back { background-image: url('#{$themePath}/icon/widget/back.svg'); } + } + } + } + } + } /* Navigation */ From b7f4f36568e197939c3fa6eb74ee29d10014ee93 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 17:58:39 +0200 Subject: [PATCH 36/54] JS-5378: fixes --- src/scss/component/preview/object.scss | 2 +- src/ts/component/page/elements/head/simple.tsx | 2 +- src/ts/component/page/main/type.tsx | 3 ++- src/ts/component/util/iconObject.tsx | 1 + 4 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/scss/component/preview/object.scss b/src/scss/component/preview/object.scss index 51436e57f9..ec7c1459d3 100644 --- a/src/scss/component/preview/object.scss +++ b/src/scss/component/preview/object.scss @@ -23,7 +23,7 @@ .iconObject { .iconImage { border: 2px solid var(--color-bg-primary); } } - .iconObject.isTask, .iconObject.isBookmark { background: none; position: absolute; top: 2px; left: -24px; box-shadow: 0px 0px !important; } + .iconObject.isTask { background: none; position: absolute; top: 2px; left: -24px; box-shadow: 0px 0px !important; } .name { display: block; @include text-paragraph; @include text-overflow-nw; font-weight: 700; position: relative; width: 100%; } .description { @include text-small; @include text-overflow-nw; } diff --git a/src/ts/component/page/elements/head/simple.tsx b/src/ts/component/page/elements/head/simple.tsx index 9426363966..84d3a75260 100644 --- a/src/ts/component/page/elements/head/simple.tsx +++ b/src/ts/component/page/elements/head/simple.tsx @@ -122,7 +122,7 @@ const HeadSimple = observer(class Controls extends React.Component<Props> { <div ref={node => this.node = node} className={cn.join(' ')}> <div className="side left"> <div className="titleWrap"> - {!noIcon && check.withIcon ? ( + {!noIcon ? ( <IconObject id={'block-icon-' + rootId} size={32} diff --git a/src/ts/component/page/main/type.tsx b/src/ts/component/page/main/type.tsx index d0b21b39fc..8cd7b05c24 100644 --- a/src/ts/component/page/main/type.tsx +++ b/src/ts/component/page/main/type.tsx @@ -133,7 +133,8 @@ const PageMainType = observer(class PageMainType extends React.Component<I.PageC {...this.props} ref={ref => this.refHead = ref} placeholder={translate('defaultNameType')} - rootId={rootId} onCreate={this.onCreate} + rootId={rootId} + onCreate={this.onCreate} /> {showTemplates ? ( diff --git a/src/ts/component/util/iconObject.tsx b/src/ts/component/util/iconObject.tsx index 92645873fb..4c082e1a70 100644 --- a/src/ts/component/util/iconObject.tsx +++ b/src/ts/component/util/iconObject.tsx @@ -189,6 +189,7 @@ const IconObject = observer(class IconObject extends React.Component<Props> { break; }; + case I.ObjectLayout.Collection: case I.ObjectLayout.Set: { if (iconImage) { cn.push('withImage'); From f6e7d5a9cb163397a81970e2689c161d4143648b Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 18:03:05 +0200 Subject: [PATCH 37/54] JS-5378: fixes --- src/ts/component/preview/object.tsx | 8 +------- src/ts/component/util/iconObject.tsx | 2 +- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/ts/component/preview/object.tsx b/src/ts/component/preview/object.tsx index d67ac0fdad..a6fb0c8e97 100644 --- a/src/ts/component/preview/object.tsx +++ b/src/ts/component/preview/object.tsx @@ -61,20 +61,17 @@ const PreviewObject = observer(class PreviewObject extends React.Component<Props let n = 0; let c = 0; let size = 48; - let iconSize = 32; let cnPreviewSize; switch (previewSize) { case I.PreviewSize.Large: { size = 48; - iconSize = 32; cnPreviewSize = 'large'; break; }; case I.PreviewSize.Medium: { size = 40; - iconSize = 24; cnPreviewSize = 'medium'; break; }; @@ -82,7 +79,6 @@ const PreviewObject = observer(class PreviewObject extends React.Component<Props default: case I.PreviewSize.Small: { size = 32; - iconSize = 20; cnPreviewSize = 'small'; break; }; @@ -91,11 +87,9 @@ const PreviewObject = observer(class PreviewObject extends React.Component<Props if (isTask || isBookmark) { size = 16; - iconSize = 16; if (previewSize == I.PreviewSize.Small) { size = 14; - iconSize = 14; }; }; @@ -346,7 +340,7 @@ const PreviewObject = observer(class PreviewObject extends React.Component<Props {(coverType != I.CoverType.None) && coverId ? <Cover type={coverType} id={coverId} image={coverId} className={coverId} x={coverX} y={coverY} scale={coverScale} withScale={true} /> : ''} <div className="heading"> - <IconObject size={size} iconSize={iconSize} object={object} /> + <IconObject size={size} object={object} /> <div className="name">{name}</div> <div className="featured" /> </div> diff --git a/src/ts/component/util/iconObject.tsx b/src/ts/component/util/iconObject.tsx index 4c082e1a70..66863f850d 100644 --- a/src/ts/component/util/iconObject.tsx +++ b/src/ts/component/util/iconObject.tsx @@ -53,7 +53,7 @@ const IconSize = { 24: 20, 26: 22, 28: 22, - 32: 28, + 32: 22, 36: 24, 40: 24, 42: 24, From c86b4eef7cd14b40c523f0c58efe58338185023b Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 19:36:22 +0200 Subject: [PATCH 38/54] JS-5357: fix --- src/ts/component/block/chat.tsx | 5 +++++ src/ts/component/block/chat/form.tsx | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/src/ts/component/block/chat.tsx b/src/ts/component/block/chat.tsx index 9df880b244..c50c5ea49b 100644 --- a/src/ts/component/block/chat.tsx +++ b/src/ts/component/block/chat.tsx @@ -43,6 +43,7 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon this.scrollToMessage = this.scrollToMessage.bind(this); this.scrollToBottom = this.scrollToBottom.bind(this); this.getMessages = this.getMessages.bind(this); + this.loadDeps = this.loadDeps.bind(this); }; render () { @@ -117,6 +118,7 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon scrollToBottom={this.scrollToBottom} scrollToMessage={this.scrollToMessage} getMessages={this.getMessages} + loadDeps={this.loadDeps} /> </div> ); @@ -252,6 +254,9 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon deps = deps.concat(attachments); }); + deps = deps.concat((this.refForm?.state.attachments || []).map(it => it.target)); + deps = deps.concat((this.refForm?.marks || []).filter(it => markTypes.includes(it.type)).map(it => it.param)); + return deps; }; diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx index db42d08b01..9507e51b77 100644 --- a/src/ts/component/block/chat/form.tsx +++ b/src/ts/component/block/chat/form.tsx @@ -15,6 +15,7 @@ interface Props extends I.BlockComponent { scrollToBottom: () => void; scrollToMessage: (id: string) => void; getMessages: () => I.ChatMessage[]; + loadDeps: (callBack?: () => void) => void; }; interface State { @@ -174,7 +175,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { this._isMounted = true; this.checkSendButton(); - const { rootId } = this.props; + const { rootId, loadDeps } = this.props; const storage = Storage.getChat(rootId); if (storage) { @@ -187,7 +188,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { this.updateMarkup(text, length, length); if (attachments) { - this.setAttachments(attachments); + this.setAttachments(attachments, () => loadDeps()); }; }; }; @@ -401,7 +402,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { e.preventDefault(); const { from } = this.range; - const { files } = this.state; const cb = e.clipboardData || e.originalEvent.clipboardData; const text = U.Common.normalizeLineEndings(String(cb.getData('text/plain') || '')); const list = U.Common.getDataTransferFiles((e.clipboardData || e.originalEvent.clipboardData).items).map((it: File) => this.getObjectFromFile(it)); From 34b0619ce91e81ecd290705f0b9bf428df24810e Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 19:42:19 +0200 Subject: [PATCH 39/54] JS-5367: fix --- electron/js/preload.js | 1 + src/ts/component/block/chat/form.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/electron/js/preload.js b/electron/js/preload.js index 752d41558e..6fdf22d998 100644 --- a/electron/js/preload.js +++ b/electron/js/preload.js @@ -26,6 +26,7 @@ contextBridge.exposeInMainWorld('Electron', { fileMime: fp => mime.lookup(fp), fileExt: fp => path.extname(fp), fileSize: fp => fs.statSync(fp).size, + isDirectory: fp => fs.lstatSync(fp).isDirectory(), defaultPath: () => path.join(app.getPath('appData'), app.getName()), currentWindow: () => getCurrentWindow(), diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx index 9507e51b77..f67c120118 100644 --- a/src/ts/component/block/chat/form.tsx +++ b/src/ts/component/block/chat/form.tsx @@ -472,8 +472,11 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { const { scrollToBottom } = this.props; const node = $(this.node); - const list = Array.from(e.dataTransfer.files).map((it: File) => this.getObjectFromFile(it)); - + const electron = U.Common.getElectron(); + const list = Array.from(e.dataTransfer.files).map((it: File) => this.getObjectFromFile(it)).filter(it => { + return !electron.isDirectory(it.path); + }); + node.removeClass('isDraggingOver'); keyboard.disableCommonDrop(true); From 5efceff4648bb158720cf136378e2a95ae280fbf Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 19:44:09 +0200 Subject: [PATCH 40/54] JS-5367: fix --- src/ts/component/block/chat/form.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx index f67c120118..c7d177ee0e 100644 --- a/src/ts/component/block/chat/form.tsx +++ b/src/ts/component/block/chat/form.tsx @@ -940,6 +940,8 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { checkLimit (type: string, list: any[]) { const limit = J.Constant.limit.chat; + list = U.Common.arrayUniqueObjects(list, 'id'); + if (list.length > limit[type]) { list = list.slice(0, limit[type]); }; From 90134ddf369620b0b6b1936eaf4d0ea305c9b990 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 20:02:00 +0200 Subject: [PATCH 41/54] fix initial deps and replies loading --- src/ts/component/block/chat.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ts/component/block/chat.tsx b/src/ts/component/block/chat.tsx index c50c5ea49b..7b3b093108 100644 --- a/src/ts/component/block/chat.tsx +++ b/src/ts/component/block/chat.tsx @@ -134,7 +134,11 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon this.loadMessages(true, () => { this.loadReplies(() => { + this.replies = this.getReplies(); + this.loadDeps(() => { + this.deps = this.getDeps(); + this.setState({ isLoading: false }, () => { const messages = this.getMessages(); const length = messages.length; From 5c2fd385c37f8c45d289d2b62a03f62fddc47727 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 20:11:53 +0200 Subject: [PATCH 42/54] fix clipboard paste --- src/ts/component/block/chat/form.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx index c7d177ee0e..2b35298fb7 100644 --- a/src/ts/component/block/chat/form.tsx +++ b/src/ts/component/block/chat/form.tsx @@ -404,7 +404,10 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { const { from } = this.range; const cb = e.clipboardData || e.originalEvent.clipboardData; const text = U.Common.normalizeLineEndings(String(cb.getData('text/plain') || '')); - const list = U.Common.getDataTransferFiles((e.clipboardData || e.originalEvent.clipboardData).items).map((it: File) => this.getObjectFromFile(it)); + const electron = U.Common.getElectron(); + const list = U.Common.getDataTransferFiles((e.clipboardData || e.originalEvent.clipboardData).items).map((it: File) => this.getObjectFromFile(it)).filter(it => { + return !electron.isDirectory(it.path); + }); let value = this.getTextValue(); let url = U.Common.matchUrl(text); From 97bce229dad2c01c5c408e4f34d5d6876bcf07c9 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 20:15:23 +0200 Subject: [PATCH 43/54] fix tree collection icon for date objects --- src/ts/component/widget/tree/item.tsx | 5 +---- src/ts/lib/util/object.ts | 4 ++++ 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/ts/component/widget/tree/item.tsx b/src/ts/component/widget/tree/item.tsx index 9b0d55ae6a..12e86dee55 100644 --- a/src/ts/component/widget/tree/item.tsx +++ b/src/ts/component/widget/tree/item.tsx @@ -62,10 +62,7 @@ const TreeItem = observer(class Node extends React.Component<Props> { ); }; - if (U.Object.isCollectionLayout(layout) && !numChildren) { - arrow = <Icon className="set" />; - } else - if (!U.Object.isCollectionLayout(layout) && U.Object.isInSetLayouts(layout)) { + if (U.Object.isSetLayout(layout) || (U.Object.isCollectionLayout(layout) && !numChildren)) { arrow = <Icon className="set" />; } else if (numChildren > 0) { diff --git a/src/ts/lib/util/object.ts b/src/ts/lib/util/object.ts index e6ae55c0b0..87f2aaf007 100644 --- a/src/ts/lib/util/object.ts +++ b/src/ts/lib/util/object.ts @@ -342,6 +342,10 @@ class UtilObject { return layout == I.ObjectLayout.Image; }; + isDateLayout (layout: I.ObjectLayout): boolean { + return layout == I.ObjectLayout.Date; + }; + // --------------------------------------------------------- // getPageLayouts (): I.ObjectLayout[] { From befd2681a713768c165e8c89f510026191037130 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 21:07:58 +0200 Subject: [PATCH 44/54] JS-5357: fix --- src/ts/component/block/chat.tsx | 10 ++++++---- src/ts/component/block/chat/form.tsx | 7 +++---- src/ts/component/block/index.tsx | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/ts/component/block/chat.tsx b/src/ts/component/block/chat.tsx index 7b3b093108..99c5cbfd51 100644 --- a/src/ts/component/block/chat.tsx +++ b/src/ts/component/block/chat.tsx @@ -43,7 +43,6 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon this.scrollToMessage = this.scrollToMessage.bind(this); this.scrollToBottom = this.scrollToBottom.bind(this); this.getMessages = this.getMessages.bind(this); - this.loadDeps = this.loadDeps.bind(this); }; render () { @@ -118,7 +117,6 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon scrollToBottom={this.scrollToBottom} scrollToMessage={this.scrollToMessage} getMessages={this.getMessages} - loadDeps={this.loadDeps} /> </div> ); @@ -258,8 +256,10 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon deps = deps.concat(attachments); }); - deps = deps.concat((this.refForm?.state.attachments || []).map(it => it.target)); - deps = deps.concat((this.refForm?.marks || []).filter(it => markTypes.includes(it.type)).map(it => it.param)); + if (this.refForm) { + deps = deps.concat((this.refForm.state.attachments || []).map(it => it.target)); + deps = deps.concat((this.refForm.marks || []).filter(it => markTypes.includes(it.type)).map(it => it.param)); + }; return deps; }; @@ -294,6 +294,8 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon if (callBack) { callBack(); }; + + this.refForm.forceUpdate(); }); }; diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx index 2b35298fb7..90ed7c5a1e 100644 --- a/src/ts/component/block/chat/form.tsx +++ b/src/ts/component/block/chat/form.tsx @@ -15,7 +15,6 @@ interface Props extends I.BlockComponent { scrollToBottom: () => void; scrollToMessage: (id: string) => void; getMessages: () => I.ChatMessage[]; - loadDeps: (callBack?: () => void) => void; }; interface State { @@ -175,7 +174,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { this._isMounted = true; this.checkSendButton(); - const { rootId, loadDeps } = this.props; + const { rootId } = this.props; const storage = Storage.getChat(rootId); if (storage) { @@ -187,8 +186,8 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { this.marks = marks; this.updateMarkup(text, length, length); - if (attachments) { - this.setAttachments(attachments, () => loadDeps()); + if (attachments.length) { + this.setAttachments(attachments); }; }; }; diff --git a/src/ts/component/block/index.tsx b/src/ts/component/block/index.tsx index ddf5961119..1211b03d65 100644 --- a/src/ts/component/block/index.tsx +++ b/src/ts/component/block/index.tsx @@ -871,7 +871,7 @@ const Block = observer(class Block extends React.Component<Props> { const { block } = this.props; const size = U.Data.emojiParam(block.content.style); const items = node.find(Mark.getTag(I.MarkType.Mention)); - + if (!items.length) { return; }; From 988b5acce24c28d970d938ebb877ea705b49bcd8 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Mon, 16 Sep 2024 21:26:28 +0200 Subject: [PATCH 45/54] fix default icon in sets --- src/ts/component/page/elements/head/simple.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/component/page/elements/head/simple.tsx b/src/ts/component/page/elements/head/simple.tsx index 84d3a75260..9426363966 100644 --- a/src/ts/component/page/elements/head/simple.tsx +++ b/src/ts/component/page/elements/head/simple.tsx @@ -122,7 +122,7 @@ const HeadSimple = observer(class Controls extends React.Component<Props> { <div ref={node => this.node = node} className={cn.join(' ')}> <div className="side left"> <div className="titleWrap"> - {!noIcon ? ( + {!noIcon && check.withIcon ? ( <IconObject id={'block-icon-' + rootId} size={32} From 0606bda48cd20eddc12b8462ed569f5b86a6ca28 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 08:32:56 +0200 Subject: [PATCH 46/54] JS-5294: fix --- src/ts/component/popup/search.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/ts/component/popup/search.tsx b/src/ts/component/popup/search.tsx index 680612bcd4..c1a7c93ac6 100644 --- a/src/ts/component/popup/search.tsx +++ b/src/ts/component/popup/search.tsx @@ -317,12 +317,12 @@ const PopupSearch = observer(class PopupSearch extends React.Component<I.Popup, focus.clear(true); if (backlink) { - U.Object.getById(backlink, item => this.setBacklink(item, () => setFilter())); + U.Object.getById(backlink, item => this.setBacklink(item, 'Saved', () => setFilter())); } else { this.reload(); }; - analytics.event('ScreenSearch', { route }); + analytics.event('ScreenSearch', { route, type: (filter ? 'Saved' : 'Empty') }); }; componentDidUpdate () { @@ -523,17 +523,17 @@ const PopupSearch = observer(class PopupSearch extends React.Component<I.Popup, e.stopPropagation(); this.props.storageSet({ backlink: item.id }); - this.setBacklink(item); + this.setBacklink(item, 'Empty'); }; - setBacklink (item: any, callBack?: () => void) { + setBacklink (item: any, type: string, callBack?: () => void) { const { param } = this.props; const { data } = param; const { route } = data; this.setState({ backlink: item }, () => { this.resetSearch(); - analytics.event('SearchBacklink', { route }); + analytics.event('SearchBacklink', { route, type }); if (callBack) { callBack(); From 6be94130b6d3dc1025a020841dfa592ef852b2ad Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 08:44:18 +0200 Subject: [PATCH 47/54] add calendar tooltips --- .../block/dataview/view/calendar/item.tsx | 21 +++++++++++++++++-- 1 file changed, 19 insertions(+), 2 deletions(-) diff --git a/src/ts/component/block/dataview/view/calendar/item.tsx b/src/ts/component/block/dataview/view/calendar/item.tsx index a21e92b6b7..ab1416d6dd 100644 --- a/src/ts/component/block/dataview/view/calendar/item.tsx +++ b/src/ts/component/block/dataview/view/calendar/item.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { observer } from 'mobx-react'; import { IconObject, ObjectName } from 'Component'; -import { I, S, U, translate, analytics, C, J } from 'Lib'; +import { I, S, U, translate, Preview } from 'Lib'; interface Props extends I.ViewComponent { d: number; @@ -57,7 +57,13 @@ const Item = observer(class Item extends React.Component<Props> { }; return ( - <div className="item" onContextMenu={e => onContext(e, item.id)}> + <div + id={`item-${item.id}`} + className="item" + onContextMenu={e => onContext(e, item.id)} + onMouseEnter={e => this.onMouseEnter(e, item)} + onMouseLeave={this.onMouseLeave} + > {icon} <ObjectName object={item} onClick={() => this.onOpen(item)} /> </div> @@ -89,6 +95,17 @@ const Item = observer(class Item extends React.Component<Props> { U.Object.openConfig(record); }; + onMouseEnter (e: any, item: any) { + const node = $(this.node); + const element = node.find(`#item-${item.id}`); + + Preview.tooltipShow({ text: item.name, element }); + }; + + onMouseLeave (e: any) { + Preview.tooltipHide(false); + }; + onMore () { const { block, getView, readonly } = this.props; const node = $(this.node); From dba140e7c48e66e7b5020e9ade27d1bd6996398e Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 09:00:55 +0200 Subject: [PATCH 48/54] JS-5387: update block icons --- src/img/icon/block/add.svg | 5 ----- src/img/icon/block/add0.svg | 4 ++++ src/img/icon/block/add1.svg | 4 ++++ src/img/icon/block/menu2.svg | 6 ++---- src/scss/block/common.scss | 7 ++++--- src/scss/component/editor.scss | 5 +++-- 6 files changed, 17 insertions(+), 14 deletions(-) delete mode 100644 src/img/icon/block/add.svg create mode 100644 src/img/icon/block/add0.svg create mode 100644 src/img/icon/block/add1.svg diff --git a/src/img/icon/block/add.svg b/src/img/icon/block/add.svg deleted file mode 100644 index 5b5c263b4a..0000000000 --- a/src/img/icon/block/add.svg +++ /dev/null @@ -1,5 +0,0 @@ -<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> -<circle cx="10" cy="10" r="10" fill="#FFB522"/> -<rect x="9" y="4.5" width="2" height="11" rx="1" fill="white"/> -<rect x="4.5" y="11" width="2" height="11" rx="1" transform="rotate(-90 4.5 11)" fill="white"/> -</svg> diff --git a/src/img/icon/block/add0.svg b/src/img/icon/block/add0.svg new file mode 100644 index 0000000000..fc15c3ad37 --- /dev/null +++ b/src/img/icon/block/add0.svg @@ -0,0 +1,4 @@ +<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="19" height="19" rx="9.5" fill="#B6B6B6"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 4.5C9.22386 4.5 9 4.72386 9 5V9H5C4.72386 9 4.5 9.22386 4.5 9.5C4.5 9.77614 4.72386 10 5 10H9V14C9 14.2761 9.22386 14.5 9.5 14.5C9.77614 14.5 10 14.2761 10 14V10H14C14.2761 10 14.5 9.77614 14.5 9.5C14.5 9.22386 14.2761 9 14 9H10V5C10 4.72386 9.77614 4.5 9.5 4.5Z" fill="white"/> +</svg> \ No newline at end of file diff --git a/src/img/icon/block/add1.svg b/src/img/icon/block/add1.svg new file mode 100644 index 0000000000..66306d7e40 --- /dev/null +++ b/src/img/icon/block/add1.svg @@ -0,0 +1,4 @@ +<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg"> +<rect width="19" height="19" rx="9.5" fill="#252525"/> +<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 4.5C9.22386 4.5 9 4.72386 9 5V9H5C4.72386 9 4.5 9.22386 4.5 9.5C4.5 9.77614 4.72386 10 5 10H9V14C9 14.2761 9.22386 14.5 9.5 14.5C9.77614 14.5 10 14.2761 10 14V10H14C14.2761 10 14.5 9.77614 14.5 9.5C14.5 9.22386 14.2761 9 14 9H10V5C10 4.72386 9.77614 4.5 9.5 4.5Z" fill="white"/> +</svg> \ No newline at end of file diff --git a/src/img/icon/block/menu2.svg b/src/img/icon/block/menu2.svg index 7f742ee64e..67ab7d18d7 100644 --- a/src/img/icon/block/menu2.svg +++ b/src/img/icon/block/menu2.svg @@ -1,5 +1,3 @@ -<svg width="8" height="17" viewBox="0 0 8 17" fill="none" xmlns="http://www.w3.org/2000/svg"> -<rect x="3" y="2.14075" width="2" height="2" rx="1" fill="#E89D00"/> -<rect x="3" y="7.14075" width="2" height="2" rx="1" fill="#E89D00"/> -<rect x="3" y="12.1407" width="2" height="2" rx="1" fill="#E89D00"/> +<svg width="2" height="12" viewBox="0 0 2 12" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M0 1C0 0.447716 0.447715 0 1 0C1.55228 0 2 0.447716 2 1C2 1.55228 1.55228 2 1 2C0.447715 2 0 1.55228 0 1ZM0 6C0 5.44772 0.447715 5 1 5C1.55228 5 2 5.44772 2 6C2 6.55228 1.55228 7 1 7C0.447715 7 0 6.55228 0 6ZM1 10C0.447715 10 0 10.4477 0 11C0 11.5523 0.447715 12 1 12C1.55228 12 2 11.5523 2 11C2 10.4477 1.55228 10 1 10Z" fill="#252525"/> </svg> \ No newline at end of file diff --git a/src/scss/block/common.scss b/src/scss/block/common.scss index f2b0eacdc8..2556269dd8 100644 --- a/src/scss/block/common.scss +++ b/src/scss/block/common.scss @@ -31,11 +31,12 @@ .flex { position: relative; z-index: 2; } .icon.dnd { - width: 12px; height: 100%; background-size: 8px 16px; opacity: 0; cursor: grab; position: absolute; right: 6px; top: 0px; - background-image: url('~img/icon/block/menu0.svg'); border: 1px solid var(--color-shape-secondary); border-radius: 12px; + width: 12px; height: 100%; background-size: 2px 12px; opacity: 0; cursor: grab; position: absolute; right: 6px; top: 0px; + background-image: url('~img/icon/block/menu0.svg'); border: 1px solid var(--color-shape-secondary); border-radius: 12px; } .icon.dnd:hover { - background-image: url('~img/icon/block/menu2.svg') !important; border-color: var(--color-system-accent-100); box-shadow: 0px 0px 0px 1px var(--color-system-accent-100); + background-image: url('~img/icon/block/menu2.svg') !important; background-color: var(--color-shape-tertiary); + border-color: var(--color-shape-tertiary); } .inputWithFile { position: relative; } diff --git a/src/scss/component/editor.scss b/src/scss/component/editor.scss index a0a8036c7c..d731c2d748 100644 --- a/src/scss/component/editor.scss +++ b/src/scss/component/editor.scss @@ -17,9 +17,10 @@ .editor { .icon.buttonAdd { - width: 20px; height: 20px; position: absolute; z-index: 5; user-select: none; background-image: url('~img/icon/block/add.svg'); - transition: opacity 0.075s ease-in-out, transform 0.075s ease-in-out; display: none; + width: 20px; height: 20px; position: absolute; z-index: 5; user-select: none; background-image: url('~img/icon/block/add0.svg'); + transition: opacity 0.075s ease-in-out, transform 0.075s ease-in-out, background-image 0.1s $easeInQuint; display: none; } + .icon.buttonAdd:hover { background-image: url('~img/icon/block/add1.svg'); } .icon.buttonAdd.show { display: block; } .blockLast { margin-left: -50px; } From daf4ede7f545419090dfe17b0e3c089437b66c4e Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 11:09:52 +0200 Subject: [PATCH 49/54] fix object cell --- src/ts/component/block/dataview/cell/object.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ts/component/block/dataview/cell/object.tsx b/src/ts/component/block/dataview/cell/object.tsx index 63972ddd36..6004bf2b8b 100644 --- a/src/ts/component/block/dataview/cell/object.tsx +++ b/src/ts/component/block/dataview/cell/object.tsx @@ -184,6 +184,7 @@ const CellObject = observer(class CellObject extends React.Component<I.Cell, Sta }; onClick (e: any, item: any) { + U.Object.openConfig(item); }; placeholderCheck () { From b0d225c38521648149da794a51bc84d515ab64dd Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 11:48:50 +0200 Subject: [PATCH 50/54] JS-5395: fix --- src/scss/list/objectManager.scss | 10 +++++----- src/scss/page/main/chat.scss | 4 ++++ src/ts/component/header/auth/index.tsx | 2 +- src/ts/component/page/main/chat.tsx | 2 ++ src/ts/lib/sidebar.ts | 4 ++++ 5 files changed, 16 insertions(+), 6 deletions(-) diff --git a/src/scss/list/objectManager.scss b/src/scss/list/objectManager.scss index 9221c8e298..311733f1d5 100644 --- a/src/scss/list/objectManager.scss +++ b/src/scss/list/objectManager.scss @@ -37,16 +37,16 @@ } } - @media (max-width: 940px) { - .controls.withSelected { - .side.left { + @media (max-width: 940px) { + .controls.withSelected { + .side.left { .element { height: 28px; } .element { .name { display: none; } } } - } - } + } + } .items { height: 100%; } .items { diff --git a/src/scss/page/main/chat.scss b/src/scss/page/main/chat.scss index 886de3d67e..e72c15b5d3 100644 --- a/src/scss/page/main/chat.scss +++ b/src/scss/page/main/chat.scss @@ -2,4 +2,8 @@ .pageMainChat { > #loader { position: fixed; top: 0px; width: 100%; height: 100%; } + + .block.blockCover.isFull { + .elements { width: 100%; margin-left: 0px; left: 0px; } + } } \ No newline at end of file diff --git a/src/ts/component/header/auth/index.tsx b/src/ts/component/header/auth/index.tsx index f2598662fd..386caae683 100644 --- a/src/ts/component/header/auth/index.tsx +++ b/src/ts/component/header/auth/index.tsx @@ -16,7 +16,7 @@ class HeaderAuthIndex extends React.Component { <div className="side left" /> <div className="side center" /> <div className="side right"> - <Icon className="settings" onClick={this.onSettings} /> + <Icon className="settings withBackground" onClick={this.onSettings} /> </div> </React.Fragment> ); diff --git a/src/ts/component/page/main/chat.tsx b/src/ts/component/page/main/chat.tsx index 563f527199..dfa0dec684 100644 --- a/src/ts/component/page/main/chat.tsx +++ b/src/ts/component/page/main/chat.tsx @@ -296,6 +296,8 @@ const PageMainChat = observer(class PageMainChat extends React.Component<I.PageC if (cover.length) { cover.css({ top: headerHeight }); + + cover.width() <= J.Size.editor ? cover.addClass('isFull') : cover.removeClass('isFull'); }; const fh = Number(formWrapper.outerHeight(true)) || 0; diff --git a/src/ts/lib/sidebar.ts b/src/ts/lib/sidebar.ts index b70faf635c..515d5dee27 100644 --- a/src/ts/lib/sidebar.ts +++ b/src/ts/lib/sidebar.ts @@ -204,6 +204,10 @@ class Sidebar { }; resizePage (width: number, animate: boolean): void { + if (!keyboard.isMain()) { + return; + }; + this.initObjects(); if ((width === null) && this.obj && this.obj.length) { From e731ce4dae27b27d3c0c429cdb7bb25097333bdf Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 12:39:43 +0200 Subject: [PATCH 51/54] JS-5397: fix --- .../component/block/dataview/cell/object.tsx | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/ts/component/block/dataview/cell/object.tsx b/src/ts/component/block/dataview/cell/object.tsx index 6004bf2b8b..f8b5b29428 100644 --- a/src/ts/component/block/dataview/cell/object.tsx +++ b/src/ts/component/block/dataview/cell/object.tsx @@ -47,17 +47,8 @@ const CellObject = observer(class CellObject extends React.Component<I.Cell, Sta }; let value = this.getItems(); - - const length = value.length; - - if (arrayLimit) { - value = value.slice(0, arrayLimit); - if (length > arrayLimit) { - cn.push('overLimit'); - }; - }; - let content = null; + if (isEditing) { content = ( <div id="value" onClick={this.focus}> @@ -111,7 +102,16 @@ const CellObject = observer(class CellObject extends React.Component<I.Cell, Sta </div> ); } else { - if (!value.length) { + const length = value.length; + + if (arrayLimit) { + value = value.slice(0, arrayLimit); + if (length > arrayLimit) { + cn.push('overLimit'); + }; + }; + + if (!length) { content = <div className="empty">{placeholder}</div>; } else { content = ( From cf9a58c91e8fbd869e6ea85c80a017c6916cff1b Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 13:09:10 +0200 Subject: [PATCH 52/54] JS-5260: combine files and attachments into one list --- src/ts/component/block/chat/buttons.tsx | 7 +- src/ts/component/block/chat/form.tsx | 162 ++++++++++-------------- src/ts/interface/block/chat.ts | 4 +- src/ts/lib/util/data.ts | 34 ++--- src/ts/lib/util/object.ts | 4 + src/ts/model/chatMessage.ts | 4 +- 6 files changed, 92 insertions(+), 123 deletions(-) diff --git a/src/ts/component/block/chat/buttons.tsx b/src/ts/component/block/chat/buttons.tsx index f25f2ad1a0..f1d402a501 100644 --- a/src/ts/component/block/chat/buttons.tsx +++ b/src/ts/component/block/chat/buttons.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import sha1 from 'sha1'; import { observer } from 'mobx-react'; import { Icon } from 'Component'; import { Action, I, J, keyboard, Mark, S, translate, U } from 'Lib'; @@ -16,7 +15,7 @@ interface Props extends I.BlockComponent { onMenuClose: () => void; onMention: () => void; getObjectFromPath: (path: string) => void; - addFiles: (files: any, callBack?: () => void) => void; + addAttachments: (attachments: any[], callBack?: () => void) => void; removeBookmark: (url: string) => void; }; @@ -232,7 +231,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St }; onAttachment (menu?: string) { - const { blockId, attachments, onMenuClose, onChatButtonSelect, addFiles, getObjectFromPath } = this.props; + const { blockId, attachments, onMenuClose, onChatButtonSelect, addAttachments, getObjectFromPath } = this.props; const options: any[] = [ { id: 'object', icon: 'object', name: translate('commonObject') }, @@ -244,7 +243,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St const upload = () => { Action.openFileDialog([], paths => { if (paths.length) { - addFiles([ getObjectFromPath(paths[0]) ]); + addAttachments([ getObjectFromPath(paths[0]) ]); }; }); }; diff --git a/src/ts/component/block/chat/form.tsx b/src/ts/component/block/chat/form.tsx index 90ed7c5a1e..0fdec864f9 100644 --- a/src/ts/component/block/chat/form.tsx +++ b/src/ts/component/block/chat/form.tsx @@ -19,7 +19,6 @@ interface Props extends I.BlockComponent { interface State { attachments: any[]; - files: any[]; }; const ChatForm = observer(class ChatForm extends React.Component<Props, State> { @@ -35,7 +34,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { replyingId: string = ''; state = { attachments: [], - files: [], }; constructor (props: Props) { @@ -56,14 +54,13 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { this.onDragOver = this.onDragOver.bind(this); this.onDragLeave = this.onDragLeave.bind(this); this.onDrop = this.onDrop.bind(this); - this.addFiles = this.addFiles.bind(this); this.onSend = this.onSend.bind(this); this.onEdit = this.onEdit.bind(this); this.onEditClear = this.onEditClear.bind(this); this.onReply = this.onReply.bind(this); this.onReplyClear = this.onReplyClear.bind(this); this.onAttachmentRemove = this.onAttachmentRemove.bind(this); - this.onFileRemove = this.onFileRemove.bind(this); + this.addAttachments = this.addAttachments.bind(this); this.hasSelection = this.hasSelection.bind(this); this.caretMenuParam = this.caretMenuParam.bind(this); this.removeBookmark = this.removeBookmark.bind(this); @@ -73,7 +70,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { render () { const { rootId, readonly } = this.props; - const { attachments, files } = this.state; + const { attachments } = this.state; const { space } = S.Common; const value = this.getTextValue(); @@ -134,14 +131,11 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { onMouseUp={this.onMouseUp} /> - {attachments.length || files.length ? ( + {attachments.length ? ( <div className="attachments"> {attachments.map(item => ( <Attachment key={item.id} object={item} onRemove={this.onAttachmentRemove} /> ))} - {files.map(item => ( - <Attachment key={item.id} object={item} onRemove={this.onFileRemove} /> - ))} </div> ) : ''} @@ -158,7 +152,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { onChatButtonSelect={this.onChatButtonSelect} onTextButtonToggle={this.onTextButtonToggle} getObjectFromPath={this.getObjectFromPath} - addFiles={this.addFiles} + addAttachments={this.addAttachments} onMenuClose={this.onMenuClose} removeBookmark={this.removeBookmark} /> @@ -325,7 +319,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { onKeyUpInput (e: any) { this.range = this.refEditable.getRange(); - const { attachments, files } = this.state; + const { attachments } = this.state; const { to } = this.range; const { filter } = S.Common; const value = this.getTextValue(); @@ -384,7 +378,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { }; }; - if (!value && !attachments.length && !files.length && this.editingId) { + if (!value && !attachments.length && this.editingId) { this.onDelete(this.editingId); }; @@ -441,7 +435,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { }; if (list.length) { - this.addFiles(list); + this.addAttachments(list); }; }; @@ -482,20 +476,66 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { node.removeClass('isDraggingOver'); keyboard.disableCommonDrop(true); - this.addFiles(list, scrollToBottom); + this.addAttachments(list, scrollToBottom); keyboard.disableCommonDrop(false); }; - addFiles (list: any[], callBack?: () => void) { - this.setFiles(list.concat(this.state.files), callBack); + addAttachments (list: any[], callBack?: () => void) { + list = list.map(it => { + it.timestamp = U.Date.now(); + return it; + }); + + this.setAttachments(list.concat(this.state.attachments), callBack); }; setAttachments (list: any[], callBack?: () => void) { this.setState({ attachments: this.checkLimit('attachments', list) }, callBack); }; - setFiles (list: any[], callBack?: () => void) { - this.setState({ files: this.checkLimit('files', list) }, callBack); + addBookmark (url: string) { + const add = (param: any) => { + const { title, description, url } = param; + const item = { + id: sha1(url), + name: title, + description, + layout: I.ObjectLayout.Bookmark, + source: url, + isTmp: true, + timestamp: U.Date.now(), + }; + this.addAttachments([ item ]); + }; + + C.LinkPreview(url, (message: any) => { + if (message.error.code) { + add({ title: url, url }); + } else { + add({ ...message.previewLink, url }); + }; + }); + }; + + removeBookmarks () { + const attachments = this.state.attachments || []; + const bookmarks = attachments.filter(it => it.layout == I.ObjectLayout.Bookmark); + + let filtered = attachments; + bookmarks.forEach(it => { + const marks = this.marks.filter(mark => mark.param == it.source); + if (!marks.length) { + filtered = filtered.filter(file => file.id != it.id); + }; + }); + + if (attachments.length != filtered.length) { + this.setAttachments(filtered); + }; + }; + + removeBookmark (url: string) { + this.onAttachmentRemove(sha1(url)); }; onSend () { @@ -506,12 +546,12 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { const { rootId, scrollToBottom, scrollToMessage } = this.props; const node = $(this.node); const loader = node.find('#form-loader'); - const list = this.state.files || []; - const files = list.filter(it => it.layout == I.ObjectLayout.File); - const bookmarks = list.filter(it => it.layout == I.ObjectLayout.Bookmark); + const list = this.state.attachments || []; + const files = list.filter(it => it.isTmp && U.Object.isFileLayout(it.layout)); + const bookmarks = list.filter(it => it.isTmp && U.Object.isBookmarkLayout(it.layout)); const fl = files.length; const bl = bookmarks.length; - const attachments = (this.state.attachments || []).map(it => ({ target: it.id, type: I.ChatAttachmentType.Link })); + const attachments = (this.state.attachments || []).map(it => ({ target: it.id, type: I.AttachmentType.Link })); loader.addClass('active'); @@ -571,7 +611,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { n++; if (message.objectId) { - attachments.push({ target: message.objectId, type: I.ChatAttachmentType.File }); + attachments.push({ target: message.objectId, type: I.AttachmentType.File }); }; if (n == fl) { @@ -593,7 +633,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { n++; if (message.objectId) { - attachments.push({ target: message.objectId, type: I.ChatAttachmentType.Link }); + attachments.push({ target: message.objectId, type: I.AttachmentType.Link }); }; if (n == bl) { @@ -626,7 +666,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { this.editingId = ''; this.marks = []; this.updateMarkup('', 0, 0); - this.setState({ attachments: [], files: [] }, () => this.refEditable.setRange(this.range)); + this.setState({ attachments: [] }, () => this.refEditable.setRange(this.range)); }; onReply (message: I.ChatMessage) { @@ -689,10 +729,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { this.setState({ attachments: this.state.attachments.filter(it => it.id != id) }); }; - onFileRemove (id: string) { - this.setState({ files: this.state.files.filter(it => it.id != id) }); - }; - updateButtons () { this.refButtons?.setButtons(); }; @@ -747,6 +783,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { case I.MarkType.Object: { U.Object.getById(param, (object: any) => { object.isTmp = true; + object.timestamp = U.Date.now(); attachments.unshift(object); this.setAttachments(attachments); @@ -801,64 +838,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { }; }; - addBookmark (url: string) { - const { files } = this.state; - const id = sha1(url); - - if (files.find(it => it.id == id)) { - return; - }; - - const add = (param: any) => { - const { title, description, url } = param; - - files.unshift({ - id, - name: title, - description, - layout: I.ObjectLayout.Bookmark, - source: url, - isTmp: true, - }); - - this.setFiles(files); - }; - - C.LinkPreview(url, (message: any) => { - if (message.error.code) { - add({ title: url, url }); - } else { - add({ ...message.previewLink, url }); - }; - }); - }; - - removeBookmarks () { - const files = this.state.files || []; - const bookmarks = files.filter(it => it.layout == I.ObjectLayout.Bookmark); - - let filtered = files; - bookmarks.forEach(it => { - const marks = this.marks.filter(mark => mark.param == it.source); - if (!marks.length) { - filtered = filtered.filter(file => file.id != it.id); - }; - }); - - if (files.length != filtered.length) { - this.setFiles(filtered); - }; - }; - - removeBookmark (url: string) { - const files = this.state.files || []; - const filtered = files.filter(it => U.Object.isBookmarkLayout(it.layout) && (it.source != url)); - - if (files.length != filtered.length) { - this.setFiles(filtered); - }; - }; - onMention (fromKeyboard?: boolean) { if (!this.range) { return; @@ -925,14 +904,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> { }; canSend () { - const { attachments, files } = this.state; - - // You can send blank message when editing to delete it - if (this.editingId) { - return true; - }; - - return this.getTextValue() || attachments.length || files.length; + return this.editingId || this.getTextValue() || this.state.attachments.length; }; hasSelection (): boolean { diff --git a/src/ts/interface/block/chat.ts b/src/ts/interface/block/chat.ts index f11748f5b5..627c2aa72f 100644 --- a/src/ts/interface/block/chat.ts +++ b/src/ts/interface/block/chat.ts @@ -7,7 +7,7 @@ export enum ChatButton { Mention = 3, }; -export enum ChatAttachmentType { +export enum AttachmentType { File = 0, Image = 1, Link = 2, @@ -37,7 +37,7 @@ export interface ChatMessageContent { export interface ChatMessageAttachment { target: string; - type: ChatAttachmentType; + type: AttachmentType; }; export interface BlockChat extends I.Block {}; \ No newline at end of file diff --git a/src/ts/lib/util/data.ts b/src/ts/lib/util/data.ts index 3a18ef684b..ffce4b3be8 100644 --- a/src/ts/lib/util/data.ts +++ b/src/ts/lib/util/data.ts @@ -629,18 +629,6 @@ class UtilData { return 0; }; - sortByWeight (c1: any, c2: any) { - if (c1._sortWeight_ > c2._sortWeight_) return -1; - if (c1._sortWeight_ < c2._sortWeight_) return 1; - return this.sortByName(c1, c2); - }; - - sortByFormat (c1: any, c2: any) { - if (c1.format > c2.format) return 1; - if (c1.format < c2.format) return -1; - return this.sortByName(c1, c2); - }; - sortByPinnedTypes (c1: any, c2: any, ids: string[]) { const idx1 = ids.indexOf(c1.id); const idx2 = ids.indexOf(c2.id); @@ -651,18 +639,24 @@ class UtilData { }; sortByNumericKey (key: string, c1: any, c2: any, dir: I.SortType) { - if (c1[key] > c2[key]) return dir == I.SortType.Asc ? 1 : -1; - if (c1[key] < c2[key]) return dir == I.SortType.Asc ? -1 : 1; + const k1 = Number(c1[key]) || 0; + const k2 = Number(c2[key]) || 0; + + if (k1 > k2) return dir == I.SortType.Asc ? 1 : -1; + if (k1 < k2) return dir == I.SortType.Asc ? -1 : 1; return this.sortByName(c1, c2); }; - sortByLastUsedDate (c1: any, c2: any) { - const l1 = Number(c1.lastUsedDate) || 0; - const l2 = Number(c2.lastUsedDate) || 0; + sortByWeight (c1: any, c2: any) { + return this.sortByNumericKey('_sortWeight_', c1, c2, I.SortType.Desc); + }; - if (l1 > l2) return -1; - if (l1 < l2) return 1; - return this.sortByName(c1, c2); + sortByFormat (c1: any, c2: any) { + return this.sortByNumericKey('format', c1, c2, I.SortType.Asc); + }; + + sortByLastUsedDate (c1: any, c2: any) { + return this.sortByNumericKey('lastUsedDate', c1, c2, I.SortType.Desc); }; checkObjectWithRelationCnt (relationKey: string, type: string, ids: string[], limit: number, callBack?: (message: any) => void) { diff --git a/src/ts/lib/util/object.ts b/src/ts/lib/util/object.ts index 87f2aaf007..84e6018c7b 100644 --- a/src/ts/lib/util/object.ts +++ b/src/ts/lib/util/object.ts @@ -346,6 +346,10 @@ class UtilObject { return layout == I.ObjectLayout.Date; }; + isFileLayout (layout: I.ObjectLayout): boolean { + return layout == I.ObjectLayout.File; + }; + // --------------------------------------------------------- // getPageLayouts (): I.ObjectLayout[] { diff --git a/src/ts/model/chatMessage.ts b/src/ts/model/chatMessage.ts index a48cf89d4d..c8b72d4946 100644 --- a/src/ts/model/chatMessage.ts +++ b/src/ts/model/chatMessage.ts @@ -30,12 +30,12 @@ class ChatMessageContent implements I.ChatMessageContent { class ChatMessageAttachment implements I.ChatMessageAttachment { target = ''; - type: I.ChatAttachmentType = I.ChatAttachmentType.File; + type: I.AttachmentType = I.AttachmentType.File; constructor (props: I.ChatMessageAttachment) { this.target = String(props.target || ''); - this.type = Number(props.type) || I.ChatAttachmentType.File; + this.type = Number(props.type) || I.AttachmentType.File; makeObservable(this, { target: observable, From d8e9fa341dd552e3bf3f3da91f6472321c599c6d Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 13:13:13 +0200 Subject: [PATCH 53/54] JS-5398: fix --- src/ts/component/block/dataview/cell/object.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/ts/component/block/dataview/cell/object.tsx b/src/ts/component/block/dataview/cell/object.tsx index f8b5b29428..3a5ff9b0f8 100644 --- a/src/ts/component/block/dataview/cell/object.tsx +++ b/src/ts/component/block/dataview/cell/object.tsx @@ -184,7 +184,10 @@ const CellObject = observer(class CellObject extends React.Component<I.Cell, Sta }; onClick (e: any, item: any) { - U.Object.openConfig(item); + const { isEditing } = this.state; + if (isEditing) { + U.Object.openConfig(item); + }; }; placeholderCheck () { From da472f93e028161421985062f2df99fe5475e630 Mon Sep 17 00:00:00 2001 From: Andrew Simachev <andrew.simachev@gmail.com> Date: Tue, 17 Sep 2024 13:17:23 +0200 Subject: [PATCH 54/54] JS-5399: uncomment relations list --- src/ts/component/sidebar/object.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/component/sidebar/object.tsx b/src/ts/component/sidebar/object.tsx index c99f353667..5a9cf52623 100644 --- a/src/ts/component/sidebar/object.tsx +++ b/src/ts/component/sidebar/object.tsx @@ -408,7 +408,7 @@ const SidebarObject = observer(class SidebarObject extends React.Component<{}, S { id: I.ObjectContainerType.Media, name: translate('sidebarObjectTypeMedia') }, { id: I.ObjectContainerType.Bookmark, name: translate('sidebarObjectTypeBookmark') }, { id: I.ObjectContainerType.Type, name: translate('sidebarObjectTypeType') }, - //{ id: I.ObjectContainerType.Relation, name: translate('sidebarObjectTypeRelation') }, + { id: I.ObjectContainerType.Relation, name: translate('sidebarObjectTypeRelation') }, { id: I.ObjectContainerType.Orphan, icon: `checkbox c${Number(this.orphan)}`, name: translate('sidebarObjectTypeOrphan') }, ] as any[]).map(it => { if (it.id != I.ObjectContainerType.Orphan) {