Merge pull request #1064 from anyproto/feature/date

Feature/JS-5173: Date
anyproto · Nov 27, 2024 · 5a380a5 · 5a380a5
2 parents ec655fa + 0b26e1e
commit 5a380a5
Show file tree

Hide file tree

Showing 54 changed files with 795 additions and 213 deletions.
diff --git a/dist/img/icon/default/date.svg b/dist/img/icon/default/date.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
 		"@types/raf": "^3.4.0",
 		"@types/react": "^16.14.31",
 		"@types/react-dom": "^16.9.16",
-		"@types/react-router-dom": "^4.3.5",
+		"@types/react-router-dom": "^5.3.3",
 		"@typescript-eslint/eslint-plugin": "^6.18.1",
 		"@typescript-eslint/parser": "^6.18.1",
 		"cross-env": "^7.0.2",
@@ -141,7 +141,7 @@
 		"react-dom": "^17.0.2",
 		"react-minimal-pie-chart": "^8.3.0",
 		"react-pdf": "^6.2.2",
-		"react-router-dom": "^5.2.0",
+		"react-router-dom": "^5.3.4",
 		"react-sortable-hoc": "^2.0.0",
 		"react-virtualized": "^9.22.3",
 		"regedit": "^5.1.3",

diff --git a/src/img/arrow/dateSelectLight.svg b/src/img/arrow/dateSelectLight.svg
diff --git a/src/img/icon/mention.svg b/src/img/icon/mention.svg
diff --git a/src/img/icon/sortArrow.svg b/src/img/icon/sortArrow.svg
diff --git a/src/json/relation.ts b/src/json/relation.ts
@@ -22,7 +22,8 @@ export default {
 		'sizeInBytes',
 		'restrictions',
 		'defaultTemplateId',
-		'createdDate'
+		'createdDate',
+		'timestamp',
 	],
 
 	sidebar: [
@@ -49,7 +50,8 @@ export default {
 		'restrictions',
 		'source',
 		'lastModifiedDate',
-		'lastOpenedDate'
+		'lastOpenedDate',
+		'timestamp'
 	],
 
 	relation: [

diff --git a/src/json/text.json b/src/json/text.json
@@ -89,6 +89,7 @@
 	"commonComment": "Comment",
 	"commonIcon": "Icon",
 	"commonObjects": "Objects",
+	"commonDates": "Dates",
 	"commonPreferences": "Preferences",
 	"commonDuplicate": "Duplicate",
 	"commonRemoveFromFavorites": "Remove from Favorites",
@@ -725,9 +726,12 @@
 	"popupSettingsPersonalSidebar": "Automatically show and hide sidebar",
 	"popupSettingsPersonalSidebarMode": "Sidebar mode",
 	"popupSettingsPersonalRelativeDates": "Display relative dates",
+	"popupSettingsPersonalDateFormat": "Date format",
 	"popupSettingsPersonalSectionLanguage": "Language & Spelling",
 	"popupSettingsPersonalSectionEditor": "Editor Personalisation",
 	"popupSettingsPersonalSectionApp": "App Appearance",
+	"popupSettingsPersonalSectionDateTime": "Date & Time",
+	"popupSettingsPersonalTimeFormat": "Time format",
 
 	"popupSettingsColorMode": "Color mode",
 	"popupSettingsColorModeButtonLight": "Light",
@@ -2198,6 +2202,9 @@
 	"participantPermissions2": "Owner",
 	"participantPermissions3": "No access",
 
+	"relationMentions": "Mentioned in",
+	"relationCreator": "Created by",
+
 	"spaceStatus0": "Active",
 	"spaceStatus1": "Loading",
 	"spaceStatus2": "Ok",
@@ -2258,4 +2265,5 @@
 	"formulaCheckboxNotEmptyShort": "Checked",
 	"formulaCheckboxPercentEmpty": "Percentage unchecked",
 	"formulaCheckboxPercentNotEmpty": "Percentage checked"
+
 }
diff --git a/src/json/theme.ts b/src/json/theme.ts
@@ -60,6 +60,11 @@ export default {
 			text: '#b6b6b6',
 			bg: '#f2f2f2'
 		},
+
+		progress: {
+			bg: '#ebebeb',
+			fg: '#ffd15b',
+		}
 	},
 
 	dark: {
@@ -109,6 +114,11 @@ export default {
 			text: '#9a9a9a',
 			bg: '#b6b6b6'
 		},
+
+		progress: {
+			bg: '#292929',
+			fg: '#ffd15b',
+		}
 	}
 
 };
diff --git a/src/scss/block/dataview/view/calendar.scss b/src/scss/block/dataview/view/calendar.scss
@@ -30,7 +30,10 @@
 			.day.active {
 				.number { padding: 0px; color: var(--color-text-inversion); }
 				.number {
-					.inner { background-color: var(--color-system-accent-100); border-radius: 12px; padding: 0px 8px; align-self: flex-end; min-width: 24px; text-align: center; }
+					.inner { 
+						background-color: var(--color-system-accent-100); border-radius: 12px; padding: 0px 8px; align-self: flex-end; min-width: 24px; text-align: center; 
+						transition: $transitionAllCommon;
+					}
 				}
 			}
 

diff --git a/src/scss/component/editor.scss b/src/scss/component/editor.scss
@@ -229,10 +229,6 @@
 		.block.blockDataview { padding: 0px; }
 
 		.editorControls { height: 52px; width: 100%; margin-bottom: 8px; padding: 0px 14px; }
-
-		.headSimple {
-			.side.right { display: none; }
-		}
 	}
 
 	.block.blockCover {
@@ -259,6 +255,12 @@
 	&.withIconAndCover {
 		.editorControls { display: none; }
 	}
+
+	.blocks {
+		.headSimple {
+			.side.right { display: none; }
+		}
+	}
 }
 
 .editorWrapper.isSet, 

diff --git a/src/scss/component/headSimple.scss b/src/scss/component/headSimple.scss
@@ -12,13 +12,13 @@
 
 		.editableWrap { flex-grow: 1; }
 		.editableWrap {
-			.editable { z-index: 1; position: relative;  word-break: break-word; cursor: text; }
+			.editable { z-index: 1; position: relative;  word-break: break-word; cursor: text; min-height: 32px; }
 		}
 
 		> .descr { @include text-paragraph; }
 	}
 
-	.side.right { flex-shrink: 0; text-align: right; }
+	.side.right { text-align: right; display: flex; flex-direction: row; gap: 0px 8px; align-items: center; }
 	.side.right {
 		.button { white-space: nowrap; }
 	}

diff --git a/src/scss/form/button.scss b/src/scss/form/button.scss
@@ -37,8 +37,9 @@
 .button.dark:not(.disabled).hover { background: rgba(0,0,0,0.4); }
 
 .button.blank { background: none; border: solid 1px var(--color-shape-primary); font-weight: 400; }
-.button.blank:not(.disabled):hover,
-.button.blank:not(.disabled).hover { background: var(--color-shape-highlight-medium); }
+.button.blank:not(.disabled) {
+	&:hover, &.hover, &.active { background: var(--color-shape-highlight-medium); }
+}
 
 .button.c36 { @include text-common; height: 36px; border-radius: 6px; padding: 0px 12px; }
 .button.c32 { @include text-small; height: 32px; border-radius: 6px; padding: 0px 10px; }

diff --git a/src/scss/list/object.scss b/src/scss/list/object.scss
@@ -1,27 +1,22 @@
 @import "~scss/_mixins";
 
 .listObject {
-	.table { display: grid; border-color: var(--color-shape-secondary); border-style: solid; border-top-width: 1px; margin: 0px 0px 10px 0px; }
+	.table { display: grid; margin: 0px 0px 10px 0px; }
 	.table {
 		.selectionTarget { display: grid; grid-template-columns: minmax(0, 1fr) 20% 20%; }
 
-		.row.isHead { 
-			display: grid; grid-template-columns: minmax(0, 1fr) 20% 20%; color: var(--color-text-secondary);
-		}
+		.row.isHead { display: grid; grid-template-columns: minmax(0, 1fr) 20% 20%; color: var(--color-control-active); }
 		.row.isHead {
 			.cell { 
-				text-align: left; padding: 14px 0px 14px 14px; white-space: nowrap; font-weight: 400; line-height: 20px; position: relative; 
+				text-align: left; padding: 9px 0px 9px 14px; white-space: nowrap; font-weight: 400; line-height: 20px; position: relative; 
 				@include text-overflow-nw;
 			}
 			.cell {
-				.name { 
-					display: inline-block; line-height: 20px; height: 20px; vertical-align: top; width: 100%; @include text-overflow-nw; 
-					border-right: 1px solid var(--color-shape-secondary);
-				}
-			}
-			.cell:last-child {
-				.name { border: 0px; }
+				.name { display: inline-block; line-height: 20px; height: 20px; vertical-align: top; width: 100%; @include text-overflow-nw; }
 			}
+
+			.icon.sortArrow { width: 20px; height: 20px; margin: 0px; background-image: url('~img/icon/sortArrow.svg'); }
+			.icon.sortArrow.c1 { transform: rotateZ(180deg); }
 		}
 
 		.row { border-bottom: 1px solid var(--color-shape-secondary); }
@@ -31,7 +26,7 @@
 		.row.isSelectionSelected { background-color: var(--color-system-selection); }
 
 		.row {
-			.cell { padding: 14px; vertical-align: top; position: relative; word-break: break-word; }
+			.cell { padding: 9px 14px; vertical-align: top; position: relative; word-break: break-word; }
 
 			.cellContent { width: 100%; overflow: hidden; height: 20px; line-height: 20px; }
 			.cellContent {

diff --git a/src/scss/page/common.scss b/src/scss/page/common.scss
@@ -16,3 +16,4 @@
 @import "./main/onboarding";
 @import "./main/chat";
 @import "./main/void";
+@import "./main/date";
diff --git a/src/scss/page/main/date.scss b/src/scss/page/main/date.scss
@@ -0,0 +1,28 @@
+@import "~scss/_mixins";
+
+.pageMainDate {
+	.wrapper { width: 704px; margin: 0px auto; padding: 40px 0px 80px 0px; user-select: none; }
+
+	.headSimple { align-items: center; height: 32px; }
+	.headSimple {
+		.side.right { gap: 0px; }
+		.side.right {
+			.icon { width: 24px !important; height: 24px !important; }
+			.icon.calendar { background-image: url('~img/icon/relation/date.svg'); }
+			.icon.arrow { background-image: url('~img/arrow/dateSelectLight.svg'); }
+			.icon.arrow.left { transform: rotateZ(180deg); }
+		}
+	}
+
+	.categories { 
+		display: flex; flex-direction: row; gap: 8px; margin: 0px 0px 12px 0px; align-items: center; justify-content: flex-start; flex-wrap: wrap; 
+	}
+	.categories {
+		.icon.mention { width: 20px; height: 20px; margin: 0px 6px 0px 0px; background-image: url('~img/icon/mention.svg'); }
+		.separator { content: ''; background-color:  var(--color-shape-secondary); width: 1px; height: 24px; }
+	}
+
+	.cell.c-type {
+		.iconObject { display: none; }
+	}
+}
diff --git a/src/scss/theme/dark/common.scss b/src/scss/theme/dark/common.scss
@@ -227,7 +227,7 @@ html.themeDark {
 	/* Progress */
 
 	.progress {
-		.inner { background: var(--color-bg-secondary); }
+		.inner { background: var(--color-bg-secondary); box-shadow: 0px 4px 16px rgb(0 0 0 / 20%), 0px 0px 0px 1px var(--color-shape-primary) inset; }
 	}
 
 	.tooltip { color: var(--color-text-primary); }

diff --git a/src/ts/component/block/chat.tsx b/src/ts/component/block/chat.tsx
@@ -47,6 +47,7 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon
 	};
 
 	render () {
+		const { showRelativeDates } = S.Common;
 		const { threadId } = this.state;
 		const rootId = this.getRootId();
 		const blockId = this.getBlockId();
@@ -57,10 +58,8 @@ const BlockChat = observer(class BlockChat extends React.Component<I.BlockCompon
 		const lastId = Storage.getChat(rootId).lastId;
 
 		const Section = (item: any) => {
-			let date = U.Date.dayString(item.createdAt);
-			if (!date) {
-				date = U.Date.dateWithFormat(I.DateFormat.MonthAbbrAfterDay, item.createdAt);
-			};
+			const day = showRelativeDates ? U.Date.dayString(item.createdAt) : null;
+			const date = day ? day : U.Date.dateWithFormat(S.Common.dateFormat, item.createdAt);
 
 			return (
 				<div className="section">

diff --git a/src/ts/component/block/dataview/cell/text.tsx b/src/ts/component/block/dataview/cell/text.tsx
@@ -170,8 +170,8 @@ const CellText = observer(class CellText extends React.Component<I.Cell, State>
 					value = Number(value) || 0;
 
 					const day = showRelativeDates ? U.Date.dayString(value) : null;
-					const date = day ? day : U.Date.dateWithFormat(viewRelation.dateFormat, value);
-					const time = U.Date.timeWithFormat(viewRelation.timeFormat, value);
+					const date = day ? day : U.Date.dateWithFormat(S.Common.dateFormat, value);
+					const time = U.Date.timeWithFormat(S.Common.timeFormat, value);
 
 					value = viewRelation.includeTime ? [ date, time ].join((day ? ', ' : ' ')) : date;
 				} else {

diff --git a/src/ts/component/block/dataview/view/calendar.tsx b/src/ts/component/block/dataview/view/calendar.tsx
@@ -81,14 +81,13 @@ const ViewCalendar = observer(class ViewCalendar extends React.Component<I.ViewC
 
 							<div className="body">
 								{data.map((item, i) => {
-									const { d, m, y } = item;
 									const cn = [];
-									const current = [ d, m, y ].join('-');
+									const current = [ item.d, item.m, item.y ].join('-');
 
 									if (m != item.m) {
 										cn.push('other');
 									};
-									if ((today.d == d) && (today.m == m) && (today.y == y)) {
+									if ((today.d == item.d) && (today.m == item.m) && (today.y == item.y)) {
 										cn.push('active');
 									};
 									if (i < 7) {