Get "slideout" UI working.

LICENSE

@@ -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

src/General/Header.coffee

@@ -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',

src/General/css/icons.horz.css

@@ -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 {

src/General/css/layout.css

@@ -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,
+.icon-orientation-horizontal #so-psa #globalMessage,
-#returnIcon,
+.icon-orientation-horizontal #so-watcher  #thread-watcher,
-#sowIcon,
+.icon-orientation-horizontal #so-nav #boardNavDesktopFoot {
-#psaIcon,
+  top: 16px !important;
-#slideNav,
+}
-#img-controls,
+.icon-orientation-vertical #so-psa,
-#catalog,
+.icon-orientation-vertical #so-watcher,
-#fappeTyme,
+.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 .a-icon,
-.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 #shortcuts .icon {
   opacity: 0;
 }
-#navtopright .exlinksOptionsLink,
+#so-nav,
-#returnIcon,
+#so-watcher,
-#{if Conf['Slideout Watcher'] then '#thread-watcher,' else ''}
+#so-psa {
-#{if Conf['Announcements'] is 'slideout' then '#globalMessage,' else ''}
+  line-height: 0;
-#boardNavDesktopFoot,
-#catalog {
-  z-index: 16;
 }
-#navtopright .exlinksOptionsLink:hover,
+.shortcut > div {
-#returnIcon:hover,
+  line-height: normal;
-#thread-watcher:hover,
-#globalMessage:hover,
-#slideNav:hover,
-#img-controls,
-#catalog:hover {
-  z-index: 17;
 }
 #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,
+.a-icon:hover,
-#main-menu:hover,
-#qr #qrtab,
-#sowIcon:hover,
-.thumbnail#selected,
-#returnIcon:hover,
-#catalog:hover,
-#fappeTyme:hover,
 #shortcuts .icon:hover {
   opacity: 1 !important;
 }
@@ -636,24 +627,10 @@ th {
   margin: 0 3px;
 }
 /* Icons */
-.icons-4chan-ss #main-menu,
+.icons-4chan-ss  .a-icon {
-.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 {
   background-image: url("data:image/png;base64,<%= grunt.file.read("src/General/img/icons/4chanSS.png",  {encoding: "base64"}) %>");
 }
-.icons-oneechan #main-menu,
+.icons-oneechan .a-icon {
-.icons-oneechan #returnIcon,
-.icons-oneechan #sowIcon,
-.icons-oneechan #psaIcon,
-.icons-oneechan #slideNav,
-.icons-oneechan #img-controls,
-.icons-oneechan #catalog,
-.icons-oneechan #fappeTyme {
   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 {
+#so-nav:hover #boardNavDesktopFoot {
-  overflow-y: auto;
+  display: block;
-  padding: 2px;
 }
-#boardNavDesktopFoot:not(:hover) {
+#boardNavDesktopFoot {
-  border-color: transparent;
+  display: none;
-  background-color: transparent;
+  padding: 2px;
-  height: 0;
-  overflow: hidden;
-  padding: 0;
-  border: 0 none;
 }
 .slideout-navigation-compact #boardNavDesktopFoot {
   word-spacing: 1px;
@@ -951,14 +923,12 @@ th {
 .slideout-watcher #thread-watcher > div {
   overflow: hidden;
 }
-.slideout-watcher #thread-watcher:hover {
+.slideout-watcher #so-watcher:hover #thread-watcher {
-  overflow-y: auto;
+  display: block;
 }
-.slideout-watcher #thread-watcher:not(:hover) {
+.slideout-watcher #thread-watcher {
-  height: 0;
+  display: none;
-  overflow: hidden;
+  overflow-y: auto;
-  border: 0 none;
-  padding: 0;
 }
 .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) {
+.announcements-slideout #so-psa:hover #globalMessage {
-  height: 0;
+  display: block;
-  overflow: hidden;
-  padding: 0;
-  border: 0 none;
 }
 .announcements-hide #globalMessage {
   display: none !important;

src/General/css/theme.css

@@ -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,
+.a-icon,
-#returnIcon,
+#shortcuts .icon {
-#sowIcon,
-#psaIcon,
-#slideNav,
-#img-controls,
-#catalog,
-#fappeTyme,
-.icon {
   #{unless Style.lightTheme then "<%= filter %>: url(\"#icons-filter\");" else ""}
 }
 .alternate-post-colors #threads > .thread:nth-of-type(2n+1),

src/Images/FappeTyme.coffee

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

src/Images/ImageExpand.coffee

@@ -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

src/Miscellaneous/CatalogLinks.coffee

@@ -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'

src/Monitoring/ThreadWatcher.coffee

@@ -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

src/Posting/QuickReply.coffee

@@ -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'

src/Theming/Style.coffee

@@ -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'
+    slideNav = $.el 'i',
-    $.add $.id('boardNavDesktopFoot'), slideNav
+      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