Style the history entries components.

services/web/app/views/project/editor/history/entriesListV2.pug

@@ -4,6 +4,7 @@ aside.change-list(
 )
 	history-entries-list(
 		entries="history.updates"
+		current-user="user"
 		load-entries="loadMore()"
 		load-disabled="history.loading || history.atEnd"
 		load-initialize="ui.view == 'history'"
@@ -12,7 +13,7 @@ aside.change-list(
 
 
 script(type="text/ng-template", id="historyEntriesListTpl")
-	div(
+	.history-entries(
 		infinite-scroll="$ctrl.loadEntries()"
 		infinite-scroll-disabled="$ctrl.loadDisabled"
 		infinite-scroll-initialize="$ctrl.loadInitialize"
@@ -21,13 +22,14 @@ script(type="text/ng-template", id="historyEntriesListTpl")
 			history-entry(
 				ng-repeat="entry in $ctrl.entries"
 				entry="entry"
+				current-user="$ctrl.currentUser"
 			)
 			.loading(ng-show="history.loading")
 				i.fa.fa-spin.fa-refresh
 				|    #{translate("loading")}...
 
 script(type="text/ng-template", id="historyEntryTpl")
-	.change(
+	.history-entry(
 		ng-class="{\
 			'first-in-day': $ctrl.entry.meta.first_in_day,\
 			'selected': $ctrl.entry.inSelection,\
@@ -39,7 +41,7 @@ script(type="text/ng-template", id="historyEntryTpl")
 		}"
 	)
 
-		div.day(ng-show="$ctrl.entry.meta.first_in_day") {{ $ctrl.entry.meta.end_ts | relativeDate }}
+		time.history-entry-day(ng-if="::$ctrl.entry.meta.first_in_day") {{ ::$ctrl.entry.meta.end_ts | relativeDate }}
 
 		//- div.selectors
 		//- 	div.range
@@ -64,31 +66,36 @@ script(type="text/ng-template", id="historyEntryTpl")
 		//- 			ng-show="$ctrl.entry.beforeSelection || $ctrl.entry.inSelection"
 				)
 
-		div.description(ng-click="select()")
-			div.time {{ $ctrl.entry.meta.end_ts | formatDate:'h:mm a' }}
-			div.action.action-edited(ng-if="history.isV2 && $ctrl.entry.pathnames.length > 0")
-				| Edited
-			div.docs(ng-repeat="pathname in $ctrl.entry.pathnames")
-				div 
-					.action Edited
-					.doc {{ pathname }}
-			div.docs(ng-repeat="project_op in $ctrl.entry.project_ops")
-				div(ng-if="project_op.rename")
-					.action Renamed
-					.doc {{ project_op.rename.pathname }} → {{ project_op.rename.newPathname }}
-				div(ng-if="project_op.add")
-					.action Created
-					.doc {{ project_op.add.pathname }}
-				div(ng-if="project_op.remove")
-					.action Deleted
-					.doc {{ project_op.remove.pathname }}
-			div.users
-				div.user(ng-repeat="update_user in $ctrl.entry.meta.users")
-					.color-square(ng-if="update_user != null", ng-style="{'background-color': 'hsl({{ update_user.hue }}, 70%, 50%)'}")
-					.color-square(ng-if="update_user == null", ng-style="{'background-color': 'hsl(100, 70%, 50%)'}")
-					.name(ng-if="update_user && update_user.id != user.id" ng-bind="$ctrl.displayName(update_user)") 
-					.name(ng-if="update_user && update_user.id == user.id") You
-					.name(ng-if="update_user == null") #{translate("anonymous")}
-				div.user(ng-if="$ctrl.entry.meta.users.length == 0")
-					.color-square(style="background-color: hsl(100, 100%, 50%)")
-					span #{translate("anonymous")}
+		.history-entry-details(ng-click="select()")
+			ol.history-entry-changes
+				li.history-entry-change(
+					ng-repeat="pathname in ::$ctrl.entry.pathnames"
+				)
+					span.history-entry-change-action Edited
+					span.history-entry-change-doc {{ ::pathname }}
+				li.history-entry-change(
+					ng-repeat="project_op in ::$ctrl.entry.project_ops"
+				)
+					span.history-entry-change-action {{ ::$ctrl.getProjectOpAction(project_op) }}
+					span.history-entry-change-doc {{ ::$ctrl.getProjectOpDoc(project_op) }}
+			.history-entry-metadata
+				time.history-entry-metadata-time {{ ::$ctrl.entry.meta.end_ts | formatDate:'h:mm a' }}
+				span  • 
+				ol.history-entry-metadata-users
+					li.history-entry-metadata-user(ng-repeat="update_user in ::$ctrl.entry.meta.users")
+						span.name(
+							ng-if="::update_user && update_user.id != $ctrl.currentUser.id"
+							ng-style="::{'color': 'hsl({{ update_user.hue }}, 70%, 50%)'}"
+						) {{ ::$ctrl.displayName(update_user) }} 
+						span.name(
+							ng-if="::update_user && update_user.id == $ctrl.currentUser.id"
+							ng-style="::{'color': 'hsl({{ update_user.hue }}, 70%, 50%)'}"
+						) You
+						span.name(
+							ng-if="::update_user == null"
+							ng-style="::{'color': 'hsl(100, 70%, 50%)'}"
+						) #{translate("anonymous")}
+					li.history-entry-metadata-user(ng-if="::$ctrl.entry.meta.users.length == 0")
+						span.name(
+							ng-style="::{'color': 'hsl(100, 70%, 50%)'}"
+						) #{translate("anonymous")}

services/web/public/coffee/ide/history/components/historyEntriesList.coffee

@@ -12,6 +12,7 @@ define [
 			loadDisabled: "<"
 			loadInitialize: "<"
 			isLoading: "<"
+			currentUser: "<"
 		controller: historyEntriesListController
 		templateUrl: "historyEntriesListTpl"
 	}

services/web/public/coffee/ide/history/components/historyEntry.coffee

@@ -5,11 +5,20 @@ define [
 	historyEntryController = ($scope, $element, $attrs) ->
 		ctrl = @
 		ctrl.displayName = displayNameForUser
+		ctrl.getProjectOpAction = (projectOp) ->
+			if projectOp.rename? then "Renamed"
+			else if projectOp.add? then "Created"
+			else if projectOp.remove? then "Deleted"
+		ctrl.getProjectOpDoc = (projectOp) ->
+			if projectOp.rename? then "#{ projectOp.rename.pathname} → #{ projectOp.rename.newPathname }"
+			else if projectOp.add? then "#{ projectOp.add.pathname}"
+			else if projectOp.remove? then "#{ projectOp.remove.pathname}"
 		return
 
 	App.component "historyEntry", {
 		bindings:
 			entry: "<"
+			currentUser: "<"
 		controller: historyEntryController
 		templateUrl: "historyEntryTpl"
 	}

services/web/public/stylesheets/_ol_style_includes.less

@@ -1,2 +1,2 @@
 @import "app/sidebar-v2-dash-pane.less";
-@import "app/front-chat-widget.less";
+@import "app/front-chat-widget.less";

services/web/public/stylesheets/_style_includes.less

@@ -79,6 +79,7 @@
 @import "app/review-features-page.less";
 @import "app/error-pages.less";
 @import "app/v1-badge.less";
+@import "app/editor/history-v2.less";
 
 // Vendor CSS
 @import	"../js/libs/pdfListView/TextLayer.css";

services/web/public/stylesheets/app/editor/history-v2.less

@@ -0,0 +1,384 @@
+.history-entries {
+	font-size: @history-base-font-size;
+	color: @history-base-color;
+	height: 100%;
+	background-color: @history-base-bg;
+}
+
+.history-entry-day {
+	display: block;
+	background-color: @history-entry-day-bg;
+	color: #FFF;
+	padding: 5px 10px;
+	line-height: 1;
+}
+
+.history-entry-details {
+	background-color: #FFF;
+	margin-bottom: 2px;
+	padding: 5px 10px;
+}
+	.history-entry-changes {
+		.list-unstyled;
+		margin-bottom: 3px;
+	}
+		.history-entry-change {
+			display: flex;
+		}
+			.history-entry-change-action {
+				margin-right: 0.5em;
+			}
+
+			.history-entry-change-doc {
+				color: @history-highlight-color;
+				font-weight: bold;
+				word-break: break-all;
+			}
+	.history-entry-metadata {
+
+	}	
+		.history-entry-metadata-time {
+
+		}
+
+		.history-entry-metadata-users {
+			display: inline;
+			padding: 0;
+		}
+			.history-entry-metadata-user {
+				display: inline;
+				&::after {
+					content: ', ';
+				}
+				&:last-of-type::after {
+					content: none;
+				}
+			}
+
+// @changesListWidth:   250px;
+// @changesListPadding: @line-height-computed / 2;
+
+// @selector-padding-vertical: 10px;
+// @selector-padding-horizontal: @line-height-computed / 2;
+// @day-header-height: 24px;
+
+// @range-bar-color: @link-color;
+// @range-bar-selected-offset: 14px;
+
+// #history {
+// 	.upgrade-prompt {
+// 		position: absolute;
+// 		top: 0;
+// 		bottom: 0;
+// 		left: 0;
+// 		right: 0;
+// 		z-index: 100;
+// 		background-color: rgba(128,128,128,0.4);
+// 		.message {
+// 			margin: auto;
+// 			margin-top: 100px;
+// 			padding: (@line-height-computed / 2) @line-height-computed;
+// 			width: 400px;
+// 			background-color: white;
+// 			border-radius: 8px;
+// 		}
+// 		.message-wider {
+// 			width: 650px;
+// 			margin-top: 60px;
+// 			padding: 0;
+// 		}
+
+// 			.message-header {
+// 				.modal-header;
+// 			}
+
+// 			.message-body {
+// 				.modal-body;
+// 			}
+// 	}
+
+// 	.diff-panel {
+// 		.full-size;
+// 		margin-right: @changesListWidth;
+// 	}
+
+// 	.diff {
+// 		.full-size;
+// 		.toolbar {
+// 			padding: 3px;
+// 			.name {
+// 				float: left;
+// 				padding: 3px @line-height-computed / 4;
+// 				display: inline-block;
+// 			}
+// 		}
+// 		.diff-editor {
+// 			.full-size;
+// 			top: 40px;
+// 		}
+// 		.hide-ace-cursor {
+// 			.ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
+// 				display: none;
+// 			}
+// 		}
+// 		.diff-deleted {
+// 			padding: @line-height-computed;
+// 		}
+// 		.deleted-warning {
+// 			background-color: @brand-danger;
+// 			color: white;
+// 			padding: @line-height-computed / 2;
+// 			margin-right: @line-height-computed / 4;
+// 		}
+// 		&-binary {
+// 			.alert {
+// 				margin: @line-height-computed / 2;
+// 			}
+// 		}
+// 	}
+
+// 	aside.change-list {
+// 		border-left: 1px solid @editor-border-color;
+// 		height: 100%;
+// 		width: @changesListWidth;
+// 		position: absolute;
+// 		right: 0;
+
+// 		.loading {
+// 			text-align: center;
+// 			font-family: @font-family-serif;
+// 		}
+
+// 		ul {
+// 			li.change {
+// 				position: relative;
+// 				user-select: none;
+// 				-ms-user-select: none;
+// 				-moz-user-select: none;
+// 				-webkit-user-select: none;
+
+// 				.day {
+// 					background-color: #fafafa;
+// 					border-bottom: 1px solid @editor-border-color;
+// 					padding: 4px;
+// 					font-weight: bold;
+// 					text-align: center;
+// 					height: @day-header-height;
+// 					font-size: 14px;
+// 					line-height: 1;
+// 				}
+// 				.selectors {
+// 					input {
+// 						margin: 0;
+// 					}
+// 					position: absolute;
+// 					left: @selector-padding-horizontal;
+// 					top: 0;
+// 					bottom: 0;
+// 					width: 24px;
+// 					.selector-from {
+// 						position: absolute;
+// 						bottom: @selector-padding-vertical;
+// 						left: 0;
+// 						opacity: 0.8;
+// 					}
+// 					.selector-to {
+// 						position: absolute;
+// 						top: @selector-padding-vertical;
+// 						left: 0;
+// 						opacity: 0.8;
+// 					}
+// 					.range {
+// 						position: absolute;
+// 						left: 5px;
+// 						width: 4px;
+// 						top: 0;
+// 						bottom: 0;
+// 					}
+// 				}
+// 				.description {
+// 					padding: (@line-height-computed / 4);
+// 					padding-left: 38px;
+// 					min-height: 38px;
+// 					border-bottom: 1px solid @editor-border-color;
+// 					cursor: pointer;
+// 					&:hover {
+// 						background-color: @gray-lightest;
+// 					}
+// 				}
+// 				.users {
+// 					.user {
+// 						font-size: 0.8rem;
+// 						color: @gray;
+// 						text-transform: capitalize;
+// 						position: relative;
+// 						padding-left: 16px;
+// 						.color-square {
+// 							height: 12px;
+// 							width: 12px;
+// 							border-radius: 3px;
+// 							position: absolute;
+// 							left: 0;
+// 							bottom: 3px;
+// 						}
+// 						.name {
+// 							width: 94%;
+// 							white-space: nowrap;
+// 							overflow: hidden;
+// 							text-overflow: ellipsis;
+// 						}
+// 					}
+// 				}
+// 				.time {
+// 					float: right;
+// 					color: @gray;
+// 					display: inline-block;
+// 					padding-right: (@line-height-computed / 2);
+// 					font-size: 0.8rem;
+// 					line-height: @line-height-computed;
+// 				}
+// 				.doc {
+// 					font-size: 0.9rem;
+// 					font-weight: bold;
+// 				}
+// 				.action {
+// 					color: @gray;
+// 					text-transform: uppercase;
+// 					font-size: 0.7em;
+// 					margin-bottom: -2px;
+// 					margin-top: 2px;
+// 					&-edited {
+// 						margin-top: 0;
+// 					}
+// 				}
+// 			}
+// 			li.loading-changes, li.empty-message {
+// 				padding: 6px;
+// 				cursor: default;
+// 				&:hover {
+// 					background-color: inherit;
+// 				}
+// 			}
+// 			li.selected {
+// 				border-left: 4px solid @range-bar-color;
+// 				.day {
+// 					padding-left: 0;
+// 				}
+// 				.description {
+// 					padding-left: 34px;
+// 				}
+// 				.selectors {
+// 					left: @selector-padding-horizontal - 4px;
+// 					.range {
+// 						background-color: @range-bar-color;
+// 					}
+// 				}
+// 			}
+// 			li.selected-to {
+// 				.selectors {
+// 					.range {
+// 						top: @range-bar-selected-offset;
+// 					}
+// 					.selector-to {
+// 						opacity: 1;
+// 					}
+// 				}
+// 			}
+// 			li.selected-from {
+// 				.selectors {
+// 					.range {
+// 						bottom: @range-bar-selected-offset;
+// 					}
+// 					.selector-from {
+// 						opacity: 1;
+// 					}
+// 				}
+// 			}
+// 			li.first-in-day {
+// 				.selectors {
+// 					.selector-to {
+// 						top: @day-header-height + @selector-padding-vertical;
+// 					}
+// 				}
+// 			}
+// 			li.first-in-day.selected-to {
+// 				.selectors {
+// 					.range {
+// 						top: @day-header-height + @range-bar-selected-offset;
+// 					}
+// 				}
+// 			}
+// 		}
+// 		ul.hover-state {
+// 			li {
+// 				.selectors {
+// 					.range {
+// 						background-color: transparent;
+// 						top: 0;
+// 						bottom: 0;
+// 					}
+// 				}
+// 			}
+// 			li.hover-selected {
+// 				.selectors {
+// 					.range {
+// 						top: 0;
+// 						background-color: @gray-light;
+// 					}
+// 				}
+// 			}
+// 			li.hover-selected-to {
+// 				.selectors {
+// 					.range {
+// 						top: @range-bar-selected-offset;
+// 					}
+// 					.selector-to {
+// 						opacity: 1;
+// 					}
+// 				}
+// 			}
+// 			li.hover-selected-from {
+// 				.selectors {
+// 					.range {
+// 						bottom: @range-bar-selected-offset;
+// 					}
+// 					.selector-from {
+// 						opacity: 1;
+// 					}
+// 				}
+// 			}
+// 			li.first-in-day.hover-selected-to {
+// 				.selectors {
+// 					.range {
+// 						top: @day-header-height + @range-bar-selected-offset;
+// 					}
+// 				}
+// 			}
+// 		}
+// 	}
+// }
+
+// .diff-deleted {
+// 	padding-top: 15px;
+// }
+
+// .editor-dark {
+// 	#history {
+// 		aside.change-list {
+// 			border-color: @editor-dark-toolbar-border-color;
+			
+// 			ul li.change {
+// 				.day {
+// 					background-color: darken(@editor-dark-background-color, 10%);
+// 					border-bottom: 1px solid @editor-dark-toolbar-border-color;
+// 				}
+// 				.description {
+// 					border-bottom: 1px solid @editor-dark-toolbar-border-color;
+// 					&:hover {
+// 						background-color: black;
+// 					}
+// 				}
+// 			}
+// 		}
+// 	}
+// }

services/web/public/stylesheets/core/_common-variables.less

@@ -972,4 +972,11 @@
 // System messages
 @sys-msg-background : @state-warning-bg;
 @sys-msg-color      : #333;
-@sys-msg-border     : 1px solid @common-border-color;
+@sys-msg-border     : 1px solid @common-border-color;
+
+// v2 History
+@history-base-font-size  : @font-size-small;
+@history-base-bg         : @gray-lightest;
+@history-entry-day-bg    : @gray-dark;
+@history-base-color      : @gray-light;
+@history-highlight-color : @gray;

services/web/public/stylesheets/core/ol-variables.less

@@ -265,6 +265,14 @@
 @log-line-no-color              : #FFF;
 @log-hints-color                : @ol-blue-gray-4;
 
+
+// v2 History
+@history-base-font-size  : @font-size-small;
+@history-base-bg         : @ol-blue-gray-1;
+@history-entry-day-bg    : @ol-blue-gray-2;
+@history-base-color      : @ol-blue-gray-2;
+@history-highlight-color : @ol-type-color;
+
 // System messages
 @sys-msg-background             : @ol-blue;
 @sys-msg-color                  : #FFF;