make the keybinding helper modal

css/helios.css

@@ -500,29 +500,34 @@ body[id="helios"] .tool_container .panes .pane .class_side .nav-pills {
   background: #ffffdd;
 }
 body[id="helios"] .key_helper {
-  z-index: 20;
+  z-index: 2001;
   position: fixed;
-  bottom: 0px;
-  background: #fff;
-  background-image: linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-  background-image: -moz-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-  background-image: -o-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-  background-image: -webkit-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-  width: 100%;
-  border-top: 1px solid #aaa;
+  top: 120px;
+  left: 50%;
+  margin-left: -200px;
+  width: 400px;
+  background: rgba(243, 243, 243, 0.9);
+  box-shadow: 0 0 6px #aaa;
+  border: 1px solid #aaa;
   font-size: 11px;
-  height: 22px;
+  transition: all .5s;
+  -webkit-transition: all .5s;
+  -moz-transition: all .5s;
+  -o-transition: all .5s;
+  -ms-transition: all .5s;
 }
 body[id="helios"] .key_helper .command {
-  padding: 0 2px;
+  padding: 2px;
+  display: block;
 }
 body[id="helios"] .key_helper #binding-helper-main {
-  display: inline;
+  display: block;
+  padding: 5px;
 }
 body[id="helios"] .key_helper .label {
   padding: 1px 4px;
   font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-  background: transparent;
+  background: #ddd;
   color: #08C;
   text-shadow: none;
   border: 0 none;
@@ -532,22 +537,26 @@ body[id="helios"] .key_helper .action {
   color: #666;
 }
 body[id="helios"] .key_helper .selected {
-  background-image: linear-gradient(top, #cccccc, #aaaaaa);
-  background-image: -moz-linear-gradient(top, #cccccc, #aaaaaa);
-  background-image: -o-linear-gradient(top, #cccccc, #aaaaaa);
-  background-image: -webkit-linear-gradient(top, #cccccc, #aaaaaa);
-  height: 30px;
+  background-image: linear-gradient(top, #cccccc, #bbbbbb);
+  background-image: -moz-linear-gradient(top, #cccccc, #bbbbbb);
+  background-image: -o-linear-gradient(top, #cccccc, #bbbbbb);
+  background-image: -webkit-linear-gradient(top, #cccccc, #bbbbbb);
+  height: 28px;
   padding: 0 8px;
-  color: #333;
   font-weight: bold;
+  font-size: 18px;
+  line-height: 28px;
   text-shadow: 0 1px 0 #fff;
-  display: inline-block;
-  border-right: 1px solid #aaa;
+  display: block;
+  border-bottom: 1px solid #aaa;
 }
 body[id="helios"] .key_helper .close {
   font-size: 14px;
-  line-height: 26px;
+  line-height: 28px;
   opacity: 0.6;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 body[id="helios"] .key_helper .close:hover {
   opacity: 0.8;
@@ -568,11 +577,6 @@ body[id="helios"] .key_helper .error input {
   color: #B91010;
   font-weight: bold;
 }
-body[id="helios"] .key_helper .typeahead.dropdown-menu {
-  position: fixed !important;
-  top: auto !important;
-  bottom: 30px !important;
-}
 body[id="helios"] .key_helper #cog-helper {
   position: fixed;
   bottom: 2px;

css/helios.less

@@ -572,31 +572,38 @@ body[id="helios"] {
 	}
 
 	.key_helper {
-		z-index: 20;
+		z-index: 2001;
 		position: fixed;
-		bottom: 0px;
-		background: #fff;
-		background-image: linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-		background-image: -moz-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-		background-image: -o-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-		background-image: -webkit-linear-gradient(top, #fafafa, #f0f0f0 50%, #e1e1e1 51%);
-		width: 100%;
-		border-top: 1px solid #aaa;
+		top: 120px;
+		left: 50%;
+		margin-left: -200px;
+		width: 400px;
+		background: rgba(243, 243, 243, 0.9);
+		box-shadow: 0 0 6px #aaa;
+		border: 1px solid #aaa;
 		font-size: 11px;
-		height: 22px;
+
+		transition: all .5s;
+		-webkit-transition: all .5s;
+		-moz-transition: all .5s;
+		-o-transition: all .5s;
+		-ms-transition: all .5s;
+
 
 		.command {
-			padding: 0 2px;
+			padding: 2px;
+			display: block;
 		}
 
 		#binding-helper-main {
-			display: inline;
+			display: block;
+			padding: 5px;
 		}
 
 		.label {
 			padding: 1px 4px;
 			font-family: Menlo, Monaco, "Lucida Console", Courier, monospace;
-			background: transparent;
+			background: #ddd;
 			color: #08C;
 			text-shadow: none;
 			border: 0 none;
@@ -608,23 +615,27 @@ body[id="helios"] {
 		}
 
 		.selected {
-			background-image: linear-gradient(top, #ccc, #aaa);
-			background-image: -moz-linear-gradient(top, #ccc, #aaa);
-			background-image: -o-linear-gradient(top, #ccc, #aaa);
-			background-image: -webkit-linear-gradient(top, #ccc, #aaa);
-			height: 30px;
+			background-image: linear-gradient(top, #ccc, #bbb);
+			background-image: -moz-linear-gradient(top, #ccc, #bbb);
+			background-image: -o-linear-gradient(top, #ccc, #bbb);
+			background-image: -webkit-linear-gradient(top, #ccc, #bbb);
+			height: 28px;
 			padding: 0 8px;
-			color: #333;
 			font-weight: bold;
+			font-size: 18px;
+			line-height: 28px;
 			text-shadow: 0 1px 0 #fff;
-			display: inline-block;
-			border-right: 1px solid #aaa;
+			display: block;
+			border-bottom: 1px solid #aaa;
 		}
 
 		.close {
 			font-size: 14px;
-			line-height: 26px;
+			line-height: 28px;
 			opacity: 0.6;
+			position: absolute;
+			top: 0;
+			right: 0;
 		}
 
 		.close:hover {
@@ -649,11 +660,11 @@ body[id="helios"] {
 			font-weight: bold;
 		}
 
-		.typeahead.dropdown-menu {
-			position: fixed !important;
-			top: auto !important;
-			bottom: 30px !important;
-		}
+		// .typeahead.dropdown-menu {
+		// 	position: fixed !important;
+		// 	top: auto !important;
+		// 	bottom: 30px !important;
+		// }
 
 		#cog-helper {
 			position: fixed;

js/Helios-KeyBindings.js

@@ -1558,6 +1558,22 @@ referencedClasses: []
 }),
 globals.HLKeyBinderHelperWidget);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "deactivate",
+protocol: 'actions',
+fn: function (){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+_st(self._keyBinder())._deactivate();
+return self}, function($ctx1) {$ctx1.fill(self,"deactivate",{},globals.HLKeyBinderHelperWidget)})},
+args: [],
+source: "deactivate\x0a\x09self keyBinder deactivate",
+messageSends: ["deactivate", "keyBinder"],
+referencedClasses: []
+}),
+globals.HLKeyBinderHelperWidget);
+
 smalltalk.addMethod(
 smalltalk.method({
 selector: "hide",
@@ -1565,11 +1581,16 @@ protocol: 'actions',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-_st(_st(".".__comma(self._cssClass()))._asJQuery())._remove();
+var $1;
+$1=_st(".".__comma(self._cssClass()))._asJQuery();
+$ctx1.sendIdx["asJQuery"]=1;
+_st($1)._remove();
+$ctx1.sendIdx["remove"]=1;
+_st("#overlay"._asJQuery())._remove();
 self._showCog();
 return self}, function($ctx1) {$ctx1.fill(self,"hide",{},globals.HLKeyBinderHelperWidget)})},
 args: [],
-source: "hide\x0a\x09('.', self cssClass) asJQuery remove.\x0a\x09self showCog",
+source: "hide\x0a\x09('.', self cssClass) asJQuery remove.\x0a\x09'#overlay' asJQuery remove.\x0a\x09self showCog",
 messageSends: ["remove", "asJQuery", ",", "cssClass", "showCog"],
 referencedClasses: []
 }),
@@ -1771,27 +1792,35 @@ protocol: 'rendering',
 fn: function (html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$3,$4,$2;
+var $1,$2,$3,$5,$6,$4;
 $1=_st(html)._div();
 $ctx1.sendIdx["div"]=1;
-_st($1)._class_(self._cssClass());
-$2=_st($1)._with_((function(){
+_st($1)._id_("overlay");
+$ctx1.sendIdx["id:"]=1;
+$2=_st($1)._onClick_((function(){
 return smalltalk.withContext(function($ctx2) {
-self._renderLabelOn_(html);
+return self._deactivate();
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)})}));
 $3=_st(html)._div();
-_st($3)._id_(self._mainId());
+$ctx1.sendIdx["div"]=2;
+_st($3)._class_(self._cssClass());
 $4=_st($3)._with_((function(){
+return smalltalk.withContext(function($ctx2) {
+self._renderLabelOn_(html);
+$5=_st(html)._div();
+_st($5)._id_(self._mainId());
+$6=_st($5)._with_((function(){
 return smalltalk.withContext(function($ctx3) {
 return self._renderSelectedBindingOn_(html);
-}, function($ctx3) {$ctx3.fillBlock({},$ctx2,2)})}));
-$4;
+}, function($ctx3) {$ctx3.fillBlock({},$ctx2,3)})}));
+$6;
 return self._renderCloseOn_(html);
-}, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)})}));
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,2)})}));
 $ctx1.sendIdx["with:"]=1;
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},globals.HLKeyBinderHelperWidget)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html div class: self cssClass; with: [\x0a      \x09self renderLabelOn:html.\x0a\x09\x09html div\x0a\x09\x09\x09id: self mainId;\x0a\x09\x09\x09with: [ self renderSelectedBindingOn: html ].\x0a\x09\x09self renderCloseOn: html ]",
-messageSends: ["class:", "div", "cssClass", "with:", "renderLabelOn:", "id:", "mainId", "renderSelectedBindingOn:", "renderCloseOn:"],
+source: "renderContentOn: html\x0a\x09html div \x0a\x09\x09id: 'overlay';\x0a\x09\x09onClick: [ self deactivate ].\x0a\x09html div class: self cssClass; with: [\x0a      \x09self renderLabelOn:html.\x0a\x09\x09html div\x0a\x09\x09\x09id: self mainId;\x0a\x09\x09\x09with: [ self renderSelectedBindingOn: html ].\x0a\x09\x09self renderCloseOn: html ]",
+messageSends: ["id:", "div", "onClick:", "deactivate", "class:", "cssClass", "with:", "renderLabelOn:", "mainId", "renderSelectedBindingOn:", "renderCloseOn:"],
 referencedClasses: []
 }),
 globals.HLKeyBinderHelperWidget);

st/Helios-KeyBindings.st

@@ -536,8 +536,13 @@ selectedBinding
 
 !HLKeyBinderHelperWidget methodsFor: 'actions'!
 
+deactivate
+	self keyBinder deactivate
+!
+
 hide
 	('.', self cssClass) asJQuery remove.
+	'#overlay' asJQuery remove.
 	self showCog
 !
 
@@ -600,6 +605,9 @@ renderCog
 !
 
 renderContentOn: html
+	html div 
+		id: 'overlay';
+		onClick: [ self deactivate ].
 	html div class: self cssClass; with: [
       	self renderLabelOn:html.
 		html div