jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #4320 from BrokenEagle/note-dimension-percentages

Browse Source 
Convert notes to use percentages instead of exact coordinates
This commit is contained in:
evazion
2020-03-20 16:26:02 -05:00
committed by GitHub
parent 31424ce545 20bad0ec53
commit 2bc99a813c
8 changed files with 174 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
app/javascript/src/javascripts/notes.js
View File

@@ -5,8 +5,6 @@ let Note = {
HIDE_DELAY: 250, HIDE_DELAY: 250,
NORMALIZE_ATTRIBUTES: ['letter-spacing', 'line-height', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom'], NORMALIZE_ATTRIBUTES: ['letter-spacing', 'line-height', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom'],
COPY_ATTRIBUTES: ['background-color', 'border-radius', 'transform'], COPY_ATTRIBUTES: ['background-color', 'border-radius', 'transform'],
BOX_ONLY_ATTRIBUTES: ['transform'],
INNER_ONLY_ATTRIBUTES: ['background-color'],
permitted_style_values: function(attribute, $attribute_child) { permitted_style_values: function(attribute, $attribute_child) {
if ($attribute_child.length === 0) { if ($attribute_child.length === 0) {
return ""; return "";
@@ -79,35 +77,33 @@ let Note = {
}, },
copy_style_attributes: function($note_box) { copy_style_attributes: function($note_box) {
const $note_inner_box = $note_box.find("div.note-box-inner-border"); const $attribute_child = $note_box.find('.note-box-attributes');
const $attribute_child = $note_inner_box.find('.note-box-attributes');
let has_rotation = false; let has_rotation = false;
Note.COPY_ATTRIBUTES.forEach((attribute)=>{ Note.COPY_ATTRIBUTES.forEach((attribute)=>{
const attribute_value = Note.permitted_style_values(attribute, $attribute_child); const attribute_value = Note.permitted_style_values(attribute, $attribute_child);
if (Note.BOX_ONLY_ATTRIBUTES.includes(attribute)) { $note_box.css(attribute, attribute_value);
$note_box.css(attribute, attribute_value);
} else if (Note.INNER_ONLY_ATTRIBUTES.includes(attribute)) {
$note_inner_box.css(attribute, attribute_value);
} else {
$note_box.css(attribute, attribute_value);
$note_inner_box.css(attribute, attribute_value);
}
if (attribute === "transform" && attribute_value.startsWith("rotate")) { if (attribute === "transform" && attribute_value.startsWith("rotate")) {
has_rotation = true; has_rotation = true;
} }
}); });
if (has_rotation) { if (has_rotation) {
const current_left = parseFloat($note_box.css("left")); const current_left = Math.round(parseFloat($note_box.css("left")));
const current_top = parseFloat($note_box.css("top")); const current_top = Math.round(parseFloat($note_box.css("top")));
const position = Note.Box.get_min_max_position($note_box); const position = Note.Box.get_min_max_position($note_box);
// Checks for the scenario where the user sets invalid box values through the API // Checks for the scenario where the user sets invalid box values through the API
// or by adjusting the box dimensions through the browser's dev console before saving // or by adjusting the box dimensions through the browser's dev console before saving
if (current_left !== position.left || current_top !== position.top) { if (current_left !== position.norm_left || current_top !== position.norm_top) {
$note_box.css(position); $note_box.css({
$note_inner_box.addClass("out-of-bounds"); top: position.percent_top,
left: position.percent_left,
});
$note_box.addClass("out-of-bounds");
} else { } else {
$note_inner_box.removeClass("out-of-bounds"); $note_box.removeClass("out-of-bounds");
} }
$note_box.data('has_rotation', true);
} else {
$note_box.data('has_rotation', false);
} }
}, },
@@ -116,7 +112,7 @@ let Note = {
"dragstart.danbooru resizestart.danbooru", "dragstart.danbooru resizestart.danbooru",
function(e) { function(e) {
var $note_box_inner = $(e.currentTarget); var $note_box_inner = $(e.currentTarget);
$note_box_inner.find(".note-box-inner-border").addClass("unsaved"); $note_box_inner.addClass("unsaved");
Note.dragging = true; Note.dragging = true;
Note.clear_timeouts(); Note.clear_timeouts();
Note.Body.hide_all(); Note.Body.hide_all();
@@ -124,14 +120,6 @@ let Note = {
} }
); );
$note_box.on("resize.danbooru",
function(e) {
var $note_box_inner = $(e.currentTarget);
Note.Box.resize_inner_border($note_box_inner);
e.stopPropagation();
}
);
$note_box.on( $note_box.on(
"dragstop.danbooru resizestop.danbooru", "dragstop.danbooru resizestop.danbooru",
function(e) { function(e) {
@@ -143,7 +131,7 @@ let Note = {
$note_box.on( $note_box.on(
"mouseover.danbooru mouseout.danbooru", "mouseover.danbooru mouseout.danbooru",
function(e) { function(e) {
if (Note.dragging) { if (Note.dragging || Utility.test_max_width(660)) {
return; return;
} }
@@ -175,12 +163,21 @@ let Note = {
"click.danbooru", "click.danbooru",
function (event) { function (event) {
const note_id = $note_box.data("id"); const note_id = $note_box.data("id");
$(".note-box").removeClass("movable"); if (!Utility.test_max_width(660)) {
if (note_id === Note.move_id) { $(".note-box").removeClass("movable");
Note.move_id = null; if (note_id === Note.move_id) {
Note.move_id = null;
} else {
Note.move_id = note_id;
$note_box.addClass("movable");
}
} else if ($note_box.hasClass("viewing")) {
Note.Body.hide(note_id);
$note_box.removeClass("viewing");
} else { } else {
Note.move_id = note_id; $(".note-box").removeClass("viewing");
$note_box.addClass("movable"); Note.Body.show(note_id);
$note_box.addClass("viewing");
} }
} }
); );
@@ -188,6 +185,8 @@ let Note = {
$note_box.on("mousedown.danbooru", function(event) { $note_box.on("mousedown.danbooru", function(event) {
Note.drag_id = $note_box.data('id'); Note.drag_id = $note_box.data('id');
}); });
$note_box.on("mouseup.danbooru.drag", Note.Box.drag_stop);
}, },
find: function(id) { find: function(id) {
@@ -196,9 +195,22 @@ let Note = {
drag_stop: function(event) { drag_stop: function(event) {
if (Note.drag_id !== null) { if (Note.drag_id !== null) {
const $image = $("#image");
const $note_box = Note.Box.find(Note.drag_id); const $note_box = Note.Box.find(Note.drag_id);
const position = Note.Box.get_min_max_position($note_box); const dimensions = {
$note_box.css(position); top: (100 * ($note_box.position().top / $image.height())) + '%',
left: (100 * ($note_box.position().left / $image.width())) + '%',
height: (100 * ($note_box.height() / $image.height())) + '%',
width: (100 * ($note_box.width() / $image.width())) + '%',
};
if (Note.embed && $note_box.data('has_rotation')) {
const position = Note.Box.get_min_max_position($note_box);
Object.assign(dimensions, {
top: position.percentage_top,
left: position.percentage_left,
});
}
$note_box.css(dimensions);
Note.drag_id = null; Note.drag_id = null;
} }
}, },
@@ -212,8 +224,8 @@ let Note = {
return; return;
} }
let computed_style = window.getComputedStyle($note_box[0]); let computed_style = window.getComputedStyle($note_box[0]);
let current_top = parseFloat(computed_style.top); let current_top = Math.round(parseFloat(computed_style.top));
let current_left = parseFloat(computed_style.left); let current_left = Math.round(parseFloat(computed_style.left));
switch (event.originalEvent.key) { switch (event.originalEvent.key) {
case "ArrowUp": case "ArrowUp":
current_top--; current_top--;
@@ -231,8 +243,11 @@ let Note = {
// do nothing // do nothing
} }
let position = Note.Box.get_min_max_position($note_box, current_top, current_left); let position = Note.Box.get_min_max_position($note_box, current_top, current_left);
$note_box.css(position); $note_box.css({
$note_box.find(".note-box-inner-border").addClass("unsaved"); top: position.percent_top,
left: position.percent_left,
});
$note_box.addClass("unsaved");
event.preventDefault(); event.preventDefault();
}, },
@@ -245,8 +260,8 @@ let Note = {
return; return;
} }
let computed_style = window.getComputedStyle($note_box[0]); let computed_style = window.getComputedStyle($note_box[0]);
let current_top = parseFloat(computed_style.top); let current_top = Math.round(parseFloat(computed_style.top));
let current_left = parseFloat(computed_style.left); let current_left = Math.round(parseFloat(computed_style.left));
let current_height = $note_box.height(); let current_height = $note_box.height();
let current_width = $note_box.width(); let current_width = $note_box.width();
switch (event.originalEvent.key) { switch (event.originalEvent.key) {
@@ -266,14 +281,13 @@ let Note = {
// do nothing // do nothing
} }
const position = Note.Box.get_min_max_position($note_box, null, null, current_height, current_width); const position = Note.Box.get_min_max_position($note_box, null, null, current_height, current_width);
if (current_top === position.top && current_left === position.left) { if (current_top === position.norm_top && current_left === position.norm_left) {
$note_box.css({ $note_box.css({
height: current_height, height: current_height,
width: current_width, width: current_width,
}); });
} }
Note.Box.resize_inner_border($note_box); $note_box.addClass("unsaved");
$note_box.find(".note-box-inner-border").addClass("unsaved");
event.preventDefault(); event.preventDefault();
}, },
@@ -295,8 +309,10 @@ let Note = {
$note_box.css('transform', 'none'); $note_box.css('transform', 'none');
} }
return { return {
top: Math.round(current_top), norm_top: Math.round(current_top),
left: Math.round(current_left), norm_left: Math.round(current_left),
percent_top: (100 * (current_top / $image.height())) + '%',
percent_left: (100 * (current_left / $image.width())) + '%',
}; };
}, },
@@ -380,36 +396,31 @@ let Note = {
scale: function($note_box) { scale: function($note_box) {
var $image = $("#image"); var $image = $("#image");
var ratio = $image.width() / parseFloat($image.data("original-width")); var ratio = $image.width() / parseFloat($image.data("original-width"));
var MIN_SIZE = 5; var x_percent = 100 * ratio * ($note_box.data('x') / $image.width());
var y_percent = 100 * ratio * ($note_box.data('y') / $image.height());
var height_percent = 100 * ratio * ($note_box.data('height') / $image.height());
var width_percent = 100 * ratio * ($note_box.data('width') / $image.width());
$note_box.css({ $note_box.css({
top: Math.ceil(parseFloat($note_box.data("y")) * ratio), top: y_percent + '%',
left: Math.ceil(parseFloat($note_box.data("x")) * ratio), left: x_percent + '%',
width: Math.max(MIN_SIZE, Math.ceil(parseFloat($note_box.data("width")) * ratio)), width: width_percent + '%',
height: Math.max(MIN_SIZE, Math.ceil(parseFloat($note_box.data("height")) * ratio)) height: height_percent + '%',
}); });
Note.Box.resize_inner_border($note_box);
}, },
scale_all: function() { scale_all: function() {
var container = document.getElementById('note-container'); const $container = $('#note-container');
if (container === null) { if ($container.length === 0) {
return; return;
} }
// Hide notes while rescaling, to prevent unnecessary reflowing let $image = $("#image");
var was_visible = container.style.display !== 'none'; $container.height($image.height());
if (was_visible) { $container.width($image.width());
container.style.display = 'none';
}
$(".note-box").each(function(i, v) {
Note.Box.scale($(v));
});
if (was_visible) {
container.style.display = 'block';
}
if (Note.embed) { if (Note.embed) {
const $image = $("#image"); let large_width = parseFloat($image.data('large-width'));
const percentage = 100 * ($image.width() / parseFloat($image.data('large-width'))); let ratio = $image.width() / large_width;
$(container).css('font-size', percentage + '%'); let font_percentage = ratio * 100;
$container.css('font-size', font_percentage + '%');
} }
}, },
@@ -438,16 +449,23 @@ let Note = {
initialize: function($note_body) { initialize: function($note_body) {
var $note_box = Note.Box.find($note_body.data("id")); var $note_box = Note.Box.find($note_body.data("id"));
const box_data = Note.Box.get_bounding_box($note_box); if (Note.embed && $note_box.data('has_rotation')) {
// Select the lowest box corner to the farthest left const box_data = Note.Box.get_bounding_box($note_box);
let selected_corner = box_data.norm_coord.reduce(function (selected, coord) {return (selected[1] > coord[1]) || (selected[1] === coord[1] && selected[0] < coord[0]) ? selected : coord;}); // Select the lowest box corner to the farthest left
let normalized_degrees = box_data.degrees % 90.0; let selected_corner = box_data.norm_coord.reduce(function (selected, coord) {return (selected[1] > coord[1]) || (selected[1] === coord[1] && selected[0] < coord[0]) ? selected : coord;});
// Align to the left or right body corner depending upon the box angle let normalized_degrees = box_data.degrees % 90.0;
let body_corner = $note_box.position().left - (normalized_degrees > 0.0 && normalized_degrees <= 45.0 ? $note_body.width() : 0); // Align to the left or right body corner depending upon the box angle
$note_body.css({ let body_corner = $note_box.position().left - (normalized_degrees > 0.0 && normalized_degrees <= 45.0 ? $note_body.width() : 0);
top: $note_box.position().top + selected_corner[1] + 5, $note_body.css({
left: body_corner + selected_corner[0], top: $note_box.position().top + selected_corner[1] + 5,
}); left: body_corner + selected_corner[0],
});
} else {
$note_body.css({
top: $note_box.position().top + $note_box.height() + 5,
left: $note_box.position().left,
});
}
Note.Body.bound_position($note_body); Note.Body.bound_position($note_body);
}, },
@@ -538,8 +556,10 @@ let Note = {
if (Note.embed) { if (Note.embed) {
const $note_inner_box = $note_box.find("div.note-box-inner-border"); const $note_inner_box = $note_box.find("div.note-box-inner-border");
Note.Body.display_text($note_inner_box, text); Note.Body.display_text($note_inner_box, text);
// Reset the font size so that the normalization calculations will be correct
$note_inner_box.css("font-size", Note.base_font_size + "px"); $note_inner_box.css("font-size", Note.base_font_size + "px");
Note.normalize_sizes($note_inner_box.children(), Note.base_font_size); Note.normalize_sizes($note_inner_box.children(), Note.base_font_size);
// Clear the font size so that the fonts will be scaled to the current value
$note_inner_box.css("font-size", ""); $note_inner_box.css("font-size", "");
Note.Box.copy_style_attributes($note_box); Note.Box.copy_style_attributes($note_box);
} }
@@ -655,10 +675,10 @@ let Note = {
var hash = { var hash = {
note: { note: {
x: $note_box.position().left / ratio, x: Math.round($note_box.position().left / ratio),
y: $note_box.position().top / ratio, y: Math.round($note_box.position().top / ratio),
width: $note_box.width() / ratio, width: Math.round($note_box.width() / ratio),
height: $note_box.height() / ratio, height: Math.round($note_box.height() / ratio),
body: $note_body.data("original-body"), body: $note_body.data("original-body"),
} }
} }
@@ -683,10 +703,10 @@ let Note = {
$note_box = Note.Box.find(data.html_id); $note_box = Note.Box.find(data.html_id);
$note_body.data("id", String(data.id)).attr("data-id", data.id); $note_body.data("id", String(data.id)).attr("data-id", data.id);
$note_box.data("id", String(data.id)).attr("data-id", data.id); $note_box.data("id", String(data.id)).attr("data-id", data.id);
$note_box.find(".note-box-inner-border").removeClass("unsaved"); $note_box.removeClass("unsaved");
} else { } else {
$note_box = Note.Box.find(data.id); $note_box = Note.Box.find(data.id);
$note_box.find(".note-box-inner-border").removeClass("unsaved"); $note_box.removeClass("unsaved");
} }
}, },
@@ -730,7 +750,7 @@ let Note = {
var $note_body = Note.Body.find(id); var $note_body = Note.Body.find(id);
var text = $textarea.val(); var text = $textarea.val();
var $note_box = Note.Box.find(id); var $note_box = Note.Box.find(id);
$note_box.find(".note-box-inner-border").addClass("unsaved"); $note_box.addClass("unsaved");
Note.Body.set_text($note_body, $note_box, "Loading..."); Note.Body.set_text($note_body, $note_box, "Loading...");
$.get("/note_previews.json", {body: text}).then(function(data) { $.get("/note_previews.json", {body: text}).then(function(data) {
Note.Body.set_text($note_body, $note_box, data.body); Note.Body.set_text($note_body, $note_box, data.body);
@@ -972,11 +992,10 @@ let Note = {
height: h height: h
}); });
Note.Box.update_data_attributes($note_box); Note.Box.update_data_attributes($note_box);
$note_box.find(".note-box-inner-border").addClass("unsaved"); $note_box.addClass("unsaved");
$note_body.html("<em>Click to edit</em>"); $note_body.html("<em>Click to edit</em>");
$("#note-container").append($note_box); $("#note-container").append($note_box);
$("#note-container").append($note_body); $("#note-container").append($note_body);
Note.Box.resize_inner_border($note_box);
Note.id += "x"; Note.id += "x";
}, },
@@ -1026,12 +1045,12 @@ let Note = {
Note.base_font_size = parseFloat(window.getComputedStyle($note_container[0]).fontSize); Note.base_font_size = parseFloat(window.getComputedStyle($note_container[0]).fontSize);
$.each($(".note-box"), function(i, note_box) { $.each($(".note-box"), function(i, note_box) {
const $note_box = $(note_box); const $note_box = $(note_box);
Note.Box.resize_inner_border($note_box);
Note.normalize_sizes($("div.note-box-inner-border", note_box).children(), Note.base_font_size); Note.normalize_sizes($("div.note-box-inner-border", note_box).children(), Note.base_font_size);
// Accounting for transformation values calculations which aren't correct immediately on page load // Accounting for transformation values calculations which aren't correct immediately on page load
setTimeout(()=>{Note.Box.copy_style_attributes($note_box);}, 100); setTimeout(()=>{Note.Box.copy_style_attributes($note_box);}, 100);
}); });
} }
Note.Box.scale_all();
}, },
initialize_all: function() { initialize_all: function() {
@@ -1040,9 +1059,6 @@ let Note = {
} }
Note.embed = (Utility.meta("post-has-embedded-notes") === "true"); Note.embed = (Utility.meta("post-has-embedded-notes") === "true");
if (Note.embed) {
$(document).on("mouseup.danbooru.drag", Note.Box.drag_stop);
}
Note.load_all(); Note.load_all();
this.initialize_shortcuts(); this.initialize_shortcuts();
@@ -1050,6 +1066,7 @@ let Note = {
$(document).on("hashchange.danbooru.note", this.initialize_highlight); $(document).on("hashchange.danbooru.note", this.initialize_highlight);
Utility.keydown("up down left right", "nudge_note", Note.Box.key_nudge); Utility.keydown("up down left right", "nudge_note", Note.Box.key_nudge);
Utility.keydown("shift+up shift+down shift+left shift+right", "resize_note", Note.Box.key_resize); Utility.keydown("shift+up shift+down shift+left shift+right", "resize_note", Note.Box.key_resize);
$(window).on("resize.danbooru.note_scale", Note.Box.scale_all);
}, },
initialize_shortcuts: function() { initialize_shortcuts: function() {

89
app/javascript/src/javascripts/posts.js.erb
View File

@@ -33,13 +33,8 @@ Post.initialize_all = function() {
this.initialize_favlist(); this.initialize_favlist();
this.initialize_post_sections(); this.initialize_post_sections();
this.initialize_post_image_resize_links(); this.initialize_post_image_resize_links();
this.initialize_post_image_resize_to_window_link();
this.initialize_recommended(); this.initialize_recommended();
this.initialize_ugoira_player(); this.initialize_ugoira_player();
if (CurrentUser.data("always-resize-images") || (Utility.meta("viewport") && (window.screen.width <= 660))) {
$("#image-resize-to-window-link").click();
}
} }
if ($("#c-posts #a-show, #c-uploads #a-new").length) { if ($("#c-posts #a-show, #c-uploads #a-new").length) {
@@ -307,7 +302,7 @@ Post.initialize_favlist = function() {
Post.expand_image = function(e) { Post.expand_image = function(e) {
if (Utility.test_max_width(660)) { if (Utility.test_max_width(660)) {
// just do the default behavior // Do the default behavior (navigate to image)
return; return;
} }
@@ -321,81 +316,52 @@ Post.expand_image = function(e) {
$image.on("load.danbooru", function() { $image.on("load.danbooru", function() {
$image.css("animation", "sharpen 0.5s forwards"); $image.css("animation", "sharpen 0.5s forwards");
$notice.hide(); $notice.hide();
$("#post-option-view-large").show();
}); });
$notice.children().eq(0).hide(); $notice.children().eq(0).hide();
$notice.children().eq(1).show(); // Loading message $notice.children().eq(1).show(); // Loading message
Note.Box.scale_all(); Note.Box.scale_all();
$image.data("scale-factor", 1); e.preventDefault();
}
Post.view_large = function(e) {
if (Utility.test_max_width(660)) {
// Do the default behavior (navigate to image)
return;
}
var $image = $("#image");
var $notice = $("#image-resize-notice");
$image.attr("src", $("#image-container").data("large-file-url"));
$image.css("filter", "blur(8px)");
$image.width($image.data("large-width"));
$image.height($image.data("large-height"));
$notice.children().eq(0).show();
$notice.children().eq(1).hide(); // Loading message
$image.on("load.danbooru", function() {
$image.css("animation", "sharpen 0.5s forwards");
$notice.show();
$("#post-option-view-large").hide();
});
Note.Box.scale_all();
e.preventDefault(); e.preventDefault();
} }
Post.initialize_post_image_resize_links = function() { Post.initialize_post_image_resize_links = function() {
$("#image-resize-link").on("click.danbooru", Post.expand_image); $("#image-resize-link").on("click.danbooru", Post.expand_image);
$("#image-view-large-link").on("click.danbooru", Post.view_large);
if ($("#image-resize-notice").length) { if ($("#image-resize-notice").length) {
Utility.keydown("v", "resize", function(e) { Utility.keydown("v", "resize", function(e) {
if ($("#image-resize-notice").is(":visible")) { if ($("#image-resize-notice").is(":visible")) {
$("#image-resize-link").click(); $("#image-resize-link").click();
} else { } else {
var $image = $("#image"); $("#image-view-large-link").click();
var $notice = $("#image-resize-notice");
$image.attr("src", $("#image-container").data("large-file-url"));
$image.css("filter", "blur(8px)");
$image.width($image.data("large-width"));
$image.height($image.data("large-height"));
$notice.children().eq(0).show();
$notice.children().eq(1).hide(); // Loading message
$image.on("load.danbooru", function() {
$image.css("animation", "sharpen 0.5s forwards");
$notice.show();
});
Note.Box.scale_all();
$image.data("scale-factor", 1);
e.preventDefault();
} }
}); });
} }
} }
Post.resize_image_to_window = function($img) {
var sidebar_width = 0;
var client_width = 0;
if (($img.data("scale-factor") === 1) || ($img.data("scale-factor") === undefined)) {
if ($(window).width() > 660) {
sidebar_width = $("#sidebar").width() || 0;
client_width = $(window).width() - sidebar_width - 75;
} else {
client_width = $(window).width() - 2;
}
if ($img.width() > client_width) {
var isVideo = $img.prop("tagName") === "VIDEO";
var width = isVideo ? $img.prop("width") : $img.data("original-width");
var height = isVideo ? $img.prop("height") : $img.data("original-height");
var ratio = client_width / width;
$img.data("scale-factor", ratio);
$img.css("width", width * ratio);
$img.css("height", height * ratio);
Post.resize_ugoira_controls();
}
} else {
$img.data("scale-factor", 1);
$img.width($img.data("original-width"));
$img.height($img.data("original-height"));
Post.resize_ugoira_controls();
}
Note.Box.scale_all();
}
Post.initialize_post_image_resize_to_window_link = function() {
$("#image-resize-to-window-link").on("click.danbooru", function(e) {
Post.resize_image_to_window($("#image"));
e.preventDefault();
});
}
Post.initialize_excerpt = function() { Post.initialize_excerpt = function() {
$("#excerpt").hide(); $("#excerpt").hide();
@@ -460,6 +426,7 @@ Post.initialize_ugoira_player = function() {
let file_url = $("#image-container").data("file-url"); let file_url = $("#image-container").data("file-url");
Ugoira.create_player(content_type, frames, file_url); Ugoira.create_player(content_type, frames, file_url);
$(window).on("resize.danbooru.ugoira_scale", Post.resize_ugoira_controls);
} }
}; };

9
app/javascript/src/styles/base/040_colors.css
View File

@@ -112,11 +112,10 @@
--note-body-background: #FFE; --note-body-background: #FFE;
--note-body-text-color: var(--text-color); --note-body-text-color: var(--text-color);
--note-body-border: 1px solid black; --note-body-border: 1px solid black;
--note-box-border: 1px solid white; --note-box-border: 1px solid black;
--note-box-background: transparent; --note-box-shadow: 0 0 0 1px white;
--note-box-inner-border: 1px solid black; --unsaved-note-box-border: 1px solid red;
--unsaved-note-box-inner-border: 1px solid red; --movable-note-box-border: 1px solid green;
--movable-note-box-inner-border: 1px solid green;
--note-preview-border: 1px solid red; --note-preview-border: 1px solid red;
--note-preview-background: white; --note-preview-background: white;
--note-highlight-color: blue; --note-highlight-color: blue;

53
app/javascript/src/styles/specific/notes.scss
View File

@@ -1,6 +1,5 @@
div#note-container { div#note-container {
position: absolute; position: absolute;
z-index: 50;
div.note-body { div.note-body {
position: absolute; position: absolute;
@@ -17,7 +16,7 @@ div#note-container {
} }
div.note-body, div.note-box.embedded div.note-box-inner-border { div.note-body, div.note-box.embedded div.note-box-inner-border {
h1, h2, h3, h4, h5, h6, a, span, div, blockquote, br, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center { h1, h2, h3, h4, h5, h6, a, span, div, blockquote, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
line-height: 1.25; line-height: 1.25;
} }
@@ -71,6 +70,10 @@ div#note-container {
} }
div.note-box { div.note-box {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute; position: absolute;
border: var(--note-box-border); border: var(--note-box-border);
min-width: 5px; min-width: 5px;
@@ -78,24 +81,17 @@ div#note-container {
width: 100px; width: 100px;
height: 100px; height: 100px;
cursor: move; cursor: move;
background: var(--note-box-background); background: var(--note-body-background);
line-height: 1.25; line-height: 1.25;
opacity: 0.5; opacity: 0.5;
z-index: 100;
div.note-box-inner-border { &.unsaved {
border: var(--note-box-inner-border); border: var(--unsaved-note-box-border);
background: var(--note-body-background);
}
div.note-box-inner-border.unsaved {
border: var(--unsaved-note-box-inner-border);
} }
&.movable { &.movable {
div.note-box-inner-border, border: var(--movable-note-box-border);
div.note-box-inner-border.unsaved {
border: var(--movable-note-box-inner-border);
}
} }
&.embedded { &.embedded {
@@ -105,6 +101,7 @@ div#note-container {
&.hovering { &.hovering {
border: var(--note-box-border); border: var(--note-box-border);
box-shadow: var(--note-box-shadow);
&.editing, &.editing,
&.movable { &.movable {
@@ -114,10 +111,6 @@ div#note-container {
div.ui-resizable-handle { div.ui-resizable-handle {
display: block; display: block;
} }
div.note-box-inner-border {
border: var(--note-box-inner-border);
}
} }
&.editing, &.editing,
@@ -125,29 +118,18 @@ div#note-container {
opacity: 0.4; opacity: 0.4;
} }
&.unsaved,
&.out-of-bounds {
border: var(--unsaved-note-box-border);
}
&.movable { &.movable {
div.note-box-inner-border, border: var(--movable-note-box-border);
div.note-box-inner-border.unsaved,
div.note-box-inner-border.out-of-bounds {
border: var(--movable-note-box-inner-border);
}
} }
div.ui-resizable-handle { div.ui-resizable-handle {
display: none; display: none;
} }
div.note-box-inner-border {
text-align: center;
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
div.note-box-inner-border.unsaved,
div.note-box-inner-border.out-of-bounds {
border: var(--unsaved-note-box-inner-border);
}
} }
&.note-box-highlighted { &.note-box-highlighted {
@@ -162,6 +144,7 @@ div#note-preview {
opacity: 0.6; opacity: 0.6;
display: none; display: none;
background: var(--note-preview-background); background: var(--note-preview-background);
z-index: 100;
} }
div.note-edit-dialog { div.note-edit-dialog {

6
app/javascript/src/styles/specific/posts.scss
View File

@@ -341,6 +341,12 @@ div#c-posts {
margin: 1em 0 0.5em; margin: 1em 0 0.5em;
} }
/* This ensures the image appears above the note container, but beneath any notes. */
#image {
position: relative;
z-index: 50;
}
.pool-name, .search-name { .pool-name, .search-name {
word-wrap: break-word; word-wrap: break-word;
} }

5
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -92,6 +92,11 @@
} }
} }
img#image {
max-width: 100%;
height: auto;
}
.user-disable-cropped-false { .user-disable-cropped-false {
article.post-preview { article.post-preview {
width: 33.3%; width: 33.3%;

8
app/views/posts/partials/show/_options.html.erb
View File

@@ -1,7 +1,9 @@
<ul> <ul>
<li id="post-option-resize-to-window"> <% if post.visible? && post.has_large? && !post.is_ugoira? %>
<%= link_to "Resize to window", "#", id: "image-resize-to-window-link" %> <li id="post-option-view-large" style="<%= CurrentUser.default_image_size == "original" ? "" : "display: none;" %>">
</li> <%= link_to "View large", post.tagged_large_file_url, id: "image-view-large-link" %>
</li>
<% end %>
<li id="post-option-find-similar"> <li id="post-option-find-similar">
<%= link_to "Find similar", iqdb_queries_path(post_id: post.id) %> <%= link_to "Find similar", iqdb_queries_path(post_id: post.id) %>
</li> </li>

1
app/views/users/edit.html.erb
View File

@@ -61,7 +61,6 @@
</div> </div>
<%= f.input :style_usernames, :as => :select, :label => "Colored usernames", :hint => "Color users according to their user level", :include_blank => false, :collection => [["Yes", "true"], ["No", "false"]] %> <%= f.input :style_usernames, :as => :select, :label => "Colored usernames", :hint => "Color users according to their user level", :include_blank => false, :collection => [["Yes", "true"], ["No", "false"]] %>
<%= f.input :always_resize_images, :as => :select, :include_blank => false, :label => "Fit images to window", :hint => "Make images fit screen width by default", :collection => [["Yes", "true"], ["No", "false"]] %>
<%= f.input :enable_post_navigation, :as => :select, :include_blank => false, :label => "Enable keyboard shortcuts", :hint => "Enable keyboard shortcuts", :collection => [["Yes", "true"], ["No", "false"]] %> <%= f.input :enable_post_navigation, :as => :select, :include_blank => false, :label => "Enable keyboard shortcuts", :hint => "Enable keyboard shortcuts", :collection => [["Yes", "true"], ["No", "false"]] %>
<%= f.input :enable_sequential_post_navigation, :as => :select, :label => "Enable post navigation", :hint => "Show prev/next links when viewing a post", :include_blank => false, :collection => [["Yes", "true"], ["No", "false"]] %> <%= f.input :enable_sequential_post_navigation, :as => :select, :label => "Enable post navigation", :hint => "Show prev/next links when viewing a post", :include_blank => false, :collection => [["Yes", "true"], ["No", "false"]] %>
<%= f.input :new_post_navigation_layout, :as => :select, :label => "Navigation bar position", :include_blank => false, :collection => [["Below", "true"], ["Above", "false"]], :hint => "When browsing pools or posts, place navigation links above or below the image" %> <%= f.input :new_post_navigation_layout, :as => :select, :label => "Navigation bar position", :include_blank => false, :collection => [["Below", "true"], ["Above", "false"]], :hint => "When browsing pools or posts, place navigation links above or below the image" %>