Theme Input, style EditableText, restore text input cursor

The Input component conforms a little more closely
to the Material spec:
http://www.google.com/design/spec/components/text-fields.html#text-fields-single-line-text-field

Added a TextStyle attribute to EditableText and "themed" the text style for Input.

Restored the blinking EditableText input cursor.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1216133002.

sdk/lib/editing/editable_text.dart

@@ -3,29 +3,37 @@
 // found in the LICENSE file.
 
 import 'dart:async';
+import 'dart:sky' as sky;
 
 import '../painting/text_style.dart';
+import '../rendering/object.dart';
 import '../widgets/basic.dart';
 import 'editable_string.dart';
 
-class EditableText extends Component {
+const _kCursorBlinkPeriod = 500; // milliseconds
+const _kCursorGap = 1.0;
+const _kCursorHeightOffset = 2.0;
+const _kCursorWidth = 1.0;
 
-  EditableText({String key, this.value, this.focused})
-      : super(key: key, stateful: true);
+class EditableText extends Component {
 
-  // static final Style _cursorStyle = new Style('''
-  //   width: 2px;
-  //   height: 1.2em;
-  //   vertical-align: top;
-  //   background-color: ${Blue[500]};'''
-  // );
+  EditableText({
+    String key,
+    this.value,
+    this.focused: false,
+    this.style,
+    this.cursorColor}) : super(key: key, stateful: true);
 
   EditableString value;
   bool focused;
+  TextStyle style;
+  Color cursorColor;
 
   void syncFields(EditableText source) {
     value = source.value;
     focused = source.focused;
+    style = source.style;
+    cursorColor = source.cursorColor;
   }
 
   Timer _cursorTimer;
@@ -40,7 +48,7 @@ class EditableText extends Component {
   void _startCursorTimer() {
     _showCursor = true;
     _cursorTimer = new Timer.periodic(
-        new Duration(milliseconds: 500), _cursorTick);
+      new Duration(milliseconds: _kCursorBlinkPeriod), _cursorTick);
   }
 
   void didUnmount() {
@@ -55,21 +63,48 @@ class EditableText extends Component {
     _showCursor = false;
   }
 
+  void _paintCursor(sky.Canvas canvas, Size size) {
+    if (!_showCursor)
+      return;
+
+    print("Draw cursor");
+    Rect cursorRect =  new Rect.fromLTWH(
+      _kCursorGap, 
+      -_kCursorHeightOffset,
+      _kCursorWidth,
+      style.fontSize + 2 * _kCursorHeightOffset
+    );
+    canvas.drawRect(cursorRect, new Paint()..color = cursorColor);
+  }
+
   Widget build() {
+    assert(style != null);
+    assert(focused != null);
+    assert(cursorColor != null);
+
     if (focused && _cursorTimer == null)
       _startCursorTimer();
     else if (!focused && _cursorTimer != null)
       _stopCursorTimer();
 
     if (!value.composing.isValid) {
-      return new Text(value.text);
+      return new Text(value.text, style: style);
     }
 
-    return new StyledText(elements: [
-      const TextStyle(),
+    TextStyle composingStyle = style.merge(const TextStyle(decoration: underline));
+    StyledText text = new StyledText(elements: [
+      style,
       value.textBefore(value.composing),
-      [const TextStyle(decoration: underline), value.textInside(value.composing)],
+      [composingStyle, value.textInside(value.composing)],
       value.textAfter(value.composing)
     ]);
+
+    Widget cursor = new Container(
+      height: style.fontSize,
+      width: _kCursorGap + _kCursorWidth,
+      child: new CustomPaint(callback: _paintCursor, token: _showCursor)
+    );
+
+    return new Flex([text, cursor]);
   }
 }

sdk/lib/editing/input.dart

@@ -3,15 +3,17 @@
 // found in the LICENSE file.
 
 import '../painting/text_style.dart';
-import '../theme/colors.dart';
-import '../theme/typography.dart' as typography;
 import '../widgets/basic.dart';
+import '../widgets/theme.dart';
 import 'editable_string.dart';
 import 'editable_text.dart';
 import 'keyboard.dart';
 
 typedef void ValueChanged(value);
 
+const double _kHintOpacity = 0.26;
+const EdgeDims _kTextfieldPadding = const EdgeDims.symmetric(vertical: 8.0);
+
 class Input extends Component {
 
   Input({String key,
@@ -25,8 +27,6 @@ class Input extends Component {
     );
   }
 
-  static final TextStyle _placeholderStyle = typography.black.caption;
-
   String placeholder;
   ValueChanged onChanged;
   bool focused = false;
@@ -56,23 +56,33 @@ class Input extends Component {
       _isAttachedToKeyboard = true;
     }
 
+    TextStyle textStyle = Theme.of(this).text.subhead;
     List<Widget> textChildren = <Widget>[];
+
     if (placeholder != null && _value.isEmpty) {
-      textChildren.add(new Text(placeholder, style: _placeholderStyle));
+      Widget child = new Opacity(
+        key: "placeholder",
+        child: new Text(placeholder, style: textStyle),
+        opacity: _kHintOpacity
+      );
+      textChildren.add(child);
     }
-    textChildren.add(
-      new EditableText(value: _editableValue, focused: focused)
-    );
+
+    textChildren.add(new EditableText(
+      value: _editableValue, 
+      focused: focused,
+      style: textStyle,
+      cursorColor: Theme.of(this).primary[200]
+    ));
 
     Border focusHighlight = new Border(bottom: new BorderSide(
-      color: focused ? Blue[400] : Grey[200],
+      color: focused ? Theme.of(this).primary[400] : Theme.of(this).primary[200],
       width: focused ? 2.0 : 1.0
     ));
 
-    // TODO(hansmuller): white-space: pre, height: 1.2em.
     Container input = new Container(
       child: new Stack(textChildren),
-      padding: const EdgeDims.only(left: 8.0, right: 8.0, bottom: 12.0),
+      padding: _kTextfieldPadding,
       decoration: new BoxDecoration(border: focusHighlight)
     );