Move message time formatting to Vue as computed

This commit is contained in:
Pavel Djundik 2018-09-13 12:16:27 +03:00
parent 74edfcaa04
commit 395be41728
6 changed files with 15 additions and 24 deletions

View File

@ -61,7 +61,6 @@
<article id="windows"> <article id="windows">
<Chat <Chat
v-if="activeChannel" v-if="activeChannel"
:settings="settings"
:network="activeChannel.network" :network="activeChannel.network"
:channel="activeChannel.channel" /> :channel="activeChannel.channel" />
<div <div
@ -107,7 +106,6 @@ export default {
Chat, Chat,
}, },
props: { props: {
settings: Object,
activeChannel: Object, activeChannel: Object,
networks: Array, networks: Array,
}, },

View File

@ -6,9 +6,9 @@
id="chat" id="chat"
:data-id="channel.id" :data-id="channel.id"
:class="{ :class="{
'hide-motd': !settings.motd, 'hide-motd': !this.$root.settings.motd,
'colored-nicks': settings.coloredNicks, 'colored-nicks': this.$root.settings.coloredNicks,
'show-seconds': settings.showSeconds, 'show-seconds': this.$root.settings.showSeconds,
}"> }">
<div <div
:id="'chan-' + channel.id" :id="'chan-' + channel.id"
@ -59,8 +59,7 @@
class="chat-content"> class="chat-content">
<MessageList <MessageList
:network="network" :network="network"
:channel="channel" :channel="channel" />
:settings="settings" />
<ChatUserList <ChatUserList
v-if="channel.type === 'channel'" v-if="channel.type === 'channel'"
:channel="channel" /> :channel="channel" />
@ -96,7 +95,6 @@ export default {
ChatUserList, ChatUserList,
}, },
props: { props: {
settings: Object,
network: Object, network: Object,
channel: Object, channel: Object,
}, },

View File

@ -5,7 +5,7 @@
:data-from="message.from && message.from.nick"> :data-from="message.from && message.from.nick">
<span <span
:aria-label="message.time | localetime" :aria-label="message.time | localetime"
class="time tooltipped tooltipped-e">{{ message.time | tz }}</span> class="time tooltipped tooltipped-e">{{ messageTime }}</span>
<template v-if="message.type === 'unhandled'"> <template v-if="message.type === 'unhandled'">
<span class="from">[{{ message.command }}]</span> <span class="from">[{{ message.command }}]</span>
<span class="content"> <span class="content">
@ -60,6 +60,9 @@ import LinkPreview from "./LinkPreview.vue";
import ParsedMessage from "./ParsedMessage.vue"; import ParsedMessage from "./ParsedMessage.vue";
import MessageTypes from "./MessageTypes"; import MessageTypes from "./MessageTypes";
const moment = require("moment");
const constants = require("../js/constants");
MessageTypes.ParsedMessage = ParsedMessage; MessageTypes.ParsedMessage = ParsedMessage;
MessageTypes.LinkPreview = LinkPreview; MessageTypes.LinkPreview = LinkPreview;
MessageTypes.Username = Username; MessageTypes.Username = Username;
@ -73,6 +76,11 @@ export default {
keepScrollPosition: Function, keepScrollPosition: Function,
}, },
computed: { computed: {
messageTime() {
const format = this.$root.settings.showSeconds ? constants.timeFormats.msgWithSeconds : constants.timeFormats.msgDefault;
return moment(this.message.time).format(format);
},
messageComponent() { messageComponent() {
return "message-" + this.message.type; return "message-" + this.message.type;
}, },

View File

@ -80,7 +80,6 @@ export default {
DateMarker, DateMarker,
}, },
props: { props: {
settings: Object,
network: Object, network: Object,
channel: Object, channel: Object,
}, },
@ -91,12 +90,12 @@ export default {
} }
// If actions are hidden, just return a message list with them excluded // If actions are hidden, just return a message list with them excluded
if (this.settings.statusMessages === "hidden") { if (this.$root.settings.statusMessages === "hidden") {
return this.channel.messages.filter((message) => !constants.condensedTypes.includes(message.type)); return this.channel.messages.filter((message) => !constants.condensedTypes.includes(message.type));
} }
// If actions are not condensed, just return raw message list // If actions are not condensed, just return raw message list
if (this.settings.statusMessages !== "condensed") { if (this.$root.settings.statusMessages !== "condensed") {
return this.channel.messages; return this.channel.messages;
} }

View File

@ -1,10 +0,0 @@
"use strict";
const moment = require("moment");
const constants = require("../../constants");
module.exports = function(time) {
const options = require("../../options");
const format = options.settings.showSeconds ? constants.timeFormats.msgWithSeconds : constants.timeFormats.msgDefault;
return moment(time).format(format);
};

View File

@ -3,12 +3,10 @@
const Vue = require("vue").default; const Vue = require("vue").default;
const App = require("../components/App.vue").default; const App = require("../components/App.vue").default;
const roundBadgeNumber = require("./libs/handlebars/roundBadgeNumber"); const roundBadgeNumber = require("./libs/handlebars/roundBadgeNumber");
const tz = require("./libs/handlebars/tz");
const localetime = require("./libs/handlebars/localetime"); const localetime = require("./libs/handlebars/localetime");
const friendlysize = require("./libs/handlebars/friendlysize"); const friendlysize = require("./libs/handlebars/friendlysize");
const colorClass = require("./libs/handlebars/colorClass"); const colorClass = require("./libs/handlebars/colorClass");
Vue.filter("tz", tz);
Vue.filter("localetime", localetime); Vue.filter("localetime", localetime);
Vue.filter("friendlysize", friendlysize); Vue.filter("friendlysize", friendlysize);
Vue.filter("colorClass", colorClass); Vue.filter("colorClass", colorClass);