Fix window buttons

- Fixed regression introduced in f4c6c92dab81ba11e5e17f0987f6117e9af1d215
- Removed SkinButton template

data/themes/default/theme.xml

@@ -407,15 +407,36 @@
             <text color="window_titlebar_text" align="left middle" />
         </style>
         <style id="window_button">
+            <background color="window_titlebar_face" />
+	    <newlayer />
             <background part="window_button_normal" align="center middle" />
             <background part="window_button_hot" state="mouse" align="center middle" />
             <background part="window_button_selected" state="selected" align="center middle" />
         </style>
         <style id="window_close_button" extends="window_button" margin-top="3" margin-right="3">
+            <newlayer />
             <icon part="window_close_icon" color="button_normal_text" />
             <icon part="window_close_icon" color="button_hot_text" state="mouse" />
             <icon part="window_close_icon" color="button_selected_text" state="selected" />
         </style>
+        <style id="window_center_button" extends="window_button" margin-top="3" margin-right="2">
+            <newlayer />
+            <icon part="window_center_icon" color="button_normal_text" />
+            <icon part="window_center_icon" color="button_hot_text" state="mouse" />
+            <icon part="window_center_icon" color="button_selected_text" state="selected" />
+        </style>
+        <style id="window_play_button" extends="window_button" margin-top="3" margin-right="2">
+            <newlayer />
+            <icon part="window_play_icon" color="button_normal_text" />
+            <icon part="window_play_icon" color="button_hot_text" state="mouse" />
+            <icon part="window_play_icon" color="button_selected_text" state="selected" />
+        </style>
+        <style id="window_stop_button" extends="window_button" margin-top="3" margin-right="2">
+            <newlayer />
+            <icon part="window_stop_icon" color="button_normal_text" />
+            <icon part="window_stop_icon" color="button_hot_text" state="mouse" />
+            <icon part="window_stop_icon" color="button_selected_text" state="selected" />
+        </style>
         <style id="popup_window">
             <background color="window_face" />
             <border part="menu" />
@@ -849,6 +870,8 @@
             <background part="timeline_loop_range" />
         </style>
         <style id="timeline_switch_band_button" extends="window_button">
+            <background color="none" />
+            <newlayer />
             <icon part="window_center_icon" color="button_normal_text" />
             <icon part="window_center_icon" color="button_hot_text" state="mouse" />
             <icon part="window_center_icon" color="button_selected_text" state="selected" />

src/app/ui/preview_editor.cpp

@@ -21,7 +21,6 @@
 #include "app/ui/editor/editor_customization_delegate.h"
 #include "app/ui/editor/editor_view.h"
 #include "app/ui/editor/navigate_state.h"
-#include "app/ui/skin/skin_button.h"
 #include "app/ui/skin/skin_theme.h"
 #include "app/ui/status_bar.h"
 #include "app/ui/toolbar.h"
@@ -42,17 +41,12 @@ namespace app {
 using namespace app::skin;
 using namespace ui;
 
-class MiniCenterButton : public SkinButton<CheckBox> {
+class MiniCenterButton : public CheckBox {
 public:
-  MiniCenterButton()
+  MiniCenterButton() : CheckBox("") {
-    : SkinButton<CheckBox>(
-      SkinTheme::instance()->parts.windowButtonNormal(),
-      SkinTheme::instance()->parts.windowButtonHot(),
-      SkinTheme::instance()->parts.windowButtonSelected(),
-      SkinTheme::instance()->parts.windowCenterIcon())
-  {
     setDecorative(true);
     setSelected(true);
+    setStyle(SkinTheme::instance()->styles.windowCenterButton());
   }
 
 protected:
@@ -60,22 +54,22 @@ protected:
     SkinTheme* theme = static_cast<SkinTheme*>(this->theme());
     Widget* window = parent();
     gfx::Rect rect(0, 0, 0, 0);
-    gfx::Size iconSize = theme->parts.windowButtonNormal()->size();
+    gfx::Size centerSize = this->sizeHint();
-    gfx::Size closeSize = theme->parts.windowButtonNormal()->size();
+    gfx::Size playSize = theme->calcSizeHint(this, theme->styles.windowPlayButton());
+    gfx::Size closeSize = theme->calcSizeHint(this, theme->styles.windowCloseButton());
 
-    rect.w = iconSize.w;
+    rect.w = centerSize.w;
-    rect.h = iconSize.h;
+    rect.h = centerSize.h;
-
+    rect.offset(window->bounds().x2()
-    rect.offset(window->bounds().x2() - 3*guiscale()
+                - theme->styles.windowCloseButton()->margin().width() - closeSize.w
-      - iconSize.w - 1*guiscale()
+                - theme->styles.windowPlayButton()->margin().width() - playSize.w
-      - iconSize.w - 1*guiscale() - closeSize.w,
+                - style()->margin().right() - centerSize.w,
-      window->bounds().y + 3*guiscale());
+                window->bounds().y + style()->margin().top());
 
     setBounds(rect);
   }
 
-  bool onProcessMessage(Message* msg) override
+  bool onProcessMessage(Message* msg) override {
-  {
     switch (msg->type()) {
 
       case kSetCursorMessage:
@@ -83,18 +77,13 @@ protected:
         return true;
     }
 
-    return SkinButton<CheckBox>::onProcessMessage(msg);
+    return CheckBox::onProcessMessage(msg);
   }
 };
 
-class MiniPlayButton : public SkinButton<Button> {
+class MiniPlayButton : public Button {
 public:
-  MiniPlayButton()
+  MiniPlayButton() : Button(""), m_isPlaying(false) {
-    : SkinButton<Button>(SkinTheme::instance()->parts.windowButtonNormal(),
-                         SkinTheme::instance()->parts.windowButtonHot(),
-                         SkinTheme::instance()->parts.windowButtonSelected(),
-                         SkinPartPtr(nullptr))
-    , m_isPlaying(false) {
     enableFlags(CTRL_RIGHT_CLICK);
     setupIcons();
     setDecorative(true);
@@ -115,22 +104,23 @@ private:
     m_isPlaying = !m_isPlaying;
     setupIcons();
 
-    SkinButton<Button>::onClick(ev);
+    Button::onClick(ev);
   }
 
   void onSetDecorativeWidgetBounds() override {
     SkinTheme* theme = static_cast<SkinTheme*>(this->theme());
     Widget* window = parent();
     gfx::Rect rect(0, 0, 0, 0);
-    gfx::Size playSize = theme->parts.windowButtonNormal()->size();
+    gfx::Size playSize = this->sizeHint();
-    gfx::Size closeSize = theme->parts.windowButtonNormal()->size();
+    gfx::Size closeSize = theme->calcSizeHint(this, theme->styles.windowCloseButton());
+    gfx::Border margin(0, 0, 0, 0);
 
     rect.w = playSize.w;
     rect.h = playSize.h;
-
+    rect.offset(window->bounds().x2()
-    rect.offset(window->bounds().x2() - 3*guiscale()
+                - theme->styles.windowCloseButton()->margin().width() - closeSize.w
-      - playSize.w - 1*guiscale() - closeSize.w,
+                - style()->margin().right() - playSize.w,
-      window->bounds().y + 3*guiscale());
+                window->bounds().y + style()->margin().top());
 
     setBounds(rect);
   }
@@ -157,16 +147,15 @@ private:
       }
     }
 
-    return SkinButton<Button>::onProcessMessage(msg);
+    return Button::onProcessMessage(msg);
   }
 
   void setupIcons() {
     SkinTheme* theme = SkinTheme::instance();
-
     if (m_isPlaying)
-      setIcon(theme->parts.windowStopIcon());
+      setStyle(theme->styles.windowStopButton());
     else
-      setIcon(theme->parts.windowPlayIcon());
+      setStyle(theme->styles.windowPlayButton());
   }
 
   bool m_isPlaying;

src/app/ui/skin/skin_button.h

@@ -1,80 +0,0 @@
-// Aseprite
-// Copyright (C) 2001-2015, 2017  David Capello
-//
-// This program is distributed under the terms of
-// the End-User License Agreement for Aseprite.
-
-#ifndef APP_UI_SKIN_SKIN_BUTTON_H_INCLUDED
-#define APP_UI_SKIN_SKIN_BUTTON_H_INCLUDED
-#pragma once
-
-#include "app/ui/skin/skin_theme.h"
-#include "she/surface.h"
-#include "ui/button.h"
-#include "ui/graphics.h"
-#include "ui/paint_event.h"
-
-namespace app {
-  namespace skin {
-
-    template<typename Base = ui::Button>
-    class SkinButton : public Base {
-    public:
-      SkinButton(const SkinPartPtr& partNormal,
-                 const SkinPartPtr& partHot,
-                 const SkinPartPtr& partSelected,
-                 const SkinPartPtr& partIcon)
-        : Base("")
-        , m_partNormal(partNormal)
-        , m_partHot(partHot)
-        , m_partSelected(partSelected)
-        , m_partIcon(partIcon)
-      {
-      }
-
-      void setIcon(const SkinPartPtr& partIcon) {
-        m_partIcon = partIcon;
-        Base::invalidate();
-      }
-
-    protected:
-      void onPaint(ui::PaintEvent& ev) override {
-        gfx::Rect bounds(Base::clientBounds());
-        ui::Graphics* g = ev.graphics();
-        SkinPartPtr part;
-        gfx::Color fg;
-
-        if (Base::isSelected()) {
-          fg = SkinTheme::instance()->colors.buttonSelectedText();
-          part = m_partSelected;
-        }
-        else if (Base::hasMouseOver()) {
-          fg = SkinTheme::instance()->colors.buttonHotText();
-          part = m_partHot;
-        }
-        else {
-          fg = SkinTheme::instance()->colors.buttonNormalText();
-          part = m_partNormal;
-        }
-
-        g->drawRgbaSurface(part->bitmap(0), bounds.x, bounds.y);
-        gfx::Size sz(part->bitmap(0)->width(),
-                     part->bitmap(0)->height());
-
-        part = m_partIcon;
-        g->drawColoredRgbaSurface(part->bitmap(0), fg,
-                                  bounds.x+sz.w/2-part->bitmap(0)->width()/2,
-                                  bounds.y+sz.h/2-part->bitmap(0)->height()/2);
-      }
-
-    private:
-      SkinPartPtr m_partNormal;
-      SkinPartPtr m_partHot;
-      SkinPartPtr m_partSelected;
-      SkinPartPtr m_partIcon;
-    };
-
-  } // namespace skin
-} // namespace app
-
-#endif