Moved ticks to a separate class, and added hover over effect to the r…

…ewards

kano_profile_gui/ProgressDot.py

@@ -45,19 +45,30 @@ def __init__(self, filled=False, color="orange"):
 
         tick_background = Gtk.EventBox()
         tick_background.get_style_context().add_class("transparent")
-        self._tick = Gtk.Image()
-        tick_background.add(self._tick)
-        self.put(tick_background, 10, 0)
-        tick_file = os.path.join(
-            image_dir, "quests/{}-tick-stylised.svg".format(color)
-        )
+        self.put(tick_background, 5, 0)
 
         if filled:
-            tick_pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(
-                tick_file, 50, 50
-            )
-            self._tick.set_from_pixbuf(tick_pixbuf)
+            self._tick = Tick(50, 50)
+            tick_background.add(self._tick)
 
     @property
     def tick(self):
         return self._tick
+
+
+class Tick(Gtk.Image):
+    def __init__(self, width, height, color="orange", bold=True):
+        Gtk.Image.__init__(self)
+
+        if bold:
+            tick_file = os.path.join(
+                image_dir, "quests/{}-tick.svg".format(color)
+            )
+        else:
+            tick_file = os.path.join(
+                image_dir, "quests/{}-tick-stylised.svg".format(color)
+            )
+        pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(
+            tick_file, width, height
+        )
+        self.set_from_pixbuf(pixbuf)

kano_profile_gui/QuestInfo.py

@@ -133,70 +133,16 @@ def create_reward_section(self):
     def create_reward(self, title, icon):
         return RewardItem(title, icon)
 
-    # Currently not used
-    '''
-    def create_quest_description(self):
-        sw = ScrolledWindow()
-        sw.apply_styling_to_widget()
-        sw.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC)
-        sw.set_size_request(200, 150)
-        sw.get_style_context().add_class("quest_section")
-
-        desc_background = Gtk.EventBox()
-        desc_background.set_margin_top(10)
-        desc_background.set_margin_left(10)
-        sw.add(desc_background)
-
-        title_label = Gtk.Label("Quest Info")
-        title_label.get_style_context().add_class("quest_info_title")
-        title_label.set_alignment(xalign=0, yalign=0.5)
-
-        desc_label = Gtk.Label(self.quest._description)
-        desc_label.get_style_context().add_class("quest_info_description")
-        desc_label.set_alignment(xalign=0, yalign=0)
-        desc_label.set_line_wrap(True)
-
-        vbox = Gtk.Box(orientation=Gtk.Orientation.VERTICAL)
-        desc_background.add(vbox)
-
-        vbox.pack_start(title_label, False, False, 0)
-        vbox.pack_start(desc_label, False, False, 0)
-
-        return sw
-
-    def _create_bottom_navigation_bar(self):
-        navigation_bar = Gtk.EventBox()
-        navigation_bar.get_style_context().add_class("quest_section")
-        bottom_bar = Gtk.ButtonBox()
-        navigation_bar.add(bottom_bar)
-
-        # Do we show these and navigate between the quests this way?
-        self.next_button = create_navigation_button(_("Next page").upper(),
-                                                    "next")
-        # self.next_button.connect("clicked", self._load_page_wrapper, 1)
-
-        self.prev_button = create_navigation_button(_("Previous").upper(),
-                                                    "previous")
-        # self.prev_button.connect("clicked", self._load_page_wrapper, -1)
-
-        quest_button = create_navigation_button(_("Back to quests").upper(),
-                                                "middle")
-
-        bottom_bar.pack_start(self.prev_button, False, False, 0)
-        bottom_bar.pack_start(quest_button, False, False, 0)
-        bottom_bar.pack_end(self.next_button, False, False, 0)
-
-        return navigation_bar
-    '''
-
 
 class RewardItem(Gtk.EventBox):
+    width = 190
     height = 140
-    width = 140
+    img_width = 100
+    img_height = 100
 
     def __init__(self, title, path):
         Gtk.EventBox.__init__(self)
-        self.set_size_request(self.height, self.width)
+        self.set_size_request(self.width, self.height)
         self.connect("enter-notify-event", self.hover_over_effect)
         self.connect("leave-notify-event", self.remove_hover_over)
         self.title = title
@@ -207,17 +153,21 @@ def __init__(self, title, path):
         self.fixed.add(vbox)
 
         if path and os.path.exists(path):
-            img_height = self.height - 40
-            img_width = self.width - 40
             pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(
-                path, img_height, img_width
+                path, self.img_height, self.img_width
             )
+
+            margin_top = (self.height - self.img_height) / 2
+            margin_bottom = margin_top
+            margin_left = (self.width - self.img_width) / 2
+            margin_right = margin_left
+
             image = Gtk.Image.new_from_pixbuf(pixbuf)
-            image.set_margin_top(20)
-            image.set_margin_bottom(20)
-            image.set_margin_right(20)
-            image.set_margin_left(20)
-            vbox.pack_start(image, False, False, 5)
+            image.set_margin_top(margin_top)
+            image.set_margin_bottom(margin_bottom)
+            image.set_margin_right(margin_right)
+            image.set_margin_left(margin_left)
+            vbox.pack_start(image, False, False, 0)
 
     def hover_over_effect(self, widget, event):
         label = Gtk.Label(self.title)

kano_profile_gui/QuestList.py

@@ -13,6 +13,7 @@
 from kano_profile_gui.paths import css_dir
 from kano.gtk3.apply_styles import apply_styling_to_screen
 from kano_profile_gui.QuestInfo import QuestInfo
+from kano_profile_gui.ProgressDot import Tick
 
 
 class QuestList(Gtk.EventBox):
@@ -104,18 +105,37 @@ def __init__(self, win, quest_info):
 
         # Get text for the reward_list_widget
         reward_text = "Rewards: "
-        rewards_box = Gtk.Box()
-        rewards_box.set_margin_right(20)
+        tick_box = Gtk.Box()
+        tick_box.set_margin_right(30)
 
         for reward in self.quest_info.rewards:
             reward_text += reward.title
 
             if not reward == self.quest_info.rewards[-1]:
                 reward_text += ", "
 
-            reward_pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(reward.icon, 60, 60)
-            reward_image = Gtk.Image.new_from_pixbuf(reward_pixbuf)
-            rewards_box.pack_start(reward_image, False, False, 5)
+            # reward_pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(reward.icon, 60, 60)
+            # reward_image = Gtk.Image.new_from_pixbuf(reward_pixbuf)
+            # rewards_box.pack_start(reward_image, False, False, 5)
+
+        tick_width = 30
+        tick_height = 30
+        for step in self.quest_info.steps:
+
+            # If the whole quest has been completed,
+            # make all the ticks gold
+            if self.quest_info.is_completed():
+                tick = Tick(width=tick_width, height=tick_height, color="gold")
+
+            # If the individual step has been completed,
+            # make all tick orange
+            elif step.is_fulfilled():
+                tick = Tick(width=tick_width, height=tick_height, color="orange")
+
+            # uncompleted steps should have a grey tick
+            else:
+                tick = Tick(width=tick_width, height=tick_height, color="grey")
+            tick_box.pack_start(tick, False, False, 5)
 
         self.reward_list_label = Gtk.Label(reward_text)
         self.reward_list_label.set_alignment(xalign=0, yalign=0)
@@ -136,7 +156,7 @@ def __init__(self, win, quest_info):
         else:
             self.connect("button-release-event", self.go_to_quest_info)
 
-        hbox.pack_end(rewards_box, False, False, 0)
+        hbox.pack_end(tick_box, False, False, 0)
 
     def hover_over_effect(self, widget, event, hover):