Simplify save indicator

src/components/EditorWrapper.vue

@@ -178,11 +178,7 @@ export default {
 			return this.$store.state.showAuthorAnnotations
 		},
 		lastSavedStatus() {
-			let status = (this.dirtyStateIndicator ? '*' : '')
-			if (!this.isMobile) {
-				status += this.lastSavedString
-			}
-			return status
+			return this.dirtyStateIndicator ? t('text', 'Saving …') : t('text', 'Saved')
 		},
 		lastSavedStatusClass() {
 			return this.syncError && this.lastSavedString !== '' ? 'error' : ''
@@ -195,10 +191,7 @@ export default {
 			if (this.hasSyncCollission) {
 				message = t('text', 'The document has been changed outside of the editor. The changes cannot be applied.')
 			}
-			if (this.hasUnpushedChanges) {
-				message += ' - ' + t('text', 'Unpushed changes')
-			}
-			if (this.hasUnsavedChanges) {
+			if (this.hasUnpushedChanges || this.hasUnsavedChanges) {
 				message += ' - ' + t('text', 'Unsaved changes')
 			}
 			return { content: message, placement: 'bottom' }
@@ -535,6 +528,11 @@ export default {
 		overflow: hidden;
 		position: absolute;
 
+		&.show-color-annotations::v-deep .author-annotation {
+			padding-top: 2px;
+			padding-bottom: 2px;
+		}
+
 		&:not(.show-color-annotations)::v-deep .author-annotation {
 			background-color: transparent !important;
 			color: var(--color-main-text) !important;
@@ -576,7 +574,10 @@ export default {
 	}
 
 	.save-status {
-		padding: 9px;
+		display: inline-flex;
+		align-items: center;
+		padding: 0;
+		padding-right: 12px;
 		text-overflow: ellipsis;
 		color: var(--color-text-lighter);
 
@@ -597,7 +598,7 @@ export default {
 	}
 
 	#editor-session-list {
-		padding: 4px 16px 4px 4px;
+		padding-right: 16px;
 		display: flex;
 
 		input, div {
@@ -617,29 +618,23 @@ export default {
 	}
 
 	#files-public-content {
-		height: auto;
-		#editor-wrapper {
-			position: relative;
-		}
 		#editor-container {
 			top: 0;
 			width: 100%;
 
 			#editor::v-deep .menubar {
-				// sticky position is not working as body is our scroll container
-				position: fixed;
-				top: 50px;
+				position: sticky;
+				top: 0px;
 				width: 100%;
 			}
 
 			#editor {
-				padding-top: 50px;
 				overflow: auto;
 				// Fix for IE11 issue where the menubar sometimes was positioned under the text
 				z-index: 1000;
 			}
 			.has-conflicts #editor {
-				padding-top: 0px;
+				padding-top: 0;
 			}
 		}
 	}
@@ -723,4 +718,10 @@ export default {
 			}
 		}
 	}
+
+	// Required in order to make the public pages behave the same if talk is enabled or not
+	// as Talk overwrites the public page styles and changes the DOM layout for the sidebar injection
+	#files-public-content {
+		height: 100%;
+	}
 </style>

src/components/MenuBar.vue

@@ -30,6 +30,7 @@
 						:key="icon.label"
 						:title="icon.label"
 						:class="getIconClasses(isActive, icon)"
+						:disabled="disabled(commands, icon)"
 						@click="clickIcon(commands, icon)" />
 					<template v-else>
 						<div v-show="$index < iconCount || !icon.class"
@@ -136,12 +137,19 @@ export default {
 		getIconClasses() {
 			return (isActive, icon) => {
 				const classes = {
-					'is-active': icon.isActive(isActive),
+					'is-active': typeof icon.isActive === 'function' ? icon.isActive(isActive) : false,
 				}
 				classes[icon.class] = true
 				return classes
 			}
 		},
+		disabled() {
+			return (commands, menuItem) => {
+				return false
+				// FIXME with this we seem to be running into an endless rerender loop, so this needs more investigation at some later point
+				// typeof menuItem.isDisabled === 'function' ? menuItem.isDisabled()(commands) : false
+			}
+		},
 		isChildMenuVisible() {
 			return (icon) => {
 				return Object.prototype.hasOwnProperty.call(this.submenuVisibility, icon.label) ? this.submenuVisibility[icon.label] : false
@@ -316,14 +324,19 @@ export default {
 
 <style scoped lang="scss">
 	.menubar {
+		--background-blur: blur(10px);
 		position: fixed;
 		position: -webkit-sticky;
 		position: sticky;
 		top: 0;
 		display: flex;
 		z-index: 10010; // above modal-header so buttons are clickable
 		background-color: var(--color-main-background-translucent);
-		height: 44px;
+		-webkit-backdrop-filter: var(--background-blur);
+		backdrop-filter: var(--background-blur);
+		height: 50px;
+		padding-top:3px;
+		padding-bottom: 3px;
 
 		&.autohide {
 			visibility: hidden;
@@ -350,6 +363,7 @@ export default {
 	}
 
 	.menubar button {
+		position: relative;
 		width: 44px;
 		height: 44px;
 		margin: 0;
@@ -363,14 +377,40 @@ export default {
 		&:hover, &:focus, &:active {
 			background-color: var(--color-background-dark);
 		}
+
+		&.is-active::before {
+			transform: translateX(-50%);
+			border-radius: 100%;
+			position: absolute;
+			background: var(--color-primary-element);
+			bottom: 3px;
+			height: 6px;
+			width: 6px;
+			content: '';
+			left: 50%;
+
+		}
 		&.is-active,
 		&:hover,
 		&:focus {
 			opacity: 1;
 		}
 
-		&.icon-undo, &.icon-redo {
-			opacity: .4;
+		&.icon-undo,
+		&.icon-redo {
+			opacity: .8;
+
+			&:disabled {
+				opacity: .4;
+			}
+		}
+
+		&.icon-redo {
+			margin-right: 22px;
+		}
+
+		&.icon-ul {
+			margin-left: 22px;
 		}
 	}
 

src/components/SessionList.vue

@@ -25,7 +25,7 @@
 		<button slot="trigger"
 			v-tooltip.bottom="editorsTooltip"
 			class="avatar-list">
-			<div class="avatardiv" :class="{ 'icon-more': sessionPopoverList.length > 0, 'icon-settings-dark': sessionPopoverList.length === 0 }" />
+			<div class="avatardiv icon-group" />
 			<div v-for="session in sessionsVisible"
 				:key="session.id"
 				class="avatar-wrapper"
@@ -64,9 +64,9 @@
 					v-model="showAuthorAnnotations"
 					type="checkbox"
 					class="checkbox">
-				<label for="toggle-color-annotations">{{ t('text', 'Show color annotations') }}</label>
+				<label for="toggle-color-annotations">{{ t('text', 'Show author colors') }}</label>
 				<p class="hint">
-					{{ t('text', 'Color annotations will only show during editing sessions, they are not persisted after closing the document.') }}
+					{{ t('text', 'Author colors are only shown until everyone has closed the document.') }}
 				</p>
 			</div>
 		</template>
@@ -175,7 +175,7 @@ export default {
 			margin-left: 0;
 		}
 
-		.icon-more, .icon-settings-dark {
+		.icon-more, .icon-group, .icon-settings-dark {
 			background-color: var(--color-background-dark);
 			width: 36px;
 			height: 36px;

src/mixins/menubar.js

@@ -24,13 +24,15 @@ export default [
 	{
 		label: t('text', 'Undo'),
 		class: 'icon-undo',
-		isActive: (isActive) => {},
+		isActive: (isActive) => false,
+		isDisabled: (command) => command.undoDepth() === 0,
 		action: (command) => command.undo(),
 	},
 	{
 		label: t('text', 'Redo'),
 		class: 'icon-redo',
-		isActive: (isActive) => {},
+		isActive: (isActive) => false,
+		isDisabled: (command) => command.redoDepth() === 0,
 		action: (command) => command.redo(),
 	},
 	{