UI|Home|Client: Working on the new Home UI

Added GameDrawerButton as a concrete DrawerButton that shows the
information of a single game.

Work in progress.

doomsday/apps/client/include/ui/home/columnwidget.h

@@ -34,6 +34,8 @@ class ColumnWidget : public de::GuiWidget
 public:
     ColumnWidget(de::String const &name = "");
 
+    void setBackgroundImage(de::Image const &image);
+
     de::ScrollAreaWidget &scrollArea();
     de::Rule const &maximumContentWidth() const;
 

doomsday/apps/client/include/ui/home/drawerbuttonwidget.h

@@ -19,7 +19,9 @@
 #ifndef DENG_CLIENT_UI_DRAWERBUTTONWIDGET_H
 #define DENG_CLIENT_UI_DRAWERBUTTONWIDGET_H
 
-#include <de/GuiWidget>
+#include <de/LabelWidget>
+#include <de/ButtonWidget>
+#include <de/PanelWidget>
 
 /**
  * Button with an extensible drawer.
@@ -29,6 +31,10 @@ class DrawerButtonWidget : public de::GuiWidget
 public:
     DrawerButtonWidget();
 
+    de::LabelWidget &icon();
+    de::LabelWidget &label();
+    de::PanelWidget &drawer();
+
 private:
     DENG2_PRIVATE(d)
 };

doomsday/apps/client/include/ui/home/gamecolumnwidget.h

@@ -24,10 +24,7 @@
 class GameColumnWidget : public ColumnWidget
 {
 public:
-    GameColumnWidget(de::String const &name,
-                     de::String const &author,
-                     de::String const &gameTitle,
-                     de::DotPath const &logoId);
+    GameColumnWidget(de::String const &gameFamily);
 
     void setHighlighted(bool highlighted) override;
 

doomsday/apps/client/include/ui/home/gamedrawerbutton.h

@@ -0,0 +1,38 @@
+/** @file gamedrawerbutton.h  Drawer button for games.
+ *
+ * @authors Copyright (c) 2016 Jaakko Keränen <jaakko.keranen@iki.fi>
+ *
+ * @par License
+ * GPL: http://www.gnu.org/licenses/gpl.html
+ *
+ * <small>This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by the
+ * Free Software Foundation; either version 2 of the License, or (at your
+ * option) any later version. This program is distributed in the hope that it
+ * will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty
+ * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+ * Public License for more details. You should have received a copy of the GNU
+ * General Public License along with this program; if not, see:
+ * http://www.gnu.org/licenses</small>
+ */
+
+#ifndef DENG_CLIENT_UI_HOME_GAMEDRAWERBUTTON_H
+#define DENG_CLIENT_UI_HOME_GAMEDRAWERBUTTON_H
+
+#include "drawerbuttonwidget.h"
+
+#include <doomsday/game.h>
+
+/**
+ * Drawer button for a particular game. Also shows the list of saved games.
+ */
+class GameDrawerButton : public DrawerButtonWidget
+{
+public:
+    GameDrawerButton(Game const &game);
+
+private:
+    DENG2_PRIVATE(d)
+};
+
+#endif // DENG_CLIENT_UI_HOME_GAMEDRAWERBUTTON_H

doomsday/apps/client/include/ui/home/headerwidget.h

@@ -34,6 +34,7 @@ class HeaderWidget : public de::GuiWidget
     de::LabelWidget &info();
 
     void setLogoImage(de::DotPath const &imageId);
+    void setLogoBackground(de::DotPath const &imageId);
 
 private:
     DENG2_PRIVATE(d)

doomsday/apps/client/net.dengine.client.pack/defaultstyle.pack/images.dei

@@ -21,13 +21,13 @@ logo {
     }
 
     game {
-        image libdoom    { path = "graphics/game-libdoom.png" }
-        image libheretic { path = "graphics/game-libheretic.png" }
-        image libhexen   { path = "graphics/game-libhexen.png" }
+        image libdoom    { path = "graphics/doom/icon-small.png" }
+        image libheretic { path = "graphics/heretic/icon-small.png" }
+        image libhexen   { path = "graphics/hexen/icon-small.png" }
 
-        image doom    { path = "graphics/logo-doom.png" }
-        image heretic { path = "graphics/logo-heretic.png" }
-        image hexen   { path = "graphics/logo-hexen.png" }
+        image doom    { path = "graphics/doom/logo.png" }
+        image heretic { path = "graphics/heretic/logo.png" }
+        image hexen   { path = "graphics/hexen/logo.png" }
     }
 }
 
@@ -63,3 +63,12 @@ progress {
     image gear  { path = "graphics/progress-gear.png" }
     image mini  { path = "graphics/progress-mini.png" }
 }
+
+# Home:
+home {
+    background {
+        image doom    { path = "graphics/doom/background.jpg" }
+        image heretic { path = "graphics/heretic/background.jpg" }
+        image hexen   { path = "graphics/hexen/background.jpg" }
+    }
+}

doomsday/apps/client/src/ui/home/columnwidget.cpp

@@ -31,17 +31,19 @@ DENG_GUI_PIMPL(ColumnWidget)
     bool highlighted;
     LabelWidget *back;
     ScrollAreaWidget *scrollArea;
-    Vector4f bgColor;
+    //Vector4f bgColor;
     Rule const *maxContentWidth = nullptr;
 
     Instance(Public *i) : Base(i)
     {
         back = new LabelWidget;
+        back->margins().setZero();
+
         scrollArea = new ScrollAreaWidget;
 
-        QColor bg;
-        bg.setHsvF(de::frand(), .9, .5);
-        bgColor = Vector4f(bg.redF(), bg.greenF(), bg.blueF(), 1);
+        //QColor bg;
+        //bg.setHsvF(de::frand(), .9, .5);
+        //bgColor = Vector4f(bg.redF(), bg.greenF(), bg.blueF(), 1);
     }
 
     ~Instance()
@@ -61,11 +63,20 @@ ColumnWidget::ColumnWidget(String const &name)
             .setLeft(contentMargin)
             .setRight(contentMargin);
 
-    d->scrollArea->rule().setRect(rule());
     d->back->rule().setRect(rule());
+    d->scrollArea->rule().setRect(rule());
 
     add(d->back);
     add(d->scrollArea);
+
+    setBackgroundImage(style().images().image("window.background"));
+}
+
+void ColumnWidget::setBackgroundImage(Image const &image)
+{
+    d->back->setImage(image);
+    d->back->setImageFit(ui::FitToSize);
+    d->back->setSizePolicy(ui::Filled, ui::Filled);
 }
 
 ScrollAreaWidget &ColumnWidget::scrollArea()
@@ -82,8 +93,8 @@ void ColumnWidget::setHighlighted(bool highlighted)
 {
     d->highlighted = highlighted;
 
-    d->back->set(Background(highlighted? d->bgColor :
-                                         (d->bgColor * Vector4f(.5f, .5f, .5f, 1.f))));
+/*    d->back->set(Background(highlighted? d->bgColor :
+                                         (d->bgColor * Vector4f(.5f, .5f, .5f, 1.f))));*/
 }
 
 bool ColumnWidget::dispatchEvent(Event const &event, bool (Widget::*memberFunc)(Event const &))

doomsday/apps/client/src/ui/home/drawerbuttonwidget.cpp

@@ -18,14 +18,65 @@
 
 #include "ui/home/drawerbuttonwidget.h"
 
+#include <de/PanelWidget>
+#include <de/ButtonWidget>
+
 using namespace de;
 
 DENG_GUI_PIMPL(DrawerButtonWidget)
 {
+    LabelWidget *icon;
+    LabelWidget *label;
+    PanelWidget *drawer;
+    QList<ButtonWidget *> buttons;
+
     Instance(Public *i) : Base(i)
-    {}
+    {
+        self.add(icon  = new LabelWidget);
+        self.add(label = new LabelWidget);
+        self.add(drawer = new PanelWidget);
+
+        label->setSizePolicy(ui::Fixed, ui::Expand);
+        label->setTextLineAlignment(ui::AlignLeft);
+        label->setAlignment(ui::AlignLeft);
+
+        icon->set(Background(style().colors().colorf("text")));
+    }
 };
 
 DrawerButtonWidget::DrawerButtonWidget()
     : d(new Instance(this))
-{}
+{
+    AutoRef<Rule> iconSize(new ConstantRule(2 * 50));
+
+    d->icon->rule()
+            .setSize(iconSize, iconSize)
+            .setInput(Rule::Left, rule().left())
+            .setInput(Rule::Top,  rule().top());
+
+    d->label->rule()
+            .setInput(Rule::Top,   rule().top())
+            .setInput(Rule::Left,  d->icon->rule().right())
+            .setInput(Rule::Right, rule().right()); // adjust when buttons added
+
+    d->drawer->rule()
+            .setInput(Rule::Top,  d->label->rule().bottom())
+            .setInput(Rule::Left, rule().left());
+
+    rule().setInput(Rule::Height, d->label->rule().height());
+}
+
+LabelWidget &DrawerButtonWidget::icon()
+{
+    return *d->icon;
+}
+
+LabelWidget &DrawerButtonWidget::label()
+{
+    return *d->label;
+}
+
+PanelWidget &DrawerButtonWidget::drawer()
+{
+    return *d->drawer;
+}