From 9f098bf796490ea803cdd07505758d4791fa94db Mon Sep 17 00:00:00 2001 From: Evan Steinkerchner Date: Fri, 10 Jun 2016 23:00:33 -0400 Subject: [PATCH] Completed first pass of theming support --- static/application.css | 124 ++++++++++++++++- static/application.js | 14 ++ static/function-icons.png | Bin 6237 -> 8980 bytes static/index.html | 33 ++++- static/themes.css | 285 +++++++++++++++++++++++++++++--------- 5 files changed, 386 insertions(+), 70 deletions(-) diff --git a/static/application.css b/static/application.css index 152f222..cdbd0df 100644 --- a/static/application.css +++ b/static/application.css @@ -43,11 +43,20 @@ textarea { outline: none; font-size: 13px; padding-right: 360px; + box-sizing: border-box; } #box code { padding: 0px; - background: transparent !important; /* don't hide hastebox */ + background: transparent; +} + +body, +#box code * { + -webkit-transition: background-color 0.25s linear, color 0.25s linear; + -moz-transition: background-color 0.25s linear, color 0.25s linear; + -o-transition: background-color 0.25s linear, color 0.25s linear; + transition: background-color 0.25s linear, color 0.25s linear; } /* key */ @@ -111,7 +120,18 @@ textarea { right: 0px; } -#box3, #messages li { +#box3 { + position: relative; + width: 100%; + height: 0; + z-index: 3; +} + +#box3 .function-info, #messages li { + position: absolute; + left: 0; + right: 0; + top: 0; background: #173e48; font-family: Helvetica, sans-serif; font-size: 12px; @@ -149,6 +169,106 @@ textarea { #box2 .function.enabled.twitter { background-position: -153px center; } #box2 .function.enabled.twitter:hover { background-position: -153px bottom; } +#box4 { + height: 37px; + background-color: #08323c; + position: relative; +} + +#box4 .theme { + pointer-events: none; + background: url(function-icons.png); + background-position: -190px center; + width: 32px; + height: 37px; + display: inline-block; + position: absolute; + left: 5px; + top: 0; + cursor: pointer; +} + +dl.dropdown { + color: #c4dce3; + text-decoration: none; + margin: 0; + padding: 0; + font-family: Helvetica, sans-serif; + font-size: 12px; +} + +.dropdown span.selected-theme { + font-size: 37px; + line-height: 24px; + position: absolute; + left: 12px; + top: 0; + display: none; +} + +.dropdown li[selected] span.selected-theme { + display: block; +} + +.dropdown dt, +.dropdown li { + cursor: pointer; +} + +.dropdown dd, +.dropdown dt, +.dropdown ul { + margin: 0px; + padding: 0px; +} + +.dropdown dd { + position: relative; +} + +.dropdown dt span { + background-color: #08323c; + display: block; + width: 100%; + line-height: 37px; + height: 37px; + overflow: hidden; + display: block; +} + +.dropdown dt span, +.dropdown dd ul li > span { + padding-left: 37px; + overflow: hidden; + display: block; +} + +.dropdown dd ul li > span { + padding-top: 5px; + padding-bottom: 5px; + position: relative; +} + +.dropdown dd ul { + background-color: #08323c; + display: none; + list-style: none; + padding: 5px 0px; + position: absolute; + left: 0; + top: 0; + width: 100%; + z-index: 1; +} + +.dropdown span.value { + display: none; +} + +.dropdown dd ul li > span:hover { + background-color: #173e48; +} + #messages { position:fixed; top:0px; diff --git a/static/application.js b/static/application.js index c90648f..1b40706 100644 --- a/static/application.js +++ b/static/application.js @@ -108,6 +108,20 @@ haste.prototype.setTitle = function(ext) { document.title = title; }; +haste.prototype.setTheme = function(theme) { + $('body').attr('class', theme); + $('.dropdown dd ul li').removeAttr('selected'); + + var matchedTheme = $.grep($('.dropdown dd ul li > span'), function (elem) { + return $(elem).find('.value').text() == theme; + }); + + if (matchedTheme.length) { + $('.dropdown dt span').html($(matchedTheme[0]).html()); + $(matchedTheme).parent().attr('selected', ''); + } +}; + // Show a message box haste.prototype.showMessage = function(msg, cls) { var msgBox = $('
  • '+msg+'
    • '); diff --git a/static/function-icons.png b/static/function-icons.png index a06253f33e57d7f0e3f9b5707df7859ab099a1be..c9e172eca3101aaadd41a209dc3b795a8481d578 100644 GIT binary patch literal 8980 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

    @hGq~-eCRV6L>^ap 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 G-~JEFSNXF5 diff --git a/static/index.html b/static/index.html index 487b3e9..64a388a 100644 --- a/static/index.html +++ b/static/index.html @@ -4,7 +4,7 @@ hastebin - + @@ -33,6 +33,17 @@ $(function() { app = new haste('hastebin', { twitter: true }); handlePop({ target: window }); + + $('.dropdown dt span').click(function() { + $('.dropdown dd ul').toggle(); + }); + + $('.dropdown dd ul li > span').click(function() { + $('.dropdown dd ul').hide(); + app.setTheme($(this).find('.value').text()); + }); + + app.setTheme($('.dropdown dd ul li:first > span .value').text()); }); @@ -54,8 +65,24 @@

    +
    +
    +
    +
    + Theme
    +
    +
      +
    • •Solarized Darksolarized-dark
      • +
    • •Tomorrowtomorrow
      • +
    • •Tomorrow Nighttomorrow-night
      • +
    +
    +
    diff --git a/static/themes.css b/static/themes.css index e56dac7..416cd6b 100644 --- a/static/themes.css +++ b/static/themes.css @@ -1,101 +1,256 @@ /* - * * Solarized Dark * Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull - * */ -solarized-dark pre code { - display: block; padding: 0.5em; - background: #002b36; color: #92a0a0; +.solarized-dark { + background: #002b36; + color: #92a0a0; } -solarized-dark pre .comment, -solarized-dark pre .template_comment, -solarized-dark pre .diff .header, -solarized-dark pre .doctype, -solarized-dark pre .lisp .string, -solarized-dark pre .javadoc { +.solarized-dark pre .comment, +.solarized-dark pre .template_comment, +.solarized-dark pre .diff .header, +.solarized-dark pre .doctype, +.solarized-dark pre .lisp .string, +.solarized-dark pre .javadoc { color: #586e75; font-style: italic; display: inline-block; line-height: 1em; } -solarized-dark pre .keyword, -solarized-dark pre .css .rule .keyword, -solarized-dark pre .winutils, -solarized-dark pre .javascript .title, -solarized-dark pre .method, -solarized-dark pre .addition, -solarized-dark pre .css .tag, -solarized-dark pre .lisp .title { +.solarized-dark pre .keyword, +.solarized-dark pre .css .rule .keyword, +.solarized-dark pre .winutils, +.solarized-dark pre .javascript .title, +.solarized-dark pre .method, +.solarized-dark pre .addition, +.solarized-dark pre .css .tag, +.solarized-dark pre .lisp .title { color: #859900; } -solarized-dark pre .number, -solarized-dark pre .command, -solarized-dark pre .string, -solarized-dark pre .tag .value, -solarized-dark pre .phpdoc, -solarized-dark pre .tex .formula, -solarized-dark pre .regexp, -solarized-dark pre .hexcolor { +.solarized-dark pre .number, +.solarized-dark pre .command, +.solarized-dark pre .string, +.solarized-dark pre .tag .value, +.solarized-dark pre .phpdoc, +.solarized-dark pre .tex .formula, +.solarized-dark pre .regexp, +.solarized-dark pre .hexcolor { color: #2aa198; } -solarized-dark pre .title, -solarized-dark pre .localvars, -solarized-dark pre .function .title, -solarized-dark pre .chunk, -solarized-dark pre .decorator, -solarized-dark pre .builtin, -solarized-dark pre .built_in, -solarized-dark pre .lisp .title, -solarized-dark pre .identifier, -solarized-dark pre .title .keymethods, -solarized-dark pre .id, -solarized-dark pre .header { +.solarized-dark pre .title, +.solarized-dark pre .localvars, +.solarized-dark pre .function .title, +.solarized-dark pre .chunk, +.solarized-dark pre .decorator, +.solarized-dark pre .builtin, +.solarized-dark pre .built_in, +.solarized-dark pre .lisp .title, +.solarized-dark pre .identifier, +.solarized-dark pre .title .keymethods, +.solarized-dark pre .id, +.solarized-dark pre .header { color: #268bd2; } -solarized-dark pre .tag .title, -solarized-dark pre .rules .property, -solarized-dark pre .django .tag .keyword { +.solarized-dark pre .tag .title, +.solarized-dark pre .rules .property, +.solarized-dark pre .django .tag .keyword { font-weight: bold; } -solarized-dark pre .attribute, -solarized-dark pre .variable, -solarized-dark pre .instancevar, -solarized-dark pre .lisp .body, -solarized-dark pre .smalltalk .number, -solarized-dark pre .constant, -solarized-dark pre .class .title, -solarized-dark pre .parent, -solarized-dark pre .haskell .label { +.solarized-dark pre .attribute, +.solarized-dark pre .variable, +.solarized-dark pre .instancevar, +.solarized-dark pre .lisp .body, +.solarized-dark pre .smalltalk .number, +.solarized-dark pre .constant, +.solarized-dark pre .class .title, +.solarized-dark pre .parent, +.solarized-dark pre .haskell .label { color: #b58900; } -solarized-dark pre .preprocessor, -solarized-dark pre .pi, -solarized-dark pre .shebang, -solarized-dark pre .symbol, -solarized-dark pre .diff .change, -solarized-dark pre .special, -solarized-dark pre .keymethods, -solarized-dark pre .attr_selector, -solarized-dark pre .important, -solarized-dark pre .subst, -solarized-dark pre .cdata { +.solarized-dark pre .preprocessor, +.solarized-dark pre .pi, +.solarized-dark pre .shebang, +.solarized-dark pre .symbol, +.solarized-dark pre .diff .change, +.solarized-dark pre .special, +.solarized-dark pre .keymethods, +.solarized-dark pre .attr_selector, +.solarized-dark pre .important, +.solarized-dark pre .subst, +.solarized-dark pre .cdata { color: #cb4b16; } -solarized-dark pre .deletion { +.solarized-dark pre .deletion { color: #dc322f; } -solarized-dark pre .tex .formula, -solarized-dark pre .code { +.solarized-dark pre .tex .formula, +.solarized-dark pre .code { background: #073642; } + + +/* + * Tomorrow + * http://jmblog.github.com/color-themes-for-google-code-highlightjs + * Original theme - https://github.com/chriskempson/tomorrow-theme + * http://jmblog.github.com/color-themes-for-google-code-highlightjs + */ + +.tomorrow pre .comment, +.tomorrow pre .title { + color: #8e908c; +} + +.tomorrow pre .variable, +.tomorrow pre .attribute, +.tomorrow pre .tag, +.tomorrow pre .regexp, +.tomorrow pre .ruby .constant, +.tomorrow pre .xml .tag .title, +.tomorrow pre .xml .pi, +.tomorrow pre .xml .doctype, +.tomorrow pre .html .doctype, +.tomorrow pre .css .id, +.tomorrow pre .css .class, +.tomorrow pre .css .pseudo { + color: #c82829; +} + +.tomorrow pre .number, +.tomorrow pre .preprocessor, +.tomorrow pre .built_in, +.tomorrow pre .literal, +.tomorrow pre .params, +.tomorrow pre .constant { + color: #f5871f; +} + +.tomorrow pre .class, +.tomorrow pre .ruby .class .title, +.tomorrow pre .css .rules .attribute { + color: #eab700; +} + +.tomorrow pre .string, +.tomorrow pre .value, +.tomorrow pre .inheritance, +.tomorrow pre .header, +.tomorrow pre .ruby .symbol, +.tomorrow pre .xml .cdata { + color: #718c00; +} + +.tomorrow pre .css .hexcolor { + color: #3e999f; +} + +.tomorrow pre .function, +.tomorrow pre .python .decorator, +.tomorrow pre .python .title, +.tomorrow pre .ruby .function .title, +.tomorrow pre .ruby .title .keyword, +.tomorrow pre .perl .sub, +.tomorrow pre .javascript .title, +.tomorrow pre .coffeescript .title { + color: #4271ae; +} + +.tomorrow pre .keyword, +.tomorrow pre .javascript .function { + color: #8959a8; +} + +.tomorrow { + background: white; + color: #4d4d4c; + font-family: Menlo, Monaco, Consolas, monospace; +} + + + +/* + * Tomorrow Night + * http://jmblog.github.com/color-themes-for-google-code-highlightjs + * Original theme - https://github.com/chriskempson/tomorrow-theme + * http://jmblog.github.com/color-themes-for-google-code-highlightjs + */ + +.tomorrow-night pre .comment, +.tomorrow-night pre .title { + color: #969896; +} + +.tomorrow-night pre .variable, +.tomorrow-night pre .attribute, +.tomorrow-night pre .tag, +.tomorrow-night pre .regexp, +.tomorrow-night pre .ruby .constant, +.tomorrow-night pre .xml .tag .title, +.tomorrow-night pre .xml .pi, +.tomorrow-night pre .xml .doctype, +.tomorrow-night pre .html .doctype, +.tomorrow-night pre .css .id, +.tomorrow-night pre .css .class, +.tomorrow-night pre .css .pseudo { + color: #cc6666; +} + +.tomorrow-night pre .number, +.tomorrow-night pre .preprocessor, +.tomorrow-night pre .built_in, +.tomorrow-night pre .literal, +.tomorrow-night pre .params, +.tomorrow-night pre .constant { + color: #de935f; +} + +.tomorrow-night pre .class, +.tomorrow-night pre .ruby .class .title, +.tomorrow-night pre .css .rules .attribute { + color: #f0c674; +} + +.tomorrow-night pre .string, +.tomorrow-night pre .value, +.tomorrow-night pre .inheritance, +.tomorrow-night pre .header, +.tomorrow-night pre .ruby .symbol, +.tomorrow-night pre .xml .cdata { + color: #b5bd68; +} + +.tomorrow-night pre .css .hexcolor { + color: #8abeb7; +} + +.tomorrow-night pre .function, +.tomorrow-night pre .python .decorator, +.tomorrow-night pre .python .title, +.tomorrow-night pre .ruby .function .title, +.tomorrow-night pre .ruby .title .keyword, +.tomorrow-night pre .perl .sub, +.tomorrow-night pre .javascript .title, +.tomorrow-night pre .coffeescript .title { + color: #81a2be; +} + +.tomorrow-night pre .keyword, +.tomorrow-night pre .javascript .function { + color: #b294bb; +} + +.tomorrow-night { + background: #1d1f21; + color: #c5c8c6; + font-family: Menlo, Monaco, Consolas, monospace; +}