mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #18422 from nextcloud/design/recommended-apps 

Design fixes for recommended apps
This commit is contained in:
Roeland Jago Douma 2019-12-17 12:02:55 +01:00 committed by GitHub
parent d3012bffeb 418896fee9
commit 53f94b8101
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 33 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/js/dist/recommendedapps.js vendored
View File

File diff suppressed because one or more lines are too long

2
core/js/dist/recommendedapps.js.map vendored
View File

File diff suppressed because one or more lines are too long

47
core/src/components/setup/RecommendedApps.vue
View File

@ -20,19 +20,19 @@
-->
<template>
<div class="update">
<div class="body-login-container">
<h2>{{ t('core', 'Recommended apps') }}</h2>
<p v-if="loadingApps" class="loading">
<p v-if="loadingApps" class="loading text-center">
{{ t('core', 'Loading apps …') }}
</p>
<p v-else-if="loadingAppsError" class="loading-error">
<p v-else-if="loadingAppsError" class="loading-error text-center">
{{ t('core', 'Could not fetch list of apps from the app store.') }}
</p>
<p v-else>
{{ t('core', 'Installing recommended apps …') }}
<p v-else class="text-center">
{{ t('core', 'Installing apps …') }}
</p>
<div v-for="app in recommendedApps" :key="app.id" class="app">
<img :src="customIcon(app.id)" :alt="t('core', 'Nextcloud app {app}', { app: app.name })">
<img :src="customIcon(app.id)" :alt="t('core', 'Nextcloud {app}', { app: app.name })">
<div class="info">
<h3>
{{ app.name }}
@ -40,18 +40,18 @@
<span v-else-if="app.active" class="icon icon-checkmark-white" />
</h3>
<p v-html="customDescription(app.id)" />
<p v-if="app.installationError" class="error">
{{ t('core', 'App download or installation failed') }}
<p v-if="app.installationError">
<strong>{{ t('core', 'App download or installation failed') }}</strong>
</p>
<p v-else-if="!app.isCompatible" class="error">
{{ t('core', 'Can\'t install this app because it is not compatible') }}
<p v-else-if="!app.isCompatible">
<strong>{{ t('core', 'Can\'t install this app because it is not compatible') }}</strong>
</p>
<p v-else-if="!app.canInstall" class="error">
{{ t('core', 'Can\'t install this app') }}
<p v-else-if="!app.canInstall">
<strong>{{ t('core', 'Can\'t install this app') }}</strong>
</p>
</div>
</div>
<a :href="defaultPageUrl">{{ t('core', 'Go back') }}</a>
<p class="text-center"><a :href="defaultPageUrl">{{ t('core', 'Cancel') }}</a></p>
</div>
</template>
@ -165,16 +165,26 @@ export default {
</script>
<style lang="scss" scoped>
.body-login-container {
max-width: 290px;
}
p.loading, p.loading-error {
height: 100px;
}
.text-center {
text-align: center;
}
.app {
display: flex;
flex-direction: row;
img {
height: 64px;
width: 64px;
height: 50px;
width: 50px;
filter: invert(1);
}
img, .info {
@ -182,10 +192,15 @@ p.loading, p.loading-error {
}
.info {
h3 {
h3, p {
text-align: left;
}
h3 {
color: #fff;
margin-top: 0;
}
h3 > span.icon {
display: inline-block;
}