Some code cleanup

Signed-off-by: Julius Härtl <jus@bitgrid.net>

settings/css/settings.scss

@@ -784,12 +784,34 @@ span.version {
 	.app-score-image {
 		height: 14px;
 	}
+	.actions {
+		margin-top: 10px;
+	}
 }
 
 #app-sidebar #app-details-view {
-	.app-description p {
+	h2 {
+		.icon-settings-dark,
+		svg {
+			display: inline-block;
+			width: 16px;
+			height: 16px;
+			margin-right: 10px;
+			opacity: .7;
+		}
+	}
+	.app-level {
 		margin-bottom: 10px;
 	}
+	.app-author, .app-licence {
+		color: $color-text-details;
+	}
+	.app-dependencies {
+		margin: 10px 0;
+	}
+	.app-description p {
+		margin: 10px 0;
+	}
 	.close {
 		position: absolute;
 		top: 0;
@@ -797,6 +819,9 @@ span.version {
 		padding: 14px;
 		opacity: 0.5;
 		z-index: 1;
+	}.
+	.actions {
+		display: flex;
 	}
 }
 
@@ -842,7 +867,7 @@ span.version {
 	}
 }
 /* hide app version and level on narrower screens */
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 900px) {
 	#apps-list.installed {
 		.app-version, .app-level {
 			display: none !important;
@@ -850,7 +875,7 @@ span.version {
 	}
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 500px) {
 	#apps-list.installed .app-groups {
 		display: none !important;
 	}
@@ -932,30 +957,15 @@ span.version {
 	list-style-position: inside;
 }
 
-/* Transition to complete width! */
-
-.app {
-	&:hover, &:active {
-		max-width: inherit;
-	}
-}
-
 .appslink {
 	text-decoration: underline;
 }
 
-.score {
-	color: #666;
-	font-weight: bold;
-	font-size: 0.8em;
-}
-
-.appinfo .documentation {
-	margin-top: 1em;
-	margin-bottom: 1em;
-}
 
 #apps-list, #apps-list-search {
+	.section {
+		cursor: pointer;
+	}
 	&.installed {
 		display: table;
 		width: 100%;
@@ -974,6 +984,9 @@ span.version {
 				padding: 6px;
 				box-sizing: border-box;
 			}
+			&.selected {
+				background-color: nc-darken($color-main-background, 3%);
+			}
 		}
 		.groups-enable {
 			margin-top: 0;
@@ -995,6 +1008,14 @@ span.version {
 			background-size: cover;
 			display: inline-block;
 		}
+		.actions {
+			text-align: right;
+			.icon-loading-small {
+				display: inline-block;
+				top: 4px;
+				margin-right: 10px;
+			}
+		}
 	}
 	&:not(.installed) .app-image-icon svg {
 		position: absolute;
@@ -1014,9 +1035,6 @@ span.version {
 		position: relative;
 		flex: 0 0 auto;
 
-		&.selected {
-			background-color: nc-darken($color-main-background, 6%);
-		}
 		h2.app-name {
 			display: block;
 			margin: 8px 0;
@@ -1072,10 +1090,6 @@ span.version {
 	}
 }
 
-.installed .actions {
-	text-align: right;
-}
-
 /* LOG */
 #log {
 	white-space: normal;

settings/src/components/appDetails.vue

@@ -23,40 +23,53 @@
 <template>
 	<div id="app-details-view" style="padding: 20px;">
 		<a class="close icon-close" href="#" v-on:click="hideAppDetails"><span class="hidden-visually">Close</span></a>
-		<h2>{{ app.name }}</h2>
+		<h2>
-		<img :src="app.screenshot" width="100%" />
+			<div v-if="!app.preview" class="icon-settings-dark"></div>
-		<p v-if="app.internal">{{ t('settings', 'This app is shipped with the release, therefore no further information is available') }}</p>
+			<svg v-if="app.previewAsIcon && app.preview" width="32" height="32" viewBox="0 0 32 32">
-		<app-score v-if="app.appstoreData && app.appstoreData.ratingNumOverall > 5" :score="app.appstoreData.ratingOverall"></app-score>
+				<defs><filter :id="filterId"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
+				<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" :filter="filterUrl" :xlink:href="app.preview" class="app-icon"></image>
+			</svg>
+			{{ app.name }}</h2>
+		<img v-if="app.screenshot" :src="app.screenshot" width="100%" />
+		<div class="app-level">
+		<span class="official icon-checkmark" v-if="app.level === 200"
+			  v-tooltip.auto="t('settings', 'Official apps are developed by and within the community. They offer central functionality and are ready for production use.')">
+				{{ t('settings', 'Official') }}</span>
+			<app-score v-if="app.appstoreData && app.appstoreData.ratingNumOverall > 5" :score="app.appstoreData.ratingOverall"></app-score>
+		</div>
+
 		<div class="app-author" v-if="author">
 			{{ t('settings', 'by') }}
-			<span v-for="a in author">
+			<span v-for="(a, index) in author">
-				<a v-if="a['@attributes'] && a['@attributes']['homepage']" :href="a['@attributes']['homepage']">{{ a['@value'] }}</a>
+				<a v-if="a['@attributes'] && a['@attributes']['homepage']" :href="a['@attributes']['homepage']">{{ a['@value'] }}</a><span v-else-if="a['@value']">{{ a['@value'] }}</span><span v-else>{{ a }}</span><span v-if="index+1 < author.length">, </span>
-				<span v-else>{{ a['@value'] }}</span>
-				 &nbsp;
 			</span>
 		</div>
 		<div class="app-licence" v-if="licence">{{ licence }}</div>
 		<div class="actions">
-			<div class="warning hidden"></div>
+			<div class="actions-buttons">
-			<input v-if="app.update" class="update" type="button" :value="t('settings', 'Update to %s', app.update)" />
+				<input v-if="app.update" class="update" type="button" :value="t('settings', 'Update to {version}', {version: app.update})" :disabled="installing || loading(app.id)"/>
-			<input v-if="app.canUnInstall" class="uninstall" type="button" :value="t('settings', 'Remove')" />
+				<input v-if="app.canUnInstall" class="uninstall" type="button" :value="t('settings', 'Remove')" :disabled="installing || loading(app.id)"/>
-			<input v-if="app.active" class="enable" type="button" :value="t('settings','Disable')" v-on:click="disable(app.id)" />
+				<input v-if="app.active" class="enable" type="button" :value="t('settings','Disable')" v-on:click="disable(app.id)" :disabled="installing || loading(app.id)" />
-			<input v-if="!app.active && !app.needsDownload" class="enable" type="button" :value="t('settings','Enable')" v-on:click="enable(app.id)" :disabled="!app.canInstall" />
+				<input v-if="!app.active" class="enable" type="button" :value="enableButtonText" v-on:click="enable(app.id)" v-tooltip.auto="enableButtonTooltip" :disabled="!app.canInstall || installing || loading(app.id)" />
-			<input v-if="!app.active && app.needsDownload" class="enable needs-download" type="button" :value="t('settings', 'Enable')" :disabled="!app.canInstall"/>
+			</div>
-		</div>
+			<div class="app-groups">
-		<div class="app-groups" v-if="app.active">
+				<div class="groups-enable" v-if="app.active && canLimitToGroups(app)">
-			<div class="groups-enable" v-if="app.active && canLimitToGroups(app)">
+					<input type="checkbox" :value="app.id" v-model="groupCheckedAppsData" v-on:change="setGroupLimit" class="groups-enable__checkbox checkbox" :id="prefix('groups_enable', app.id)">
-				<input type="checkbox" :value="app.id" v-model="groupCheckedAppsData" v-on:change="setGroupLimit" class="groups-enable__checkbox checkbox" :id="prefix('groups_enable', app.id)">
+					<label :for="prefix('groups_enable', app.id)">Auf Gruppen beschränken</label>
-				<label :for="prefix('groups_enable', app.id)">Auf Gruppen beschränken</label>
+					<input type="hidden" class="group_select" title="Alle" value="">
-				<multiselect v-if="isLimitedToGroups(app)" :options="groups" :value="appGroups" @select="addGroupLimitation" @remove="removeGroupLimitation"
+					<multiselect v-if="isLimitedToGroups(app)" :options="groups" :value="appGroups" @select="addGroupLimitation" @remove="removeGroupLimitation"
-							 :placeholder="t('settings', 'Limit app usage to groups')"
+								 :placeholder="t('settings', 'Limit app usage to groups')"
-							 label="name" track-by="id" class="multiselect-vue"
+								 label="name" track-by="id" class="multiselect-vue"
-							 :multiple="true" :close-on-select="false">
+								 :multiple="true" :close-on-select="false">
-					<span slot="noResult">{{t('settings', 'No results')}}</span>
+						<span slot="noResult">{{t('settings', 'No results')}}</span>
-				</multiselect>
+					</multiselect>
+				</div>
 			</div>
 		</div>
+
 		<p class="documentation">
+			<a class="appslink" :href="appstoreUrl" v-if="!app.internal" target="_blank" rel="noreferrer noopener">Im Store anzeigen ↗</a>
+
 			<a class="appslink" v-if="app.website" :href="app.website" target="_blank" rel="noreferrer noopener">{{ t('settings', 'Visit website') }} ↗</a>
 			<a class="appslink" v-if="app.bugs" :href="app.bugs" target="_blank" rel="noreferrer noopener">{{ t('settings', 'Report a bug') }} ↗</a>
 
@@ -85,15 +98,26 @@ import Multiselect from 'vue-multiselect';
 import AppScore from './appList/appScore';
 import AppManagement from './appManagement';
 import prefix from './prefixMixin';
+import SvgFilterMixin from './svgFilterMixin';
 
 export default {
-	mixins: [AppManagement, prefix],
+	mixins: [AppManagement, prefix, SvgFilterMixin],
 	name: 'appDetails',
 	props: ['category', 'app'],
 	components: {
 		Multiselect,
 		AppScore
 	},
+	data() {
+		return {
+			groupCheckedAppsData: false,
+		}
+	},
+	mounted() {
+		if (this.app.groups.length > 0) {
+			this.groupCheckedAppsData = true;
+		}
+	},
 	methods: {
 		hideAppDetails() {
 			this.$router.push({
@@ -103,13 +127,13 @@ export default {
 		},
 	},
 	computed: {
-		groups() {
+		appstoreUrl() {
-			return this.$store.getters.getGroups
+			return `https://apps.nextcloud.com/apps/${this.app.id}`;
-				.filter(group => group.id !== 'disabled')
-				.sort((a, b) => a.name.localeCompare(b.name));
 		},
 		licence() {
-			return this.app.license + t('settings', '-licensed');
+			if (this.app.licence)
+				return ('' + this.app.licence).toUpperCase() + t('settings', '-licensed');
+			return null;
 		},
 		author() {
 			if (typeof this.app.author === 'string') {
@@ -122,8 +146,17 @@ export default {
 			if (this.app.author['@value']) {
 				return [this.app.author];
 			}
+			console.log(this.app.author);
 			return this.app.author;
 		},
+		appGroups() {
+			return this.app.groups.map(group => {return {id: group, name: group}});
+		},
+		groups() {
+			return this.$store.getters.getGroups
+				.filter(group => group.id !== 'disabled')
+				.sort((a, b) => a.name.localeCompare(b.name));
+		},
 		renderMarkdown() {
 			// TODO: bundle marked as well
 			var renderer = new window.marked.Renderer();

settings/src/components/appList.vue

@@ -21,8 +21,7 @@
   -->
 
 <template>
-	<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': app, 'icon-loading': loading }">
+	<div id="app-content-inner">
-
 		<div id="apps-list" :class="{installed: (useBundleView || useListView), store: useAppStoreView}">
 			<template v-if="useListView">
 				<app-item v-for="app in apps" :key="app.id" :app="app" :category="category" />
@@ -115,14 +114,15 @@ export default {
 			return (this.category === 'app-bundles');
 		},
 		allBundlesEnabled() {
+			let self = this;
 			return function(id) {
-				console.log(this.bundleApps(id).filter(app => !app.active));
+				return self.bundleApps(id).filter(app => !app.active).length === 0;
-				return this.bundleApps(id).filter(app => !app.active).length === 0;
 			}
 		},
 		bundleToggleText() {
+			let self = this;
 			return function(id) {
-				if (this.allBundlesEnabled(id)) {
+				if (self.allBundlesEnabled(id)) {
 					return t('settings', 'Disable all');
 				}
 				return t('settings', 'Enable all');
@@ -131,14 +131,13 @@ export default {
 	},
 	methods: {
 		toggleBundle(id) {
-			if (this.allBundlesEnabled) {
+			if (this.allBundlesEnabled(id)) {
 				return this.disableBundle(id);
 			}
 			return this.enableBundle(id);
 		},
 		enableBundle(id) {
 			let apps = this.bundleApps(id).map(app => app.id);
-			console.log(apps);
 			this.$store.dispatch('enableApp', { appId: apps, groups: [] })
 				.catch((error) => { console.log(error); OC.Notification.show(error)});
 		},

settings/src/components/appList/appItem.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div class="section" v-bind:class="{ selected: isSelected }">
+	<div class="section" v-bind:class="{ selected: isSelected }" v-on:click="showAppDetails">
 		<div class="app-image app-image-icon" v-on:click="showAppDetails">
 			<div v-if="!app.preview" class="icon-settings-dark"></div>
 			<img v-if="!app.previewAsIcon && app.preview && listView" :src="app.preview"  width="100%" />
@@ -37,29 +37,16 @@
 			{{ app.name }}
 		</div>
 		<div class="app-summary" v-if="!listView">{{ app.summary }}</div>
-		<div class="app-version" v-if="listView">{{ app.version }}</div>
+		<div class="app-version" v-if="listView">
+			<span v-if="app.version">{{ app.version }}</span>
+			<span v-else-if="app.appstoreData.releases[0].version">{{ app.appstoreData.releases[0].version }}</span>
+		</div>
 
 		<div class="app-level">
 			<span class="official icon-checkmark" v-if="app.level === 200"
 				  v-tooltip.auto="t('settings', 'Official apps are developed by and within the community. They offer central functionality and are ready for production use.')">
 				{{ t('settings', 'Official') }}</span>
 			<app-score v-if="!listView" :score="app.score"></app-score>
-			<a :href="appstoreUrl" v-if="!app.internal && listView">Im Store anzeigen ↗</a>
-		</div>
-
-
-		<div class="app-groups" v-if="listView">
-			<div class="groups-enable" v-if="app.active && canLimitToGroups(app)">
-				<input type="checkbox" :value="app.id" v-model="groupCheckedAppsData" v-on:change="setGroupLimit" class="groups-enable__checkbox checkbox" :id="prefix('groups_enable', app.id)">
-				<label :for="prefix('groups_enable', app.id)">Auf Gruppen beschränken</label>
-				<input type="hidden" class="group_select" title="Alle" value="">
-				<multiselect v-if="isLimitedToGroups(app)" :options="groups" :value="appGroups" @select="addGroupLimitation" @remove="removeGroupLimitation"
-							 :placeholder="t('settings', 'Limit app usage to groups')"
-							 label="name" track-by="id" class="multiselect-vue"
-							 :multiple="true" :close-on-select="false">
-					<span slot="noResult">{{t('settings', 'No results')}}</span>
-				</multiselect>
-			</div>
 		</div>
 
 		<div class="actions">
@@ -77,10 +64,11 @@
 	import Multiselect from 'vue-multiselect';
 	import AppScore from './appScore';
 	import AppManagement from '../appManagement';
+	import SvgFilterMixin from '../svgFilterMixin';
 
 	export default {
 		name: 'appItem',
-		mixins: [AppManagement],
+		mixins: [AppManagement, SvgFilterMixin],
 		props: {
 			app: {},
 			category: {},
@@ -101,60 +89,23 @@
 		data() {
 			return {
 				isSelected: false,
-				groupCheckedAppsData: false,
 				scrolled: false,
-				filterId: '',
 			};
 		},
 		mounted() {
-			if (this.app.groups.length > 0) {
-				this.groupCheckedAppsData = true;
-			}
 			this.isSelected = (this.app.id === this.$route.params.id);
-			this.filterId = 'invertIconApps' + Math.floor((Math.random() * 100 )) + new Date().getSeconds() + new Date().getMilliseconds();
 		},
 		computed: {
-			loading() {
+
-				let self = this;
-				return function(id) {
-					return self.$store.getters.loading(id);
-				}
-			},
-			installing() {
-				return this.$store.getters.loading('install');
-			},
-			filterUrl() {
-				return `url(#${this.filterId})`;
-			},
-			appstoreUrl() {
-				return `https://apps.nextcloud.com/apps/${this.app.id}`;
-			},
-			appGroups() {
-				return this.app.groups.map(group => {return {id: group, name: group}});
-			},
-			groups() {
-				return this.$store.getters.getGroups
-					.filter(group => group.id !== 'disabled')
-					.sort((a, b) => a.name.localeCompare(b.name));
-			},
-			enableButtonText() {
-				if (this.app.needsDownload) {
-					return t('settings','Download and enable');
-				}
-				return t('settings','Enable');
-			},
-			enableButtonTooltip() {
-				if (this.app.needsDownload) {
-					return t('settings','The app will be downloaded from the app store');
-				}
-				return false;
-			}
 		},
 		watchers: {
 
 		},
 		methods: {
-			showAppDetails() {
+			showAppDetails(event) {
+				if (event.currentTarget.tagName === 'INPUT' || event.currentTarget.tagName === 'A') {
+					return;
+				}
 				this.$router.push({
 					name: 'apps-details',
 					params: {category: this.category, id: this.app.id}

settings/src/components/appManagement.vue

@@ -31,6 +31,27 @@
 			appGroups() {
 				return this.app.groups.map(group => {return {id: group, name: group}});
 			},
+			loading() {
+				let self = this;
+				return function(id) {
+					return self.$store.getters.loading(id);
+				}
+			},
+			installing() {
+				return this.$store.getters.loading('install');
+			},
+			enableButtonText() {
+				if (this.app.needsDownload) {
+					return t('settings','Download and enable');
+				}
+				return t('settings','Enable');
+			},
+			enableButtonTooltip() {
+				if (this.app.needsDownload) {
+					return t('settings','The app will be downloaded from the app store');
+				}
+				return false;
+			}
 		},
 		methods: {
 			isLimitedToGroups(app) {

settings/src/store/apps.js

@@ -205,7 +205,12 @@ const actions = {
 							}
 						})
 						.catch((error) => {
-							context.commit('setError', {appId: apps, error: t('settings', 'Error: This app can not be enabled because it makes the server unstable')});
+							if (!Array.isArray(appId)) {
+								context.commit('setError', {
+									appId: apps,
+									error: t('settings', 'Error: This app can not be enabled because it makes the server unstable')
+								});
+							}
 						});
 				})
 				.catch((error) => {

settings/src/views/Apps.vue

@@ -23,9 +23,11 @@
 <template>
 	<div id="app">
 		<app-navigation :menu="menu" />
-		<app-list :category="category" :app="currentApp" :search="search"></app-list>
+		<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': currentApp, 'icon-loading': loadingList }">
-		<div id="app-sidebar" v-if="id && currentApp">
+			<app-list :category="category" :app="currentApp" :search="search"></app-list>
-			<app-details :category="category" :app="currentApp"></app-details>
+			<div id="app-sidebar" v-if="id && currentApp">
+				<app-details :category="category" :app="currentApp"></app-details>
+			</div>
 		</div>
 	</div>
 </template>
@@ -98,6 +100,9 @@ export default {
 		loading() {
 			return this.$store.getters.loading('categories');
 		},
+		loadingList() {
+			return this.$store.getters.loading('list');
+		},
 		currentApp() {
 			return this.apps.find(app => app.id === this.id );
 		},