mirror of
https://github.com/toptal/haste-server.git
synced 2024-11-14 10:35:18 +01:00
Get rid of the CSS #key .box* nonsense
This commit is contained in:
John Crepezzi
parent
17897e8155
commit
52198b97b2
1
TODO.md
1
TODO.md
@ -1,7 +1,6 @@
|
||||
# TODO for OSS
|
||||
* tests
|
||||
* 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
|
||||
* make sure file store still functions appropriately
|
||||
|
||||
|
||||
@ -4,6 +4,8 @@ body {
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
/* textarea */
|
||||
|
||||
textarea {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
@ -17,6 +19,8 @@ textarea {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* code box when locked */
|
||||
|
||||
#box {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
@ -31,6 +35,8 @@ textarea {
|
||||
background: transparent !important; /* don't hide hastebox */
|
||||
}
|
||||
|
||||
/* key */
|
||||
|
||||
#key {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
@ -38,30 +44,30 @@ textarea {
|
||||
z-index: +1000; /* watch out */
|
||||
}
|
||||
|
||||
#key .box1 {
|
||||
#box1 {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
background: #00222b;
|
||||
}
|
||||
|
||||
#key .box2 {
|
||||
#box2 {
|
||||
background: #08323c;
|
||||
font-size: 0px;
|
||||
padding: 0px 5px;
|
||||
}
|
||||
|
||||
#key .box1 a.logo, #key .box1 a.logo:visited {
|
||||
#box1 a.logo, #box1 a.logo:visited {
|
||||
display: inline-block;
|
||||
background: url(logo.png);
|
||||
width: 126px;
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
#key .box1 a.logo:hover {
|
||||
#box1 a.logo:hover {
|
||||
background-position: 0 bottom;
|
||||
}
|
||||
|
||||
#key .box2 .function {
|
||||
#box2 .function {
|
||||
background: url(function-icons.png);
|
||||
width: 32px;
|
||||
height: 37px;
|
||||
@ -69,11 +75,11 @@ textarea {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#key .box2 .link embed {
|
||||
#box2 .link embed {
|
||||
vertical-align: bottom; /* fix for zeroClipboard style */
|
||||
}
|
||||
|
||||
#key .box2 .function.enabled:hover {
|
||||
#box2 .function.enabled:hover {
|
||||
cursor: hand;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -90,7 +96,7 @@ textarea {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
#key .box3 {
|
||||
#box3 {
|
||||
background: #173e48;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
@ -98,32 +104,32 @@ textarea {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
#key .box3 .label {
|
||||
#box3 .label {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#key .box3 .shortcut {
|
||||
#box3 .shortcut {
|
||||
color: #c4dce3;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
#key .box2 .function.save { background-position: 0px top; }
|
||||
#key .box2 .function.enabled.save { background-position: 0px center; }
|
||||
#key .box2 .function.enabled.save:hover { background-position: 0px bottom; }
|
||||
#box2 .function.save { background-position: 0px top; }
|
||||
#box2 .function.enabled.save { background-position: 0px center; }
|
||||
#box2 .function.enabled.save:hover { background-position: 0px bottom; }
|
||||
|
||||
#key .box2 .function.new { background-position: -32px top; }
|
||||
#key .box2 .function.enabled.new { background-position: -32px center; }
|
||||
#key .box2 .function.enabled.new:hover { background-position: -32px bottom; }
|
||||
#box2 .function.new { background-position: -32px top; }
|
||||
#box2 .function.enabled.new { background-position: -32px center; }
|
||||
#box2 .function.enabled.new:hover { background-position: -32px bottom; }
|
||||
|
||||
#key .box2 .function.duplicate { background-position: -64px top; }
|
||||
#key .box2 .function.enabled.duplicate { background-position: -64px center; }
|
||||
#key .box2 .function.enabled.duplicate:hover { background-position: -64px bottom; }
|
||||
#box2 .function.duplicate { background-position: -64px top; }
|
||||
#box2 .function.enabled.duplicate { background-position: -64px center; }
|
||||
#box2 .function.enabled.duplicate:hover { background-position: -64px bottom; }
|
||||
|
||||
#key .box2 .function.link { background-position: -96px top; }
|
||||
#key .box2 .function.enabled.link { background-position: -96px center; }
|
||||
#key .box2 .function.enabled.link:hover { background-position: -96px bottom; }
|
||||
#box2 .function.link { background-position: -96px top; }
|
||||
#box2 .function.enabled.link { background-position: -96px center; }
|
||||
#box2 .function.enabled.link:hover { background-position: -96px bottom; }
|
||||
|
||||
#key .box2 .function.twitter { background-position: -128px top; }
|
||||
#key .box2 .function.enabled.twitter { background-position: -128px center; }
|
||||
#key .box2 .function.enabled.twitter:hover { background-position: -128px bottom; }
|
||||
#box2 .function.twitter { background-position: -128px top; }
|
||||
#box2 .function.enabled.twitter { background-position: -128px center; }
|
||||
#box2 .function.enabled.twitter:hover { background-position: -128px bottom; }
|
||||
|
||||
@ -69,7 +69,7 @@ var haste = function(appName, options) {
|
||||
this.configureButtons();
|
||||
// If twitter is disabled, hide the button
|
||||
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
|
||||
haste.prototype.configureKey = function(enable) {
|
||||
var $this, i = 0;
|
||||
$('#key .box2 .function').each(function() {
|
||||
$('#box2 .function').each(function() {
|
||||
$this = $(this);
|
||||
for (i = 0; i < enable.length; i++) {
|
||||
if ($this.hasClass(enable[i])) {
|
||||
@ -197,7 +197,7 @@ haste.prototype.configureClip = function() {
|
||||
this.clipper.setCSSEffects(false);
|
||||
// and then set and show
|
||||
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
|
||||
@ -205,14 +205,14 @@ haste.prototype.removeClip = function() {
|
||||
if (this.clipper) {
|
||||
this.clipper.destroy();
|
||||
}
|
||||
$('#key .box2 .link').html('');
|
||||
$('#box2 .link').html('');
|
||||
};
|
||||
|
||||
haste.prototype.configureButtons = function() {
|
||||
var _this = this;
|
||||
this.buttons = [
|
||||
{
|
||||
$where: $('#key .box2 .save'),
|
||||
$where: $('#box2 .save'),
|
||||
label: 'Save',
|
||||
shortcutDescription: 'control + s',
|
||||
shortcut: function(evt) {
|
||||
@ -225,7 +225,7 @@ haste.prototype.configureButtons = function() {
|
||||
}
|
||||
},
|
||||
{
|
||||
$where: $('#key .box2 .new'),
|
||||
$where: $('#box2 .new'),
|
||||
label: 'New',
|
||||
shortcut: function(evt) {
|
||||
return evt.ctrlKey && evt.keyCode === 78
|
||||
@ -236,7 +236,7 @@ haste.prototype.configureButtons = function() {
|
||||
}
|
||||
},
|
||||
{
|
||||
$where: $('#key .box2 .duplicate'),
|
||||
$where: $('#box2 .duplicate'),
|
||||
label: 'Duplicate & Edit',
|
||||
shortcut: function(evt) {
|
||||
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',
|
||||
shortcut: function(evt) {
|
||||
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',
|
||||
letBubble: true,
|
||||
action: function() { }
|
||||
@ -279,14 +279,14 @@ haste.prototype.configureButton = function(options) {
|
||||
});
|
||||
// Show the label
|
||||
options.$where.mouseenter(function(evt) {
|
||||
$('#key .box3 .label').text(options.label);
|
||||
$('#key .box3 .shortcut').text(options.shortcutDescription || '');
|
||||
$('#key .box3').show();
|
||||
$('#box3 .label').text(options.label);
|
||||
$('#box3 .shortcut').text(options.shortcutDescription || '');
|
||||
$('#box3').show();
|
||||
$(this).append($('#pointer').remove().show());
|
||||
});
|
||||
// Hide the label
|
||||
options.$where.mouseleave(function(evt) {
|
||||
$('#key .box3').hide();
|
||||
$('#box3').hide();
|
||||
$('#pointer').hide();
|
||||
});
|
||||
};
|
||||
|
||||
@ -43,17 +43,17 @@
|
||||
|
||||
<div id="key">
|
||||
<div id="pointer" style="display:none;"></div>
|
||||
<div class="box1">
|
||||
<div id="box1">
|
||||
<a href="/about.md" class="logo"></a>
|
||||
</div>
|
||||
<div class="box2">
|
||||
<div id="box2">
|
||||
<div class="save function"></div>
|
||||
<div class="new function"></div>
|
||||
<div class="duplicate function"></div>
|
||||
<div class="link function"></div>
|
||||
<div class="twitter function"></div>
|
||||
</div>
|
||||
<div class="box3" style="display:none;">
|
||||
<div id="box3" style="display:none;">
|
||||
<div class="label"></div>
|
||||
<div class="shortcut"></div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user