Topic: UI Change - Quick Tags on Sidebar (+etc)

Posted under e621 Tools and Applications

crappy

Scripts
Version 1.0
// ==UserScript==
// @name         Quick Tags on Sidebar
// @namespace    ZaSigma4
// @description  
// @version      1.0
// @match        https://e621.net/post/show/*
// @match        http://e621.net/post/show/*
// @match        https://e926.net/post/show/*
// @match        http://e926.net/post/show/*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js
// @grant        none
// ==/UserScript==
 
this.$ = this.jQuery = jQuery.noConflict(true);
 
//////////////////////////////////////////////////
 
var nMenu = 
    '<div id="q-menu">' +
      '<h5 class="post-sidebar-header">Q-Menu</h5>' +
      '<div id="q-placeholder"></div>' +
      '<ul id="q-fav"></ul>' +
      '<div id="q-vote"><span class="greentext"></span><span class="redtext"></span></div>' +
    '</div>';
 
var nStyle = 
    ' #q-menu { margin-bottom: 1em; }' +
    ' .q-tool { margin-bottom: 0.5em; }' +
    ' .q-tool .q-respond, .q-tool .link { display: none; }' +
    ' .q-submit { display: none; margin: 0.5em 0px; }' +
    
    ' #q-peek {' +
      ' display: none; float: right; margin-top: 4px; width: 110px; height: 22px;' +
      ' background-color: rgba(255,255,255,0.4); border-radius: 3px; }' +
    
    ' #q-placeholder {' +
      ' display: none; margin-bottom: 0.5em;' +
      ' background-color: rgba(255,255,255,0.05); border-radius: 3px; }' +
    
    ' #q-fav { position: absolute; left: 95px; }' +
    ' #q-vote { position: absolute; left: 180px; font-size: 120%; }' +
    ' #q-vote a { background-color: rgba(255,255,255,0.2); border-radius: 3px; padding: 0px 7px; margin-right: 6px; }' +
    ' #q-vote a:hover { background-color: rgba(255,255,255,0.05); }' +
    ' #q-vote a:active { background-color: rgba(255,255,255,0.2); }' +
    ' #q-vote #voteup.greentext { background-color: #3e9e49; color: #fff !important; }' +
    ' #q-vote #votedown.redtext { background-color: #e45f5f; color: #fff !important; }' +
    
    ' #edit { opacity: 1 !important; }' +
    
    ' #post_tags {' +
      ' display: block; position: fixed; left: 0px; top: 0px; z-index: 22;' +
      ' border: 5px solid #2e76b4; margin: 0px; width: 99%; height: 70px; min-height: 0px; }' +
    
    ' .q-on .q-tool {' +
      ' display: block; position: fixed; left: 0px; top: 0px; z-index: 20;' +
      ' background-color: #284A81; border-radius: 0px 0px 4px 0px; box-shadow: 2px 2px 5px #07162D;' +
      ' margin: 0px; padding: 90px 20px 10px; width: 235px; height: 65px; }' +
    
    ' .q-on .q-tool .q-edit { display: none; }' +
    ' .q-on .q-tool .q-respond, .q-on .q-submit { display: inline; }' +
    ' .q-on #q-peek, .q-on #q-placeholder { display: block; }' +
    
    ' #related {' +
      ' display: block; position: fixed; left: 0px; top: 160px; z-index: 21;' +
      ' background-color: #284A81; border-radius: 0px 4px 4px 0px; box-shadow: 2px 2px 5px #07162D;' +
      ' margin: 0px !important; padding: 10px 25px 10px 15px; max-height: 70%; overflow-x: hidden; overflow-y: auto; }' +
    
    ' #related > .tag-column:not(:first-child) { display: none; }' +
    
    ' #related > .tag-column:first-child {' +
      ' margin: 0px 0px 10px 0px; min-width: 235px; max-width: 235px; height: auto;' +
      ' column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;' +
      ' column-gap: 10px; -moz-column-gap: 10px; -webkit-column-gap: 10px; }' +
    
    ' #related > .tag-column:first-child > a {' +
      ' display: inline-block; max-width: 100%; white-space: nowrap;' +
      ' overflow: hidden; text-overflow: ellipsis; vertical-align: top; }' +
    
    // Skin Color
    ' .s-pony #post_tags { border-color: #2e76b4; }' +
    ' .s-pony .q-on .q-tool, .s-pony #related { background-color: #453269; }' +
    
    ' .s-bloodlust #post_tags { border-color: #f68b00; }' +
    ' .s-bloodlust .q-on .q-tool, .s-bloodlust #related { background-color: #222; box-shadow: 0px 0px 10px #C01D00; }' +
    
    ' .s-serpent #post_tags { border-color: #3A8F3A; }' +
    ' .s-serpent .q-on .q-tool, .s-serpent #related { background-color: #7BD07B; }' +
    
    ' .s-hotdog #post_tags { border-color: #000000; }' +
    ' .s-hotdog .q-on .q-tool, .s-hotdog #related { background-color: #FFFFFF; }';
 
//////////////////////////////////////////////////
 
qSidebar();
 
function qSidebar() {
  $("head").append('<style type="text/css">' + nStyle + '</style>');
  $("#post-view > .sidebar > h5:first").before(nMenu);
  
  $("#right-col > div:has(h4 > a[href='#'])").addClass("o-tool");
  $("#right-col > .o-tool a:nth-child(1)").addClass("q-edit");
  $("#right-col > .o-tool a:nth-child(2)").addClass("q-respond");
  $("#right-col > .o-tool a:nth-child(3)").addClass("q-download");
  
  $("#right-col > .o-tool").clone().addClass("q-tool").insertBefore("#q-fav");
  $("a[href^='/post_tag_history/index?post_id=']").clone().addClass("q-history").text("Tag History").appendTo("#q-menu");
  $("#add-to-favs, #remove-from-favs").clone().appendTo("#q-fav");
  $("#voteup").clone().html("&uarr;").appendTo("#q-vote > span:first");
  $("#votedown").clone().html("&darr;").appendTo("#q-vote > span:last");
  $("#edit :submit").clone().addClass("q-submit").prependTo(".q-tool");
  
  $(".q-tool").prepend('<div id="q-peek"></div>');
  $(".q-tool > h4").contents().eq(2)[0].textContent = "";
  //$(".q-tool > h4").contents().eq(9)[0].textContent = "test";
  $(".q-tool .q-download").text("DL");
  $(".q-tool #highres").text("Resize");
  
  $("#q-placeholder").height($(".q-tool").height());
  
  
  // Skin Color
  if ($(".main-stylesheet[href^='/stylesheets/skin-pony.css']").length) {
    $("#content").addClass("s-pony");
  } else if ($(".main-stylesheet[href^='/stylesheets/skin-bloodlust.css']").length) {
    $("#content").addClass("s-bloodlust");
  } else if ($(".main-stylesheet[href^='/stylesheets/skin-serpent.css']").length) {
    $("#content").addClass("s-serpent");
  } else if ($(".main-stylesheet[href^='/stylesheets/skin-hotdog.css']").length) {
    $("#content").addClass("s-hotdog");
  }
}
 
 
$(".q-edit").click(function(){
  $("#q-menu").addClass("q-on");
});
 
$(".q-respond").click(function(){
  $("#q-menu").removeClass("q-on");
});
 
 
var qTimer;
$("#q-peek").mouseenter(function(){
  qTimer = setTimeout(function(){
    $("#related").hide();
  }, 300);
}).mouseleave(function(){
  clearTimeout(qTimer);
  $("#related").show();
});

Updated

ZaSigma4 said:

crappy

Scripts
Version 1.0
// ==UserScript==
// @name         Quick Tags on Sidebar
// @namespace    ZaSigma4
// @description  
// @version      1.0
// @match        https://e621.net/post/show/*
// @match        http://e621.net/post/show/*
// @match        https://e926.net/post/show/*
// @match        http://e926.net/post/show/*
// @require      http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js
// @grant        none
// ==/UserScript==
 
this.$ = this.jQuery = jQuery.noConflict(true);
 
//////////////////////////////////////////////////
 
var nMenu = 
    '<div id="q-menu">' +
      '<h5 class="post-sidebar-header">Q-Menu</h5>' +
      '<div id="q-placeholder"></div>' +
      '<ul id="q-fav"></ul>' +
      '<div id="q-vote"><span class="greentext"></span><span class="redtext"></span></div>' +
    '</div>';
 
var nStyle = 
    ' #q-menu { margin-bottom: 1em; }' +
    ' .q-tool { margin-bottom: 0.5em; }' +
    ' .q-tool .q-respond, .q-tool .link { display: none; }' +
    ' .q-submit { display: none; margin: 0.5em 0px; }' +
    
    ' #q-peek {' +
      ' display: none; float: right; margin-top: 4px; width: 110px; height: 22px;' +
      ' background-color: rgba(255,255,255,0.4); border-radius: 3px; }' +
    
    ' #q-placeholder {' +
      ' display: none; margin-bottom: 0.5em;' +
      ' background-color: rgba(255,255,255,0.05); border-radius: 3px; }' +
    
    ' #q-fav { position: absolute; left: 95px; }' +
    ' #q-vote { position: absolute; left: 180px; font-size: 120%; }' +
    ' #q-vote a { background-color: rgba(255,255,255,0.2); border-radius: 3px; padding: 0px 7px; margin-right: 6px; }' +
    ' #q-vote a:hover { background-color: rgba(255,255,255,0.05); }' +
    ' #q-vote a:active { background-color: rgba(255,255,255,0.2); }' +
    ' #q-vote #voteup.greentext { background-color: #3e9e49; color: #fff !important; }' +
    ' #q-vote #votedown.redtext { background-color: #e45f5f; color: #fff !important; }' +
    
    ' #edit { opacity: 1 !important; }' +
    
    ' #post_tags {' +
      ' display: block; position: fixed; left: 0px; top: 0px; z-index: 22;' +
      ' border: 5px solid #2e76b4; margin: 0px; width: 99%; height: 70px; min-height: 0px; }' +
    
    ' .q-on .q-tool {' +
      ' display: block; position: fixed; left: 0px; top: 0px; z-index: 20;' +
      ' background-color: #284A81; border-radius: 0px 0px 4px 0px; box-shadow: 2px 2px 5px #07162D;' +
      ' margin: 0px; padding: 90px 20px 10px; width: 235px; height: 65px; }' +
    
    ' .q-on .q-tool .q-edit { display: none; }' +
    ' .q-on .q-tool .q-respond, .q-on .q-submit { display: inline; }' +
    ' .q-on #q-peek, .q-on #q-placeholder { display: block; }' +
    
    ' #related {' +
      ' display: block; position: fixed; left: 0px; top: 160px; z-index: 21;' +
      ' background-color: #284A81; border-radius: 0px 4px 4px 0px; box-shadow: 2px 2px 5px #07162D;' +
      ' margin: 0px !important; padding: 10px 25px 10px 15px; max-height: 70%; overflow-x: hidden; overflow-y: auto; }' +
    
    ' #related > .tag-column:not(:first-child) { display: none; }' +
    
    ' #related > .tag-column:first-child {' +
      ' margin: 0px 0px 10px 0px; min-width: 235px; max-width: 235px; height: auto;' +
      ' column-count: 2; -moz-column-count: 2; -webkit-column-count: 2;' +
      ' column-gap: 10px; -moz-column-gap: 10px; -webkit-column-gap: 10px; }' +
    
    ' #related > .tag-column:first-child > a {' +
      ' display: inline-block; max-width: 100%; white-space: nowrap;' +
      ' overflow: hidden; text-overflow: ellipsis; vertical-align: top; }' +
    
    // Skin Color
    ' .s-pony #post_tags { border-color: #2e76b4; }' +
    ' .s-pony .q-on .q-tool, .s-pony #related { background-color: #453269; }' +
    
    ' .s-bloodlust #post_tags { border-color: #f68b00; }' +
    ' .s-bloodlust .q-on .q-tool, .s-bloodlust #related { background-color: #222; box-shadow: 0px 0px 10px #C01D00; }' +
    
    ' .s-serpent #post_tags { border-color: #3A8F3A; }' +
    ' .s-serpent .q-on .q-tool, .s-serpent #related { background-color: #7BD07B; }' +
    
    ' .s-hotdog #post_tags { border-color: #000000; }' +
    ' .s-hotdog .q-on .q-tool, .s-hotdog #related { background-color: #FFFFFF; }';
 
//////////////////////////////////////////////////
 
qSidebar();
 
function qSidebar() {
  $("head").append('<style type="text/css">' + nStyle + '</style>');
  $("#post-view > .sidebar > h5:first").before(nMenu);
  
  $("#right-col > div:has(h4 > a[href='#'])").addClass("o-tool");
  $("#right-col > .o-tool a:nth-child(1)").addClass("q-edit");
  $("#right-col > .o-tool a:nth-child(2)").addClass("q-respond");
  $("#right-col > .o-tool a:nth-child(3)").addClass("q-download");
  
  $("#right-col > .o-tool").clone().addClass("q-tool").insertBefore("#q-fav");
  $("a[href^='/post_tag_history/index?post_id=']").clone().addClass("q-history").text("Tag History").appendTo("#q-menu");
  $("#add-to-favs, #remove-from-favs").clone().appendTo("#q-fav");
  $("#voteup").clone().html("&uarr;").appendTo("#q-vote > span:first");
  $("#votedown").clone().html("&darr;").appendTo("#q-vote > span:last");
  $("#edit :submit").clone().addClass("q-submit").prependTo(".q-tool");
  
  $(".q-tool").prepend('<div id="q-peek"></div>');
  $(".q-tool > h4").contents().eq(2)[0].textContent = "";
  //$(".q-tool > h4").contents().eq(9)[0].textContent = "test";
  $(".q-tool .q-download").text("DL");
  $(".q-tool #highres").text("Resize");
  
  $("#q-placeholder").height($(".q-tool").height());
  
  
  // Skin Color
  if ($(".main-stylesheet[href^='/stylesheets/skin-pony.css']").length) {
    $("#content").addClass("s-pony");
  } else if ($(".main-stylesheet[href^='/stylesheets/skin-bloodlust.css']").length) {
    $("#content").addClass("s-bloodlust");
  } else if ($(".main-stylesheet[href^='/stylesheets/skin-serpent.css']").length) {
    $("#content").addClass("s-serpent");
  } else if ($(".main-stylesheet[href^='/stylesheets/skin-hotdog.css']").length) {
    $("#content").addClass("s-hotdog");
  }
}
 
 
$(".q-edit").click(function(){
  $("#q-menu").addClass("q-on");
});
 
$(".q-respond").click(function(){
  $("#q-menu").removeClass("q-on");
});
 
 
var qTimer;
$("#q-peek").mouseenter(function(){
  qTimer = setTimeout(function(){
    $("#related").hide();
  }, 300);
}).mouseleave(function(){
  clearTimeout(qTimer);
  $("#related").show();
});

It works really well, but I've only ran into one problem... If I change my mind and don't want to change/add any tags, theres no way to back out of the edit menu. Perhaps an "close menu" option could be added?

Updated by anonymous

  • 1