Helios: improved welcome page

css/helios.css

@@ -246,6 +246,28 @@ body[id="helios"] .CodeMirror-hint-active {
   color: #fff;
   text-shadow: 0 0 0;
 }
+body[id="helios"] .welcome {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  margin-left: -170px;
+  width: 340px;
+  margin-top: 60px;
+  text-shadow: 0 1px 0 #fafafa;
+  color: #666;
+  font-size: 14px;
+}
+body[id="helios"] .welcome h2 {
+  text-align: center;
+  color: #666;
+}
+body[id="helios"] .welcome button {
+  margin: 10px;
+  padding: 20px;
+  height: auto;
+  width: 150px;
+}
 body[id="helios"] .tool_container {
   position: absolute;
   top: 23px;

css/helios.less

@@ -293,6 +293,32 @@ body[id="helios"] {
 		text-shadow: 0 0 0;
 	}
 
+	.welcome {
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 50%;
+		margin-left: -170px;
+		width: 340px;
+		margin-top: 60px;
+		text-shadow: 0 1px 0 #fafafa;
+
+		color: #666;
+		font-size: 14px;
+		
+		h2 {
+			text-align: center;
+			color: #666;
+		}
+
+		button {
+			margin: 10px;
+			padding: 20px;
+			height: auto;
+			width: 150px;
+		}
+	}
+
 	.tool_container {
 		position: absolute;
 		top: 23px;

src/Helios-Core.js

@@ -3996,7 +3996,7 @@ $ctx1.sendIdx["with:"]=1;
 _st(html)._with_(_st($HLWelcomeWidget())._new());
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},globals.HLManager)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html div \x0a\x09\x09class: 'navbar navbar-fixed-top';\x0a\x09\x09with: [ html div \x0a\x09\x09\x09class: 'navbar-inner';\x0a\x09\x09\x09with: [ self renderTabsOn: html ] ].\x0a\x09\x0a\x09html with:HLWelcomeWidget new",
+source: "renderContentOn: html\x0a\x09html div \x0a\x09\x09class: 'navbar navbar-fixed-top';\x0a\x09\x09with: [ html div \x0a\x09\x09\x09class: 'navbar-inner';\x0a\x09\x09\x09with: [ self renderTabsOn: html ] ].\x0a\x09\x0a\x09html with: HLWelcomeWidget new",
 messageSends: ["class:", "div", "with:", "renderTabsOn:", "new"],
 referencedClasses: ["HLWelcomeWidget"]
 }),
@@ -4114,17 +4114,16 @@ protocol: 'initialization',
 fn: function (){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$2,$3;
+var $1;
 self._registerServices();
 $1=self._setupEvents();
 $ctx1.sendIdx["setupEvents"]=1;
-$2=self._keyBinder();
-_st($2)._setupEvents();
-$3=_st($2)._setupHelper();
+_st(self._keyBinder())._setupEvents();
+_st("#helper"._asJQuery())._fadeOut();
 return self}, function($ctx1) {$ctx1.fill(self,"setup",{},globals.HLManager)})},
 args: [],
-source: "setup\x0a\x09self \x0a\x09\x09registerServices;\x0a\x09\x09setupEvents.\x0a    self keyBinder \x0a\x09\x09setupEvents;\x0a\x09\x09setupHelper",
-messageSends: ["registerServices", "setupEvents", "keyBinder", "setupHelper"],
+source: "setup\x0a\x09self \x0a\x09\x09registerServices;\x0a\x09\x09setupEvents.\x0a    self keyBinder setupEvents.\x0a\x09\x0a\x09\x0a\x09'#helper' asJQuery fadeOut",
+messageSends: ["registerServices", "setupEvents", "keyBinder", "fadeOut", "asJQuery"],
 referencedClasses: []
 }),
 globals.HLManager);
@@ -6348,7 +6347,69 @@ globals.HLWelcomeWidget);
 
 smalltalk.addMethod(
 smalltalk.method({
-selector: "renderContentOn:",
+selector: "openClassBrowser",
+protocol: 'actions',
+fn: function (){
+var self=this;
+function $HLBrowser(){return globals.HLBrowser||(typeof HLBrowser=="undefined"?nil:HLBrowser)}
+return smalltalk.withContext(function($ctx1) { 
+_st($HLBrowser())._openAsTab();
+return self}, function($ctx1) {$ctx1.fill(self,"openClassBrowser",{},globals.HLWelcomeWidget)})},
+args: [],
+source: "openClassBrowser\x0a\x09HLBrowser openAsTab",
+messageSends: ["openAsTab"],
+referencedClasses: ["HLBrowser"]
+}),
+globals.HLWelcomeWidget);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "openHelp",
+protocol: 'actions',
+fn: function (){
+var self=this;
+return self},
+args: [],
+source: "openHelp",
+messageSends: [],
+referencedClasses: []
+}),
+globals.HLWelcomeWidget);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "openTestRunner",
+protocol: 'actions',
+fn: function (){
+var self=this;
+return self},
+args: [],
+source: "openTestRunner",
+messageSends: [],
+referencedClasses: []
+}),
+globals.HLWelcomeWidget);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "openWorkspace",
+protocol: 'actions',
+fn: function (){
+var self=this;
+function $HLWorkspace(){return globals.HLWorkspace||(typeof HLWorkspace=="undefined"?nil:HLWorkspace)}
+return smalltalk.withContext(function($ctx1) { 
+_st($HLWorkspace())._openAsTab();
+return self}, function($ctx1) {$ctx1.fill(self,"openWorkspace",{},globals.HLWelcomeWidget)})},
+args: [],
+source: "openWorkspace\x0a\x09HLWorkspace openAsTab",
+messageSends: ["openAsTab"],
+referencedClasses: ["HLWorkspace"]
+}),
+globals.HLWelcomeWidget);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "renderButtonsOn:",
 protocol: 'rendering',
 fn: function (html){
 var self=this;
@@ -6394,13 +6455,58 @@ $8=_st($7)._onClick_((function(){
 return smalltalk.withContext(function($ctx2) {
 return self._openHelp();
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1,4)})}));
-return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},globals.HLWelcomeWidget)})},
+return self}, function($ctx1) {$ctx1.fill(self,"renderButtonsOn:",{html:html},globals.HLWelcomeWidget)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Class Browser';\x0a\x09\x09onClick: [ self openClassBrowser ].\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Workspace';\x0a\x09\x09onClick: [ self openWorkspace ].\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Test Runner';\x0a\x09\x09onClick: [ self openTestRunner ].\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Help';\x0a\x09\x09onClick: [ self openHelp ]",
+source: "renderButtonsOn: html\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Class Browser';\x0a\x09\x09onClick: [ self openClassBrowser ].\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Workspace';\x0a\x09\x09onClick: [ self openWorkspace ].\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Test Runner';\x0a\x09\x09onClick: [ self openTestRunner ].\x0a\x09html button\x0a\x09\x09class: 'button';\x0a\x09\x09with: 'Help';\x0a\x09\x09onClick: [ self openHelp ]",
 messageSends: ["class:", "button", "with:", "onClick:", "openClassBrowser", "openWorkspace", "openTestRunner", "openHelp"],
 referencedClasses: []
 }),
 globals.HLWelcomeWidget);
 
+smalltalk.addMethod(
+smalltalk.method({
+selector: "renderContentOn:",
+protocol: 'rendering',
+fn: function (html){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+self._renderHelpOn_(html);
+$1=self._renderButtonsOn_(html);
+return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},globals.HLWelcomeWidget)})},
+args: ["html"],
+source: "renderContentOn: html\x0a\x09self\x0a\x09\x09renderHelpOn: html;\x0a\x09\x09renderButtonsOn: html",
+messageSends: ["renderHelpOn:", "renderButtonsOn:"],
+referencedClasses: []
+}),
+globals.HLWelcomeWidget);
+
+smalltalk.addMethod(
+smalltalk.method({
+selector: "renderHelpOn:",
+protocol: 'rendering',
+fn: function (html){
+var self=this;
+return smalltalk.withContext(function($ctx1) { 
+var $1;
+_st(_st(html)._h2())._with_("No tools are open");
+$ctx1.sendIdx["with:"]=1;
+_st(_st(html)._ul())._with_((function(){
+return smalltalk.withContext(function($ctx2) {
+$1=_st(html)._li();
+$ctx2.sendIdx["li"]=1;
+_st($1)._with_("Perform actions with  ctrl + space");
+$ctx2.sendIdx["with:"]=3;
+return _st(_st(html)._li())._with_("Open one of the common tools:");
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1,1)})}));
+$ctx1.sendIdx["with:"]=2;
+return self}, function($ctx1) {$ctx1.fill(self,"renderHelpOn:",{html:html},globals.HLWelcomeWidget)})},
+args: ["html"],
+source: "renderHelpOn: html\x0a\x09html h2 with: 'No tools are open'.\x0a\x09html ul with: [\x0a\x09\x09html li with: 'Perform actions with  ctrl + space'.\x0a\x09\x09html li with: 'Open one of the common tools:' ]",
+messageSends: ["with:", "h2", "ul", "li"],
+referencedClasses: []
+}),
+globals.HLWelcomeWidget);
+
 
 });

src/Helios-Core.st

@@ -1327,9 +1327,10 @@ setup
 	self 
 		registerServices;
 		setupEvents.
-    self keyBinder 
-		setupEvents;
-		setupHelper
+    self keyBinder setupEvents.
+	
+	
+	'#helper' asJQuery fadeOut
 ! !
 
 !HLManager methodsFor: 'private'!
@@ -1395,7 +1396,7 @@ renderContentOn: html
 			class: 'navbar-inner';
 			with: [ self renderTabsOn: html ] ].
 	
-	html with:HLWelcomeWidget new
+	html with: HLWelcomeWidget new
 !
 
 renderTabsOn: html
@@ -2135,9 +2136,25 @@ cssClass
 	^ 'welcome'
 ! !
 
+!HLWelcomeWidget methodsFor: 'actions'!
+
+openClassBrowser
+	HLBrowser openAsTab
+!
+
+openHelp
+!
+
+openTestRunner
+!
+
+openWorkspace
+	HLWorkspace openAsTab
+! !
+
 !HLWelcomeWidget methodsFor: 'rendering'!
 
-renderContentOn: html
+renderButtonsOn: html
 	html button
 		class: 'button';
 		with: 'Class Browser';
@@ -2154,5 +2171,18 @@ renderContentOn: html
 		class: 'button';
 		with: 'Help';
 		onClick: [ self openHelp ]
+!
+
+renderContentOn: html
+	self
+		renderHelpOn: html;
+		renderButtonsOn: html
+!
+
+renderHelpOn: html
+	html h2 with: 'No tools are open'.
+	html ul with: [
+		html li with: 'Perform actions with  ctrl + space'.
+		html li with: 'Open one of the common tools:' ]
 ! !
 

src/Helios-KeyBindings.js

@@ -1470,25 +1470,6 @@ referencedClasses: []
 }),
 globals.HLKeyBinder);
 
-smalltalk.addMethod(
-smalltalk.method({
-selector: "setupHelper",
-protocol: 'initialization',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1,$2;
-$1=self["@helper"];
-_st($1)._renderStart();
-$2=_st($1)._renderCog();
-return self}, function($ctx1) {$ctx1.fill(self,"setupHelper",{},globals.HLKeyBinder)})},
-args: [],
-source: "setupHelper\x0a\x09helper \x09\x0a\x09\x09renderStart;\x0a\x09\x09renderCog",
-messageSends: ["renderStart", "renderCog"],
-referencedClasses: []
-}),
-globals.HLKeyBinder);
-
 smalltalk.addMethod(
 smalltalk.method({
 selector: "systemIsMac",
@@ -1757,42 +1738,6 @@ referencedClasses: []
 }),
 globals.HLKeyBinderHelperWidget);
 
-smalltalk.addMethod(
-smalltalk.method({
-selector: "renderCog",
-protocol: 'rendering',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1,$3,$4,$2;
-_st((function(html){
-return smalltalk.withContext(function($ctx2) {
-$1=_st(html)._div();
-_st($1)._id_("cog-helper");
-$2=_st($1)._with_((function(){
-return smalltalk.withContext(function($ctx3) {
-$3=_st(html)._a();
-_st($3)._with_((function(){
-return smalltalk.withContext(function($ctx4) {
-return _st(_st(html)._tag_("i"))._class_("icon-cog");
-}, function($ctx4) {$ctx4.fillBlock({},$ctx3,3)})}));
-$4=_st($3)._onClick_((function(){
-return smalltalk.withContext(function($ctx4) {
-return _st(self._keyBinder())._activate();
-}, function($ctx4) {$ctx4.fillBlock({},$ctx3,4)})}));
-return $4;
-}, function($ctx3) {$ctx3.fillBlock({},$ctx2,2)})}));
-$ctx2.sendIdx["with:"]=1;
-return $2;
-}, function($ctx2) {$ctx2.fillBlock({html:html},$ctx1,1)})}))._appendToJQuery_("body"._asJQuery());
-return self}, function($ctx1) {$ctx1.fill(self,"renderCog",{},globals.HLKeyBinderHelperWidget)})},
-args: [],
-source: "renderCog\x0a\x09[ :html |\x0a\x09\x09html \x0a\x09\x09\x09div id: 'cog-helper'; \x0a\x09\x09\x09with: [\x0a\x09\x09\x09\x09html a \x0a\x09\x09\x09\x09\x09with: [ (html tag: 'i') class: 'icon-cog' ];\x0a\x09\x09\x09\x09\x09onClick: [ self keyBinder activate ] ] ]\x0a\x09\x09appendToJQuery: 'body' asJQuery",
-messageSends: ["appendToJQuery:", "id:", "div", "with:", "a", "class:", "tag:", "onClick:", "activate", "keyBinder", "asJQuery"],
-referencedClasses: []
-}),
-globals.HLKeyBinderHelperWidget);
-
 smalltalk.addMethod(
 smalltalk.method({
 selector: "renderContentOn:",
@@ -1878,42 +1823,6 @@ referencedClasses: []
 }),
 globals.HLKeyBinderHelperWidget);
 
-smalltalk.addMethod(
-smalltalk.method({
-selector: "renderStart",
-protocol: 'rendering',
-fn: function (){
-var self=this;
-return smalltalk.withContext(function($ctx1) { 
-var $1,$3,$5,$6,$4,$2,$7;
-$1="#helper"._asJQuery();
-$ctx1.sendIdx["asJQuery"]=1;
-_st($1)._remove();
-$2=(function(html){
-return smalltalk.withContext(function($ctx2) {
-$3=_st(html)._div();
-_st($3)._id_("helper");
-$5=$3;
-$6=_st("Press ".__comma(_st(self._keyBinder())._activationKeyLabel())).__comma(" to start");
-$ctx2.sendIdx[","]=1;
-$4=_st($5)._with_($6);
-return $4;
-}, function($ctx2) {$ctx2.fillBlock({html:html},$ctx1,1)})});
-$7="body"._asJQuery();
-$ctx1.sendIdx["asJQuery"]=2;
-_st($2)._appendToJQuery_($7);
-_st((function(){
-return smalltalk.withContext(function($ctx2) {
-return _st("#helper"._asJQuery())._fadeOut_((1000));
-}, function($ctx2) {$ctx2.fillBlock({},$ctx1,2)})}))._valueWithTimeout_((2000));
-return self}, function($ctx1) {$ctx1.fill(self,"renderStart",{},globals.HLKeyBinderHelperWidget)})},
-args: [],
-source: "renderStart\x0a\x09'#helper' asJQuery remove.\x0a\x0a\x09[ :html |\x0a\x09\x09html div \x0a\x09\x09\x09id: 'helper';\x0a\x09\x09\x09with: 'Press ', self keyBinder activationKeyLabel, ' to start' ] appendToJQuery: 'body' asJQuery.\x0a\x09\x0a\x09[ '#helper' asJQuery fadeOut: 1000 ] \x0a\x09\x09valueWithTimeout: 2000",
-messageSends: ["remove", "asJQuery", "appendToJQuery:", "id:", "div", "with:", ",", "activationKeyLabel", "keyBinder", "valueWithTimeout:", "fadeOut:"],
-referencedClasses: []
-}),
-globals.HLKeyBinderHelperWidget);
-
 smalltalk.addMethod(
 smalltalk.method({
 selector: "selectedBinding",

src/Helios-KeyBindings.st

@@ -475,12 +475,6 @@ setupEvents
 initialize
 	super initialize.
 	helper := HLKeyBinderHelperWidget on: self
-!
-
-setupHelper
-	helper 	
-		renderStart;
-		renderCog
 ! !
 
 !HLKeyBinder methodsFor: 'testing'!
@@ -594,17 +588,6 @@ renderCloseOn: html
 		onClick: [ self keyBinder deactivate ]
 !
 
-renderCog
-	[ :html |
-		html 
-			div id: 'cog-helper'; 
-			with: [
-				html a 
-					with: [ (html tag: 'i') class: 'icon-cog' ];
-					onClick: [ self keyBinder activate ] ] ]
-		appendToJQuery: 'body' asJQuery
-!
-
 renderContentOn: html
 	html div 
 		id: 'overlay';
@@ -629,18 +612,6 @@ renderLabelOn: html
 
 renderSelectedBindingOn: html
 	self selectedBinding renderOn: self html: html
-!
-
-renderStart
-	'#helper' asJQuery remove.
-
-	[ :html |
-		html div 
-			id: 'helper';
-			with: 'Press ', self keyBinder activationKeyLabel, ' to start' ] appendToJQuery: 'body' asJQuery.
-	
-	[ '#helper' asJQuery fadeOut: 1000 ] 
-		valueWithTimeout: 2000
 ! !
 
 !HLKeyBinderHelperWidget class methodsFor: 'instance creation'!