JS-6387: plus button and context menu

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); }
             }
         }
 

src/ts/component/menu/object/context.tsx

@@ -463,4 +463,4 @@ class MenuContext extends React.Component<I.Menu> {
 
 };
 
-export default MenuContext;
+export default MenuContext;

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<P
 			};
 
 			return (
-				<div className={cn.join(' ')} onClick={() => this.onToggle(item)}>
-					<Icon />
-					{item.name}
+				<div id={`item-toggle-${item.id}`} className={cn.join(' ')} onClick={() => this.onToggle(item)}>
+					<div className="left">
+						<Icon className="arrow" />
+						{item.name}
+					</div>
+					<div className="right">
+						<Icon className="plus" onClick={e => this.onAdd(e, item)} />
+					</div>
 				</div>
 			);
 		};
@@ -127,6 +132,7 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component<P
 				<div
 					id={`item-${item.id}`}
 					className={cn.join(' ')}
+					onContextMenu={() => this.onContext(item)}
 					onClick={() => this.onClick(item)}
 				>
 					{icon}
@@ -342,11 +348,78 @@ const SidebarSettings = observer(class SidebarSettings extends React.Component<P
 		U.Object.openAuto(param);
 	};
 
+	onContext (item) {
+		if (!U.Object.isTypeOrRelationLayout(item.layout)) {
+			return;
+		};
+
+		const { x, y } = keyboard.mouse.page;
+
+		S.Menu.open('objectContext', {
+			element: `#containerSettings #item-${item.id}`,
+			rect: { width: 0, height: 0, x: x + 4, y },
+			data: {
+				objectIds: [ item.id ],
+				getObject: () => {
+					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
+export default SidebarSettings