Commit 52198b97 authored by John Crepezzi's avatar John Crepezzi
Browse files

Get rid of the CSS #key .box* nonsense

parent 17897e81

TODO.md

+0 −1
Original line number Diff line number Diff line 
# 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

static/application.css

+31 −25
Original line number Diff line number Diff line
@@ -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; }

static/application.js

+13 −13
Original line number Diff line number Diff line
@@ -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();

  });

};

static/index.html

+3 −3
Original line number Diff line number Diff line
@@ -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>