This commit is contained in:
Richard Lewis 2019-03-01 16:18:16 +02:00 committed by Pavel Djundik
parent 5a3ad194e8
commit 08635beb61
8 changed files with 231 additions and 128 deletions

View file

@ -2,18 +2,22 @@
<div
id="viewport"
:class="{notified: $store.state.isNotified}"
role="tablist">
role="tablist"
>
<Sidebar
:networks="networks"
:active-channel="activeChannel" />
:active-channel="activeChannel"
/>
<article id="windows">
<Chat
v-if="activeChannel"
:network="activeChannel.network"
:channel="activeChannel.channel" />
:channel="activeChannel.channel"
/>
<component
:is="$store.state.activeWindow"
ref="window" />
ref="window"
/>
</article>
</div>
</template>

View file

@ -3,11 +3,13 @@
id="connect"
class="window"
role="tabpanel"
aria-label="Connect">
aria-label="Connect"
>
<div class="header">
<button
class="lt"
aria-label="Toggle channel list" />
aria-label="Toggle channel list"
/>
</div>
<form
class="container"
@ -23,7 +25,8 @@
<input
type="hidden"
name="uuid"
:value="defaults.uuid">
:value="defaults.uuid"
>
Edit {{ defaults.name }}
</template>
<template v-else>
@ -51,7 +54,8 @@
class="input"
name="name"
:value="defaults.name"
maxlength="100">
maxlength="100"
>
</div>
<div class="col-sm-3">
<label for="connect:host">Server</label>
@ -121,7 +125,8 @@
name="nick"
:value="defaults.nick"
maxlength="100"
required>
required
>
</div>
<template v-if="!config.useHexIp">
<div class="col-sm-3">
@ -133,7 +138,8 @@
class="input username"
name="username"
:value="defaults.username"
maxlength="512">
maxlength="512"
>
</div>
</template>
<div class="col-sm-3">
@ -147,7 +153,8 @@
class="input"
:type="slotProps.isVisible ? 'text' : 'password'"
name="password"
maxlength="512">
maxlength="512"
>
</RevealPassword>
</div>
<div class="col-sm-3">
@ -159,7 +166,8 @@
class="input"
name="realname"
:value="defaults.realname"
maxlength="512">
maxlength="512"
>
</div>
<template v-if="defaults.uuid">
<div class="col-sm-3">
@ -191,7 +199,8 @@
id="connect:channels"
class="input"
name="join"
:value="defaults.join">
:value="defaults.join"
>
</div>
<div class="col-sm-9 col-sm-offset-3">
<button

View file

@ -9,9 +9,11 @@
{ 'reveal-password-visible': isVisible },
]"
:aria-label="isVisible ? 'Hide password' : 'Show password'"
@click="onClick">
@click="onClick"
>
<span
:aria-label="isVisible ? 'Hide password' : 'Show password'" />
:aria-label="isVisible ? 'Hide password' : 'Show password'"
/>
</span>
</div>
</template>

View file

@ -6,53 +6,64 @@
<img
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
class="logo"
alt="The Lounge">
alt="The Lounge"
>
<img
:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
class="logo-inverted"
alt="The Lounge">
alt="The Lounge"
>
</div>
<NetworkList
:networks="networks"
:active-channel="activeChannel" />
:active-channel="activeChannel"
/>
</div>
<footer id="footer">
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Sign in"><button
aria-label="Sign in"
><button
class="icon sign-in"
data-target="SignIn"
aria-label="Sign in"
role="tab"
aria-controls="sign-in"
aria-selected="false" /></span>
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Connect to network"><button
aria-label="Connect to network"
><button
class="icon connect"
data-target="Connect"
aria-label="Connect to network"
role="tab"
aria-controls="connect"
aria-selected="false" /></span>
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Settings"><button
aria-label="Settings"
><button
class="icon settings"
data-target="Settings"
aria-label="Settings"
role="tab"
aria-controls="settings"
aria-selected="false" /></span>
aria-selected="false"
/></span>
<span
class="tooltipped tooltipped-n tooltipped-no-touch"
aria-label="Help"><button
aria-label="Help"
><button
class="icon help"
data-target="Help"
aria-label="Help"
role="tab"
aria-controls="help"
aria-selected="false" /></span>
aria-selected="false"
/></span>
</footer>
</aside>
<div id="sidebar-overlay" />

View file

@ -2,17 +2,20 @@
<div
id="changelog"
class="window"
aria-label="Changelog">
aria-label="Changelog"
>
<div class="header">
<button
class="lt"
aria-label="Toggle channel list" />
aria-label="Toggle channel list"
/>
</div>
<div class="container">
<a
id="back-to-help"
href="#"
data-target="Help">« Help</a>
data-target="Help"
>« Help</a>
<template v-if="version">
<h1 class="title">Release notes for {{ version }}</h1>
@ -27,7 +30,8 @@
<a
:href="`https://github.com/thelounge/thelounge/releases/tag/v${version}`"
target="_blank"
rel="noopener">View release notes for this version on GitHub</a>
rel="noopener"
>View release notes for this version on GitHub</a>
</p>
</template>
</template>

View file

@ -3,11 +3,13 @@
id="help"
class="window"
role="tabpanel"
aria-label="Help">
aria-label="Help"
>
<div class="header">
<button
class="lt"
aria-label="Toggle channel list" />
aria-label="Toggle channel list"
/>
</div>
<div class="container">
<h1 class="title">Help</h1>
@ -18,7 +20,8 @@
(<a
id="view-changelog"
href="#"
data-target="Changelog">release notes</a>)
data-target="Changelog"
>release notes</a>)
</small>
About The Lounge
</h2>
@ -32,7 +35,8 @@
(<a
:href="`https://github.com/thelounge/thelounge/tree/${$root.serverConfiguration.gitCommit}`"
target="_blank"
rel="noopener">commit <code>{{ $root.serverConfiguration.gitCommit }}</code></a>).
rel="noopener"
>commit <code>{{ $root.serverConfiguration.gitCommit }}</code></a>).
</p>
<ul>
@ -41,7 +45,8 @@
<a
:href="`https://github.com/thelounge/thelounge/compare/${$root.serverConfiguration.gitCommit}...master`"
target="_blank"
rel="noopener">between <code>{{ $root.serverConfiguration.gitCommit }}</code> and <code>master</code></a>
rel="noopener"
>between <code>{{ $root.serverConfiguration.gitCommit }}</code> and <code>master</code></a>
to see what you are missing
</li>
<li>
@ -49,7 +54,8 @@
<a
:href="`https://github.com/thelounge/thelounge/compare/${$root.serverConfiguration.version}...${$root.serverConfiguration.gitCommit}`"
target="_blank"
rel="noopener">between <code>{{ $root.serverConfiguration.version }}</code> and <code>{{ $root.serverConfiguration.gitCommit }}</code></a>
rel="noopener"
>between <code>{{ $root.serverConfiguration.version }}</code> and <code>{{ $root.serverConfiguration.gitCommit }}</code></a>
to see your local changes</li>
</ul>
</template>
@ -59,21 +65,24 @@
href="https://thelounge.chat/"
target="_blank"
rel="noopener"
class="website-link">Website</a>
class="website-link"
>Website</a>
</p>
<p>
<a
href="https://thelounge.chat/docs/"
target="_blank"
rel="noopener"
class="documentation-link">Documentation</a>
class="documentation-link"
>Documentation</a>
</p>
<p>
<a
href="https://github.com/thelounge/thelounge/issues/new"
target="_blank"
rel="noopener"
class="report-issue-link">Report an issue</a>
class="report-issue-link"
>Report an issue</a>
</p>
</div>
@ -151,7 +160,8 @@
<a
href="https://modern.ircdocs.horse/formatting.html#colors"
target="_blank"
rel="noopener">here</a>.
rel="noopener"
>here</a>.
</p>
</div>
</div>
@ -342,7 +352,8 @@
<a
href="https://en.wikipedia.org/wiki/Client-to-client_protocol"
target="_blank"
rel="noopener">the dedicated Wikipedia article</a>.
rel="noopener"
>the dedicated Wikipedia article</a>.
</p>
</div>
</div>

View file

@ -3,11 +3,13 @@
id="settings"
class="window"
role="tabpanel"
aria-label="Settings">
aria-label="Settings"
>
<div class="header">
<button
class="lt"
aria-label="Toggle channel list" />
aria-label="Toggle channel list"
/>
</div>
<div class="container">
<h1 class="title">Settings</h1>
@ -17,7 +19,8 @@
<label class="opt">
<input
type="checkbox"
name="advanced">
name="advanced"
>
Advanced settings
</label>
</div>
@ -27,37 +30,44 @@
<div
id="native-app"
class="col-sm-12"
hidden>
hidden
>
<h2>Native app</h2>
<button
id="webapp-install-button"
type="button"
class="btn"
hidden>Add The Lounge to Home screen</button>
hidden
>Add The Lounge to Home screen</button>
<button
id="make-default-client"
type="button"
class="btn">Open irc:// URLs with The Lounge</button>
class="btn"
>Open irc:// URLs with The Lounge</button>
</div>
<div
v-if="!this.$root.serverConfiguration.public"
class="col-sm-12"
data-advanced>
data-advanced
>
<h2>
Settings synchronisation
<span
class="tooltipped tooltipped-n tooltipped-no-delay"
aria-label="Note: This is an experimental feature and may change in future releases.">
aria-label="Note: This is an experimental feature and may change in future releases."
>
<button
class="extra-experimental"
aria-label="Note: This is an experimental feature and may change in future releases." />
aria-label="Note: This is an experimental feature and may change in future releases."
/>
</span>
</h2>
<label class="opt">
<input
type="checkbox"
name="syncSettings">
name="syncSettings"
>
Synchronize settings with other clients.
</label>
<p class="sync-warning-override"><strong>Warning</strong> Checking this box will override the settings of this client with those stored on the server.</p>
@ -66,7 +76,8 @@
<button
type="button"
class="btn"
@click="onForceSyncClick">Force sync settings</button>
@click="onForceSyncClick"
>Force sync settings</button>
<p>This will override any settings already synced to the server.</p>
</div>
</div>
@ -78,7 +89,8 @@
<label class="opt">
<input
type="checkbox"
name="motd">
name="motd"
>
Show <abbr title="Message Of The Day">MOTD</abbr>
</label>
</div>
@ -86,7 +98,8 @@
<label class="opt">
<input
type="checkbox"
name="showSeconds">
name="showSeconds"
>
Show seconds in timestamp
</label>
</div>
@ -95,10 +108,12 @@
Status messages
<span
class="tooltipped tooltipped-n tooltipped-no-delay"
aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes">
aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
>
<button
class="extra-help"
aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes" />
aria-label="Joins, parts, kicks, nick changes, away changes, and mode changes"
/>
</span>
</h2>
</div>
@ -107,21 +122,24 @@
<input
type="radio"
name="statusMessages"
value="shown">
value="shown"
>
Show all status messages individually
</label>
<label class="opt">
<input
type="radio"
name="statusMessages"
value="condensed">
value="condensed"
>
Condense status messages together
</label>
<label class="opt">
<input
type="radio"
name="statusMessages"
value="hidden">
value="hidden"
>
Hide all status messages
</label>
</div>
@ -132,29 +150,34 @@
<label class="opt">
<input
type="checkbox"
name="coloredNicks">
name="coloredNicks"
>
Enable colored nicknames
</label>
<label class="opt">
<input
type="checkbox"
name="autocomplete">
name="autocomplete"
>
Enable autocomplete
</label>
</div>
<div
class="col-sm-12"
data-advanced>
data-advanced
>
<label class="opt">
<label
for="nickPostfix"
class="sr-only">Nick autocomplete postfix (e.g. <code>, </code>)</label>
class="sr-only"
>Nick autocomplete postfix (e.g. <code>, </code>)</label>
<input
id="nickPostfix"
type="text"
name="nickPostfix"
class="input"
placeholder="Nick autocomplete postfix (e.g. ', ')">
placeholder="Nick autocomplete postfix (e.g. ', ')"
>
</label>
</div>
@ -164,14 +187,17 @@
<div class="col-sm-12">
<label
for="theme-select"
class="sr-only">Theme</label>
class="sr-only"
>Theme</label>
<select
id="theme-select"
name="theme"
class="input">
class="input"
>
<option
v-for="theme in this.$root.serverConfiguration.themes"
:key="theme.name">
:key="theme.name"
>
{{ theme.displayName }}
</option>
</select>
@ -185,7 +211,8 @@
<label class="opt">
<input
type="checkbox"
name="media">
name="media"
>
Auto-expand media
</label>
</div>
@ -193,7 +220,8 @@
<label class="opt">
<input
type="checkbox"
name="links">
name="links"
>
Auto-expand websites
</label>
</div>
@ -209,16 +237,19 @@
type="button"
class="btn"
disabled
data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
data-text-alternate="Unsubscribe from push notifications"
>Subscribe to push notifications</button>
<div
v-if="this.$root.pushNotificationState === 'nohttps'"
class="error">
class="error"
>
<strong>Warning</strong>:
Push notifications are only supported over HTTPS connections.
</div>
<div
v-if="this.$root.pushNotificationState === 'unsupported'"
class="error">
class="error"
>
<strong>Warning</strong>:
<span>Push notifications are not supported by your browser.</span>
</div>
@ -233,18 +264,21 @@
<input
id="desktopNotifications"
type="checkbox"
name="desktopNotifications">
name="desktopNotifications"
>
Enable browser notifications<br>
<div
v-if="this.$root.desktopNotificationState === 'unsupported'"
class="error">
class="error"
>
<strong>Warning</strong>:
Notifications are not supported by your browser.
</div>
<div
v-if="this.$root.desktopNotificationState === 'blocked'"
id="warnBlockedDesktopNotifications"
class="error">
class="error"
>
<strong>Warning</strong>:
Notifications are blocked by your browser.
</div>
@ -254,7 +288,8 @@
<label class="opt">
<input
type="checkbox"
name="notification">
name="notification"
>
Enable notification sound
</label>
</div>
@ -266,38 +301,45 @@
<div
class="col-sm-12"
data-advanced>
data-advanced
>
<label class="opt">
<input
type="checkbox"
name="notifyAllMessages">
name="notifyAllMessages"
>
Enable notification for all messages
</label>
</div>
<div
class="col-sm-12"
data-advanced>
data-advanced
>
<label class="opt">
<label
for="highlights"
class="sr-only">Custom highlights (comma-separated keywords)</label>
class="sr-only"
>Custom highlights (comma-separated keywords)</label>
<input
id="highlights"
type="text"
name="highlights"
class="input"
placeholder="Custom highlights (comma-separated keywords)">
placeholder="Custom highlights (comma-separated keywords)"
>
</label>
</div>
<div
v-if="!this.$root.serverConfiguration.public && !this.$root.serverConfiguration.ldapEnabled"
id="change-password">
id="change-password"
>
<form
action=""
method="post"
data-event="change-password">
data-event="change-password"
>
<div class="col-sm-12">
<h2>Change password</h2>
</div>
@ -305,68 +347,80 @@
<!-- TODO: use revealPassword -->
<label
for="old_password_input"
class="sr-only">Enter current password</label>
class="sr-only"
>Enter current password</label>
<input
id="old_password_input"
type="password"
name="old_password"
class="input"
placeholder="Enter current password">
placeholder="Enter current password"
>
</div>
<div class="col-sm-12 password-container">
<label
for="new_password_input"
class="sr-only">Enter desired new password</label>
class="sr-only"
>Enter desired new password</label>
<input
id="new_password_input"
type="password"
name="new_password"
class="input"
placeholder="Enter desired new password">
placeholder="Enter desired new password"
>
</div>
<div class="col-sm-12 password-container">
<label
for="verify_password_input"
class="sr-only">Repeat new password</label>
class="sr-only"
>Repeat new password</label>
<input
id="verify_password_input"
type="password"
name="verify_password"
class="input"
placeholder="Repeat new password">
placeholder="Repeat new password"
>
</div>
<div class="col-sm-12 feedback" />
<div class="col-sm-12">
<button
type="submit"
class="btn">Change password</button>
class="btn"
>Change password</button>
</div>
</form>
</div>
<div
class="col-sm-12"
data-advanced>
data-advanced
>
<h2>Custom Stylesheet</h2>
</div>
<div
class="col-sm-12"
data-advanced>
data-advanced
>
<label
for="user-specified-css-input"
class="sr-only">Custom stylesheet. You can override any style with CSS here.</label>
class="sr-only"
>Custom stylesheet. You can override any style with CSS here.</label>
<textarea
id="user-specified-css-input"
v-model="$root.settings.userStyles"
class="input"
name="userStyles"
placeholder="/* You can override any style with CSS here */" />
placeholder="/* You can override any style with CSS here */"
/>
</div>
</div>
<div
v-if="!this.$root.serverConfiguration.public"
class="session-list">
class="session-list"
>
<h2>Sessions</h2>
<h3>Current session</h3>

View file

@ -3,24 +3,28 @@
id="sign-in"
class="window"
role="tabpanel"
aria-label="Sign-in">
aria-label="Sign-in"
>
<form
class="container"
method="post"
action=""
@submit="onSubmit">
@submit="onSubmit"
>
<img
src="img/logo-vertical-transparent-bg.svg"
class="logo"
alt="The Lounge"
width="256"
height="170">
height="170"
>
<img
src="img/logo-vertical-transparent-bg-inverted.svg"
class="logo-inverted"
alt="The Lounge"
width="256"
height="170">
height="170"
>
<label for="signin-username">Username</label>
<input
@ -34,7 +38,8 @@
autocomplete="username"
:value="getStoredUser()"
required
autofocus>
autofocus
>
<div class="password-container">
<label for="signin-password">Password</label>
@ -48,18 +53,21 @@
autocapitalize="none"
autocorrect="off"
autocomplete="current-password"
required>
required
>
</RevealPassword>
</div>
<div
v-if="errorShown"
class="error">Authentication failed.</div>
class="error"
>Authentication failed.</div>
<button
:disabled="inFlight"
type="submit"
class="btn">Sign in</button>
class="btn"
>Sign in</button>
</form>
</div>
</template>