settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: use nuxt-icon instead of own implementation

Browse Source
This commit is contained in:
Settel 2022-11-18 08:52:07 +01:00
parent bab7691228
commit ad52a0e16f
7 changed files with 16 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/nuxt.config.ts
View File

@ -8,7 +8,8 @@ export default defineNuxtConfig({
ssr: false,
telemetry: false,
modules: [
'@pinia/nuxt'
'@pinia/nuxt',
'nuxt-icons',
],
runtimeConfig: {
serverBaseUrl: '/',

1
client/package.json
View File

@ -18,6 +18,7 @@
"dependencies": {
"@pinia/nuxt": "^0.4.4",
"build-url": "^6.0.1",
"nuxt-icons": "^3.0.0",
"typescript": "^4.9.3",
"vue-contenteditable": "^4.1.0"
}

21
client/src/components/Icon.vue
View File

@ -1,21 +0,0 @@
<template>
<img v-if="name === 'add'" class="icon" src="/assets/icons/add.svg" />
<img v-if="name === 'crown'" class="icon" src="/assets/icons/crown.svg" />
<img v-if="name === 'edit-white'" class="icon" src="/assets/icons/edit-white.svg" />
<img v-if="name === 'edit'" class="icon" src="/assets/icons/edit.svg" />
<img v-if="name === 'reload'" class="icon" src="/assets/icons/reload.svg" />
<img v-if="name === 'trash'" class="icon" src="/assets/icons/trash.svg" />
</template>
<script setup lang="ts">
defineProps<{
name: string,
}>()
</script>
<style lang="scss">
.icon {
width: 100%;
height: 100%;
}
</style>

4
client/src/components/admin/GameInfoTile.vue
View File

@ -6,7 +6,7 @@
<td>{{ gameinfo.name }}</td>
<td>
<div class="gameinfo-tile__edit" @click="editName">
<Icon name="edit-white" />
<nuxt-icon name="edit-white" filled />
</div>
</td>
</tr>
@ -15,7 +15,7 @@
<td v-if="!editLangShowDropdown">{{ gameinfo.lang }}</td>
<td v-if="!editLangShowDropdown">
<div class="gameinfo-tile__edit" @click="editLang">
<Icon name="edit-white" />
<nuxt-icon name="edit-white" filled />
</div>
</td>
<td v-if="editLangShowDropdown" colspan="2">

8
client/src/components/admin/InfoTile.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="admin-tile__container">
<div class="admin-tile__title">{{ title }}</div>
<div v-if="iconTop" class="admin-tile__icon-top" @click="emit('icon-top-click')"><Icon :name="iconTop" /></div>
<div v-if="iconTop" class="admin-tile__icon-top" @click="emit('icon-top-click')"><nuxt-icon :name="iconTop" filled /></div>
<div class="admin-tile__body">
<slot />
</div>
<div v-if="iconBottom" class="admin-tile__icon-bottom-container">
<div class="admin-tile__icon-bottom" @click="emit('icon-bottom-click')">
<Icon :name="iconBottom" />
<nuxt-icon :name="iconBottom" filled />
</div>
</div>
</div>
@ -56,7 +56,7 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
display: flex;
position: absolute;
left: 0;
bottom: -24px;
bottom: -28px;
width: 100%;
}
@ -76,8 +76,6 @@ const emit = defineEmits(['icon-top-click', 'icon-bottom-click'])
}
&__icon-bottom {
width: 12px;
height: 12px;
margin: 0 auto;
padding: 20px;
background-color: $admin-tile-bottom-icon-background-color;

2
client/src/components/admin/PlayersTile.vue
View File

@ -12,7 +12,7 @@
<td class="players-tile__cell">
{{ player.name }}
<div v-if="player.role === 'gamemaster'" class="players-tile__is-gamemaster">
<Icon name="crown" />
<nuxt-icon name="crown" filled />
</div>
</td>
<td class="players-tile__cell">{{ player.numQuotes }}</td>

7
client/yarn.lock
View File

@ -2937,6 +2937,13 @@ nuxi@3.0.0:
optionalDependencies:
fsevents "~2.3.2"
nuxt-icons@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/nuxt-icons/-/nuxt-icons-3.0.0.tgz#82e8902917b2c0e94cb4d2355dc882045bef0ee7"
integrity sha512-7F9/uug7T23d2IGsmz0Jyi4gw86HRZeuzfxC1+e5vsAfQ4MhUMRaANki+uDgiUWub1y5TsclxptG06EH1e3bRQ==
dependencies:
"@nuxt/kit" "^3.0.0"
nuxt@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.0.0.tgz#0909e6566d79805f3a4ed6229573817cbde12e89"