From ea86d2ffe4db38cb22fc5e90dc08ec051b2cbeea Mon Sep 17 00:00:00 2001 From: ccd0 Date: Tue, 27 Sep 2016 03:21:53 -0700 Subject: [PATCH] Add `Catalog hover expand` option. --- src/General/Index.coffee | 24 ++++++++++++++++-------- src/config/Config.coffee | 1 + src/css/burichan.css | 7 ++++--- src/css/futaba.css | 7 ++++--- src/css/photon.css | 7 ++++--- src/css/style.css | 20 +++++++++++++------- src/css/tomorrow.css | 13 ++++++++----- src/css/yotsuba-b.css | 7 ++++--- src/css/yotsuba.css | 7 ++++--- 9 files changed, 58 insertions(+), 35 deletions(-) diff --git a/src/General/Index.coffee b/src/General/Index.coffee index cd728002c..ba6551812 100644 --- a/src/General/Index.coffee +++ b/src/General/Index.coffee @@ -37,23 +37,27 @@ Index = # Header "Index Navigation" submenu repliesEntry = el: UI.checkbox 'Show Replies', 'Show replies' - hoverEntry = el: UI.checkbox 'Catalog Reply Hover', 'Catalog reply hover' + hoverEntry = el: UI.checkbox 'Catalog Hover Expand', 'Catalog hover expand' + previewEntry = el: UI.checkbox 'Catalog Reply Hover', 'Catalog reply hover' sortEntry = el: UI.checkbox 'Per-Board Sort Type', 'Per-board sort type', (typeof Conf['Index Sort'] is 'object') pinEntry = el: UI.checkbox 'Pin Watched Threads', 'Pin watched threads' anchorEntry = el: UI.checkbox 'Anchor Hidden Threads', 'Anchor hidden threads' refNavEntry = el: UI.checkbox 'Refreshed Navigation', 'Refreshed navigation' - hoverEntry.el.title = 'Show full replies in catalog on mouseover of excerpts.' - sortEntry.el.title = 'Set the sorting order of each board independently.' - pinEntry.el.title = 'Move watched threads to the start of the index.' - anchorEntry.el.title = 'Move hidden threads to the end of the index.' - refNavEntry.el.title = 'Refresh index when navigating through pages.' - for label in [repliesEntry, hoverEntry, pinEntry, anchorEntry, refNavEntry] + hoverEntry.el.title = 'Hovering over catalog threads expands the comment and shows more details.' + previewEntry.el.title = 'Show full replies in catalog on mouseover of excerpts.' + sortEntry.el.title = 'Set the sorting order of each board independently.' + pinEntry.el.title = 'Move watched threads to the start of the index.' + anchorEntry.el.title = 'Move hidden threads to the end of the index.' + refNavEntry.el.title = 'Refresh index when navigating through pages.' + for label in [repliesEntry, hoverEntry, previewEntry, pinEntry, anchorEntry, refNavEntry] input = label.el.firstChild {name} = input $.on input, 'change', $.cb.checked switch name when 'Show Replies', 'Catalog Reply Hover' $.on input, 'change', @cb.replies + when 'Catalog Hover Expand' + $.on input, 'change', @cb.hover when 'Pin Watched Threads', 'Anchor Hidden Threads' $.on input, 'change', @cb.resort $.on sortEntry.el.firstChild, 'change', @cb.perBoardSort @@ -62,7 +66,7 @@ Index = el: $.el 'span', textContent: 'Index Navigation' order: 100 - subEntries: [repliesEntry, hoverEntry, sortEntry, pinEntry, anchorEntry, refNavEntry] + subEntries: [repliesEntry, hoverEntry, previewEntry, sortEntry, pinEntry, anchorEntry, refNavEntry] # Navigation links at top of index @navLinks = $.el 'div', className: 'navLinks json-index' @@ -96,6 +100,7 @@ Index = # Thread container @root = $.el 'div', className: 'board json-index' @cb.size() + @cb.hover() # Page list @pagelist = $.el 'div', className: 'pagelist json-index' @@ -249,6 +254,9 @@ Index = Index.sort() Index.buildIndex() + hover: -> + doc.classList.toggle 'catalog-hover-expand', Conf['Catalog Hover Expand'] + popstate: (e) -> if e?.state {searched, mode, sort} = e.state diff --git a/src/config/Config.coffee b/src/config/Config.coffee index c533c473b..fad4bfdc0 100644 --- a/src/config/Config.coffee +++ b/src/config/Config.coffee @@ -732,6 +732,7 @@ Config = 'Previous Index Mode': 'paged' 'Index Size': 'small' 'Show Replies': true + 'Catalog Hover Expand': true 'Catalog Reply Hover': true 'Pin Watched Threads': false 'Anchor Hidden Threads': true diff --git a/src/css/burichan.css b/src/css/burichan.css index 937675b3f..8f869b907 100644 --- a/src/css/burichan.css +++ b/src/css/burichan.css @@ -31,12 +31,13 @@ } /* Catalog */ -:root.burichan .catalog-postContainer:hover > .post { +:root.burichan.catalog-hover-expand .catalog-postContainer:hover > .post { background-color: #D6DAF0; } :root.burichan.werkTyme .catalog-thread:not(:hover), -:root.burichan .catalog-postContainer:hover > .post, -:root.burichan .catalog-postContainer:hover .catalog-reply { +:root.burichan.werkTyme:not(.catalog-hover-expand) .catalog-thread, +:root.burichan.catalog-hover-expand .catalog-postContainer:hover > .post, +:root.burichan.catalog-hover-expand .catalog-postContainer:hover .catalog-reply { border-color: #B7C5D9; } diff --git a/src/css/futaba.css b/src/css/futaba.css index 45b731d1b..9130dc0c9 100644 --- a/src/css/futaba.css +++ b/src/css/futaba.css @@ -31,12 +31,13 @@ } /* Catalog */ -:root.futaba .catalog-postContainer:hover > .post { +:root.futaba.catalog-hover-expand .catalog-postContainer:hover > .post { background-color: #F0E0D6; } :root.futaba.werkTyme .catalog-thread:not(:hover), -:root.futaba .catalog-postContainer:hover > .post, -:root.futaba .catalog-postContainer:hover .catalog-reply { +:root.futaba.werkTyme:not(.catalog-hover-expand) .catalog-thread, +:root.futaba.catalog-hover-expand .catalog-postContainer:hover > .post, +:root.futaba.catalog-hover-expand .catalog-postContainer:hover .catalog-reply { border-color: #D9BFB7; } diff --git a/src/css/photon.css b/src/css/photon.css index 004781931..1ef404587 100644 --- a/src/css/photon.css +++ b/src/css/photon.css @@ -31,12 +31,13 @@ } /* Catalog */ -:root.photon .catalog-postContainer:hover > .post { +:root.photon.catalog-hover-expand .catalog-postContainer:hover > .post { background-color: #DDD; } :root.photon.werkTyme .catalog-thread:not(:hover), -:root.photon .catalog-postContainer:hover > .post, -:root.photon .catalog-postContainer:hover .catalog-reply { +:root.photon.werkTyme:not(.catalog-hover-expand) .catalog-thread, +:root.photon.catalog-hover-expand .catalog-postContainer:hover > .post, +:root.photon.catalog-hover-expand .catalog-postContainer:hover .catalog-reply { border-color: #CCC; } diff --git a/src/css/style.css b/src/css/style.css index 28776bce7..b7cefdee2 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -737,10 +737,11 @@ div.catalog-thread { right: 0; bottom: 0; } -.catalog-postContainer:not(:hover) { +.catalog-postContainer:not(:hover), +:root:not(.catalog-hover-expand) .catalog-postContainer { overflow: hidden; } -.catalog-postContainer:hover { +:root.catalog-hover-expand .catalog-postContainer:hover { z-index: 1; } .catalog-post { @@ -758,11 +759,11 @@ div.catalog-post { margin-top: -7px; padding-top: 6px; } -.catalog-postContainer:hover > .catalog-post { +:root.catalog-hover-expand .catalog-postContainer:hover > .catalog-post { margin-left: -61px; margin-right: -61px; } -.catalog-postContainer:hover > * > :not(.catalog-replies) { +:root.catalog-hover-expand .catalog-postContainer:hover > * > :not(.catalog-replies) { padding-left: 2px; padding-right: 2px; } @@ -818,6 +819,9 @@ div.catalog-post { .catalog-postContainer:not(:hover) > * > .file, .catalog-postContainer:not(:hover) > * > .postInfo > :not(.subject), .catalog-postContainer:not(:hover) > * > .catalog-replies, +:root:not(.catalog-hover-expand) .catalog-postContainer > * > .file, +:root:not(.catalog-hover-expand) .catalog-postContainer > * > .postInfo > :not(.subject), +:root:not(.catalog-hover-expand) .catalog-postContainer > * > .catalog-replies, .catalog-thread > .catalog-postContainer > :not(.catalog-post), .catalog-post > .file > :not(.fileText), .catalog-post > * > .fileText > :not(:first-child), @@ -862,7 +866,7 @@ div.catalog-post > div.postInfo { } .catalog-post > * > .nameBlock, .catalog-post > * > .dateTime, -.catalog-postContainer:hover > * > .postMessage:not(:empty) { +:root.catalog-hover-expand .catalog-postContainer:hover > * > .postMessage:not(:empty) { padding-top: .3em; } .catalog-reply { @@ -1305,12 +1309,14 @@ input[name="Default Volume"] { } .catalog-thread.filter-highlight .catalog-thumb, :root.werkTyme .catalog-thread.filter-highlight:not(:hover), -:root.werkTyme .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post { +:root.werkTyme:not(.catalog-hover-expand) .catalog-thread.filter-highlight, +:root.werkTyme.catalog-hover-expand .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post { box-shadow: 0 0 3px 3px rgba(255, 0, 0, .5); } .catalog-thread.watched .catalog-thumb, :root.werkTyme .catalog-thread.watched:not(:hover), -:root.werkTyme .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post { +:root.werkTyme:not(.catalog-hover-expand) .catalog-thread.watched, +:root.werkTyme.catalog-hover-expand .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post { outline: 2px solid rgba(255, 0, 0, .75); } diff --git a/src/css/tomorrow.css b/src/css/tomorrow.css index 4dd010601..1d6e1556f 100644 --- a/src/css/tomorrow.css +++ b/src/css/tomorrow.css @@ -30,12 +30,13 @@ } /* Catalog */ -:root.tomorrow .catalog-postContainer:hover > .post { +:root.tomorrow.catalog-hover-expand .catalog-postContainer:hover > .post { background-color: #282A2E; } :root.tomorrow.werkTyme .catalog-thread:not(:hover), -:root.tomorrow .catalog-postContainer:hover > .post, -:root.tomorrow .catalog-postContainer:hover .catalog-reply { +:root.tomorrow.werkTyme:not(.catalog-hover-expand) .catalog-thread, +:root.tomorrow.catalog-hover-expand .catalog-postContainer:hover > .post, +:root.tomorrow.catalog-hover-expand .catalog-postContainer:hover .catalog-reply { border-color: #111; } @@ -79,12 +80,14 @@ } :root.tomorrow .catalog-thread.filter-highlight .catalog-thumb, :root.tomorrow.werkTyme .catalog-thread.filter-highlight:not(:hover), -:root.tomorrow.werkTyme .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post { +:root.tomorrow.werkTyme:not(.catalog-hover-expand) .catalog-thread.filter-highlight, +:root.tomorrow.werkTyme.catalog-hover-expand .catalog-thread.filter-highlight > .catalog-postContainer:hover > .catalog-post { box-shadow: 0 0 3px 3px rgba(64, 192, 255, .7); } :root.tomorrow .catalog-thread.watched .catalog-thumb, :root.tomorrow.werkTyme .catalog-thread.watched:not(:hover), -:root.tomorrow.werkTyme .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post { +:root.tomorrow.werkTyme:not(.catalog-hover-expand) .catalog-thread.watched, +:root.tomorrow.werkTyme.catalog-hover-expand .catalog-thread.watched > .catalog-postContainer:hover > .catalog-post { outline: 2px solid rgb(64, 192, 255); } diff --git a/src/css/yotsuba-b.css b/src/css/yotsuba-b.css index c8aa1ad18..39460fadc 100644 --- a/src/css/yotsuba-b.css +++ b/src/css/yotsuba-b.css @@ -31,12 +31,13 @@ } /* Catalog */ -:root.yotsuba-b .catalog-postContainer:hover > .post { +:root.yotsuba-b.catalog-hover-expand .catalog-postContainer:hover > .post { background-color: #D6DAF0; } :root.yotsuba-b.werkTyme .catalog-thread:not(:hover), -:root.yotsuba-b .catalog-postContainer:hover > .post, -:root.yotsuba-b .catalog-postContainer:hover .catalog-reply { +:root.yotsuba-b.werkTyme:not(.catalog-hover-expand) .catalog-thread, +:root.yotsuba-b.catalog-hover-expand .catalog-postContainer:hover > .post, +:root.yotsuba-b.catalog-hover-expand .catalog-postContainer:hover .catalog-reply { border-color: #B7C5D9; } diff --git a/src/css/yotsuba.css b/src/css/yotsuba.css index c7a775da9..bd32f58d5 100644 --- a/src/css/yotsuba.css +++ b/src/css/yotsuba.css @@ -31,12 +31,13 @@ } /* Catalog */ -:root.yotsuba .catalog-postContainer:hover > .post { +:root.yotsuba.catalog-hover-expand .catalog-postContainer:hover > .post { background-color: #F0E0D6; } :root.yotsuba.werkTyme .catalog-thread:not(:hover), -:root.yotsuba .catalog-postContainer:hover > .post, -:root.yotsuba .catalog-postContainer:hover .catalog-reply { +:root.yotsuba.werkTyme:not(.catalog-hover-expand) .catalog-thread, +:root.yotsuba.catalog-hover-expand .catalog-postContainer:hover > .post, +:root.yotsuba.catalog-hover-expand .catalog-postContainer:hover .catalog-reply { border-color: #D9BFB7; }