Merge pull request #10838 from nextcloud/header-fixes-and-public-note

Header fixes and public note

apps/files_sharing/css/public.scss

@@ -160,17 +160,30 @@ thead {
 }
 
 #header .header-shared-by  {
-	display: inline-block;
 	color: var(--color-primary-text);
 	position: relative;
-	top: -10px;
 	font-weight: 300;
 	font-size: 11px;
 	opacity: .57;
-	margin-top: 10px;
 }
 
-#note {
-	text-align: center;
-	padding: 10px;
-}
+#note-content {
+	padding: 5px;
+	display:inline-block;
+	width: 350px;
+	.content {
+		overflow: auto;
+		max-height: 200px;
+	}
+}
+
+// hide the primary on public share on mobile
+@media only screen and (max-width: 768px) {
+	#body-public {
+		.header-right {
+			#header-primary-action {
+				display: none;
+			}
+		}
+	}
+}

apps/files_sharing/js/public_note.js

@@ -0,0 +1,31 @@
+/**
+ * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
+ *
+ * @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
+ * 
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+ $(document).ready(function() {
+	 var noteElmt = document.getElementById('notemenu')
+	 if	(noteElmt) {
+		var noteHtml = noteElmt.outerHTML
+		$(noteHtml).insertBefore('#header-primary-action');
+		$('#notemenu').removeClass('hidden');
+		OC.registerMenu($('#notemenu .menutoggle'), $('#notemenu .menu'))
+	 }
+ })

apps/files_sharing/lib/Controller/ShareController.php

@@ -386,6 +386,7 @@ class ShareController extends AuthPublicShareController {
 		\OCP\Util::addScript('files', 'file-upload');
 		\OCP\Util::addStyle('files_sharing', 'publicView');
 		\OCP\Util::addScript('files_sharing', 'public');
+		\OCP\Util::addScript('files_sharing', 'public_note');
 		\OCP\Util::addScript('files', 'fileactions');
 		\OCP\Util::addScript('files', 'fileactionsmenu');
 		\OCP\Util::addScript('files', 'jquery.fileupload');

apps/files_sharing/templates/public.php

@@ -30,8 +30,15 @@ $maxUploadFilesize = min($upload_max_filesize, $post_max_size);
 <?php endif; ?>
 <input type="hidden" name="maxSizeAnimateGif" value="<?php p($_['maxSizeAnimateGif']); ?>" id="maxSizeAnimateGif">
 <?php if (isset($_['note']) && $_['note'] !== '') : ?>
-	<div id="note">
-		<?php p($l->t('Note:')); p(' ' . $_['note']); ?>
+	<div id="notemenu" class="hidden">
+		<div class="icon-comment-white menutoggle" tabindex="0" role="button" aria-haspopup="true" aria-controls="note-content" aria-expanded="false">
+			<span class="hidden-visually"><?php p($l->t('Share note'))?></span>
+		</div>
+		<div id="note-content" class="menu" aria-label="Note content">
+			<div class="content">
+				<?php p($_['note']); ?>
+			</div>
+		</div>
 	</div>
 <?php endif; ?>
 

core/css/header.scss

@@ -56,10 +56,15 @@
 
 /* LOGO and APP NAME -------------------------------------------------------- */
 #nextcloud {
-	padding: 8px 12px;
+	padding: 7px 0;
+	padding-left: 86px; // logo width + 2* pa
+	position: relative;
 	height: 100%;
 	box-sizing: border-box;
 	opacity: 1;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
 	&:focus {
 		opacity: .75;
 	}
@@ -107,12 +112,10 @@
 		background-repeat: no-repeat;
 		background-size: contain;
 		background-position: center;
-		width: 256px;
-		height: 128px;
-		margin: 0 auto;
-		&.logo-icon {
-			width: 62px;
-			height: 34px;
+		width: 62px;
+		height: 100%;
+		position: absolute;
+		left: 12px;
 
 		img {
 			opacity: 0;
@@ -121,10 +124,8 @@
 		}
 	}
 
-	}
 	.header-appname-container {
 		display: none;
-		padding-top: 22px;
 		padding-right: 10px;
 		flex-shrink: 0;
 	}
@@ -153,7 +154,6 @@
 
 	#header-right, .header-right {
 		justify-content: flex-end;
-		flex-basis: 210px;
 		flex-shrink: 1;
 	}
 
@@ -207,15 +207,12 @@
 
 /* show appname next to logo */
 .header-appname {
-	display: inline-block;
-	position: relative;
 	color: var(--color-primary-text);
 	font-size: 16px;
 	font-weight: 300;
 	margin: 0;
-	margin-top: -26px;
-	padding: 7px 0 7px 5px;
-	vertical-align: middle;
+	padding: 0;
+	padding-right: 5px;
 }
 
 /* do not show menu toggle on public share links as there is no menu */
@@ -577,7 +574,8 @@ nav[role='navigation'] {
 	background: var(--color-primary) !important;
 
 	&.skip-content {
-		left: 253px;
+		left: $navigation-width;
+		margin-left: 3px;
 	}
 
 	&:focus,

core/css/mobile.scss

@@ -132,7 +132,8 @@
 }
 
 @media only screen and (max-width: 480px) {
-	#header .header-right .menu {
+	#header .header-left > nav > .menu,
+	#header .header-right > div > .menu {
 		max-width: calc(100vw - 10px);
 		position: fixed;
 		&::after {

core/css/public.scss

@@ -7,15 +7,6 @@ $footer-height: 65px;
 			color: var(--color-primary-text);
 		}
 
-		.menutoggle,
-		#header-primary-action[class^='icon-'] {
-			padding: 14px;
-			padding-right: 40px;
-			background-position: right 15px center;
-			color: var(--color-primary-text);
-			cursor: pointer;
-		}
-
 		#header-secondary-action {
 			margin-right: 13px;
 

core/js/js.js

@@ -1571,7 +1571,7 @@ function initCore() {
 
 	var resizeMenu = function() {
 		var appList = $('#appmenu li');
-		var headerWidth = $('.header-left').width() - $('#nextcloud').width();
+		var headerWidth = $('.header-left').outerWidth() - $('#nextcloud').outerWidth();
 		var usePercentualAppMenuLimit = 0.33;
 		var minAppsDesktop = 8;
 		var availableWidth = headerWidth - $(appList).width();

core/js/sharedialogview.js

@@ -25,8 +25,8 @@
 		'    <span class="shareWithConfirm icon icon-confirm"></span>' +
 		'</div>' +
 		'{{/if}}' +
-		'<div class="shareeListView subView"></div>' +
 		'<div class="linkShareView subView"></div>' +
+		'<div class="shareeListView subView"></div>' +
 		'<div class="loading hidden" style="height: 50px"></div>';
 
 	/**

core/js/tests/specs/sharedialogviewSpec.js

@@ -303,7 +303,7 @@ describe('OC.Share.ShareDialogView', function() {
 			});
 
 			it('test avatar for circle', function() {
-				var avatarElement = dialog.$('.avatar').eq(4);
+				var avatarElement = dialog.$('.avatar').eq(5);
 				expect(avatarElement.css('background')).toContain('path/to/the/avatar');
 			});