JS-4422: shared space onboarding tooltip

src/json/text.json

@@ -1783,6 +1783,9 @@
 	"onboardingQuickCaptureTitle": "Create Object by Selecting Type",
 	"onboardingQuickCaptureDescription": "<p>Pin favorite types, install from Anytype Library, or create new ones from the menu.</p><p>Customize your experience by adjusting click options at Settings > Preferences > Show quick capture menu on.</p>",
 
+	"onboardingShareSpaceTitle": "Introducing shared spaces",
+	"onboardingShareSpaceDescription": "Click on the space widget to open space settings. Here you can share the space and invite members to collaborate!",
+
 	"libDataviewRelations": "Relations",
 	"libDataviewGroups": "Groups",
 	"libDataviewView": "View",

src/scss/menu/onboarding.scss

@@ -28,6 +28,8 @@
 		.confettiCanvas { position: absolute; pointer-events: none; width: 100%;  height: 100%; left: 0; top: 0; }
 
 		.bottom { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 20px; }
+		.bottom:empty { display: none; }
+
 		.bottom {
 			.round {
 				display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;

src/ts/component/list/widget.tsx

@@ -130,7 +130,7 @@ const ListWidget = observer(class ListWidget extends React.Component<Props, Stat
 						cacheKey="firstTarget"
 					>
 						<Widget 
-							block={new M.Block({ id: 'widget-space', type: I.BlockType.Widget, content: { layout: I.WidgetLayout.Space } })} 
+							block={new M.Block({ id: 'space', type: I.BlockType.Widget, content: { layout: I.WidgetLayout.Space } })} 
 							disableContextMenu={true} 
 							onDragStart={this.onDragStart}
 							onDragOver={this.onDragOver}

src/ts/component/menu/onboarding.tsx

@@ -61,37 +61,6 @@ const MenuOnboarding = observer(class MenuSelect extends React.Component<I.Menu,
 
 		buttons = buttons.filter(it => it);
 
-		const Steps = () => (
-			<div className="steps">
-				{l > 1 ? (
-					<React.Fragment>
-						{[ ...Array(l) ].map((e: number, i: number) => {
-							const cn = [ 'step' ];
-							if (i == current) {
-								cn.push('active');
-							};
-
-							return <div key={i} className={cn.join(' ')} onClick={e => this.onClick(e, i)} />;
-						})}
-					</React.Fragment>
-				) : ''}
-			</div>
-		);
-
-		const Buttons = () => (
-			<div className="buttons">
-				{buttons.map((button, i) => (
-					<Button
-						key={i}
-						text={button.text}
-						color={(i == buttons.length - 1) ? 'black' : 'blank'}
-						className="c28"
-						onClick={e => this.onButton(e, button.action)}
-					/>
-				))}
-			</div>
-		);
-
 		return (
 			<div 
 				ref={node => this.node = node}
@@ -105,8 +74,32 @@ const MenuOnboarding = observer(class MenuSelect extends React.Component<I.Menu,
 				{item.video ? <video ref={node => this.video = node} src={item.video} onClick={(e: any) => this.onVideoClick(e, item.video)} controls={false} autoPlay={true} loop={true} /> : ''}
 
 				<div className="bottom">
-					<Steps />
-					<Buttons />
+					{l > 1 ? (
+						<div className="steps">
+							{[ ...Array(l) ].map((e: number, i: number) => {
+								const cn = [ 'step' ];
+								if (i == current) {
+									cn.push('active');
+								};
+
+								return <div key={i} className={cn.join(' ')} onClick={e => this.onClick(e, i)} />;
+							})}
+						</div>
+					) : ''}
+
+					{buttons.length ? (
+						<div className="buttons">
+							{buttons.map((button, i) => (
+								<Button
+									key={i}
+									text={button.text}
+									color={(i == buttons.length - 1) ? 'black' : 'blank'}
+									className="c28"
+									onClick={e => this.onButton(e, button.action)}
+								/>
+							))}
+						</div>
+					) : ''}
 				</div>
 
 				{showConfetti ? <ReactCanvasConfetti refConfetti={ins => this.confetti = ins} className="confettiCanvas" /> : ''}

src/ts/component/widget/space.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { IconObject, ObjectName } from 'Component';
-import { I, C, UtilSpace, UtilCommon, translate } from 'Lib';
+import { I, C, UtilSpace, UtilCommon, translate, Onboarding, keyboard } from 'Lib';
 import { popupStore, commonStore } from 'Store';
 
 const WidgetSpace = observer(class WidgetSpace extends React.Component<I.WidgetComponent> {

src/ts/docs/help/onboarding.ts

@@ -213,25 +213,25 @@ export default {
 				{
 					name: translate('onboardingQuickCaptureTitle'),
 					description: translate('onboardingQuickCaptureDescription'),
+					noButton: true,
 					param: {
 						element: '#navigationPanel #button-navigation-plus',
 						classNameWrap: 'fixed',
 						vertical: I.MenuDirection.Top,
 						horizontal: I.MenuDirection.Center,
 						offsetY: -24,
-						noButton: true,
 					}
 				},
 				{
 					name: translate('onboardingSpaceSelectTitle'),
 					description: translate('onboardingSpaceSelectDescription'),
+					noButton: true,
 					param: {
 						element: '#navigationPanel #button-navigation-profile',
 						classNameWrap: 'fixed',
 						vertical: I.MenuDirection.Top,
 						horizontal: I.MenuDirection.Center,
 						offsetY: -24,
-						noButton: true,
 					}
 				},
 				{
@@ -295,11 +295,11 @@ export default {
 			{
 				name: translate('onboardingTypeDeleted1Title'),
 				description: translate('onboardingTypeDeleted1Description'),
+				noButton: true,
 				param: {
 					element: '#block-featuredRelations',
 					offsetY: 10,
 				},
-				noButton: true,
                 buttons: [
                     { text: translate('blockFeaturedTypeMenuChangeType'), action: 'changeType' },
                 ],
@@ -396,16 +396,38 @@ export default {
 				{
 					name: translate('onboardingTemplateSelectTitle'),
 					description: translate('onboardingTemplateSelectDescription'),
+					noButton: true,
 				},
 			],
 
 			param: {
 				element: '#headerBanner',
 				horizontal: I.MenuDirection.Center,
 				offsetY: 12,
-				noButton: true,
 			},
 		}
 	),
 
+	space: () => {
+		const width = 505;
+		return {
+			items: [
+				{
+					name: translate('onboardingShareSpaceTitle'),
+					description: translate('onboardingShareSpaceDescription'),
+					video: './img/help/onboarding/share-space.mp4',
+					noButton: true,
+					param: {
+						element: '#widget-space',
+						classNameWrap: 'fixed',
+						vertical: I.MenuDirection.Center,
+						horizontal: I.MenuDirection.Right,
+						width,
+						offsetX: -(width + 10),
+					}
+				},
+			],
+		};
+	},
+
 };

src/ts/lib/util/data.ts

@@ -1,4 +1,4 @@
-import { I, C, M, keyboard, translate, UtilCommon, UtilRouter, Storage, analytics, dispatcher, Mark, UtilObject, focus, UtilSpace, Renderer, Action, Survey } from 'Lib';
+import { I, C, M, keyboard, translate, UtilCommon, UtilRouter, Storage, analytics, dispatcher, Mark, UtilObject, focus, UtilSpace, Renderer, Action, Survey, Onboarding } from 'Lib';
 import { commonStore, blockStore, detailStore, dbStore, authStore, notificationStore, popupStore } from 'Store';
 import Constant from 'json/constant.json';
 import * as Sentry from '@sentry/browser';
@@ -216,6 +216,12 @@ class UtilData {
 					Survey.check(I.SurveyType.Register);
 					Survey.check(I.SurveyType.Object);
 
+					const space = UtilSpace.getSpaceview();
+
+					if (!space.isPersonal) {
+						Onboarding.start('space', keyboard.isPopup(), false);
+					};
+
 					if (callBack) {
 						callBack();
 					};