close button icon

PineapplePictures.pro

@@ -30,14 +30,16 @@ SOURCES += \
     graphicsview.cpp \
     bottombuttongroup.cpp \
     graphicsscene.cpp \
-    navigatorview.cpp
+    navigatorview.cpp \
+    toolbutton.cpp
 
 HEADERS += \
         mainwindow.h \
     graphicsview.h \
     bottombuttongroup.h \
     graphicsscene.h \
-    navigatorview.h
+    navigatorview.h \
+    toolbutton.h
 
 FORMS +=
 

icons/window-close.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666665 8.4666669"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="window-close.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#000000"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.69803922"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="19.29838"
+     inkscape:cy="15.79404"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="1920"
+     inkscape:window-height="1001"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <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>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-288.5333)">
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.396875;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 2.100237,290.55098 4.3234589,4.22265"
+       id="path817"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+    <path
+       style="fill:none;stroke:#ffffff;stroke-width:0.396875;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 2.099406,294.78651 4.3414732,-4.24185"
+       id="path819"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cc" />
+  </g>
+</svg>

mainwindow.cpp

@@ -1,5 +1,6 @@
 #include "mainwindow.h"
 
+#include "toolbutton.h"
 #include "bottombuttongroup.h"
 #include "graphicsview.h"
 #include "navigatorview.h"
@@ -63,15 +64,9 @@ MainWindow::MainWindow(QWidget *parent) :
     connect(m_graphicsView, &GraphicsView::viewportRectChanged,
             m_gv, &NavigatorView::updateMainViewportRegion);
 
-    m_closeButton = new QPushButton(m_graphicsView);
+    m_closeButton = new ToolButton(m_graphicsView);
-    m_closeButton->setFlat(true);
+    m_closeButton->setIcon(QIcon(":/icons/window-close"));
-    m_closeButton->setFixedSize(50, 50);
+    m_closeButton->setIconSize(QSize(50, 50));
-    m_closeButton->setStyleSheet("QPushButton {"
-                                 "background: transparent;"
-                                 "}"
-                                 "QPushButton:hover {"
-                                 "background: red;"
-                                 "}");
 
     connect(m_closeButton, &QAbstractButton::clicked,
             this, &MainWindow::closeWindow);
@@ -174,6 +169,8 @@ void MainWindow::enterEvent(QEvent *event)
     m_bribViewOpacityAnimation->setEndValue(1);
     m_bribViewOpacityAnimation->start();
 
+    m_closeButton->setIconOpacity(1);
+
     return QMainWindow::enterEvent(event);
 }
 
@@ -189,6 +186,8 @@ void MainWindow::leaveEvent(QEvent *event)
     m_bribViewOpacityAnimation->setEndValue(0);
     m_bribViewOpacityAnimation->start();
 
+    m_closeButton->setIconOpacity(0);
+
     return QMainWindow::leaveEvent(event);
 }
 

mainwindow.h

@@ -11,6 +11,7 @@ class QGraphicsOpacityEffect;
 class QGraphicsView;
 QT_END_NAMESPACE
 
+class ToolButton;
 class GraphicsView;
 class NavigatorView;
 class BottomButtonGroup;
@@ -55,7 +56,7 @@ private:
     QPropertyAnimation *m_fadeOutAnimation;
     QPropertyAnimation *m_floatUpAnimation;
     QParallelAnimationGroup *m_exitAnimationGroup;
-    QPushButton *m_closeButton;
+    ToolButton *m_closeButton;
     GraphicsView *m_graphicsView;
     NavigatorView *m_gv;
     BottomButtonGroup *m_bottomButtonGroup;

resources.qrc

@@ -7,5 +7,6 @@
         <file>icons/object-rotate-right.svg</file>
         <file>icons/view-background-checkerboard.svg</file>
         <file>icons/app-icon.svg</file>
+        <file>icons/window-close.svg</file>
     </qresource>
 </RCC>

toolbutton.cpp

@@ -0,0 +1,31 @@
+#include "toolbutton.h"
+
+#include <QPainter>
+#include <QGraphicsOpacityEffect>
+#include <QPropertyAnimation>
+
+ToolButton::ToolButton(QWidget *parent)
+    : QPushButton(parent)
+    , m_opacityFx(new QGraphicsOpacityEffect(this))
+    , m_opacityAnimation(new QPropertyAnimation(m_opacityFx, "opacity"))
+{
+    setFlat(true);
+    setFixedSize(50, 50);
+    setGraphicsEffect(m_opacityFx);
+    setStyleSheet("QPushButton {"
+                  "background: transparent;"
+                  "}"
+                  "QPushButton:hover {"
+                  "background: red;"
+                  "}");
+
+    m_opacityAnimation->setDuration(300);
+}
+
+void ToolButton::setIconOpacity(qreal opacity)
+{
+    m_opacityAnimation->stop();
+    m_opacityAnimation->setStartValue(m_opacityFx->opacity());
+    m_opacityAnimation->setEndValue(opacity);
+    m_opacityAnimation->start();
+}

toolbutton.h

@@ -0,0 +1,25 @@
+#ifndef TOOLBUTTON_H
+#define TOOLBUTTON_H
+
+#include <QPushButton>
+
+QT_BEGIN_NAMESPACE
+class QGraphicsOpacityEffect;
+class QPropertyAnimation;
+QT_END_NAMESPACE
+
+class ToolButton : public QPushButton
+{
+    Q_OBJECT
+public:
+    ToolButton(QWidget * parent = nullptr);
+
+public slots:
+    void setIconOpacity(qreal opacity);
+
+private:
+    QGraphicsOpacityEffect * m_opacityFx;
+    QPropertyAnimation * m_opacityAnimation;
+};
+
+#endif // TOOLBUTTON_H