supernets/hardlounge
supernets/hardlounge
5
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Remove bootstrap classes from settings

Browse Source
This commit is contained in:
Pavel Djundik 2019-12-12 13:37:53 +02:00
parent 0e9fdf9e08
commit 1495ce3772
4 changed files with 447 additions and 475 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/NetworkForm.vue
View File

@ -109,7 +109,7 @@
</template>
<div class="connect-row">
<label for="connect:password">Password</label>
<RevealPassword class="input-wrap password-container" v-slot:default="slotProps">
<RevealPassword v-slot:default="slotProps" class="input-wrap password-container">
<input
id="connect:password"
v-model="defaults.password"

32
client/components/Session.vue
View File

@ -1,14 +1,6 @@
<template>
<p>
<button class="btn pull-right remove-session" @click.prevent="signOut">
<template v-if="session.current">
Sign out
</template>
<template v-else>
Revoke
</template>
</button>
<div class="session-item">
<div class="session-item-info">
<strong>{{ session.agent }}</strong>
<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
@ -16,15 +8,21 @@
}}</a>
<template v-if="!session.current">
<br />
<template v-if="session.active">
<p v-if="session.active">
<em>Currently active</em>
</template>
<template v-else>
Last used on <time>{{ session.lastUse | localetime }}</time>
</template>
</template>
</p>
<p v-else>
Last used on <time>{{ session.lastUse | localetime }}</time>
</p>
</template>
</div>
<div class="session-item-btn">
<button class="btn" @click.prevent="signOut">
<template v-if="session.current">Sign out</template>
<template v-else>Revoke</template>
</button>
</div>
</div>
</template>
<script>

115
client/components/Windows/Settings.vue
View File

@ -6,8 +6,7 @@
<form ref="settingsForm" class="container" @change="onChange" @submit.prevent>
<h1 class="title">Settings</h1>
<div class="row">
<div class="col-sm-6">
<div>
<label class="opt">
<input
:checked="$store.state.settings.advanced"
@ -17,10 +16,8 @@
Advanced settings
</label>
</div>
</div>
<div class="row">
<div v-if="canRegisterProtocol || hasInstallPromptEvent" class="col-sm-12">
<div v-if="canRegisterProtocol || hasInstallPromptEvent">
<h2>Native app</h2>
<button
v-if="hasInstallPromptEvent"
@ -40,12 +37,7 @@
</button>
</div>
<div
v-if="
!$store.state.serverConfiguration.public && $store.state.settings.advanced
"
class="col-sm-12"
>
<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
<h2>
Settings synchronisation
<span
@ -69,8 +61,8 @@
<template v-if="!$store.state.settings.syncSettings">
<div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
<p>
<strong>Warning:</strong> Checking this box will override the
settings of this client with those stored on the server.
<strong>Warning:</strong> Checking this box will override the settings
of this client with those stored on the server.
</p>
<p>
Use the button below to enable synchronization, and override any
@ -82,24 +74,22 @@
</div>
<div v-else class="settings-sync-panel">
<p>
<strong>Warning:</strong> No settings have been synced before.
Enabling this will sync all settings of this client as the base for
other clients.
<strong>Warning:</strong> No settings have been synced before. Enabling
this will sync all settings of this client as the base for other
clients.
</p>
</div>
</template>
</div>
<div class="col-sm-12">
<h2>Messages</h2>
</div>
<div class="col-sm-6">
<div>
<label class="opt">
<input :checked="$store.state.settings.motd" type="checkbox" name="motd" />
Show <abbr title="Message Of The Day">MOTD</abbr>
</label>
</div>
<div class="col-sm-6">
<div>
<label class="opt">
<input
:checked="$store.state.settings.showSeconds"
@ -109,7 +99,7 @@
Show seconds in timestamp
</label>
</div>
<div v-if="$store.state.settings.advanced" class="col-sm-12">
<div v-if="$store.state.settings.advanced">
<h2>Automatic away message</h2>
<label class="opt">
@ -124,7 +114,6 @@
/>
</label>
</div>
<div class="col-sm-12">
<h2>
Status messages
<span
@ -137,8 +126,7 @@
/>
</span>
</h2>
</div>
<div class="col-sm-12">
<div>
<label class="opt">
<input
:checked="$store.state.settings.statusMessages === 'shown'"
@ -167,10 +155,8 @@
Hide all status messages
</label>
</div>
<div class="col-sm-12">
<h2>Visual Aids</h2>
</div>
<div class="col-sm-12">
<div>
<label class="opt">
<input
:checked="$store.state.settings.coloredNicks"
@ -188,7 +174,7 @@
Enable autocomplete
</label>
</div>
<div v-if="$store.state.settings.advanced" class="col-sm-12">
<div v-if="$store.state.settings.advanced">
<label class="opt">
<label for="nickPostfix" class="sr-only">
Nick autocomplete postfix (e.g. <code>, </code>)
@ -204,10 +190,8 @@
</label>
</div>
<div class="col-sm-12">
<h2>Theme</h2>
</div>
<div class="col-sm-12">
<div>
<label for="theme-select" class="sr-only">Theme</label>
<select
id="theme-select"
@ -226,10 +210,8 @@
</div>
<template v-if="$store.state.serverConfiguration.prefetch">
<div class="col-sm-12">
<h2>Link previews</h2>
</div>
<div class="col-sm-6">
<div>
<label class="opt">
<input
:checked="$store.state.settings.media"
@ -239,7 +221,7 @@
Auto-expand media
</label>
</div>
<div class="col-sm-6">
<div>
<label class="opt">
<input
:checked="$store.state.settings.links"
@ -252,10 +234,8 @@
</template>
<template v-if="!$store.state.serverConfiguration.public">
<div class="col-sm-12">
<h2>Push Notifications</h2>
</div>
<div class="col-sm-12">
<div>
<button
id="pushNotifications"
type="button"
@ -277,23 +257,18 @@
</template>
</button>
<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
<strong>Warning</strong>: Push notifications are only supported over
HTTPS connections.
<strong>Warning</strong>: Push notifications are only supported over HTTPS
connections.
</div>
<div
v-if="$store.state.pushNotificationState === 'unsupported'"
class="error"
>
<div v-if="$store.state.pushNotificationState === 'unsupported'" class="error">
<strong>Warning</strong>:
<span>Push notifications are not supported by your browser.</span>
</div>
</div>
</template>
<div class="col-sm-12">
<h2>Browser Notifications</h2>
</div>
<div class="col-sm-12">
<div>
<label class="opt">
<input
id="desktopNotifications"
@ -306,8 +281,7 @@
v-if="$store.state.desktopNotificationState === 'unsupported'"
class="error"
>
<strong>Warning</strong>: Notifications are not supported by your
browser.
<strong>Warning</strong>: Notifications are not supported by your browser.
</div>
<div
v-if="$store.state.desktopNotificationState === 'blocked'"
@ -318,7 +292,7 @@
</div>
</label>
</div>
<div class="col-sm-12">
<div>
<label class="opt">
<input
:checked="$store.state.settings.notification"
@ -328,13 +302,13 @@
Enable notification sound
</label>
</div>
<div class="col-sm-12">
<div>
<div class="opt">
<button id="play" @click.prevent="playNotification">Play sound</button>
</div>
</div>
<div v-if="$store.state.settings.advanced" class="col-sm-12">
<div v-if="$store.state.settings.advanced">
<label class="opt">
<input
:checked="$store.state.settings.notifyAllMessages"
@ -345,7 +319,7 @@
</label>
</div>
<div v-if="$store.state.settings.advanced" class="col-sm-12">
<div v-if="$store.state.settings.advanced">
<label class="opt">
<label for="highlights" class="sr-only">
Custom highlights (comma-separated keywords)
@ -368,10 +342,8 @@
"
id="change-password"
>
<div class="col-sm-12">
<h2>Change password</h2>
</div>
<div class="col-sm-12 password-container">
<div class="password-container">
<label for="old_password_input" class="sr-only">
Enter current password
</label>
@ -385,7 +357,7 @@
/>
</RevealPassword>
</div>
<div class="col-sm-12 password-container">
<div class="password-container">
<label for="new_password_input" class="sr-only">
Enter desired new password
</label>
@ -399,7 +371,7 @@
/>
</RevealPassword>
</div>
<div class="col-sm-12 password-container">
<div class="password-container">
<label for="verify_password_input" class="sr-only">
Repeat new password
</label>
@ -415,27 +387,25 @@
</div>
<div
v-if="passwordChangeStatus && passwordChangeStatus.success"
class="col-sm-12 feedback success"
class="feedback success"
>
Successfully updated your password
</div>
<div
v-else-if="passwordChangeStatus && passwordChangeStatus.error"
class="col-sm-12 feedback error"
class="feedback error"
>
{{ passwordErrors[passwordChangeStatus.error] }}
</div>
<div class="col-sm-12">
<div>
<button type="submit" class="btn" @click.prevent="changePassword">
Change password
</button>
</div>
</div>
<div v-if="$store.state.settings.advanced" class="col-sm-12">
<div v-if="$store.state.settings.advanced">
<h2>Custom Stylesheet</h2>
</div>
<div v-if="$store.state.settings.advanced" class="col-sm-12">
<label for="user-specified-css-input" class="sr-only">
Custom stylesheet. You can override any style with CSS here.
</label>
@ -447,30 +417,27 @@
placeholder="/* You can override any style with CSS here */"
/>
</div>
</div>
<div v-if="!$store.state.serverConfiguration.public" class="session-list">
<h2>Sessions</h2>
<h3>Current session</h3>
<div v-if="$store.getters.currentSession" id="session-current">
<Session :session="$store.getters.currentSession" />
</div>
<Session
v-if="$store.getters.currentSession"
:session="$store.getters.currentSession"
/>
<h3>Other sessions</h3>
<div id="session-list">
<p v-if="$store.state.sessions.length == 0">Loading…</p>
<p v-else-if="$store.getters.otherSessions.length == 0">
<p v-if="$store.state.sessions.length === 0">Loading…</p>
<p v-else-if="$store.getters.otherSessions.length === 0">
<em>You are not currently logged in to any other device.</em>
</p>
<template v-else>
<Session
v-for="session in $store.getters.otherSessions"
v-else
:key="session.token"
:session="session"
/>
</template>
</div>
</div>
</form>
</div>

15
client/css/style.css
View File

@ -396,12 +396,19 @@ p {
#help .documentation-link::before { content: "\f19d"; /* http://fontawesome.io/icon/graduation-cap/ */ }
#help .report-issue-link::before { content: "\f188"; /* http://fontawesome.io/icon/bug/ */ }
.session-list strong {
display: block;
.session-list .session-item {
display: flex;
font-size: 14px;
}
.session-list p {
margin-bottom: 10px;
.session-list .session-item-info {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.session-list .session-item-btn {
flex-shrink: 0;
}
#chat .invite .from::before {