Commit 9cb9e2ed authored by Hans Muller's avatar Hans Muller

Styling for text fragments

This is a completion of Eric's WIP patch:
https://codereview.chromium.org/1179663005/

Low level support for creating a paragraph that contains
runs of styled text. The styles may be nested.

The Paragraph and RenderParagraph classes have been
replaced by Inline and RenderInline. Styled text is defined
with a tree of InlineText and InlineStyle objects.

R=abarth@chromium.org

Review URL: https://codereview.chromium.org/1177833012.
parent cc76b904
...@@ -75,8 +75,12 @@ porchetta bacon kevin meatball meatloaf pig beef ribs chicken. Brisket ribeye ...@@ -75,8 +75,12 @@ porchetta bacon kevin meatball meatloaf pig beef ribs chicken. Brisket ribeye
andouille leberkas capicola meatloaf. Chicken pig ball tip pork picanha bresaola andouille leberkas capicola meatloaf. Chicken pig ball tip pork picanha bresaola
alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl. alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl.
Pancetta meatball tongue tenderloin rump tail jowl boudin."""; Pancetta meatball tongue tenderloin rump tail jowl boudin.""";
RenderParagraph paragraph = new RenderParagraph(text: meatyString, color: const Color(0xFF009900)); var text = new InlineStyle(
padding = new RenderPadding(padding: const EdgeDims.all(10.0), child: paragraph); new TextStyle(color: const Color(0xFF009900)),
[new InlineText(meatyString)]);
padding = new RenderPadding(
padding: const EdgeDims.all(10.0),
child: new RenderParagraph(text));
column.add(padding); column.add(padding);
// Bottom cell // Bottom cell
......
...@@ -20,7 +20,7 @@ void main() { ...@@ -20,7 +20,7 @@ void main() {
var table = new RenderFlex(direction: FlexDirection.vertical); var table = new RenderFlex(direction: FlexDirection.vertical);
void addRow(FlexJustifyContent justify) { void addRow(FlexJustifyContent justify) {
RenderParagraph paragraph = new RenderParagraph(text: "${justify}"); RenderParagraph paragraph = new RenderParagraph(new InlineText("${justify}"));
table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0))); table.add(new RenderPadding(child: paragraph, padding: new EdgeDims.only(top: 20.0)));
var row = new RenderFlex(direction: FlexDirection.horizontal); var row = new RenderFlex(direction: FlexDirection.horizontal);
row.add(new RenderSolidColorBox(const Color(0xFFFFCCCC), desiredSize: new Size(80.0, 60.0))); row.add(new RenderSolidColorBox(const Color(0xFFFFCCCC), desiredSize: new Size(80.0, 60.0)));
......
...@@ -31,9 +31,12 @@ andouille leberkas capicola meatloaf. Chicken pig ball tip pork picanha bresaola ...@@ -31,9 +31,12 @@ andouille leberkas capicola meatloaf. Chicken pig ball tip pork picanha bresaola
alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl. alcatra. Pork pork belly alcatra, flank chuck drumstick biltong doner jowl.
Pancetta meatball tongue tenderloin rump tail jowl boudin."""; Pancetta meatball tongue tenderloin rump tail jowl boudin.""";
var text = new InlineStyle(
new TextStyle(color: const Color(0xFF009900)),
[new InlineText(meatyString)]);
child = new RenderDecoratedBox( child = new RenderDecoratedBox(
decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)), decoration: new BoxDecoration(backgroundColor: const Color(0xFFFFFFFF)),
child: new RenderParagraph(text: meatyString, color: const Color(0xFF009900)) child: new RenderParagraph(text)
); );
flexRoot.add(child); flexRoot.add(child);
child.parentData.flex = 1; child.parentData.flex = 1;
......
...@@ -80,13 +80,14 @@ class RenderTouchDemo extends RenderBox { ...@@ -80,13 +80,14 @@ class RenderTouchDemo extends RenderBox {
AppView app; AppView app;
void main() { void main() {
var para = new RenderParagraph(text: "Touch me!"); var paragraph = new RenderParagraph(new InlineText("Touch me!"));
var stack = new RenderStack(children: [ var stack = new RenderStack(children: [
new RenderTouchDemo(), new RenderTouchDemo(),
para, paragraph,
]); ]);
// Make the paragraph not fill the whole screen so it doesn't eat events. // Prevent the RenderParagraph from filling the whole screen so
para.parentData..top = 40.0 // that it doesn't eat events.
..left = 20.0; paragraph.parentData..top = 40.0
..left = 20.0;
app = new AppView(root: stack); app = new AppView(root: stack);
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment