wire the frontend

Signed-off-by: Arthur Schiwon <blizzz@arthur-schiwon.de>

3 files changed, 129 insertions, 9 deletions

diff --git a/core/Controller/WhatsNewController.php b/core/Controller/WhatsNewController.php
index d3331651693..c3a6d28cea2 100644
--- a/core/Controller/WhatsNewController.php
+++ b/core/Controller/WhatsNewController.php
@@ -29,6 +29,7 @@ use OC\Updater\ChangesCheck;
 use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\DataResponse;
+use OCP\Defaults;
 use OCP\IConfig;
 use OCP\IRequest;
 use OCP\IUserManager;
@@ -45,6 +46,8 @@ class WhatsNewController extends OCSController {
 	private $whatsNewService;
 	/** @var IFactory */
 	private $langFactory;
+	/** @var Defaults */
+	private $defaults;
 
 	public function __construct(
 		string $appName,
@@ -55,13 +58,15 @@ class WhatsNewController extends OCSController {
 		Manager $keyManager,
 		IConfig $config,
 		ChangesCheck $whatsNewService,
-		IFactory $langFactory
+		IFactory $langFactory,
+		Defaults $defaults
 	) {
 		parent::__construct($appName, $request, $capabilitiesManager, $userSession, $userManager, $keyManager);
 		$this->config = $config;
 		$this->userSession = $userSession;
 		$this->whatsNewService = $whatsNewService;
 		$this->langFactory = $langFactory;
+		$this->defaults = $defaults;
 	}
 
 	/**
@@ -82,7 +87,11 @@ class WhatsNewController extends OCSController {
 		try {
 			$iterator = $this->langFactory->getLanguageIterator();
 			$whatsNew = $this->whatsNewService->getChangesForVersion($currentVersion);
-			$resultData = ['changelogURL' => $whatsNew['changelogURL']];
+			$resultData = [
+				'changelogURL' => $whatsNew['changelogURL'],
+				'product' => $this->defaults->getName(),
+				'version' => $currentVersion,
+			];
 			do {
 				$lang = $iterator->current();
 				if(isset($whatsNew['whatsNew'][$lang])) {
diff --git a/core/css/whatsnew.scss b/core/css/whatsnew.scss
new file mode 100644
index 00000000000..1c2ab08333a
--- /dev/null
+++ b/core/css/whatsnew.scss
@@ -0,0 +1,31 @@
+/**
+ * @copyright Copyright (c) 2018, Arthur Schiwon <blizzz@arthur-schiwon.de>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ */
+
+.whatsNewPopover {
+  bottom: 35px !important;
+  left: 15px !important;
+  width: 270px;
+  background-color: var(--color-background-dark);
+}
+
+.whatsNewPopover p {
+  width: auto !important;
+}
+
+.whatsNewPopover .caption {
+  font-weight: bolder;
+  cursor: auto !important;
+}
+
+.whatsNewPopover .icon-close {
+  position: absolute;
+  right: 0;
+}
+
+.whatsNewPopover::after {
+  content: none;
+}
diff --git a/core/js/public/whatsnew.js b/core/js/public/whatsnew.js
index dc5862e8572..20a871ada27 100644
--- a/core/js/public/whatsnew.js
+++ b/core/js/public/whatsnew.js
@@ -14,10 +14,13 @@
 
 		query: function(options) {
 			options = options || {};
+			var dismissOptions = options.dismiss || {};
 			$.ajax({
 				type: 'GET',
 				url: options.url || OC.linkToOCS('core', 2) + 'whatsnew?format=json',
-				success: options.success || this._onQuerySuccess,
+				success: options.success || function(data, statusText, xhr) {
+					OCP.WhatsNew._onQuerySuccess(data, statusText, xhr, dismissOptions);
+				},
 				error: options.error || this._onQueryError
 			});
 		},
@@ -31,20 +34,97 @@
 				success: options.success || this._onDismissSuccess,
 				error: options.error || this._onDismissError
 			});
+			// remove element immediately
+			$('.whatsNewPopover').remove();
 		},
 
-		_onQuerySuccess: function(data, statusText) {
-			console.debug('querying Whats New data was successful: ' + data || statusText);
+		_onQuerySuccess: function(data, statusText, xhr, dismissOptions) {
+			console.debug('querying Whats New data was successful: ' + statusText);
 			console.debug(data);
+
+			if(xhr.status !== 200) {
+				return;
+			}
+
+			var item, menuItem, text, icon;
+
+			var div = document.createElement('div');
+			div.classList.add('popovermenu', 'open', 'whatsNewPopover', 'menu-left');
+
+			var list = document.createElement('ul');
+
+			// header
+			item = document.createElement('li');
+			menuItem = document.createElement('span');
+			menuItem.className = "menuitem";
+
+			text = document.createElement('span');
+			text.innerText = t('core', 'New in') + ' ' + data['ocs']['data']['product'];
+			text.className = 'caption';
+			menuItem.appendChild(text);
+
+			icon = document.createElement('span');
+			icon.className = 'icon-close';
+			icon.onclick = function () {
+				OCP.WhatsNew.dismiss(data['ocs']['data']['version'], dismissOptions);
+			};
+			menuItem.appendChild(icon);
+
+			item.appendChild(menuItem);
+			list.appendChild(item);
+
+			// Highlights
+			for (var i in data['ocs']['data']['whatsNew']['regular']) {
+				var whatsNewTextItem = data['ocs']['data']['whatsNew']['regular'][i];
+				item = document.createElement('li');
+
+				menuItem = document.createElement('span');
+				menuItem.className = "menuitem";
+
+				icon = document.createElement('span');
+				icon.className = 'icon-star-dark';
+				menuItem.appendChild(icon);
+
+				text = document.createElement('p');
+				text.innerHTML = _.escape(whatsNewTextItem);
+				menuItem.appendChild(text);
+
+				item.appendChild(menuItem);
+				list.appendChild(item);
+			}
+
+			// Changelog URL
+			if(!_.isUndefined(data['ocs']['data']['changelogURL'])) {
+				item = document.createElement('li');
+
+				menuItem = document.createElement('a');
+				menuItem.href = data['ocs']['data']['changelogURL'];
+				menuItem.rel = 'noreferrer noopener';
+				menuItem.target = '_blank';
+
+				icon = document.createElement('span');
+				icon.className = 'icon-link';
+				menuItem.appendChild(icon);
+
+				text = document.createElement('span');
+				text.innerText = t('core', 'View changelog');
+				menuItem.appendChild(text);
+
+				item.appendChild(menuItem);
+				list.appendChild(item);
+			}
+
+			div.appendChild(list);
+			document.body.appendChild(div);
 		},
 
-		_onQueryError: function (o, t, e) {
-			console.debug(o);
-			console.debug('querying Whats New Data resulted in an error: ' + t +e);
+		_onQueryError: function (x, t, e) {
+			console.debug('querying Whats New Data resulted in an error: ' + t + e);
+			console.debug(x);
 		},
 
 		_onDismissSuccess: function(data) {
-			console.debug('dismissing Whats New data was successful: ' + data);
+			//noop
 		},
 
 		_onDismissError: function (data) {