JS-5725: description updates

src/json/text.json

@@ -495,10 +495,14 @@
 	"pageHeadSimpleCreateSet": "Create Set",
 	"pageHeadSimpleInstall": "Install",
 
-	"editorControlIcon": "Icon",
-	"editorControlCover": "Cover",
-	"editorControlLayout": "Layout",
+	"editorControlIcon0": "Add icon",
+	"editorControlIcon1": "Icon",
+	"editorControlCover0": "Add cover",
+	"editorControlCover1": "Cover",
+	"editorControlLayout": "Settings",
 	"editorControlRelation": "Relations",
+	"editorControlDescription0": "Add description",
+	"editorControlDescription1": "Hide description",
 
 	"editorPagePasteLink": "Paste as link",
 	"editorPageCreateBookmarkObject": "Create Bookmark Object",

src/scss/block/cover.scss

@@ -37,11 +37,10 @@
 	.author a { color: var(--color-bg-primary); }
 
 	.elements {
-		.controlButtons { position: absolute; left: 0px; bottom: 18px; }
+		.controlButtons { position: absolute; left: 0px; bottom: 18px; display: flex; align-items: center; gap: 0px 8px; }
 		.controlButtons.small {
 			.btn { padding: 0px 6px; }
 			.btn {
-				.icon { margin: 0px; }
 				.txt { display: none; }
 			}
 		}
@@ -53,25 +52,26 @@
 		}
 
 		.btn { 
-			font-weight: 500; font-size: var(--font-size-common); height: 28px; line-height: 28px; display: inline-block;
-			padding: 0px 8px; border-radius: 6px; margin-right: 8px; white-space: nowrap; transition: background $transitionCommon;
+			font-weight: 500; font-size: var(--font-size-common); height: 28px; line-height: 28px; display: flex; align-items: center; gap: 0px 4px;
+			padding: 0px 8px; border-radius: 6px; white-space: nowrap; transition: background $transitionCommon;
 		}
-		.btn:last-child { margin: 0px; }
 
 		.btn.white { background: rgba(255,255,255,0.7); }
 		.btn.white:hover, .btn.white.hover { background: rgba(255,255,255,0.9); }
 
 		.btn.black { color: var(--color-bg-primary); background: rgba(0,0,0,0.5); line-height: 22px; }
 		.btn.black:hover, .btn.black.active { background: rgba(0,0,0,0.7); }
 
-		.btn.withIcon { padding: 0px 8px 0px 6px; line-height: 26px; }
+		.btn.withIcon { padding: 0px 8px 0px 6px; }
+		.btn.small { padding: 0px 6px; }
 
 		.btn {
-			.icon { width: 20px; height: 20px; margin: 0px 4px 0px 0px; vertical-align: middle; }
+			.icon { width: 20px; height: 20px; }
 			.icon.icon { background-image: url('~img/icon/add/icon1.svg'); }
 			.icon.addCover { background-image: url('~img/icon/add/cover1.svg'); }
 			.icon.layout { background-image: url('~img/icon/add/layout1.svg'); }
 			.icon.relation { background-image: url('~img/icon/add/relation1.svg'); }
+			.icon.description { background-image: url('~img/icon/add/description1.svg'); }
 		}
 
 		.btn.drag { position: absolute; cursor: grab; width: 210px; top: 50%; left: 50%; margin: -12px 0px 0px -105px; }

src/scss/component/editor.scss

@@ -51,24 +51,28 @@
 	}
 
 	.btn { 
-		background: var(--color-bg-primary); font-weight: 500; font-size: var(--font-size-common); color: var(--color-control-active); display: inline-block; 
-		transition: background $transitionCommon, color $transitionCommon; height: 28px; padding: 0px 8px 0px 6px; border-radius: 6px; display: flex; 
-		flex-direction: row; align-items: center;
+		background: var(--color-bg-primary); font-weight: 500; font-size: var(--font-size-common); color: var(--color-control-active); display: flex; 
+		transition: background $transitionCommon, color $transitionCommon; height: 28px; padding: 0px 8px 0px 6px; border-radius: 6px;
+		flex-direction: row; align-items: center; gap: 0px 4px;
 	}
 	.btn:hover, .btn.hover { background: var(--color-shape-highlight-medium); color: var(--color-text-primary); }
+
+	.btn.small { padding: 0px 6px; }
 
 	.btn {
-		.icon { width: 20px; height: 20px; margin-right: 4px; }
+		.icon { width: 20px; height: 20px; }
 		.icon.icon { background-image: url('~img/icon/add/icon0.svg'); }
 		.icon.addCover { background-image: url('~img/icon/add/cover0.svg'); }
 		.icon.layout { background-image: url('~img/icon/add/layout0.svg'); }
-		.icon.relation { background-image: url('~img/icon/add/relation0.svg');  }
+		.icon.relation { background-image: url('~img/icon/add/relation0.svg'); }
+		.icon.description { background-image: url('~img/icon/add/description0.svg'); }
 	}
 	.btn:hover, .btn.hover {
 		.icon.icon { background-image: url('~img/icon/add/icon1.svg'); }
 		.icon.addCover { background-image: url('~img/icon/add/cover1.svg'); }
 		.icon.layout { background-image: url('~img/icon/add/layout1.svg'); }
-		.icon.relation { background-image: url('~img/icon/add/relation1.svg');  }
+		.icon.relation { background-image: url('~img/icon/add/relation1.svg'); }
+		.icon.description { background-image: url('~img/icon/add/description1.svg'); }
 	}
 }
 .editorControls:hover, .editorControls.hover, .editorControls.active { opacity: 1; }

src/ts/component/block/cover.tsx

@@ -197,25 +197,18 @@ const BlockCover = observer(class BlockCover extends React.Component<I.BlockComp
 		});
 	};
 
-	onLayout (e: any) {
+	onLayout () {
 		const { rootId, block } = this.props;
 		const node = $(this.node);
 		const elements = node.find('#elements');
-		const object = S.Detail.get(rootId, rootId, []);
 
 		S.Menu.open('blockLayout', { 
 			element: `#block-${block.id} #button-layout`,
-			horizontal: I.MenuDirection.Center,
-			onOpen: () => {
-				elements.addClass('hover');
-			},
-			onClose: () => {
-				elements.removeClass('hover');
-			},
+			onOpen: () => elements.addClass('hover'),
+			onClose: () => elements.removeClass('hover'),
 			subIds: J.Menu.layout,
 			data: {
 				rootId: rootId,
-				value: object.layout,
 			}
 		});
 	};

src/ts/component/block/link.tsx

@@ -20,7 +20,7 @@ const BlockLink = observer(class BlockLink extends React.Component<I.BlockCompon
 		this.onMouseLeave = this.onMouseLeave.bind(this);
 	};
 
-	render() {
+	render () {
 		const { rootId, block } = this.props;
 		const object = S.Detail.get(rootId, block.getTargetObjectId(), J.Relation.cover);
 		const { _empty_, isArchived, isDeleted, done, layout, coverId, coverType, coverX, coverY, coverScale } = object;

src/ts/component/menu/block/relation/view.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Icon } from 'Component';
-import { I, C, S, U, J, Relation, analytics, keyboard, translate } from 'Lib';
+import { I, C, S, U, J, Relation, analytics, keyboard, translate, Action } from 'Lib';
 import Item from 'Component/menu/item/relationView';
 
 const PREFIX = 'menuBlockRelationView';
@@ -228,22 +228,18 @@ const MenuBlockRelationView = observer(class MenuBlockRelationView extends React
 		const items = this.getItems();
 		const object = S.Detail.get(rootId, rootId, [ 'featuredRelations' ], true);
 		const featured = U.Common.objectCopy(object.featuredRelations || []);
-		const idx = featured.findIndex(it => it == relationKey);
-		const relation = S.Record.getRelationByKey(relationKey);
 
-		if (idx < 0) {
+		if (!featured.includes(relationKey)) {
 			const item = items.find(it => it.relationKey == relationKey);
-			const cb = () => {
-				C.ObjectRelationAddFeatured(rootId, [ relationKey ], () => analytics.event('FeatureRelation', { relationKey, format: relation.format }));
-			};
+			const cb = () => Action.toggleFeatureRelation(rootId, relationKey);
 
 			if (item.scope == I.RelationScope.Type) {
 				C.ObjectRelationAdd(rootId, [ relationKey ], cb);
 			} else {
 				cb();
 			};
 		} else {
-			C.ObjectRelationRemoveFeatured(rootId, [ relationKey ], () => analytics.event('UnfeatureRelation', { relationKey, format: relation.format }));
+			Action.toggleFeatureRelation(rootId, relationKey)
 		};
 	};
 

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Icon } from 'Component';
-import { I, S, U, J, translate, analytics, focus, Renderer } from 'Lib';
+import { I, S, U, J, translate, analytics, focus, Renderer, Relation, Action } from 'Lib';
 
 interface Props {
 	rootId: string;
@@ -28,6 +28,7 @@ const ControlButtons = observer(class ControlButtons extends React.Component<Pro
 		this.onIcon = this.onIcon.bind(this);
 		this.onCover = this.onCover.bind(this);
 		this.onLayout = this.onLayout.bind(this);
+		this.onDescription = this.onDescription.bind(this);
 	};
 
 	render (): any {
@@ -38,6 +39,8 @@ const ControlButtons = observer(class ControlButtons extends React.Component<Pro
 			return null;
 		};
 
+		const check = U.Data.checkDetails(rootId);
+		const object = S.Detail.get(rootId, rootId, [ 'featuredRelations' ], true);
 		const checkType = S.Block.checkBlockTypeExists(rootId);
 		const allowedDetails = S.Block.checkFlags(rootId, rootId, [ I.RestrictionObject.Details ]);
 		const isInSets = U.Object.isInSetLayouts(root.layout);
@@ -46,15 +49,18 @@ const ControlButtons = observer(class ControlButtons extends React.Component<Pro
 		const isBookmark = U.Object.isBookmarkLayout(root.layout);
 		const isChat = U.Object.isChatLayout(root.layout);
 		const isType = U.Object.isTypeLayout(root.layout);
+		const hasDescription = Relation.getArrayValue(object.featuredRelations).includes('description');
 
 		let allowedLayout = !checkType && allowedDetails && !isInSets && !isChat && !isType;
 		let allowedIcon = !checkType && allowedDetails && !isTask && !isNote && !isBookmark;
 		let allowedCover = !checkType && allowedDetails && !isNote && !isType;
+		let allowedDescription = !checkType && allowedDetails && !isNote;
 
 		if (root.isLocked() || readonly) {
 			allowedIcon = false;
 			allowedLayout = false;
 			allowedCover = false;
+			allowedDescription = false;
 		};
 
 		return (
@@ -65,21 +71,27 @@ const ControlButtons = observer(class ControlButtons extends React.Component<Pro
 				{allowedIcon ? (
 					<div id="button-icon" className="btn white withIcon" onClick={this.onIcon}>
 						<Icon className="icon" />
-						<div className="txt">{translate('editorControlIcon')}</div>
+						<div className="txt">{translate(`editorControlIcon${Number(check.withIcon)}`)}</div>
 					</div>
 				) : ''}
 
 				{allowedCover ? (
 					<div id="button-cover" className="btn white withIcon" onClick={this.onCover}>
 						<Icon className="addCover" />
-						<div className="txt">{translate('editorControlCover')}</div>
+						<div className="txt">{translate(`editorControlCover${Number(check.withCover)}`)}</div>
+					</div>
+				) : ''}
+
+				{allowedDescription ? (
+					<div id="button-description" className="btn white withIcon" onClick={this.onDescription}>
+						<Icon className="description" />
+						<div className="txt">{translate(`editorControlDescription${Number(hasDescription)}`)}</div>
 					</div>
 				) : ''}
 
 				{allowedLayout ? (
-					<div id="button-layout" className="btn white withIcon" onClick={this.onLayout}>
+					<div id="button-layout" className="btn white withIcon small" onClick={this.onLayout}>
 						<Icon className="layout" />
-						<div className="txt">{translate('editorControlLayout')}</div>
 					</div>
 				) : ''}
 			</div>
@@ -120,6 +132,10 @@ const ControlButtons = observer(class ControlButtons extends React.Component<Pro
 		this.props.onLayout(e);
 	};
 
+	onDescription (e: any) {
+		Action.toggleFeatureRelation(this.props.rootId, 'description');
+	};
+
 	onCover (e: any) {
 		e.preventDefault();
 		e.stopPropagation();

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

@@ -137,24 +137,17 @@ const Controls = observer(class Controls extends React.Component<Props, State> {
 		U.Object.setCover(rootId, item.type, item.id, item.coverX, item.coverY, item.coverScale);
 	};
 
-	onLayout (e: any) {
+	onLayout () {
 		const { rootId, onLayoutSelect } = this.props;
 		const node = $(this.node);
-		const object = S.Detail.get(rootId, rootId, []);
 
 		S.Menu.open('blockLayout', { 
 			element: '.editorControls #button-layout',
-			horizontal: I.MenuDirection.Center,
-			onOpen: () => {
-				node.addClass('hover');
-			},
-			onClose: () => {
-				node.removeClass('hover');
-			},
+			onOpen: () => node.addClass('hover'),
+			onClose: () => node.removeClass('hover'),
 			subIds: J.Menu.layout,
 			data: {
 				rootId,
-				value: object.layout,
 				onLayoutSelect,
 			}
 		});

src/ts/lib/action.ts

@@ -810,6 +810,22 @@ class Action {
 		analytics.event('ThemeSet', { id });
 	};
 
+	toggleFeatureRelation (rootId: string, relationKey: string) {
+		const object = S.Detail.get(rootId, rootId, [ 'featuredRelations' ], true);
+		const featured = U.Common.objectCopy(object.featuredRelations || []);
+		const relation = S.Record.getRelationByKey(relationKey);
+
+		if (!relation) {
+			return null;
+		};
+
+		if (!featured.includes(relationKey)) {
+			C.ObjectRelationAddFeatured(rootId, [ relationKey ], () => analytics.event('FeatureRelation', { relationKey, format: relation.format }));
+		} else {
+			C.ObjectRelationRemoveFeatured(rootId, [ relationKey ], () => analytics.event('UnfeatureRelation', { relationKey, format: relation.format }));
+		};
+	};
+
 };
 
 export default new Action();