Show no image message with an add button

Signed-off-by: Agustin Zubiaga <aguz@sugarlabs.org>

2 files changed, 76 insertions, 4 deletions

diff --git a/ImageViewerActivity.py b/ImageViewerActivity.py
index 4a09dd0..a4911a7 100644
--- a/ImageViewerActivity.py
+++ b/ImageViewerActivity.py
@@ -35,8 +35,10 @@ from sugar3.graphics.objectchooser import ObjectChooser
 from sugar3 import mime
 from sugar3.graphics.toolbutton import ToolButton
 from sugar3.graphics.toolbarbox import ToolbarBox
+from sugar3.graphics.icon import Icon
 from sugar3.activity.widgets import ActivityToolbarButton
 from sugar3.activity.widgets import StopButton
+from sugar3.graphics import style
 
 from sugar3 import network
 from sugar3.datastore import datastore
@@ -119,13 +121,57 @@ class ImageViewerActivity(activity.Activity):
         self.sw = Gtk.ScrolledWindow(hadj, vadj)
         self.view.parent = self.sw
 
+        notebook = Gtk.Notebook()
+        notebook.set_show_tabs(False)
+
+        if not handle.object_id:
+            empty_widgets = Gtk.EventBox()
+            empty_widgets.modify_bg(Gtk.StateType.NORMAL,
+                                    style.COLOR_WHITE.get_gdk_color())
+
+            vbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+            mvbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
+            vbox.pack_start(mvbox, True, False, 0)
+
+            image_icon = Icon(pixel_size=style.LARGE_ICON_SIZE,
+                              icon_name='imageviewer',
+                              stroke_color=style.COLOR_BUTTON_GREY.get_svg(),
+                              fill_color=style.COLOR_TRANSPARENT.get_svg())
+            mvbox.pack_start(image_icon, False, False, style.DEFAULT_PADDING)
+
+            label = Gtk.Label('<span foreground="%s"><b>%s</b></span>' %
+                              (style.COLOR_BUTTON_GREY.get_html(),
+                              _('No image')))
+            label.set_use_markup(True)
+            mvbox.pack_start(label, False, False, style.DEFAULT_PADDING)
+
+            hbox = Gtk.Box()
+            open_image_btn = Gtk.Button()
+            open_image_btn.connect('clicked', self._show_picker_cb, notebook)
+            add_image = Gtk.Image.new_from_stock(Gtk.STOCK_ADD,
+                                                 Gtk.IconSize.BUTTON)
+            buttonbox = Gtk.Box()
+            buttonbox.pack_start(add_image, False, True, 0)
+            buttonbox.pack_end(Gtk.Label(_('Choose an image')), True, True, 5)
+            open_image_btn.add(buttonbox)
+            hbox.pack_start(open_image_btn, True, False, 0)
+            mvbox.pack_start(hbox, False, False, style.DEFAULT_PADDING)
+
+            empty_widgets.add(vbox)
+            vbox.show_all()
+
+            notebook.append_page(empty_widgets, None)
+            empty_widgets.show_all()
+
         self.sw.set_policy(Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC)
         self.sw.add_with_viewport(self.view)
         # Avoid needless spacing
         self.view.parent.props.shadow_type = Gtk.ShadowType.NONE
 
-        self.set_canvas(self.sw)
-        self.sw.show_all()
+        notebook.append_page(self.sw, None)
+
+        self.set_canvas(notebook)
+        notebook.show_all()
 
         self.unused_download_tubes = set()
         self._want_document = True
@@ -150,7 +196,7 @@ class ImageViewerActivity(activity.Activity):
                 self.connect("joined", self._joined_cb)
         elif self._object_id is None:
             self._show_object_picker = GObject.timeout_add(1000, \
-                self._show_picker_cb)
+                self._show_picker_cb, notebook)
 
     def handle_view_source(self):
         raise NotImplementedError
@@ -256,7 +302,7 @@ class ImageViewerActivity(activity.Activity):
     def __fullscreen_cb(self, button):
         self.fullscreen()
 
-    def _show_picker_cb(self):
+    def _show_picker_cb(self, *args):
         if not self._want_document:
             return
 
@@ -269,6 +315,7 @@ class ImageViewerActivity(activity.Activity):
                 jobject = chooser.get_selected_object()
                 if jobject and jobject.file_path:
                     self.read_file(jobject.file_path)
+                args[-1].set_current_page(-1)
         finally:
             chooser.destroy()
             del chooser
diff --git a/icons/imageviewer.svg b/icons/imageviewer.svg
new file mode 100644
index 0000000..828de58
--- /dev/null
+++ b/icons/imageviewer.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd' [
+	<!ENTITY stroke_color "#010101">
+	<!ENTITY fill_color "#ffffff">
+]><svg height="50" id="svg2" inkscape:version="0.48.2 r9819" sodipodi:docname="image.svg" version="1.1" width="50" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg">
+  <metadata id="metadata26">
+    <rdf:RDF>
+      <cc:Work rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+        <dc:title/>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs id="defs24"/>
+  <sodipodi:namedview bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" id="namedview22" inkscape:current-layer="svg2" inkscape:cx="25" inkscape:cy="25" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="541" inkscape:window-maximized="1" inkscape:window-width="1024" inkscape:window-x="0" inkscape:window-y="27" inkscape:zoom="4.72" objecttolerance="10" pagecolor="#ffffff" showgrid="false"/>
+  <rect height="36" id="rect4" style="fill:&fill_color;;stroke:&stroke_color;;stroke-width:3" width="44" x="3" y="7"/>
+  <polyline id="polyline6" points="15,7 25,1 35,7" style="fill:none;;stroke:&stroke_color;;stroke-width:1.25"/>
+  <circle cx="14" cy="19" id="circle8" r="4.5" style="fill:&stroke_color;;stroke:&stroke_color;;stroke-width:1.5"/>
+  <polyline id="polyline10" points="3,36 16,32 26,35" style="fill:none;;stroke:&stroke_color;;stroke-width:2.5"/>
+  <polyline id="polyline12" points="15,43 37,28 47,34 47,43" style="fill:&stroke_color;;stroke:&stroke_color;;stroke-width:3"/>
+  <polyline id="polyline14" points="22,41.5 35,30 27,41.5" style="fill:&fill_color;;stroke:none;;stroke-width:0"/>
+  <polyline id="polyline16" points="26,23 28,25 30,23" style="fill:none;;stroke:&stroke_color;;stroke-width:.9"/>
+  <polyline id="polyline18" points="31.2,20 33.5,17.7 35.8,20" style="fill:none;;stroke:&stroke_color;;stroke-width:1"/>
+  <polyline id="polyline20" points="36,13 38.5,15.5 41,13" style="fill:none;;stroke:&stroke_color;;stroke-width:1"/>
+</svg>
\ No newline at end of file