Merge pull request #1 from Newness/master

Removed fittable; added new options

Author: MaKleSoft

v2/SelectDecorator/SelectDecorator.css

@@ -24,18 +24,47 @@
 }
 
 .select-decorator .select-decorator-inner {
+	display: block;
 	padding: 8px 10px;
 }
 
 .select-decorator-inner-text {
+	margin-top: 1px;
+	display: inline-block;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	text-align: left;
+	
+}
+
+.select-decorator-inner-icon {
+	float: left;
+	width: 32px;
+	height: 32px;
+	background-size: cover;
+	margin: -7px 7px -7px 0;
+	background-position: 0px 0px;
+}
+
+.onyx-button.active .select-decorator-inner-icon,
+.onyx-button:active:hover:not([disabled]) .select-decorator-inner-icon {
+	background-position: 0 -32px;
+}
+
+.select-decorator-no-caption .select-decorator-inner-icon {
+	margin-right: 0;
 }
 
 .select-decorator-inner-arrow {
+	float: right;
+	margin-left: 7px;
 	width: 21px;
 	height: 21px;
 	background: url(menu-arrow.png) no-repeat center center;
-}
+}
+
+.select-decorator-no-arrow .select-decorator-inner-arrow {
+	display: none;
+}
+

v2/SelectDecorator/SelectDecorator.js

@@ -2,23 +2,40 @@ enyo.kind({
 	name: "SelectDecorator",
 	classes: "onyx-button select-decorator",
 	handlers: {
-		onchange: "changeHandler"
+		onchange : "changeHandler"
 	},
 	published: {
-		disabled: false
+		disabled : false,
+		showCaption : true,
+		showArrow : true,
+		icon: ""
+	},
+	showCaptionChanged: function() {
+		this.$.innerText.setShowing(this.showCaption);
+		this.addRemoveClass("select-decorator-no-caption", !this.showCaption);
 	},
 	disabledChanged: function() {
 		this.addRemoveClass("select-decorator-disabled", this.disabled);
 	},
+	showArrowChanged: function() {
+		this.addRemoveClass("select-decorator-no-arrow", !this.showArrow);
+	},
+	iconChanged: function() {
+		this.$.innerIcon.setStyle("background-image: url('" + this.icon + "')");
+		this.$.innerIcon.setShowing((this.icon !== ""));
+	},
 	create: function() {
 		this.inherited(arguments);
 		this.disabledChanged();
+		this.showCaptionChanged();
+		this.showArrowChanged();
+		this.iconChanged();
 	},
 	rendered: function() {
 		this.inherited(arguments);
 		var select = this.getClientControls()[0];
 
-		if (select) {
+		if(select) {
 			this.changeHandler(select);
 		}
 	},
@@ -27,9 +44,10 @@ enyo.kind({
 		this.$.innerText.setContent(caption);
 	},
 	components: [
-		{kind: "FittableColumns", noStretch: true, classes: "select-decorator-inner", components: [
-			{name: "innerText", fit: true, classes: "select-decorator-inner-text"},
-			{classes: "select-decorator-inner-arrow"}
+		{classes: "select-decorator-inner", components: [
+			{classes: "select-decorator-inner-arrow"},
+			{name: "innerIcon", classes: "select-decorator-inner-icon"},
+			{name: "innerText",	fit : true,	classes : "select-decorator-inner-text"}
 		]}
 	]
 });