mirror of
https://github.com/romancm/gamebrary
synced 2024-11-28 06:00:22 +00:00
use octicons instead of bootstrap's
This commit is contained in:
Gamebrary
parent
5c74dd52c2
commit
4144708738
24 changed files with 110 additions and 63 deletions
|
|
@ -2,10 +2,11 @@
|
|||
<b-button
|
||||
v-b-modal="modalId"
|
||||
:title="$t('board.addList.title')"
|
||||
size="sm"
|
||||
v-b-tooltip.hover.left
|
||||
ref="addList"
|
||||
>
|
||||
<b-icon-plus />
|
||||
<icon name="plus" white />
|
||||
|
||||
<b-modal
|
||||
:id="modalId"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
v-b-tooltip.hover
|
||||
@click="addGame"
|
||||
>
|
||||
<b-icon-plus />
|
||||
<icon name="plus" white />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
:title="$t('board.gameModal.removeFromList')"
|
||||
@click="removeGame"
|
||||
>
|
||||
<b-icon-trash />
|
||||
<icon name="trash" white />
|
||||
</b-button>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
v-b-tooltip.hover
|
||||
title="Game notes"
|
||||
>
|
||||
<b-icon-file-earmark-text />
|
||||
<icon name="note" white />
|
||||
|
||||
<b-modal
|
||||
id="notes"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
variant="info"
|
||||
title="Set game progress"
|
||||
>
|
||||
<b-icon-clock-history />
|
||||
<icon name="clock" white />
|
||||
|
||||
<b-modal
|
||||
id="progress"
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
v-b-tooltip.hover
|
||||
title="Apply tags"
|
||||
>
|
||||
<b-icon-tag />
|
||||
<icon name="tag" white />
|
||||
|
||||
<b-popover
|
||||
target="tags-popover"
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
size="sm"
|
||||
@click="removeTag(name)"
|
||||
>
|
||||
<b-icon-trash />
|
||||
<icon name="dash" />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
size="sm"
|
||||
@click="addTag(name)"
|
||||
>
|
||||
<b-icon-plus font-scale="1" />
|
||||
<icon name="plus" />
|
||||
</b-button>
|
||||
|
||||
</b-list-group-item>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,9 @@
|
|||
<b-card no-body class="clickable mb-2" @click="openDetails">
|
||||
<b-row no-gutters v-if="game && game.name">
|
||||
<b-col cols="3">
|
||||
<b-icon-check-circle
|
||||
<icon name="check-circle"
|
||||
white
|
||||
class="position-absolute rounded bg-success p-1 m-1"
|
||||
variant="white"
|
||||
font-scale="1.5"
|
||||
v-if="showCompletedBadge"
|
||||
/>
|
||||
|
||||
|
|
@ -27,7 +26,7 @@
|
|||
{{ game.name }}
|
||||
|
||||
<b-badge variant="warning" v-if="gameNotes">
|
||||
<b-icon-file-earmark-text />
|
||||
<icon name="note" />
|
||||
</b-badge>
|
||||
</b-card-title>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@
|
|||
v-if="game && game.name"
|
||||
>
|
||||
<b-col cols="4">
|
||||
<b-icon-check-circle
|
||||
<icon
|
||||
name="verified"
|
||||
white
|
||||
class="position-absolute rounded bg-success p-1 m-1"
|
||||
variant="white"
|
||||
font-scale="1.5"
|
||||
v-if="showCompletedBadge"
|
||||
/>
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
{{ game.name }}
|
||||
|
||||
<b-badge variant="warning" v-if="gameNotes">
|
||||
<b-icon-file-earmark-text />
|
||||
<icon name="note" />
|
||||
</b-badge>
|
||||
</b-card-title>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@
|
|||
>
|
||||
<b-card-body body-class="p-2" v-if="game && game.name">
|
||||
<b-card-title class="mb-0" title-tag="h6">
|
||||
<b-icon-check-circle
|
||||
<icon
|
||||
name="verified"
|
||||
class="rounded bg-success p-1"
|
||||
variant="white"
|
||||
font-scale="1.5"
|
||||
white
|
||||
v-if="showCompletedBadge"
|
||||
/>
|
||||
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
</template>
|
||||
|
||||
<b-badge variant="warning" v-if="gameNotes">
|
||||
<b-icon-file-earmark-text />
|
||||
<icon name="note" />
|
||||
</b-badge>
|
||||
</b-card-body>
|
||||
</b-card>
|
||||
|
|
|
|||
|
|
@ -3,9 +3,10 @@
|
|||
<b-row no-gutters v-if="game && game.name">
|
||||
<b-card-body body-class="pt-0 pb-1 px-2">
|
||||
<small>
|
||||
<b-icon-check-circle
|
||||
<icon
|
||||
name="verified"
|
||||
class="rounded bg-success p-1"
|
||||
variant="white"
|
||||
white
|
||||
font-scale="1.5"
|
||||
v-if="showCompletedBadge"
|
||||
/>
|
||||
|
|
@ -13,7 +14,7 @@
|
|||
{{ game.name }}
|
||||
|
||||
<b-badge variant="warning" v-if="gameNotes">
|
||||
<b-icon-file-earmark-text />
|
||||
<icon name="note" />
|
||||
</b-badge>
|
||||
</small>
|
||||
|
||||
|
|
|
|||
43
src/components/Icon.vue
Normal file
43
src/components/Icon.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<template lang="html">
|
||||
<img
|
||||
:src="`static/octicons/${name}.svg`"
|
||||
:class="{ white, animated, small }"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: 'sun',
|
||||
},
|
||||
white: Boolean,
|
||||
animated: Boolean,
|
||||
small: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
@keyframes spin {
|
||||
from { transform:rotate(0deg); }
|
||||
to { transform:rotate(360deg); }
|
||||
}
|
||||
|
||||
img {
|
||||
&.white {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
&.small {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
&.animated {
|
||||
animation: spin 500ms linear infinite;
|
||||
transform:rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button @click="$bvModal.show(`game-modal-${list.name}`)">
|
||||
<b-icon-plus class="mr-1" />
|
||||
<icon name="plus" />
|
||||
{{ $t('board.addGame.title') }}
|
||||
|
||||
<b-modal
|
||||
|
|
@ -20,8 +20,11 @@
|
|||
|
||||
<b-input-group-append>
|
||||
<b-button variant="primary" @click="search">
|
||||
<b-spinner v-if="loading" small />
|
||||
<b-icon-search v-else />
|
||||
<icon
|
||||
:name="loading ? 'sync' : 'search'"
|
||||
:animated="loading"
|
||||
white
|
||||
/>
|
||||
</b-button>
|
||||
</b-input-group-append>
|
||||
</b-input-group>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button v-b-modal="modalId">
|
||||
<b-icon-grid1x2 class="mr-1" />
|
||||
<icon name="versions" />
|
||||
{{ $t('board.list.view') }}
|
||||
|
||||
<b-modal
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
:header-bg-variant="showDuplicateWarning ? 'warning' : null"
|
||||
>
|
||||
<h6 class="m-0" v-b-modal="`rename-list-${listIndex}`">
|
||||
<b-badge v-if="autoSortEnabled">
|
||||
<b-icon-sort-up />
|
||||
</b-badge>
|
||||
|
||||
<b-badge v-if="showGameCount">
|
||||
{{ list.games.length }}
|
||||
</b-badge>
|
||||
|
||||
<b-badge v-if="autoSortEnabled">
|
||||
<icon small white name="list-ordered" />
|
||||
</b-badge>
|
||||
|
||||
{{ showDuplicateWarning ? 'Game already in list' : list.name }}
|
||||
</h6>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button v-b-modal="modalId">
|
||||
<b-icon-toggles class="mr-1" />
|
||||
<icon name="tools" />
|
||||
{{ $t('board.list.settings') }}
|
||||
|
||||
<b-modal
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template lang="html">
|
||||
<b-dropdown size="sm" class="m-1" right>
|
||||
<b-dropdown size="sm" class="m-1" right variant="transparent">
|
||||
<add-game-modal :list="list" />
|
||||
<b-dd-divider />
|
||||
<sort-list :list="list" :list-index="listIndex" />
|
||||
|
|
@ -13,18 +13,20 @@
|
|||
v-b-tooltip.hover
|
||||
:title="$t('board.list.moveLeft')"
|
||||
:disabled="isFirst"
|
||||
variant="light"
|
||||
@click="moveList(listIndex, listIndex - 1)"
|
||||
>
|
||||
<b-icon-arrow-left-short />
|
||||
<icon name="triangle-left" />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
v-b-tooltip.hover
|
||||
:title="$t('board.list.moveRight')"
|
||||
:disabled="isLast"
|
||||
variant="light"
|
||||
@click="moveList(listIndex, listIndex + 1)"
|
||||
>
|
||||
<b-icon-arrow-right-short />
|
||||
<icon name="triangle-right" />
|
||||
</b-button>
|
||||
</b-button-group>
|
||||
</b-dropdown-item>
|
||||
|
|
@ -34,7 +36,7 @@
|
|||
variant="outline-danger"
|
||||
@click="promptDeleteList"
|
||||
>
|
||||
<b-icon-trash class="mr-1" />
|
||||
<icon name="trash" />
|
||||
{{ $t('board.list.delete') }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button v-b-modal="modalId">
|
||||
<b-icon-pencil class="mr-1" />
|
||||
<icon name="pencil" />
|
||||
{{ $t('board.list.renameList') }}
|
||||
|
||||
<b-modal
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template lang="html">
|
||||
<b-dropdown-item-button v-b-modal="modalId">
|
||||
<b-icon-sort-up class="mr-1" />
|
||||
<icon name="list-ordered" />
|
||||
{{ $t('board.list.sortList') }}
|
||||
|
||||
<b-modal
|
||||
|
|
|
|||
|
|
@ -11,10 +11,10 @@
|
|||
right
|
||||
no-caret
|
||||
boundary="viewport"
|
||||
variant="link"
|
||||
variant="transparent"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<b-icon-arrow-left-right />
|
||||
<icon name="arrow-switch" />
|
||||
</template>
|
||||
|
||||
<b-dropdown-item
|
||||
|
|
@ -34,37 +34,38 @@
|
|||
right
|
||||
no-caret
|
||||
boundary="viewport"
|
||||
variant="link"
|
||||
variant="transparent"
|
||||
>
|
||||
<template v-slot:button-content>
|
||||
<b-icon-gear />
|
||||
<icon name="gear" />
|
||||
</template>
|
||||
|
||||
<b-dropdown-item title="Tags" :to="{ name: 'tags' }">
|
||||
<b-icon-tags />
|
||||
<icon name="tag" />
|
||||
|
||||
{{ $t('settings.tags') }}
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item title="Wallpapers" :to="{ name: 'wallpapers' }">
|
||||
<b-icon-file-richtext />
|
||||
<icon name="image" />
|
||||
{{ $t('settings.wallpapers') }}
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item title="Language" :to="{ name: 'language' }">
|
||||
<b-icon-chat-left-text />
|
||||
<icon name="globe" />
|
||||
{{ $t('settings.language') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item title="Themes" :to="{ name: 'themes' }">
|
||||
<b-icon-droplet />
|
||||
<icon name="sun" />
|
||||
{{ $t('settings.themes') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item title="Releases" :to="{ name: 'releases' }">
|
||||
<b-icon-mailbox />
|
||||
<icon name="megaphone" />
|
||||
{{ $t('settings.releases') }}
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item title="About" :to="{ name: 'about' }">
|
||||
<b-icon-question />
|
||||
<icon name="info" />
|
||||
{{ $t('settings.about') }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
v-b-tooltip.hover.left
|
||||
title="Board settings"
|
||||
class="mt-3"
|
||||
size="sm"
|
||||
ref="addList"
|
||||
>
|
||||
<b-icon-gear-fill />
|
||||
<icon name="gear" white />
|
||||
|
||||
<b-modal
|
||||
id="board-settings"
|
||||
|
|
|
|||
|
|
@ -103,9 +103,9 @@
|
|||
"addGames": "Add games to {listName}",
|
||||
"view": "List view",
|
||||
"moveList": "Move list",
|
||||
"renameList": "Rename list",
|
||||
"renameList": "Rename",
|
||||
"renameListPlaceholder": "Enter your name",
|
||||
"sortList": "Auto sort list",
|
||||
"sortList": "Sort",
|
||||
"sortWarning": "Auto sorting list will affect how drag and drop works",
|
||||
"coversSizeTitle": "Covers across",
|
||||
"showReleaseDates": "Show release date for unreleased games",
|
||||
|
|
|
|||
10
src/main.js
10
src/main.js
|
|
@ -1,9 +1,10 @@
|
|||
import Vue from 'vue';
|
||||
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
|
||||
import { BootstrapVue } from 'bootstrap-vue';
|
||||
import 'bootstrap-vue/dist/bootstrap-vue.css';
|
||||
import VueAxios from 'vue-axios';
|
||||
import VueFire from 'vuefire';
|
||||
import VueI18n from 'vue-i18n';
|
||||
import Icon from '@/components/Icon';
|
||||
import axios from 'axios';
|
||||
import VueAnalytics from 'vue-analytics';
|
||||
import Raven from 'raven-js';
|
||||
|
|
@ -25,12 +26,11 @@ Object.defineProperties(Vue.prototype, {
|
|||
});
|
||||
|
||||
Vue.use(BootstrapVue, bootstrapSettings);
|
||||
|
||||
Vue.use(BootstrapVueIcons);
|
||||
Vue.use(VueAnalytics, { id: 'UA-120053966-1', router });
|
||||
Vue.use(VueAxios, axios);
|
||||
Vue.use(VueFire);
|
||||
Vue.use(VueI18n);
|
||||
Vue.component('icon', Icon);
|
||||
|
||||
if (process.env.NODE_ENV !== 'development') {
|
||||
Raven
|
||||
|
|
@ -53,10 +53,6 @@ const vuexStorage = localStorage && localStorage.vuex
|
|||
? JSON.parse(localStorage.vuex)
|
||||
: {};
|
||||
|
||||
if (vuexStorage.settings && vuexStorage.settings.theme && vuexStorage.settings.theme.cssCdn) {
|
||||
document.querySelector('link[rel="stylesheet"').href = vuexStorage.settings.theme.cssCdn;
|
||||
}
|
||||
|
||||
if (vuexStorage && vuexStorage.user && window.FS && window.location.origin.indexOf('localhost') === -1) {
|
||||
const { displayName, email, dateJoined } = vuexStorage.user;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<b-overlay show no-center no-wrap>
|
||||
<template v-slot:overlay>
|
||||
<div class="text-center p-4">
|
||||
<b-icon-arrow-clockwise font-scale="3" animation="spin" />
|
||||
<p id="cancel-label">Please wait...</p>
|
||||
<icon name="sync" animated />
|
||||
<p>Please wait...</p>
|
||||
</div>
|
||||
</template>
|
||||
</b-overlay>
|
||||
|
|
|
|||
|
|
@ -94,14 +94,14 @@
|
|||
variant="primary"
|
||||
@click="editTag(name)"
|
||||
>
|
||||
<b-icon-pencil />
|
||||
<icon name="pencil" white />
|
||||
</b-button>
|
||||
|
||||
<b-button
|
||||
variant="danger"
|
||||
@click="deleteTag(name)"
|
||||
>
|
||||
<b-icon-trash />
|
||||
<icon name="trash" white />
|
||||
</b-button>
|
||||
</div>
|
||||
</b-list-group-item>
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
size="sm"
|
||||
@click="confirmDeleteWallpaper(wallpaper)"
|
||||
>
|
||||
<b-icon-trash />
|
||||
<icon name="trash" white />
|
||||
</b-button>
|
||||
</b-card>
|
||||
</b-col>
|
||||
|
|
|
|||
Loading…
Reference in a new issue