feat: update button component
co-authored-by: JustTemmie <git@beaver.mom>
This commit is contained in:
parent
5560680635
commit
714f75ce12
7 changed files with 82 additions and 126 deletions
44
components/Button.vue
Normal file
44
components/Button.vue
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div @click="props.callback()" class="button" :class="props.variant + '-button'">
|
||||
{{ props.text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
||||
const props = defineProps<{
|
||||
text: string,
|
||||
callback: CallableFunction,
|
||||
variant?: "normal" | "scary" | "neutral",
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.button {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #b35719;
|
||||
color: #ffffff;
|
||||
|
||||
padding: 8px 18px;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.scary-button {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.neutral-button {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
#button:hover {
|
||||
background-color: #934410;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!--if you want a button with a different colour, you have to inline CSS or do something similar
|
||||
|
||||
<Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
|
||||
|
||||
if you have multiple buttons with the same style, feel free to make another component
|
||||
|
||||
this is because i couldn't find a way of dynamically taking in colours without using javascript
|
||||
to update the colour during runtime, i REFUSE to do this due to performance -->
|
||||
|
||||
<template>
|
||||
<div id="button" @click="props.callback()">
|
||||
{{ props.text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps<{
|
||||
text: string,
|
||||
callback: CallableFunction,
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#button {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #b35719;
|
||||
color: #ffffff;
|
||||
|
||||
padding: 8px 18px;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#button:hover {
|
||||
background-color: #934410;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!--if you want a button with a different colour, you have to inline CSS or do something similar
|
||||
|
||||
<Button text="Reset Password" :callback=reset_password style="color: purple; background-color: blue"></Button>
|
||||
|
||||
if you have multiple buttons with the same style, feel free to make another component
|
||||
|
||||
this is because i couldn't find a way of dynamically taking in colours without using javascript
|
||||
to update the colour during runtime, i REFUSE to do this due to performance -->
|
||||
|
||||
<template>
|
||||
<div id="button" @click="props.callback()">
|
||||
{{ props.text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps<{
|
||||
text: string,
|
||||
callback: CallableFunction,
|
||||
}>();
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#button {
|
||||
cursor: pointer;
|
||||
|
||||
background-color: #f02f2f;
|
||||
color: #ffffff;
|
||||
|
||||
padding: 8px 18px;
|
||||
font-size: 18px;
|
||||
transition: background-color 0.2s;
|
||||
|
||||
border-radius: 12px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#button:hover {
|
||||
background-color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div class="user-data-fields">
|
||||
<p class="subtitle">AVATAR</p>
|
||||
<Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
|
||||
<Button text="Remove Avatar" :callback="removeAvatar" style="background-color: grey;"></Button>
|
||||
<Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
|
||||
|
||||
<label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
|
||||
<input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
|
||||
|
|
@ -34,8 +34,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Button from '~/components/Buttons/Button.vue';
|
||||
import ButtonScary from '~/components/Buttons/ButtonScary.vue';
|
||||
import Button from '~/components/Button.vue';
|
||||
import type { UserResponse } from '~/types/interfaces';
|
||||
|
||||
const { fetchUser } = useAuth();
|
||||
|
|
@ -99,11 +98,11 @@ const changeAvatar = async () => {
|
|||
newPfpFile = file
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
if (e.target?.result && typeof e.target.result === 'string') {
|
||||
user.avatar = e.target.result;
|
||||
reader.addEventListener("onload", (e: Event) => {
|
||||
if (reader.result && typeof reader.result === 'string') {
|
||||
user.avatar = reader.result;
|
||||
}
|
||||
};
|
||||
});
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Button from '~/components/Buttons/Button.vue';
|
||||
import Button from '~/components/Button.vue';
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
{{ props.user.username }}
|
||||
<span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
|
||||
</p>
|
||||
<div id="about-me">
|
||||
<div id="about-me" v-if="props.user.about">
|
||||
{{ props.user.about }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,20 +4,20 @@
|
|||
<div id="sidebar">
|
||||
<h4>(Search bar here)</h4>
|
||||
<ul>
|
||||
<div v-for="category in categories" :key="category.display_name">
|
||||
<h2>{{ category.display_name }}</h2>
|
||||
<li v-for="page in category.pages" :key="page.display_name" @click="selectCategory(category, page)"
|
||||
:class="{ 'sidebar-focus': selectedPage === page.display_name }">
|
||||
{{ page.display_name }}
|
||||
<div v-for="category in categories" :key="category.displayName">
|
||||
<h2>{{ category.displayName }}</h2>
|
||||
<li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(category, page)"
|
||||
:class="{ 'sidebar-focus': selectedPage === page.displayName }">
|
||||
{{ page.displayName }}
|
||||
</li>
|
||||
<span class="spacer"></span>
|
||||
</div>
|
||||
|
||||
<ButtonScary text="Log Out" :callback=logout></ButtonScary>
|
||||
<Button text="Log Out" :callback=logout variant="scary"></Button>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="sub_page">
|
||||
<component :is="currentPage.page_data" />
|
||||
<div id="sub-page">
|
||||
<component :is="currentPage.pageData" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,18 +25,17 @@
|
|||
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import ButtonScary from '~/components/Buttons/ButtonScary.vue';
|
||||
import Button from '~/components/Button.vue';
|
||||
|
||||
const { logout } = useAuth()
|
||||
|
||||
interface Page {
|
||||
display_name: string;
|
||||
page_data: any; // is actually Component but TS is yelling at me :(
|
||||
displayName: string;
|
||||
pageData: any; // is actually Component but TS is yelling at me :(
|
||||
}
|
||||
|
||||
interface Category {
|
||||
display_name: string;
|
||||
displayName: string;
|
||||
pages: Page[];
|
||||
}
|
||||
|
||||
|
|
@ -51,22 +50,22 @@ import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
|
|||
import Language from '~/components/Settings/AppSettings/Language.vue';
|
||||
|
||||
const settingsCategories = {
|
||||
user_settings: {
|
||||
display_name: "User Settings",
|
||||
userSettings: {
|
||||
displayName: "User Settings",
|
||||
pages: [
|
||||
{ display_name: "My Account", page_data: Account },
|
||||
{ display_name: "Privacy", page_data: Privacy },
|
||||
{ display_name: "Devices", page_data: Devices },
|
||||
{ display_name: "Connections", page_data: Connections },
|
||||
{ displayName: "My Account", pageData: Account },
|
||||
{ displayName: "Privacy", pageData: Privacy },
|
||||
{ displayName: "Devices", pageData: Devices },
|
||||
{ displayName: "Connections", pageData: Connections },
|
||||
]
|
||||
},
|
||||
app_settings: {
|
||||
display_name: "App Settings",
|
||||
appSettings: {
|
||||
displayName: "App Settings",
|
||||
pages: [
|
||||
{ display_name: "Appearance", page_data: Appearance },
|
||||
{ display_name: "Notifications", page_data: Notifications },
|
||||
{ display_name: "Keybinds", page_data: Keybinds },
|
||||
{ display_name: "Language", page_data: Language },
|
||||
{ displayName: "Appearance", pageData: Appearance },
|
||||
{ displayName: "Notifications", pageData: Notifications },
|
||||
{ displayName: "Keybinds", pageData: Keybinds },
|
||||
{ displayName: "Language", pageData: Language },
|
||||
]
|
||||
},
|
||||
};
|
||||
|
|
@ -74,11 +73,11 @@ const settingsCategories = {
|
|||
const categories = Object.values(settingsCategories);
|
||||
|
||||
let currentPage = ref(categories[0].pages[0]);
|
||||
let selectedPage = ref(currentPage.value.display_name); // used to highlight the current channel
|
||||
let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
|
||||
|
||||
const selectCategory = (_category: Category, page: Page) => {
|
||||
currentPage.value = page;
|
||||
selectedPage.value = page.display_name;
|
||||
selectedPage.value = page.displayName;
|
||||
};
|
||||
|
||||
</script>
|
||||
|
|
@ -109,7 +108,7 @@ const selectCategory = (_category: Category, page: Page) => {
|
|||
}
|
||||
|
||||
#sidebar h2 {
|
||||
font-size: 0.8rem;
|
||||
font-size: 0.95em;
|
||||
padding: 0 0.8dvw;
|
||||
}
|
||||
|
||||
|
|
@ -122,7 +121,7 @@ const selectCategory = (_category: Category, page: Page) => {
|
|||
#sidebar li {
|
||||
border-radius: 8px;
|
||||
padding: 0.8dvh 0.8dvw;
|
||||
font-size: 1.1em;
|
||||
font-size: 1.4em;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
|
@ -135,7 +134,7 @@ const selectCategory = (_category: Category, page: Page) => {
|
|||
background-color: #40444b;
|
||||
}
|
||||
|
||||
#sub_page {
|
||||
#sub-page {
|
||||
flex-grow: 1;
|
||||
min-width: 70dvw;
|
||||
max-width: 70dvw;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue