[story_shell_labs] focused mod color mode
When in editing mode, mod borders and layout suggestions use currently focused mod to set color.
Focused mod is colored in pink, the others in black.
MI4-2428 #done
Change-Id: Ie72dc50058a598ed9d4e17ecd3c99e0e00d3818a
diff --git a/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_suggestions_widget.dart b/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_suggestions_widget.dart
index df7a06d..fa95b93 100644
--- a/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_suggestions_widget.dart
+++ b/public/dart/story_shell_labs/lib/src/layout/tile_presenter/tile_presenter_suggestions_widget.dart
@@ -15,8 +15,8 @@
/// Presenter for a tile.
final TilePresenter presenter;
- /// Returns border color for a given surface id.
- final Color Function(String modName) colorForMod;
+ /// Value notifier with name of currently focused mod
+ final ValueNotifier<String> focusedMod;
/// Called when a suggestion is selected.
final void Function(TilerModel) onSelect;
@@ -25,7 +25,7 @@
const LayoutSuggestionsWidget({
@required this.presenter,
@required this.onSelect,
- @required this.colorForMod,
+ @required this.focusedMod,
});
@override
@@ -59,12 +59,16 @@
sizerThickness: 0,
model: model,
chromeBuilder: (BuildContext context, TileModel tile) {
- return Padding(
- padding: EdgeInsets.all(1),
- child: Container(
- color: colorForMod(tile.content.modName),
- ),
- );
+ return AnimatedBuilder(
+ animation: focusedMod,
+ builder: (_, __) {
+ return Container(
+ margin: EdgeInsets.all(1),
+ color: focusedMod.value == tile.content.modName
+ ? Color(0xFFFF8BCB)
+ : Colors.black,
+ );
+ });
},
),
),
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 37eb5ef..1e3dd3c 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
@@ -33,21 +33,17 @@
/// Maps a surface id to the view.
final BuiltMap<String, ChildViewConnection> connections;
- /// Border color for the mod.
- final Color Function(String modName) colorForMod;
-
/// Maps a parameter id to a color.
final Map<String, Color> parametersToColors;
/// Currently focused mod.
- final ValueNotifier focusedMod;
+ final ValueNotifier<String> focusedMod;
/// Constructor for a tiling layout presenter.
const LayoutPresenter({
@required this.tilerModel,
@required this.isEditing,
@required this.connections,
- @required this.colorForMod,
@required this.parametersToColors,
@required this.focusedMod,
});
@@ -141,7 +137,6 @@
return LayoutBuilder(
builder: (context, constraints) => EditingTileChrome(
focusedMod: focusedMod,
- borderColor: colorForMod(modName),
parameterColors:
content.parameters.map((p) => parametersToColors[p]),
tilerModel: tilerModel,
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 4d67842..575555a 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
@@ -19,7 +19,6 @@
/// Constructor for a tiling layout presenter.
const EditingTileChrome({
@required this.focusedMod,
- @required this.borderColor,
@required this.parameterColors,
@required this.tilerModel,
@required this.tile,
@@ -29,10 +28,7 @@
});
/// Currently focused mod.
- final ValueNotifier focusedMod;
-
- /// Chrome border color.
- final Color borderColor;
+ final ValueNotifier<String> focusedMod;
/// Intent parameter circle colors.
final Iterable<Color> parameterColors;
@@ -76,13 +72,19 @@
data: widget.tile,
feedback: _buildFeedback(),
childWhenDragging: _kTilePlaceholderWhenDragging,
- child: Container(
- decoration: BoxDecoration(
- border: Border.all(
- color: widget.borderColor,
- width: _kBorderWidth,
- ),
- ),
+ child: AnimatedBuilder(
+ animation: widget.focusedMod,
+ builder: (_, child) => Container(
+ decoration: BoxDecoration(
+ border: Border.all(
+ color: widget.focusedMod.value == widget.modName
+ ? Color(0xFFFF8BCB)
+ : Colors.black,
+ width: _kBorderWidth,
+ ),
+ ),
+ child: child,
+ ),
child: Stack(
children: [widget.childView]
..addAll(_buildSplitTargets(widget.editingSize)),
@@ -110,7 +112,7 @@
child: Container(
decoration: BoxDecoration(
border: Border.all(
- color: widget.borderColor,
+ color: Color(0xFFFF8BCB),
width: _kHighlightedBorderWidth,
),
),
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 84cd0bd..591c67e 100644
--- a/shell/story_shell_labs/lib/src/widgets/story_widget.dart
+++ b/shell/story_shell_labs/lib/src/widgets/story_widget.dart
@@ -38,9 +38,8 @@
StreamSubscription _tilerUpdateListener;
bool _isEditing = false;
OverlayEntry _layoutSuggestionsOverlay;
- Map<String, Color> _modNamesToColors;
Map<String, Color> _parametersToColors;
- final ValueNotifier _focusedMod = ValueNotifier(null);
+ final ValueNotifier _focusedMod = ValueNotifier<String>(null);
@override
void initState() {
@@ -66,10 +65,6 @@
update ??= widget.presenter.currentState;
_tilerModel = update.model;
_connections = update.connections;
- _modNamesToColors = _mapFromKeysAndCircularValues(
- _connections.keys,
- _kColors,
- );
_parametersToColors = _mapFromKeysAndCircularValues(
_allParametersInModel(_tilerModel),
_kColors,
@@ -113,15 +108,12 @@
left: 4,
bottom: 4,
right: 4,
- child: _layoutSuggestionColorModeBuilder(
- (colorForMod) => LayoutPresenter(
- tilerModel: _tilerModel,
- connections: _connections,
- isEditing: _isEditing,
- focusedMod: _focusedMod,
- colorForMod: colorForMod,
- parametersToColors: _parametersToColors,
- ),
+ child: LayoutPresenter(
+ tilerModel: _tilerModel,
+ connections: _connections,
+ isEditing: _isEditing,
+ focusedMod: _focusedMod,
+ parametersToColors: _parametersToColors,
),
),
],
@@ -163,16 +155,14 @@
alignment: Alignment.bottomCenter,
child: SizedBox(
height: 84,
- child: _layoutSuggestionColorModeBuilder(
- (colorForMod) => LayoutSuggestionsWidget(
- presenter: widget.presenter,
- colorForMod: colorForMod,
- onSelect: (model) {
- setState(() {
- _tilerModel = model;
- });
- },
- ),
+ child: LayoutSuggestionsWidget(
+ presenter: widget.presenter,
+ focusedMod: _focusedMod,
+ onSelect: (model) {
+ setState(() {
+ _tilerModel = model;
+ });
+ },
),
),
),
@@ -189,11 +179,6 @@
}
}
- Widget _layoutSuggestionColorModeBuilder(
- Widget Function(Color Function(String) colorForMod) builder,
- ) =>
- builder((modName) => _modNamesToColors[modName]);
-
Widget _buildTitleBarTextButton(String title, VoidCallback onTap) => InkWell(
onTap: onTap,
child: Padding(
