ui: styled search view

fortune cookie message = Dein Einsatz wird in Kuerze belohnt werden

bin/app/data/gui/search_view/search_element.css

@@ -5,37 +5,37 @@ QPushButton {
 	height: 20px;
 	padding-left: 4px;
 	padding-right: 4px;
-	border-radius: 2px;
 }
 
 #search_element_token {
-	background-color: rgb(153,22,165);
+	background-color: #CC8D91;
 }
 
-#search_element_token:checked {
-	background-color: rgb(160,102,165);
+#search_element_token:checked, #search_element_token:hover {
+	background-color: #CC5E69;
 }
 
 #search_element_command {
-	background-color: rgb(172,150,0);
+	background-color: #FFE47A;
 }
 
-#search_element_command:checked {
-	background-color: rgb(172,163,103);
+#search_element_command:checked, #search_element_command:hover {
+	background-color: #FFCC00;
 }
 
 #search_element_operator {
-	background-color: rgb(27,136,86);
+	background-color: #FCA47E;
 }
 
-#search_element_operator:checked {
-	background-color: rgb(103,136,121);
+#search_element_operator:checked, #search_element_operator:hover {
+	background-color: #F97A4E;
 }
 
 #search_element_none {
-	background-color: rgb(208,93,24);
+	background-color: none;
+	color: #878787;
 }
 
-#search_element_none:checked {
-	background-color: rgb(208,138,96);
+#search_element_none:checked, #search_element_none:hover {
+	color: black;
 }

bin/app/data/gui/search_view/search_view.css

@@ -1,32 +1,55 @@
 #search_bar {
-	background: rgb(255, 255, 255);
+	background: white;
+}
+
+QWidget#search_box_container {
+	background: #E0E0E0;
+	border: none;
+	border-bottom-left-radius: 12px;
+	border-top-left-radius: 12px;
+	margin-right: 2px;
 }
 
 QLineEdit#search_box {
-	background: rgb(204, 204, 204);
+	background: #E0E0E0;
 	border: none;
 	font-family: "Source Code Pro";
 	font-size: 16px;
-	font-weight: bold;
-	padding: 0 4px;
-	height: 26px;
-	selection-background-color: rgb(51, 51, 51);
+	height: 24px;
+	selection-background-color: #B2B2B2;
+}
+
+QWidget#search_box_highlight {
+	background: #B2B2B2;
+	border: none;
+	height: 24px;
 }
 
 QAbstractItemView#search_box_popup {
+	background-color: white;
+	border: none;
 	font-family: "Source Code Pro";
-	font-size: 14px;
-	selection-background-color: rgb(51, 51, 51);
+	font-size: 14pt;
+	margin: 8px 0 0;
+	min-height: 26px;
+	selection-background-color: #B2B2B2;
 }
 
 QPushButton#search_button {
+	background: #E0E0E0;
 	border: none;
-	border-image: url(data/gui/search_view/images/button_search.png);
-	height: 26px;
-	width: 26px;
+	border-bottom-right-radius: 12px;
+	border-top-right-radius: 12px;
+	background-position: 15px 5px;
+	height: 30px;
+	width: 30px;
 }
 
-QPushButton#case_sensitive_button {
+#search_button:hover {
+	background: #B2B2B2;
+}
+
+/*QPushButton#case_sensitive_button {
 	border: none;
 	border-image: url(data/gui/search_view/images/button_case_sensitive_inactive.png);
 	height: 26px;
@@ -36,7 +59,7 @@ QPushButton#case_sensitive_button {
 
 QPushButton#case_sensitive_button:checked {
 	border-image: url(data/gui/search_view/images/button_case_sensitive_active.png);
-}
+}*/
 
 QToolTip {
 	background-color: rgb(204, 204, 204);

src/app/qt/element/QtAutocompletionList.cpp

@@ -1,10 +1,10 @@
 #include "qt/element/QtAutocompletionList.h"
 
 #include <QPainter>
+#include <QScrollBar>
 
-QtAutocompletionModel::QtAutocompletionModel(const std::vector<SearchMatch>& matchList, QObject* parent)
+QtAutocompletionModel::QtAutocompletionModel(QObject* parent)
 	: QAbstractTableModel(parent)
-	, m_matchList(matchList)
 {
 }
 
@@ -12,6 +12,11 @@ QtAutocompletionModel::~QtAutocompletionModel()
 {
 }
 
+void QtAutocompletionModel::setMatchList(const std::vector<SearchMatch>& matchList)
+{
+	m_matchList = matchList;
+}
+
 int QtAutocompletionModel::rowCount(const QModelIndex &parent) const
 {
 	Q_UNUSED(parent);
@@ -26,7 +31,7 @@ int QtAutocompletionModel::columnCount(const QModelIndex &parent) const
 
 QVariant QtAutocompletionModel::data(const QModelIndex &index, int role) const
 {
-	if (!index.isValid() || index.row() < 0 || size_t(index.row()) >= m_matchList.size() || role != Qt::DisplayRole)
+	if (!index.isValid() || index.row() < 0 || index.row() >= int(m_matchList.size()) || role != Qt::DisplayRole)
 	{
 		return QVariant();
 	}
@@ -74,15 +79,8 @@ QtAutocompletionDelegate::~QtAutocompletionDelegate()
 
 void QtAutocompletionDelegate::paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const
 {
-	QPen pen = painter->pen();
-	QFont font = painter->font();
-
 	if (option.state & QStyle::State_Selected)
 	{
-		QPen highlightPen = pen;
-		highlightPen.setColor(option.palette.color(QPalette::HighlightedText));
-		painter->setPen(highlightPen);
-
 		painter->fillRect(option.rect, option.palette.color(QPalette::Highlight));
 	}
 	else
@@ -90,61 +88,71 @@ void QtAutocompletionDelegate::paint(QPainter* painter, const QStyleOptionViewIt
 		painter->fillRect(option.rect, option.palette.color(QPalette::Base));
 	}
 
-	QFont higlightFont = font;
-	higlightFont.setWeight(QFont::Bold);
-
 	QString name = index.data().toString();
-	QList<QVariant> indices = index.sibling(index.row(), index.column() + 2).data().toList();
-	int idx = 0;
-
-	int x = 0;
-	int m = option.fontMetrics.width(QLatin1Char('9'));
-	for (int i = 0; i < name.size(); i++)
-	{
-		if (idx < indices.size() && i == indices[idx])
-		{
-			painter->setFont(higlightFont);
-			idx++;
-		}
-		else
-		{
-			painter->setFont(font);
-		}
-
-		painter->drawText(option.rect.adjusted(8 + x, 0, 0, 0), Qt::AlignLeft, name.at(i));
-		x += m;
-	}
-
-	if (font.pixelSize() > 0)
-	{
-		QFont typeFont = font;
-		typeFont.setPixelSize(0.8f * font.pixelSize());
-		painter->setFont(typeFont);
-	}
+	float charWidth = option.fontMetrics.width("FontWidth") / 9.0f;
 
 	QString type = index.sibling(index.row(), index.column() + 1).data().toString();
-	QRect rect = option.rect.adjusted(1, 1, 0, -1);
-	rect.setWidth(5);
 
+	QColor color("#FFE47A");
 	if (type.size())
 	{
-		painter->fillRect(rect, QColor(153, 22, 165));
-		painter->drawText(option.rect.adjusted(0, 0, -3, 0), Qt::AlignRight, type);
+		color = QColor("#CC8D91");
+	}
+
+	QList<QVariant> indices = index.sibling(index.row(), index.column() + 2).data().toList();
+	if (indices.size())
+	{
+		int idx = 0;
+		float x = charWidth + 2;
+		for (int i = 0; i < name.size(); i++)
+		{
+			if (idx < indices.size() && i == indices[idx])
+			{
+				QRect rect = option.rect.adjusted(x, 2, 0, -1);
+				rect.setWidth(charWidth + 1);
+				painter->fillRect(rect, color);
+				idx++;
+			}
+
+			x += charWidth;
+		}
 	}
 	else
 	{
-		painter->fillRect(rect, QColor(172, 150, 0));
+		QRect rect = option.rect.adjusted(0, 2, 0, -1);
+		rect.setWidth(charWidth - 1);
+		painter->fillRect(rect, color);
 	}
 
-	painter->setFont(font);
-	painter->setPen(pen);
+	painter->drawText(option.rect.adjusted(charWidth + 2, -1, 0, 0), Qt::AlignLeft, name);
+
+	if (type.size())
+	{
+		QFont font = painter->font();
+		if (font.pointSize() > 0)
+		{
+			QFont typeFont = font;
+			typeFont.setPointSize(10);
+			painter->setFont(typeFont);
+		}
+
+		QPen pen = painter->pen();
+		QPen typePen = pen;
+		typePen.setColor(QColor("#878787"));
+		painter->setPen(typePen);
+
+		painter->drawText(option.rect.adjusted(0, 3, -charWidth, 0), Qt::AlignRight, type);
+
+		painter->setFont(font);
+		painter->setPen(pen);
+	}
 }
 
 
-QtAutocompletionList::QtAutocompletionList(const std::vector<SearchMatch>& autocompletionList, QWidget* parent)
+QtAutocompletionList::QtAutocompletionList(QWidget* parent)
 	: QCompleter(parent)
 {
-	m_model = std::make_shared<QtAutocompletionModel>(autocompletionList, this);
+	m_model = std::make_shared<QtAutocompletionModel>(this);
 	setModel(m_model.get());
 
 	m_delegate = std::make_shared<QtAutocompletionDelegate>(this);
@@ -152,9 +160,12 @@ QtAutocompletionList::QtAutocompletionList(const std::vector<SearchMatch>& autoc
 	QListView* list = new QListView(parent);
 	list->setItemDelegateForColumn(0, m_delegate.get());
 	list->setObjectName("search_box_popup");
+	list->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Expanding);
+	list->setUniformItemSizes(true);
 	setPopup(list);
 
 	setCaseSensitivity(Qt::CaseInsensitive);
+	// setCompletionMode(QCompleter::UnfilteredPopupCompletion);
 
 	connect(this, SIGNAL(highlighted(const QModelIndex&)), this, SLOT(onHighlighted(const QModelIndex&)), Qt::DirectConnection);
 	connect(this, SIGNAL(activated(const QModelIndex&)), this, SLOT(onActivated(const QModelIndex&)), Qt::DirectConnection);
@@ -164,6 +175,35 @@ QtAutocompletionList::~QtAutocompletionList()
 {
 }
 
+void QtAutocompletionList::completeAt(const QPoint& pos, const std::vector<SearchMatch>& autocompletionList)
+{
+	m_model->setMatchList(autocompletionList);
+
+	QSize minSize(300, 253);
+	QListView* list = dynamic_cast<QListView*>(popup());
+
+	if (!autocompletionList.size())
+	{
+		list->hide();
+		return;
+	}
+
+	setCompletionPrefix("");
+
+	const QModelIndex& index = completionModel()->index(0, 0);
+	list->setCurrentIndex(index);
+
+	complete(QRect(pos.x(), pos.y(), minSize.width(), 1));
+
+	QRect rect = list->visualRect(index);
+	minSize.setHeight(std::min(minSize.height(), m_model->rowCount(index) * rect.height() + 16));
+
+	list->setMinimumSize(minSize);
+
+	list->verticalScrollBar()->setValue(list->verticalScrollBar()->minimum());
+	list->setCurrentIndex(index); // must be set again to avoid flickering
+}
+
 const SearchMatch* QtAutocompletionList::getSearchMatchAt(int idx) const
 {
 	return m_model->getSearchMatchAt(idx);

src/app/qt/element/QtAutocompletionList.h

@@ -17,9 +17,11 @@ class QtAutocompletionModel
 	Q_OBJECT
 
 public:
-	QtAutocompletionModel(const std::vector<SearchMatch>& matchList, QObject* parent = 0);
+	QtAutocompletionModel(QObject* parent = 0);
 	virtual ~QtAutocompletionModel();
 
+	void setMatchList(const std::vector<SearchMatch>& matchList);
+
 	virtual int rowCount(const QModelIndex& parent) const;
 	virtual int columnCount(const QModelIndex& parent) const;
 
@@ -28,7 +30,7 @@ public:
 	const SearchMatch* getSearchMatchAt(int idx) const;
 
 private:
-	const std::vector<SearchMatch>& m_matchList;
+	std::vector<SearchMatch> m_matchList;
 };
 
 
@@ -53,9 +55,11 @@ signals:
 	void matchActivated(const SearchMatch&);
 
 public:
-	QtAutocompletionList(const std::vector<SearchMatch>& autocompletionList, QWidget* parent = 0);
+	QtAutocompletionList(QWidget* parent = 0);
 	virtual ~QtAutocompletionList();
 
+	void completeAt(const QPoint& pos, const std::vector<SearchMatch>& autocompletionList);
+
 	const SearchMatch* getSearchMatchAt(int idx) const;
 
 private slots:

src/app/qt/element/QtSearchBar.cpp

@@ -15,22 +15,35 @@ QtSearchBar::QtSearchBar()
 	layout->setAlignment(Qt::AlignTop);
 	setLayout(layout);
 
+	m_searchBoxContainer = new QWidget(this);
+	m_searchBoxContainer->setObjectName("search_box_container");
+	m_searchBoxContainer->setAttribute(Qt::WA_LayoutUsesWidgetRect); // fixes layouting on Mac
+	m_searchBoxContainer->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);
+	layout->addWidget(m_searchBoxContainer);
+
+	QBoxLayout* innerLayout = new QHBoxLayout();
+	innerLayout->setContentsMargins(7, 3, 5, 3);
+	m_searchBoxContainer->setLayout(innerLayout);
+
+	m_searchBox = new QtSmartSearchBox(m_searchBoxContainer);
+	m_searchBox->setObjectName("search_box");
+	m_searchBox->setAttribute(Qt::WA_LayoutUsesWidgetRect); // fixes layouting on Mac
+	m_searchBox->setAttribute(Qt::WA_MacShowFocusRect, 0); // remove blue focus box on Mac
+	m_searchBox->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Minimum);
+	innerLayout->addWidget(m_searchBox);
+
 	m_searchButton = new QPushButton(this);
 	m_searchButton->setObjectName("search_button");
 	m_searchButton->setAttribute(Qt::WA_LayoutUsesWidgetRect); // fixes layouting on Mac
+	m_searchButton->setIcon(QIcon("data/gui/search_view/images/search.png"));
 	layout->addWidget(m_searchButton);
 
-	m_searchBox = new QtSmartSearchBox(this);
-	m_searchBox->setObjectName("search_box");
-	m_searchBox->setAttribute(Qt::WA_LayoutUsesWidgetRect); // fixes layouting on Mac
-	layout->addWidget(m_searchBox);
-
-	m_caseSensitiveButton = new QPushButton(this);
-	m_caseSensitiveButton->setObjectName("case_sensitive_button");
-	m_caseSensitiveButton->setCheckable(true);
-	m_caseSensitiveButton->setToolTip("case sensitive");
-	m_caseSensitiveButton->setAttribute(Qt::WA_LayoutUsesWidgetRect); // fixes layouting on Mac
-	layout->addWidget(m_caseSensitiveButton);
+	// m_caseSensitiveButton = new QPushButton(this);
+	// m_caseSensitiveButton->setObjectName("case_sensitive_button");
+	// m_caseSensitiveButton->setCheckable(true);
+	// m_caseSensitiveButton->setToolTip("case sensitive");
+	// m_caseSensitiveButton->setAttribute(Qt::WA_LayoutUsesWidgetRect); // fixes layouting on Mac
+	// layout->addWidget(m_caseSensitiveButton);
 
 	connect(m_searchButton, SIGNAL(clicked()), m_searchBox, SLOT(search()));
 }

src/app/qt/element/QtSearchBar.h

@@ -27,9 +27,10 @@ public:
 	QAbstractItemView* getCompleterPopup();
 
 private:
+	QWidget* m_searchBoxContainer; // used for correct clipping inside the search box
 	QtSmartSearchBox* m_searchBox;
 	QPushButton* m_searchButton;
-	QPushButton* m_caseSensitiveButton;
+	// QPushButton* m_caseSensitiveButton;
 };
 
 #endif // QT_SEARCH_BOX_H

src/app/qt/element/QtSmartSearchBox.cpp

@@ -41,10 +41,20 @@ QtSmartSearchBox::QtSmartSearchBox(QWidget* parent)
 	, m_shiftKeyDown(false)
 	, m_mousePressed(false)
 {
+	m_highlightRect = new QWidget(this);
+	m_highlightRect->setGeometry(0, 0, 0, 0);
+	m_highlightRect->setObjectName("search_box_highlight");
+
 	connect(this, SIGNAL(returnPressed()), this, SLOT(search()), Qt::QueuedConnection);
 	connect(this, SIGNAL(textEdited(const QString&)), this, SLOT(onTextEdited(const QString&)));
 	connect(this, SIGNAL(textChanged(const QString&)), this, SLOT(onTextChanged(const QString&)));
 
+	QCompleter* completer = new QtAutocompletionList(this);
+	setCompleter(completer);
+
+	connect(completer, SIGNAL(matchHighlighted(const SearchMatch&)), this, SLOT(onAutocompletionHighlighted(const SearchMatch&)), Qt::DirectConnection);
+	connect(completer, SIGNAL(matchActivated(const SearchMatch&)), this, SLOT(onAutocompletionActivated(const SearchMatch&)), Qt::DirectConnection);
+
 	updatePlaceholder();
 }
 
@@ -54,20 +64,8 @@ QtSmartSearchBox::~QtSmartSearchBox()
 
 void QtSmartSearchBox::setAutocompletionList(const std::vector<SearchMatch>& autocompletionList)
 {
-	if (!autocompletionList.size())
-	{
-		setCompleter(0);
-		return;
-	}
-
-	QCompleter* completer = new QtAutocompletionList(autocompletionList, this);
-	setCompleter(completer);
-	completer->complete(QRect(textMargins().left() + 3, height(), 300, 1));
-
-	connect(completer, SIGNAL(matchHighlighted(const SearchMatch&)), this, SLOT(onAutocompletionHighlighted(const SearchMatch&)), Qt::DirectConnection);
-	connect(completer, SIGNAL(matchActivated(const SearchMatch&)), this, SLOT(onAutocompletionActivated(const SearchMatch&)), Qt::DirectConnection);
-
-	completer->popup()->setCurrentIndex(completer->completionModel()->index(0, 0));
+	QtAutocompletionList* completer = dynamic_cast<QtAutocompletionList*>(this->completer());
+	completer->completeAt(QPoint(textMargins().left() + 3, height() + 3), autocompletionList);
 }
 
 void QtSmartSearchBox::setQuery(const std::string& text)
@@ -83,6 +81,7 @@ void QtSmartSearchBox::setFocus()
 {
 	QLineEdit::setFocus(Qt::ShortcutFocusReason);
 	selectAllElementsWith(true);
+	layoutElements();
 }
 
 bool QtSmartSearchBox::event(QEvent *event)
@@ -90,7 +89,7 @@ bool QtSmartSearchBox::event(QEvent *event)
 	if (event->type() == QEvent::KeyPress)
 	{
 		QKeyEvent *keyEvent = static_cast<QKeyEvent*>(event);
-		if (keyEvent->key() == Qt::Key_Tab && completer() && completer()->popup()->isVisible())
+		if (keyEvent->key() == Qt::Key_Tab && completer()->popup()->isVisible())
 		{
 			onAutocompletionActivated(m_highlightedMatch);
 			return true;
@@ -267,6 +266,7 @@ void QtSmartSearchBox::mouseMoveEvent(QMouseEvent* event)
 		m_elements[i]->setChecked(lo < widgetX && widgetX < hi);
 	}
 
+	editTextToElement();
 	layoutElements();
 }
 
@@ -306,7 +306,6 @@ void QtSmartSearchBox::mouseReleaseEvent(QMouseEvent* event)
 
 	if (pos - m_cursorIndex != 0)
 	{
-		editTextToElement();
 		moveCursor(pos - m_cursorIndex);
 	}
 	else if (hasSelected)
@@ -358,12 +357,6 @@ void QtSmartSearchBox::onTextChanged(const QString& text)
 	if (!m_allowTextChange)
 	{
 		setText(m_oldText);
-
-		// This prevents the completer from disappearing while navigating the completion popup.
-		if (completer() && !completer()->signalsBlocked())
-		{
-			completer()->popup()->show();
-		}
 	}
 	else
 	{
@@ -391,8 +384,6 @@ void QtSmartSearchBox::onAutocompletionActivated(const SearchMatch& match)
 		textToToken(name);
 		updateElements();
 	}
-
-	completer()->blockSignals(true);
 }
 
 void QtSmartSearchBox::onElementSelected(QtQueryElement* element)
@@ -462,7 +453,7 @@ void QtSmartSearchBox::textToToken(std::string text)
 		return;
 	}
 
-	if (completer())
+	if (completer()->popup()->isVisible())
 	{
 		const SearchMatch* match = dynamic_cast<QtAutocompletionList*>(completer())->getSearchMatchAt(0);
 		if (match && utility::equalsCaseInsensitive(text, match->fullName))
@@ -550,25 +541,43 @@ void QtSmartSearchBox::layoutElements()
 	QString cursorText = text();
 	cursorText.resize(cursorPosition());
 
-	int x = 7;
+	int x = 5;
 	int editX = x;
-	int cursorX = fontMetrics().width(cursorText) + x + 5;
+	int cursorX = fontMetrics().width(cursorText) + x;
 	std::vector<int> elementX;
 
+	int highlightBegin = 0;
+	int highlightEnd = 0;
+
 	for (size_t i = 0; i <= m_elements.size(); i++)
 	{
 		if (!hasSelected && i == m_cursorIndex)
 		{
-			editX = x - 9;
+			editX = x - 5;
 			cursorX += editX;
+			if (i != m_elements.size())
+			{
+				cursorX += 15;
+			}
 			x += fontMetrics().width(text());
 		}
 
 		if (i < m_elements.size())
 		{
 			QtQueryElement* button = m_elements[i].get();
+
+			if (button->isChecked() && !highlightBegin)
+			{
+				highlightBegin = x - 2;
+			}
+
 			elementX.push_back(x);
 			x += button->minimumSizeHint().width() + 5;
+
+			if (button->isChecked())
+			{
+				highlightEnd = x - 3;
+			}
 		}
 	}
 
@@ -589,11 +598,13 @@ void QtSmartSearchBox::layoutElements()
 	if (hasSelected)
 	{
 		setTextMargins(width() + 10, 0, 0, 0);
+		m_highlightRect->setGeometry(highlightBegin + offsetX, 0, highlightEnd - highlightBegin, height());
 	}
 	else
 	{
 		QMargins margins = textMargins();
 		setTextMargins(editX + offsetX, margins.top(), margins.right(), margins.bottom());
+		m_highlightRect->setGeometry(0, 0, 0, 0);
 	}
 }
 
@@ -712,8 +723,5 @@ void QtSmartSearchBox::requestAutoCompletions() const
 
 void QtSmartSearchBox::hideAutoCompletions()
 {
-	if (completer())
-	{
-		completer()->popup()->hide();
-	}
+	completer()->popup()->hide();
 }

src/app/qt/element/QtSmartSearchBox.h

@@ -99,6 +99,8 @@ private:
 	bool m_shiftKeyDown;
 	bool m_mousePressed;
 	int m_mouseX;
+
+	QWidget* m_highlightRect;
 };
 
 #endif // QT_SMART_SEARCH_BOX_H