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

Completed first pass of theming support

Browse Source
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
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;
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;

14
static/application.js
View File

@@ -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 = $('<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

33
static/index.html
View File

@@ -4,7 +4,7 @@
<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"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
@@ -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());
});
</script>
@@ -54,8 +65,24 @@
<div class="twitter function"></div>
</div>
<div id="box3" style="display:none;">
<div class="label"></div>
<div class="shortcut"></div>
<div class="function-info">
<div class="label"></div>
<div class="shortcut"></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>

285
static/themes.css
View File

@@ -1,101 +1,256 @@
/*
*
* Solarized Dark
* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
*
*/
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;
}