diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js index a5b55902f..9412b31f7 100644 --- a/app/assets/javascripts/notes.js +++ b/app/assets/javascripts/notes.js @@ -137,6 +137,14 @@ Danbooru.Note = { return $("#note-container div.note-box[data-id=" + id + "]"); }, + show_highlighted: function($note_box) { + var note_id = $note_box.data("id"); + + Danbooru.Note.Body.show(note_id); + $note_box.addClass("note-box-highlighted"); + Danbooru.scroll_to($note_box); + }, + resize_inner_border: function($note_box) { var $inner_border = $note_box.find("div.note-box-inner-border"); $inner_border.css({ @@ -789,6 +797,7 @@ Danbooru.Note = { Danbooru.Note.load_all(); this.initialize_shortcuts(); + this.initialize_highlight(); }, initialize_shortcuts: function() { @@ -799,6 +808,15 @@ Danbooru.Note = { $("#image").click(Danbooru.Note.Box.toggle_all); }, + + initialize_highlight: function() { + var matches = window.location.hash.match(/^#note-(\d+)$/); + + if (matches) { + var $note_box = Danbooru.Note.Box.find(matches[1]); + Danbooru.Note.Box.show_highlighted($note_box); + } + }, } $(function() { diff --git a/app/assets/stylesheets/common/000_vars.scss b/app/assets/stylesheets/common/000_vars.scss index b0cb036f9..4ad0d4c10 100644 --- a/app/assets/stylesheets/common/000_vars.scss +++ b/app/assets/stylesheets/common/000_vars.scss @@ -27,6 +27,8 @@ $preview_flagged_color: #F00; $preview_sample_warning_color: hsl(0, 100%, 90%); // light red $preview_quality_warning_color: hsl(50, 100%, 90%); // light yellow +$note_highlight_color: $preview_pending_color; + $error_color: hsl(0, 100%, 95%); // light red $success_color: hsl(120, 100%, 95%); // light green diff --git a/app/assets/stylesheets/specific/notes.scss b/app/assets/stylesheets/specific/notes.scss index 9b7fd61d1..02120fd52 100644 --- a/app/assets/stylesheets/specific/notes.scss +++ b/app/assets/stylesheets/specific/notes.scss @@ -92,6 +92,10 @@ div#note-container { vertical-align: middle; } } + + &.note-box-highlighted { + outline: 2px solid $note_highlight_color; + } } }