Feature/JS-5345: Primitives

src/json/relation.ts

@@ -92,11 +92,13 @@ export default {
 	],
 
 	type: [
+		'featuredRelations',
 		'recommendedRelations',
 		'recommendedLayout',
 		'sourceObject',
 		'uniqueKey',
 		'defaultTemplateId',
+		'layoutAlign',
 	],
 
 	graph: [

src/json/text.json

@@ -156,6 +156,7 @@
 	"commonCreateObjectWithName": "Create Object \"%s\"",
 	"commonCreateObjectTypeWithName": "Create Object Type \"%s\"",
 	"commonCreateObject": "Create Object",
+	"commonCreateNewTemplate": "Create new Template",
 	"commonUrl": "Url",
 	"commonEdit": "Edit",
 	"commonShare": "Share",
@@ -176,7 +177,8 @@
 	"pluralDay": "day|days",
 	"pluralObject": "Object|Objects",
 	"pluralLCObject": "object|objects",
-	"pluralTemplate": "template|templates",
+	"pluralTemplate": "Template|Templates",
+	"pluralLCTemplate": "template|templates",
 	"pluralRelation": "Relation|Relations",
 	"pluralBlock": "Block|Blocks",
 	"pluralObjectType": "Object Type|Object Types",
@@ -450,7 +452,6 @@
 
 	"pageMainNavigationItemEmptyTitle": "Object can not be shown",
 
-	"pageMainTypeRecommendedLayout": "Recommended layout",
 	"pageMainTypeNewSetOfObjects": "New Set of Objects",
 	"pageMainTypeNoTemplates": "This Object Type doesn't have Templates",
 
@@ -497,10 +498,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",
@@ -1825,6 +1830,16 @@
 	"sidebarObjectSortUpdated": "Date updated",
 	"sidebarObjectSortLastUsed": "Date last used",
 
+	"sidebarTypeTitle": "Editing type",
+	"sidebarSectionLayoutName": "Layout",
+	"sidebarSectionLayoutType": "Layout type",
+	"sidebarSectionLayoutAlign": "Header position",
+	"sidebarSectionLayoutWidth": "Layout width",
+	"sidebarTypeRelation": "Fields",
+	"sidebarTypeRelationHeader": "Header",
+	"sidebarTypeRelationSidebar": "Sidebar",
+	"sidebarObjectRelationSetUp": "Set up",
+
 	"unsplashString": "Photo by %s on %s",
 	"templateBannner": "You are editing a template",
 

src/scss/block/common.scss

@@ -112,7 +112,6 @@
 @import "./bookmark";
 @import "./cover";
 @import "./dataview";
-@import "./dataview/cell";
 @import "./dataview/view/board";
 @import "./dataview/view/common";
 @import "./dataview/view/gallery";

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/common.scss

@@ -28,6 +28,7 @@
 @import "./hightlight";
 @import "./progressBar";
 @import "./share";
+@import "./cell";
 
 @import "./preview/common";
 @import "./media/common";

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; }
@@ -164,7 +168,6 @@
 		.controlButtons { left: 144px !important; }
 	}
 
-	&.withIconAndCover { padding-top: 214px; }
 	&.withIconAndCover {
 		.controlButtons { bottom: 26px; }
 	}

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/preview/object.scss

@@ -19,11 +19,9 @@
 
 	.heading { display: block; margin-bottom: 14px; position: relative; z-index: 1; }
 	.heading {
-		.iconObject { display: inline-block; background-color: var(--color-shape-tertiary); border-radius: 8px; margin: 0px 0px 2px 0px; box-shadow: 0px 0px 0px 2px var(--color-bg-primary) inset; }
-		.iconObject {
-			.iconImage { border: 2px solid var(--color-bg-primary); }
-		}
+		.iconObject { display: inline-block; background-color: var(--color-shape-tertiary); border-radius: 8px; margin: 0px 0px 6px 0px; box-shadow: 0px 0px 0px 2px var(--color-bg-primary); }
 		.iconObject.isTask { background: none; position: absolute; top: 2px; left: -24px; box-shadow: 0px 0px !important; }
+
 		.name { display: block; @include text-paragraph; @include text-overflow-nw; font-weight: 700; position: relative; width: 100%; }
 		.description { @include text-small; @include text-overflow-nw; }
 
@@ -195,7 +193,7 @@
 }
 
 /* PreviewObject Medium */
-.previewObject.medium { width: 224px; height: 158px; }
+.previewObject.medium { width: 224px; height: 160px; }
 .previewObject.medium {
 	.cover { height: 72px; }
 	.scroller { padding: 32px 24px; }

src/scss/component/sidebar.scss

@@ -15,14 +15,21 @@
 #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.anim { transition-property: width; transition-duration: $transitionSidebarTime; transition-timing-function: linear; }
+.sidebar { position: fixed; z-index: 21; user-select: none; transition: none; top: 0px; height: 100%; background-color: var(--color-shape-tertiary); }
+.sidebar.anim { transition-duration: $transitionSidebarTime; transition-timing-function: linear; }
 .sidebar.withVault { left: $vaultWidthCollapsed; }
 .sidebar.isClosed { left: 0px !important; }
 
+.sidebar.left { left: 0px; }
+.sidebar.left.anim { transition-property: width; }
+
+.sidebar.right { right: -348px; width: 348px; }
+.sidebar.right.anim { transition-property: right; }
+
 .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 {