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/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/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/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'); } + } } 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/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} diff --git a/src/ts/component/sidebar/page/settings.tsx b/src/ts/component/sidebar/page/settings.tsx index 98a37f51fe..32b31c9c81 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'; @@ -21,7 +21,7 @@ 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} @@ -268,7 +274,7 @@ 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 'contentModelRelations': { + 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, + }); + + break; + }; + }; + }; }); -export default SidebarSettings \ No newline at end of file +export default SidebarSettings