deblan-mirror/thelounge
deblan-mirror/thelounge
1
0
Fork 0
mirror of https://github.com/thelounge/thelounge.git synced 2024-06-12 18:52:19 +02:00
Code Issues 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> </template>
<div class="connect-row"> <div class="connect-row">
<label for="connect:password">Password</label> <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 <input
id="connect:password" id="connect:password"
v-model="defaults.password" v-model="defaults.password"

32
client/components/Session.vue
View file

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

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

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