refactor: remove Badge.vue

use v-chip instead
This commit is contained in:
Gauthier Roebroeck 2020-08-24 14:45:35 +08:00
parent 0635d1c4a3
commit efdcc98604
7 changed files with 20 additions and 44 deletions

View file

@ -1,26 +0,0 @@
<template>
<span class="badge">
<slot/>
</span>
</template>
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'Badge',
})
</script>
<style scoped>
.badge {
background-color: #E0E0E0;
border-radius: 4px;
color: black;
display: inline-block;
padding: 1px 8px;
text-align: center;
font-size: .8em;
font-weight: normal;
}
</style>

View file

@ -8,7 +8,9 @@
<v-toolbar-title v-if="collection">
<span>{{ collection.name }}</span>
<badge class="mx-4">{{ collection.seriesIds.length }}</badge>
<v-chip label class="ml-4">
<span style="font-size: 1.1rem">{{ collection.seriesIds.length }}</span>
</v-chip>
<span v-if="collection.ordered"
class="font-italic text-overline"
>(manual ordering)</span>
@ -75,7 +77,6 @@
</template>
<script lang="ts">
import Badge from '@/components/Badge.vue'
import CollectionActionsMenu from '@/components/menus/CollectionActionsMenu.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
@ -90,7 +91,6 @@ export default Vue.extend({
ToolbarSticky,
ItemBrowser,
CollectionActionsMenu,
Badge,
SeriesMultiSelectBar,
},
data: () => {

View file

@ -7,7 +7,9 @@
<v-toolbar-title>
<span>{{ library ? library.name : 'All libraries' }}</span>
<badge class="ml-4">{{ totalElements }}</badge>
<v-chip label class="ml-4" v-if="totalElements">
<span style="font-size: 1.1rem">{{ totalElements }}</span>
</v-chip>
</v-toolbar-title>
<v-spacer/>
@ -37,7 +39,6 @@
</template>
<script lang="ts">
import Badge from '@/components/Badge.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import LibraryNavigation from '@/components/LibraryNavigation.vue'
@ -57,7 +58,6 @@ export default Vue.extend({
ToolbarSticky,
LibraryNavigation,
ItemBrowser,
Badge,
PageSizeSelect,
},
data: () => {

View file

@ -7,7 +7,9 @@
<v-toolbar-title>
<span>{{ library ? library.name : 'All libraries' }}</span>
<badge class="ml-4" v-if="totalElements">{{ totalElements }}</badge>
<v-chip label class="ml-4" v-if="totalElements">
<span style="font-size: 1.1rem">{{ totalElements }}</span>
</v-chip>
</v-toolbar-title>
<v-spacer/>
@ -67,7 +69,6 @@
</template>
<script lang="ts">
import Badge from '@/components/Badge.vue'
import SeriesMultiSelectBar from '@/components/bars/SeriesMultiSelectBar.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import EmptyState from '@/components/EmptyState.vue'
@ -95,7 +96,6 @@ export default Vue.extend({
ToolbarSticky,
SortMenuButton,
FilterMenuButton,
Badge,
ItemBrowser,
PageSizeSelect,
LibraryNavigation,

View file

@ -8,7 +8,9 @@
<v-toolbar-title v-if="readList">
<span>{{ readList.name }}</span>
<badge class="mx-4">{{ readList.bookIds.length }}</badge>
<v-chip label class="ml-4">
<span style="font-size: 1.1rem">{{ readList.bookIds.length }}</span>
</v-chip>
</v-toolbar-title>
<v-spacer/>
@ -72,7 +74,6 @@
</template>
<script lang="ts">
import Badge from '@/components/Badge.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import { BOOK_CHANGED, READLIST_CHANGED, READLIST_DELETED } from '@/types/events'
@ -86,7 +87,6 @@ export default Vue.extend({
ToolbarSticky,
ItemBrowser,
ReadListActionsMenu,
Badge,
BooksMultiSelectBar,
},
data: () => {

View file

@ -7,7 +7,9 @@
<v-toolbar-title>
<span>{{ library ? library.name : 'All libraries' }}</span>
<badge class="ml-4">{{ totalElements }}</badge>
<v-chip label class="ml-4" v-if="totalElements">
<span style="font-size: 1.1rem">{{ totalElements }}</span>
</v-chip>
</v-toolbar-title>
<v-spacer/>
@ -37,7 +39,6 @@
</template>
<script lang="ts">
import Badge from '@/components/Badge.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import ItemBrowser from '@/components/ItemBrowser.vue'
import LibraryNavigation from '@/components/LibraryNavigation.vue'
@ -57,7 +58,6 @@ export default Vue.extend({
ToolbarSticky,
LibraryNavigation,
ItemBrowser,
Badge,
PageSizeSelect,
},
data: () => {

View file

@ -15,7 +15,9 @@
<v-toolbar-title>
<span v-if="$_.get(series, 'metadata.title')">{{ series.metadata.title }}</span>
<badge class="ml-4" v-if="totalElements">{{ totalElements }}</badge>
<v-chip label class="ml-4" v-if="totalElements">
<span style="font-size: 1.1rem">{{ totalElements }}</span>
</v-chip>
</v-toolbar-title>
<v-spacer/>
@ -120,7 +122,6 @@
</template>
<script lang="ts">
import Badge from '@/components/Badge.vue'
import BooksMultiSelectBar from '@/components/bars/BooksMultiSelectBar.vue'
import ToolbarSticky from '@/components/bars/ToolbarSticky.vue'
import CollectionsExpansionPanels from '@/components/CollectionsExpansionPanels.vue'
@ -138,6 +139,8 @@ import { BOOK_CHANGED, LIBRARY_DELETED, READLIST_CHANGED, SERIES_CHANGED } from
import Vue from 'vue'
import { Location } from 'vue-router'
const tags = require('language-tags')
const cookiePageSize = 'pagesize'
export default Vue.extend({
@ -146,7 +149,6 @@ export default Vue.extend({
ToolbarSticky,
SortMenuButton,
FilterMenuButton,
Badge,
ItemBrowser,
PageSizeSelect,
SeriesActionsMenu,