Add history labels view.

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

@@ -70,10 +70,10 @@ script(type="text/ng-template", id="historyRestoreDiffModalTemplate")
 
 
 script(type="text/ng-template", id="historyLabelTpl")
-	.history-entry-label(
-		ng-class="{ 'history-entry-label-own' : $ctrl.isOwnedByCurrentUser }"
+	.history-label(
+		ng-class="{ 'history-label-own' : $ctrl.isOwnedByCurrentUser }"
 	)
-		span.history-entry-label-comment(
+		span.history-label-comment(
 			tooltip-append-to-body="true"
 			tooltip-template="'historyLabelTooltipTpl'"
 			tooltip-placement="left"
@@ -81,7 +81,7 @@ script(type="text/ng-template", id="historyLabelTpl")
 		)
 			i.fa.fa-tag
 			|  {{ $ctrl.labelText }}
-		button.history-entry-label-delete-btn(
+		button.history-label-delete-btn(
 			ng-if="$ctrl.isOwnedByCurrentUser"
 			stop-propagation="click"
 			ng-click="$ctrl.onLabelDelete()"

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

@@ -17,6 +17,11 @@ aside.change-list(
 	history-labels-list(
 		ng-if="history.showOnlyLabels"
 		labels="history.labels"
+		current-user="user"
+		users="projectUsers"
+		is-loading="history.loading"
+		on-label-select="handleLabelSelect(label)"
+		on-label-delete="handleLabelDelete(label)"
 	)
 
 aside.change-list(
@@ -201,12 +206,33 @@ script(type="text/ng-template", id="historyEntryTpl")
 						) #{translate("anonymous")}
 
 script(type="text/ng-template", id="historyLabelsListTpl")
-	history-label(
-		ng-repeat="label in $ctrl.labels"
-		show-tooltip="false"
-		label-text="label.comment"
-		label-owner-name="$ctrl.displayNameById(label.user_id)"
-		label-creation-date-time="label.created_at"
-		is-owned-by-current-user="label.user_id === $ctrl.currentUser.id"
-		on-label-delete="$ctrl.onLabelDelete({ label: label })"
-	)
+	.history-labels-list
+		.history-entry-label(
+			ng-repeat="label in $ctrl.labels | orderBy : [ '-version', '-created_at' ] track by label.id"
+			ng-click="$ctrl.onLabelSelect({ label: label })"
+		)
+			history-label(
+				show-tooltip="false"
+				label-text="label.comment"
+				is-owned-by-current-user="label.user_id === $ctrl.currentUser.id"
+				on-label-delete="$ctrl.onLabelDelete({ label: label })"
+			)
+			.history-entry-label-metadata
+				.history-entry-label-metadata-user(ng-init="user = $ctrl.getUserById(label.user_id)")
+					| Saved by 
+					span.name(
+						ng-if="user && user._id !== $ctrl.currentUser.id"
+						ng-style="$ctrl.getUserCSSStyle(user);"
+					) {{ ::$ctrl.displayName(user) }} 
+					span.name(
+						ng-if="user && user._id == $ctrl.currentUser.id"
+						ng-style="$ctrl.getUserCSSStyle(user);"
+					) You
+					span.name(
+						ng-if="user == null"
+						ng-style="$ctrl.getUserCSSStyle(user);"
+					) #{translate("anonymous")}
+				time.history-entry-label-metadata-time {{ ::label.created_at | formatDate }}
+		.loading(ng-show="$ctrl.isLoading")
+			i.fa.fa-spin.fa-refresh
+			|    #{translate("loading")}...

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

@@ -1,7 +1,8 @@
 define [
 	"base"
+	"ide/colors/ColorManager"
 	"ide/history/util/displayNameForUser"
-], (App, displayNameForUser) ->
+], (App, ColorManager, displayNameForUser) ->
 	historyEntryController = ($scope, $element, $attrs, _) ->
 		ctrl = @
 		# This method (and maybe the one below) will be removed soon. User details data will be 
@@ -19,7 +20,8 @@ define [
 			else if projectOp.add? then "#{ projectOp.add.pathname}"
 			else if projectOp.remove? then "#{ projectOp.remove.pathname}"
 		ctrl.getUserCSSStyle = (user) ->
-			hue = user?.hue or 100
+			curUserId = user?._id or user?.id
+			hue = ColorManager.getHueForUserId(curUserId) or 100
 			if ctrl.entry.inSelection 
 				color : "#FFF" 
 			else 

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

@@ -10,8 +10,8 @@ define [
 	App.component "historyLabel", {
 		bindings:
 			labelText: "<"
-			labelOwnerName: "<"
-			labelCreationDateTime: "<"
+			labelOwnerName: "<?"
+			labelCreationDateTime: "<?"
 			isOwnedByCurrentUser: "<"
 			onLabelDelete: "&"
 			showTooltip: "<?"

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

@@ -1,27 +1,33 @@
 define [
 	"base"
+	"ide/colors/ColorManager"
 	"ide/history/util/displayNameForUser"
-], (App, displayNameForUser) ->
+], (App, ColorManager, displayNameForUser) ->
 	historyLabelsListController = ($scope, $element, $attrs) ->
 		ctrl = @ 
 		# This method (and maybe the one below) will be removed soon. User details data will be 
 		# injected into the history API responses, so we won't need to fetch user data from other
 		# local data structures.
-		_getUserById = (id) ->
+		ctrl.getUserById = (id) ->
 			_.find ctrl.users, (user) ->
 				curUserId = user?._id or user?.id
 				curUserId == id
 		ctrl.displayName = displayNameForUser
-		ctrl.displayNameById = (id) ->
-			displayNameForUser(_getUserById(id))
+		ctrl.getUserCSSStyle = (user) ->
+			curUserId = user?._id or user?.id
+			hue = ColorManager.getHueForUserId(curUserId) or 100
+			if false #ctrl.entry.inSelection 
+				color : "#FFF" 
+			else 
+				color: "hsl(#{ hue }, 70%, 50%)"
 		return
 
 	App.component "historyLabelsList", {
 		bindings:
 			labels: "<"
 			users: "<"
-			isLoading: "<"
 			currentUser: "<"
+			isLoading: "<"
 			onLabelSelect: "&"
 			onLabelDelete: "&"
 		controller: historyLabelsListController

services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee

@@ -16,6 +16,9 @@ define [
 			ide.historyManager.selectUpdate(entry)
 			$scope.recalculateSelectedUpdates()
 
+		$scope.handleLabelSelect = (label) ->
+			console.log label
+
 		$scope.handleLabelDelete = (labelDetails) ->
 			$modal.open(
 				templateUrl: "historyV2DeleteLabelModalTemplate"

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

@@ -61,8 +61,7 @@
 		color: #FFF;
 	}
 }
-
-	.history-entry-label {
+	.history-label {
 		display: inline-block;
 		color: @history-entry-label-color;
 		font-size: @font-size-small;
@@ -73,8 +72,8 @@
 			color: @history-entry-selected-label-color;
 		}
 	}
-		.history-entry-label-comment,
-		.history-entry-label-delete-btn {
+		.history-label-comment,
+		.history-label-delete-btn {
 			padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
 			border: 0;
 			background-color: @history-entry-label-bg-color;
@@ -82,19 +81,19 @@
 				background-color: @history-entry-selected-label-bg-color;
 			}
 		}
-		.history-entry-label-comment {
+		.history-label-comment {
 			display: block;
 			float: left;
 			border-radius: 9999px;
 			max-width: 190px;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			.history-entry-label-own & {
+			.history-label-own & {
 				padding-right: (@padding-xs-horizontal / 2);
 				border-radius: 9999px 0 0 9999px;
 			}
 		}
-		.history-entry-label-delete-btn {
+		.history-label-delete-btn {
 			padding-left: (@padding-xs-horizontal / 2);
 			padding-right: @padding-xs-horizontal;
 			border-radius: 0 9999px 9999px 0;
@@ -163,6 +162,15 @@
 				}
 			}
 
+.history-labels-list {
+	.history-entries;
+	overflow-y: auto;
+}
+	.history-entry-label {
+		.history-entry-details;
+		padding: 7px 10px;
+	}
+
 .history-file-tree-inner {
 	.full-size;
 	overflow-y: auto;
@@ -239,330 +247,3 @@
 				color: @brand-primary;
 			}
 		}
-// @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/app/editor/toolbar.less

@@ -194,56 +194,57 @@
 }
 
 .toggle-switch {
-  position: relative;
+	position: relative;
 	height: 100%;
 	width: 100%;
-  background-color: @toggle-switch-bg;
-  border-radius: @btn-border-radius-base;
+	background-color: @toggle-switch-bg;
+	border-radius: @btn-border-radius-base;
 }
 
 .toggle-switch-label {
 	position: relative;
 	display: block;
 	font-weight: normal;
-  z-index: 2;
-  float: left;
-  width: 50%;
-  height: 100%;
-  line-height: 24px;
+	z-index: 2;
+	float: left;
+	width: 50%;
+	height: 100%;
+	line-height: 24px;
 	text-align: center;
 	margin-bottom: 0;
-  cursor: pointer;
-  user-select: none;
-  transition: color 0.12s ease-out;
+	cursor: pointer;
+	user-select: none;
+	color: @text-color;
+	transition: color 0.12s ease-out;
 }
 
 .toggle-switch-input {
-  position: absolute;
-  opacity: 0;
+	position: absolute;
+	opacity: 0;
 }
 
 .toggle-switch-input:checked + .toggle-switch-label {
-  color: #fff;
-  font-weight: bold;
+	color: #fff;
+	font-weight: bold;
 }
 
 .toggle-switch-selection {
-  display: block;
-  position: absolute;
-  z-index: 1;
-  top: 2px;
-  left: 2px;
-  right: 2px;
-  width: calc(~"50% - 2px");
-  height: calc(~"100% - 4px");
-  background: @toggle-switch-highlight-color;
-  border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
-  transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
+	display: block;
+	position: absolute;
+	z-index: 1;
+	top: 2px;
+	left: 2px;
+	right: 2px;
+	width: calc(~"50% - 2px");
+	height: calc(~"100% - 4px");
+	background: @toggle-switch-highlight-color;
+	border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
+	transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
 }
 
 .toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
-  transform: translate(100%);
-  border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
+	transform: translate(100%);
+	border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
 }
 
 /**************************************