mirror of
https://github.com/thelounge/thelounge.git
synced 2026-04-17 12:27:40 -04:00
2a92ec0e03
on public TL instances like the demo, this is what the account and general tabs look like in Firefox: | General | Account | |--------|--------| | <img width="600" height="auto" alt="image" src="https://github.com/user-attachments/assets/6cb1b9a2-da93-4412-893a-e70004376705" /> | <img width="600" height="auto" alt="image" src="https://github.com/user-attachments/assets/429f8c1a-4b38-49b4-bb14-b3a935860aa7" /> | 1. we should just always hide account if mode is public, its useless 2. if file uploads are off, there's nothing to show in General except the native app install, which i figure is fine/not really necessary for public instances (and isn't supported by Firefox, hence the blankness)
111 lines
2.5 KiB
Vue
111 lines
2.5 KiB
Vue
<template>
|
|
<!-- 220px is the width of the sidebar, and we add 100px to allow for the text -->
|
|
<aside class="settings-menu">
|
|
<h2>Settings</h2>
|
|
<ul role="navigation" aria-label="Settings tabs">
|
|
<SettingTabItem v-if="showGeneral" name="General" class-name="general" to="" />
|
|
<SettingTabItem name="Appearance" class-name="appearance" to="appearance" />
|
|
<SettingTabItem name="Notifications" class-name="notifications" to="notifications" />
|
|
<SettingTabItem v-if="!isPublic" name="Account" class-name="account" to="account" />
|
|
</ul>
|
|
</aside>
|
|
</template>
|
|
|
|
<style>
|
|
.settings-menu {
|
|
position: fixed;
|
|
/* top: Header + (padding bottom of h2 - border) */
|
|
top: calc(45px + 5px);
|
|
/* Mid page minus width of container and 30 pixels for padding */
|
|
margin-left: calc(50% - 480px - 30px);
|
|
}
|
|
|
|
/** The calculation is mobile + 2/3 of container width. Fairly arbitrary. */
|
|
@media screen and (max-width: calc(768px + 320px)) {
|
|
.settings-menu {
|
|
position: static;
|
|
width: min(480px, 100%);
|
|
align-self: center;
|
|
margin: 0 auto;
|
|
padding: 0 15px;
|
|
}
|
|
}
|
|
|
|
.settings-menu ul {
|
|
padding: 0;
|
|
}
|
|
|
|
.settings-menu li {
|
|
font-size: 18px;
|
|
list-style: none;
|
|
}
|
|
|
|
.settings-menu button {
|
|
color: var(--body-color-muted);
|
|
width: 100%;
|
|
height: 100%;
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.settings-menu li:not(:last-of-type) button {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.settings-menu button::before {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-block;
|
|
content: "";
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.settings-menu .appearance::before {
|
|
content: "\f108"; /* http://fontawesome.io/icon/desktop/ */
|
|
}
|
|
|
|
.settings-menu .account::before {
|
|
content: "\f007"; /* http://fontawesome.io/icon/user/ */
|
|
}
|
|
|
|
.settings-menu .messages::before {
|
|
content: "\f0e0"; /* http://fontawesome.io/icon/envelope/ */
|
|
}
|
|
|
|
.settings-menu .notifications::before {
|
|
content: "\f0f3"; /* http://fontawesome.io/icon/bell/ */
|
|
}
|
|
|
|
.settings-menu .general::before {
|
|
content: "\f013"; /* http://fontawesome.io/icon/cog/ */
|
|
}
|
|
|
|
.settings-menu button:hover,
|
|
.settings-menu button.active {
|
|
color: var(--body-color);
|
|
}
|
|
|
|
.settings-menu button.active {
|
|
cursor: default;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import SettingTabItem from "./SettingTabItem.vue";
|
|
import {defineComponent} from "vue";
|
|
import {useStore} from "../../js/store";
|
|
|
|
export default defineComponent({
|
|
name: "SettingsTabs",
|
|
components: {
|
|
SettingTabItem,
|
|
},
|
|
setup() {
|
|
const store = useStore();
|
|
const isPublic = store.state.serverConfiguration?.public;
|
|
const showGeneral = !isPublic || store.state.serverConfiguration?.fileUpload;
|
|
return {isPublic, showGeneral};
|
|
},
|
|
});
|
|
</script>
|