Some code cleanup
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
parent
b4a7be20c8
commit
64c2e946f4
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<img :src="app.screenshot" width="100%" />
|
||||
<p v-if="app.internal">{{ t('settings', 'This app is shipped with the release, therefore no further information is available') }}</p>
|
||||
<app-score v-if="app.appstoreData && app.appstoreData.ratingNumOverall > 5" :score="app.appstoreData.ratingOverall"></app-score>
|
||||
<h2>
|
||||
<div v-if="!app.preview" class="icon-settings-dark"></div>
|
||||
<svg v-if="app.previewAsIcon && app.preview" width="32" height="32" viewBox="0 0 32 32">
|
||||
<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">
|
||||
<a v-if="a['@attributes'] && a['@attributes']['homepage']" :href="a['@attributes']['homepage']">{{ a['@value'] }}</a>
|
||||
<span v-else>{{ a['@value'] }}</span>
|
||||
|
||||
<span v-for="(a, index) in author">
|
||||
<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>
|
||||
</div>
|
||||
<div class="app-licence" v-if="licence">{{ licence }}</div>
|
||||
<div class="actions">
|
||||
<div class="warning hidden"></div>
|
||||
<input v-if="app.update" class="update" type="button" :value="t('settings', 'Update to %s', app.update)" />
|
||||
<input v-if="app.canUnInstall" class="uninstall" type="button" :value="t('settings', 'Remove')" />
|
||||
<input v-if="app.active" class="enable" type="button" :value="t('settings','Disable')" v-on:click="disable(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 && app.needsDownload" class="enable needs-download" type="button" :value="t('settings', 'Enable')" :disabled="!app.canInstall"/>
|
||||
</div>
|
||||
<div class="app-groups" v-if="app.active">
|
||||
<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>
|
||||
<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 class="actions-buttons">
|
||||
<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')" :disabled="installing || loading(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" class="enable" type="button" :value="enableButtonText" v-on:click="enable(app.id)" v-tooltip.auto="enableButtonTooltip" :disabled="!app.canInstall || installing || loading(app.id)" />
|
||||
</div>
|
||||
<div class="app-groups">
|
||||
<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>
|
||||
|
||||
<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() {
|
||||
return this.$store.getters.getGroups
|
||||
.filter(group => group.id !== 'disabled')
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
appstoreUrl() {
|
||||
return `https://apps.nextcloud.com/apps/${this.app.id}`;
|
||||
},
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -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 this.bundleApps(id).filter(app => !app.active).length === 0;
|
||||
return self.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)});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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) => {
|
||||
|
|
|
|||
|
|
@ -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-sidebar" v-if="id && currentApp">
|
||||
<app-details :category="category" :app="currentApp"></app-details>
|
||||
<div id="app-content" class="app-settings-content" :class="{ 'with-app-sidebar': currentApp, 'icon-loading': loadingList }">
|
||||
<app-list :category="category" :app="currentApp" :search="search"></app-list>
|
||||
<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 );
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue