Move the QR and Expand All Images out of the Header's menu, right next to the menu button. #932

This commit is contained in:
Nicolas Stepien 2013-03-12 21:25:09 +01:00
parent 5ae4747822
commit 9a6aa298ec
4 changed files with 77 additions and 52 deletions

File diff suppressed because one or more lines are too long

View File

@ -148,6 +148,12 @@ a[href="javascript:;"] {
text-decoration: none; text-decoration: none;
padding: 1px; padding: 1px;
} }
#shortcuts:empty {
display: none;
}
.shortcut:not(:last-child)::after {
content: " / ";
}
.brackets-wrap::before { .brackets-wrap::before {
content: " ["; content: " [";
} }

View File

@ -5,7 +5,7 @@ Header =
innerHTML: """ innerHTML: """
<div id=header-bar class=dialog> <div id=header-bar class=dialog>
<span class='menu-button brackets-wrap'><a href=javascript:;><i></i></a></span> <span class='menu-button brackets-wrap'><a href=javascript:;><i></i></a></span>
<span class=brackets-wrap hidden>top secret</span> <span id=shortcuts class=brackets-wrap></span>
<span id=board-list> <span id=board-list>
<span id=custom-board-list></span> <span id=custom-board-list></span>
<span id=full-board-list hidden></span> <span id=full-board-list hidden></span>
@ -30,7 +30,7 @@ Header =
$.event 'AddMenuEntry', $.event 'AddMenuEntry',
type: 'header' type: 'header'
el: catalogToggler el: catalogToggler
order: 105 order: 50
$.asap (-> d.body), -> $.asap (-> d.body), ->
return unless Main.isThisPageLegit() return unless Main.isThisPageLegit()
@ -118,6 +118,12 @@ Header =
new Notification 'info', message, 2 new Notification 'info', message, 2
$.set 'Header auto-hide', hide $.set 'Header auto-hide', hide
addShortcut: (el) ->
shortcut = $.el 'span',
className: 'shortcut'
$.add shortcut, el
$.prepend $('#shortcuts', Header.bar), shortcut
menuToggle: (e) -> menuToggle: (e) ->
Header.menu.toggle e, @, g Header.menu.toggle e, @, g
@ -1739,9 +1745,7 @@ Keybinds =
img: (thread, all) -> img: (thread, all) ->
if all if all
input = ImageExpand.expandAllInput ImageExpand.cb.toggleAll()
input.checked = !input.checked
ImageExpand.cb.all.call input
else else
post = Get.postFromNode $('.post.highlight', thread) or $ '.op', thread post = Get.postFromNode $('.post.highlight', thread) or $ '.op', thread
ImageExpand.toggle post ImageExpand.toggle post
@ -3065,6 +3069,15 @@ ImageExpand =
init: -> init: ->
return if g.VIEW is 'catalog' or !Conf['Image Expansion'] return if g.VIEW is 'catalog' or !Conf['Image Expansion']
@EAI = $.el 'a',
className: 'expanded-all-shortcut'
textContent: 'EAI'
title: 'Expand All Images'
href: 'javascript:;'
@EAI.style.opacity = '.35'
$.on @EAI, 'click', ImageExpand.cb.toggleAll
Header.addShortcut @EAI
Post::callbacks.push Post::callbacks.push
name: 'Image Expansion' name: 'Image Expansion'
cb: @node cb: @node
@ -3078,12 +3091,14 @@ ImageExpand =
return if e.shiftKey or e.altKey or e.ctrlKey or e.metaKey or e.button isnt 0 return if e.shiftKey or e.altKey or e.ctrlKey or e.metaKey or e.button isnt 0
e.preventDefault() e.preventDefault()
ImageExpand.toggle Get.postFromNode @ ImageExpand.toggle Get.postFromNode @
all: -> toggleAll: ->
$.event 'CloseMenu' $.event 'CloseMenu'
func = if ImageExpand.on = @checked if ImageExpand.on = ImageExpand.EAI.style.opacity isnt '1'
ImageExpand.expand ImageExpand.EAI.style.opacity = 1
func = ImageExpand.expand
else else
ImageExpand.contract ImageExpand.EAI.style.opacity = .35
func = ImageExpand.contract
for ID, post of g.posts for ID, post of g.posts
for post in [post].concat post.clones for post in [post].concat post.clones
{file} = post {file} = post
@ -3203,26 +3218,21 @@ ImageExpand =
{createSubEntry} = ImageExpand.menu {createSubEntry} = ImageExpand.menu
subEntries = [] subEntries = []
subEntries.push createSubEntry 'Expand all'
for key, conf of Config.imageExpansion for key, conf of Config.imageExpansion
subEntries.push createSubEntry key, conf subEntries.push createSubEntry key, conf
$.event 'AddMenuEntry', $.event 'AddMenuEntry',
type: 'header' type: 'header'
el: el el: el
order: 20 order: 80
subEntries: subEntries subEntries: subEntries
createSubEntry: (type, config) -> createSubEntry: (type, config) ->
label = $.el 'label', label = $.el 'label',
innerHTML: "<input type=checkbox name='#{type}'> #{type}" innerHTML: "<input type=checkbox name='#{type}'> #{type}"
input = label.firstElementChild input = label.firstElementChild
switch type if type in ['Fit width', 'Fit height']
when 'Expand all' $.on input, 'change', ImageExpand.cb.setFitness
$.on input, 'change', ImageExpand.cb.all
ImageExpand.expandAllInput = input
when 'Fit width', 'Fit height'
$.on input, 'change', ImageExpand.cb.setFitness
if config if config
label.title = config[1] label.title = config[1]
input.checked = Conf[type] input.checked = Conf[type]

View File

@ -18,19 +18,17 @@ QR =
QR.postingIsEnabled = !!$.id 'postForm' QR.postingIsEnabled = !!$.id 'postForm'
return unless QR.postingIsEnabled return unless QR.postingIsEnabled
link = $.el 'a', sc = $.el 'a',
className: 'qr-shortcut' className: 'qr-shortcut'
textContent: 'Quick Reply' textContent: 'QR'
title: 'Quick Reply'
href: 'javascript:;' href: 'javascript:;'
$.on link, 'click', -> $.on sc, 'click', ->
$.event 'CloseMenu' $.event 'CloseMenu'
QR.open() QR.open()
QR.resetThreadSelector() QR.resetThreadSelector()
QR.nodes.com.focus() QR.nodes.com.focus()
$.event 'AddMenuEntry', Header.addShortcut sc
type: 'header'
el: link
order: 10
if $.engine is 'webkit' if $.engine is 'webkit'
$.on d, 'paste', QR.paste $.on d, 'paste', QR.paste