Merge pull request #548 from nextcloud/icons

Replace triangle sidebar trigger with dedicated icon, add icons to sidebar tabs and fix padding

css/style.scss

@@ -445,12 +445,14 @@ video {
 }
 
 #video-fullscreen,
-.nameIndicator button {
+.nameIndicator button,
+#app-sidebar-trigger {
 	background-color: transparent;
 	border: none;
+	margin: 0;
 	width: 44px;
 	height: 44px;
-	background-size: 25px;
+	background-size: 24px;
 }
 
 .nameIndicator button.audio-disabled,
@@ -672,40 +674,17 @@ video {
 	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. */
-	top: 150px;
+	 * (top: 45px) due to the "Switch to fullscreen" icon shown during calls.
+	 * Set to 45px (header) + 44px (fullscreen icon). */
+	top: 89px;
 	right: 0;
-	width: 48px;
-	height: 48px;
 	/* Higher than the z-index of the emptycontent */
 	z-index: 50;
 	cursor: pointer;
 }
 
-#app-sidebar-trigger .large-outer-left-triangle {
-	position: absolute;
-	top: 0;
-	right: 0;
-	border-width: 24px;
-	border-color: #ebebeb;
-	border-style: solid;
-	border-left-color: transparent;
-	border-top-color: transparent;
-	border-bottom-color: transparent;
-	cursor: pointer;
-}
-
-#app-sidebar-trigger .large-inner-left-triangle {
-	position: absolute;
-	top: 2px;
-	right: 0;
-	border-width: 22px;
-	border-color: #fff;
-	border-style: solid;
-	border-left-color: transparent;
-	border-top-color: transparent;
-	border-bottom-color: transparent;
-	cursor: pointer;
+.icon-menu-people {
+	background-image: url('../img/menu-people.svg?v=1');
 }
 
 #app-sidebar .close {
@@ -772,6 +751,38 @@ video {
 	display: inline-block;
 }
 
+/* START: move padding fixes and icons-for-tabs capability into core */
+.tabHeaders {
+	margin-top: 0;
+}
+
+.tabHeaders .tabHeader {
+	padding: 12px;
+	padding-left: 32px;
+	background-position: 12px;
+	background-repeat: no-repeat;
+	opacity: .5;
+}
+
+.tabHeaders .tabHeader a {
+	color: $color-main-text;
+}
+
+.tabHeaders .tabHeader.selected,
+.tabHeaders .tabHeader:hover,
+.tabHeaders .tabHeader:focus {
+	opacity: 1;
+}
+
+#tabHeaderChat {
+	background-image: url('../../../core/img/actions/comment.svg?v=1');
+}
+
+#tabHeaderParticipants {
+	background-image: url('../../../core/img/places/contacts-dark.svg?v=1');
+}
+/* END: move padding fixes and icons-for-tabs capability into core */
+
 #app-sidebar.hidden {
 	display: none !important;
 }
@@ -852,6 +863,10 @@ video {
 	display: inline-block;
 }
 
+.detailCallInfoContainer .guest-name p {
+    padding: 9px 0;
+}
+
 .detailCallInfoContainer .editable-text-label .edit-button {
 	display: none;
 }

img/menu-people.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16"><path d="m2 2c-0.554 0-1 0.446-1 1s0.446 1 1 1h12c0.554 0 1-0.446 1-1s-0.446-1-1-1h-12zm9.717 4.0059c-1.247 0-2.1428 1.0199-2.1428 1.998 0 0.9995 0.0726 1.7127 0.5718 2.4981 0.16 0.207 0.347 0.251 0.5 0.43 0.097 0.357 0.171 0.713 0.071 1.07-0.311 0.109-0.607 0.237-0.9065 0.357-0.364-0.195-0.7863-0.357-1.1503-0.5-0.05-0.2-0.0129-0.347 0.0371-0.535 0.0856-0.089 0.163-0.129 0.2558-0.215 0.2642-0.321 0.2793-0.864 0.2793-1.2496 0-0.5712-0.5135-0.9981-1.0703-0.9981-0.6211 0-1.0723 0.5126-1.0723 0.9981h-0.0136c0 0.4996 0.0353 0.8576 0.2851 1.2496 0.0714 0.107 0.1729 0.126 0.25 0.215 0.0481 0.179 0.0859 0.357 0.0352 0.535-0.4569 0.16-0.8863 0.357-1.2832 0.571-0.2999 0.214-0.1668 0.131-0.3574 0.822-0.0886 0.357 0.928 0.521 1.6562 0.578-0.0357 0.196-0.0857 0.457-0.2285 0.957-0.2285 0.893 3.1074 1.213 4.2834 1.213 1.735 0 4.507-0.325 4.269-1.213-0.371-1.385-0.15-1.221-0.701-1.642-0.778-0.467-1.749-0.834-2.568-1.143-0.107-0.398-0.03-0.692 0.07-1.07 0.168-0.179 0.357-0.259 0.514-0.43 0.492-0.6312 0.556-1.7299 0.556-2.4981 0-1.1323-1.019-1.998-2.14-1.998zm-9.717 0.9941c-0.554 0-1 0.446-1 1s0.446 1 1 1h4.2852c0.0891-0.1855 0.2-0.3648 0.3515-0.5195 0.3721-0.3801 0.9171-0.5988 1.4883-0.6192h0.0098 0.0097c0.1729 0.017 0.3042 0.0597 0.4297 0.1426 0-0.3488 0.0747-0.6853 0.1953-1.0039h-6.7695zm0 5c-0.554 0-1 0.446-1 1s0.446 1 1 1h3.25c-0.0375-0.049-0.0777-0.09-0.1113-0.152-0.1221-0.228-0.1706-0.568-0.1035-0.838l0.0019-0.012 0.0039-0.012c0.0822-0.298 0.0556-0.322 0.1445-0.615 0.0313-0.103 0.1114-0.245 0.1993-0.371h-3.3848z"/></svg>

js/views/callinfoview.js

@@ -290,13 +290,13 @@
 			clipboard.on('success', function(e) {
 				var $input = $(e.trigger);
 				$input.tooltip('hide')
-					.attr('data-original-title', t('core', 'Copied!'))
+					.attr('data-original-title', t('core', 'Link copied!'))
 					.tooltip('fixTitle')
 					.tooltip({placement: 'bottom', trigger: 'manual'})
 					.tooltip('show');
 				_.delay(function() {
 					$input.tooltip('hide')
-						.attr('data-original-title', t('core', 'Copy'))
+						.attr('data-original-title', t('core', 'Copy link'))
 						.tooltip('fixTitle');
 				}, 3000);
 			});

js/views/sidebarview.js

@@ -28,9 +28,7 @@
 	OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
 
 	var TEMPLATE =
-		'<div id="app-sidebar-trigger">' +
-		'	<div class="large-outer-left-triangle"/>' +
-		'	<div class="large-inner-left-triangle"/>' +
+		'<div id="app-sidebar-trigger" class="icon-menu-people icon-white icon-shadow">' +
 		'</div>' +
 		'<div id="app-sidebar" class="detailsView scroll-container">' +
 		'	<div class="detailCallInfoContainer">' +