gorb/frontend
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

feat: update button component

Browse source 
co-authored-by: JustTemmie <git@beaver.mom>
This commit is contained in:
Radical 2025-06-23 19:59:52 +02:00
parent 5560680635
commit 714f75ce12
7 changed files with 82 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

44
components/Button.vue Normal file
View 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>

43
components/Buttons/Button.vue
View file

@ -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>

43
components/Buttons/ButtonScary.vue
View file

@ -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>

13
components/Settings/UserSettings/Account.vue
View file

@ -6,7 +6,7 @@
<div class="user-data-fields"> <div class="user-data-fields">
<p class="subtitle">AVATAR</p> <p class="subtitle">AVATAR</p>
<Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button> <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> <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" /> <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> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Button from '~/components/Buttons/Button.vue'; import Button from '~/components/Button.vue';
import ButtonScary from '~/components/Buttons/ButtonScary.vue';
import type { UserResponse } from '~/types/interfaces'; import type { UserResponse } from '~/types/interfaces';
const { fetchUser } = useAuth(); const { fetchUser } = useAuth();
@ -99,11 +98,11 @@ const changeAvatar = async () => {
newPfpFile = file newPfpFile = file
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.addEventListener("onload", (e: Event) => {
if (e.target?.result && typeof e.target.result === 'string') { if (reader.result && typeof reader.result === 'string') {
user.avatar = e.target.result; user.avatar = reader.result;
} }
}; });
reader.readAsDataURL(file); reader.readAsDataURL(file);
} }
}) })

2
components/Settings/UserSettings/Privacy.vue
View file

@ -5,7 +5,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Button from '~/components/Buttons/Button.vue'; import Button from '~/components/Button.vue';
</script> </script>
<style scoped> <style scoped>

2
components/UserPopup.vue
View file

@ -10,7 +10,7 @@
{{ props.user.username }} {{ props.user.username }}
<span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span> <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
</p> </p>
<div id="about-me"> <div id="about-me" v-if="props.user.about">
{{ props.user.about }} {{ props.user.about }}
</div> </div>
</div> </div>

61
pages/settings.vue
View file

@ -4,20 +4,20 @@
<div id="sidebar"> <div id="sidebar">
<h4>(Search bar here)</h4> <h4>(Search bar here)</h4>
<ul> <ul>
<div v-for="category in categories" :key="category.display_name"> <div v-for="category in categories" :key="category.displayName">
<h2>{{ category.display_name }}</h2> <h2>{{ category.displayName }}</h2>
<li v-for="page in category.pages" :key="page.display_name" @click="selectCategory(category, page)" <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(category, page)"
:class="{ 'sidebar-focus': selectedPage === page.display_name }"> :class="{ 'sidebar-focus': selectedPage === page.displayName }">
{{ page.display_name }} {{ page.displayName }}
</li> </li>
<span class="spacer"></span> <span class="spacer"></span>
</div> </div>
<ButtonScary text="Log Out" :callback=logout></ButtonScary> <Button text="Log Out" :callback=logout variant="scary"></Button>
</ul> </ul>
</div> </div>
<div id="sub_page"> <div id="sub-page">
<component :is="currentPage.page_data" /> <component :is="currentPage.pageData" />
</div> </div>
</div> </div>
</div> </div>
@ -25,18 +25,17 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue'; import Button from '~/components/Button.vue';
import ButtonScary from '~/components/Buttons/ButtonScary.vue';
const { logout } = useAuth() const { logout } = useAuth()
interface Page { interface Page {
display_name: string; displayName: string;
page_data: any; // is actually Component but TS is yelling at me :( pageData: any; // is actually Component but TS is yelling at me :(
} }
interface Category { interface Category {
display_name: string; displayName: string;
pages: Page[]; pages: Page[];
} }
@ -51,22 +50,22 @@ import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
import Language from '~/components/Settings/AppSettings/Language.vue'; import Language from '~/components/Settings/AppSettings/Language.vue';
const settingsCategories = { const settingsCategories = {
user_settings: { userSettings: {
display_name: "User Settings", displayName: "User Settings",
pages: [ pages: [
{ display_name: "My Account", page_data: Account }, { displayName: "My Account", pageData: Account },
{ display_name: "Privacy", page_data: Privacy }, { displayName: "Privacy", pageData: Privacy },
{ display_name: "Devices", page_data: Devices }, { displayName: "Devices", pageData: Devices },
{ display_name: "Connections", page_data: Connections }, { displayName: "Connections", pageData: Connections },
] ]
}, },
app_settings: { appSettings: {
display_name: "App Settings", displayName: "App Settings",
pages: [ pages: [
{ display_name: "Appearance", page_data: Appearance }, { displayName: "Appearance", pageData: Appearance },
{ display_name: "Notifications", page_data: Notifications }, { displayName: "Notifications", pageData: Notifications },
{ display_name: "Keybinds", page_data: Keybinds }, { displayName: "Keybinds", pageData: Keybinds },
{ display_name: "Language", page_data: Language }, { displayName: "Language", pageData: Language },
] ]
}, },
}; };
@ -74,11 +73,11 @@ const settingsCategories = {
const categories = Object.values(settingsCategories); const categories = Object.values(settingsCategories);
let currentPage = ref(categories[0].pages[0]); 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) => { const selectCategory = (_category: Category, page: Page) => {
currentPage.value = page; currentPage.value = page;
selectedPage.value = page.display_name; selectedPage.value = page.displayName;
}; };
</script> </script>
@ -109,7 +108,7 @@ const selectCategory = (_category: Category, page: Page) => {
} }
#sidebar h2 { #sidebar h2 {
font-size: 0.8rem; font-size: 0.95em;
padding: 0 0.8dvw; padding: 0 0.8dvw;
} }
@ -122,7 +121,7 @@ const selectCategory = (_category: Category, page: Page) => {
#sidebar li { #sidebar li {
border-radius: 8px; border-radius: 8px;
padding: 0.8dvh 0.8dvw; padding: 0.8dvh 0.8dvw;
font-size: 1.1em; font-size: 1.4em;
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; transition: background-color 0.3s;
} }
@ -135,7 +134,7 @@ const selectCategory = (_category: Category, page: Page) => {
background-color: #40444b; background-color: #40444b;
} }
#sub_page { #sub-page {
flex-grow: 1; flex-grow: 1;
min-width: 70dvw; min-width: 70dvw;
max-width: 70dvw; max-width: 70dvw;