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

Merge pull request #3345 from Jay2k1/patch-1

Browse Source 
improve RTL text support
This commit is contained in:
Pavel Djundik 2019-10-31 16:32:01 +02:00 committed by GitHub
commit 372f9f7ce4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/components/ChatInput.vue
View File

@ -4,6 +4,7 @@
<textarea <textarea
id="input" id="input"
ref="input" ref="input"
dir="auto"
:value="channel.pendingMessage" :value="channel.pendingMessage"
:placeholder="getInputPlaceholder(channel)" :placeholder="getInputPlaceholder(channel)"
:aria-label="getInputPlaceholder(channel)" :aria-label="getInputPlaceholder(channel)"

5
client/components/LinkPreview.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview"> <div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview" dir="ltr">
<div <div
ref="content" ref="content"
:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]" :class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
@ -22,7 +22,7 @@
@load="onPreviewReady" @load="onPreviewReady"
/> />
</a> </a>
<div class="toggle-text"> <div class="toggle-text" dir="auto">
<div class="head"> <div class="head">
<div class="overflowable"> <div class="overflowable">
<a <a
@ -38,6 +38,7 @@
v-if="showMoreButton" v-if="showMoreButton"
:aria-expanded="isContentShown" :aria-expanded="isContentShown"
:aria-label="moreButtonLabel" :aria-label="moreButtonLabel"
dir="auto"
class="more" class="more"
@click="onMoreClick" @click="onMoreClick"
> >

6
client/components/Message.vue
View File

@ -19,8 +19,8 @@
</template> </template>
<template v-else-if="message.type === 'action'"> <template v-else-if="message.type === 'action'">
<span class="from"><span class="only-copy">* </span></span> <span class="from"><span class="only-copy">* </span></span>
<span class="content"> <span class="content" dir="auto">
<Username :user="message.from" />&#32;<ParsedMessage <Username :user="message.from" dir="auto" />&#32;<ParsedMessage
:network="network" :network="network"
:message="message" :message="message"
/> />
@ -47,7 +47,7 @@
<span class="only-copy">- </span> <span class="only-copy">- </span>
</template> </template>
</span> </span>
<span class="content"> <span class="content" dir="auto">
<ParsedMessage :network="network" :message="message" /> <ParsedMessage :network="network" :message="message" />
<LinkPreview <LinkPreview
v-for="preview in message.previews" v-for="preview in message.previews"

2
client/css/style.css
View File

@ -1300,6 +1300,7 @@ background on hover (unless active) */
padding-right: 6px; padding-right: 6px;
border-left: 1px solid #f6f6f6; border-left: 1px solid #f6f6f6;
overflow: hidden; /* Prevents Zalgo text to expand beyond messages */ overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
text-align: left; /* so RTL text will still be aligned left, not right */
} }
#chat .unhandled .from { #chat .unhandled .from {
@ -1537,6 +1538,7 @@ background on hover (unless active) */
#chat .toggle-content .toggle-text { #chat .toggle-content .toggle-text {
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-align: initial;
} }
#chat .toggle-content.opened .toggle-text { #chat .toggle-content.opened .toggle-text {

14
client/js/libs/handlebars/parse.js
View File

@ -113,7 +113,14 @@ module.exports = function parse(createElement, text, message = undefined, networ
return link; return link;
} }
return [ return createElement(
"span",
{
attrs: {
dir: "auto",
},
},
[
link, link,
createElement( createElement(
LinkPreviewToggle, LinkPreviewToggle,
@ -125,7 +132,8 @@ module.exports = function parse(createElement, text, message = undefined, networ
}, },
fragments fragments
), ),
]; ]
);
} else if (textPart.channel) { } else if (textPart.channel) {
return createElement( return createElement(
"span", "span",
@ -133,6 +141,7 @@ module.exports = function parse(createElement, text, message = undefined, networ
class: ["inline-channel"], class: ["inline-channel"],
attrs: { attrs: {
role: "button", role: "button",
dir: "auto",
tabindex: 0, tabindex: 0,
"data-chan": textPart.channel, "data-chan": textPart.channel,
}, },
@ -164,6 +173,7 @@ module.exports = function parse(createElement, text, message = undefined, networ
class: ["user", colorClass(textPart.nick)], class: ["user", colorClass(textPart.nick)],
attrs: { attrs: {
role: "button", role: "button",
dir: "auto",
"data-name": textPart.nick, "data-name": textPart.nick,
}, },
}, },

28
test/client/js/libs/handlebars/parse.js
View File

@ -30,7 +30,7 @@ describe("parse Handlebars helper", () => {
{ {
input: '#&">bug', input: '#&">bug',
expected: expected:
'<span role="button" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;bug</span>', '<span role="button" dir="auto" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;bug</span>',
}, },
]; ];
@ -184,21 +184,21 @@ describe("parse Handlebars helper", () => {
{ {
input: "#a", input: "#a",
expected: expected:
'<span role="button" tabindex="0" data-chan="#a" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
"#a" + "#a" +
"</span>", "</span>",
}, },
{ {
input: "#test", input: "#test",
expected: expected:
'<span role="button" tabindex="0" data-chan="#test" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#test" class="inline-channel">' +
"#test" + "#test" +
"</span>", "</span>",
}, },
{ {
input: "#äöü", input: "#äöü",
expected: expected:
'<span role="button" tabindex="0" data-chan="#äöü" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#äöü" class="inline-channel">' +
"#äöü" + "#äöü" +
"</span>", "</span>",
}, },
@ -206,7 +206,7 @@ describe("parse Handlebars helper", () => {
input: "inline #channel text", input: "inline #channel text",
expected: expected:
"inline " + "inline " +
'<span role="button" tabindex="0" data-chan="#channel" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#channel" class="inline-channel">' +
"#channel" + "#channel" +
"</span>" + "</span>" +
" text", " text",
@ -214,7 +214,7 @@ describe("parse Handlebars helper", () => {
{ {
input: "#1,000", input: "#1,000",
expected: expected:
'<span role="button" tabindex="0" data-chan="#1,000" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#1,000" class="inline-channel">' +
"#1,000" + "#1,000" +
"</span>", "</span>",
}, },
@ -222,7 +222,7 @@ describe("parse Handlebars helper", () => {
input: "@#a", input: "@#a",
expected: expected:
"@" + "@" +
'<span role="button" tabindex="0" data-chan="#a" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
"#a" + "#a" +
"</span>", "</span>",
}, },
@ -358,7 +358,7 @@ describe("parse Handlebars helper", () => {
input: "test, MaxLeiter", input: "test, MaxLeiter",
expected: expected:
"test, " + "test, " +
'<span role="button" data-name="MaxLeiter" class="user color-12">' + '<span role="button" dir="auto" data-name="MaxLeiter" class="user color-12">' +
"MaxLeiter" + "MaxLeiter" +
"</span>", "</span>",
}, },
@ -378,7 +378,7 @@ describe("parse Handlebars helper", () => {
users: ["MaxLeiter, test"], users: ["MaxLeiter, test"],
input: "#test-channelMaxLeiter", input: "#test-channelMaxLeiter",
expected: expected:
'<span role="button" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' +
"#test-channelMaxLeiter" + "#test-channelMaxLeiter" +
"</span>", "</span>",
}, },
@ -414,7 +414,7 @@ describe("parse Handlebars helper", () => {
{ {
input: "\x02#\x038,9thelounge", input: "\x02#\x038,9thelounge",
expected: expected:
'<span role="button" tabindex="0" data-chan="#thelounge" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#thelounge" class="inline-channel">' +
'<span class="irc-bold">#</span>' + '<span class="irc-bold">#</span>' +
'<span class="irc-bold irc-fg8 irc-bg9">thelounge</span>' + '<span class="irc-bold irc-fg8 irc-bg9">thelounge</span>' +
"</span>", "</span>",
@ -477,7 +477,7 @@ describe("parse Handlebars helper", () => {
input: "#i❤️thelounge", input: "#i❤️thelounge",
// FIXME: Emoji in text should be `<span class="emoji">❤️</span>`. See https://github.com/thelounge/thelounge/issues/1784 // FIXME: Emoji in text should be `<span class="emoji">❤️</span>`. See https://github.com/thelounge/thelounge/issues/1784
expected: expected:
'<span role="button" tabindex="0" data-chan="#i❤️thelounge" class="inline-channel">#i❤️thelounge</span>', '<span role="button" dir="auto" tabindex="0" data-chan="#i❤️thelounge" class="inline-channel">#i❤️thelounge</span>',
}, },
].forEach((item) => { ].forEach((item) => {
// TODO: In Node v6+, use `{name, input, expected}` // TODO: In Node v6+, use `{name, input, expected}`
@ -493,7 +493,7 @@ describe("parse Handlebars helper", () => {
'test \x0312#\x0312\x0312"te\x0312st\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312a', 'test \x0312#\x0312\x0312"te\x0312st\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312a',
expected: expected:
"test " + "test " +
'<span role="button" tabindex="0" data-chan="#&quot;testa" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#&quot;testa" class="inline-channel">' +
'<span class="irc-fg12">#&quot;testa</span>' + '<span class="irc-fg12">#&quot;testa</span>' +
"</span>", "</span>",
}, },
@ -554,7 +554,7 @@ describe("parse Handlebars helper", () => {
expect(actual).to.equal( expect(actual).to.equal(
'Url: <a href="http://example.com/path" target="_blank" rel="noopener">http://example.com/path</a> ' + 'Url: <a href="http://example.com/path" target="_blank" rel="noopener">http://example.com/path</a> ' +
'Channel: <span role="button" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>' 'Channel: <span role="button" dir="auto" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>'
); );
}); });
@ -563,7 +563,7 @@ describe("parse Handlebars helper", () => {
const actual = getParsedMessageContents(input); const actual = getParsedMessageContents(input);
expect(actual).to.equal( expect(actual).to.equal(
'<span role="button" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' + '<span role="button" dir="auto" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' +
"#test-https://example.com" + "#test-https://example.com" +
"</span>" "</span>"
); );