[story_shell_labs] edit mode ui updates
MI4-2429 #done
Change-Id: I0d2e2b8c5ba5313a44d4e8d3a0795431fb275149
diff --git a/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_widget.dart b/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_widget.dart
index a0ec2f7..9200551 100644
--- a/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_widget.dart
+++ b/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_widget.dart
@@ -14,13 +14,9 @@
import 'widgets/drop_target_widget.dart';
import 'widgets/editing_tile_chrome.dart';
-const _kSizerThickness = 24.0;
-const _kSizerHandleThickness = 4.0;
-
-final _kSizerHandleDecoration = BoxDecoration(
- border: Border.all(color: Color(0xFFBDBDBD)),
- borderRadius: BorderRadius.circular(2),
-);
+const _kSizerThickness = 48.0;
+const _kSizerHandleThickness = 8.0;
+const _kSizerHandleLength = 32.0;
/// Tiling layout Layout presenter widget.
@immutable
@@ -112,12 +108,12 @@
child: Center(
child: Container(
width: axis == Axis.horizontal
- ? _kSizerThickness
+ ? _kSizerHandleLength
: _kSizerHandleThickness,
height: axis == Axis.vertical
- ? _kSizerThickness
+ ? _kSizerHandleLength
: _kSizerHandleThickness,
- decoration: _kSizerHandleDecoration,
+ decoration: const BoxDecoration(color: Colors.black),
),
),
),
diff --git a/public/dart/story_shell_labs/lib/src/layout/tile_presenter/widgets/editing_tile_chrome.dart b/public/dart/story_shell_labs/lib/src/layout/tile_presenter/widgets/editing_tile_chrome.dart
index 698256a..c149864 100644
--- a/public/dart/story_shell_labs/lib/src/layout/tile_presenter/widgets/editing_tile_chrome.dart
+++ b/public/dart/story_shell_labs/lib/src/layout/tile_presenter/widgets/editing_tile_chrome.dart
@@ -6,7 +6,7 @@
import 'package:tiler/tiler.dart';
import 'drop_target_widget.dart';
-const _kBorderWidth = 1.0;
+const _kBorderWidth = 2.0;
/// Chrome for a tiling layout presenter.
class EditingTileChrome extends StatefulWidget {
diff --git a/shell/story_shell_labs/lib/main.dart b/shell/story_shell_labs/lib/main.dart
index ca7f320..1cb1391 100644
--- a/shell/story_shell_labs/lib/main.dart
+++ b/shell/story_shell_labs/lib/main.dart
@@ -27,9 +27,13 @@
runApp(
MaterialApp(
- home: Directionality(
- textDirection: TextDirection.ltr,
- child: StoryWidget(presenter: _layoutManager.presenter),
+ theme: ThemeData(fontFamily: 'RobotoMono'),
+ home: Scaffold(
+ backgroundColor: Colors.white,
+ body: Directionality(
+ textDirection: TextDirection.ltr,
+ child: StoryWidget(presenter: _layoutManager.presenter),
+ ),
),
),
);
diff --git a/shell/story_shell_labs/lib/src/widgets/story_widget.dart b/shell/story_shell_labs/lib/src/widgets/story_widget.dart
index 658fb90..3938927 100644
--- a/shell/story_shell_labs/lib/src/widgets/story_widget.dart
+++ b/shell/story_shell_labs/lib/src/widgets/story_widget.dart
@@ -93,39 +93,32 @@
@override
Widget build(BuildContext context) {
- return Offstage(
- offstage: _tilerModel.root.isEmpty,
- child: PhysicalModel(
- color: Colors.white,
- child: Stack(
- children: <Widget>[
- Positioned(
- top: 0,
- left: 0,
- right: 0,
- child: _buildStoryTitleBar(),
- ),
- Positioned(
- top: 24,
- left: 4,
- bottom: 4,
- right: 4,
- child: LayoutPresenter(
- tilerModel: _tilerModel,
- connections: _connections,
- isEditing: _isEditing,
- focusedMod: _focusedMod,
- parametersToColors: _parametersToColors,
- setTilerModel: (model) {
- setState(() {
- _tilerModel = cloneTiler(model);
- });
- },
- ),
- ),
- ],
+ return Stack(
+ children: <Widget>[
+ Positioned(
+ top: 0,
+ left: 0,
+ right: 0,
+ child: _buildStoryTitleBar(),
),
- ),
+ Positioned.fill(
+ child: Padding(
+ padding: _isEditing ? EdgeInsets.zero : const EdgeInsets.all(24.0),
+ child: LayoutPresenter(
+ tilerModel: _tilerModel,
+ connections: _connections,
+ isEditing: _isEditing,
+ focusedMod: _focusedMod,
+ parametersToColors: _parametersToColors,
+ setTilerModel: (model) {
+ setState(() {
+ _tilerModel = cloneTiler(model);
+ });
+ },
+ ),
+ ),
+ ),
+ ],
);
}
@@ -156,12 +149,11 @@
return Positioned(
left: 0,
right: 0,
- height: 84,
- bottom: 20,
+ bottom: 8,
child: Align(
alignment: Alignment.bottomCenter,
child: SizedBox(
- height: 84,
+ height: 32,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
@@ -197,7 +189,8 @@
}
}
- Widget _buildTitleBarTextButton(String title, VoidCallback onTap) => InkWell(
+ Widget _buildTitleBarTextButton(String title, VoidCallback onTap) =>
+ GestureDetector(
onTap: onTap,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
@@ -205,7 +198,6 @@
child: Text(
title,
style: const TextStyle(
- fontFamily: 'RobotoMono',
fontSize: 12,
),
),
@@ -214,38 +206,39 @@
);
Widget _buildStoryTitleBar() {
- return Material(
- color: Colors.white,
- child: _isEditing
- ? SizedBox(
- height: 36,
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- crossAxisAlignment: CrossAxisAlignment.stretch,
- mainAxisSize: MainAxisSize.max,
- children: <Widget>[
- _buildTitleBarTextButton('Cancel', _cancelEditing),
- _buildTitleBarTextButton('Done', _endEditing),
- ],
- ),
- )
- : Center(
- child: SizedBox(
- height: 24,
- width: 40,
- child: InkWell(
- onTap: _startEditing,
+ return _isEditing
+ ? SizedBox(
+ height: 36,
+ child: Row(
+ mainAxisSize: MainAxisSize.max,
+ children: <Widget>[
+ _buildTitleBarTextButton('Cancel', _cancelEditing),
+ Spacer(),
+ _buildTitleBarTextButton('Done', _endEditing),
+ ],
+ ),
+ )
+ : Center(
+ child: SizedBox(
+ height: 24,
+ child: GestureDetector(
+ onTap: _startEditing,
+ child: Container(
+ color: Colors.transparent,
+ width: 32.0,
child: Center(
- child: SizedBox(
- width: 12,
- height: 11,
+ child: Container(
+ width: 18,
+ height: 12,
+ color: Colors.black,
+ padding: EdgeInsets.all(1.0),
child: Tiler(
sizerThickness: 0,
model: cloneTiler(_tilerModel),
chromeBuilder: (BuildContext context, TileModel tile) =>
Padding(
- padding: EdgeInsets.all(0.5),
- child: Container(color: Colors.black),
+ padding: EdgeInsets.all(1.0),
+ child: Container(color: Colors.white),
),
),
),
@@ -253,6 +246,6 @@
),
),
),
- );
+ );
}
}
