Webionite
/
haste-server
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Completed first pass of theming support

This commit is contained in:
Evan Steinkerchner 2016-06-10 23:00:33 -04:00
parent 20661300e7
commit 9f098bf796
5 changed files with 386 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
static/application.css
View File

@ -43,11 +43,20 @@ textarea {
outline: none; outline: none;
font-size: 13px; font-size: 13px;
padding-right: 360px; padding-right: 360px;
box-sizing: border-box;
} }
#box code { #box code {
padding: 0px; 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 */ /* key */
@ -111,7 +120,18 @@ textarea {
right: 0px; 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; background: #173e48;
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -149,6 +169,106 @@ textarea {
#box2 .function.enabled.twitter { background-position: -153px center; } #box2 .function.enabled.twitter { background-position: -153px center; }
#box2 .function.enabled.twitter:hover { background-position: -153px bottom; } #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 { #messages {
position:fixed; position:fixed;
top:0px; top:0px;

14
static/application.js
View File

@ -108,6 +108,20 @@ haste.prototype.setTitle = function(ext) {
document.title = title; 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 // Show a message box
haste.prototype.showMessage = function(msg, cls) { haste.prototype.showMessage = function(msg, cls) {
var msgBox = $('<li class="'+(cls || 'info')+'">'+msg+'</li>'); var msgBox = $('<li class="'+(cls || 'info')+'">'+msg+'</li>');

BIN
static/function-icons.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.1 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

29
static/index.html
View File

@ -4,7 +4,7 @@
<title>hastebin</title> <title>hastebin</title>
<link rel="stylesheet" type="text/css" href="solarized_dark.css"/> <link rel="stylesheet" type="text/css" href="themes.css"/>
<link rel="stylesheet" type="text/css" href="application.css"/> <link rel="stylesheet" type="text/css" href="application.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
@ -33,6 +33,17 @@
$(function() { $(function() {
app = new haste('hastebin', { twitter: true }); app = new haste('hastebin', { twitter: true });
handlePop({ target: window }); 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());
}); });
</script> </script>
@ -54,10 +65,26 @@
<div class="twitter function"></div> <div class="twitter function"></div>
</div> </div>
<div id="box3" style="display:none;"> <div id="box3" style="display:none;">
<div class="function-info">
<div class="label"></div> <div class="label"></div>
<div class="shortcut"></div> <div class="shortcut"></div>
</div> </div>
</div> </div>
<div id="box4">
<div class="theme"></div>
<dl class="dropdown">
<dt>
<span>Theme</span></dt>
<dd>
<ul>
<li><span><span class="selected-theme">&bull;</span>Solarized Dark<span class="value">solarized-dark</span></span></li>
<li><span><span class="selected-theme">&bull;</span>Tomorrow<span class="value">tomorrow</span></span></li>
<li><span><span class="selected-theme">&bull;</span>Tomorrow Night<span class="value">tomorrow-night</span></span></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="linenos"></div> <div id="linenos"></div>
<pre id="box" style="display:none;" tabindex="0"><code></code></pre> <pre id="box" style="display:none;" tabindex="0"><code></code></pre>

285
static/themes.css
View File

@ -1,101 +1,256 @@
/* /*
*
* Solarized Dark * Solarized Dark
* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com> * Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
*
*/ */
solarized-dark pre code { .solarized-dark {
display: block; padding: 0.5em; background: #002b36;
background: #002b36; color: #92a0a0; color: #92a0a0;
} }
solarized-dark pre .comment, .solarized-dark pre .comment,
solarized-dark pre .template_comment, .solarized-dark pre .template_comment,
solarized-dark pre .diff .header, .solarized-dark pre .diff .header,
solarized-dark pre .doctype, .solarized-dark pre .doctype,
solarized-dark pre .lisp .string, .solarized-dark pre .lisp .string,
solarized-dark pre .javadoc { .solarized-dark pre .javadoc {
color: #586e75; color: #586e75;
font-style: italic; font-style: italic;
display: inline-block; display: inline-block;
line-height: 1em; line-height: 1em;
} }
solarized-dark pre .keyword, .solarized-dark pre .keyword,
solarized-dark pre .css .rule .keyword, .solarized-dark pre .css .rule .keyword,
solarized-dark pre .winutils, .solarized-dark pre .winutils,
solarized-dark pre .javascript .title, .solarized-dark pre .javascript .title,
solarized-dark pre .method, .solarized-dark pre .method,
solarized-dark pre .addition, .solarized-dark pre .addition,
solarized-dark pre .css .tag, .solarized-dark pre .css .tag,
solarized-dark pre .lisp .title { .solarized-dark pre .lisp .title {
color: #859900; color: #859900;
} }
solarized-dark pre .number, .solarized-dark pre .number,
solarized-dark pre .command, .solarized-dark pre .command,
solarized-dark pre .string, .solarized-dark pre .string,
solarized-dark pre .tag .value, .solarized-dark pre .tag .value,
solarized-dark pre .phpdoc, .solarized-dark pre .phpdoc,
solarized-dark pre .tex .formula, .solarized-dark pre .tex .formula,
solarized-dark pre .regexp, .solarized-dark pre .regexp,
solarized-dark pre .hexcolor { .solarized-dark pre .hexcolor {
color: #2aa198; color: #2aa198;
} }
solarized-dark pre .title, .solarized-dark pre .title,
solarized-dark pre .localvars, .solarized-dark pre .localvars,
solarized-dark pre .function .title, .solarized-dark pre .function .title,
solarized-dark pre .chunk, .solarized-dark pre .chunk,
solarized-dark pre .decorator, .solarized-dark pre .decorator,
solarized-dark pre .builtin, .solarized-dark pre .builtin,
solarized-dark pre .built_in, .solarized-dark pre .built_in,
solarized-dark pre .lisp .title, .solarized-dark pre .lisp .title,
solarized-dark pre .identifier, .solarized-dark pre .identifier,
solarized-dark pre .title .keymethods, .solarized-dark pre .title .keymethods,
solarized-dark pre .id, .solarized-dark pre .id,
solarized-dark pre .header { .solarized-dark pre .header {
color: #268bd2; color: #268bd2;
} }
solarized-dark pre .tag .title, .solarized-dark pre .tag .title,
solarized-dark pre .rules .property, .solarized-dark pre .rules .property,
solarized-dark pre .django .tag .keyword { .solarized-dark pre .django .tag .keyword {
font-weight: bold; font-weight: bold;
} }
solarized-dark pre .attribute, .solarized-dark pre .attribute,
solarized-dark pre .variable, .solarized-dark pre .variable,
solarized-dark pre .instancevar, .solarized-dark pre .instancevar,
solarized-dark pre .lisp .body, .solarized-dark pre .lisp .body,
solarized-dark pre .smalltalk .number, .solarized-dark pre .smalltalk .number,
solarized-dark pre .constant, .solarized-dark pre .constant,
solarized-dark pre .class .title, .solarized-dark pre .class .title,
solarized-dark pre .parent, .solarized-dark pre .parent,
solarized-dark pre .haskell .label { .solarized-dark pre .haskell .label {
color: #b58900; color: #b58900;
} }
solarized-dark pre .preprocessor, .solarized-dark pre .preprocessor,
solarized-dark pre .pi, .solarized-dark pre .pi,
solarized-dark pre .shebang, .solarized-dark pre .shebang,
solarized-dark pre .symbol, .solarized-dark pre .symbol,
solarized-dark pre .diff .change, .solarized-dark pre .diff .change,
solarized-dark pre .special, .solarized-dark pre .special,
solarized-dark pre .keymethods, .solarized-dark pre .keymethods,
solarized-dark pre .attr_selector, .solarized-dark pre .attr_selector,
solarized-dark pre .important, .solarized-dark pre .important,
solarized-dark pre .subst, .solarized-dark pre .subst,
solarized-dark pre .cdata { .solarized-dark pre .cdata {
color: #cb4b16; color: #cb4b16;
} }
solarized-dark pre .deletion { .solarized-dark pre .deletion {
color: #dc322f; color: #dc322f;
} }
solarized-dark pre .tex .formula, .solarized-dark pre .tex .formula,
solarized-dark pre .code { .solarized-dark pre .code {
background: #073642; 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;
}