Merge pull request #553 from nextcloud/design-more

More design fixes

css/comments.css → css/comments.scss

@@ -18,19 +18,18 @@
 }
 
 #commentsTabView .newCommentForm .message {
-	width: calc(100% - 81px); /* 36 (left margin) + 30 (right padding) + 15 (right padding of surrounding box) */
+	width: calc(100% - 32px);
 	margin-left: 36px;
 	padding-right: 30px;
 	display: block;
 }
 
 #commentsTabView .newCommentForm .submit {
 	position: absolute;
-	bottom: 0px;
-	right: 8px;
-	width: 30px;
+	bottom: -4px;
+	right: -8px;
 	margin: 0;
-	padding: 7px 9px;
+	padding: 13px 22px;;
 	background-color: transparent;
 	border: none;
 	opacity: .3;

css/style.scss

@@ -378,6 +378,26 @@ video {
 	background-color: #000;
 }
 
+/* Use dark icons when not in a call (= white background) */
+#app-content:not(.incall) .icon-white.icon-shadow {
+	/* Still use white icons outside of calls when local video shows */
+	&#hideVideo.video-disabled,
+	&#mute.video-disabled {
+		filter: none;
+	}
+
+	&.icon-menu-people,
+	&.icon-fullscreen {
+		filter: none;
+		opacity: .5;
+
+		&:hover,
+		&:focus {
+			opacity: 1;
+		}
+	}
+}
+
 #app-content.screensharing .videoContainer video {
 	max-height: 200px;
 	background-color: transparent;
@@ -436,12 +456,13 @@ video {
 
 #video-fullscreen {
 	position: absolute;
+	top: 44px;
 	right: 0;
 	z-index: 90;
 }
 
 #video-fullscreen.public {
-	top: 45px;
+	top: 89px;
 }
 
 #video-fullscreen,
@@ -505,18 +526,51 @@ video {
 	opacity: .8 !important;
 }
 
-#app-content:-webkit-full-screen  {
+
+/* Fullscreen handling */
+
+/**
+ * Different browsers handle fullscreen elements with a margin in different
+ * ways: Firefox ignores the margin and uses the full width, while Chromium uses
+ * a strange mix which is neither the full width nor the full margin. Due to
+ * this the margin is removed to unify the appearance across browsers; visually,
+ * this causes the sidebar to slide on the content instead of "pushing" it to
+ * the left.
+ */
+#app-content:-webkit-full-screen {
 	width: 100%;
+	margin-right: 0;
+
+	&.participants-1 {
+		background: #fff;
+	}
 }
 #app-content:-moz-full-screen {
 	width: 100%;
+	margin-right: 0;
+
+	&.participants-1 {
+		background: #fff;
+	}
 }
 #app-content:-ms-fullscreen {
 	width: 100%;
+	margin-right: 0;
+
+	&.participants-1 {
+		background: #fff;
+	}
 }
 #app-content:fullscreen {
 	width: 100%;
+	margin-right: 0;
+
+	&.participants-1 {
+		background: #fff;
+	}
 }
+
+/* No switching between rooms in fullscreen, focus on the current call. */
 #app-content:-webkit-full-screen #app-navigation-toggle {
 	display: none !important;
 }
@@ -530,27 +584,6 @@ video {
 	display: none !important;
 }
 
-/**
- * Different browsers handle fullscreen elements with a margin in different
- * ways: Firefox ignores the margin and uses the full width, while Chromium uses
- * a strange mix which is neither the full width nor the full margin. Due to
- * this the margin is removed to unify the appearance across browsers; visually,
- * this causes the sidebar to slide on the content instead of "pushing" it to
- * the left.
- */
-#app-content:-webkit-full-screen {
-	margin-right: 0;
-}
-#app-content:-moz-full-screen {
-	margin-right: 0;
-}
-#app-content:-ms-fullscreen {
-	margin-right: 0;
-}
-#app-content:fullscreen {
-	margin-right: 0;
-}
-
 /**
  * In fullscreen mode there is no header, so the sidebar has to be moved to the
  * top.
@@ -583,19 +616,32 @@ video {
 	display: none !important;
 }
 
-/* As there is no header the fullscreen button can be moved to the top. */
-#app-content:-webkit-full-screen #video-fullscreen.public {
+/* As there is no header in fullscreen the buttons can be moved to the top. */
+#app-content:-webkit-full-screen #app-sidebar-trigger {
 	top: 0;
 }
-#app-content:-moz-full-screen #video-fullscreen.public {
+#app-content:-moz-full-screen #app-sidebar-trigger {
 	top: 0;
 }
-#app-content:-ms-fullscreen #video-fullscreen.public {
+#app-content:-ms-fullscreen #app-sidebar-trigger {
 	top: 0;
 }
-#app-content:fullscreen #video-fullscreen.public {
+#app-content:fullscreen #app-sidebar-trigger {
 	top: 0;
 }
+#app-content:-webkit-full-screen #video-fullscreen {
+	top: 44px;
+}
+#app-content:-moz-full-screen #video-fullscreen {
+	top: 44px;
+}
+#app-content:-ms-fullscreen #video-fullscreen {
+	top: 44px;
+}
+#app-content:fullscreen #video-fullscreen {
+	top: 44px;
+}
+
 
 .localmediaerror h2 {
 	color: red;
@@ -672,11 +718,7 @@ video {
 
 #app-sidebar-trigger {
 	position: fixed;
-	/* Although it would be desirable due to their complementary behaviour, the
-	 * trigger can not be placed at the same position as the close button
-	 * (top: 45px) due to the "Switch to fullscreen" icon shown during calls.
-	 * Set to 45px (header) + 44px (fullscreen icon). */
-	top: 89px;
+	top: 45px;
 	right: 0;
 	/* Higher than the z-index of the emptycontent */
 	z-index: 50;
@@ -732,10 +774,14 @@ video {
 /* As the header is hidden (except for the logo), move the fullscreen button and
  * sidebar to the top during calls */
 #body-public #app-content:not(.participants-1) #app-sidebar,
+#body-public #app-content:not(.participants-1) #app-sidebar-trigger,
 #body-public #app-content:not(.participants-1) #video-fullscreen {
 	top: 0;
 	z-index: 3000;
 }
+#body-public #app-content:not(.participants-1) #video-fullscreen {
+	top: 44px;
+}
 
 /**
  * Right sidebar

js/app.js

@@ -632,13 +632,15 @@
 		},
 		enableVideo: function() {
 			var $hideVideoButton = $('#hideVideo');
+			var $audioMuteButton = $('#mute');
 			var avatarContainer = $hideVideoButton.closest('.videoView').find('.avatar-container');
 			var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo');
 
 			OCA.SpreedMe.webrtc.resumeVideo();
 			$hideVideoButton.attr('data-original-title', t('spreed', 'Disable video'))
 				.removeClass('video-disabled icon-video-off')
 				.addClass('icon-video');
+			$audioMuteButton.removeClass('video-disabled');
 
 			avatarContainer.hide();
 			localVideo.show();
@@ -647,13 +649,15 @@
 		},
 		hideVideo: function() {
 			var $hideVideoButton = $('#hideVideo');
+			var $audioMuteButton = $('#mute');
 			var avatarContainer = $hideVideoButton.closest('.videoView').find('.avatar-container');
 			var localVideo = $hideVideoButton.closest('.videoView').find('#localVideo');
 
 			if (!$hideVideoButton.hasClass('no-video-available')) {
 				$hideVideoButton.attr('data-original-title', t('spreed', 'Enable video'))
 					.addClass('video-disabled icon-video-off')
 					.removeClass('icon-video');
+				$audioMuteButton.addClass('video-disabled');
 			}
 
 			var avatar = avatarContainer.find('.avatar');