Merge pull request #3787 from thelounge/xpaw/12h

Add an option to display 12h times

client/components/Chat.vue

@@ -5,7 +5,8 @@
 			:class="{
 				'hide-motd': !$store.state.settings.motd,
 				'colored-nicks': $store.state.settings.coloredNicks,
-				'show-seconds': $store.state.settings.showSeconds,
+				'time-seconds': $store.state.settings.showSeconds,
+				'time-12h': $store.state.settings.use12hClock,
 			}"
 		>
 			<div

client/components/Message.vue

@@ -100,12 +100,19 @@ export default {
 		isPreviousSource: Boolean,
 	},
 	computed: {
-		messageTime() {
-			const format = this.$store.state.settings.showSeconds
-				? constants.timeFormats.msgWithSeconds
-				: constants.timeFormats.msgDefault;
+		timeFormat() {
+			let format;
 
-			return dayjs(this.message.time).format(format);
+			if (this.$store.state.settings.use12hClock) {
+				format = this.$store.state.settings.showSeconds ? "msg12hWithSeconds" : "msg12h";
+			} else {
+				format = this.$store.state.settings.showSeconds ? "msgWithSeconds" : "msgDefault";
+			}
+
+			return constants.timeFormats[format];
+		},
+		messageTime() {
+			return dayjs(this.message.time).format(this.timeFormat);
 		},
 		messageTimeLocale() {
 			return localetime(this.message.time);

client/components/Windows/Settings.vue

@@ -88,6 +88,16 @@
 					Show seconds in timestamp
 				</label>
 			</div>
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.use12hClock"
+						type="checkbox"
+						name="use12hClock"
+					/>
+					Show 12-hour timestamps
+				</label>
+			</div>
 			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
 				<h2>Automatic away message</h2>
 

client/css/style.css

@@ -1309,12 +1309,18 @@ textarea.input {
 	padding-left: 10px;
 	width: 55px;
 	font-variant-numeric: tabular-nums;
+	box-sizing: content-box; /* highlights have a border-left */
 }
 
-#chat.show-seconds .time {
+#chat.time-12h .time,
+#chat.time-seconds .time {
 	width: 75px;
 }
 
+#chat.time-seconds.time-12h .time {
+	width: 90px;
+}
+
 #chat .from {
 	padding-right: 10px;
 	text-align: right;
@@ -1500,14 +1506,9 @@ textarea.input {
 
 #chat .chat-view[data-type="channel"] .msg.highlight .time {
 	padding-left: 5px;
-	width: 50px;
 	color: #696969;
 }
 
-#chat.show-seconds .chat-view[data-type="channel"] .msg.highlight .time {
-	width: 70px;
-}
-
 #chat .chat-view[data-type="channel"] .msg.highlight .content {
 	border-left: 1px solid var(--highlight-bg-color);
 }

client/js/constants.js

@@ -24,6 +24,8 @@ const condensedTypes = new Set(["chghost", "join", "part", "quit", "nick", "kick
 const timeFormats = {
 	msgDefault: "HH:mm",
 	msgWithSeconds: "HH:mm:ss",
+	msg12h: "hh:mm A",
+	msg12hWithSeconds: "hh:mm:ss A",
 };
 
 // This file is required by server, can't use es6 export

client/js/settings.js

@@ -64,6 +64,9 @@ export const config = normalizeConfig({
 	showSeconds: {
 		default: false,
 	},
+	use12hClock: {
+		default: false,
+	},
 	statusMessages: {
 		default: "condensed",
 	},