Feature/JS-5345: Primitives

src/scss/component/headSimple.scss

@@ -18,7 +18,7 @@
 		> .descr { @include text-paragraph; }
 	}
 
-	.side.right { flex-shrink: 0; text-align: right; }
+	.side.right { flex-shrink: 0; text-align: right; gap: 0px 16px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }
 	.side.right {
 		.button { white-space: nowrap; }
 	}

src/scss/component/header.scss

@@ -63,18 +63,18 @@
 	.side.left { transition: padding-left $transitionSidebarTime linear; }
 }
 
-.header:not(.withSidebar) {
+.header:not(.withSidebarLeft) {
 	.side.left { padding-left: 120px; }
 }
 
 html:not(.platformMac) {
-	.header:not(.withSidebar) {
+	.header:not(.withSidebarLeft) {
 		.side.left { padding-left: 52px; }
 	}
 }
 
 body.isFullScreen {
-	.header:not(.withSidebar) {
+	.header:not(.withSidebarLeft) {
 		.side.left { padding-left: 52px; }
 	}
 }

src/scss/component/sidebar.scss

@@ -15,14 +15,18 @@
 #sidebarToggle.sidebarAnimation { transition: left $transitionSidebarTime linear; }
 #sidebarToggle:hover, #sidebarToggle.hover { background-color: var(--color-shape-highlight-medium) !important; background-image: url('~img/icon/widget/toggle1.svg'); }
 
-.sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; left: 0px; height: 100%; }
+.sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; height: 100%; background-color: var(--color-shape-tertiary); }
 .sidebar.anim { transition-property: width; transition-duration: $transitionSidebarTime; transition-timing-function: linear; }
 .sidebar.withVault { left: $vaultWidthCollapsed; }
 .sidebar.isClosed { left: 0px !important; }
 
+.sidebar.left { left: 0px; }
+.sidebar.right { right: 0px; width: 348px; }
+
 .sidebar {
 	@import "./sidebar/widget";
 	@import "./sidebar/object";
+	@import "./sidebar/page";
 
 	.resize-h { width: 10px; height: 100%; cursor: col-resize; z-index: 2; flex-shrink: 0; position: absolute; right: -5px; top: 0px; }
 	.resize-h {

src/scss/component/sidebar/object.scss

@@ -1,4 +1,4 @@
-> #containerObject { width: 100%; height: 100%; overflow: hidden; background-color: var(--color-shape-tertiary); padding: 52px 12px 12px 12px; }
+> #containerObject { width: 100%; height: 100%; overflow: hidden; padding: 52px 12px 12px 12px; }
 > #containerObject {
 	> .inner { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--color-bg-primary); border-radius: 12px; }
 	> .inner {

src/scss/component/sidebar/page.scss

@@ -0,0 +1,2 @@
+> .sidebarPage { padding: 8px 16px; }
+> .sidebarPage {}

src/scss/component/sidebar/widget.scss

@@ -1,7 +1,4 @@
-> #containerWidget { 
-	height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0;
-	background-color: var(--color-shape-tertiary); 
-}
+> #containerWidget { height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; flex-shrink: 0; }
 > #containerWidget {
 	> .head { 
 		display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 0px 12px; height: 52px;

src/scss/media/print.scss

@@ -15,7 +15,7 @@ html.printMedia {
 	.footer,
 	.notifications,
 	#navigationPanel,
-	#sidebar,
+	.sidebar,
 	.sidebarDummy,
 	.progress,
 	.toast,

src/scss/page/auth.scss

@@ -25,7 +25,13 @@ html.bodyIndex, html.bodyAuth {
 	--shadow: 0px 0px 0px 1px var(--color-button-stroke) !important;
 
 	body { background: var(--color-bg-primary); color: var(--color-text-secondary); overflow: hidden; }
-	#navigationPanel, #notifications, #sidebar, #vault, #sidebarToggle { display: none !important; }
+
+	#vault,
+	#navigationPanel,
+	#sidebarToggle,
+	#notifications,
+	.sidebar,
+	.sidebarDummy { display: none !important; }
 
 	.popup { 
 		.innerWrap { background: var(--color-popup) !important;; box-shadow: var(--shadow) !important; color: var(--color-text-primary) !important; }

src/scss/page/main/onboarding.scss

@@ -1,13 +1,13 @@
 @import "~scss/_mixins";
 
 .bodyMain.bodyMainOnboarding {
-    #vault,
-    #sidebar,
-    #sidebarToggle,
-    #navigationPanel,
-    #sidebarDummy { display: none; }
+	#vault,
+	#navigationPanel,
+	#sidebarToggle,
+	.sidebar,
+    .sidebarDummy { display: none; }
 
-    body { background: #000; }
+	body { background: #000; }	
 }
 
 $stepTransition: 1s $easeInQuint;

src/scss/page/main/void.scss

@@ -1,7 +1,10 @@
 @import "~scss/_mixins";
 
-.bodyMainVoid {
-	.navigationPanel, #sidebar { display: none; }
+.bodyMain.bodyMainVoid {
+    #navigationPanel,
+	#sidebarToggle,
+	.sidebar,
+    .sidebarDummy { display: none; }
 }
 
 .pageMainVoid {

src/ts/app.tsx

@@ -8,7 +8,7 @@ import { Router, Route, Switch } from 'react-router-dom';
 import { Provider } from 'mobx-react';
 import { configure, spy } from 'mobx';
 import { enableLogging } from 'mobx-logger';
-import { Page, SelectionProvider, DragProvider, Progress, Toast, Preview as PreviewIndex, Navigation, ListPopup, ListMenu, ListNotification, Sidebar, Vault, ShareTooltip, Loader } from 'Component';
+import { Page, SelectionProvider, DragProvider, Progress, Toast, Preview as PreviewIndex, Navigation, ListPopup, ListMenu, ListNotification, SidebarLeft, SidebarRight, Vault, ShareTooltip, Loader } from 'Component';
 import { I, C, S, U, J, keyboard, Storage, analytics, dispatcher, translate, Renderer, focus, Preview, Mark, Animation, Onboarding, Survey, Encode, Decode, sidebar } from 'Lib';
 
 require('pdfjs-dist/build/pdf.worker.entry.js');
@@ -139,7 +139,8 @@ class RoutePage extends React.Component<RouteComponentProps> {
 					<ListMenu key="listMenu" {...this.props} />
 
 					<Navigation ref={ref => S.Common.refSet('navigation', ref)} key="navigation" {...this.props} />
-					<Sidebar key="sidebar" {...this.props} />
+					<SidebarLeft ref={ref => S.Common.refSet('sidebarLeft', ref)} key="sidebarLeft" {...this.props} />
+					<SidebarRight ref={ref => S.Common.refSet('sidebarRight', ref)} key="sidebarRight" {...this.props} />
 					<Page {...this.props} />
 				</DragProvider>
 			</SelectionProvider>

src/ts/component/drag/provider.tsx

@@ -200,7 +200,7 @@ const DragProvider = observer(class DragProvider extends React.Component<Props>
 		const win = $(window);
 		const node = $(this.node);
 		const container = U.Common.getScrollContainer(isPopup);
-		const sidebar = $('#sidebar');
+		const sidebar = $('#sidebarLeft');
 		const layer = $('#dragLayer');
 		const body = $('body');
 		const dataTransfer = { rootId, dropType, ids, withAlt: e.altKey };
@@ -264,7 +264,7 @@ const DragProvider = observer(class DragProvider extends React.Component<Props>
 		const isPopup = keyboard.isPopup();
 		const node = $(this.node);
 		const container = U.Common.getScrollContainer(isPopup);
-		const sidebar = $('#sidebar');
+		const sidebar = $('#sidebarLeft');
 		const body = $('body');
 
 		this.refLayer.hide();

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { Icon, IconObject, Sync, ObjectName, Label } from 'Component';
-import { I, S, U, J, keyboard, translate } from 'Lib';
+import { I, S, U, J, keyboard, translate, sidebar } from 'Lib';
 import HeaderBanner from 'Component/page/elements/head/banner';
 
 interface State {

src/ts/component/index.tsx

@@ -21,10 +21,12 @@ import ListObjectManager from './list/objectManager';
 
 import Header from './header';
 import Footer from './footer';
-import Sidebar from './sidebar';
 import Vault from './vault';
 import Widget from './widget';
 
+import SidebarLeft from './sidebar/left';
+import SidebarRight from './sidebar/right';
+
 import Menu from './menu';
 import MenuItemVertical from './menu/item/vertical';
 
@@ -162,7 +164,9 @@ export {
 	Graph,
 	Cell,
 
-	Sidebar,
+	SidebarLeft,
+	SidebarRight,
+
 	Vault,
 	Widget,
 

src/ts/component/page/elements/head/simple.tsx

@@ -10,6 +10,7 @@ interface Props {
 	readonly?: boolean;
 	noIcon?: boolean;
 	onCreate?: () => void;
+	onEdit?: () => void;
 };
 
 const EDITORS = [ 
@@ -35,7 +36,7 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 	};
 
 	render (): any {
-		const { rootId, onCreate, isContextMenuDisabled, readonly, noIcon } = this.props;
+		const { rootId, isContextMenuDisabled, readonly, noIcon, onCreate, onEdit } = this.props;
 		const check = U.Data.checkDetails(rootId);
 		const object = S.Detail.get(rootId, rootId, [ 'featuredRelations' ]);
 		const featuredRelations = Relation.getArrayValue(object.featuredRelations);
@@ -44,13 +45,15 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 
 		const blockFeatured: any = new M.Block({ id: 'featuredRelations', type: I.BlockType.Featured, childrenIds: [], fields: {}, content: {} });
 		const isTypeOrRelation = U.Object.isTypeOrRelationLayout(object.layout);
+		const isType = U.Object.isTypeLayout(object.layout);
 		const isRelation = U.Object.isRelationLayout(object.layout);
 		const canEditIcon = allowDetails && !U.Object.isRelationLayout(object.layout);
 		const cn = [ 'headSimple', check.className ];
 		const placeholder = {
 			title: this.props.placeholder,
 			description: translate('placeholderBlockDescription'),
 		};
+		const buttons = [];
 
 		const Editor = (item: any) => (
 			<Editable
@@ -70,14 +73,16 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 			/>
 		);
 
-		let button = null;
+		let buttonEdit = null;
+		let buttonCreate = null;
 		let descr = null;
 		let featured = null;
 
 		if (!isTypeOrRelation) {
 			if (featuredRelations.includes('description')) {
 				descr = <Editor className="descr" id="description" />;
 			};
+
 			featured = (
 				<Block 
 					{...this.props} 
@@ -98,7 +103,11 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 				const text = isRelation ? translate('pageHeadSimpleCreateSet') : translate('commonCreate');
 				const arrow = !isRelation;
 
-				button = <Button id="button-create" className="c36" text={text} arrow={arrow} onClick={onCreate} />;
+				if (isType) {
+					buttonEdit = <Button id="button-edit" color="blank" className="c36" text={translate('commonEdit')} onClick={onEdit} />;
+				};
+
+				buttonCreate = <Button id="button-create" className="c36" text={text} arrow={arrow} onClick={onCreate} />;
 			} else {
 				const cn = [ 'c36' ];
 				const isInstalled = this.isInstalled();
@@ -110,12 +119,19 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 					cn.push('disabled');
 				};
 
-				button = <Button id="button-install" text={translate('pageHeadSimpleInstall')} color={color} className={cn.join(' ')} onClick={onClick} />;
+				buttonCreate = <Button id="button-install" text={translate('pageHeadSimpleInstall')} color={color} className={cn.join(' ')} onClick={onClick} />;
 			};
 		};
 
 		if (!canWrite) {
-			button = null;
+			buttonCreate = null;
+		};
+
+		if (buttonEdit) {
+			buttons.push(() => buttonEdit);
+		};
+		if (buttonCreate) {
+			buttons.push(() => buttonCreate);
 		};
 
 		return (
@@ -138,8 +154,10 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 					{featured}
 				</div>
 
-				{button ? (
-					<div className="side right">{button}</div>
+				{buttons.length ? (
+					<div className="side right">
+						{buttons.map((Component, i) => <Component key={i} />)}
+					</div>
 				) : ''}
 			</div>
 		);

src/ts/component/page/index.tsx

@@ -76,7 +76,6 @@ const Page = observer(class Page extends React.Component<I.PageComponent> {
 		const { page, action } = this.getMatchParams();
 		const path = [ page, action ].join('/');
 		const isMain = this.isMain();
-		const showSidebar = isMain;
 
 		if (account) {
 			const { status } = account || {};
@@ -103,13 +102,14 @@ const Page = observer(class Page extends React.Component<I.PageComponent> {
 		);
 
 		let content = null;
-		if (isPopup || !showSidebar) {
+		if (isPopup || !isMain) {
 			content = wrap;
 		} else {
 			content = (
 				<div id="pageFlex" className="pageFlex">
-					<div id="sidebarDummy" className="sidebarDummy" />
+					<div id="sidebarDummyLeft" className="sidebarDummy" />
 					{wrap}
+					<div id="sidebarDummyRight" className="sidebarDummy" />
 				</div>
 			);
 		};

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Icon, Header, Footer, Loader, ListObjectPreview, ListObject, Select, Deleted } from 'Component';
-import { I, C, S, U, J, focus, Action, analytics, Relation, translate } from 'Lib';
+import { I, C, S, U, J, focus, Action, analytics, Relation, translate, sidebar } from 'Lib';
 import Controls from 'Component/page/elements/head/controls';
 import HeadSimple from 'Component/page/elements/head/simple';
 
@@ -35,6 +35,7 @@ const PageMainType = observer(class PageMainType extends React.Component<I.PageC
 		this.onRelationAdd = this.onRelationAdd.bind(this);
 		this.onSetAdd = this.onSetAdd.bind(this);
 		this.onCreate = this.onCreate.bind(this);
+		this.onEdit = this.onEdit.bind(this);
 		this.onLayout = this.onLayout.bind(this);
 	};
 
@@ -141,6 +142,7 @@ const PageMainType = observer(class PageMainType extends React.Component<I.PageC
 						placeholder={translate('defaultNameType')} 
 						rootId={rootId} 
 						onCreate={this.onCreate} 
+						onEdit={this.onEdit}
 					/>
 
 					{showTemplates ? (
@@ -389,6 +391,17 @@ const PageMainType = observer(class PageMainType extends React.Component<I.PageC
 		});
 	};
 
+	onEdit () {
+		const rootId = this.getRootId();
+
+		S.Common.showSidebarRightSet(!S.Common.showSidebarRight);
+		S.Common.getRef('sidebarRight').setState({ page: 'type', rootId });
+
+		window.setTimeout(() => {
+			sidebar.resizePage(null, false);
+		}, 10);
+	};
+
 	onObjectAdd () {
 		const rootId = this.getRootId();
 		const type = S.Record.getTypeById(rootId);

src/ts/component/sidebar/index.tsx → src/ts/component/sidebar/left.tsx

@@ -8,7 +8,7 @@ import { I, U, J, S, keyboard, Preview, sidebar } from 'Lib';
 import SidebarWidget from './widget';
 import SidebarObject from './object';
 
-const Sidebar = observer(class Sidebar extends React.Component {
+const SidebarLeft = observer(class SidebarLeft extends React.Component {
 
 	private _isMounted = false;
 	node = null;
@@ -50,7 +50,7 @@ const Sidebar = observer(class Sidebar extends React.Component {
 
 				<div 
 					ref={node => this.node = node}
-					id="sidebar" 
+					id="sidebarLeft" 
 					className={cn.join(' ')} 
 				>
 					{showObject ? <SidebarObject ref={ref => this.refObject = ref} {...this.props} /> : <SidebarWidget {...this.props} ref={ref => this.refWidget = ref} />}
@@ -203,4 +203,4 @@ const Sidebar = observer(class Sidebar extends React.Component {
 
 });
 
-export default Sidebar;
+export default SidebarLeft;