a shiny new widget

qtox.pro

@@ -84,7 +84,8 @@ HEADERS  += widget/form/addfriendform.h \
     widget/camera.h \
     widget/netcamview.h \
     widget/tool/clickablelabel.h \
-    smileypack.h
+    smileypack.h \
+    widget/emoticonswidget.h
 
 SOURCES += \
     widget/form/addfriendform.cpp \
@@ -117,4 +118,5 @@ SOURCES += \
     widget/camera.cpp \
     widget/netcamview.cpp \
     widget/tool/clickablelabel.cpp \
-    smileypack.cpp
+    smileypack.cpp \
+    widget/emoticonswidget.cpp

res.qrc

@@ -111,5 +111,8 @@
         <file>ui/statusButton/menu_indicator.png</file>
         <file>translations/de.qm</file>
         <file>translations/it.qm</file>
+        <file>ui/emoticonWidget/dot_page.png</file>
+        <file>ui/emoticonWidget/dot_page_current.png</file>
+        <file>ui/emoticonWidget/emoticonWidget.css</file>
     </qresource>
 </RCC>

ui/emoticonWidget/emoticonWidget.css

@@ -0,0 +1,49 @@
+QPushButton
+{
+    background-color: transparent;
+    background-repeat: none;    
+    border: none;
+    width: 18px;
+    height: 18px;
+}
+
+QRadioButton::indicator
+{
+     width: 13px;
+     height: 13px;
+}
+
+QRadioButton::indicator::unchecked 
+{
+     image: url(:/ui/emoticonWidget/dot_page.png);
+}
+
+QRadioButton::indicator:unchecked:hover 
+{
+     image: url(:/ui/emoticonWidget/dot_page.png);
+}
+
+QRadioButton::indicator:unchecked:pressed 
+{
+     image: url(:/ui/emoticonWidget/dot_page.png);
+}
+
+QRadioButton::indicator::checked 
+{
+     image: url(:/ui/emoticonWidget/dot_page_current.png);
+}
+
+QRadioButton::indicator:checked:hover 
+{
+     image: url(:/ui/emoticonWidget/dot_page_current.png);
+}
+
+QRadioButton::indicator:checked:pressed 
+{
+     image: url(:/ui/emoticonWidget/dot_page.png);
+}
+ 
+QMenu
+{
+     background-color: rgb(240,240,240); /* sets background of the menu */
+}

widget/emoticonswidget.cpp

@@ -0,0 +1,135 @@
+/*
+    Copyright (C) 2014 by Project Tox <https://tox.im>
+
+    This file is part of qTox, a Qt-based graphical interface for Tox.
+
+    This program is libre 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 3 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 COPYING file for more details.
+*/
+
+#include "emoticonswidget.h"
+#include "smileypack.h"
+
+#include <QPushButton>
+#include <QRadioButton>
+#include <QFile>
+#include <QLayout>
+#include <QGridLayout>
+
+EmoticonsWidget::EmoticonsWidget(QWidget *parent) :
+    QMenu(parent)
+{
+    QFile f(":/ui/emoticonWidget/emoticonWidget.css");
+    f.open(QFile::ReadOnly | QFile::Text);
+    QString pageButtonCss = f.readAll();
+    setStyleSheet(pageButtonCss);
+
+    setLayout(&layout);
+    layout.addWidget(&stack);
+
+    QWidget* pageButtonsContainer = new QWidget;
+    QHBoxLayout* buttonLayout = new QHBoxLayout;
+    pageButtonsContainer->setLayout(buttonLayout);
+
+    layout.addWidget(pageButtonsContainer);
+
+    const int maxCols = 5;
+    const int maxRows = 3;
+    const int itemsPerPage = maxRows * maxCols;
+
+    const QList<QStringList>& emoticons = SmileyPack::getInstance().getEmoticons();
+    int itemCount = emoticons.size();
+    int pageCount = (itemCount / itemsPerPage) + 1;
+    int currPage = 0;
+    int currItem = 0;
+    int row = 0;
+    int col = 0;
+
+    // create pages
+    buttonLayout->addStretch();
+    for (int i = 0; i < pageCount; i++)
+    {
+        QGridLayout* pageLayout = new QGridLayout;
+        pageLayout->addItem(new QSpacerItem(0, 0, QSizePolicy::Minimum, QSizePolicy::Expanding), maxRows, 0);
+        pageLayout->addItem(new QSpacerItem(0, 0, QSizePolicy::Expanding, QSizePolicy::Minimum), 0, maxCols);
+
+        QWidget* page = new QWidget;
+        page->setLayout(pageLayout);
+        stack.addWidget(page);
+
+        QRadioButton* pageButton = new QRadioButton;
+        pageButton->setProperty("pageIndex", i);
+        pageButton->setChecked(i == 0);
+        buttonLayout->addWidget(pageButton);
+
+        connect(pageButton, &QRadioButton::clicked, this, &EmoticonsWidget::onPageButtonClicked);
+    }
+    buttonLayout->addStretch();
+
+    for (const QStringList& set : emoticons)
+    {
+        QPushButton* button = new QPushButton;
+        button->setIcon(SmileyPack::getInstance().getAsIcon(set[0]));
+        button->setToolTip(set.join(" "));
+        button->setProperty("sequence", set[0]);
+        button->setFlat(true);
+
+        connect(button, &QPushButton::clicked, this, &EmoticonsWidget::onSmileyClicked);
+
+        qobject_cast<QGridLayout*>(stack.widget(currPage)->layout())->addWidget(button, row, col);
+
+        col++;
+        currItem++;
+
+        // next row
+        if (col >= maxCols)
+        {
+            col = 0;
+            row++;
+        }
+
+        // next page
+        if (currItem >= itemsPerPage)
+        {
+            row = 0;
+            currItem = 0;
+            currPage++;
+        }
+    }
+
+    // calculates sizeHint
+    layout.activate();
+}
+
+void EmoticonsWidget::onSmileyClicked()
+{
+    // hide the QMenu
+    QMenu::hide();
+
+    // emit insert emoticon
+    QWidget* sender = qobject_cast<QWidget*>(QObject::sender());
+    if (sender)
+        emit insertEmoticon(' ' + sender->property("sequence").toString() + ' ');
+}
+
+void EmoticonsWidget::onPageButtonClicked()
+{
+    QWidget* sender = qobject_cast<QRadioButton*>(QObject::sender());
+    if (sender)
+    {
+        int page = sender->property("pageIndex").toInt();
+        stack.setCurrentIndex(page);
+    }
+}
+
+QSize EmoticonsWidget::sizeHint() const
+{
+    return layout.sizeHint();
+}

widget/emoticonswidget.h

@@ -0,0 +1,45 @@
+/*
+    Copyright (C) 2014 by Project Tox <https://tox.im>
+
+    This file is part of qTox, a Qt-based graphical interface for Tox.
+
+    This program is libre 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 3 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 COPYING file for more details.
+*/
+
+#ifndef EMOTICONSWIDGET_H
+#define EMOTICONSWIDGET_H
+
+#include <QMenu>
+#include <QStackedWidget>
+#include <QVBoxLayout>
+
+class EmoticonsWidget : public QMenu
+{
+    Q_OBJECT
+public:
+    explicit EmoticonsWidget(QWidget *parent = 0);
+
+signals:
+    void insertEmoticon(QString str);
+
+private slots:
+    void onSmileyClicked();
+    void onPageButtonClicked();
+
+private:
+    QStackedWidget stack;
+    QVBoxLayout layout;
+
+public:
+    virtual QSize sizeHint() const;
+};
+
+#endif // EMOTICONSWIDGET_H

widget/form/chatform.cpp

@@ -20,6 +20,7 @@
 #include "widget/friendwidget.h"
 #include "widget/widget.h"
 #include "widget/filetransfertwidget.h"
+#include "widget/emoticonswidget.h"
 #include <QFont>
 #include <QTime>
 #include <QScrollBar>
@@ -658,50 +659,23 @@ void ChatForm::onSaveLogClicked()
 
 void ChatForm::onEmoteButtonClicked()
 {
-    QList<QStringList> emoticons = SmileyPack::getInstance().getEmoticons();
+    EmoticonsWidget widget;
-
+    connect(&widget, &EmoticonsWidget::insertEmoticon, this, &ChatForm::onEmoteInsertRequested);
-    QMenu menu;
-    QGridLayout* gridLayout = new QGridLayout;
-    menu.setLayout(gridLayout);
-
-    int colCount = sqrt(emoticons.size()) + 1;
-    int row = 0;
-    int col = 0;
-    for (const QStringList& set : emoticons)
-    {
-        QPushButton* button = new QPushButton;
-        button->setIcon(SmileyPack::getInstance().getAsIcon(set[0]));
-        button->setToolTip(set.join(" "));
-        button->setProperty("sequence", set[0]);
-        connect(button, &QPushButton::clicked, this, &ChatForm::onAddEmote);
-
-        gridLayout->addWidget(button, row, ++col);
-        if (col >= colCount)
-        {
-            col = 0;
-            row++;
-        }
-    }
 
     QWidget* sender = qobject_cast<QWidget*>(QObject::sender());
     if (sender)
     {
-        QPoint pos(gridLayout->totalSizeHint().width() / 2, gridLayout->totalSizeHint().height());
+        QPoint pos(widget.sizeHint().width() / 2, widget.sizeHint().height());
-        menu.exec(sender->mapToGlobal(-pos));
+        widget.exec(sender->mapToGlobal(-pos - QPoint(0, 10)));
     }
 }
 
-void ChatForm::onAddEmote()
+void ChatForm::onEmoteInsertRequested(QString str)
 {
-    // hide the QMenu
-    QMenu* menu = qobject_cast<QMenu*>(QObject::sender()->parent());
-    if (menu)
-        menu->hide();
-
     // insert the emoticon
     QWidget* sender = qobject_cast<QWidget*>(QObject::sender());
     if (sender)
-        msgEdit->insertPlainText(' ' + sender->property("sequence").toString() + ' ');
+        msgEdit->insertPlainText(str);
 
-    msgEdit->setFocus(); // refocus so that you can continue typing
+    msgEdit->setFocus(); // refocus so that we can continue typing
 }

widget/form/chatform.h

@@ -84,7 +84,7 @@ private slots:
     void onChatContextMenuRequested(QPoint pos);
     void onSaveLogClicked();
     void onEmoteButtonClicked();
-    void onAddEmote();
+    void onEmoteInsertRequested(QString str);
 
 private:
     Friend* f;