commit 2657862e8a0a73b7d2ff412bb4f1d1576015f72c
author Misha Dynin <dynin@google.com> Wed Nov 11 18:36:13 2015 -0800
committer Misha Dynin <dynin@google.com> Fri Nov 13 18:20:02 2015 +0000
tree 4a27924e96a0d1a3bfad9f2eaee99debe40dadc0
parent b00486f17c0085f9793a607770573ecd56d2287c

In the Slideshow view, use thumbnails of previous and next slides
for navigation.  If the previous/next slides are missing, display
a placeholder.

Change-Id: I6aa0bf9c041962915e5a4e5b9956cce5a8396074

dart/lib/components/slideshow.dart

diff --git a/dart/lib/components/slideshow.dart b/dart/lib/components/slideshow.dart
index 1c48abc..284a6f8 100644
--- a/dart/lib/components/slideshow.dart
+++ b/dart/lib/components/slideshow.dart
@@ -9,6 +9,7 @@
 
 import '../models/all.dart' as model;
 import '../stores/store.dart';
+import '../styles/common.dart' as style;
 
 class SlideshowPage extends StatelessComponent {
   final String deckId;
@@ -75,18 +76,38 @@
     var slideData = _slides[_currSlideNum];
     var image = new RawImage(
         bytes: new Uint8List.fromList(slideData.image), fit: ImageFit.contain);
+    var navWidgets = [
+      _buildSlideNav(_currSlideNum - 1),
+      _buildSlideNav(_currSlideNum + 1)
+    ];
 
-    return new Block([
-      image,
-      new Text(_currSlideNum.toString()),
-      new Row([
-        new FlatButton(child: new Text("Prev"), onPressed: () {
-          _store.setCurrSlideNum(config.deckId, _currSlideNum - 1);
-        }),
-        new FlatButton(child: new Text("Next"), onPressed: () {
-          _store.setCurrSlideNum(config.deckId, _currSlideNum + 1);
-        })
-      ])
-    ]);
+    return new Block(
+        [image, new Text(_currSlideNum.toString()), new Row(navWidgets)]);
   }
+
+  Widget _buildSlideNav(int slideNum) {
+    var card;
+
+    if (slideNum >= 0 && slideNum < _slides.length) {
+      card = _buildThumbnailNav(_slides[slideNum], onTap: () {
+        _store.setCurrSlideNum(config.deckId, slideNum);
+      });
+    } else {
+      card = new Container(
+          width: style.Size.thumbnailNavWidth,
+          height: style.Size.thumbnailNavHeight);
+    }
+    // TODO(dynin): overlay 'Previous' / 'Next' text
+
+    return new Container(child: card, margin: style.Spacing.thumbnailNavMargin);
+  }
+}
+
+Widget _buildThumbnailNav(model.Slide slideData, {Function onTap}) {
+  var thumbnail = new RawImage(
+      height: style.Size.thumbnailNavHeight,
+      bytes: new Uint8List.fromList(slideData.image),
+      fit: ImageFit.cover);
+
+  return new InkWell(child: thumbnail, onTap: onTap);
 }

dart/lib/styles/common.dart

diff --git a/dart/lib/styles/common.dart b/dart/lib/styles/common.dart
index 41c0a7e..105af9a 100644
--- a/dart/lib/styles/common.dart
+++ b/dart/lib/styles/common.dart
@@ -14,10 +14,13 @@
 class Size {
   static const double thumbnailWidth = 250.0;
   static const double listHeight = 150.0;
+  static const double thumbnailNavHeight = 150.0;
+  static const double thumbnailNavWidth = 267.0;
 }
 
 class Spacing {
   static final EdgeDims normalPadding = new EdgeDims.all(10.0);
   static final EdgeDims normalMargin = new EdgeDims.all(2.0);
   static final EdgeDims listItemMargin = new EdgeDims.TRBL(3.0, 6.0, 0.0, 6.0);
+  static final EdgeDims thumbnailNavMargin = new EdgeDims.all(3.0);
 }