feat: update addon card design

ICIJ · Sep 3, 2024 · 219ce63 · 219ce63
1 parent 26077fd
commit 219ce63
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 25 deletions.
diff --git a/src/components/Addon/AddonCard.vue b/src/components/Addon/AddonCard.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import AddonCardActions from '@/components/Addon/AddonCardActions'
 import AddonCardDetails from '@/components/Addon/AddonCardDetails'
@@ -12,8 +11,6 @@ const props = defineProps({
   description: { type: String, required: true },
   url: { type: String, required: true }
 })
-const emit = defineEmits(['install', 'update', 'uninstall'])
-const { t } = useI18n()
 
 const shouldInstall = computed(() => {
   return props.version === null

diff --git a/src/components/Addon/AddonCardActions.vue b/src/components/Addon/AddonCardActions.vue
@@ -1,9 +1,7 @@
 <script setup>
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ButtonIcon from '@/components/Button/ButtonIcon'
-import TextTruncate from '@/components/Text/TextTruncate'
 
 const props = defineProps({
   shouldInstall: { type: Boolean },
@@ -17,7 +15,6 @@ const { t } = useI18n()
 const versionLabel = t('addonCard.version', { v: props.version })
 const installLabel = t('addonCard.install', { v: props.recommendedVersion })
 const updateLabel = t('addonCard.update', { v: props.recommendedVersion })
-const installedLabel = t('addonCard.installed')
 const uninstallLabel = t('addonCard.uninstall')
 const installAddon = () => {
   emit('install')
@@ -32,30 +29,32 @@ const uninstallAddon = () => {
 
 <template>
   <div class="addon-card-actions d-flex flex-column align-items-end gap-2">
-    <button-icon v-if="shouldInstall" icon-left="cloud-arrow-down" variant="action" class="flex-grow-0">{{
-      installLabel
-    }}</button-icon>
+    <button-icon
+      v-if="shouldInstall"
+      icon-left="cloud-arrow-down"
+      variant="action"
+      class="flex-grow-0"
+      @click="installAddon"
+      >{{ installLabel }}</button-icon
+    >
     <template v-else>
+      <span v-if="version" class="addon-card-actions__text text-secondary-emphasis text-nowrap">{{
+        versionLabel
+      }}</span>
       <button-icon
+        icon-left="trash"
+        variant="outline-secondary"
+        class="addon-card__uninstall"
+        @click="uninstallAddon"
+        >{{ uninstallLabel }}</button-icon
+      ><button-icon
         v-if="shouldUpdate"
         icon-left="arrows-clockwise"
         variant="action"
         class="flex-grow-0"
         @click="updateAddon"
         >{{ updateLabel }}</button-icon
-      ><em v-else class="addon-card-actions__text text-nowrap text-secondary-emphasis" @click="installAddon">{{
-        installedLabel
-      }}</em>
-      <button-icon
-        icon-left="trash"
-        variant="outline-secondary"
-        class="addon-card__uninstall"
-        @click="uninstallAddon"
-        >{{ uninstallLabel }}</button-icon
       >
-      <span v-if="version" class="addon-card-actions__text text-secondary-emphasis text-nowrap">{{
-        versionLabel
-      }}</span>
     </template>
   </div>
 </template>

diff --git a/src/components/Addon/AddonCardDetails.vue b/src/components/Addon/AddonCardDetails.vue
@@ -1,10 +1,7 @@
 <script setup>
-import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import ButtonIcon from '@/components/Button/ButtonIcon'
 import TextTruncate from '@/components/Text/TextTruncate'
-import AddonCardActions from '@/components/Addon/AddonCardActions'
 
 const props = defineProps({
   title: { type: String, required: true },

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -15,7 +15,6 @@
     "homepage":"Homepage:",
     "install": "Install {v}",
     "update":"Update to {v}",
-    "installed": "Installed",
     "uninstall":"Uninstall"
   },
   "appModalHeader": {