Merge pull request #1462 from anyproto/feature/JS-7171-bookmark-widget-create

Feature/JS-7171: Bookmark widget create

package.json

@@ -227,7 +227,6 @@
 			"electron/json/*",
 			"electron/env.json",
 			"electron/img/*",
-			"electron/img/icons/*",
 			"build",
 			"!dist/*",
 			"dist/index.html",
@@ -308,6 +307,10 @@
 				"from": "node_modules/@electron",
 				"to": "node_modules/@electron"
 			},
+			{
+				"from": "node_modules/@tomjs",
+				"to": "node_modules/@tomjs"
+			},
 			{
 				"from": "node_modules/ajv",
 				"to": "node_modules/ajv"
@@ -440,6 +443,10 @@
 				"from": "node_modules/if-async",
 				"to": "node_modules/if-async"
 			},
+			{
+				"from": "node_modules/immediate",
+				"to": "node_modules/immediate"
+			},
 			{
 				"from": "node_modules/imurmurhash",
 				"to": "node_modules/imurmurhash"
@@ -476,6 +483,10 @@
 				"from": "node_modules/jsonfile",
 				"to": "node_modules/jsonfile"
 			},
+			{
+				"from": "node_modules/jszip",
+				"to": "node_modules/jszip"
+			},
 			{
 				"from": "node_modules/keytar",
 				"to": "node_modules/keytar"
@@ -484,6 +495,10 @@
 				"from": "node_modules/lazy-val",
 				"to": "node_modules/lazy-val"
 			},
+			{
+				"from": "node_modules/lie",
+				"to": "node_modules/lie"
+			},
 			{
 				"from": "node_modules/locate-path",
 				"to": "node_modules/locate-path"
@@ -552,6 +567,10 @@
 				"from": "node_modules/p-try",
 				"to": "node_modules/p-try"
 			},
+			{
+				"from": "node_modules/pako",
+				"to": "node_modules/pako"
+			},
 			{
 				"from": "node_modules/path-exists",
 				"to": "node_modules/path-exists"
@@ -564,6 +583,10 @@
 				"from": "node_modules/pkg-up",
 				"to": "node_modules/pkg-up"
 			},
+			{
+				"from": "node_modules/process-nextick-args",
+				"to": "node_modules/process-nextick-args"
+			},
 			{
 				"from": "node_modules/pupa",
 				"to": "node_modules/pupa"
@@ -580,6 +603,10 @@
 				"from": "node_modules/rimraf",
 				"to": "node_modules/rimraf"
 			},
+			{
+				"from": "node_modules/safe-buffer",
+				"to": "node_modules/safe-buffer"
+			},
 			{
 				"from": "node_modules/sanitize-filename",
 				"to": "node_modules/sanitize-filename"
@@ -592,6 +619,10 @@
 				"from": "node_modules/semver",
 				"to": "node_modules/semver"
 			},
+			{
+				"from": "node_modules/setimmediate",
+				"to": "node_modules/setimmediate"
+			},
 			{
 				"from": "node_modules/signal-exit",
 				"to": "node_modules/signal-exit"
@@ -636,6 +667,10 @@
 				"from": "node_modules/unused-filename",
 				"to": "node_modules/unused-filename"
 			},
+			{
+				"from": "node_modules/util-deprecate",
+				"to": "node_modules/util-deprecate"
+			},
 			{
 				"from": "node_modules/wrappy",
 				"to": "node_modules/wrappy"
@@ -739,4 +774,4 @@
 			"pre-commit": "npm run precommit && git add licenses.json"
 		}
 	}
-}
+}

src/scss/widget/common.scss

@@ -41,6 +41,7 @@
 		.icon.collapse.isClosed { transform: rotateZ(-90deg); }
 
 		.iconWrap:hover,
+		.iconWrap.hover,
 		.iconWrap.active {
 			.icon.back { background-image: url('~img/icon/widget/back1.svg'); }
 			.icon.options { background-image: url('~img/icon/widget/options1.svg'); }
@@ -55,7 +56,6 @@
 	&.isEmpty {
 		.head {
 			.buttons { display: flex; }
-			.iconWrap.more { display: none; }
 
 			.sides:hover {
 				.iconWrap.more { display: flex; }
@@ -112,12 +112,6 @@
 	}
 }
 
-.widget.active {
-	.head {
-		.iconWrap.more { background-color: var(--color-shape-highlight-medium); }
-	}
-}
-
 .widget.isPreview {
 	.head { border-bottom: 1px solid var(--color-shape-secondary); padding: 12px 16px 11px 8px !important; }
 	.head::before { top: 18px; }

src/ts/component/widget/index.tsx

@@ -20,7 +20,7 @@ interface Props extends I.WidgetComponent {
 
 const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 
-	const { config, space } = S.Common;
+	const { space } = S.Common;
 	const spaceview = U.Space.getSpaceview();
 	const { block, isPreview, isEditing, className, setEditing, onDragStart, onDragOver, setPreview } = props;
 	const { viewId } = block.content;
@@ -139,6 +139,7 @@ const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 			return;
 		};
 
+		const node = $(nodeRef.current);
 		const route = param.route || analytics.route.widget;
 		const isFavorite = object.id == J.Constant.widgetId.favorite;
 
@@ -147,6 +148,7 @@ const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 		let typeKey = '';
 		let templateId = '';
 		let isCollection = false;
+		let type = null;
 
 		if (U.Object.isInSetLayouts(object.layout)) {
 			const rootId = getRootId();
@@ -156,7 +158,7 @@ const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 
 			const view = Dataview.getView(rootId, J.Constant.blockId.dataview, viewId);
 			const typeId = Dataview.getTypeId(rootId, J.Constant.blockId.dataview, object.id, viewId);
-			const type = S.Record.getTypeById(typeId);
+			type = S.Record.getTypeById(typeId);
 
 			if (!type) {
 				return;
@@ -171,7 +173,7 @@ const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 			switch (object.id) {
 				default:
 				case J.Constant.widgetId.favorite: {
-					const type = S.Record.getTypeById(S.Common.type);
+					type = S.Record.getTypeById(S.Common.type);
 
 					if (!type) {
 						return;
@@ -191,6 +193,39 @@ const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 			return;
 		};
 
+		const cb = object => {
+			if (isFavorite) {
+				Action.setIsFavorite([ object.id ], true, route);
+			};
+
+			if (isCollection) {
+				C.ObjectCollectionAdd(object.id, [ object.id ]);
+			};
+
+			U.Object.openConfig(object);
+			analytics.createObject(object.type, object.layout, route, 0);
+
+			if (layout == I.WidgetLayout.Tree) {
+				C.BlockCreate(object.id, '', I.BlockPosition.Bottom, U.Data.getLinkBlockParam(object.id, object.layout, true), (message: any) => {
+					if (!message.error.code) {
+						analytics.event('CreateLink');
+					};
+				});
+			};
+		};
+
+		if (U.Object.isBookmarkLayout(type.recommendedLayout)) {
+			U.Menu.onBookmarkMenu({
+				element: `#widget-${block.id} .iconWrap.create`,
+				onOpen: () => node.addClass('active'),
+				onClose: () => node.removeClass('active'),
+				className: 'fixed',
+				classNameWrap: 'fromSidebar',
+				data: { details },
+			}, cb);
+			return;
+		};
+
 		if (typeKey == J.Constant.typeKey.type) {
 			U.Object.createType({}, false);
 			return;
@@ -201,29 +236,8 @@ const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 		};
 
 		C.ObjectCreate(details, flags, templateId, typeKey, S.Common.space, (message: any) => {
-			if (message.error.code) {
-				return;
-			};
-
-			const newObject = message.details;
-
-			if (isFavorite) {
-				Action.setIsFavorite([ newObject.id ], true, route);
-			};
-
-			if (isCollection) {
-				C.ObjectCollectionAdd(object.id, [ newObject.id ]);
-			};
-
-			U.Object.openConfig(newObject);
-			analytics.createObject(newObject.type, newObject.layout, route, message.middleTime);
-
-			if (layout == I.WidgetLayout.Tree) {
-				C.BlockCreate(object.id, '', I.BlockPosition.Bottom, U.Data.getLinkBlockParam(newObject.id, newObject.layout, true), (message: any) => {
-					if (!message.error.code) {
-						analytics.event('CreateLink');
-					};
-				});
+			if (!message.error.code) {
+				cb(message.details);
 			};
 		});
 	};
@@ -248,9 +262,11 @@ const WidgetIndex = observer(forwardRef<{}, Props>((props, ref) => {
 		const { x, y } = keyboard.mouse.page;
 
 		S.Menu.open('widget', {
-			rect: { width: 0, height: 0, x: x + 4, y },
+			element: `#widget-${block.id} .iconWrap.more`,
+			rect: { width: 0, height: 0, x, y: y + 14 },
 			className: 'fixed',
 			classNameWrap: 'fromSidebar',
+			horizontal: I.MenuDirection.Center,
 			subIds: J.Menu.widget,
 			onOpen: () => node.addClass('active'),
 			onClose: () => node.removeClass('active'),