+
-
-
-
-
-
-
Native app
-
-
-
-
-
-
Settings synchronisation
-
-
-
-
- Warning: Checking this box will override the settings
- of this client with those stored on the server.
-
-
- Use the button below to enable synchronization, and override any
- settings already synced to the server.
-
-
-
-
-
- Warning: No settings have been synced before. Enabling
- this will sync all settings of this client as the base for other
- clients.
-
-
-
-
-
-
Messages
-
-
-
-
-
-
-
-
-
Automatic away message
-
-
-
-
- Status messages
-
-
-
-
-
-
-
- Show all status messages individually
-
-
-
- Condense status messages together
-
-
-
- Hide all status messages
-
-
-
Visual Aids
-
-
-
- Enable colored nicknames
-
-
-
- Enable autocomplete
-
-
-
-
-
- Nick autocomplete postfix
-
-
-
-
-
-
-
-
-
Theme
-
- Theme
-
-
-
-
- Link previews
-
-
-
- Auto-expand media
-
-
-
-
-
- Auto-expand websites
-
-
-
-
-
-
File uploads
-
-
-
- Attempt to remove metadata from images before uploading
-
-
-
-
-
-
-
-
- Push Notifications
-
-
-
- Warning: Push notifications are only supported over HTTPS
- connections.
-
-
-
Warning:
-
Push notifications are not supported by your browser.
-
-
-
-
-
-
-
Browser Notifications
-
-
-
- Enable browser notifications
-
- Warning: Notifications are not supported by your browser.
-
-
- Warning: Notifications are only supported over HTTPS
- connections.
-
-
- Warning: Notifications are blocked by your browser.
-
-
-
-
-
-
- Enable notification sound
-
-
-
-
-
-
-
- Enable notification for all messages
-
-
-
-
-
-
- Custom highlights
-
-
-
-
-
-
-
-
-
-
-
- Highlight exceptions
-
-
-
-
-
-
-
-
-
-
Change password
-
- Enter current password
-
-
-
-
-
- Enter desired new password
-
-
-
-
-
- Repeat new password
-
-
-
-
-
- Successfully updated your password
-
-
- {{ passwordErrors[passwordChangeStatus.error] }}
-
-
-
-
-
-
-
-
Custom Stylesheet
-
- Custom stylesheet. You can override any style with CSS here.
-
-
-
-
-
-
Sessions
-
-
Current session
-
-
-
- Active sessions
-
-
-
-
Other sessions
-
Loading…
-
- You are not currently logged in to any other device.
-
-
-
-
+
+
-
-
diff --git a/client/css/style.css b/client/css/style.css
index 314460e2..6fd1da28 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -298,6 +298,7 @@ p {
#connect .extra-help,
#settings .extra-help,
#settings #play::before,
+#settings .tabs .icon::before,
#form #upload::before,
#form #submit::before,
#chat .msg[data-type="away"] .from::before,
@@ -397,7 +398,9 @@ p {
}
#footer .connect::before { content: "\f067"; /* http://fontawesome.io/icon/plus/ */ }
+
#footer .settings::before { content: "\f013"; /* http://fontawesome.io/icon/cog/ */ }
+
#footer .help::before { content: "\f059"; /* http://fontawesome.io/icon/question/ */ }
#form #upload::before { content: "\f0c6"; /* https://fontawesome.com/icons/paperclip?style=solid */ }
@@ -722,7 +725,7 @@ background on hover (unless active) */
background-color: rgb(48 62 74 / 50%); /* #303e4a x 50% alpha */
}
-/* Darker background and defualt cursor for active channels */
+/* Darker background and default cursor for active channels */
#footer button.active,
.channel-list-item.active {
background-color: #303e4a;
diff --git a/client/js/router.js b/client/js/router.js
index a6be4368..9d25b8ca 100644
--- a/client/js/router.js
+++ b/client/js/router.js
@@ -17,6 +17,11 @@ import SearchResults from "../components/Windows/SearchResults.vue";
import RoutedChat from "../components/RoutedChat.vue";
import store from "./store";
+import AppearanceSettings from "../components/Settings/Appearance.vue";
+import GeneralSettings from "../components/Settings/General.vue";
+import UserSettings from "../components/Settings/User.vue";
+import NotificationSettings from "../components/Settings/Notifications.vue";
+
const router = new VueRouter({
routes: [
{
@@ -40,9 +45,30 @@ const router = new VueRouter({
props: (route) => ({queryParams: route.query}),
},
{
- name: "Settings",
path: "/settings",
component: Settings,
+ children: [
+ {
+ name: "General",
+ path: "",
+ component: GeneralSettings,
+ },
+ {
+ name: "Appearance",
+ path: "appearance",
+ component: AppearanceSettings,
+ },
+ {
+ name: "User Settings",
+ path: "user",
+ component: UserSettings,
+ },
+ {
+ name: "Notifications",
+ path: "notifications",
+ component: NotificationSettings,
+ },
+ ],
},
{
name: "Help",