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

Improve UI of expanded/condensed status message selection in client settings

Browse Source
This commit is contained in:
Jérémie Astori 2017-08-06 00:49:22 -04:00
parent 0cdc2a0a04
commit b508783101
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
4 changed files with 58 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/css/style.css
View File

@ -1126,12 +1126,12 @@ kbd {
color: #555;
}
#chat.hide-optional .join,
#chat.hide-optional .mode,
#chat.hide-optional .nick,
#chat.hide-optional .part,
#chat.hide-optional .quit,
#chat.hide-optional .condensed,
#chat.hide-status-messages .join,
#chat.hide-status-messages .mode,
#chat.hide-status-messages .nick,
#chat.hide-status-messages .part,
#chat.hide-status-messages .quit,
#chat.hide-status-messages .condensed,
#chat.hide-motd .motd {
display: none !important;
}
@ -1397,12 +1397,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#settings .opt {
display: block;
padding: 5px 0 10px 1px;
padding: 5px 0 5px 1px;
}
#settings .opt input {
float: left;
margin: 4px 10px 0 0;
margin-right: 6px;
}
#settings .extra-help,
@ -1414,6 +1413,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
cursor: help;
}
#settings h2 .extra-help {
font-size: .8em;
}
#settings #play {
font-size: 14px;
transition: opacity .2s;

37
client/index.html
View File

@ -216,21 +216,6 @@
<div class="col-sm-12">
<h2>Messages</h2>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="optional">
Show status messages
<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, and mode changes">
<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, and mode changes"></button>
</span>
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="condense">
Condense status messages
</label>
</div>
<div class="col-sm-6">
<label class="opt">
<input type="checkbox" name="motd">
@ -243,6 +228,28 @@
Show seconds in timestamp
</label>
</div>
<div class="col-sm-12">
<h2>
Status messages
<span class="tooltipped tooltipped-n tooltipped-no-delay" aria-label="Joins, parts, kicks, nick changes, and mode changes">
<button class="extra-help" aria-label="Joins, parts, kicks, nick changes, and mode changes"></button>
</span>
</h2>
</div>
<div class="col-sm-12">
<label class="opt">
<input type="radio" name="statusMessages" value="shown">
Show all status messages individually
</label>
<label class="opt">
<input type="radio" name="statusMessages" value="condensed">
Condense status messages together
</label>
<label class="opt">
<input type="radio" name="statusMessages" value="hidden">
Hide all status messages
</label>
</div>
<div class="col-sm-12">
<h2>Visual Aids</h2>
</div>

30
client/js/options.js
View File

@ -9,22 +9,29 @@ const tz = require("./libs/handlebars/tz");
const windows = $("#windows");
const chat = $("#chat");
const options = $.extend({
// Default options
const options = {
autocomplete: true,
coloredNicks: true,
condense: true,
desktopNotifications: false,
highlights: [],
links: true,
motd: true,
notification: true,
notifyAllMessages: false,
optional: true,
showSeconds: false,
statusMessages: "condensed",
theme: $("#theme").attr("href").replace(/^themes\/(.*).css$/, "$1"), // Extracts default theme name, set on the server configuration
thumbnails: true,
userStyles: userStyles.text(),
highlights: [],
autocomplete: true
}, JSON.parse(storage.get("settings")));
};
const userOptions = JSON.parse(storage.get("settings")) || {};
for (const key in options) {
if (userOptions[key]) {
options[key] = userOptions[key];
}
}
module.exports = options;
@ -40,6 +47,9 @@ for (var i in options) {
settings.find("#user-specified-css-input").val(options[i]);
} else if (i === "highlights") {
settings.find("input[name=" + i + "]").val(options[i]);
} else if (i === "statusMessages") {
settings.find(`input[name=${i}][value=${options[i]}]`)
.prop("checked", true);
} else if (i === "theme") {
$("#theme").attr("href", "themes/" + options[i] + ".css");
settings.find("select[name=" + i + "]").val(options[i]);
@ -55,6 +65,10 @@ settings.on("change", "input, select, textarea", function() {
if (type === "password") {
return;
} else if (type === "radio") {
if (self.prop("checked")) {
options[name] = self.val();
}
} else if (type === "checkbox") {
options[name] = self.prop("checked");
} else {
@ -63,8 +77,10 @@ settings.on("change", "input, select, textarea", function() {
storage.set("settings", JSON.stringify(options));
if (name === "optional" || name === "motd") {
if (name === "motd") {
chat.toggleClass("hide-" + name, !self.prop("checked"));
} else if (name === "statusMessages") {
chat.toggleClass("hide-status-messages", options[name] === "hidden");
} else if (name === "coloredNicks") {
chat.toggleClass("colored-nicks", self.prop("checked"));
} else if (name === "theme") {

2
client/js/render.js
View File

@ -41,7 +41,7 @@ function appendMessage(container, chan, chanType, messageType, msg) {
if (lastChild && $(lastChild).hasClass("condensed") && !$(msg).hasClass("message") && lastDate === msgDate) {
lastChild.append(msg);
condense.updateText(lastChild, [messageType]);
} else if (lastChild && $(lastChild).is(condensedTypesClasses) && options.condense) {
} else if (lastChild && $(lastChild).is(condensedTypesClasses) && options.statusMessages === "condensed") {
var condensed = buildChatMessage({msg: {type: "condensed", time: msg.attr("data-time"), previews: []}, chan: chan});
condensed.append(lastChild);
condensed.append(msg);