overleaf/services/web/app/views/project/editor/header.pug

header.toolbar.toolbar-header.toolbar-with-labels(
	ng-cloak,
	ng-hide="state.loading"
)
	.toolbar-left
		a.btn.btn-full-height(
			href,
			ng-click="ui.leftMenuShown = true;",
		)
			i.fa.fa-fw.fa-bars.editor-menu-icon
			p.toolbar-label #{translate("menu")}
		a.btn.btn-full-height.header-cobranding-logo-container(
			ng-if="::(cobranding.isProjectCobranded && cobranding.logoImgUrl)"
			ng-href="{{ ::cobranding.brandVariationHomeUrl }}"
			target="_blank"
			rel="noreferrer noopener"
		)
			img.header-cobranding-logo(
				ng-src="{{ ::cobranding.logoImgUrl }}"
				alt="{{ ::cobranding.brandVariationName }}"
			)

		a.toolbar-header-back-projects(
			href="/project"
		)
			i.fa.fa-fw.fa-level-up

	span(ng-controller="PdfViewToggleController")
		a.btn.btn-full-height.btn-full-height-no-border(
			href,
			ng-show="ui.pdfLayout == 'flat'",
			tooltip="PDF",
			tooltip-placement="bottom",
			tooltip-append-to-body="true",
			ng-click="togglePdfView()",
			ng-class="{ 'active': ui.view == 'pdf' }"
		)
			i.fa.fa-file-pdf-o

	.toolbar-center.project-name(ng-controller="ProjectNameController")
		span.name(
			ng-dblclick="!permissions.admin || startRenaming()",
			ng-show="!state.renaming"
			tooltip="{{ project.name }}",
			tooltip-class="project-name-tooltip"
			tooltip-placement="bottom",
			tooltip-append-to-body="true",
			tooltip-enable="state.overflowed"
		) {{ project.name }}

		input.form-control(
			type="text"
			ng-model="inputs.name",
			ng-show="state.renaming",
			on-enter="finishRenaming()",
			ng-blur="finishRenaming()",
			select-name-when="state.renaming"
		)

		a.rename(
			ng-if="permissions.admin",
			href='#',
			tooltip-placement="bottom",
			tooltip=translate('rename'),
			tooltip-append-to-body="true",
			ng-click="startRenaming()",
			ng-show="!state.renaming"
		)
			i.fa.fa-pencil

	.toolbar-right
		.online-users(
			ng-if="onlineUsersArray.length < 4"
			ng-controller="OnlineUsersController"
		)
			span.online-user(
				ng-repeat="user in onlineUsersArray",
				ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }",
				popover="{{ user.name }}"
				popover-placement="bottom"
				popover-append-to-body="true"
				popover-trigger="mouseenter"
				ng-click="gotoUser(user)"
			) {{ userInitial(user) }}

		.online-users.dropdown(
			dropdown
			ng-if="onlineUsersArray.length >= 4"
			ng-controller="OnlineUsersController"
		)
			span.online-user.online-user-multi(
				dropdown-toggle,
				tooltip=translate('connected_users'),
				tooltip-placement="left"
			)
				strong {{ onlineUsersArray.length }}
				i.fa.fa-fw.fa-users
			ul.dropdown-menu.pull-right
				li.dropdown-header #{translate('connected_users')}
				li(ng-repeat="user in onlineUsersArray")
					a(href, ng-click="gotoUser(user)")
						span.online-user(
							ng-style="{ 'background-color': 'hsl({{ getHueForUserId(user.user_id) }}, 70%, 50%)' }"
						) {{ user.name.slice(0,1) }}
						| {{ user.name }}

		if !isRestrictedTokenMember
			a.btn.btn-full-height(
				href,
				ng-if="project.features.trackChangesVisible",
				ng-class="{ active: ui.reviewPanelOpen && ui.view !== 'history' }"
				ng-disabled="ui.view === 'history'"
				ng-click="toggleReviewPanel()"
			)
				i.review-icon
				p.toolbar-label
					| #{translate("review")}

		a.btn.btn-full-height(
			href
			ng-click="openShareProjectModal(permissions.admin);"
			ng-controller="ReactShareProjectModalController"
		)
			i.fa.fa-fw.fa-group
			p.toolbar-label #{translate("share")}

			share-project-modal(
				handle-hide="handleHide"
				show="show"
				is-admin="isAdmin"
			)
		!= moduleIncludes('publish:button', locals)

		if !isRestrictedTokenMember
			a.btn.btn-full-height(
				href,
				ng-click="toggleHistory();",
				ng-class="{ active: (ui.view == 'history') }",
			)
				i.fa.fa-fw.fa-history
				p.toolbar-label #{translate("history")}
			a.btn.btn-full-height(
				href,
				ng-class="{ active: ui.chatOpen }",
				ng-click="toggleChat();",
				ng-controller="ChatButtonController",
				ng-show="!anonymous",
			)
				i.fa.fa-fw.fa-comment(
					ng-class="{ 'bounce': unreadMessages > 0 }"
				)
				span.label.label-info(
					ng-show="unreadMessages > 0"
				) {{ unreadMessages }}
				p.toolbar-label #{translate("chat")}