mirror of
https://github.com/SunRed/haste-server.git
synced 2024-11-01 01:30:21 +01:00
Get rid of the CSS #key .box* nonsense
This commit is contained in:
parent
17897e8155
commit
52198b97b2
4 changed files with 47 additions and 42 deletions
1
TODO.md
1
TODO.md
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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; }
|
||||||
|
|
|
@ -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();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue