From 2b6ff524fc59182d8e215a07429e13769a31e33f Mon Sep 17 00:00:00 2001 From: Mike Mhlv Date: Wed, 26 Feb 2025 14:48:36 +0000 Subject: [PATCH 1/4] JS-6387: plus button and context menu --- src/scss/component/sidebar/settings.scss | 31 ++++---- src/ts/component/menu/object/context.tsx | 2 +- src/ts/component/sidebar/page/settings.tsx | 83 ++++++++++++++++++++-- 3 files changed, 93 insertions(+), 23 deletions(-) diff --git a/src/scss/component/sidebar/settings.scss b/src/scss/component/sidebar/settings.scss index f59c94e8da..52b708f795 100644 --- a/src/scss/component/sidebar/settings.scss +++ b/src/scss/component/sidebar/settings.scss @@ -29,19 +29,6 @@ .section { > .name { @include text-small; color: var(--color-text-secondary); margin: 0px; padding: 0px 8px; } } - .section.isLabel { - > .name { margin-bottom: -4px; } - } - - .section.isToggle { - .items { display: none; padding-left: 18px; } - } - .section.isToggle.isOpen { - .toggle { - .icon { transform: rotate(0deg); } - } - .items { display: flex; } - } .items { display: flex; flex-direction: column; } @@ -51,7 +38,8 @@ transition: background-color $transitionCommon; } .toggle:hover, - .item:hover, .item.active { background-color: var(--color-shape-highlight-medium); } + .item:hover, .item.hover, .item.active { background-color: var(--color-shape-highlight-medium); } + .item { .icon, .iconObject { flex-shrink: 0; } .icon { width: 20px; height: 20px; } @@ -71,12 +59,21 @@ .name { @include text-common; @include text-overflow-nw; font-weight: 600; } } - .toggle { padding-left: 4px; } + .toggle { padding-left: 4px; justify-content: space-between; } .toggle { - .icon { width: 20px; height: 20px; flex-shrink: 0; background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); } + .left { display: flex; justify-content: flex-start; gap: 0px 6px; align-items: center; } + .right { display: flex; align-items: center; } + + .icon { width: 20px; height: 20px; } + .icon.arrow { flex-shrink: 0; background-image: url('~img/arrow/select/dark.svg'); transform: rotate(-90deg); } + .icon.plus { opacity: 0.8; border-radius: 4px; background-image: url('~img/icon/plus/menu0.svg'); } + } + .toggle:hover { + .icon.plus { opacity: 1; } + .icon.plus:hover { background-color: var(--color-shape-secondary); } } .toggle.isOpen { - .icon { transform: rotate(0deg); } + .icon.arrow { transform: rotate(0deg); } } } diff --git a/src/ts/component/menu/object/context.tsx b/src/ts/component/menu/object/context.tsx index 4de8703afe..5850fe387f 100644 --- a/src/ts/component/menu/object/context.tsx +++ b/src/ts/component/menu/object/context.tsx @@ -463,4 +463,4 @@ class MenuContext extends React.Component { }; -export default MenuContext; \ No newline at end of file +export default MenuContext; diff --git a/src/ts/component/sidebar/page/settings.tsx b/src/ts/component/sidebar/page/settings.tsx index 98a37f51fe..6386f86e9c 100644 --- a/src/ts/component/sidebar/page/settings.tsx +++ b/src/ts/component/sidebar/page/settings.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { observer } from 'mobx-react'; -import { I, S, translate, U } from 'Lib'; +import { analytics, I, J, keyboard, S, sidebar, translate, U } from 'Lib'; import { Icon, IconObject, ObjectName } from 'Component'; import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache } from 'react-virtualized'; @@ -52,9 +52,14 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component

this.onToggle(item)}> - - {item.name} +

this.onToggle(item)}> +
+ + {item.name} +
+
+ this.onAdd(e, item)} /> +
); }; @@ -127,6 +132,7 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component

this.onContext(item)} onClick={() => this.onClick(item)} > {icon} @@ -342,11 +348,78 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component

{ + return item; + }, + } + }); + }; + onToggle (item) { this.toggle[item.id] = !this.toggle[item.id]; this.forceUpdate(); }; + + onAdd (e, item) { + e.preventDefault(); + e.stopPropagation(); + + const isPopup = keyboard.isPopup(); + + switch (item.id) { + case 'contentModelTypes': { + const type = S.Record.getTypeType(); + const featured = [ 'type', 'tag', 'backlinks' ]; + const recommended = []; + const mapper = it => S.Record.getRelationByKey(it)?.id; + const details: any = { + isNew: true, + type: type.id, + layout: I.ObjectLayout.Type, + recommendedFeaturedRelations: featured.map(mapper).filter(it => it), + recommendedRelations: recommended.map(mapper).filter(it => it), + }; + + sidebar.rightPanelToggle(true, true, isPopup, 'type', { details }); + break; + }; + case 'contentModelFields': { + const node = $(this.node); + const width = node.width() - 32; + + S.Menu.open('blockRelationEdit', { + element: `#containerSettings #item-toggle-${item.id} .plus`, + offsetY: 4, + width, + className: 'fixed', + classNameWrap: 'fromSidebar', + horizontal: I.MenuDirection.Right, + data: { + addCommand: (rootId: string, blockId: string, relation: any, onChange: (message: any) => void) => { + // callback? + }, + deleteCommand: () => { + }, + } + }); + + break; + }; + }; + }; }); -export default SidebarSettings \ No newline at end of file +export default SidebarSettings From 793988c57e7ed2c7b4b0da97d9d90e7b9e141ade Mon Sep 17 00:00:00 2001 From: Mike Mhlv Date: Wed, 26 Feb 2025 14:59:57 +0000 Subject: [PATCH 2/4] JS-6387: dark mode --- src/img/theme/dark/icon/settings/data/drive.svg | 3 +++ src/img/theme/dark/icon/settings/data/location.svg | 3 +++ src/img/theme/dark/icon/settings/data/sites.svg | 3 +++ src/scss/theme/dark/common.scss | 8 ++++++++ src/scss/theme/dark/page.scss | 6 ++++++ 5 files changed, 23 insertions(+) create mode 100644 src/img/theme/dark/icon/settings/data/drive.svg create mode 100644 src/img/theme/dark/icon/settings/data/location.svg create mode 100644 src/img/theme/dark/icon/settings/data/sites.svg diff --git a/src/img/theme/dark/icon/settings/data/drive.svg b/src/img/theme/dark/icon/settings/data/drive.svg new file mode 100644 index 0000000000..947233fc80 --- /dev/null +++ b/src/img/theme/dark/icon/settings/data/drive.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/theme/dark/icon/settings/data/location.svg b/src/img/theme/dark/icon/settings/data/location.svg new file mode 100644 index 0000000000..0a1ce046b3 --- /dev/null +++ b/src/img/theme/dark/icon/settings/data/location.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/theme/dark/icon/settings/data/sites.svg b/src/img/theme/dark/icon/settings/data/sites.svg new file mode 100644 index 0000000000..6eac169c6a --- /dev/null +++ b/src/img/theme/dark/icon/settings/data/sites.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scss/theme/dark/common.scss b/src/scss/theme/dark/common.scss index d354e5d4a7..af47e581bd 100644 --- a/src/scss/theme/dark/common.scss +++ b/src/scss/theme/dark/common.scss @@ -333,6 +333,14 @@ html.themeDark { } } } + + > #containerSettings { + > .body { + .logout { + .icon { background-image: url('#{$themePath}/icon/popup/settings/logout.svg'); } + } + } + } } /* Notifications */ diff --git a/src/scss/theme/dark/page.scss b/src/scss/theme/dark/page.scss index e74e355d3b..9b87fc5eed 100644 --- a/src/scss/theme/dark/page.scss +++ b/src/scss/theme/dark/page.scss @@ -173,4 +173,10 @@ .icon { background-image: url('#{$themePath}/icon/payment/hyperlink.svg'); } } } + + .pageSettingsDataIndex { + .icon.drive { background-image: url('#{$themePath}/icon/settings/data/drive.svg'); } + .icon.sites { background-image: url('#{$themePath}/icon/settings/data/sites.svg'); } + .icon.location { background-image: url('#{$themePath}/icon/settings/data/location.svg'); } + } } From 36193f5a174ad4b3f92b9eb5b958aff9bf28bece Mon Sep 17 00:00:00 2001 From: Mike Mhlv Date: Wed, 26 Feb 2025 15:11:16 +0000 Subject: [PATCH 3/4] JS-6387: swiper --- src/scss/page/main/settings.scss | 5 +++++ src/ts/component/page/main/settings/membership.tsx | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/scss/page/main/settings.scss b/src/scss/page/main/settings.scss index d359db4a0b..c9a1dea96b 100644 --- a/src/scss/page/main/settings.scss +++ b/src/scss/page/main/settings.scss @@ -731,6 +731,11 @@ .swiper-slide.swiper-slide-prev, .swiper-slide.swiper-slide-next { opacity: 0.2; } .swiper-slide.swiper-slide-active { opacity: 1; } + + .swiper-button-prev, + .swiper-button-next { position: absolute; width: 100%; height: 100%; top: 0px; z-index: 2; } + .swiper-button-prev { left: -100%; } + .swiper-button-next { right: -100%; } } .slide { diff --git a/src/ts/component/page/main/settings/membership.tsx b/src/ts/component/page/main/settings/membership.tsx index f597d4d17c..5a2aa4e904 100644 --- a/src/ts/component/page/main/settings/membership.tsx +++ b/src/ts/component/page/main/settings/membership.tsx @@ -3,7 +3,7 @@ import { observer } from 'mobx-react'; import { Title, Label, Button, Icon } from 'Component'; import { I, S, U, J, Action, translate, analytics, keyboard } from 'Lib'; import { Swiper, SwiperSlide } from 'swiper/react'; -import { Pagination, Autoplay, Mousewheel } from 'swiper/modules'; +import { Pagination, Autoplay, Mousewheel, Navigation } from 'swiper/modules'; const PageMainSettingsMembership = observer(class PageMainSettingsMembership extends React.Component { @@ -135,7 +135,8 @@ const PageMainSettingsMembership = observer(class PageMainSettingsMembership ext disableOnInteraction: true, }} mousewheel={true} - modules={[ Pagination, Autoplay, Mousewheel ]} + navigation={true} + modules={[ Pagination, Autoplay, Mousewheel, Navigation ]} centeredSlides={true} loop={true} onSwiper={this.onSwiper} From 4eb2fc463657e6e7c219d8931c6f9bd38b77a538 Mon Sep 17 00:00:00 2001 From: Mike Mhlv Date: Wed, 26 Feb 2025 15:16:49 +0000 Subject: [PATCH 4/4] JS-6387: code review --- src/ts/component/sidebar/page/settings.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/ts/component/sidebar/page/settings.tsx b/src/ts/component/sidebar/page/settings.tsx index 6386f86e9c..32b31c9c81 100644 --- a/src/ts/component/sidebar/page/settings.tsx +++ b/src/ts/component/sidebar/page/settings.tsx @@ -21,7 +21,7 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component

void) => { - // callback? - }, - deleteCommand: () => { - }, - } }); break;