Improve UI of previews

- Remove margins around thumbnails and images, increase radius, etc. for a fresher look overall
- Increase preview body contrast just enough to pass AA standards
- Add a `More`/`Less` button to expand previews that take more than one line. Button is added only when necessary
- Use a zoom-in cursor on hover for thumbnails
- Improve preview message errors
This commit is contained in:
Jérémie Astori 2018-03-22 01:17:44 -04:00
parent ff5a231ea0
commit 7355db94d6
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
5 changed files with 164 additions and 40 deletions

View File

@ -238,6 +238,7 @@ kbd {
#chat .nick .from::before,
#chat .action .from::before,
#chat .toggle-button::after,
#chat .toggle-content .more-caret::before,
#version-checker::before,
.context-menu-item::before,
#help .website-link::before,
@ -1332,75 +1333,112 @@ kbd {
color: #f00;
}
#chat .toggle-content.opened .more-caret, /* Expand/Collapse link previews */
#chat .toggle-button.opened, /* Thumbnail toggle */
#chat .msg.condensed:not(.closed) .toggle-button { /* Expanded status message toggle */
transform: rotate(90deg);
}
#chat .toggle-content {
background: #f5f5f5;
border-radius: 2px;
background: #f6f6f6;
border-radius: 5px;
display: none;
color: #222;
max-width: 100%;
margin: 0;
margin-top: 6px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
contain: content; /* This fixes a display bug where border-radius stopped working on image link hover */
}
#chat .toggle-type-error {
background: transparent;
}
/* This applies to images of preview-type-image and thumbnails of preview-type-link */
#chat .toggle-content img {
max-width: 100%;
max-height: 128px;
display: block;
cursor: zoom-in;
}
#chat .prefetch-error {
#chat .toggle-content pre.prefetch-error {
padding: 0;
margin: 0;
color: inherit;
background-color: transparent;
}
#chat .toggle-content .prefetch-error {
display: none;
}
#chat .toggle-content.opened .prefetch-error {
display: inline;
}
/* This applies to thumbnails of preview-type-link only */
#chat .toggle-content .thumb {
max-width: 48px;
max-height: 38px;
max-height: 54px;
max-width: 96px;
}
#chat .toggle-thumbnail {
padding: 6px;
#chat .toggle-type-error,
#chat .toggle-content .toggle-text {
padding: 8px 10px;
}
#chat .toggle-text {
padding: 6px;
min-width: 0;
display: flex;
flex-direction: column;
#chat .toggle-content .toggle-text {
white-space: nowrap;
color: inherit;
}
#chat .toggle-text:not(:first-child) {
padding-left: 0;
}
#chat .toggle-content .head,
#chat .toggle-content .body {
text-overflow: ellipsis;
overflow: hidden;
color: inherit;
}
#chat .toggle-content.opened .toggle-text {
white-space: normal;
}
#chat .toggle-content .head {
display: flex;
align-items: flex-start;
font-weight: bold;
color: #222;
}
#chat .toggle-content .body {
color: #999;
#chat .toggle-type-error,
#chat .toggle-text .body {
color: #717171;
}
#chat .toggle-text a {
color: inherit;
}
#chat .toggle-text .overflowable {
text-overflow: ellipsis;
overflow: hidden;
flex-grow: 1;
}
#chat .toggle-content .more {
color: #50a656;
font-weight: normal;
margin-left: 10px;
flex-shrink: 0;
}
#chat .toggle-content .more::after {
content: attr(aria-label);
}
#chat .toggle-content .more-caret {
display: inline-block;
transition: transform 0.2s;
}
#chat .toggle-content .more-caret::before {
content: "\f0da"; /* https://fontawesome.com/icons/caret-right?style=solid */
}
#chat .toggle-content.show {
display: inline-flex !important;
align-items: flex-start;
}
#chat audio {
@ -2322,6 +2360,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .header .title {
padding-left: 6px;
}
#chat .toggle-content .thumb {
max-height: 58px;
max-width: 104px;
}
}
@media (max-width: 479px) {

View File

@ -49,6 +49,7 @@ $(function() {
slideoutMenu.toggle(isOpen);
storeSidebarVisibility("thelounge.state.sidebar", isOpen);
utils.togglePreviewMoreButtonsIfNeeded();
});
viewport.on("click", ".rt", function() {
@ -57,6 +58,7 @@ $(function() {
viewport.toggleClass("rt", isOpen);
chat.find(".chan.active .chat").trigger("keepToBottom");
storeSidebarVisibility("thelounge.state.userlist", isOpen);
utils.togglePreviewMoreButtonsIfNeeded();
return false;
});
@ -252,6 +254,8 @@ $(function() {
if (!keepSidebarOpen && $(window).outerWidth() < utils.mobileViewportPixels) {
slideoutMenu.toggle(false);
}
utils.togglePreviewMoreButtonsIfNeeded();
}
const lastActive = $("#windows > .active");

View File

@ -66,6 +66,26 @@ function appendPreview(preview, msg, template) {
previewContainer.append(template);
const moreBtn = previewContainer.find(".more");
const previewContent = previewContainer.find(".toggle-content")[0];
const showMoreIfNeeded = () => {
if (preview.type === "link") {
const isVisible = moreBtn.is(":visible");
const shouldShow = previewContent.offsetWidth >= previewContainer[0].offsetWidth;
if (!isVisible && shouldShow) {
moreBtn.show();
} else if (isVisible && !shouldShow) {
togglePreviewMore(moreBtn, false);
moreBtn.hide();
}
}
};
$(window).on("resize", showMoreIfNeeded);
window.requestAnimationFrame(showMoreIfNeeded);
if (activeChannelId === channelId) {
container.trigger("keepToBottom");
}
@ -97,6 +117,24 @@ $("#chat").on("click", ".text .toggle-button", function() {
}
});
$("#chat").on("click", ".toggle-content .more", function() {
togglePreviewMore($(this));
return false;
});
function togglePreviewMore(moreBtn, state = undefined) {
moreBtn.closest(".toggle-content").toggleClass("opened", state);
const isExpanded = moreBtn.closest(".toggle-content").hasClass("opened");
moreBtn.attr("aria-expanded", isExpanded);
if (isExpanded) {
moreBtn.attr("aria-label", moreBtn.data("opened-text"));
} else {
moreBtn.attr("aria-label", moreBtn.data("closed-text"));
}
}
/* Image viewer */
const imageViewer = $("#image-viewer");

View File

@ -23,6 +23,7 @@ module.exports = {
toggleNickEditor,
toggleNotificationMarkers,
requestIdleCallback,
togglePreviewMoreButtonsIfNeeded,
};
function findCurrentNetworkChan(name) {
@ -141,3 +142,8 @@ function requestIdleCallback(callback, timeout) {
callback();
}
}
// Force handling preview display
function togglePreviewMoreButtonsIfNeeded() {
window.requestAnimationFrame(() => $(window).trigger("resize"));
}

View File

@ -23,10 +23,31 @@
<img src="{{thumb}}" decoding="async" alt="" class="thumb">
</a>
{{/if}}
<a class="toggle-text" href="{{link}}" target="_blank" rel="noopener">
<div class="head" title="{{head}}">{{head}}</div>
<div class="body" title="{{body}}">{{body}}</div>
</a>
<div class="toggle-text">
<div class="head">
<div class="overflowable">
<a href="{{link}}" target="_blank" rel="noopener" title="{{head}}">
{{head}}
</a>
</div>
<button class="more"
aria-expanded="false"
aria-label="More"
data-closed-text="More"
data-opened-text="Less"
>
<span class="more-caret"></span>
</button>
</div>
<div class="body overflowable">
<a href="{{link}}" target="_blank" rel="noopener" title="{{body}}">
{{body}}
</a>
</div>
</a>
</div>
{{/equal}}
{{#equal type "error"}}
{{#equal error "image-too-big"}}
@ -38,12 +59,24 @@
</em>
{{/equal}}
{{#equal error "message"}}
<em>
There was an error loading preview for this link.
<a href="{{link}}" target="_blank" rel="noopener">Click here</a>
to open it in a new window.
<small class="prefetch-error">({{message}})</small>
</em>
<div>
<em>
A preview could not be loaded.
<a href="{{link}}" target="_blank" rel="noopener">Click here</a>
to open it in a new window.
</em>
<br>
<pre class="prefetch-error">{{message}}</pre>
</div>
<button class="more"
aria-expanded="false"
aria-label="More"
data-closed-text="More"
data-opened-text="Less"
>
<span class="more-caret"></span>
</button>
{{/equal}}
{{/equal}}
</div>