Feature/JS-5077: Tag layout

src/json/relation.ts

@@ -22,7 +22,8 @@ export default {
 		'sizeInBytes',
 		'restrictions',
 		'defaultTemplateId',
-		'createdDate'
+		'createdDate',
+		'relationOptionColor',
 	],
 
 	sidebar: [

src/json/text.json

@@ -170,6 +170,8 @@
 	"commonSystem": "System",
 	"commonMainChat": "Main сhat",
 	"commonMenu": "Menu",
+	"commonDateCreated": "Date created",
+	"commonDateUpdated": "Date updated",
 
 	"pluralDay": "day|days",
 	"pluralObject": "Object|Objects",
@@ -474,6 +476,8 @@
 	"pageMainVoidText": "Looks like you’ve cleaned the house. Ready to start fresh?<br/>Create a new space to get things rolling!",
 	"pageMainVoidCreateSpace": "Create space",
 
+	"pageMainTagTagColor": "Tag color",
+
 	"pageAuthLoginInvalidPhrase": "Invalid Key",
 	"pageAuthLoginShortPhrase": "Key is too short",
 
@@ -1697,6 +1701,7 @@
 	"defaultNameRelation": "New Relation",
 	"defaultNameBookmark": "Paste Link",
 	"defaultNameView": "New View",
+	"defaultNameTag": "New Tag",
 
 	"placeholderBlock": "Type text or \/ for commands",
 	"placeholderBlockDescription": "Add a description",
@@ -1816,8 +1821,6 @@
 	"sidebarObjectOrphanLabel": "Unlinked objects that do not have a direct link or backlink with other objects in the graph.",
 	"sidebarObjectEmpty": "It’s empty here.<br/><span class='small'>Create your first objects to get started.</span>",
 
-	"sidebarObjectSortCreated": "Date created",
-	"sidebarObjectSortUpdated": "Date updated",
 	"sidebarObjectSortLastUsed": "Date last used",
 
 	"unsplashString": "Photo by %s on %s",

src/scss/component/headSimple.scss

@@ -36,4 +36,12 @@
 .headSimple.isType, .headSimple.isRelation {
 	.side.left { width: 32px !important; padding-top: 2px; }
 	.side.center { line-height: 36px; }
-}
+}
+
+.headSimple.withColorPicker {
+	.side.left {
+		.titleWrap { justify-content: space-between; align-items: center; }
+		.editableWrap { flex-grow: 0; font-weight: 400; padding: 0px 6px; border-radius: 8px; }
+		.colorPicker { width: 18px; height: 18px; border-radius: 50%; }
+	}
+}

src/scss/form/editable.scss

@@ -2,4 +2,4 @@
 
 .editableWrap {
 	.editable { -webkit-user-modify: read-write-plaintext-only; }
-}
+}

src/scss/list/object.scss

@@ -3,10 +3,10 @@
 .listObject {
 	.table { display: grid; border-color: var(--color-shape-secondary); border-style: solid; border-top-width: 1px; margin: 0px 0px 10px 0px; }
 	.table {
-		.selectionTarget { display: grid; grid-template-columns: minmax(0, 1fr) 20% 20%; }
+		.selectionTarget { display: grid; grid-template-columns: minmax(0, 1fr) 20% 20% 20%; }
 
 		.row.isHead { 
-			display: grid; grid-template-columns: minmax(0, 1fr) 20% 20%; color: var(--color-text-secondary);
+			display: grid; grid-template-columns: minmax(0, 1fr) 20% 20% 20%; color: var(--color-text-secondary);
 		}
 		.row.isHead {
 			.cell { 
@@ -47,4 +47,4 @@
 			}
 		}
 	}
-}
+}

src/scss/menu/dataview/option.scss

@@ -60,6 +60,7 @@
 	.menu.menuDataviewOptionEdit {
 		.content { padding-top: 12px; overflow: visible; max-height: unset; }
 		.filter { margin-bottom: 8px; }
+		.noRemove { padding-bottom: 16px; }
 
 		.item:hover::before { background: var(--color-shape-highlight-medium); }
 		.item.active::before { z-index: 1; }

src/scss/page/common.scss

@@ -16,3 +16,4 @@
 @import "./main/onboarding";
 @import "./main/chat";
 @import "./main/void";
+@import "./main/tag";

src/scss/page/main/tag.scss

@@ -0,0 +1,27 @@
+@import "~scss/_mixins";
+
+.pageMainTag { user-select: none; }
+.pageMainTag {
+    .wrapper { width: 704px; margin: 0px auto; padding: 74px 0px 80px 0px; }
+    .wrapper {
+        .headSimple { margin-bottom: 52px; }
+
+        .block {
+            .wrapMenu { display: none; }
+            .wrapContent { width: 100%; }
+        }
+
+        .section {
+            .title { @include text-header2; margin-bottom: 14px; }
+        }
+
+        .listObject {
+            .table {
+                .row,
+                .row.isHead {
+                    .cell:first-child { padding-left: 0px; }
+                }
+            }
+        }
+    }
+}

src/ts/component/editor/page.tsx

@@ -2365,4 +2365,4 @@ const EditorPage = observer(class EditorPage extends React.Component<Props, Stat
 
 });
 
-export default EditorPage;
+export default EditorPage;

src/ts/component/form/editable.tsx

@@ -142,7 +142,9 @@ class Editable extends React.Component<Props> {
 	};
 
 	placeholderShow () {
-		$(this.refPlaceholder).show();
+		const h = parseInt($(this.refEditable).css('line-height'));
+
+		$(this.refPlaceholder).css({ marginTop: -h, position: 'relative' }).show();
 	};
 
 	setValue (html: string) {

src/ts/component/menu/dataview/option/edit.tsx

@@ -14,7 +14,7 @@ const MenuOptionEdit = observer(class MenuOptionEdit extends React.Component<I.M
 	render () {
 		const { param } = this.props;
 		const { data } = param;
-		const { option } = data;
+		const { option, noFilter, noRemove } = data;
 		const sections = this.getSections();
 
 		const Color = (item: any) => (
@@ -50,15 +50,17 @@ const MenuOptionEdit = observer(class MenuOptionEdit extends React.Component<I.M
 		);
 
 		return (
-			<div>
-				<Filter
-					ref={ref => this.refName = ref}
-					placeholder={translate('menuDataviewOptionEditPlaceholder')}
-					placeholderFocus={translate('menuDataviewOptionEditPlaceholder')}
-					className={'outlined textColor-' + this.color}
-					value={option.name}
-					onKeyUp={(e: any, v: string) => { this.onKeyUp(e, v); }}
-				/>
+			<div className={noRemove ? 'noRemove' : ''}>
+				{!noFilter ? (
+					<Filter
+						ref={ref => this.refName = ref}
+						placeholder={translate('menuDataviewOptionEditPlaceholder')}
+						placeholderFocus={translate('menuDataviewOptionEditPlaceholder')}
+						className={'outlined textColor-' + this.color}
+						value={option.name}
+						onKeyUp={(e: any, v: string) => { this.onKeyUp(e, v); }}
+					/>
+				) : ''}
 
 				{sections.map((item: any, i: number) => (
 					<Section key={i} {...item} />
@@ -104,16 +106,22 @@ const MenuOptionEdit = observer(class MenuOptionEdit extends React.Component<I.M
 	};
 
 	getSections () {
+		const { param } = this.props;
+		const { data } = param;
+		const { noRemove } = data;
 		const colors = U.Menu.getBgColors().filter(it => it.id != 'bgColor-default');
+		const sections = [ { children: colors, className: 'colorPicker' } ];
 
-		return [
-			{ children: colors, className: 'colorPicker' },
-			{ 
+		if (!noRemove) {
+			sections.push({
+				className: '',
 				children: [
 					{ id: 'remove', icon: 'remove', name: translate('menuDataviewOptionEditDelete') }
-				] 
-			},
-		];
+				]
+			});
+		};
+
+		return sections;
 	};
 
 	getItems () {
@@ -200,9 +208,14 @@ const MenuOptionEdit = observer(class MenuOptionEdit extends React.Component<I.M
 	save () {
 		const { param } = this.props;
 		const { data } = param;
-		const { option } = data;
+		const { option, onColorPick } = data;
 		const value = this.refName ? this.refName.getValue() : '';
 
+		if (onColorPick) {
+			onColorPick(this.color);
+			return;
+		};
+
 		if (!value) {
 			return;
 		};

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

@@ -9,7 +9,10 @@ interface Props {
 	isContextMenuDisabled?: boolean;
 	readonly?: boolean;
 	noIcon?: boolean;
+	withColorPicker?: boolean;
+	colorPickerTitle?: string;
 	onCreate?: () => void;
+	onColorChange?: (color: string) => void;
 };
 
 const EDITORS = [ 
@@ -32,21 +35,24 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 
 		this.onInstall = this.onInstall.bind(this);
 		this.onCompositionStart = this.onCompositionStart.bind(this);
+		this.onColorPicker = this.onColorPicker.bind(this);
 	};
 
 	render (): any {
-		const { rootId, onCreate, isContextMenuDisabled, readonly, noIcon } = this.props;
+		const { rootId, onCreate, isContextMenuDisabled, readonly, noIcon, withColorPicker } = this.props;
 		const check = U.Data.checkDetails(rootId);
 		const object = S.Detail.get(rootId, rootId, [ 'featuredRelations' ]);
 		const featuredRelations = Relation.getArrayValue(object.featuredRelations);
 		const allowDetails = !readonly && S.Block.checkFlags(rootId, rootId, [ I.RestrictionObject.Details ]);
 		const canWrite = U.Space.canMyParticipantWrite();
+		const theme = S.Common.getThemeClass();
 
 		const blockFeatured: any = new M.Block({ id: 'featuredRelations', type: I.BlockType.Featured, childrenIds: [], fields: {}, content: {} });
 		const isTypeOrRelation = U.Object.isTypeOrRelationLayout(object.layout);
 		const isRelation = U.Object.isRelationLayout(object.layout);
 		const canEditIcon = allowDetails && !U.Object.isRelationLayout(object.layout);
 		const cn = [ 'headSimple', check.className ];
+		const titleCn = [ 'title' ];
 		const placeholder = {
 			title: this.props.placeholder,
 			description: translate('placeholderBlockDescription'),
@@ -118,6 +124,12 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 			button = null;
 		};
 
+		if (withColorPicker) {
+			cn.push('withColorPicker');
+			titleCn.push(`isMultiSelect`);
+			titleCn.push(`tagColor-${object.color || 'default'}`);
+		};
+
 		return (
 			<div ref={node => this.node = node} className={cn.join(' ')}>
 				<div className="side left">
@@ -131,7 +143,16 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 								canEdit={canEditIcon} 
 							/>
 						) : ''}
-						<Editor className="title" id="title" />
+						<Editor className={titleCn.join(' ')} id="title" />
+
+						{withColorPicker ? (
+							<div
+								id="colorPicker"
+								style={{ background: J.Theme[theme].color[object.color || 'default']}}
+								className="colorPicker"
+								onClick={this.onColorPicker}
+							/>
+						) : ''}
 					</div>
 
 					{descr}
@@ -285,6 +306,27 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 		return sources.includes(rootId);
 	};
 
+	onColorPicker () {
+		const { rootId, onColorChange, colorPickerTitle } = this.props;
+		const object = S.Detail.get(rootId, rootId);
+
+		S.Menu.open('dataviewOptionEdit', {
+			element: `#colorPicker`,
+			offsetY: 4,
+			title: colorPickerTitle || translate('commonColor'),
+			data: {
+				option: { color: object.color },
+				onColorPick: (color) => {
+					if (onColorChange) {
+						onColorChange(color);
+					};
+				},
+				noFilter: true,
+				noRemove: true
+			}
+		});
+	};
+
 });
 
-export default HeadSimple;
+export default HeadSimple;

src/ts/component/page/index.tsx

@@ -31,6 +31,7 @@ import PageMainMembership from './main/membership';
 import PageMainObject from './main/object';
 import PageMainOnboarding from './main/onboarding';
 import PageMainChat from './main/chat';
+import PageMainTag from './main/tag';
 
 const Components = {
 	'index/index':			 PageAuthSelect,
@@ -61,6 +62,7 @@ const Components = {
 	'main/onboarding':		 PageMainOnboarding,
 	'main/chat':			 PageMainChat,
 	'main/void':			 PageMainVoid,
+	'main/tag':			 	 PageMainTag,
 };
 
 const Page = observer(class Page extends React.Component<I.PageComponent> {

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

@@ -31,4 +31,4 @@ class PageMainObject extends React.Component<I.PageComponent> {
 
 };
 
-export default PageMainObject;
+export default PageMainObject;