Fix mobile view and add public share note view

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

6 files changed, 48 insertions, 16 deletions

diff --git a/apps/files_sharing/css/public.scss b/apps/files_sharing/css/public.scss
index 2b83db46007..708fe1f2182 100644
--- a/apps/files_sharing/css/public.scss
+++ b/apps/files_sharing/css/public.scss
@@ -167,12 +167,16 @@ thead {
 	opacity: .57;
 }
 
-#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 {
diff --git a/apps/files_sharing/js/public_note.js b/apps/files_sharing/js/public_note.js
new file mode 100644
index 00000000000..f8aa4cf5a60
--- /dev/null
+++ b/apps/files_sharing/js/public_note.js
@@ -0,0 +1,28 @@
+/**
+ * @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 noteHtml = document.getElementById('notemenu').outerHTML
+	 $(noteHtml).insertBefore('#header-primary-action');
+	 $('#notemenu').removeClass('hidden');
+	 OC.registerMenu($('#notemenu .menutoggle'), $('#notemenu .menu'))
+ })
\ No newline at end of file
diff --git a/apps/files_sharing/lib/Controller/ShareController.php b/apps/files_sharing/lib/Controller/ShareController.php
index 9594d6e71f5..6b30747c79f 100644
--- a/apps/files_sharing/lib/Controller/ShareController.php
+++ b/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');
diff --git a/apps/files_sharing/templates/public.php b/apps/files_sharing/templates/public.php
index 1c552b7d476..da80f8d1377 100644
--- a/apps/files_sharing/templates/public.php
+++ b/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; ?>
 
diff --git a/core/css/mobile.scss b/core/css/mobile.scss
index 1b067c9527f..8fff98af4d6 100644
--- a/core/css/mobile.scss
+++ b/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 {
diff --git a/core/css/public.scss b/core/css/public.scss
index a4e7ed579b9..1667ba18cda 100644
--- a/core/css/public.scss
+++ b/core/css/public.scss
@@ -7,15 +7,6 @@ $footer-height: 60px;
 			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;