Davo
/
haste-server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get rid of the CSS #key .box* nonsense

Browse Source
raw_icon
John Crepezzi 14 years ago
parent 17897e8155
commit 52198b97b2
4 changed files with 47 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      TODO.md
  2. 56
      static/application.css
  3. 26
      static/application.js
  4. 6
      static/index.html

1
TODO.md
Unescape View File

@ -1,7 +1,6 @@
# TODO for OSS # TODO for OSS
* tests * tests
* Add file extensions ourselves to push state * Add file extensions ourselves to push state
* Collapse CSS rules to get rid of the #key .box1 nonsense
* add feedback for errors to UI - esp. too long * add feedback for errors to UI - esp. too long
* make sure file store still functions appropriately * make sure file store still functions appropriately

56
static/application.css
Unescape View File

@ -4,6 +4,8 @@ body {
margin: 0px; margin: 0px;
} }
/* textarea */
textarea { textarea {
background: transparent; background: transparent;
border: 0px; border: 0px;
@ -17,6 +19,8 @@ textarea {
font-size: 13px; font-size: 13px;
} }
/* code box when locked */
#box { #box {
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
@ -31,6 +35,8 @@ textarea {
background: transparent !important; /* don't hide hastebox */ background: transparent !important; /* don't hide hastebox */
} }
/* key */
#key { #key {
position: fixed; position: fixed;
top: 0px; top: 0px;
@ -38,30 +44,30 @@ textarea {
z-index: +1000; /* watch out */ z-index: +1000; /* watch out */
} }
#key .box1 { #box1 {
padding: 5px; padding: 5px;
text-align: center; text-align: center;
background: #00222b; background: #00222b;
} }
#key .box2 { #box2 {
background: #08323c; background: #08323c;
font-size: 0px; font-size: 0px;
padding: 0px 5px; padding: 0px 5px;
} }
#key .box1 a.logo, #key .box1 a.logo:visited { #box1 a.logo, #box1 a.logo:visited {
display: inline-block; display: inline-block;
background: url(logo.png); background: url(logo.png);
width: 126px; width: 126px;
height: 42px; height: 42px;
} }
#key .box1 a.logo:hover { #box1 a.logo:hover {
background-position: 0 bottom; background-position: 0 bottom;
} }
#key .box2 .function { #box2 .function {
background: url(function-icons.png); background: url(function-icons.png);
width: 32px; width: 32px;
height: 37px; height: 37px;
@ -69,11 +75,11 @@ textarea {
position: relative; position: relative;
} }
#key .box2 .link embed { #box2 .link embed {
vertical-align: bottom; /* fix for zeroClipboard style */ vertical-align: bottom; /* fix for zeroClipboard style */
} }
#key .box2 .function.enabled:hover { #box2 .function.enabled:hover {
cursor: hand; cursor: hand;
cursor: pointer; cursor: pointer;
} }
@ -90,7 +96,7 @@ textarea {
right: 0px; right: 0px;
} }
#key .box3 { #box3 {
background: #173e48; background: #173e48;
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
font-size: 12px; font-size: 12px;
@ -98,32 +104,32 @@ textarea {
padding: 10px 15px; padding: 10px 15px;
} }
#key .box3 .label { #box3 .label {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
} }
#key .box3 .shortcut { #box3 .shortcut {
color: #c4dce3; color: #c4dce3;
font-weight: normal; font-weight: normal;
} }
#key .box2 .function.save { background-position: 0px top; } #box2 .function.save { background-position: 0px top; }
#key .box2 .function.enabled.save { background-position: 0px center; } #box2 .function.enabled.save { background-position: 0px center; }
#key .box2 .function.enabled.save:hover { background-position: 0px bottom; } #box2 .function.enabled.save:hover { background-position: 0px bottom; }
#key .box2 .function.new { background-position: -32px top; } #box2 .function.new { background-position: -32px top; }
#key .box2 .function.enabled.new { background-position: -32px center; } #box2 .function.enabled.new { background-position: -32px center; }
#key .box2 .function.enabled.new:hover { background-position: -32px bottom; } #box2 .function.enabled.new:hover { background-position: -32px bottom; }
#key .box2 .function.duplicate { background-position: -64px top; } #box2 .function.duplicate { background-position: -64px top; }
#key .box2 .function.enabled.duplicate { background-position: -64px center; } #box2 .function.enabled.duplicate { background-position: -64px center; }
#key .box2 .function.enabled.duplicate:hover { background-position: -64px bottom; } #box2 .function.enabled.duplicate:hover { background-position: -64px bottom; }
#key .box2 .function.link { background-position: -96px top; } #box2 .function.link { background-position: -96px top; }
#key .box2 .function.enabled.link { background-position: -96px center; } #box2 .function.enabled.link { background-position: -96px center; }
#key .box2 .function.enabled.link:hover { background-position: -96px bottom; } #box2 .function.enabled.link:hover { background-position: -96px bottom; }
#key .box2 .function.twitter { background-position: -128px top; } #box2 .function.twitter { background-position: -128px top; }
#key .box2 .function.enabled.twitter { background-position: -128px center; } #box2 .function.enabled.twitter { background-position: -128px center; }
#key .box2 .function.enabled.twitter:hover { background-position: -128px bottom; } #box2 .function.enabled.twitter:hover { background-position: -128px bottom; }

26
static/application.js
Unescape View File

@ -69,7 +69,7 @@ var haste = function(appName, options) {
this.configureButtons(); this.configureButtons();
// If twitter is disabled, hide the button // If twitter is disabled, hide the button
if (!options.twitter) { if (!options.twitter) {
$('#key .box2 .twitter').hide(); $('#box2 .twitter').hide();
} }
}; };
@ -94,7 +94,7 @@ haste.prototype.fullKey = function() {
// Set the key up for certain things to be enabled // Set the key up for certain things to be enabled
haste.prototype.configureKey = function(enable) { haste.prototype.configureKey = function(enable) {
var $this, i = 0; var $this, i = 0;
$('#key .box2 .function').each(function() { $('#box2 .function').each(function() {
$this = $(this); $this = $(this);
for (i = 0; i < enable.length; i++) { for (i = 0; i < enable.length; i++) {
if ($this.hasClass(enable[i])) { if ($this.hasClass(enable[i])) {
@ -197,7 +197,7 @@ haste.prototype.configureClip = function() {
this.clipper.setCSSEffects(false); this.clipper.setCSSEffects(false);
// and then set and show // and then set and show
this.clipper.setText(window.location.href); this.clipper.setText(window.location.href);
$('#key .box2 .link').html(this.clipper.getHTML(32, 37)); $('#box2 .link').html(this.clipper.getHTML(32, 37));
}; };
// hide the current clip, if it exists // hide the current clip, if it exists
@ -205,14 +205,14 @@ haste.prototype.removeClip = function() {
if (this.clipper) { if (this.clipper) {
this.clipper.destroy(); this.clipper.destroy();
} }
$('#key .box2 .link').html(''); $('#box2 .link').html('');
}; };
haste.prototype.configureButtons = function() { haste.prototype.configureButtons = function() {
var _this = this; var _this = this;
this.buttons = [ this.buttons = [
{ {
$where: $('#key .box2 .save'), $where: $('#box2 .save'),
label: 'Save', label: 'Save',
shortcutDescription: 'control + s', shortcutDescription: 'control + s',
shortcut: function(evt) { shortcut: function(evt) {
@ -225,7 +225,7 @@ haste.prototype.configureButtons = function() {
} }
}, },
{ {
$where: $('#key .box2 .new'), $where: $('#box2 .new'),
label: 'New', label: 'New',
shortcut: function(evt) { shortcut: function(evt) {
return evt.ctrlKey && evt.keyCode === 78 return evt.ctrlKey && evt.keyCode === 78
@ -236,7 +236,7 @@ haste.prototype.configureButtons = function() {
} }
}, },
{ {
$where: $('#key .box2 .duplicate'), $where: $('#box2 .duplicate'),
label: 'Duplicate & Edit', label: 'Duplicate & Edit',
shortcut: function(evt) { shortcut: function(evt) {
return _this.doc.locked && evt.ctrlKey && evt.keyCode === 68; return _this.doc.locked && evt.ctrlKey && evt.keyCode === 68;
@ -247,7 +247,7 @@ haste.prototype.configureButtons = function() {
} }
}, },
{ {
$where: $('#key .box2 .twitter'), $where: $('#box2 .twitter'),
label: 'Twitter', label: 'Twitter',
shortcut: function(evt) { shortcut: function(evt) {
return _this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84; return _this.options.twitter && _this.doc.locked && evt.ctrlKey && evt.keyCode == 84;
@ -258,7 +258,7 @@ haste.prototype.configureButtons = function() {
} }
}, },
{ {
$where: $('#key .box2 .link'), $where: $('#box2 .link'),
label: 'Copy URL', label: 'Copy URL',
letBubble: true, letBubble: true,
action: function() { } action: function() { }
@ -279,14 +279,14 @@ haste.prototype.configureButton = function(options) {
}); });
// Show the label // Show the label
options.$where.mouseenter(function(evt) { options.$where.mouseenter(function(evt) {
$('#key .box3 .label').text(options.label); $('#box3 .label').text(options.label);
$('#key .box3 .shortcut').text(options.shortcutDescription || ''); $('#box3 .shortcut').text(options.shortcutDescription || '');
$('#key .box3').show(); $('#box3').show();
$(this).append($('#pointer').remove().show()); $(this).append($('#pointer').remove().show());
}); });
// Hide the label // Hide the label
options.$where.mouseleave(function(evt) { options.$where.mouseleave(function(evt) {
$('#key .box3').hide(); $('#box3').hide();
$('#pointer').hide(); $('#pointer').hide();
}); });
}; };

6
static/index.html
Unescape View File

@ -43,17 +43,17 @@
<div id="key"> <div id="key">
<div id="pointer" style="display:none;"></div> <div id="pointer" style="display:none;"></div>
<div class="box1"> <div id="box1">
<a href="/about.md" class="logo"></a> <a href="/about.md" class="logo"></a>
</div> </div>
<div class="box2"> <div id="box2">
<div class="save function"></div> <div class="save function"></div>
<div class="new function"></div> <div class="new function"></div>
<div class="duplicate function"></div> <div class="duplicate function"></div>
<div class="link function"></div> <div class="link function"></div>
<div class="twitter function"></div> <div class="twitter function"></div>
</div> </div>
<div class="box3" style="display:none;"> <div id="box3" style="display:none;">
<div class="label"></div> <div class="label"></div>
<div class="shortcut"></div> <div class="shortcut"></div>
</div> </div>

Write Preview
Loading…
Cancel
Save