Feature/JS-5077: Tag layout

src/json/relation.ts

@@ -24,6 +24,7 @@ export default {
 		'restrictions',
 		'defaultTemplateId',
 		'createdDate',
+		'relationOptionColor',
 		'timestamp',
 		'resolvedLayout',
 	],

src/json/text.json

@@ -177,6 +177,8 @@
 	"commonProgress": "Progress",
 	"commonMainChat": "Chat",
 	"commonMenu": "Menu",
+	"commonDateCreated": "Date created",
+	"commonDateUpdated": "Date updated",
 	"commonSignUp": "Sign Up",
 	"commonNotFound": "Not found",
 	"commonCalculate": "Calculate",
@@ -502,6 +504,7 @@
 	"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",
 	"pageMainDateEmptyText" : "There is nothing here for this date yet",
 
 	"pageAuthLoginInvalidPhrase": "Invalid Key",
@@ -1798,6 +1801,7 @@
 	"defaultNameRelation": "New Property",
 	"defaultNameBookmark": "Paste Link",
 	"defaultNameView": "New View",
+	"defaultNameTag": "New Tag",
 
 	"placeholderBlock": "Type text or \/ for commands",
 	"placeholderBlockDescription": "Add a description",
@@ -1915,8 +1919,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",
 
 	"sidebarTypeTitle": "Editing type",

src/scss/component/headSimple.scss

@@ -18,6 +18,14 @@
 		}
 	}
 
+	&.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%; }
+		}
+	}
+
 	.side.left { width: 100%; flex-grow: 1; display: flex; flex-direction: column; gap: 6px 0px; }
 	.side.left {
 		.titleWrap { display: flex; flex-direction: row; gap: 0px 8px; align-items: flex-start; justify-content: stretch; }

src/scss/form/editable.scss

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

src/scss/list/object.scss

@@ -3,9 +3,9 @@
 .listObject {
 	.table { display: grid; margin: 0px 0px 10px 0px; }
 	.table {
-		.selectionTarget { display: grid; grid-template-columns: minmax(0, 1fr) 30% 30%; }
+		.selectionTarget { display: grid; grid-template-columns: minmax(0, 1fr) 20% 20% 20%; }
 
-		.row.isHead { display: grid; grid-template-columns: minmax(0, 1fr) 30% 30%; color: var(--color-control-active); }
+		.row.isHead { display: grid; grid-template-columns: minmax(0, 1fr) 20% 20% 20%; color: var(--color-control-active); }
 		.row.isHead {
 			.cell { 
 				text-align: left; padding: 9px 0px 9px 14px; white-space: nowrap; font-weight: 400; line-height: 20px; position: relative; 
@@ -49,4 +49,4 @@
 			}
 		}
 	}
-}
+}

src/scss/menu/dataview/option.scss

@@ -63,6 +63,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

@@ -14,6 +14,7 @@
 @import "./main/onboarding";
 @import "./main/chat";
 @import "./main/void";
+@import "./main/tag";
 @import "./main/date";
 @import "./main/settings";
-@import "./main/relation";
+@import "./main/relation";

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/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,9 +9,12 @@ interface Props {
 	isContextMenuDisabled?: boolean;
 	readonly?: boolean;
 	noIcon?: boolean;
+	withColorPicker?: boolean;
+	colorPickerTitle?: string;
 	relationKey?: string;
 	isPopup?: boolean;
 	onCreate?: () => void;
+	onColorChange?: (color: string) => void;
 	getDotMap?: (start: number, end: number, callback: (res: Map<string, boolean>) => void) => void;
 };
 
@@ -35,16 +38,18 @@ 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);
 		this.onTemplates = this.onTemplates.bind(this);
 	};
 
 	render (): any {
-		const { rootId, isContextMenuDisabled, readonly, noIcon, isPopup } = this.props;
+		const { rootId, isContextMenuDisabled, readonly, noIcon, withColorPicker } = this.props;
 		const check = U.Data.checkDetails(rootId);
 		const object = S.Detail.get(rootId, rootId, [ 'featuredRelations', 'recommendedLayout' ]);
 		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);
@@ -53,7 +58,7 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 		const isRelation = U.Object.isRelationLayout(object.layout);
 		const canEditIcon = allowDetails && !isRelation;
 		const cn = [ 'headSimple', check.className ];
-
+		const titleCn = [ 'title' ];
 		const placeholder = {
 			title: this.props.placeholder,
 			description: translate('placeholderBlockDescription'),
@@ -165,6 +170,12 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 			);
 		};
 
+		if (withColorPicker) {
+			cn.push('withColorPicker');
+			titleCn.push(`isMultiSelect`);
+			titleCn.push(`tagColor-${object.color || 'default'}`);
+		};
+
 		if (buttonTemplate) {
 			buttons.push(() => buttonTemplate);
 		};
@@ -188,7 +199,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}
@@ -411,6 +431,27 @@ const HeadSimple = observer(class Controls extends React.Component<Props> {
 		analytics.event(dir > 0 ? 'ClickDateForward' : 'ClickDateBack');
 	};
 
+	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;

src/ts/component/page/index.tsx

@@ -30,6 +30,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';
 import PageMainDate from './main/date';
 import PageMainSettings from './main/settings';
 
@@ -61,6 +62,7 @@ const Components = {
 	'main/onboarding':		 PageMainOnboarding,
 	'main/chat':			 PageMainChat,
 	'main/void':			 PageMainVoid,
+	'main/tag':			 	 PageMainTag,
 	'main/date':			 PageMainDate,
 	'main/settings':		 PageMainSettings,
 };

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

@@ -42,4 +42,4 @@ const PageMainObject = forwardRef<{}, I.PageComponent>((props, ref) => {
 
 });
 
-export default PageMainObject;
+export default PageMainObject;