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

Rethink the #main-menu and settings icons in general

Browse Source
This commit is contained in:
Zixaphir 2013-06-02 17:36:15 -07:00
parent 718a973f03
commit a2ceddb03b
13 changed files with 174 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
builds/appchan-x.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

48
builds/crx/script.js
View File

File diff suppressed because one or more lines are too long

2
src/General/Globals.coffee
View File

@ -3044,7 +3044,7 @@ textarea,
"Checkbox Border": "#0f0f0f" "Checkbox Border": "#0f0f0f"
"Buttons Background": "#171717" "Buttons Background": "#171717"
"Buttons Border": "#111111" "Buttons Border": "#111111"
"Navigation Background": "rgba(16,16,16,0.9)" "Navigation Background": "rgba(30,30,30,0.9)"
"Navigation Border": "#111111" "Navigation Border": "#111111"
"Quotelinks": "#6d6d8c" "Quotelinks": "#6d6d8c"
"Backlinks": "#55555c" "Backlinks": "#55555c"

18
src/General/Settings.coffee
View File

@ -1,18 +1,16 @@
Settings = Settings =
init: -> init: ->
# Appchan X settings link # Appchan X settings link
link = $.el 'a', el = $.el 'a',
id: 'appchanOptions'
className: 'settings-link' className: 'settings-link'
href: 'javascript:;' href: 'javascript:;'
$.on link, 'click', Settings.open textContent: 'Settings'
$.on el, 'click', Settings.open
$.asap (-> d.body), ->
return unless Main.isThisPageLegit() $.event 'AddMenuEntry',
# Wait for #boardNavMobile instead of #boardNavDesktop, type: 'header'
# it might be incomplete otherwise. el: el
$.asap (-> $.id 'boardNavMobile'), -> order: 1
$.add $.id('navtopright'), link
$.get 'previousversion', null, (item) -> $.get 'previousversion', null, (item) ->
if previous = item['previousversion'] if previous = item['previousversion']

9
src/General/css/icons.base.css
View File

@ -1,12 +1,11 @@
#navtopright .exlinksOptionsLink::after, #navtopright .exlinksOptionsLink::after,
#appchanOptions, #main-menu,
body > div.navLinks > a:first-of-type::after, body > div.navLinks > a:first-of-type::after,
.slideout-watcher #watcher::after, .slideout-watcher #watcher::after,
.announcements-slideout #globalMessage::after, .announcements-slideout #globalMessage::after,
#boardNavDesktopFoot::after, #boardNavDesktopFoot::after,
body > a[style="cursor: pointer; float: right;"]::after, body > a[style="cursor: pointer; float: right;"]::after,
#img-controls, #img-controls,
#main-menu,
#catalog::after, #catalog::after,
#fappeTyme { #fappeTyme {
z-index: 18; z-index: 18;
@ -26,14 +25,13 @@ body::after {
height: 18px; height: 18px;
} }
.invisible-icons #navtopright .exlinksOptionsLink::after, .invisible-icons #navtopright .exlinksOptionsLink::after,
.invisible-icons #appchanOptions, .invisible-icons #main-menu,
.invisible-icons body > div.navLinks > a:first-of-type::after, .invisible-icons body > div.navLinks > a:first-of-type::after,
.invisible-icons.slideout-watcher #watcher::after, .invisible-icons.slideout-watcher #watcher::after,
.invisible-icons.announcements-slideout #globalMessage::after, .invisible-icons.announcements-slideout #globalMessage::after,
.invisible-icons #boardNavDesktopFoot::after, .invisible-icons #boardNavDesktopFoot::after,
.invisible-icons body > a[style="cursor: pointer; float: right;"]::after, .invisible-icons body > a[style="cursor: pointer; float: right;"]::after,
.invisible-icons #img-controls, .invisible-icons #img-controls,
.invisible-icons #main-menu,
.invisible-icons #catalog::after, .invisible-icons #catalog::after,
.invisible-icons #fappeTyme { .invisible-icons #fappeTyme {
opacity: 0; opacity: 0;
@ -43,7 +41,6 @@ body > div.navLinks > a:first-of-type,
#{if Conf['Slideout Watcher'] then '#watcher,' else ''} #{if Conf['Slideout Watcher'] then '#watcher,' else ''}
#{if Conf['Announcements'] is 'slideout' then '#globalMessage,' else ''} #{if Conf['Announcements'] is 'slideout' then '#globalMessage,' else ''}
#boardNavDesktopFoot, #boardNavDesktopFoot,
#main-menu,
body > a[style="cursor: pointer; float: right;"], body > a[style="cursor: pointer; float: right;"],
#catalog { #catalog {
z-index: 16; z-index: 16;
@ -58,7 +55,7 @@ body > a[style="cursor: pointer; float: right;"]:hover,
#catalog:hover { #catalog:hover {
z-index: 17; z-index: 17;
} }
#appchanOptions { #main-menu {
visibility: visible; visibility: visible;
background-position: 0 0; background-position: 0 0;
} }

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

@ -1,8 +1,8 @@
/* 4chan X Options */
body::after { body::after {
#{align}: #{position[i] - 1}px; #{align}: #{position[i] - 1}px;
} }
#appchanOptions { /* Appchan X Options */
#main-menu {
#{align}: #{position[i++]}px; #{align}: #{position[i++]}px;
} }
/* Slideout Navigation */ /* Slideout Navigation */
@ -29,10 +29,6 @@ body > a[style="cursor: pointer; float: right;"]::after {
#img-controls { #img-controls {
#{align}: #{position[i++]}px; #{align}: #{position[i++]}px;
} }
/* Main Menu */
#main-menu {
#{align}: #{position[i++]}px;
}
/* 4chan Catalog */ /* 4chan Catalog */
#catalog::after { #catalog::after {
#{align}: #{position[i++]}px; #{align}: #{position[i++]}px;
@ -62,11 +58,10 @@ body::after {
} }
#boardNavDesktopFoot::after, #boardNavDesktopFoot::after,
#navtopright .exlinksOptionsLink::after, #navtopright .exlinksOptionsLink::after,
#appchanOptions, #main-menu,
.slideout-watcher #watcher::after, .slideout-watcher #watcher::after,
.announcements-slideout #globalMessage::after, .announcements-slideout #globalMessage::after,
#img-controls, #img-controls,
#main-menu,
#fappeTyme, #fappeTyme,
div.navLinks > a:first-of-type::after, div.navLinks > a:first-of-type::after,
#catalog::after, #catalog::after,

9
src/General/css/icons.vert.css
View File

@ -5,14 +5,10 @@ body::after {
#img-controls { #img-controls {
top: #{position[i++]}px; top: #{position[i++]}px;
} }
/* Main Menu */ /* Appchan X Options */
#main-menu { #main-menu {
top: #{position[i++]}px; top: #{position[i++]}px;
} }
/* 4chan X Options */
#appchanOptions {
top: #{position[i++]}px;
}
/* Slideout Navigation */ /* Slideout Navigation */
#boardNavDesktopFoot, #boardNavDesktopFoot,
#boardNavDesktopFoot::after { #boardNavDesktopFoot::after {
@ -61,11 +57,10 @@ body::after {
} }
#navlinks a, #navlinks a,
#navtopright .exlinksOptionsLink::after, #navtopright .exlinksOptionsLink::after,
#appchanOptions, #main-menu,
#boardNavDesktopFoot::after, #boardNavDesktopFoot::after,
#globalMessage::after, #globalMessage::after,
#img-controls, #img-controls,
#main-menu,
#fappeTyme, #fappeTyme,
#{if _conf["Slideout Watcher"] then "#watcher::after," else ""} #{if _conf["Slideout Watcher"] then "#watcher::after," else ""}
body > a[style="cursor: pointer; float: right;"]::after, body > a[style="cursor: pointer; float: right;"]::after,

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

@ -355,31 +355,6 @@ th {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
} }
/* Main Menu */
#main-menu {
margin: 0;
border: 2px solid;
border-radius: 10px;
height: 14px;
width: 14px;
<%= sizing %>: border-box;
border-color: rgb(130,130,130);
color: rgb(130,130,130);
}
#main-menu::after {
content: '';
font-size: 10px;
position: absolute;
top: 50%;
left: 50%;
<%= agent %>transform: translate(-60%, -50%);
display: block;
border-top: 5px solid rgb(130, 130, 130);
border-left: 3px solid transparent;
border-right: 3px solid transparent;
width: 7px;
<%= sizing %>: border-box;
}
/* Updater / Thread Stats */ /* Updater / Thread Stats */
.float #thread-stats, .float #thread-stats,
.float #updater { .float #updater {
@ -1623,6 +1598,88 @@ a:only-of-type > .remove {
width: 500px; width: 500px;
height: auto; height: auto;
} }
/* Mascot Positions */
#mascot {
display: none;
}
#mascot img {
position: fixed;
z-index: -1;
bottom: 18.5em;
cursor: pointer;
left: 0;
right: 0;
}
.mascots #mascot {
display: block;
}
.sidebar-location-left #mascot img {
<%= sizing %>transform: scaleX(-1);
}
.sidebar-location-right.mascot-location-sidebar #mascot img,
.sidebar-location-left.mascot-location-opposite #mascot img {
left: auto;
}
.sidebar-location-left.mascot-location-sidebar #mascot img,
.sidebar-location-right.mascot-location-opposite #mascot img {
right: auto;
}
.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img,
.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img,
.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
bottom: 1.5em;
}
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade #mascot img {
bottom: 20.1em;
}
.post-form-style-fixed.show-post-form-header #mascot img,
.post-form-style-transparent-fade.show-post-form-header #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 20.3em;
}
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
bottom: 21.6em;
}
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img {
bottom: 21.8em;
}
.post-form-style-fixed.post-form-decorations #mascot img,
.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 18.8em;
}
.mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.mascot-position-bottom #mascot img,
.mascot-position-default.posting-disabled #mascot img {
bottom: 0;
}
.mascots-overlap-posts #mascot img {
z-index: 3;
}
.mascot-position-middle #mascot img {
bottom: 50% !important;
<%= agent %>transform: translateY(50%);
}
.mascot-position-top #mascot img {
bottom: auto !important;
top: 17px;
}
.grayscale-mascots #mascot img {
<%= filter %>: url('#grayscale');
}
/* Options */ /* Options */
#overlay { #overlay {
position: fixed; position: fixed;

95
src/General/css/mascot.css
View File

@ -1,38 +1,4 @@
#mascot {
display: none;
}
.mascots #mascot {
display: block;
}
.sidebar-location-left #mascot img {
<%= sizing %>transform: scaleX(-1);
}
.sidebar-location-right.mascot-location-sidebar #mascot img,
.sidebar-location-left #mascot img {
right: 0;
left: auto;
margin-right: #{mascot.hOffset}px;
}
.sidebar-location-right.sidebar-large.mascot-location-sidebar #mascot img,
.sidebar-location-left.sidebar-large #mascot img {
right: #{if mascot.center then 25 else 0}px;
left: auto;
}
.sidebar-location-left.mascot-location-sidebar #mascot img,
.sidebar-location-right #mascot img {
left: 0;
right: auto;
margin-left: #{mascot.hOffset}px;
}
.sidebar-location-left.sidebar-large.mascot-location-sidebar #mascot img,
.sidebar-location-right.sidebar-large #mascot img {
left: #{if mascot.center then 25 else 0}px;
right: auto;
}
#mascot img { #mascot img {
position: fixed;
z-index: -1;
bottom: 18.5em;
height: #{ height: #{
if mascot.height and isNaN parseFloat mascot.height if mascot.height and isNaN parseFloat mascot.height
mascot.height mascot.height
@ -49,62 +15,9 @@
else else
'auto' 'auto'
}; };
margin-bottom: #{mascot.vOffset or 0}px; margin: #{mascot.vOffset or 0}px #{mascot.hOffset or 0}px;
cursor: pointer;
} }
.fourchan-ss-navigation.bottom.fixed.posting-disabled #mascot img, .sidebar-large #mascot img {
.fourchan-ss-navigation.bottom.fixed.mascot-position-bottom #mascot img, left: #{if mascot.center then 25 else 0}px;
.fourchan-ss-navigation.index.pagination-sticky-bottom.mascot-position-bottom #mascot img, right: #{if mascot.center then 25 else 0}px;
.fourchan-ss-navigation.bottom.fixed:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img {
bottom: 1.5em;
}
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade #mascot img {
bottom: 20.1em;
}
.post-form-style-fixed.show-post-form-header #mascot img,
.post-form-style-transparent-fade.show-post-form-header #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 20.3em;
}
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-fixed #mascot img,
.fourchan-ss-navigation.bottom.fixed.show-post-form-header.post-form-style-transparent-fade #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.show-post-form-header.post-form-style-transparent-fade #mascot img {
bottom: 21.6em;
}
.fourchan-ss-navigation.bottom.fixed.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-fixed.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.bottom.fixed.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img,
.fourchan-ss-navigation.index.pagination-sticky-bottom.post-form-style-transparent-fade.post-form-decorations.show-post-form-header #mascot img {
bottom: 21.8em;
}
.post-form-style-fixed.post-form-decorations #mascot img,
.post-form-style-transparent-fade.post-form-decorations #mascot img {
bottom: 18.8em;
}
.mascot-position-default:not(.post-form-style-fixed):not(.post-form-style-transparent-fade) #mascot img,
.mascot-position-bottom #mascot img,
.mascot-position-default.posting-disabled #mascot img {
bottom: 0;
}
.mascots-overlap-posts #mascot img {
z-index: 3;
}
.mascot-position-middle #mascot img {
bottom: 50%;
<%= sizing %>transform: translateY(50%);
}
.mascot-position-top #mascot img {
bottom: auto !important;
top: 17px;
}
.grayscale-mascots #mascot img {
<%= filter %>: url('#grayscale');
} }

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

@ -365,7 +365,7 @@ a .name {
border-top: 1px solid #{if Style.lightTheme then "rgba(0,0,0,0.05)" else "rgba(255,255,255,0.025)"}; border-top: 1px solid #{if Style.lightTheme then "rgba(0,0,0,0.05)" else "rgba(255,255,255,0.025)"};
} }
.icons-4chan-ss #navtopright .exlinksOptionsLink::after, .icons-4chan-ss #navtopright .exlinksOptionsLink::after,
.icons-4chan-ss #appchanOptions, .icons-4chan-ss #main-menu,
.icons-4chan-ss .navLinks > a:first-of-type::after, .icons-4chan-ss .navLinks > a:first-of-type::after,
.icons-4chan-ss #watcher::after, .icons-4chan-ss #watcher::after,
.icons-4chan-ss #globalMessage::after, .icons-4chan-ss #globalMessage::after,
@ -377,7 +377,7 @@ a .name {
background-image: url("data:image/png;base64,#{Icons['4chan SS']}"); background-image: url("data:image/png;base64,#{Icons['4chan SS']}");
} }
.icons-oneechan #navtopright .exlinksOptionsLink::after, .icons-oneechan #navtopright .exlinksOptionsLink::after,
.icons-oneechan #appchanOptions, .icons-oneechan #main-menu,
.icons-oneechan .navLinks > a:first-of-type::after, .icons-oneechan .navLinks > a:first-of-type::after,
.icons-oneechan #watcher::after, .icons-oneechan #watcher::after,
.icons-oneechan #globalMessage::after, .icons-oneechan #globalMessage::after,
@ -414,10 +414,10 @@ a .name {
background: #{theme["Highlighted Reply Background"]}; background: #{theme["Highlighted Reply Background"]};
border: 1px solid #{theme["Highlighted Reply Border"]}; border: 1px solid #{theme["Highlighted Reply Border"]};
} }
.icon-position-vertical body::after { .icon-orientation-vertical body::after {
background: #{backgroundC}; background: #{backgroundC};
} }
.icon-position-vertical .fourchan-ss-sidebar body::after, .icon-orientation-vertical .fourchan-ss-sidebar body::after,
.fourchan-ss-sidebar body::before { .fourchan-ss-sidebar body::before {
background: none repeat scroll 0% 0% rgba(#{if background = new Style.color Style.colorToHex theme["Reply Background"] then background.shiftRGB -18}, 0.8); background: none repeat scroll 0% 0% rgba(#{if background = new Style.color Style.colorToHex theme["Reply Background"] then background.shiftRGB -18}, 0.8);
} }

1
src/Theming/Mascots.coffee
View File

@ -296,6 +296,7 @@ MascotTools =
alert "Mascot \"#{name}\" saved." alert "Mascot \"#{name}\" saved."
click: (e) -> click: (e) ->
return if e.button isnt 0 # not LMB
e.preventDefault() e.preventDefault()
MascotTools.init() MascotTools.init()

2
src/Theming/Style.coffee
View File

@ -234,7 +234,6 @@ Style =
$ '#navtopright .exlinksOptionsLink', d.body $ '#navtopright .exlinksOptionsLink', d.body
notCatalog and $ 'body > a[style="cursor: pointer; float: right;"]', d.body notCatalog and $ 'body > a[style="cursor: pointer; float: right;"]', d.body
notEither and _conf['Image Expansion'] notEither and _conf['Image Expansion']
true
notEither notEither
g.VIEW is 'thread' g.VIEW is 'thread'
notEither and _conf['Fappe Tyme'] notEither and _conf['Fappe Tyme']
@ -259,7 +258,6 @@ Style =
[ [
notEither and _conf['Image Expansion'] notEither and _conf['Image Expansion']
true true
true
_conf['Slideout Navigation'] isnt 'hide' _conf['Slideout Navigation'] isnt 'hide'
_conf['Announcements'] is 'slideout' and (psa = $ '#globalMessage', d.body) and !psa.hidden _conf['Announcements'] is 'slideout' and (psa = $ '#globalMessage', d.body) and !psa.hidden
_conf['Thread Watcher'] and _conf['Slideout Watcher'] _conf['Thread Watcher'] and _conf['Slideout Watcher']