mirror of
https://github.com/thelounge/thelounge.git
synced 2026-07-31 07:05:52 -04:00
a19088ad16
| | | |--------|--------| | <img width="2016" height="1476" alt="image" src="https://github.com/user-attachments/assets/381036c4-f9e2-4412-b3c7-2ac3c1a1163f" /> | <img width="1890" height="1458" alt="image" src="https://github.com/user-attachments/assets/f7d55d77-52f8-4493-9ad5-37ca00cb051f" /> | | <img width="1760" height="940" alt="image" src="https://github.com/user-attachments/assets/dacb9a5e-cf96-4f9c-bd4a-0633b2b55120" /> | <img width="1966" height="1424" alt="image" src="https://github.com/user-attachments/assets/110d409e-2bba-4fec-90e9-48ef2cdd5c98" /> | ## Summary Each settings page becomes a stack of cards with a consistent title, intro line and toggle rows, instead of loose headings and bare checkboxes. The shared pieces are `SettingCard.vue` and `SettingToggle.vue`, and the styling moves out of `style.css` into `client/css/settings.css`. Appearance is now the landing page for `/settings` (General moves to `/settings/general`, with a redirect so old `/settings/appearance` links keep working). Below the width where the fixed sidebar would collide with the centered container, the tabs collapse into a dropdown instead of stacking above the content. Setting names and bindings are unchanged, so nothing about how preferences are stored or synced moves. ## Test Plan - Ran the client and stepped through Appearance and Notifications: toggling a switch still writes through to the settings store, `/settings/appearance` redirects to Appearance, and the mobile dropdown opens aligned to the card. - Not verified in a browser: Account and General, which need a non-public instance.
36 lines
863 B
Vue
36 lines
863 B
Vue
<template>
|
|
<div class="setting-row">
|
|
<label :for="'setting-' + name" class="setting-row-text">
|
|
<div class="setting-row-label">{{ label }}</div>
|
|
<div v-if="description" class="setting-row-description">{{ description }}</div>
|
|
</label>
|
|
<div class="setting-toggle">
|
|
<input
|
|
:id="'setting-' + name"
|
|
:checked="checked"
|
|
:disabled="disabled"
|
|
:name="name"
|
|
type="checkbox"
|
|
/>
|
|
<div class="toggle-track">
|
|
<div class="toggle-thumb" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {defineComponent} from "vue";
|
|
|
|
export default defineComponent({
|
|
name: "SettingToggle",
|
|
props: {
|
|
name: {type: String, required: true},
|
|
label: {type: String, required: true},
|
|
description: {type: String, default: ""},
|
|
checked: {type: Boolean, required: true},
|
|
disabled: {type: Boolean, default: false},
|
|
},
|
|
});
|
|
</script>
|