Adopt Changelog.vue page to vuetify 2 #248

knutschsoft · Jan 10, 2025 · 87e64a4 · 87e64a4
1 parent 03c8cc2
commit 87e64a4
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/web/assets/js/components/Changelog.vue b/web/assets/js/components/Changelog.vue
@@ -5,28 +5,34 @@
             collapse-key="changelog-swapp"
             is-visible-by-default
         >
-            <b-list-group>
+            <v-list class="p-0">
                 <template v-for="item in items">
-                    <b-list-group-item
-                        class="d-flex justify-content-between align-items-center"
-                        variant="dark"
+                    <v-list-item
+                        dense
+                        class="grey lighten-2 p-2 mt-0"
                         :key="item.header"
                     >
-                        <div>
-                            <span class="font-weight-bold">{{ item.header }}</span>
-                            <b-badge v-if="hasItemNewBadge(item.header)" variant="primary">
-                                Neu
-                            </b-badge>
-                        </div>
-                        <b-avatar
+                        <v-list-item-avatar
                             v-if="item.avatarText"
-                            variant="light"
+                            color="white"
                             v-html="item.avatarText"
                             :title="item.avatarTitle ?? ''"
                         />
-                    </b-list-group-item>
-                    <b-list-group-item
+                        <v-list-item-content>
+                            <v-badge
+                                v-if="hasItemNewBadge(item.header)"
+                                content="Neu"
+                                inline
+                                right
+                            >
+                                <div class="mr-auto font-weight-bold">{{ item.header }}</div>
+                            </v-badge>
+                            <div v-else class="font-weight-bold">{{ item.header }}</div>
+                        </v-list-item-content>
+                    </v-list-item>
+                    <v-list-item
                         :key="`${item.header}2`"
+                        class="py-3"
                     >
                         <ul class="pl-3 mb-0">
                             <li v-for="(entry,entryKey) in item.entries" :key="`${item.header}-${entryKey}`">
@@ -49,9 +55,9 @@
                                 />
                             </li>
                         </ul>
-                    </b-list-group-item>
+                    </v-list-item>
                 </template>
-            </b-list-group>
+            </v-list>
         </ContentCollapse>
     </div>
 </template>

diff --git a/web/components.d.ts b/web/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     VAlert: typeof import('vuetify/lib')['VAlert']
     VApp: typeof import('vuetify/lib')['VApp']
     VAvatar: typeof import('vuetify/lib')['VAvatar']
+    VBadge: typeof import('vuetify/lib')['VBadge']
     VBtn: typeof import('vuetify/lib')['VBtn']
     VCard: typeof import('vuetify/lib')['VCard']
     VCardSubtitle: typeof import('vuetify/lib')['VCardSubtitle']
@@ -35,6 +36,7 @@ declare module 'vue' {
     VList: typeof import('vuetify/lib')['VList']
     VListItem: typeof import('vuetify/lib')['VListItem']
     VListItemAction: typeof import('vuetify/lib')['VListItemAction']
+    VListItemAvatar: typeof import('vuetify/lib')['VListItemAvatar']
     VListItemContent: typeof import('vuetify/lib')['VListItemContent']
     VListItemTitle: typeof import('vuetify/lib')['VListItemTitle']
     VMenu: typeof import('vuetify/lib')['VMenu']