A bit of settings interior redesign.

This commit is contained in:
Nicolas Stepien 2013-02-28 03:45:55 +01:00
parent de8226e96e
commit d135c59205
9 changed files with 104 additions and 63 deletions

File diff suppressed because one or more lines are too long

View File

@ -16,6 +16,11 @@
color: #34345C; color: #34345C;
} }
/* Settings */
:root.burichan #fourchanx-settings fieldset {
border-color: #B7C5D9;
}
/* Quote */ /* Quote */
:root.burichan .backlink.deadlink { :root.burichan .backlink.deadlink {
color: #34345C !important; color: #34345C !important;

View File

@ -16,6 +16,11 @@
color: #800000; color: #800000;
} }
/* Settings */
:root.futaba #fourchanx-settings fieldset {
border-color: #D9BFB7;
}
/* Quote */ /* Quote */
:root.futaba .backlink.deadlink { :root.futaba .backlink.deadlink {
color: #00E !important; color: #00E !important;

View File

@ -16,6 +16,11 @@
color: #FF6600; color: #FF6600;
} }
/* Settings */
:root.photon #fourchanx-settings fieldset {
border-color: #CCC;
}
/* Quote */ /* Quote */
:root.photon .backlink.deadlink { :root.photon .backlink.deadlink {
color: #F60 !important; color: #F60 !important;

View File

@ -250,14 +250,12 @@ a[href="javascript:;"] {
left: 0; left: 0;
overflow: auto; overflow: auto;
} }
.section-main ul,
.section-sauce ul, .section-sauce ul,
.section-rice ul { .section-rice ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 8px; padding: 8px;
} }
.section-main li,
.section-sauce li, .section-sauce li,
.section-rice li { .section-rice li {
padding-left: 4px; padding-left: 4px;
@ -280,6 +278,13 @@ a[href="javascript:;"] {
.section-rice textarea { .section-rice textarea {
height: 150px; height: 150px;
} }
#fourchanx-settings fieldset {
border: 1px solid;
border-radius: 3px;
}
#fourchanx-settings legend {
font-weight: 700;
}
#fourchanx-settings textarea { #fourchanx-settings textarea {
font-family: monospace; font-family: monospace;
min-width: 100%; min-width: 100%;

View File

@ -16,6 +16,11 @@
color: #81A2BE; color: #81A2BE;
} }
/* Settings */
:root.tomorrow #fourchanx-settings fieldset {
border-color: #111;
}
/* Quote */ /* Quote */
:root.tomorrow .backlink.deadlink { :root.tomorrow .backlink.deadlink {
color: #81A2BE !important; color: #81A2BE !important;

View File

@ -16,6 +16,11 @@
color: #34345C; color: #34345C;
} }
/* Settings */
:root.yotsuba-b #fourchanx-settings fieldset {
border-color: #B7C5D9;
}
/* Quote */ /* Quote */
:root.yotsuba-b .backlink.deadlink { :root.yotsuba-b .backlink.deadlink {
color: #34345C !important; color: #34345C !important;

View File

@ -16,6 +16,11 @@
color: #800000; color: #800000;
} }
/* Settings */
:root.yotsuba #fourchanx-settings fieldset {
border-color: #D9BFB7;
}
/* Quote */ /* Quote */
:root.yotsuba .backlink.deadlink { :root.yotsuba .backlink.deadlink {
color: #00E !important; color: #00E !important;

View File

@ -238,16 +238,16 @@ Settings =
$.on $('input', section), 'change', Settings.onImport $.on $('input', section), 'change', Settings.onImport
for key, obj of Config.main for key, obj of Config.main
ul = $.el 'ul', fs = $.el 'fieldset',
textContent: key innerHTML: "<legend>#{key}</legend>"
for key, arr of obj for key, arr of obj
checked = if $.get(key, Conf[key]) then 'checked' else '' checked = if $.get(key, Conf[key]) then 'checked' else ''
description = arr[1] description = arr[1]
li = $.el 'li', div = $.el 'div',
innerHTML: "<label><input type=checkbox name=\"#{key}\" #{checked}>#{key}</label><span class=description>: #{description}</span>" innerHTML: "<label><input type=checkbox name=\"#{key}\" #{checked}>#{key}</label><span class=description>: #{description}</span>"
$.on $('input', li), 'click', $.cb.checked $.on $('input', div), 'click', $.cb.checked
$.add ul, li $.add fs, div
$.add section, ul $.add section, fs
hiddenNum = 0 hiddenNum = 0
for ID, thread of ThreadHiding.getHiddenThreads().threads for ID, thread of ThreadHiding.getHiddenThreads().threads
@ -256,13 +256,13 @@ Settings =
for ID, post of thread for ID, post of thread
$.log post $.log post
hiddenNum++ hiddenNum++
li = $.el 'li', div = $.el 'div',
innerHTML: "<button>Hidden: #{hiddenNum}</button><span class=description>: Clear manually hidden threads and posts on /#{g.BOARD}/." innerHTML: "<button>Hidden: #{hiddenNum}</button><span class=description>: Clear manually hidden threads and posts on /#{g.BOARD}/."
$.on $('button', li), 'click', -> $.on $('button', div), 'click', ->
@textContent = 'Hidden: 0' @textContent = 'Hidden: 0'
$.delete "hiddenThreads.#{g.BOARD}" $.delete "hiddenThreads.#{g.BOARD}"
$.delete "hiddenPosts.#{g.BOARD}" $.delete "hiddenPosts.#{g.BOARD}"
$.after $('input[name="Stubs"]', section).parentNode.parentNode, li $.after $('input[name="Stubs"]', section).parentNode.parentNode, div
export: -> export: ->
now = Date.now() now = Date.now()
data = data =
@ -381,7 +381,6 @@ Settings =
filter: (section) -> filter: (section) ->
section.innerHTML = """ section.innerHTML = """
<div class=warning #{if Conf['Sauce'] then 'hidden' else ''}><code>Filter</code> is disabled.</div>
<select name=filter> <select name=filter>
<option value=guide>Guide</option> <option value=guide>Guide</option>
<option value=name>Name</option> <option value=name>Name</option>
@ -414,6 +413,7 @@ Settings =
$.add div, ta $.add div, ta
return return
div.innerHTML = """ div.innerHTML = """
<div class=warning #{if Conf['Sauce'] then 'hidden' else ''}><code>Filter</code> is disabled.</div>
<p> <p>
Use <a href=https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions>regular expressions</a>, one per line.<br> Use <a href=https://developer.mozilla.org/en/JavaScript/Guide/Regular_Expressions>regular expressions</a>, one per line.<br>
Lines starting with a <code>#</code> will be ignored.<br> Lines starting with a <code>#</code> will be ignored.<br>
@ -463,43 +463,49 @@ Settings =
rice: (section) -> rice: (section) ->
section.innerHTML = """ section.innerHTML = """
<div class=warning #{if Conf['Time Formatting'] then 'hidden' else ''}><code>Time Formatting</code> is disabled.</div> <fieldset>
<ul>Time formatting <legend>Time Formatting <span class=warning #{if Conf['Time Formatting'] then 'hidden' else ''}>is disabled.</span></legend>
<li><input name=time class=field>: <span class=time-preview></span></li> <div><input name=time class=field>: <span class=time-preview></span></div>
<li>Supported <a href=//en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</li> <div>Supported <a href=//en.wikipedia.org/wiki/Date_%28Unix%29#Formatting>format specifiers</a>:</div>
<li>Day: <code>%a</code>, <code>%A</code>, <code>%d</code>, <code>%e</code></li> <div>Day: <code>%a</code>, <code>%A</code>, <code>%d</code>, <code>%e</code></div>
<li>Month: <code>%m</code>, <code>%b</code>, <code>%B</code></li> <div>Month: <code>%m</code>, <code>%b</code>, <code>%B</code></div>
<li>Year: <code>%y</code></li> <div>Year: <code>%y</code></div>
<li>Hour: <code>%k</code>, <code>%H</code>, <code>%l</code>, <code>%I</code>, <code>%p</code>, <code>%P</code></li> <div>Hour: <code>%k</code>, <code>%H</code>, <code>%l</code>, <code>%I</code>, <code>%p</code>, <code>%P</code></div>
<li>Minute: <code>%M</code></li> <div>Minute: <code>%M</code></div>
<li>Second: <code>%S</code></li> <div>Second: <code>%S</code></div>
</ul> </fieldset>
<div class=warning #{if Conf['Quote Backlinks'] then 'hidden' else ''}><code>Quote Backlinks</code> are disabled.</div>
<ul>Backlink formatting <fieldset>
<li><input name=backlink class=field>: <span class=backlink-preview></span></li> <legend>Quote Backlinks formatting <span class=warning #{if Conf['Quote Backlinks'] then 'hidden' else ''}>is disabled.</span></legend>
</ul> <div><input name=backlink class=field>: <span class=backlink-preview></span></div>
<div class=warning #{if Conf['File Info Formatting'] then 'hidden' else ''}><code>File Info Formatting</code> is disabled.</div> </fieldset>
<ul>File Info Formatting
<li><input name=fileInfo class=field>: <span class='fileText file-info-preview'></span></li> <fieldset>
<li>Link: <code>%l</code> (truncated), <code>%L</code> (untruncated), <code>%T</code> (Unix timestamp)</li> <legend>File Info Formatting <span class=warning #{if Conf['File Info Formatting'] then 'hidden' else ''}>is disabled.</span></legend>
<li>Original file name: <code>%n</code> (truncated), <code>%N</code> (untruncated), <code>%t</code> (Unix timestamp)</li> <div><input name=fileInfo class=field>: <span class='fileText file-info-preview'></span></div>
<li>Spoiler indicator: <code>%p</code></li> <div>divnk: <code>%l</code> (truncated), <code>%L</code> (untruncated), <code>%T</code> (Unix timestamp)</div>
<li>Size: <code>%B</code> (Bytes), <code>%K</code> (KB), <code>%M</code> (MB), <code>%s</code> (4chan default)</li> <div>Original file name: <code>%n</code> (truncated), <code>%N</code> (untruncated), <code>%t</code> (Unix timestamp)</div>
<li>Resolution: <code>%r</code> (Displays 'PDF' for PDF files)</li> <div>Spoiler indicator: <code>%p</code></div>
</ul> <div>Size: <code>%B</code> (Bytes), <code>%K</code> (KB), <code>%M</code> (MB), <code>%s</code> (4chan default)</div>
<div class=warning #{if Conf['Unread Tab Icon'] then 'hidden' else ''}><code>Unread Tab Icon</code> is disabled.</div> <div>Resolution: <code>%r</code> (Displays 'PDF' for PDF files)</div>
<div>Unread favicons</div> </fieldset>
<select name=favicon>
<option value=ferongr>ferongr</option> <fieldset>
<option value=xat->xat-</option> <legend>Unread Tab Icon <span class=warning #{if Conf['Unread Tab Icon'] then 'hidden' else ''}>is disabled.</span></legend>
<option value=Mayhem>Mayhem</option> <select name=favicon>
<option value=Original>Original</option> <option value=ferongr>ferongr</option>
</select> <option value=xat->xat-</option>
<span class=favicon-preview></span> <option value=Mayhem>Mayhem</option>
<div>Custom CSS</div> <option value=Original>Original</option>
<div class=warning #{if Conf['Custom CSS'] then 'hidden' else ''}><code>Custom CSS</code> is disabled.</div> </select>
<button id=apply-css>Apply CSS</button> <span class=favicon-preview></span>
<textarea name=usercss class=field></textarea> </fieldset>
<fieldset>
<legend>Custom CSS <span class=warning #{if Conf['Custom CSS'] then 'hidden' else ''}>is disabled.</span></legend>
<button id=apply-css>Apply CSS</button>
<textarea name=usercss class=field></textarea>
</fieldset>
""" """
for name in ['time', 'backlink', 'fileInfo', 'favicon', 'usercss'] for name in ['time', 'backlink', 'fileInfo', 'favicon', 'usercss']
input = $ "[name=#{name}]", section input = $ "[name=#{name}]", section