Merge pull request #12180 from nextcloud/sidebar-fixes

Sidebar fixes, mostly fixing design of tabs

apps/files/css/detailsView.scss

@@ -15,7 +15,13 @@
 
 #app-sidebar .mainFileInfoView .permalink {
 	padding: 6px 10px;
-	vertical-align: text-top;
+	vertical-align: top;
+	opacity: .6;
+
+	&:hover,
+	&:focus {
+		opacity: 1;
+	}
 }
 #app-sidebar .mainFileInfoView .permalink-field>input {
 	clear: both;
@@ -87,7 +93,7 @@
 }
 
 #app-sidebar .fileName h3 {
-	width: calc(100% - 36px); /* 36px is the with of the copy link icon */
+	width: calc(100% - 42px); /* 36px is the with of the copy link icon, but this breaks so we add some more to be sure */
 	display: inline-block;
 	padding: 5px 0;
 	margin: -5px 0;

apps/files_versions/js/versionstabview.js

@@ -38,6 +38,10 @@
 			return t('files_versions', 'Versions');
 		},
 
+		getIcon: function() {
+			return 'icon-history';
+		},
+
 		nextPage: function() {
 			if (this._loading) {
 				return;

core/css/apps.scss

@@ -781,27 +781,47 @@ kbd {
 
 /* TABS ------------------------------------------------------------ */
 .tabHeaders {
-	display: inline-block;
+	display: flex;
-	margin: 15px;
+	margin-bottom: 16px;
+
 	.tabHeader {
-		float: left;
+		display: flex;
-		padding: 12px;
+		flex-direction: column;
+		flex-grow: 1;
+		text-align: center;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 		cursor: pointer;
 		color: var(--color-text-lighter);
 		margin-bottom: 1px;
+		padding: 5px;
+
+		/* Use same amount as sidebar padding */
+		&:first-child {
+			padding-left: 15px;
+		}
+		&:last-child {
+			padding-right: 15px;
+		}
+
 		.icon {
 			display: inline-block;
-			width: 16px;
+			width: 100%;
 			height: 16px;
 			background-size: 16px;
 			vertical-align: middle;
 			margin-top: -2px;
 			margin-right: 3px;
 			opacity: .7;
+			cursor: pointer;
 		}
+
 		a {
 			color: var(--color-text-lighter);
 			margin-bottom: 1px;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 		&.selected {
 			font-weight: bold;