Goyslop/4chan-x
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get "slideout" UI working.

Browse Source
This commit is contained in:
Zixaphir 2013-08-20 00:20:29 -07:00
parent 4b015dae9e
commit 7d626b9cb8
13 changed files with 122 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
LICENSE
View File

@ -1,5 +1,5 @@
/*
* appchan x - Version 2.3.5 - 2013-08-19
* appchan x - Version 2.3.5 - 2013-08-20
*
* Licensed under the MIT license.
* https://github.com/zixaphir/appchan-x/blob/master/LICENSE

33
builds/appchan-x.user.js
View File

File diff suppressed because one or more lines are too long

33
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

2
src/General/Header.coffee
View File

@ -3,7 +3,7 @@ Header =
@menu = new UI.Menu 'header'
menuButton = $.el 'span',
className: 'menu-button'
className: 'menu-button a-icon'
id: 'main-menu'
barFixedToggler = $.el 'label',

5
src/General/css/icons.horz.css
View File

@ -56,11 +56,6 @@ div.navLinks > a:first-of-type::after,
#catalog {
top: 1px !important;
}
.slideout-watcher #globalMessage,
.slideout-watcher #thread-watcher,
#boardNavDesktopFoot {
top: 16px !important;
}
.fourchan-ss-navigation.fixed.top #header-bar,
.fourchan-ss-navigation.pagination-top .pagelist,
.fourchan-ss-navigation.pagination-sticky-top .pagelist {

155
src/General/css/layout.css
View File

@ -132,7 +132,7 @@ body.unscroll {
.sidebar-location-right body::before {
right: 0;
}
sidebar-location-left body::before {
.sidebar-location-left body::before {
left: 0;
}
.fourchan-ss-sidebar.sidebar-location-right body {
@ -369,16 +369,16 @@ th {
position: fixed;
display: <%= flex %>;
top: 0;
z-index: 16;
}
.shortcut {
margin: 1px;
margin: 0 1px;
}
.icon-orientation-vertical #shortcuts {
<%= flex %>-direction: column;
}
.sidebar-location-right #shortcuts {
right: 0;
text-align: right;
}
.sidebar-location-right .shortcut {
align-self: flex-end;
@ -405,13 +405,13 @@ th {
#fappeTyme {
<%= order %>: 30;
}
#slideNav {
#so-nav {
<%= order %>: 40;
}
#sowIcon {
#so-watcher {
<%= order %>: 50;
}
#psaIcon {
#so-psa {
<%= order %>: 60;
}
#navPrev {
@ -432,16 +432,35 @@ th {
#updater {
<%= order %>: 120;
}
#main-menu,
#returnIcon,
#sowIcon,
#psaIcon,
#slideNav,
#img-controls,
#catalog,
#fappeTyme,
.icon-orientation-horizontal #so-psa #globalMessage,
.icon-orientation-horizontal #so-watcher #thread-watcher,
.icon-orientation-horizontal #so-nav #boardNavDesktopFoot {
top: 16px !important;
}
.icon-orientation-vertical #so-psa,
.icon-orientation-vertical #so-watcher,
.icon-orientation-vertical #so-nav {
position: relative;
}
.icon-orientation-vertical #so-psa #globalMessage,
.icon-orientation-vertical #so-watcher #thread-watcher,
.icon-orientation-vertical #so-nav #boardNavDesktopFoot {
top: 0 !important;
position: absolute !important;
z-index: -1;
}
.sidebar-location-right.icon-orientation-vertical #so-psa #globalMessage,
.sidebar-location-right.icon-orientation-vertical #so-watcher #thread-watcher,
.sidebar-location-right.icon-orientation-vertical #so-nav #boardNavDesktopFoot {
padding-right: 17px;
}
.sidebar-location-left.icon-orientation-vertical #so-psa #globalMessage,
.sidebar-location-left.icon-orientation-vertical #so-watcher #thread-watcher,
.sidebar-location-left.icon-orientation-vertical #so-nav #boardNavDesktopFoot {
padding-left: 17px;
}
.a-icon,
#shortcuts .icon {
z-index: 18;
display: inline-block;
width: 15px;
height: 15px;
@ -449,35 +468,17 @@ th {
opacity: 0.5;
cursor: pointer;
}
.invisible-icons #main-menu,
.invisible-icons #returnIcon,
.invisible-icons #sowIcon,
.invisible-icons #psaIcon,
.invisible-icons #slideNav,
.invisible-icons #img-controls,
.invisible-icons #catalog,
.invisible-icons #fappeTyme,
.invisible-icons #navPrev,
.invisible-icons #navNext,
.invisible-icons .a-icon,
.invisible-icons #shortcuts .icon {
opacity: 0;
}
#navtopright .exlinksOptionsLink,
#returnIcon,
#{if Conf['Slideout Watcher'] then '#thread-watcher,' else ''}
#{if Conf['Announcements'] is 'slideout' then '#globalMessage,' else ''}
#boardNavDesktopFoot,
#catalog {
z-index: 16;
#so-nav,
#so-watcher,
#so-psa {
line-height: 0;
}
#navtopright .exlinksOptionsLink:hover,
#returnIcon:hover,
#thread-watcher:hover,
#globalMessage:hover,
#slideNav:hover,
#img-controls,
#catalog:hover {
z-index: 17;
.shortcut > div {
line-height: normal;
}
#main-menu {
background-position: 0 0;
@ -485,13 +486,13 @@ th {
#returnIcon {
background-position: 0 -15px;
}
#sowIcon {
#so-watcher .a-icon {
background-position: 0 -30px;
}
#psaIcon {
#so-psa .a-icon {
background-position: 0 -45px;
}
#slideNav {
#so-nav .a-icon {
background-position: 0 -60px;
}
#img-controls {
@ -503,19 +504,9 @@ th {
#fappeTyme {
background-position: 0 -135px;
}
#slideNav:hover,
#psaIcon:hover,
#img-controls:hover,
#navPrev:hover,
#navNext:hover,
#appchanOptions:hover,
#main-menu:hover,
#qr #qrtab,
#sowIcon:hover,
.thumbnail#selected,
#returnIcon:hover,
#catalog:hover,
#fappeTyme:hover,
.a-icon:hover,
#shortcuts .icon:hover {
opacity: 1 !important;
}
@ -636,24 +627,10 @@ th {
margin: 0 3px;
}
/* Icons */
.icons-4chan-ss #main-menu,
.icons-4chan-ss #returnIcon,
.icons-4chan-ss #sowIcon,
.icons-4chan-ss #psaIcon,
.icons-4chan-ss #slideNav,
.icons-4chan-ss #img-controls,
.icons-4chan-ss #catalog,
.icons-4chan-ss #fappeTyme {
.icons-4chan-ss .a-icon {
background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/4chanSS.png", {encoding: "base64"}) %>");
}
.icons-oneechan #main-menu,
.icons-oneechan #returnIcon,
.icons-oneechan #sowIcon,
.icons-oneechan #psaIcon,
.icons-oneechan #slideNav,
.icons-oneechan #img-controls,
.icons-oneechan #catalog,
.icons-oneechan #fappeTyme {
.icons-oneechan .a-icon {
background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/oneechan.png", {encoding: "base64"}) %>");
}
/* Banner & Board Title */
@ -872,17 +849,12 @@ th {
.sidebar-location-left #boardNavDesktopFoot {
left: 2px;
}
#boardNavDesktopFoot:hover {
overflow-y: auto;
padding: 2px;
#so-nav:hover #boardNavDesktopFoot {
display: block;
}
#boardNavDesktopFoot:not(:hover) {
border-color: transparent;
background-color: transparent;
height: 0;
overflow: hidden;
padding: 0;
border: 0 none;
#boardNavDesktopFoot {
display: none;
padding: 2px;
}
.slideout-navigation-compact #boardNavDesktopFoot {
word-spacing: 1px;
@ -951,14 +923,12 @@ th {
.slideout-watcher #thread-watcher > div {
overflow: hidden;
}
.slideout-watcher #thread-watcher:hover {
overflow-y: auto;
.slideout-watcher #so-watcher:hover #thread-watcher {
display: block;
}
.slideout-watcher #thread-watcher:not(:hover) {
height: 0;
overflow: hidden;
border: 0 none;
padding: 0;
.slideout-watcher #thread-watcher {
display: none;
overflow-y: auto;
}
.watch-thread-link {
padding-top: 18px;
@ -999,15 +969,12 @@ th {
.announcements-slideout #globalMessage h3 {
margin: 0;
}
.announcements-slideout #globalMessage:hover {
.announcements-slideout #globalMessage {
<%= sizing %>: border-box;
overflow-y: auto;
display: none;
}
.announcements-slideout #globalMessage:not(:hover) {
height: 0;
overflow: hidden;
padding: 0;
border: 0 none;
.announcements-slideout #so-psa:hover #globalMessage {
display: block;
}
.announcements-hide #globalMessage {
display: none !important;

11
src/General/css/theme.css
View File

@ -341,15 +341,8 @@ a .name {
#selectrice li:not(:first-of-type) {
border-top: 1px solid #{if Style.lightTheme then "rgba(0,0,0,0.05)" else "rgba(255,255,255,0.025)"};
}
#main-menu,
#returnIcon,
#sowIcon,
#psaIcon,
#slideNav,
#img-controls,
#catalog,
#fappeTyme,
.icon {
.a-icon,
#shortcuts .icon {
#{unless Style.lightTheme then "<%= filter %>: url(\"#icons-filter\");" else ""}
}
.alternate-post-colors #threads > .thread:nth-of-type(2n+1),

1
src/Images/FappeTyme.coffee
View File

@ -5,6 +5,7 @@ FappeTyme =
href: 'javascript:;'
id: 'fappeTyme'
title: 'Fappe Tyme'
className: 'a-icon'
$.on el, 'click', FappeTyme.toggle

6
src/Images/ImageExpand.coffee
View File

@ -4,7 +4,7 @@ ImageExpand =
@EAI = $.el 'a',
id: 'img-controls'
className: 'expand-all-shortcut icon icon-resize-full'
className: 'expand-all-shortcut a-icon'
title: 'Expand All Images'
href: 'javascript:;'
@ -36,11 +36,11 @@ ImageExpand =
toggleAll: ->
$.event 'CloseMenu'
if ImageExpand.on = $.hasClass ImageExpand.EAI, 'expand-all-shortcut'
ImageExpand.EAI.className = 'contract-all-shortcut icon icon-resize-small'
ImageExpand.EAI.className = 'contract-all-shortcut a-icon'
ImageExpand.EAI.title = 'Contract All Images'
func = ImageExpand.expand
else
ImageExpand.EAI.className = 'expand-all-shortcut icon icon-resize-full'
ImageExpand.EAI.className = 'expand-all-shortcut a-icon'
ImageExpand.EAI.title = 'Expand All Images'
func = ImageExpand.contract
for ID, post of g.posts

1
src/Miscellaneous/CatalogLinks.coffee
View File

@ -56,5 +56,6 @@ CatalogLinks =
ready: ->
if catalogLink = ($('.pages.cataloglink a', d.body) or $ '[href=".././catalog"]', d.body)
catalogLink.textContent = ''
catalogLink.className = 'a-icon'
Header.addShortcut catalogLink
catalogLink.id = 'catalog'

4
src/Monitoring/ThreadWatcher.coffee
View File

@ -43,7 +43,9 @@ ThreadWatcher =
ThreadWatcher.refresh()
if Conf['Slideout Watcher']
el = $.el 'i', id: 'sowIcon'
el = $.el 'div',
id: 'so-watcher'
innerHTML: '<i class=a-icon></a>'
Header.addShortcut el
else
el = d.body

1
src/Posting/QuickReply.coffee
View File

@ -34,6 +34,7 @@ QR =
return Header.addShortcut sc if Conf['Header Shortcut']
$.addClass sc, 'on-page'
$.rmClass sc, 'icon'
sc.textContent = if g.VIEW is 'thread' then 'Reply to Thread' else 'Start a Thread'
con = $.el 'div',
className: 'center'

11
src/Theming/Style.coffee
View File

@ -171,14 +171,18 @@ Style =
css = """<%= grunt.file.read('src/General/css/icons.base.css').replace(/\s+/g, ' ').trim() %>"""
# Slideout Navigation
slideNav = $.el 'i', id: 'slideNav'
$.add $.id('boardNavDesktopFoot'), slideNav
slideNav = $.el 'i',
id: 'so-nav'
innerHTML: '<i class=a-icon></a>'
$.add slideNav, $.id('boardNavDesktopFoot')
Header.addShortcut slideNav if Conf['Slideout Navigation'] isnt 'hide'
# Announcements
if Conf['Announcements'] is 'slideout'
if (psa = $.id '#globalMessage') and !psa.hidden
psaIcon = $.el 'i', id: 'psaIcon'
psaIcon = $.el 'i',
id: 'so-psa'
innerHTML: '<i class=a-icon></a>'
$.add psa, psaIcon
Header.addShortcut psaIcon
@ -186,6 +190,7 @@ Style =
el = $('body > div.navLinks > a')
el.textContent = ''
el.id = 'returnIcon'
el.className = 'a-icon'
Header.addShortcut el
Style.icons.textContent = css