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

Merge pull request #3586 from thelounge/xpaw/msg-data-type

Browse Source 
Use data-type attribute on .msg
This commit is contained in:
Pavel Djundik 2019-12-15 19:10:30 +02:00 committed by GitHub
commit 61369b3e5a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 79 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/components/Message.vue
View File

@ -1,7 +1,8 @@
<template> <template>
<div <div
:id="'msg-' + message.id" :id="'msg-' + message.id"
:class="['msg', message.type, {self: message.self, highlight: message.highlight}]" :class="['msg', {self: message.self, highlight: message.highlight}]"
:data-type="message.type"
:data-from="message.from && message.from.nick" :data-from="message.from && message.from.nick"
> >
<span :aria-label="message.time | localetime" class="time tooltipped tooltipped-e" <span :aria-label="message.time | localetime" class="time tooltipped tooltipped-e"

2
client/components/MessageCondensed.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="['msg', 'condensed', {closed: isCollapsed}]"> <div :class="['msg', {closed: isCollapsed}]" data-type="condensed">
<div class="condensed-summary"> <div class="condensed-summary">
<span class="time" /> <span class="time" />
<span class="from" /> <span class="from" />

146
client/css/style.css
View File

@ -143,7 +143,7 @@ button {
code, code,
pre, pre,
#chat .msg.motd .text, #chat .msg[data-type="motd"] .text,
.irc-monospace, .irc-monospace,
textarea#user-specified-css-input { textarea#user-specified-css-input {
font-family: Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace; font-family: Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
@ -267,7 +267,7 @@ p {
left: -999999px; left: -999999px;
} }
#chat #js-copy-hack .condensed:not(.closed) .msg, #chat #js-copy-hack .msg[data-type="condensed"]:not(.closed) .msg,
#chat #js-copy-hack > .msg { #chat #js-copy-hack > .msg {
display: block; display: block;
} }
@ -290,24 +290,24 @@ p {
#settings #play::before, #settings #play::before,
#form #upload::before, #form #upload::before,
#form #submit::before, #form #submit::before,
#chat .away .from::before, #chat .msg[data-type="away"] .from::before,
#chat .back .from::before, #chat .msg[data-type="back"] .from::before,
#chat .invite .from::before, #chat .msg[data-type="invite"] .from::before,
#chat .join .from::before, #chat .msg[data-type="join"] .from::before,
#chat .kick .from::before, #chat .msg[data-type="kick"] .from::before,
#chat .part .from::before, #chat .msg[data-type="part"] .from::before,
#chat .quit .from::before, #chat .msg[data-type="quit"] .from::before,
#chat .topic .from::before, #chat .msg[data-type="topic"] .from::before,
#chat .mode_channel .from::before, #chat .msg[data-type="mode_channel"] .from::before,
#chat .mode .from::before, #chat .msg[data-type="mode"] .from::before,
#chat .motd .from::before, #chat .msg[data-type="motd"] .from::before,
#chat .ctcp .from::before, #chat .msg[data-type="ctcp"] .from::before,
#chat .ctcp_request .from::before, #chat .msg[data-type="ctcp_request"] .from::before,
#chat .whois .from::before, #chat .msg[data-type="whois"] .from::before,
#chat .nick .from::before, #chat .msg[data-type="nick"] .from::before,
#chat .action .from::before, #chat .msg[data-type="action"] .from::before,
#chat .plugin .from::before, #chat .msg[data-type="plugin"] .from::before,
#chat .raw .from::before, #chat .msg[data-type="raw"] .from::before,
#chat .toggle-button::after, #chat .toggle-button::after,
#chat .toggle-content .more-caret::before, #chat .toggle-content .more-caret::before,
#chat .scroll-down-arrow::after, #chat .scroll-down-arrow::after,
@ -374,8 +374,8 @@ p {
#form #upload::before { content: "\f0c6"; /* https://fontawesome.com/icons/paperclip?style=solid */ } #form #upload::before { content: "\f0c6"; /* https://fontawesome.com/icons/paperclip?style=solid */ }
#form #submit::before { content: "\f1d8"; /* http://fontawesome.io/icon/paper-plane/ */ } #form #submit::before { content: "\f1d8"; /* http://fontawesome.io/icon/paper-plane/ */ }
#chat .away .from::before, #chat .msg[data-type="away"] .from::before,
#chat .back .from::before { #chat .msg[data-type="back"] .from::before {
content: "\f017"; /* https://fontawesome.com/icons/clock?style=solid */ content: "\f017"; /* https://fontawesome.com/icons/clock?style=solid */
color: #7f8c8d; color: #7f8c8d;
} }
@ -410,75 +410,75 @@ p {
flex-shrink: 0; flex-shrink: 0;
} }
#chat .invite .from::before { #chat .msg[data-type="invite"] .from::before {
content: "\f0e0"; /* https://fontawesome.com/icons/envelope?style=solid */ content: "\f0e0"; /* https://fontawesome.com/icons/envelope?style=solid */
color: #2ecc40; color: #2ecc40;
} }
#chat .part .from::before, #chat .msg[data-type="part"] .from::before,
#chat .quit .from::before { #chat .msg[data-type="quit"] .from::before {
content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */ content: "\f2f5"; /* https://fontawesome.com/icons/sign-out-alt?style=solid */
color: #ff4136; color: #ff4136;
display: inline-block; display: inline-block;
transform: rotate(180deg); transform: rotate(180deg);
} }
#chat .topic .from::before { #chat .msg[data-type="topic"] .from::before {
content: "\f0a1"; /* http://fontawesome.io/icon/bullhorn/ */ content: "\f0a1"; /* http://fontawesome.io/icon/bullhorn/ */
color: #2ecc40; color: #2ecc40;
} }
#chat .mode_channel .from::before, #chat .msg[data-type="mode_channel"] .from::before,
#chat .mode .from::before { #chat .msg[data-type="mode"] .from::before {
content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */ content: "\f05a"; /* http://fontawesome.io/icon/info-circle/ */
color: #2ecc40; color: #2ecc40;
} }
#chat .motd .from::before { #chat .msg[data-type="motd"] .from::before {
content: "\f02e"; /* https://fontawesome.com/icons/bookmark?style=solid */ content: "\f02e"; /* https://fontawesome.com/icons/bookmark?style=solid */
color: var(--body-color-muted); color: var(--body-color-muted);
} }
#chat .ctcp .from::before, #chat .msg[data-type="ctcp"] .from::before,
#chat .ctcp_request .from::before { #chat .msg[data-type="ctcp_request"] .from::before {
content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */ content: "\f15c"; /* https://fontawesome.com/icons/file-alt?style=solid */
color: var(--body-color-muted); color: var(--body-color-muted);
} }
#chat .whois .from::before { #chat .msg[data-type="whois"] .from::before {
content: "\f007"; /* http://fontawesome.io/icon/user/ */ content: "\f007"; /* http://fontawesome.io/icon/user/ */
color: #2ecc40; color: #2ecc40;
} }
#chat .nick .from::before { #chat .msg[data-type="nick"] .from::before {
content: "\f007"; /* http://fontawesome.io/icon/user/ */ content: "\f007"; /* http://fontawesome.io/icon/user/ */
color: #2ecc40; color: #2ecc40;
} }
#chat .join .from::before { #chat .msg[data-type="join"] .from::before {
content: "\f2f6"; /* https://fontawesome.com/icons/sign-in-alt?style=solid */ content: "\f2f6"; /* https://fontawesome.com/icons/sign-in-alt?style=solid */
color: #2ecc40; color: #2ecc40;
} }
#chat .kick .from::before { #chat .msg[data-type="kick"] .from::before {
content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ content: "\f05e"; /* http://fontawesome.io/icon/ban/ */
color: #ff4136; color: #ff4136;
} }
#chat .raw .from::before { #chat .msg[data-type="raw"] .from::before {
content: "\f101"; /* https://fontawesome.com/icons/angle-double-right?style=solid */ content: "\f101"; /* https://fontawesome.com/icons/angle-double-right?style=solid */
} }
#chat .raw.self .from::before { #chat .msg.self[data-type="raw"] .from::before {
content: "\f359"; /* https://fontawesome.com/icons/arrow-alt-circle-left?style=solid */ content: "\f359"; /* https://fontawesome.com/icons/arrow-alt-circle-left?style=solid */
color: #2ecc40; color: #2ecc40;
} }
#chat .action .from::before { #chat .msg[data-type="action"] .from::before {
content: "\f005"; /* http://fontawesome.io/icon/star/ */ content: "\f005"; /* http://fontawesome.io/icon/star/ */
} }
#chat .plugin .from::before { #chat .msg[data-type="plugin"] .from::before {
content: "\f1e6"; /* http://fontawesome.io/icon/plug/ */ content: "\f1e6"; /* http://fontawesome.io/icon/plug/ */
transform: rotate(45deg); transform: rotate(45deg);
display: inline-block; display: inline-block;
@ -1056,16 +1056,16 @@ textarea.input {
flex-direction: column; flex-direction: column;
} }
#chat .condensed { #chat .msg[data-type="condensed"] {
flex-wrap: wrap; flex-wrap: wrap;
} }
#chat .condensed .content { #chat .msg[data-type="condensed"] .content {
flex: 1; flex: 1;
} }
/* Ensures expanded status messages always take up the full width */ /* Ensures expanded status messages always take up the full width */
#chat .condensed .msg { #chat .msg[data-type="condensed"] .msg {
flex-basis: 100%; flex-basis: 100%;
} }
@ -1083,7 +1083,7 @@ textarea.input {
text-decoration: underline; text-decoration: underline;
} }
#chat .condensed.closed .msg { #chat .msg.closed[data-type="condensed"] .msg {
display: none; display: none;
} }
@ -1309,7 +1309,7 @@ textarea.input {
text-align: left; /* so RTL text will still be aligned left, not right */ text-align: left; /* so RTL text will still be aligned left, not right */
} }
#chat .unhandled .from { #chat .msg[data-type="unhandled"] .from {
color: var(--body-color-muted); color: var(--body-color-muted);
} }
@ -1422,49 +1422,49 @@ textarea.input {
width: 50px; width: 50px;
} }
#chat.hide-motd .motd { #chat.hide-motd .msg[data-type="motd"] {
display: none !important; display: none !important;
} }
#chat .msg.motd .text { #chat .msg[data-type="motd"] .text {
background: #f6f6f6; background: #f6f6f6;
display: inline-block; display: inline-block;
border-radius: 4px; border-radius: 4px;
padding: 6px; padding: 6px;
} }
#chat .condensed .content, #chat .msg[data-type="condensed"] .content,
#chat .away .content, #chat .msg[data-type="away"] .content,
#chat .back .content, #chat .msg[data-type="back"] .content,
#chat .join .content, #chat .msg[data-type="join"] .content,
#chat .kick .content, #chat .msg[data-type="kick"] .content,
#chat .mode .content, #chat .msg[data-type="mode"] .content,
#chat .nick .content, #chat .msg[data-type="nick"] .content,
#chat .part .content, #chat .msg[data-type="part"] .content,
#chat .quit .content, #chat .msg[data-type="quit"] .content,
#chat .topic .content, #chat .msg[data-type="topic"] .content,
#chat .topic_set_by .content { #chat .msg[data-type="topic_set_by"] .content {
color: var(--body-color-muted); color: var(--body-color-muted);
} }
#chat .action .from, #chat .msg[data-type="action"] .from,
#chat .action .content, #chat .msg[data-type="action"] .content,
#chat .action .user { #chat .msg[data-type="action"] .user {
color: #f39c12; color: #f39c12;
} }
#chat .notice .time, #chat .msg[data-type="notice"] .time,
#chat .notice .content, #chat .msg[data-type="notice"] .content,
#chat .chat-view .notice .user { #chat .msg[data-type="notice"] .user {
color: #0074d9 !important; color: #0074d9;
} }
#chat .notice .from .user::before { #chat .msg[data-type="notice"] .from .user::before {
content: "Notice: "; content: "Notice: ";
} }
#chat .error, #chat .msg[data-type="error"],
#chat .error .from { #chat .msg[data-type="error"] .from {
color: #e74c3c; color: #e74c3c;
} }
@ -1494,7 +1494,7 @@ textarea.input {
#chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */ #chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */
#chat .toggle-button.opened, /* Thumbnail toggle */ #chat .toggle-button.opened, /* Thumbnail toggle */
#chat .msg.condensed:not(.closed) .toggle-button { /* Expanded status message toggle */ #chat .msg:not(.closed)[data-type="condensed"] .toggle-button { /* Expanded status message toggle */
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -2615,7 +2615,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
padding: 2px 10px; padding: 2px 10px;
} }
#chat .condensed .msg { #chat .msg[data-type="condensed"] .msg {
padding: 2px 0; padding: 2px 0;
} }
@ -2780,14 +2780,14 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
For example: user has quit ( ===> L O L <=== ) */ For example: user has quit ( ===> L O L <=== ) */
.header .topic, .header .topic,
#chat .message .content, #chat .msg[data-type="action"] .content,
#chat .motd .content, #chat .msg[data-type="message"] .content,
#chat .notice .content, #chat .msg[data-type="motd"] .content,
#chat .msg[data-type="notice"] .content,
#chat .ctcp-message, #chat .ctcp-message,
#chat .part-reason, #chat .part-reason,
#chat .quit-reason, #chat .quit-reason,
#chat .new-topic, #chat .new-topic,
#chat .action .content,
#chat table.channel-list .topic { #chat table.channel-list .topic {
white-space: pre-wrap; white-space: pre-wrap;
} }

10
client/themes/morning.css
View File

@ -118,16 +118,12 @@ body {
} }
/* Setup text colors */ /* Setup text colors */
#chat .message { #chat .msg[data-type="error"],
color: #f3f3f3; #chat .msg[data-type="error"] .from {
}
#chat .error,
#chat .error .from {
color: #f92772; color: #f92772;
} }
#chat .msg.motd .text, #chat .msg[data-type="motd"] .text,
code, code,
.irc-monospace { .irc-monospace {
background: #28333d; background: #28333d;