Popover design fixes and settings update

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

apps/updatenotification/css/admin.css

@@ -3,7 +3,6 @@
 }
 
 #updatenotification div.update,
-#updatenotification ul,
 #updatenotification p:not(.inlineblock) {
 	margin-bottom: 25px;
 }

apps/updatenotification/js-src/app.js

@@ -0,0 +1,55 @@
+/**
+ * @copyright (c) 2018 Joas Schilling <coding@schilljs.com>
+ *
+ * @author Joas Schilling <coding@schilljs.com>
+ *
+ * This file is licensed under the Affero General Public License version 3 or
+ * later. See the COPYING file.
+ */
+
+/* global $, define */
+
+define(function (require) {
+	"use strict";
+
+	return {
+
+		/** @type {Vue|null} */
+		vm: null,
+
+		/**
+		 * Initialise the app
+		 */
+		initialise: function() {
+			var data = JSON.parse($('#updatenotification').attr('data-json'));
+			var Vue = require('vue');
+			var vSelect = require('vue-select');
+			Vue.component('v-select', vSelect.VueSelect);
+			Vue.mixin({
+				methods: {
+					t: function(app, text, vars, count, options) {
+						return OC.L10N.translate(app, text, vars, count, options);
+					},
+					n: function(app, textSingular, textPlural, count, vars, options) {
+						return OC.L10N.translatePlural(app, textSingular, textPlural, count, vars, options);
+					}
+				}
+			});
+			this.vm = new Vue(require('./components/root.vue'));
+			this.vm.newVersionString = data.newVersionString;
+			this.vm.lastCheckedDate = data.lastChecked;
+			this.vm.isUpdateChecked = data.isUpdateChecked;
+			this.vm.updaterEnabled = data.updaterEnabled;
+			this.vm.downloadLink = data.downloadLink;
+			this.vm.isNewVersionAvailable = data.isNewVersionAvailable;
+			this.vm.updateServerURL = data.updateServerURL;
+			this.vm.changelogURL = data.changelogURL;
+			this.vm.whatsNewData = data.whatsNew;
+			this.vm.currentChannel = data.currentChannel;
+			this.vm.channels = data.channels;
+			this.vm.notifyGroups = data.notifyGroups;
+			this.vm.isDefaultUpdateServerURL = data.isDefaultUpdateServerURL;
+			this.vm.versionIsEol = data.versionIsEol;
+		}
+	};
+});

apps/updatenotification/js-src/components/popoverMenu/popoverItem.vue

@@ -13,7 +13,7 @@
 			<p v-else-if="item.longtext">{{item.longtext}}</p>
 		</button>
 		<!-- If item.longtext is set AND the item does not have an action -->
-		<span v-else>
+		<span class="menuitem" v-else>
 			<span :class="item.icon"></span>
 			<span v-if="item.text">{{item.text}}</span>
 			<p v-else-if="item.longtext">{{item.longtext}}</p>

apps/updatenotification/js-src/webpack.config.js

@@ -0,0 +1,57 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+	entry: './js-src/init.js',
+	output: {
+		path: path.resolve(__dirname, '../js'),
+		publicPath: '/',
+		filename: 'merged.js'
+	},
+	module: {
+		rules: [
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader',
+				options: {
+					loaders: {
+					},
+					esModule: false
+					// other vue-loader options go here
+				}
+			}
+		]
+	},
+	resolve: {
+		alias: {
+			'vue-select': 'vue-select/dist/vue-select.js',
+			'vue': process.env.NODE_ENV === 'production' ? 'vue/dist/vue.min.js' : 'vue/dist/vue.js'
+		},
+		extensions: ['*', '.js', '.vue', '.json']
+	},
+	performance: {
+		hints: false
+	},
+	devtool: '#eval-source-map'
+};
+
+if (process.env.NODE_ENV === 'production') {
+	module.exports.devtool = '#source-map';
+	// http://vue-loader.vuejs.org/en/workflow/production.html
+	module.exports.plugins = (module.exports.plugins || []).concat([
+		new webpack.DefinePlugin({
+			'process.env': {
+				NODE_ENV: '"production"'
+			}
+		}),
+		new webpack.optimize.UglifyJsPlugin({
+			sourceMap: true,
+			compress: {
+				warnings: false
+			}
+		}),
+		new webpack.LoaderOptionsPlugin({
+			minimize: true
+		})
+	]);
+}

core/css/apps.scss

@@ -869,7 +869,6 @@ $popovericon-size: 16px;
 		flex: 0 0 auto;
 		> button,
 		> a,
-		> span,
 		> .menuitem {
 			cursor: pointer;
 			line-height: $popoveritem-height;

settings/src/components/popoverMenu/popoverItem.vue

@@ -23,7 +23,7 @@
 <template>
 	<li>
 		<!-- If item.href is set, a link will be directly used -->
-		<a @click="item.action" v-if="item.href" :href="(item.href) ? item.href : '#' ">
+		<a @click="item.action" v-if="item.href" :href="(item.href) ? item.href : '#' " :target="(item.target) ? item.target : '' " rel="noreferrer noopener">
 			<span :class="item.icon"></span>
 			<span v-if="item.text">{{item.text}}</span>
 			<p v-else-if="item.longtext">{{item.longtext}}</p>
@@ -35,7 +35,7 @@
 			<p v-else-if="item.longtext">{{item.longtext}}</p>
 		</button>
 		<!-- If item.longtext is set AND the item does not have an action -->
-		<span v-else>
+		<span class="menuitem" v-else>
 			<span :class="item.icon"></span>
 			<span v-if="item.text">{{item.text}}</span>
 			<p v-else-if="item.longtext">{{item.longtext}}</p>