Skip to content

Commit

Permalink
Replace thumbnail borders with corner ribbons
Browse files Browse the repository at this point in the history 
Request from discord
  • Loading branch information
bitWolfy committed Apr 14, 2020
1 parent 2146c31 commit b738eb1
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 0 deletions.
19 changes: 19 additions & 0 deletions src/js/modules/general/SettingsController.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,25 @@ export class SettingsController extends RE6Module {
}
),
Form.div("Height to width ratio of the image", "mid"),

Form.spacer("full"),


Form.checkbox("state-ribbons", thumbnailEnhancer.fetchSettings("ribbons"), "Status Ribbons", "column",
(event, data) => {
thumbnailEnhancer.pushSettings("ribbons", data);
thumbnailEnhancer.toggleStatusRibbons(data);
}
),
Form.div("Use corner ribbons instead of colored borders for flags", "mid"),

Form.checkbox("state-relations", thumbnailEnhancer.fetchSettings("relRibbons"), "Relations Ribbons", "column",
(event, data) => {
thumbnailEnhancer.pushSettings("relRibbons", data);
thumbnailEnhancer.toggleRelationRibbons(data);
}
),
Form.div("Display ribbons for parent/child relationships", "mid"),
]),


Expand Down
65 changes: 65 additions & 0 deletions src/js/modules/search/ThumbnailsEnhancer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ export class ThumbnailEnhancer extends RE6Module {
cropSize: "150px",
cropRatio: "0.9",

ribbons: true,
relRibbons: true,

clickAction: ThumbnailClickAction.NewTab,
};
}
Expand All @@ -64,6 +67,9 @@ export class ThumbnailEnhancer extends RE6Module {
this.toggleThumbCrop(this.fetchSettings("crop"));
this.setThumbSize(this.fetchSettings("cropSize"));
this.setThumbRatio(this.fetchSettings("cropRatio"));

this.toggleStatusRibbons(this.fetchSettings("ribbons"));
this.toggleRelationRibbons(this.fetchSettings("relRibbons"));
}

/**
Expand Down Expand Up @@ -122,6 +128,22 @@ export class ThumbnailEnhancer extends RE6Module {
this.postContainer.css("--thumbnail-ratio", ratio);
}

/**
* Toggles the post flag ribbons
* @param state True to enable, false to disable
*/
public toggleStatusRibbons(state = true): void {
this.postContainer.attr("data-thumb-ribbons", state + "");
}

/**
* Toggles the post relation ribbons
* @param state True to enable, false to disable
*/
public toggleRelationRibbons(state = true): void {
this.postContainer.attr("data-thumb-rel-ribbons", state + "");
}

/**
* Pauses or unpauses ThumbnailEnhancer's hover actions
* @param state True to hide, false to restore
Expand Down Expand Up @@ -149,6 +171,7 @@ export class ThumbnailEnhancer extends RE6Module {
/* Create the structure */
const $link = $article.find("a.preview-box"),
postID = parseInt($article.attr("data-id")),
$picture = $article.find("picture"),
$img = $article.find("img"),
$imgData = $img.attr("title").split("\n").slice(0, -2); // Replace if the post date is added for the data-attributes.

Expand All @@ -161,6 +184,47 @@ export class ThumbnailEnhancer extends RE6Module {
.html(`<i class="fas fa-circle-notch fa-2x fa-spin"></i>`)
.appendTo($link);

// States and Ribbons
$picture.addClass("picture-container");

// States
const state = $("<div>")
.addClass("rel-ribbon")
.append($("<span>"))
.appendTo($picture);
let stateText = "";

if ($article.hasClass("post-status-has-children")) {
state.addClass("thumb-ribbon thumb-ribbon-has-children");
stateText += "Child posts\n"
}
if ($article.hasClass("post-status-has-parent")) {
state.addClass("thumb-ribbon thumb-ribbon-has-parent");
stateText += "Parent posts\n"
}

if (state.hasClass("thumb-ribbon")) { state.addClass("left").attr("title", stateText); }
else { state.remove(); }

// Ribbons
const ribbon = $("<div>")
.addClass("flag-ribbon")
.append($("<span>"))
.appendTo($picture);
let ribbonText = "";

if ($article.hasClass("post-status-flagged")) {
ribbon.addClass("thumb-ribbon thumb-ribbon-flagged");
ribbonText += "Flagged\n"
}
if ($article.hasClass("post-status-pending")) {
ribbon.addClass("thumb-ribbon thumb-ribbon-pending");
ribbonText += "Pending\n"
}

if (ribbon.hasClass("thumb-ribbon")) { ribbon.addClass("right").attr("title", ribbonText); }
else { ribbon.remove(); }

// Description box that only shows up on hover
const $extrasBox = $("<div>")
.addClass("bg-highlight preview-extras")
Expand Down Expand Up @@ -307,6 +371,7 @@ export class ThumbnailEnhancer extends RE6Module {
const date = new Date(input.split(": ").pop().replace(" ", "T").replace(" ", ""));
return `<span title="` + date.toLocaleString() + `">` + Util.timeAgo(date) + `</span>`;
}

}

}
108 changes: 108 additions & 0 deletions src/scss/modules/_thumbnail-enhancer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,114 @@ div#page div#posts-container {
}
}

// Ribbons
div#page div#posts-container {

picture.picture-container {
position: relative;
display: inline-block;

}

& div.thumb-ribbon {
display: none;
}

&[data-thumb-ribbons=true] {

div.thumb-ribbon {
position: absolute;
top: 0;

display: flex;
align-items: center;
justify-content: center;
overflow: hidden;

width: 0.75rem;
height: 0.75rem;

span {
display: flex;

min-width: 150%;
height: 0.5rem;

transform-origin: center;

background: purple;
box-shadow: 0 0 10px -3px black;
border: 1px solid #00000060;
}

$status-flagged: orangered;
$status-pending: blue;
$rel-children: forestgreen;
$rel-parent: yellow;

&.thumb-ribbon-flagged span {
background: $status-flagged;
}

&.thumb-ribbon-pending span {
background: $status-pending;
}

&.thumb-ribbon-flagged.thumb-ribbon-pending span {
background: linear-gradient(90deg, $status-flagged 50%, $status-pending 50%);
}

&.thumb-ribbon-has-children span {
background: $rel-children;
}

&.thumb-ribbon-has-parent span {
background: $rel-parent;
}

&.thumb-ribbon-has-children.thumb-ribbon-has-parent span {
background: linear-gradient(90deg, $rel-parent 50%, $rel-children 50%);
}

&.right {
right: 0;

span {
transform: rotate(45deg);
margin-left: 0.5rem;
margin-bottom: 0.5rem;
}
}

&.left {
left: 0;

span {
transform: rotate(-45deg);
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}
}
}

// disable vanilla borders
article.post-preview.post-status-flagged img,
article.post-preview.post-status-pending img,
article.post-preview.post-status-deleted img,
article.post-preview.post-status-has-parent img,
article.post-preview.post-status-has-children img {
border: 0;
}
}

&:not([data-thumb-rel-ribbons=true]) {
div.thumb-ribbon.rel-ribbon {
display: none;
}
}

}

// Voting Buttons
div#page div#posts-container {

Expand Down

0 comments on commit b738eb1

Please sign in to comment.