Merge pull request #86 from nextcloud/allow-to-expand-the-messagev12.0.1RC5v12.0.1

Allow to expand the message on click...

3 files changed, 17 insertions, 6 deletions

diff --git a/css/styles.css b/css/styles.css
index 118bf43..fcb3708 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -137,13 +137,15 @@ img.notification-icon {
 	margin-right: 20px;
 }
 
-.notification .notification-message {
+.notification .notification-message,
+.notification .notification-full-message {
 	line-height: 20px;
 	padding-bottom: 16px;
 	opacity: .57;
 }
 
 .notification .notification-message img,
+.notification .notification-full-message img,
 .notification .notification-subject img:not(.notification-icon) {
 	max-width: 32px;
 	max-height: 32px;
diff --git a/js/app.js b/js/app.js
index de6a7a2..912bb37 100644
--- a/js/app.js
+++ b/js/app.js
@@ -67,6 +67,7 @@
 		'    </div>' +
 		'  {{/if}}' +
 		'  <div class="notification-message">{{{message}}}</div>' +
+		'  <div class="notification-full-message hidden">{{{full_message}}}</div>' +
 		'  <div class="notification-actions">' +
 		'    {{#each actions}}' +
 		'      <button class="action-button pull-right{{#if this.primary}} primary{{/if}}" data-type="{{this.type}}" ' +
@@ -376,6 +377,13 @@
 				placement: 'bottom'
 			});
 
+			$element.find('.notification-message').on('click', function() {
+				var $fullMessage = $(this).parent().find('.notification-full-message');
+				$(this).addClass('hidden');
+				$fullMessage.removeClass('hidden');
+
+			});
+
 			this.$container.find('.notification-wrapper').prepend($element);
 		},
 
diff --git a/js/notification.js b/js/notification.js
index 3bc1eeb..933e374 100644
--- a/js/notification.js
+++ b/js/notification.js
@@ -81,14 +81,14 @@
 			var message = this.data.message;
 
 			/**
-			 * Trim on word end after 100 chars or hard 120 chars
+			 * Trim on word end after 180 chars or hard 200 chars
 			 */
-			if (message.length > 120) {
-				var spacePosition = message.indexOf(' ', 100);
-				if (spacePosition !== -1 && spacePosition <= 120) {
+			if (message.length > 200) {
+				var spacePosition = message.indexOf(' ', 180);
+				if (spacePosition !== -1 && spacePosition <= 200) {
 					message = message.substring(0, spacePosition);
 				} else {
-					message = message.substring(0, 120);
+					message = message.substring(0, 200);
 				}
 				message += '…';
 			}
@@ -125,6 +125,7 @@
 				subject: this.getSubject(),
 				link: this.getLink(),
 				message: this.getMessage(),
+				full_message: this.data.message,
 				timestamp: this.getTimestamp(),
 				relativeDate: OC.Util.relativeModifiedDate(this.getTimestamp()),
 				absoluteDate: OC.Util.formatDate(this.getTimestamp())