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