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

Make sure the leading '<' is select when copypasting a message

Browse Source 
Firefox does not seem to select leading (or trailing) characters that are
too small; so this commit sets a very small width, that is still large
enough to be selected.

This commit also adds `display: inline-block`, so the width is not
ignored; but this causes Chrome to ignore the space after `>`, so I made
it a non-breakable space.

An alternative is to make only the leading `only-copy` an
`inline-block`, but I think the non-breakable space is a good idea
regardless.
This commit is contained in:
Val Lorentz 2022-02-12 13:59:29 +01:00
parent 4be9a282fa
commit 8edec1a5a8
2 changed files with 7 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/components/Message.vue
View File

@ -27,11 +27,11 @@
</span> </span>
</template> </template>
<template v-else-if="isAction()"> <template v-else-if="isAction()">
<span class="from"><span class="only-copy">*** </span></span> <span class="from"><span class="only-copy">***&nbsp;</span></span>
<component :is="messageComponent" :network="network" :message="message" /> <component :is="messageComponent" :network="network" :message="message" />
</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">*&nbsp;</span></span>
<span class="content" dir="auto"> <span class="content" dir="auto">
<Username <Username
:user="message.from" :user="message.from"
@ -53,21 +53,21 @@
<template v-if="message.from && message.from.nick"> <template v-if="message.from && message.from.nick">
<span class="only-copy" aria-hidden="true">&lt;</span> <span class="only-copy" aria-hidden="true">&lt;</span>
<Username :user="message.from" :network="network" :channel="channel" /> <Username :user="message.from" :network="network" :channel="channel" />
<span class="only-copy" aria-hidden="true">&gt; </span> <span class="only-copy" aria-hidden="true">&gt;&nbsp;</span>
</template> </template>
</span> </span>
<span v-else-if="message.type === 'plugin'" class="from"> <span v-else-if="message.type === 'plugin'" class="from">
<template v-if="message.from && message.from.nick"> <template v-if="message.from && message.from.nick">
<span class="only-copy" aria-hidden="true">[</span> <span class="only-copy" aria-hidden="true">[</span>
{{ message.from.nick }} {{ message.from.nick }}
<span class="only-copy" aria-hidden="true">] </span> <span class="only-copy" aria-hidden="true">]&nbsp;</span>
</template> </template>
</span> </span>
<span v-else class="from"> <span v-else class="from">
<template v-if="message.from && message.from.nick"> <template v-if="message.from && message.from.nick">
<span class="only-copy" aria-hidden="true">-</span> <span class="only-copy" aria-hidden="true">-</span>
<Username :user="message.from" :network="network" :channel="channel" /> <Username :user="message.from" :network="network" :channel="channel" />
<span class="only-copy" aria-hidden="true">- </span> <span class="only-copy" aria-hidden="true">-&nbsp;</span>
</template> </template>
</span> </span>
<span class="content" dir="auto"> <span class="content" dir="auto">

3
client/css/style.css
View File

@ -280,7 +280,8 @@ p {
.only-copy { .only-copy {
font-size: 0; font-size: 0;
opacity: 0; opacity: 0;
width: 0; width: 0.01px; /* Must be non-zero to be the first selected character on Firefox */
display: inline-block;
} }
/* Icons */ /* Icons */