diff options
| -rw-r--r-- | apps/settings/css/settings.scss | 6 | ||||
| -rw-r--r-- | apps/settings/src/components/AppList/AppScore.vue | 74 |
2 files changed, 61 insertions, 19 deletions
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss index dbd2caf4059..c77a420e8d4 100644 --- a/apps/settings/css/settings.scss +++ b/apps/settings/css/settings.scss @@ -594,12 +594,6 @@ span.version { color: var(--color-text-maxcontrast); } -.app-score { - position: relative; - top: 4px; - opacity: .5; -} - .app-settings-content { #searchresults { display: none; diff --git a/apps/settings/src/components/AppList/AppScore.vue b/apps/settings/src/components/AppList/AppScore.vue index 69290645ef9..f576a471ef6 100644 --- a/apps/settings/src/components/AppList/AppScore.vue +++ b/apps/settings/src/components/AppList/AppScore.vue @@ -2,8 +2,9 @@ - @copyright Copyright (c) 2018 Julius Härtl <jus@bitgrid.net> - - @author Julius Härtl <jus@bitgrid.net> + - @author Ferdinand Thiessen <opensource@fthiessen.de> - - - @license GNU AGPL version 3 or any later version + - @license AGPL-3.0-or-later - - This program is free software: you can redistribute it and/or modify - it under the terms of the GNU Affero General Public License as @@ -21,22 +22,69 @@ --> <template> - <img :src="scoreImage" :alt="t('settings', 'Rating: {score}/10', {score:appScore})" class="app-score-image"> + <span role="img" + :aria-label="title" + :title="title" + class="app-score__wrapper"> + <NcIconSvgWrapper v-for="index in fullStars" + :key="`full-star-${index}`" + :path="mdiStar" + inline /> + <NcIconSvgWrapper v-if="hasHalfStar" :path="mdiStarHalfFull" inline /> + <NcIconSvgWrapper v-for="index in emptyStars" + :key="`empty-star-${index}`" + :path="mdiStarOutline" + inline /> + </span> </template> -<script> -import { imagePath } from '@nextcloud/router' +<script lang="ts"> +import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js' +import { mdiStar, mdiStarHalfFull, mdiStarOutline } from '@mdi/js' +import { translate as t } from '@nextcloud/l10n' +import { defineComponent } from 'vue' -export default { +export default defineComponent({ name: 'AppScore', - props: ['score'], - computed: { - appScore() { - return Math.round(this.score * 10) + components: { + NcIconSvgWrapper, + }, + props: { + score: { + type: Number, + required: true, }, - scoreImage() { - const imageName = 'rating/s' + this.appScore + '.svg' - return imagePath('core', imageName) + }, + setup() { + return { + mdiStar, + mdiStarHalfFull, + mdiStarOutline, } }, -} + computed: { + title() { + const appScore = (this.score * 5).toFixed(1) + return t('settings', 'Community rating: {score}/5', { score: appScore }) + }, + fullStars() { + return Math.floor(this.score * 5 + 0.25) + }, + emptyStars() { + return Math.min(Math.floor((1 - this.score) * 5 + 0.25), 5 - this.fullStars) + }, + hasHalfStar() { + return (this.fullStars + this.emptyStars) < 5 + }, + }, +}) </script> +<style scoped> +.app-score__wrapper { + display: inline-flex; + color: var(--color-favorite, #a08b00); + + > * { + vertical-align: text-bottom; + } +} +</style> |