ui: Fixed layout of QtBookmarkBrowser

* fixed window size and resizing
* fixed layout and spacing
* removed focus rects on Mac
* fixed filter dropdown style for Mac
* reuse button handling from QtWindow
* use different colors for category and bookmark rows
* allow clicking full row for expansion
* show edit and delete button only on hover
* ellide bookmark name when little space

src/lib_gui/qt/element/QtBookmark.cpp

@@ -1,29 +1,32 @@
 #include "QtBookmark.h"
 
+#include <QHBoxLayout>
 #include <QMessageBox>
 #include <QPixmap>
-
-#include "qt/window/QtBookmarkCreator.h"
-
-#include "data/bookmark/EdgeBookmark.h"
+#include <QTimer>
+#include <QVBoxLayout>
 
 #include "utility/messaging/type/MessageActivateBookmark.h"
 #include "utility/messaging/type/MessageDisplayBookmarkEditor.h"
-
 #include "utility/ResourcePaths.h"
 
+#include "data/bookmark/EdgeBookmark.h"
+#include "qt/window/QtBookmarkCreator.h"
 #include "qt/utility/utilityQt.h"
 
 QtBookmark::QtBookmark()
 	: m_treeWidgetItem(NULL)
+	, m_arrowImageName("arrow_right.png")
+	, m_hovered(false)
+	, m_ignoreNextResize(false)
 {
 	setObjectName("bookmark");
 
-	m_layout = new QVBoxLayout();
-	m_layout->setSpacing(0);
-	m_layout->setContentsMargins(0, 0, 0, 0);
-	m_layout->setAlignment(Qt::AlignTop);
-	setLayout(m_layout);
+	QVBoxLayout* layout = new QVBoxLayout();
+	layout->setSpacing(0);
+	layout->setContentsMargins(0, 0, 0, 0);
+	layout->setAlignment(Qt::AlignTop);
+	setLayout(layout);
 
 	QHBoxLayout* buttonsLayout = new QHBoxLayout();
 	buttonsLayout->setSpacing(0);
@@ -33,67 +36,60 @@ QtBookmark::QtBookmark()
 	m_toggleCommentButton = new QPushButton();
 	m_toggleCommentButton->setObjectName("comment_button");
 	m_toggleCommentButton->setToolTip("Show Comment");
-	m_toggleCommentButton->setText("");
 	m_toggleCommentButton->setAttribute(Qt::WA_LayoutUsesWidgetRect);
+	m_toggleCommentButton->setIconSize(QSize(10, 10));
+	utility::setWidgetRetainsSpaceWhenHidden(m_toggleCommentButton);
 	buttonsLayout->addWidget(m_toggleCommentButton);
-
-	m_dateLabel = new QLabel();
-	m_dateLabel->setObjectName("date_label");
-	m_dateLabel->setText("n/a");
-	buttonsLayout->addWidget(m_dateLabel);
+	updateArrow();
 
 	m_activateButton = new QPushButton();
 	m_activateButton->setObjectName("activate_button");
 	m_activateButton->setToolTip("Activate bookmark");
-	m_activateButton->setText("Bookmark");
 	m_activateButton->setAttribute(Qt::WA_LayoutUsesWidgetRect);
 	buttonsLayout->addWidget(m_activateButton);
 
+	m_dateLabel = new QLabel();
+	m_dateLabel->setObjectName("date_label");
+	buttonsLayout->addWidget(m_dateLabel);
+
+	buttonsLayout->addStretch();
+
 	m_editButton = new QPushButton();
 	m_editButton->setObjectName("edit_button");
 	m_editButton->setToolTip("Edit bookmark");
-	m_editButton->setText("Edit");
 	m_editButton->setAttribute(Qt::WA_LayoutUsesWidgetRect);
+	m_editButton->setIcon(QPixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/bookmark_edit_icon.png").c_str()));
+	utility::setWidgetRetainsSpaceWhenHidden(m_editButton);
+	m_editButton->hide();
 	buttonsLayout->addWidget(m_editButton);
 
 	m_deleteButton = new QPushButton();
 	m_deleteButton->setObjectName("delete_button");
 	m_deleteButton->setToolTip("Delete bookmark");
-	m_deleteButton->setText("Delete");
 	m_deleteButton->setAttribute(Qt::WA_LayoutUsesWidgetRect);
+	m_deleteButton->setIcon(QPixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/bookmark_delete_icon.png").c_str()));
+	utility::setWidgetRetainsSpaceWhenHidden(m_deleteButton);
+	m_deleteButton->hide();
 	buttonsLayout->addWidget(m_deleteButton);
 
-	m_layout->addLayout(buttonsLayout);
+	layout->addLayout(buttonsLayout);
 
-	m_comment = new QLabel();
-	m_comment->setText("no comment");
-	m_comment->hide();
+	m_comment = new QLabel("");
+	m_comment->setObjectName("bookmark_comment");
 	m_comment->setWordWrap(true);
-	m_layout->addWidget(m_comment);
-
+	m_comment->hide();
+	layout->addWidget(m_comment);
 
 	connect(m_activateButton, SIGNAL(clicked()), this, SLOT(activateClicked()));
 	connect(m_editButton, SIGNAL(clicked()), this, SLOT(editClicked()));
 	connect(m_deleteButton, SIGNAL(clicked()), this, SLOT(deleteClicked()));
 	connect(m_toggleCommentButton, SIGNAL(clicked()), this, SLOT(commentToggled()));
-
-	refreshStyle();
 }
 
 QtBookmark::~QtBookmark()
 {
 }
 
-void QtBookmark::setName(const std::string& name)
-{
-	m_activateButton->setText(name.c_str());
-}
-
-std::string QtBookmark::getName() const
-{
-	return m_bookmark->getDisplayName();
-}
-
 void QtBookmark::setBookmark(const std::shared_ptr<Bookmark> bookmark)
 {
 	m_bookmark = bookmark;
@@ -109,11 +105,14 @@ void QtBookmark::setBookmark(const std::shared_ptr<Bookmark> bookmark)
 	if (m_bookmark->getComment().length() > 0)
 	{
 		m_comment->setText(m_bookmark->getComment().c_str());
-		m_activateButton->setToolTip(bookmark->getComment().c_str());
+		m_toggleCommentButton->show();
+	}
+	else
+	{
+		m_toggleCommentButton->hide();
 	}
-	m_dateLabel->setText(getDateString().c_str());
 
-	getDateString();
+	m_dateLabel->setText(getDateString().c_str());
 }
 
 Id QtBookmark::getBookmarkId() const
@@ -131,31 +130,72 @@ void QtBookmark::setTreeWidgetItem(QTreeWidgetItem* treeWidgetItem)
 	m_treeWidgetItem = treeWidgetItem;
 }
 
-void QtBookmark::refreshStyle()
+void QtBookmark::commentToggled()
 {
-	if (m_editButton != NULL)
+	if (!m_toggleCommentButton->isVisible())
 	{
-		m_editButton->setText("");
-		m_editButton->setIcon(QPixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/bookmark_edit_icon.png").c_str()));
+		return;
 	}
 
-	if (m_deleteButton != NULL)
+	m_ignoreNextResize = true;
+
+	if (m_comment->isVisible() == false)
 	{
-		m_deleteButton->setText("");
-		m_deleteButton->setIcon(QPixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/bookmark_delete_icon.png").c_str()));
+		m_arrowImageName = "arrow_down.png";
+		m_comment->show();
+		m_comment->setMinimumHeight(m_comment->heightForWidth(m_comment->width()));
+	}
+	else
+	{
+		m_arrowImageName = "arrow_right.png";
+		m_comment->hide();
 	}
 
-	if (m_toggleCommentButton != NULL)
+	updateArrow();
+
+	// forces the parent tree view to rescale
+	if (m_treeWidgetItem)
 	{
-		m_toggleCommentButton->setText("");
-		m_toggleCommentButton->setIcon(utility::createButtonIcon(
-			ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_right.png",
-			"bookmark/button"
-		));
-		m_toggleCommentButton->setIconSize(QSize(10, 10));
+		m_treeWidgetItem->setExpanded(false);
+		m_treeWidgetItem->setExpanded(true);
 	}
 }
 
+void QtBookmark::resizeEvent(QResizeEvent* event)
+{
+	if (m_ignoreNextResize)
+	{
+		m_ignoreNextResize = false;
+		return;
+	}
+
+	m_activateButton->setText(m_bookmark->getDisplayName().c_str());
+	QTimer::singleShot(10, this, SLOT(elideButtonText()));
+}
+
+void QtBookmark::showEvent(QShowEvent* event)
+{
+	elideButtonText();
+}
+
+void QtBookmark::enterEvent(QEvent *event)
+{
+	m_editButton->show();
+	m_deleteButton->show();
+
+	m_hovered = true;
+	updateArrow();
+}
+
+void QtBookmark::leaveEvent(QEvent *event)
+{
+	m_editButton->hide();
+	m_deleteButton->hide();
+
+	m_hovered = false;
+	updateArrow();
+}
+
 void QtBookmark::activateClicked()
 {
 	MessageActivateBookmark(m_bookmark).dispatch();
@@ -182,39 +222,10 @@ void QtBookmark::deleteClicked()
 	}
 }
 
-void QtBookmark::commentToggled()
+void QtBookmark::elideButtonText()
 {
-	// std::string text = m_toggleCommentButton->text().toStdString();
-
-	if (m_comment->isVisible() == false)
-	{
-		m_toggleCommentButton->setText("");
-		m_toggleCommentButton->setText("");
-		m_toggleCommentButton->setIcon(utility::createButtonIcon(
-			ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_down.png",
-			"bookmark/button"
-		));
-		m_toggleCommentButton->setIconSize(QSize(10, 10));
-		m_comment->show();
-	}
-	else
-	{
-		m_toggleCommentButton->setText("");
-		m_toggleCommentButton->setText("");
-		m_toggleCommentButton->setIcon(utility::createButtonIcon(
-			ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_right.png",
-			"bookmark/button"
-		));
-		m_toggleCommentButton->setIconSize(QSize(10, 10));
-		m_comment->hide();
-	}
-
-	// forces the parent tree view to rescale
-	if (m_treeWidgetItem)
-	{
-		m_treeWidgetItem->setExpanded(false);
-		m_treeWidgetItem->setExpanded(true);
-	}
+	m_activateButton->setText(m_activateButton->fontMetrics().elidedText(
+		m_bookmark->getDisplayName().c_str(), Qt::ElideMiddle, m_activateButton->width() - 16));
 }
 
 void QtBookmark::handleMessage(MessageEditBookmark* message)
@@ -228,6 +239,12 @@ void QtBookmark::handleMessage(MessageEditBookmark* message)
 	}
 }
 
+void QtBookmark::updateArrow()
+{
+	QPixmap pixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/" + m_arrowImageName).c_str());
+	m_toggleCommentButton->setIcon(QIcon(utility::colorizePixmap(pixmap, m_hovered ? "black" : "#707070")));
+}
+
 std::string QtBookmark::getDateString() const
 {
 	std::string result = "n/a";
@@ -248,7 +265,7 @@ std::string QtBookmark::getDateString() const
 	{
 		result = "today";
 	}
-	else if(creationDate.deltaDays(TimePoint::now()) == 1) // yesterday
+	else if (creationDate.deltaDays(TimePoint::now()) == 1) // yesterday
 	{
 		result = "yesterday";
 	}

src/lib_gui/qt/element/QtBookmark.h

@@ -2,11 +2,8 @@
 #define QT_BOOKMARK_H
 
 #include <QFrame>
-
 #include <QLabel>
 #include <QPushButton>
-#include <QHBoxLayout>
-#include <QVBoxLayout>
 
 #include "utility/messaging/MessageListener.h"
 #include "utility/messaging/type/MessageDeleteBookmark.h"
@@ -26,31 +23,35 @@ public:
 	QtBookmark();
 	virtual ~QtBookmark();
 
-	void setName(const std::string& name);
-	std::string getName() const;
-
 	void setBookmark(const std::shared_ptr<Bookmark> bookmark);
-
 	Id getBookmarkId() const;
 
 	QTreeWidgetItem* getTreeWidgetItem() const;
 	void setTreeWidgetItem(QTreeWidgetItem* treeWidgetItem);
 
-	void refreshStyle();
+public slots:
+	void commentToggled();
+
+protected:
+	virtual void resizeEvent(QResizeEvent* event) Q_DECL_OVERRIDE;
+	virtual void showEvent(QShowEvent* event) Q_DECL_OVERRIDE;
+
+	virtual void enterEvent(QEvent *event) Q_DECL_OVERRIDE;
+	virtual void leaveEvent(QEvent *event) Q_DECL_OVERRIDE;
 
 private slots:
 	void activateClicked();
 	void editClicked();
 	void deleteClicked();
-	void commentToggled();
+	void elideButtonText();
 
 private:
-	void handleMessage(MessageEditBookmark* message);
+	void handleMessage(MessageEditBookmark* message) override;
+
+	void updateArrow();
 
 	std::string getDateString() const;
 
-	QVBoxLayout* m_layout;
-
 	QPushButton* m_activateButton;
 	QPushButton* m_editButton;
 	QPushButton* m_deleteButton;
@@ -61,8 +62,15 @@ private:
 
 	std::shared_ptr<Bookmark> m_bookmark;
 
-	QTreeWidgetItem* m_treeWidgetItem; // pointer to the bookmark category item in the treeView, allows to refresh tree view when a node changes in size (e.g. toggle comment)
-									// not a nice solution to the problem, but couldn't find anything better yet (sizeHintChanged signal can't be emitted here...)
+	// pointer to the bookmark category item in the treeView, allows to refresh tree view when a node changes in size
+	// (e.g. toggle comment). Not a nice solution to the problem, but couldn't find anything better yet.
+	// (sizeHintChanged signal can't be emitted here...)
+	QTreeWidgetItem* m_treeWidgetItem;
+
+	std::string m_arrowImageName;
+	bool m_hovered;
+
+	bool m_ignoreNextResize;
 };
 
-#endif // QT_BOOKMARK_H
+#endif // QT_BOOKMARK_H

src/lib_gui/qt/element/QtBookmarkCategory.cpp

@@ -1,52 +1,48 @@
 #include "QtBookmarkCategory.h"
 
+#include <QHBoxLayout>
 #include <QMessageBox>
 
 #include "utility/messaging/type/MessageDeleteBookmarkCategoryWithBookmarks.h"
-
 #include "utility/ResourcePaths.h"
 
 #include "qt/utility/utilityQt.h"
 
 QtBookmarkCategory::QtBookmarkCategory()
-	: m_layout(NULL)
-	, m_name(NULL)
-	, m_deleteButton(NULL)
-	, m_treeItem(NULL)
-	, m_id(-1)
+	: m_id(0)
 {
 	setObjectName("bookmark_category");
 
-	m_layout = new QHBoxLayout();
-	m_layout->setSpacing(0);
-	m_layout->setContentsMargins(0, 0, 0, 0);
-	m_layout->setAlignment(Qt::AlignTop);
-	setLayout(m_layout);
+	QHBoxLayout* layout = new QHBoxLayout();
+	layout->setSpacing(0);
+	layout->setContentsMargins(0, 0, 0, 0);
+	layout->setAlignment(Qt::AlignTop);
+	setLayout(layout);
 
 	m_expandButton = new QPushButton();
 	m_expandButton->setObjectName("category_expand_button");
 	m_expandButton->setToolTip("Show/Hide bookmarks in this category");
-	m_expandButton->setIcon(utility::createButtonIcon(
-		ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_down.png",
-		"bookmark/button"
-	));
 	m_expandButton->setAttribute(Qt::WA_LayoutUsesWidgetRect);
-	m_layout->addWidget(m_expandButton);
+	m_expandButton->setIcon(QPixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_down.png").c_str()));
+	m_expandButton->setIconSize(QSize(8, 8));
+	layout->addWidget(m_expandButton);
 
 	connect(m_expandButton, SIGNAL(clicked()), this, SLOT(expandClicked()));
 
 	m_name = new QLabel();
 	m_name->setObjectName("category_name");
-	m_name->setText("");
-	m_layout->addWidget(m_name);
+	layout->addWidget(m_name);
+
+	layout->addStretch();
 
 	m_deleteButton = new QPushButton();
 	m_deleteButton->setObjectName("category_delete_button");
 	m_deleteButton->setToolTip("Delete this Bookmark Category and the containing Bookmarks");
-	// m_deleteButton->setText("Delete");
 	m_deleteButton->setAttribute(Qt::WA_LayoutUsesWidgetRect);
 	m_deleteButton->setIcon(QPixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/bookmark_delete_icon.png").c_str()));
-	m_layout->addWidget(m_deleteButton);
+	utility::setWidgetRetainsSpaceWhenHidden(m_deleteButton);
+	m_deleteButton->hide();
+	layout->addWidget(m_deleteButton);
 
 	connect(m_deleteButton, SIGNAL(clicked()), this, SLOT(deleteClicked()));
 }
@@ -96,17 +92,13 @@ void QtBookmarkCategory::updateArrow()
 	{
 		if (m_treeItem->isExpanded())
 		{
-			m_expandButton->setIcon(utility::createButtonIcon(
-				ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_down.png",
-				"bookmark/button"
-			));
+			QPixmap pixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_down.png").c_str());
+			m_expandButton->setIcon(QIcon(utility::colorizePixmap(pixmap, "white")));
 		}
 		else
 		{
-			m_expandButton->setIcon(utility::createButtonIcon(
-				ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_right.png",
-				"bookmark/button"
-			));
+			QPixmap pixmap((ResourcePaths::getGuiPath() + "bookmark_view/images/arrow_right.png").c_str());
+			m_expandButton->setIcon(QIcon(utility::colorizePixmap(pixmap, "white")));
 		}
 	}
 }
@@ -128,6 +120,16 @@ void QtBookmarkCategory::expandClicked()
 	}
 }
 
+void QtBookmarkCategory::enterEvent(QEvent *event)
+{
+	m_deleteButton->show();
+}
+
+void QtBookmarkCategory::leaveEvent(QEvent *event)
+{
+	m_deleteButton->hide();
+}
+
 void QtBookmarkCategory::deleteClicked()
 {
 	QMessageBox msgBox;
@@ -142,4 +144,4 @@ void QtBookmarkCategory::deleteClicked()
 	{
 		MessageDeleteBookmarkCategoryWithBookmarks(m_id).dispatch();
 	}
-}
+}

src/lib_gui/qt/element/QtBookmarkCategory.h

@@ -2,9 +2,7 @@
 #define QT_BOOKMARK_CATEGORY_H
 
 #include <QFrame>
-
 #include <QLabel>
-#include <QHBoxLayout>
 #include <QPushButton>
 #include <QTreeWidget>
 
@@ -29,20 +27,24 @@ public:
 
 	void updateArrow();
 
-private slots:
+public slots:
 	void expandClicked();
+
+protected:
+	virtual void enterEvent(QEvent *event);
+	virtual void leaveEvent(QEvent *event);
+
+private slots:
 	void deleteClicked();
 
 private:
-	QHBoxLayout* m_layout;
 	QLabel* m_name;
+	Id m_id;
 
 	QPushButton* m_expandButton;
 	QPushButton* m_deleteButton;
 
 	QTreeWidgetItem* m_treeItem; // store a pointer to the 'parent' tree item to enable the custom expand button
-
-	Id m_id;
 };
 
-#endif // QT_BOOKMARK_CATEGORY_H
+#endif // QT_BOOKMARK_CATEGORY_H