JS-4421: library usecase banner

src/json/text.json

@@ -396,6 +396,8 @@
 	"pageMainStoreRelationsEmpty": "<b>Your Relation list is empty</b>Add some from the Anytype Library using the search icon or create your own using the button above",
 	"pageMainStoreMyTypes": "My Types",
 	"pageMainStoreMyRelations": "My Relations",
+	"pageMainStoreBannerTitle": "What can I build with Anytype?",
+	"pageMainStoreBannerButton": "Explore",
 
 	"pageMainTypeRecommendedLayout": "Recommended layout",
 	"pageMainTypeNewSetOfObjects": "New Set of Objects",

src/scss/component/header.scss

@@ -128,6 +128,33 @@ html:not(.bodyIndexIndex):not(.bodyAuthSelect) {
 	.icon.btn-settings { background-image: url('~img/icon/dataview/button/settings.svg'); }
 }
 
+.header.mainStore.withBanner { flex-direction: column; height: auto !important; }
+.header.mainStore.withBanner {
+	.sides { display: flex; flex-direction: row; align-items: center; justify-content: stretch; height: 52px; }
+
+	.bannerWrapper { width: 100%; padding: 16px 80px; }
+	.bannerWrapper {
+		.banner { 
+			background-image: linear-gradient(180deg, #fef2c6 0%, #f8f8f8 100%); display: flex; align-items: center;
+			color: var(--color-control-accent); height: 116px; border-radius: 11px; position: relative; justify-content: space-evenly;
+			padding: 0px 116px; overflow: hidden;
+		}
+		.banner {
+			.side { width: calc(50% - 46px); }
+			.side.left { display: flex; flex-direction: column; padding: 0px; align-items: flex-start; justify-content: center; gap: 8px 0px; }
+			.side.right { min-width: 424px; }
+
+			.icon.close { position: absolute; width: 20px; height: 20px; background-image: url('~img/icon/header/banner/close.svg'); right: 10px; top: 10px; }
+			.title { @include text-header3; @include text-overflow-nw; width: 100%; }
+			.pic { 
+				width: 100%; height: 100%; background: url('~img/icon/header/banner/pic.png') no-repeat; background-size: contain; 
+				background-position: bottom right; 
+			}
+			.button { @include text-small; height: 24px; line-height: 24px; }
+		}
+	}
+}
+
 .popup {
 	.header { position: sticky; padding: 0px; top: 0px !important; }
 	.header {

src/scss/page/main/store.scss

@@ -1,7 +1,8 @@
 @import "~scss/_vars";
 
 .pageMainStore {
-	.content { height: 100%; padding-top: 40px; }
+	.wrapper.withBanner { padding-top: 200px; }
+
 
 	.body { display: flex; flex-direction: column; }
 	.body {
@@ -42,7 +43,7 @@
 		}
 
 		.loaderWrapper { position: relative !important; }
-		.ReactVirtualized__List { padding: 48px 80px 80px 80px; }
+		.ReactVirtualized__List { padding: 0px 80px 80px 80px; }
 
 		.emptySearch { padding: 56px 0px; border: 1px solid var(--color-shape-primary); border-radius: 12px; height: auto; @include text-paragraph; }
 		.emptySearch { 

src/scss/theme/dark/common.scss

@@ -272,6 +272,15 @@ html.themeDark {
 		}
     }
 
+	.header.mainStore.withBanner {
+		.bannerWrapper {
+			.banner { color: var(--color-text-inversion); }
+			.banner {
+				.button { background-color: var(--color-bg-primary); color: var(--color-text-primary); }
+			}
+		}
+	}
+
     /* Sidebar */
 
     .sidebar { background-color: var(--color-bg-secondary); box-shadow: 0px 4px 16px rgba(0,0,0,0.2); }

src/ts/component/header/index.tsx

@@ -44,14 +44,18 @@ class Header extends React.Component<Props> {
 	};
 
 	render () {
-		const { component, className, rootId } = this.props;
+		const { component, className, withBanner } = this.props;
 		const Component = Components[component] || null;
 		const cn = [ 'header', component, className ];
 
-		if (![ 'authIndex', 'mainIndex' ].includes(component)) {
+		if (![ 'authIndex' ].includes(component)) {
 			cn.push('isCommon');
 		};
 
+		if (withBanner) {
+			cn.push('withBanner');
+		};
+
 		return (
 			<div id="header" className={cn.join(' ')} onDoubleClick={this.onDoubleClick}>
 				<Component 

src/ts/component/header/main/store.tsx

@@ -1,16 +1,41 @@
 import * as React from 'react';
-import { I } from 'Lib';
+import { Title, Button, Icon } from 'Component';
+import { I, translate } from 'Lib';
 
 class HeaderMainStore extends React.Component<I.HeaderComponent> {
 
 	render () {
-		const { renderLeftIcons, renderTabs } = this.props;
+		const { renderLeftIcons, renderTabs, withBanner, onBanner, onBannerClose } = this.props;
+
+		let banner = null;
+		if (withBanner) {
+			banner = (
+				<div className="bannerWrapper">
+					<div className="banner" onClick={onBanner}>
+						<Icon className="close" onClick={onBannerClose} />
+
+						<div className="side left">
+							<Title text={translate('pageMainStoreBannerTitle')} />
+							<Button text={translate('pageMainStoreBannerButton')} className="c28" />
+						</div>
+
+						<div className="side right">
+							<div className="pic" />
+						</div>
+					</div>
+				</div>
+			);
+		};
 
 		return (
 			<React.Fragment>
-				<div className="side left">{renderLeftIcons()}</div>
-				<div className="side center">{renderTabs()}</div>
-				<div className="side right" />
+				{banner}
+
+				<div className="sides">
+					<div className="side left">{renderLeftIcons()}</div>
+					<div className="side center">{renderTabs()}</div>
+					<div className="side right" />
+				</div>
 			</React.Fragment>
 		);
 	};

src/ts/component/page/main/store.tsx

@@ -4,11 +4,12 @@ import { observer } from 'mobx-react';
 import { AutoSizer, CellMeasurer, InfiniteLoader, List, CellMeasurerCache, WindowScroller } from 'react-virtualized';
 import { Title, Icon, IconObject, Header, Footer, Filter, Button, EmptySearch } from 'Component';
 import { I, C, UtilData, UtilObject, UtilCommon, Storage, Onboarding, analytics, Action, keyboard, translate, UtilSpace } from 'Lib';
-import { dbStore, blockStore, commonStore, menuStore } from 'Store';
+import { dbStore, blockStore, commonStore, menuStore, popupStore } from 'Store';
 import Constant from 'json/constant.json';
 
 interface State {
-	loading: boolean;
+	isLoading: boolean;
+	withBanner: boolean;
 };
 
 enum View {
@@ -22,7 +23,8 @@ const alt = keyboard.altSymbol();
 const PageMainStore = observer(class PageMainStore extends React.Component<I.PageComponent, State> {
 
 	state = {
-		loading: false,
+		isLoading: false,
+		withBanner: false,
 	};
 
 	_isMounted = false;
@@ -51,13 +53,16 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 		this.onFilterBlur = this.onFilterBlur.bind(this);
 		this.onFilterClear = this.onFilterClear.bind(this);
 		this.onFilterClick = this.onFilterClick.bind(this);
+		this.onBanner = this.onBanner.bind(this);
+		this.onBannerClose = this.onBannerClose.bind(this);
 	};
 
 	render () {
 		if (!this.cache) {
 			return null;
 		};
 
+		const { withBanner } = this.state;
 		const canWrite = UtilSpace.canMyParticipantWrite();
 		const { isPopup } = this.props;
 		const views = this.getViews();
@@ -212,15 +217,18 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 		return (
 			<div 
 				ref={node => this.node = node}
-				className={[ 'wrapper', this.tab, this.view ].join(' ')}
+				className={[ 'wrapper', this.tab, this.view, (withBanner ? 'withBanner' : '') ].join(' ')}
 			>
 				<Header 
 					{...this.props}
 					component="mainStore" 
 					tabs={tabs}
 					tab={this.tab}
 					layout={I.ObjectLayout.Store}
-					onTab={id => this.onTab(id, true)} 
+					onTab={id => this.onTab(id, true)}
+					withBanner={withBanner}
+					onBanner={this.onBanner}
+					onBannerClose={this.onBannerClose}
 				/>
 
 				<div className="body">
@@ -281,6 +289,7 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 		this.resize();
 		this.rebind();
 		this.onTab(Storage.get('tabStore') || I.StoreTab.Type, false);
+		this.setState({ withBanner: !Storage.get('storeBannerClosed') });
 	};
 
 	componentDidUpdate () {
@@ -493,7 +502,7 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 		};
 
 		if (clear) {
-			this.setState({ loading: true });
+			this.setState({ isLoading: true });
 			dbStore.recordsSet(Constant.subId.store, '', []);
 		};
 
@@ -506,7 +515,7 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 			ignoreDeleted: true,
 			ignoreHidden: true,
 		}, (message: any) => {
-			this.setState({ loading: false });
+			this.setState({ isLoading: false });
 
 			if (callBack) {
 				callBack(message);
@@ -526,7 +535,7 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 	};
 
 	getItems () {
-		const { loading } = this.state;
+		const { isLoading } = this.state;
 		const records = dbStore.getRecords(Constant.subId.store);
 		const limit = this.getLimit();
 
@@ -537,7 +546,7 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 		let n = 0;
 		let row = { children: [] };
 
-		if (!loading && !records.length) {
+		if (!isLoading && !records.length) {
 			ret.push({ id: 'empty', className: 'block', children: [ { id: 'empty' } ] },);
 		};
 
@@ -634,6 +643,20 @@ const PageMainStore = observer(class PageMainStore extends React.Component<I.Pag
 		return Math.max(1, Math.min(5, limit));
 	};
 
+	onBanner () {
+		popupStore.closeAll(null, () => {
+			popupStore.open('usecase', {});
+		});
+	};
+
+	onBannerClose (e: any) {
+		e.stopPropagation();
+		e.preventDefault();
+
+		this.setState({ withBanner: false });
+		Storage.set('storeBannerClosed', true);
+	};
+
 	resize () {
 		const node = $(this.node);
 		const limit = this.getLimit();

src/ts/interface/common.ts

@@ -143,13 +143,16 @@ export interface HeaderComponent extends RouteComponentProps<any> {
 	tab?: string;
 	text?: string;
 	layout?: I.ObjectLayout;
+	withBanner?: boolean;
 	renderLeftIcons?: (onOpen?: () => void) => any;
 	renderTabs?: () => any;
 	onTab?: (id: string) => void;
 	onSearch?: () => void;
 	onTooltipShow?: (e: any, text: string, caption?: string) => void;
 	onTooltipHide?: () => void;
 	menuOpen?: (id: string, elementId: string, param: Partial<I.MenuParam>) => void;
+	onBanner?: (e: any) => void;
+	onBannerClose?: (e: any) => void;
 };
 
 export interface PageComponent extends RouteComponentProps<any> {