WIP on SC.DateWidget, plus brought in FontAwesome

application/widgets/date.js

@@ -0,0 +1,17 @@
+// ==========================================================================
+// Project:   Blossom - Modern, Cross-Platform Application Framework
+// Copyright: ©2012 Fohr Motion Picture Studios. All rights reserved.
+// License:   Licensed under the GPLv3 license (see BLOSSOM-LICENSE).
+// ==========================================================================
+/*globals sc_assert */
+
+sc_require('widgets/widget');
+
+SC.DateWidget = SC.Widget.extend({
+
+  render: function(ctx) {
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(0,0,ctx.width,ctx.height);
+  }
+
+});

application/widgets/text_field.js

@@ -235,6 +235,7 @@ SC.TextFieldWidget = SC.Widget.extend({
     style.borderRadius = '5px';
     style.borderColor = this.get('isEnabled') ? 'rgb(252,188,126)' : 'grey'; // this.get('borderColor');
     style.font = this.get('font');
+    style.textAlight = 'left';
     style.color = this.get('color');
     style.backgroundColor = this.get('isEnabled') ? this.get('backgroundColor') : 'rgb(70,70,70)';
     style.backgroundImage = 'none';

buildtools/buildtools.js

@@ -1420,6 +1420,12 @@ BT.App = BT.Target.extend({
     ret += '      .frame { border-radius: 5px; }\n';
     ret += '      .frame::-webkit-scrollbar { -webkit-appearance: none; width: 11px; }\n';
     ret += '      .frame::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid grey; /* should match background, can\'t be transparent */ background-color: rgba(0,0,0,.5); }\n';
+    ret += '       @font-face {\n';
+    ret += '           font-family: "FontAwesome";\n';
+    ret += '           src: url(/static/fontawesome-webfont.ttf);\n';
+    ret += '           font-weight: normal;\n';
+    ret += '           font-style: normal;\n';
+    ret += '       }\n';
     ret += '    </style>\n';
     ret += '  </head>\n';
 

examples/widget_demo/controls.js

@@ -65,6 +65,11 @@ var rootLayer = SC.Layer.create({
     controlBehaviors.forEach(function(behavior, idx) {
       ctx.fillText('SC.'+behavior+'_BEHAVIOR:', 184, 83+idx*120);
     });
+
+
+    ctx.font = "48pt FontAwesome";
+    ctx.fillStyle = 'black';
+    ctx.fillText("\uf000", 60, 90);
   }
 });
 
@@ -194,6 +199,13 @@ controlBehaviors.forEach(function(behavior, idx) {
 
 rootLayer.get('sublayers').pushObjects(layers);
 
+var dateWidget = SC.DateWidget.create({
+  layout: { top: 370, left: 210, width: 200, height: 24 },
+  date: SC.DateTime.create()
+});
+
+rootLayer.get('sublayers').pushObject(dateWidget);
+
 var segmentedWidget = SC.SegmentedWidget.create({
   layout: { top: 430, left: 210, width: 500, height: 24 },
   theme: 'regular',

projectfile.js

@@ -39,6 +39,11 @@ var project = BT.Project.create({
     "sc-theme-repeat-x.png": BT.File.create({
       sourcePath: path.join(__dirname, "application/resources/classic/images/sc-theme-repeat-x.png"),
       mimeType: 'image/png'
+    }),
+
+    "fontawesome-webfont.ttf": BT.File.create({
+      sourcePath: path.join(__dirname, "examples/widget_demo/fontawesome-webfont.ttf"),
+      mimeType: 'font/opentype'
     })
   })
 });