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

div#history(ng-show="ui.view == 'history'")
	span(ng-controller="HistoryPremiumPopup")
		.upgrade-prompt(ng-if="project.features.versioning === false && ui.view === 'history'")
			
			div(ng-if="project.owner._id == user.id")
				div(sixpack-switch="teaser-history")
					.message(sixpack-default)
						p.text-center: strong #{translate("upgrade_to_get_feature", {feature:"full Project History"})}
						p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
						ul.list-unstyled
							li 
								i.fa.fa-check  
								| #{translate("unlimited_projects")}
							
							li
								i.fa.fa-check  
								| #{translate("collabs_per_proj", {collabcount:'Multiple'})}
							
							li 
								i.fa.fa-check  
								| #{translate("full_doc_history")}
							
							li 
								i.fa.fa-check  
								| #{translate("sync_to_dropbox")}

							li 
								i.fa.fa-check  
								| #{translate("sync_to_github")}

							li  
								i.fa.fa-check  
								|#{translate("compile_larger_projects")}
						p.text-center(ng-controller="FreeTrialModalController")
							a.btn.btn-success(
								href
								ng-class="buttonClass"
								ng-click="startFreeTrial('history')"
								sixpack-convert="teaser-history"
							) #{translate("start_free_trial")}

					.message.message-wider(sixpack-when="focused")
						header.message-header
							h3 History

						.message-body
							h4.teaser-title See who changed what. Go back to previous versions.
							img.teaser-img(
								src="/img/teasers/history/teaser-history.png"
								alt="History"
							)
							p.text-center.small(ng-show="startedFreeTrial") #{translate("refresh_page_after_starting_free_trial")}
							.row
								.col-md-8.col-md-offset-2
									ul.list-unstyled
										li 
											i.fa.fa-check  
											| Catch up with your collaborators changes
										
										li
											i.fa.fa-check  
											| See changes over any time period
										
										li 
											i.fa.fa-check  
											| Revert your documents to previous versions
										
										li 
											i.fa.fa-check  
											| Restore deleted files
							p.text-center(ng-controller="FreeTrialModalController")
								a.btn.btn-success(
									href
									ng-class="buttonClass"
									ng-click="startFreeTrial('history')"
									sixpack-convert="teaser-history"
								) Try it for free

			.message(ng-show="project.owner._id != user.id")
				p #{translate("ask_proj_owner_to_upgrade_for_history")}
				p
					a.small(href, ng-click="toggleHistory()") #{translate("cancel")}

	aside.change-list(
		ng-controller="HistoryListController"
		infinite-scroll="loadMore()"
		infinite-scroll-disabled="history.loading || history.atEnd"
		infinite-scroll-initialize="ui.view == 'history'"
	)
		.infinite-scroll-inner
			ul.list-unstyled(
				ng-class="{\
					'hover-state': history.hoveringOverListSelectors\
				}"
			)
				li.change(
					ng-repeat="update in history.updates"
					ng-class="{\
						'first-in-day': update.meta.first_in_day,\
						'selected': update.inSelection,\
						'selected-to': update.selectedTo,\
						'selected-from': update.selectedFrom,\
						'hover-selected': update.inHoverSelection,\
						'hover-selected-to': update.hoverSelectedTo,\
						'hover-selected-from': update.hoverSelectedFrom,\
					}"
					ng-controller="HistoryListItemController"
				)

					div.day(ng-show="update.meta.first_in_day") {{ update.meta.end_ts | relativeDate }}

					div.selectors
						div.range
						form
							input.selector-from(
								type="radio"
								name="fromVersion"
								ng-model="update.selectedFrom"
								ng-value="true"
								ng-mouseover="mouseOverSelectedFrom()"
								ng-mouseout="mouseOutSelectedFrom()"
								ng-show="update.afterSelection || update.inSelection"
							)
						form
							input.selector-to(
								type="radio"
								name="toVersion"
								ng-model="update.selectedTo"
								ng-value="true"
								ng-mouseover="mouseOverSelectedTo()"
								ng-mouseout="mouseOutSelectedTo()"
								ng-show="update.beforeSelection || update.inSelection"
							)

					div.description(ng-click="select()")
						div.time {{ update.meta.end_ts | formatDate:'h:mm a' }}
						div.docs(ng-repeat="(doc_id, doc) in update.docs")
							span.doc {{ doc.entity.name }}
						div.users
							div.user(ng-repeat="update_user in update.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="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="update.meta.users.length == 0")
								.color-square(style="background-color: hsl(100, 100%, 50%)")
								span #{translate("anonymous")}

			.loading(ng-show="history.loading")
				i.fa.fa-spin.fa-refresh
				|    #{translate("loading")}...

	.diff-panel.full-size(ng-controller="HistoryDiffController")
		.diff(
			ng-show="!!history.diff && !history.diff.loading && !history.diff.deleted && !history.diff.error"
		)
			.toolbar.toolbar-alt
				span.name
					| <strong>{{history.diff.highlights.length}} </strong>
					ng-pluralize(
						count="history.diff.highlights.length",
						when="{\
							'one': 'change',\
							'other': 'changes'\
						}"
					)
					|  in <strong>{{history.diff.doc.name}}</strong>
				.toolbar-right
					a.btn.btn-danger.btn-sm(
						href,
						ng-click="openRestoreDiffModal()"
					) #{translate("restore_to_before_these_changes")}
			.diff-editor.hide-ace-cursor(
				ace-editor="history",
				theme="settings.theme",
				font-size="settings.fontSize",
				text="history.diff.text",
				highlights="history.diff.highlights",
				read-only="true",
				resize-on="layout:main:resize",
				navigate-highlights="true"
			)
		.diff-deleted.text-centered(
			ng-show="history.diff.deleted && !history.diff.restoreDeletedSuccess"
		)
			p.text-serif #{translate("file_has_been_deleted", {filename:"{{ history.diff.doc.name }} "})}
			p
				a.btn.btn-primary.btn-lg(
					href,
					ng-click="restoreDeletedDoc()",
					ng-disabled="history.diff.restoreInProgress"
				) #{translate("restore")}

		.diff-deleted.text-centered(
			ng-show="history.diff.deleted && history.diff.restoreDeletedSuccess"
		)
			p.text-serif  #{translate("file_restored", {filename:"{{ history.diff.doc.name }} "})}
			p.text-serif  #{translate("file_restored_back_to_editor")}
			p
				a.btn.btn-default(
					href,
					ng-click="backToEditorAfterRestore()",
				) #{translate("file_restored_back_to_editor_btn")}

		.loading-panel(ng-show="history.diff.loading")
			i.fa.fa-spin.fa-refresh
			| &nbsp;&nbsp;#{translate("loading")}...
		.error-panel(ng-show="history.diff.error")
			.alert.alert-danger #{translate("generic_something_went_wrong")}

script(type="text/ng-template", id="historyRestoreDiffModalTemplate")
	.modal-header
		button.close(
			type="button"
			data-dismiss="modal"
			ng-click="cancel()"
		) &times;
		h3 #{translate("restore")} {{diff.doc.name}}
	.modal-body.modal-body-share
		p !{translate("sure_you_want_to_restore_before", {filename:"<strong>{{diff.doc.name}}</strong>", date:"{{diff.start_ts | formatDate}}"})}
	.modal-footer
		button.btn.btn-default(
			ng-click="cancel()",
			ng-disabled="state.inflight"
		) #{translate("cancel")}
		button.btn.btn-danger(
			ng-click="restore()",
			ng-disabled="state.inflight"
		)
			span(ng-show="!state.inflight") #{translate("restore")}
			span(ng-show="state.inflight") #{translate("restoring")} ...