Start reorganization of edition screen

The edition is done at the top of the screen,
and the card list is at the bottom and horizontal now.
A single button to remove pairs replace the remove icon
in every pair. This patch don't implement the remove pair
functionality.

2 files changed, 37 insertions, 31 deletions

diff --git a/cardlist.py b/cardlist.py
index 313e4d7..701d4f5 100644
--- a/cardlist.py
+++ b/cardlist.py
@@ -31,7 +31,7 @@ from sugar3.graphics import style
 from sugar3.graphics.icon import Icon
 
 _logger = logging.getLogger('memorize-activity')
-PAIR_SIZE = Gdk.Screen.width() / 5
+PAIR_SIZE = min(Gdk.Screen.width() / 7, Gdk.Screen.height() / 5)
 
 
 class CardList(Gtk.EventBox):
@@ -52,17 +52,17 @@ class CardList(Gtk.EventBox):
         self.pair_list_modified = False
         self.game_loaded = False
 
-        self.vbox = Gtk.VBox(False)
+        self.hbox = Gtk.HBox(False)
 
         fill_box = Gtk.Label()
         fill_box.modify_bg(Gtk.StateType.NORMAL, Gdk.color_parse('#000000'))
         fill_box.show()
-        self.vbox.pack_end(fill_box, True, True, 0)
+        self.hbox.pack_end(fill_box, True, True, 0)
 
         self._scroll = Gtk.ScrolledWindow()
         self._scroll.set_policy(Gtk.PolicyType.AUTOMATIC,
                                 Gtk.PolicyType.AUTOMATIC)
-        self._scroll.add_with_viewport(self.vbox)
+        self._scroll.add_with_viewport(self.hbox)
         self._scroll.set_border_width(0)
         self._scroll.get_child().modify_bg(Gtk.StateType.NORMAL,
                                            Gdk.color_parse('#000000'))
@@ -185,7 +185,7 @@ class CardList(Gtk.EventBox):
     def clean_list(self, button=None, load=False):
         if button is not None:
             self.current_game_key = None
-        map(lambda x: self.vbox.remove(x), self.pairs)
+        map(lambda x: self.hbox.remove(x), self.pairs)
         del self.pairs
         self.pairs = []
         if not load:
@@ -197,7 +197,7 @@ class CardList(Gtk.EventBox):
                  aimg_name=None, bimage_name=None, show=True, load=False):
         pair = CardPair(achar, bchar, aimg, bimg, asnd, bsnd, aspeak, bspeak,
                         font_name1, font_name2, aimg_name, bimage_name)
-        self.vbox.pack_end(pair, False, True, 0)
+        self.hbox.pack_end(pair, False, True, 0)
         self.pairs.append(pair)
         pair.connect('pair-selected', self.set_selected)
         pair.connect('pair-closed', self.rem_pair)
@@ -219,7 +219,7 @@ class CardList(Gtk.EventBox):
         self.model.mark_modified()
 
     def rem_pair(self, widget, event):
-        self.vbox.remove(widget)
+        self.hbox.remove(widget)
         self.pairs.remove(widget)
         del widget
         self.model.mark_modified()
@@ -276,7 +276,7 @@ class CardPair(Gtk.EventBox):
 
         self.current_game_key = None
 
-        row = Gtk.HBox()
+        row = Gtk.VBox()
         row.props.border_width = 10
         row.props.spacing = 10
 
@@ -305,7 +305,7 @@ class CardPair(Gtk.EventBox):
         align = Gtk.Alignment.new(.5, .5, 0, 0)
         align.add(self.bcard2)
         row.pack_start(align, True, True, 0)
-
+        """
         close_image = Icon(icon_name='remove',
                            icon_size=Gtk.IconSize.LARGE_TOOLBAR)
         align = Gtk.Alignment.new(.5, .5, 0, 0)
@@ -318,7 +318,7 @@ class CardPair(Gtk.EventBox):
         align = Gtk.Alignment.new(.5, 0, 0, 0)
         align.add(close_button)
         row.pack_start(align, False, False, 0)
-
+        """
         self.connect('button-press-event', self.emit_selected)
         self.modify_bg(Gtk.StateType.NORMAL, Gdk.color_parse(self.bg_color))
         self.add(row)
diff --git a/createcardpanel.py b/createcardpanel.py
index dcc00bf..586ce6b 100644
--- a/createcardpanel.py
+++ b/createcardpanel.py
@@ -43,7 +43,7 @@ import speak.widgets
 import speak.face
 
 _logger = logging.getLogger('memorize-activity')
-PAIR_SIZE = Gdk.Screen.width() / 5
+PAIR_SIZE = min(Gdk.Screen.width() / 5, Gdk.Screen.height() / 3)
 
 
 class CreateCardPanel(Gtk.EventBox):
@@ -58,7 +58,7 @@ class CreateCardPanel(Gtk.EventBox):
 
     def __init__(self):
         def make_label(icon_name, label):
-            label_box = Gtk.HBox()
+            label_box = Gtk.VBox()
             icon = Icon(icon_name=icon_name,
                         icon_size=Gtk.IconSize.LARGE_TOOLBAR)
             label_box.pack_start(icon, False, False, 0)
@@ -78,8 +78,9 @@ class CreateCardPanel(Gtk.EventBox):
 
         # save buttons
 
-        buttons_bar = Gtk.HBox()
+        buttons_bar = Gtk.VBox()
         buttons_bar.props.border_width = 10
+        buttons_bar.set_valign(Gtk.Align.CENTER)
 
         self._addbutton = ToolButton(tooltip=_('Add as new pair'),
                                      sensitive=False)
@@ -88,13 +89,20 @@ class CreateCardPanel(Gtk.EventBox):
         self._addbutton.connect('clicked', self.emit_add_pair)
         buttons_bar.pack_start(self._addbutton, False, False, 0)
 
-        self._updatebutton = ToolButton(tooltip=_('Update selected pair'),
+        self._updatebutton = ToolButton(tooltip=_('Update seleted pair'),
                                         sensitive=False)
         self._updatebutton.set_icon_widget(
             make_label('pair-update', ' ' + _('Update')))
         self._updatebutton.connect('clicked', self.emit_update_pair)
         buttons_bar.pack_start(self._updatebutton, False, False, 0)
 
+        self._removebutton = ToolButton(tooltip=_('Remove seleted pair'),
+                                        sensitive=False)
+        self._removebutton.set_icon_widget(
+            make_label('remove', ' ' + _('Remove')))
+        # self._removebutton.connect('clicked', self.emit_update_pair)
+        buttons_bar.pack_start(self._removebutton, False, False, 0)
+
         # Set card editors
 
         self.cardeditor1 = CardEditor(1)
@@ -112,11 +120,14 @@ class CreateCardPanel(Gtk.EventBox):
         # edit panel
 
         self.card_box = Gtk.HBox()
+        self.card_box.set_homogeneous(True)
+        self.cardeditor1.set_halign(Gtk.Align.CENTER)
+        self.cardeditor2.set_halign(Gtk.Align.CENTER)
         self.card_box.pack_start(self.cardeditor1, True, True, 0)
         self.card_box.pack_start(self.cardeditor2, True, True, 0)
 
-        box = Gtk.VBox()
-        box.pack_start(self.card_box, False, False, 0)
+        box = Gtk.HBox()
+        box.pack_start(self.card_box, True, True, 0)
         box.pack_start(buttons_bar, False, False, 0)
         self.add(box)
 
@@ -290,13 +301,10 @@ class CardEditor(Gtk.EventBox):
         self.editor_index = editor_index
         self.temp_folder = None
 
-        box = Gtk.VBox()
-        box.props.spacing = style.DEFAULT_SPACING
-        box.props.border_width = style.DEFAULT_SPACING
-
-        self.previewlabel = Gtk.Label(label=_('Preview:'))
-        self.previewlabel.set_alignment(0, 1)
-        box.pack_start(self.previewlabel, False, False, 0)
+        box = Gtk.Grid()
+        box.set_column_spacing(style.DEFAULT_SPACING)
+        box.set_row_spacing(style.DEFAULT_SPACING)
+        box.props.margin = style.DEFAULT_SPACING
 
         self.card = svgcard.SvgCard(
             -1, {'front_text': {'card_text': '',
@@ -305,17 +313,15 @@ class CardEditor(Gtk.EventBox):
         self.card.flip()
         card_align = Gtk.Alignment.new(.5, .5, 0, 0)
         card_align.add(self.card)
-        box.pack_start(card_align, False, False, 0)
-
-        textlabel = Gtk.Label(label=_('Text:'))
-        textlabel.set_alignment(0, 1)
-        box.pack_start(textlabel, False, False, 0)
+        box.attach(card_align, 0, 0, 1, 1)
 
         self.textentry = Gtk.Entry()
         self.textentry.connect('changed', self.update_text)
-        box.pack_start(self.textentry, False, False, 0)
+        self.textentry.set_valign(Gtk.Align.START)
+        box.attach(self.textentry, 0, 1, 1, 1)
 
-        toolbar = Gtk.HBox()
+        toolbar = Gtk.VBox()
+        toolbar.set_valign(Gtk.Align.CENTER)
 
         browsepicture = ToolButton(icon_name='import_picture',
                                    tooltip=_('Insert picture'))
@@ -340,7 +346,7 @@ class CardEditor(Gtk.EventBox):
         toolbar.add(self.fontbutton)
         self.id_font_changed = self.fontbutton.connect(
             'changed', self.__font_changed_cb)
-        box.pack_start(toolbar, True, True, 0)
+        box.attach(toolbar, 1, 0, 1, 2)
 
         self.add(box)