Helios: tab switch widget improvements

css/helios.css

@@ -35,7 +35,6 @@ html[xmlns] .clearfix {
   overflow: hidden;
   height: 100%;
   width: 100%;
-  background: #fff;
 }
 #helios .CodeMirror-hints {
   border-radius: 0;
@@ -111,7 +110,8 @@ html[xmlns] .clearfix {
   font-size: 11px;
   line-height: 16px;
 }
-#helios .navbar-fixed-top a span {
+#helios .navbar-fixed-top a span,
+#helios .dialog .nav a span {
   padding: 1px;
   padding-left: 18px;
   background-position: center left;
@@ -127,22 +127,28 @@ html[xmlns] .clearfix {
   background-position: center left;
   margin-top: 2px;
 }
-#helios .navbar-fixed-top a span.references {
+#helios .navbar-fixed-top a span.references,
+#helios .dialog .nav a span.references {
   background-image: url('../images/references.png');
 }
-#helios .navbar-fixed-top a span.browser {
+#helios .navbar-fixed-top a span.browser,
+#helios .dialog .nav a span.browser {
   background-image: url('../images/browser.png');
 }
-#helios .navbar-fixed-top a span.sunit {
+#helios .navbar-fixed-top a span.sunit,
+#helios .dialog .nav a span.sunit {
   background-image: url('../images/sunit.png');
 }
-#helios .navbar-fixed-top a span.workspace {
+#helios .navbar-fixed-top a span.workspace,
+#helios .dialog .nav a span.workspace {
   background-image: url('../images/workspace.png');
 }
-#helios .navbar-fixed-top a span.debugger {
+#helios .navbar-fixed-top a span.debugger,
+#helios .dialog .nav a span.debugger {
   background-image: url('../images/debugger.png');
 }
-#helios .navbar-fixed-top a span.inspector {
+#helios .navbar-fixed-top a span.inspector,
+#helios .dialog .nav a span.inspector {
   background-image: url('../images/inspector.png');
 }
 #helios .navbar-fixed-top .navbar-inner {
@@ -632,6 +638,24 @@ html[xmlns] .clearfix {
   -moz-transition: top .5s;
   -o-transition: top .5s;
 }
+#helios .confirmation .hl_widget:focus,
+#helios .dialog .hl_widget:focus {
+  outline: 0 none;
+}
+#helios .confirmation .hl_widget .form-actions,
+#helios .dialog .hl_widget .form-actions {
+  padding: 0;
+  border: 0;
+}
+#helios .confirmation .nav,
+#helios .dialog .nav {
+  border: 1px solid #999;
+}
+#helios .confirmation .nav span,
+#helios .dialog .nav span {
+  font-size: 11px;
+  font-weight: normal;
+}
 #helios .confirmation .title,
 #helios .dialog .title {
   font-size: 16px;

css/helios.less

@@ -44,7 +44,6 @@ html[xmlns] .clearfix {
 	overflow: hidden;
 	height: 100%;
 	width: 100%;
-	background: #fff;
     }
 
     .CodeMirror-hints {
@@ -133,7 +132,8 @@ html[xmlns] .clearfix {
 	line-height: 16px;
     }
 
-    .navbar-fixed-top a span {
+    .navbar-fixed-top a span,
+    .dialog .nav a span {
 	padding: 1px;
 	padding-left: 18px;
 	background-position: center left;
@@ -151,27 +151,31 @@ html[xmlns] .clearfix {
 	margin-top: 2px;
     }
 
-    .navbar-fixed-top a span.references {
-	background-image: url('../images/references.png')
-    }
+    .navbar-fixed-top a,
+    .dialog .nav a {
 
-    .navbar-fixed-top a span.browser {
-	background-image: url('../images/browser.png')
-    }
+	span.references {
+	    background-image: url('../images/references.png')
+	}
 
-    .navbar-fixed-top a span.sunit {
-	background-image: url('../images/sunit.png')
-    }
+	span.browser {
+	    background-image: url('../images/browser.png')
+	}
 
-    .navbar-fixed-top a span.workspace {
-	background-image: url('../images/workspace.png')
-    }
+	span.sunit {
+	    background-image: url('../images/sunit.png')
+	}
 
-    .navbar-fixed-top a span.debugger {
-	background-image: url('../images/debugger.png')
-    }
-    .navbar-fixed-top a span.inspector {
-	background-image: url('../images/inspector.png')
+	span.workspace {
+	    background-image: url('../images/workspace.png')
+	}
+
+	span.debugger {
+	    background-image: url('../images/debugger.png')
+	}
+	span.inspector {
+	    background-image: url('../images/inspector.png')
+	}
     }
 
 
@@ -732,6 +736,27 @@ html[xmlns] .clearfix {
 	-moz-transition: top .5s;
 	-o-transition: top .5s;
 
+	.hl_widget {
+	
+	    &:focus {
+		outline: 0 none;
+	    }
+
+	    .form-actions {
+		padding: 0;
+		border: 0;
+	    }
+	}
+
+	.nav {
+	    border: 1px solid #999;
+
+	    span {
+		font-size: 11px;
+		font-weight: normal;
+	    }
+	}
+
 	.title {
 	    font-size: 16px;
 	    margin-bottom: 15px;
@@ -752,7 +777,6 @@ html[xmlns] .clearfix {
 	    width: 235px;
 	}
 
-
 	.progress {
 	    height: 5px;
 

js/Helios-Core.deploy.js

@@ -2371,9 +2371,12 @@ selector: "renderItemLabel:on:",
 fn: function (aTab,html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-_st(html)._with_(_st(aTab)._label());
+var $1,$2;
+$1=_st(html)._span();
+_st($1)._class_(_st(aTab)._cssClass());
+$2=_st($1)._with_(_st(aTab)._label());
 return self}, function($ctx1) {$ctx1.fill(self,"renderItemLabel:on:",{aTab:aTab,html:html},smalltalk.HLTabListWidget)})},
-messageSends: ["with:", "label"]}),
+messageSends: ["class:", "cssClass", "span", "with:", "label"]}),
 smalltalk.HLTabListWidget);
 
 smalltalk.addMethod(

js/Helios-Core.js

@@ -3129,11 +3129,14 @@ category: 'rendering',
 fn: function (aTab,html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-_st(html)._with_(_st(aTab)._label());
+var $1,$2;
+$1=_st(html)._span();
+_st($1)._class_(_st(aTab)._cssClass());
+$2=_st($1)._with_(_st(aTab)._label());
 return self}, function($ctx1) {$ctx1.fill(self,"renderItemLabel:on:",{aTab:aTab,html:html},smalltalk.HLTabListWidget)})},
 args: ["aTab", "html"],
-source: "renderItemLabel: aTab on: html\x0a\x09html with: aTab label",
-messageSends: ["with:", "label"],
+source: "renderItemLabel: aTab on: html\x0a\x09html span\x0a\x09\x09class: aTab cssClass;\x0a\x09\x09with: aTab label",
+messageSends: ["class:", "cssClass", "span", "with:", "label"],
 referencedClasses: []
 }),
 smalltalk.HLTabListWidget);

st/Helios-Core.st

@@ -1117,7 +1117,9 @@ selectItem: aTab
 !HLTabListWidget methodsFor: 'rendering'!
 
 renderItemLabel: aTab on: html
-	html with: aTab label
+	html span
+		class: aTab cssClass;
+		with: aTab label
 ! !
 
 HLWidget subclass: #HLManager