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

feat: add states (selectable, selected) to SourceCard

Browse Source
This commit is contained in:
Settel 2022-08-29 23:29:46 +02:00
parent cc12d27c46
commit 1412310bc2
3 changed files with 43 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/assets/css/colors.scss
View File

@ -67,6 +67,18 @@ $quote-button-hover-background-color: $button-hover-background-color;
$quote-button-hover-text-color: $quote-button-text-color; $quote-button-hover-text-color: $quote-button-text-color;
$quote-button-hover-border: none; $quote-button-hover-border: none;
// Source Card
$sourcecard-background-color: $background-primary-color;
$sourcecard-text-color: $text-primary-color;
$sourcecard-border: 3px solid #ffffff;
$sourcecard-hover-background-color: #ffffff;
$sourcecard-hover-text-color: $background-primary-color;
$sourcecard-hover-border: 3px solid #ffffff;
$sourcecard-selected-background-color: #ffffff;
$sourcecard-selected-text-color: $background-primary-color;
$sourcecard-selected-border: 3px solid #ffffff;
$sourcecard-selected-box-shadow: 0 0 10px #ffffff;
// Engine Debug // Engine Debug
$debug-background-color: lighten($background-primary-color, 10%); $debug-background-color: lighten($background-primary-color, 10%);
$debug-border: none; $debug-border: none;

5
client/src/components/Playground.vue
View File

@ -2,7 +2,8 @@
<div class="playground__container"> <div class="playground__container">
<div class="playground__area"> <div class="playground__area">
<div class="playground__sources"> <div class="playground__sources">
<SourceCard v-for="source in round.sources" :key="source.id" :source="source" /> <SourceCard v-for="source in round.sources" :key="source.id" :source="source" :selectable="true"
:selected="selection == source.id" @click="selection=source.id"/>
</div> </div>
<div class="playground__spacer" /> <div class="playground__spacer" />
<div class="playground__quote"> <div class="playground__quote">
@ -16,6 +17,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'
import { usePlayersStore } from '@/stores/PlayersStore' import { usePlayersStore } from '@/stores/PlayersStore'
import { useRoundStore } from '@/stores/RoundStore' import { useRoundStore } from '@/stores/RoundStore'
@ -24,6 +26,7 @@ const round = useRoundStore().round
const quote = { const quote = {
quote: round.quote, quote: round.quote,
} }
const selection = ref('')
</script> </script>
<style lang="scss"> <style lang="scss">

30
client/src/components/SourceCard.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="source-card__container"> <div class="source-card__container"
{{ source.name }} :class="{ 'source-card__container__selectable': selectable, 'source-card__container__selected': selected }">
{{ source.name }}
</div> </div>
</template> </template>
@ -10,19 +11,42 @@ defineProps<{
id: string id: string
name: string name: string
}, },
selectable?: boolean,
selected?: boolean,
}>() }>()
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.source-card { .source-card {
&__container { &__container {
display: flex; display: flex;
width: 180px; width: 180px;
height: 40px; height: 40px;
border: 3px solid white; border: $sourcecard-border;
border-radius: 8px; border-radius: 8px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: $sourcecard-background-color;
color: $sourcecard-text-color;
&__selectable {
cursor: pointer;
&:hover {
background-color: $sourcecard-hover-background-color;
border: $sourcecard-hover-border;
color: $sourcecard-hover-text-color;
}
&.source-card__container__selected {
background-color: $sourcecard-selected-background-color;
border: $sourcecard-selected-border;
color: $sourcecard-selected-text-color;
box-shadow: $sourcecard-selected-box-shadow;
cursor: default;
}
}
} }
} }
</style> </style>