Improvements to SelectTemplateDialog (#109 and #142)

- Added side pane for product preview and information - Product selection is done with a separate pushbutton, so that user gets a chance to preview the complete product information before committing to the selection - Supports two view modes: Grid View and List View - View mode is automatically stored in Settings, so it will default to the user's prefered mode - Should address most concerns in #109 and #142
2025-05-26 19:23:36 -04:00
parent 43cbc8fc3c
commit 4c0ce1146a
26 changed files with 1073 additions and 376 deletions
@@ -541,6 +541,26 @@ namespace glabels
 			}
 		};

+
+		class ViewGrid : public QIcon
+		{
+		public:
+			ViewGrid()
+			{
+				addPixmap( QPixmap( ":icons/flat/22x22/glabels-view-grid.svg" ) );
+			}
+		};
+
+
+		class ViewList : public QIcon
+		{
+		public:
+			ViewList()
+			{
+				addPixmap( QPixmap( ":icons/flat/22x22/glabels-view-list.svg" ) );
+			}
+		};
+
 	}

 }
@@ -18,6 +18,7 @@
 *  along with gLabels-qt.  If not, see <http://www.gnu.org/licenses/>.
 */

+
 #include "PropertiesView.h"

 #include "SelectProductDialog.h"
@@ -100,11 +101,12 @@ namespace glabels
 	///
 	void PropertiesView::onLabelSizeChanged()
 	{
-		const model::Template* tmplate   = mModel->tmplate();
-		const model::Frame*    frame     = tmplate->frames().first();
-		bool                   isRotated = mModel->rotate();
+		auto* tmplate   = mModel->tmplate();
+		auto* frame     = tmplate->frames().first();
+		bool  isRotated = mModel->rotate();

 		preview->setTemplate( tmplate );
+		preview->setShowArrow( true );
 		preview->setRotate( isRotated );

 		const model::Vendor* vendor = model::Db::lookupVendorFromName( tmplate->brand() );
@@ -129,15 +131,9 @@ namespace glabels
 		}

 		descriptionLabel->setText( tmplate->description() );
-
-		QString pgSizeString = model::Db::lookupPaperNameFromId( tmplate->paperId() );
-		pageSizeLabel->setText( pgSizeString );
-
-		QString labelSizeString = frame->sizeDescription( mUnits );
-		labelSizeLabel->setText( labelSizeString );
-
-		QString layoutString = frame->layoutDescription();
-		layoutLabel->setText( layoutString );
+		pageSizeLabel->setText( tmplate->paperDescription( mUnits ) );
+		labelSizeLabel->setText( frame->sizeDescription( mUnits ) );
+		layoutLabel->setText( frame->layoutDescription() );

 		QStringList list = model::Db::getNameListOfSimilarTemplates( tmplate->name() );
 		if ( list.isEmpty() )
@@ -18,8 +18,10 @@
 *  along with gLabels-qt.  If not, see <http://www.gnu.org/licenses/>.
 */

+
 #include "SelectProductDialog.h"

+#include "Icons.h"
 #include "NotebookUtil.h"
 #include "TemplatePickerItem.h"

@@ -36,9 +38,10 @@ namespace glabels
 	/// Constructor
 	///
 	SelectProductDialog::SelectProductDialog( QWidget *parent )
-		: QDialog(parent), mCanceled(false)
+		: QDialog(parent)
 	{
 		setupUi( this );
+		productInfoWidget->setVisible( false );

 		pageSizeIsoCheck->setChecked( model::Settings::searchIsoPaperSizes() );
 		pageSizeUsCheck->setChecked( model::Settings::searchUsPaperSizes() );
@@ -65,6 +68,17 @@ namespace glabels

 		NotebookUtil::establishSize( modeNotebook );

+		if ( templatePicker->mode() == QListView::IconMode )
+		{
+			viewModeButton->setIcon( Icons::ViewList() );
+			viewModeButton->setToolTip( tr( "List View" ) );
+		}
+		else
+		{
+			viewModeButton->setIcon( Icons::ViewGrid() );
+			viewModeButton->setToolTip( tr( "Grid View" ) );
+		}
+		
 		QList<model::Template*> tmplates = model::Db::templates();
 		templatePicker->setTemplates( tmplates );

@@ -82,7 +96,7 @@ namespace glabels
 	///
 	const model::Template* SelectProductDialog::tmplate() const
 	{
-		if ( !mCanceled )
+		if ( mHasSelection )
 		{
 			return templatePicker->selectedTemplate();
 		}
@@ -189,13 +203,83 @@ namespace glabels
 	}


+	///
+	/// View Mode Button Clicked Slot
+	///
+	void SelectProductDialog::onViewModeButtonClicked()
+	{
+		if ( templatePicker->mode() == QListView::IconMode )
+		{
+			templatePicker->setMode( QListView::ListMode );
+
+			viewModeButton->setIcon( Icons::ViewList() );
+			viewModeButton->setToolTip( tr( "List View" ) );
+		}
+		else
+		{
+			templatePicker->setMode( QListView::IconMode );
+
+			viewModeButton->setIcon( Icons::ViewGrid() );
+			viewModeButton->setToolTip( tr( "Grid View" ) );
+		}
+	}
+
+
 	///
 	/// Template Picker Selection Changed Slot
 	///
 	void SelectProductDialog::onTemplatePickerSelectionChanged()
 	{
-		// Delay close.  This should make the selection more apparent to the user.
-		mTimer.start( 125, this );
+		auto* tmplate   = templatePicker->selectedTemplate();
+		if ( !tmplate )
+		{
+			productInfoWidget->setVisible( false );
+			selectButton->setEnabled( false );
+			return;
+		}
+		
+		auto* frame     = tmplate->frames().first();
+
+		preview->setTemplate( tmplate );
+
+		const model::Vendor* vendor = model::Db::lookupVendorFromName( tmplate->brand() );
+		if ( (vendor != nullptr) && (vendor->url() != nullptr) )
+		{
+			QString markup = QString( "<a href='%1'>%2</a>" ).arg( vendor->url(), vendor->name() );
+			vendorLabel->setText( markup );
+		}
+		else
+		{
+			vendorLabel->setText( tmplate->brand() );
+		}
+
+		if ( tmplate->productUrl() != nullptr )
+		{
+			QString markup = QString( "<a href='%1'>%2</a>" ).arg( tmplate->productUrl(), tmplate->part() );
+			partLabel->setText( markup );
+		}
+		else
+		{
+			partLabel->setText( tmplate->part() );
+		}
+
+		descriptionLabel->setText( tmplate->description() );
+		pageSizeLabel->setText( tmplate->paperDescription( model::Settings::units() ) );
+		labelSizeLabel->setText( frame->sizeDescription( model::Settings::units() ) );
+		layoutLabel->setText( frame->layoutDescription() );
+
+		productInfoWidget->setVisible( true );
+		selectButton->setEnabled( true );
+	}
+
+
+	///
+	/// Select Button Clicked Slot
+	///
+	void SelectProductDialog::onSelectButtonClicked()
+	{
+		mHasSelection = true;
+		close();
 	}


@@ -204,17 +288,6 @@ namespace glabels
 	///
 	void SelectProductDialog::onCancelButtonClicked()
 	{
-		mCanceled = true;
-		close();
-	}
-
-
-	///
-	/// Cancel Button Clicked Slot
-	///
-	void SelectProductDialog::timerEvent( QTimerEvent *event )
-	{
-		mTimer.stop();
 		close();
 	}

@@ -24,8 +24,6 @@

 #include "ui_SelectProductDialog.h"

-#include <QBasicTimer>
-

 namespace glabels
 {
@@ -60,17 +58,12 @@ namespace glabels
 		void onPageSizeCheckClicked();
 		void onCategoryRadioClicked();
 		void onCategoryCheckClicked();
+		void onViewModeButtonClicked();
 		void onTemplatePickerSelectionChanged();
+		void onSelectButtonClicked();
 		void onCancelButtonClicked();

 		
-		/////////////////////////////////
-		// Events
-		/////////////////////////////////
-	protected:
-		void timerEvent(QTimerEvent *event) override;
-
-
 		/////////////////////////////////
 		// Private methods
 		/////////////////////////////////
@@ -82,14 +75,12 @@ namespace glabels
 		// Private data
 		/////////////////////////////////
 	private:
-		QBasicTimer mTimer;
-
 		QMap<QCheckBox*,QString> mCheckToCategoryMap;
 		QList<QCheckBox*>        mCheckList;
 		QStringList              mCategoryIdList;

-		bool mCanceled;
-
+		bool                     mHasSelection { false };
+	  
 	};

 }
@@ -18,6 +18,7 @@
 *  along with gLabels-qt.  If not, see <http://www.gnu.org/licenses/>.
 */

+
 #include "SimplePreview.h"

 #include "RollTemplatePath.h"
@@ -61,7 +62,7 @@ namespace glabels
 	/// Constructor
 	///
 	SimplePreview::SimplePreview( QWidget *parent )
-		: QGraphicsView(parent), mTmplate(nullptr), mRotateFlag(false)
+		: QGraphicsView(parent)
 	{
 		mScene = new QGraphicsScene();
 		setScene( mScene );
@@ -84,6 +85,16 @@ namespace glabels
 	}


+	///
+	/// Show Arrow Property Setter
+	///
+	void SimplePreview::setShowArrow( bool showArrow )
+	{
+		mShowArrow = showArrow;
+		update();
+	}
+
+
 	///
 	/// Rotate Property Setter
 	///
@@ -132,7 +143,10 @@ namespace glabels

 			drawPaper();
 			drawLabels();
-			drawArrow();
+			if ( mShowArrow )
+			{
+				drawArrow();
+			}
 		}
 	}

@@ -52,6 +52,7 @@ namespace glabels
 		/////////////////////////////////
 	public:
 		void setTemplate( const model::Template *tmplate );
+		void setShowArrow( bool showArrow );
 		void setRotate( bool rotateFlag );


@@ -77,10 +78,11 @@ namespace glabels
 		// Private Data
 		/////////////////////////////////
 	private:
-		const model::Template* mTmplate;
-		bool                   mRotateFlag;
+		const model::Template* mTmplate    { nullptr };
+		bool                   mShowArrow  { false };
+		bool                   mRotateFlag { false };

-		QGraphicsScene* mScene;
+		QGraphicsScene*        mScene { nullptr };

 	};

@@ -18,11 +18,78 @@
 *  along with gLabels-qt.  If not, see <http://www.gnu.org/licenses/>.
 */

+
 #include "TemplatePicker.h"

 #include "TemplatePickerItem.h"

+#include "model/Settings.h"
+
+#include <QAbstractTextDocumentLayout>
+#include <QApplication>
 #include <QIcon>
+#include <QPainter>
+#include <QStyledItemDelegate>
+
+#include <algorithm>
+
+
+namespace
+{
+
+	//
+	// Custom item delegate to render text as HTML in List View
+	//
+	// Based on solutions at
+	// https://stackoverflow.com/questions/1956542/how-to-make-item-view-render-rich-html-text-in-qt/1956781#1956781
+	// Note:  assumes that the text rectangle does not need to be resized, so does not reimplement sizeHint().
+	//        This delegate does not work correctly in IconMode, and may not work correctly in other applications,
+	//        for instance, when the height is not dominated by the icon.
+	//
+	class HtmlDelegate : public QStyledItemDelegate
+	{
+	protected:
+		void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const override;
+	};
+
+
+	void HtmlDelegate::paint( QPainter*                   painter,
+	                          const QStyleOptionViewItem& option,
+	                          const QModelIndex&          index) const
+	{
+		auto opt = option;
+		initStyleOption( &opt, index );
+
+		QStyle *style = opt.widget? opt.widget->style() : QApplication::style();
+
+		QTextDocument doc;
+		doc.setHtml( opt.text );
+
+		/// Painting everything other than text
+		opt.text = QString();
+		style->drawControl( QStyle::CE_ItemViewItem, &opt, painter );
+
+		QAbstractTextDocumentLayout::PaintContext ctx;
+
+		// Highlighting text if item is selected
+		if ( opt.state & QStyle::State_Selected )
+		{
+			ctx.palette.setColor( QPalette::Text, opt.palette.color( QPalette::Active, QPalette::HighlightedText ) );
+		}
+		else
+		{
+			ctx.palette.setColor( QPalette::Text, opt.palette.color( QPalette::Active, QPalette::Text ) );
+		}
+
+		QRect textRect = style->subElementRect( QStyle::SE_ItemViewItemText, &opt );
+		painter->save();
+		painter->translate( textRect.topLeft() );
+		painter->setClipRect( textRect.translated( -textRect.topLeft() ) );
+		doc.documentLayout()->draw( painter, ctx );
+		painter->restore();
+	}
+
+}


 namespace glabels
@@ -31,29 +98,83 @@ namespace glabels
 	///
 	/// Constructor
 	///
-	TemplatePicker::TemplatePicker( QWidget *parent ) : QListWidget(parent)
+	TemplatePicker::TemplatePicker( QWidget* parent ) : QListWidget(parent)
 	{
-		setViewMode( QListView::IconMode );
 		setResizeMode( QListView::Adjust );
-		setSpacing( 24 );
-		setWordWrap( true );
 		setUniformItemSizes( true );
-		setIconSize( QSize(TemplatePickerItem::SIZE, TemplatePickerItem::SIZE) );
+		setWordWrap( true );
+		setIconSize( QSize( TemplatePickerItem::SIZE, TemplatePickerItem::SIZE ) );
+
+		setMode( model::Settings::templatePickerMode() );
 	}


 	///
 	/// Set List of Templates to Pick From
 	///
-	void TemplatePicker::setTemplates( const QList <model::Template*> &tmplates )
+	void TemplatePicker::setTemplates( const QList<model::Template*>& tmplates )
 	{
+		auto mode = model::Settings::templatePickerMode();
+		
 		foreach (model::Template *tmplate, tmplates)
 		{
-			new TemplatePickerItem( tmplate, this );
+			new TemplatePickerItem( tmplate, mode, this );
 		}
 	}


+	///
+	/// Set View Mode
+	///
+	void TemplatePicker::setMode( QListView::ViewMode mode )
+	{
+		model::Settings::setTemplatePickerMode( mode );
+		
+		for ( unsigned int i = 0; i < count(); i++ )
+		{
+			if (auto* tItem = dynamic_cast<TemplatePickerItem *>(item(i)))
+			{
+				tItem->setMode( mode );
+			}
+		}
+
+		switch ( mode )
+		{
+			
+		case QListView::IconMode:
+			setItemDelegate( new QStyledItemDelegate() ); // Use default delegate
+			setViewMode( QListView::IconMode );
+			setSpacing( 24 );
+			break;
+
+		case QListView::ListMode:
+			setItemDelegate( new HtmlDelegate() );
+			setViewMode( QListView::ListMode );
+			setSpacing( 8 );
+			break;
+			
+		default:
+			qWarning() << "TemplatePicker: unknown mode!";
+			break;
+
+		}
+
+		if ( auto* selected = selectedItem() )
+		{
+			scrollToItem( selected, QAbstractItemView::PositionAtCenter );
+		}
+	}
+
+	
+	///
+	/// Get current View Mode
+	///
+	QListView::ViewMode TemplatePicker::mode() const
+	{
+		return model::Settings::templatePickerMode();
+	}
+
+
 	///
 	/// Apply Filter to Narrow Template Choices by search criteria
 	///
@@ -61,9 +182,9 @@ namespace glabels
 	                                  bool isoMask, bool usMask, bool otherMask,
 	                                  bool anyCategory, const QStringList& categoryIds )
 	{
-		foreach ( QListWidgetItem *item, findItems( "*", Qt::MatchWildcard ) )
+		for ( unsigned int i = 0; i < count(); i++ )
 		{
-			if (auto *tItem = dynamic_cast<TemplatePickerItem *>(item))
+			if (auto* tItem = dynamic_cast<TemplatePickerItem *>(item(i)))
 			{
 				bool nameMask = tItem->tmplate()->name().contains( searchString, Qt::CaseInsensitive );
 		
@@ -89,15 +210,20 @@ namespace glabels

 				if (  nameMask && sizeMask && categoryMask )
 				{
-					item->setHidden( false );
+					tItem->setHidden( false );
 				}
 				else
 				{
-					item->setHidden( true );
-					item->setSelected( false );
+					tItem->setHidden( true );
+					tItem->setSelected( false );
 				}
 			}
 		}
+
+		if ( auto* selected = selectedItem() )
+		{
+			scrollToItem( selected, QAbstractItemView::PositionAtCenter );
+		}
 	}


@@ -106,9 +232,9 @@ namespace glabels
 	///
 	void TemplatePicker::applyFilter( const QStringList& names )
 	{
-		foreach ( QListWidgetItem *item, findItems( "*", Qt::MatchWildcard ) )
+		for ( unsigned int i = 0; i < count(); i++ )
 		{
-			if (auto *tItem = dynamic_cast<TemplatePickerItem *>(item))
+			if (auto *tItem = dynamic_cast<TemplatePickerItem *>(item(i)))
 			{
 				bool match = false;
 				foreach ( QString name, names )
@@ -122,33 +248,50 @@ namespace glabels

 				if (  match )
 				{
-					item->setHidden( false );
+					tItem->setHidden( false );
 				}
 				else
 				{
-					item->setHidden( true );
-					item->setSelected( false );
+					tItem->setHidden( true );
+					tItem->setSelected( false );
 				}
 			}
 		}
+
+		if ( auto* selected = selectedItem() )
+		{
+			scrollToItem( selected, QAbstractItemView::PositionAtCenter );
+		}
 	}


 	///
 	/// Get Currently Selected Template
 	///
-	const model::Template *TemplatePicker::selectedTemplate()
+	const model::Template* TemplatePicker::selectedTemplate() const
 	{
-		QList<QListWidgetItem *> items = selectedItems();
-		if ( !items.isEmpty() )
+		if ( auto* tItem = selectedItem() )
 		{
-			if (auto *tItem = dynamic_cast<TemplatePickerItem*>(items.first()))
-			{
-				return tItem->tmplate();
-			}
+			return tItem->tmplate();
 		}
 		
 		return nullptr;
 	}

+
+	///
+	/// Get Currently Selected Item
+	///
+	TemplatePickerItem* TemplatePicker::selectedItem() const
+	{
+		QList<QListWidgetItem*> items = selectedItems();
+		if ( !items.isEmpty() )
+		{
+			return dynamic_cast<TemplatePickerItem*>( items.first() );
+		}
+		
+		return nullptr;
+	}
+
+
 } // namespace glabels
@@ -22,6 +22,8 @@
 #define TemplatePicker_h


+#include "TemplatePickerItem.h"
+
 #include "model/Template.h"

 #include <QList>
@@ -38,19 +40,21 @@ namespace glabels
 	{
 		Q_OBJECT

-
 		/////////////////////////////////
 		// Life Cycle
 		/////////////////////////////////
 	public:
-		TemplatePicker( QWidget *parent = nullptr );
+		TemplatePicker( QWidget* parent = nullptr );


 		/////////////////////////////////
 		// Properties
 		/////////////////////////////////
 	public:
-		void setTemplates( const QList <model::Template*> &tmplates );
+		void setTemplates( const QList<model::Template*>& tmplates );
+
+		void setMode( QListView::ViewMode mode );
+		QListView::ViewMode mode() const;


 		/////////////////////////////////
@@ -62,7 +66,9 @@ namespace glabels

 		void applyFilter( const QStringList& names );

-		const model::Template *selectedTemplate();
+		const model::Template* selectedTemplate() const;
+		TemplatePickerItem*    selectedItem() const;
+		

 	};

@@ -18,10 +18,13 @@
 *  along with gLabels-qt.  If not, see <http://www.gnu.org/licenses/>.
 */

+
 #include "TemplatePickerItem.h"

 #include "MiniPreviewPixmap.h"

+#include "model/Settings.h"
+
 #include <QHBoxLayout>
 #include <QIcon>
 #include <QListWidgetItem>
@@ -33,19 +36,49 @@ namespace glabels
 	///
 	/// Constructor
 	///
-	TemplatePickerItem::TemplatePickerItem( model::Template *tmplate, QListWidget *parent )
-		: QListWidgetItem(parent)
+	TemplatePickerItem::TemplatePickerItem( model::Template*    tmplate,
+	                                        QListView::ViewMode mode,
+	                                        QListWidget*        parent )
+		: QListWidgetItem( parent )
 	{
 		mTmplate = tmplate;

 		setIcon( QIcon( MiniPreviewPixmap( tmplate, SIZE, SIZE ) ) );
-		setText( tmplate->name() );
-		setToolTip( tmplate->name() );
+		setMode( mode );
 		
 		setFlags( Qt::ItemIsSelectable | Qt::ItemIsEnabled );
 	}


+	///
+	/// Configure for given View Mode
+	///
+	void TemplatePickerItem::setMode( QListView::ViewMode mode )
+	{
+		auto* frame = mTmplate->frames().first();
+
+		switch ( mode )
+		{
+			
+		case QListView::IconMode:
+			setText( mTmplate->name() );
+			break;
+
+		case QListView::ListMode:
+			setText( "<b>" + mTmplate->name() + "</b><br/>" +
+			         mTmplate->description() + "<br/>" +
+			         frame->sizeDescription( model::Settings::units() ) + "<br/>" +
+			         frame->layoutDescription() );
+			break;
+			
+		default:
+			qWarning() << "TemplatePickerItem: unknown mode!";
+			break;
+
+		}
+	}
+
+
 	///
 	/// Template Property Getter
 	///
@@ -39,11 +39,21 @@ namespace glabels
 	public:
 		static const int SIZE = 80;

+		
 		/////////////////////////////////
 		// Life Cycle
 		/////////////////////////////////
 	public:
-		TemplatePickerItem( model::Template *tmplate, QListWidget *parent = nullptr );
+		TemplatePickerItem( model::Template*    tmplate,
+		                    QListView::ViewMode mode,
+		                    QListWidget*        parent = nullptr );
+
+
+		/////////////////////////////////
+		// Manipulate widget
+		/////////////////////////////////
+	public:
+		void setMode( QListView::ViewMode mode );


 		/////////////////////////////////
@@ -63,6 +63,8 @@
 	<file>icons/flat/22x22/glabels-valign-text-bottom.svg</file>
 	<file>icons/flat/22x22/glabels-valign-text-middle.svg</file>
 	<file>icons/flat/22x22/glabels-valign-text-top.svg</file>
+	<file>icons/flat/22x22/glabels-view-grid.svg</file>
+	<file>icons/flat/22x22/glabels-view-list.svg</file>
 	<file>icons/flat/22x22/glabels-zoom-in.svg</file>
 	<file>icons/flat/22x22/glabels-zoom-one-to-one.svg</file>
 	<file>icons/flat/22x22/glabels-zoom-out.svg</file>
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="22" height="22" >
+
+  <rect x="3" y="3" width="7" height="7"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="12" y="3" width="7" height="7"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="3" y="12" width="7" height="7"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="12" y="12" width="7" height="7"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+</svg>
@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="22" height="22" >
+
+  <rect x="3" y="3" width="4" height="4"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="3" y="9" width="4" height="4"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="3" y="15" width="4" height="4"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="9" y="4" width="10" height="2"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="9" y="10" width="10" height="2"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+  <rect x="9" y="16" width="10" height="2"
+     style="fill:#333333;fill-opacity:1;stroke:none" />
+
+</svg>
@@ -6,8 +6,8 @@
   <rect>
    <x>0</x>
    <y>0</y>
-    <width>997</width>
-    <height>823</height>
+    <width>1078</width>
+    <height>796</height>
   </rect>
  </property>
  <property name="sizePolicy">
@@ -22,273 +22,505 @@
  <property name="sizeGripEnabled">
   <bool>true</bool>
  </property>
-  <layout class="QHBoxLayout" name="horizontalLayout_4">
+  <layout class="QVBoxLayout" name="verticalLayout_6">
   <item>
-    <layout class="QVBoxLayout" name="verticalLayout_3">
+    <layout class="QHBoxLayout" name="horizontalLayout_2" stretch="0,1,0">
     <item>
-      <layout class="QHBoxLayout" name="horizontalLayout_2">
-       <item>
-        <widget class="QTabWidget" name="modeNotebook">
-         <property name="sizePolicy">
-          <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
-           <horstretch>0</horstretch>
-           <verstretch>0</verstretch>
-          </sizepolicy>
-         </property>
-         <property name="currentIndex">
-          <number>0</number>
-         </property>
-         <widget class="QWidget" name="search">
-          <attribute name="title">
-           <string>Search all</string>
-          </attribute>
-          <layout class="QGridLayout" name="gridLayout_2">
-           <item row="1" column="0">
-            <layout class="QVBoxLayout" name="verticalLayout_2">
+      <widget class="QTabWidget" name="modeNotebook">
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Preferred" vsizetype="Expanding">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="currentIndex">
+        <number>0</number>
+       </property>
+       <widget class="QWidget" name="search">
+        <attribute name="title">
+         <string>Search all</string>
+        </attribute>
+        <layout class="QGridLayout" name="gridLayout_2">
+         <item row="1" column="0">
+          <layout class="QVBoxLayout" name="verticalLayout_2">
+           <item>
+            <layout class="QHBoxLayout" name="horizontalLayout_3">
+             <property name="topMargin">
+              <number>6</number>
+             </property>
+             <property name="bottomMargin">
+              <number>6</number>
+             </property>
             <item>
-              <layout class="QHBoxLayout" name="horizontalLayout_3">
-               <property name="topMargin">
-                <number>6</number>
-               </property>
-               <property name="bottomMargin">
-                <number>6</number>
-               </property>
-               <item>
-                <widget class="QLineEdit" name="searchEntry">
-                 <property name="sizePolicy">
-                  <sizepolicy hsizetype="Maximum" vsizetype="Fixed">
-                   <horstretch>0</horstretch>
-                   <verstretch>0</verstretch>
-                  </sizepolicy>
-                 </property>
-                 <property name="minimumSize">
-                  <size>
-                   <width>220</width>
-                   <height>0</height>
-                  </size>
-                 </property>
-                 <property name="placeholderText">
-                  <string>Search</string>
-                 </property>
-                 <property name="clearButtonEnabled">
-                  <bool>true</bool>
-                 </property>
-                </widget>
-               </item>
-              </layout>
-             </item>
-             <item>
-              <widget class="QGroupBox" name="groupBox">
+              <widget class="QLineEdit" name="searchEntry">
               <property name="sizePolicy">
-                <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+                <sizepolicy hsizetype="Maximum" vsizetype="Fixed">
                 <horstretch>0</horstretch>
                 <verstretch>0</verstretch>
                </sizepolicy>
               </property>
               <property name="minimumSize">
                <size>
-                 <width>0</width>
+                 <width>220</width>
                 <height>0</height>
                </size>
               </property>
-               <property name="autoFillBackground">
-                <bool>false</bool>
+               <property name="placeholderText">
+                <string>Search</string>
               </property>
-               <property name="title">
-                <string>Filter by paper size</string>
+               <property name="clearButtonEnabled">
+                <bool>true</bool>
               </property>
-               <property name="flat">
-                <bool>false</bool>
-               </property>
-               <property name="checkable">
-                <bool>false</bool>
-               </property>
-               <layout class="QVBoxLayout" name="verticalLayout_5">
-                <item>
-                 <layout class="QVBoxLayout" name="verticalLayout">
-                  <property name="spacing">
-                   <number>3</number>
-                  </property>
-                  <item>
-                   <widget class="QCheckBox" name="pageSizeIsoCheck">
-                    <property name="text">
-                     <string>ISO sizes</string>
-                    </property>
-                   </widget>
-                  </item>
-                  <item>
-                   <widget class="QCheckBox" name="pageSizeUsCheck">
-                    <property name="text">
-                     <string>US sizes</string>
-                    </property>
-                   </widget>
-                  </item>
-                  <item>
-                   <widget class="QCheckBox" name="pageSizeOtherCheck">
-                    <property name="text">
-                     <string>Other</string>
-                    </property>
-                   </widget>
-                  </item>
-                 </layout>
-                </item>
-               </layout>
-              </widget>
-             </item>
-             <item>
-              <widget class="QGroupBox" name="groupBox_3">
-               <property name="title">
-                <string>Filter by category</string>
-               </property>
-               <layout class="QVBoxLayout" name="verticalLayout_4">
-                <property name="spacing">
-                 <number>3</number>
-                </property>
-                <item>
-                 <widget class="QRadioButton" name="allCategoriesRadio">
-                  <property name="text">
-                   <string>All</string>
-                  </property>
-                 </widget>
-                </item>
-                <item>
-                 <widget class="QRadioButton" name="selectedCategoriesRadio">
-                  <property name="text">
-                   <string>Selected</string>
-                  </property>
-                 </widget>
-                </item>
-                <item>
-                 <widget class="QWidget" name="categoriesCheckContainer" native="true">
-                  <layout class="QGridLayout" name="gridLayout">
-                   <property name="leftMargin">
-                    <number>0</number>
-                   </property>
-                   <property name="topMargin">
-                    <number>0</number>
-                   </property>
-                   <property name="rightMargin">
-                    <number>0</number>
-                   </property>
-                   <property name="bottomMargin">
-                    <number>0</number>
-                   </property>
-                   <property name="spacing">
-                    <number>0</number>
-                   </property>
-                   <item row="0" column="0">
-                    <layout class="QVBoxLayout" name="categoriesLayout">
-                     <property name="spacing">
-                      <number>3</number>
-                     </property>
-                     <property name="leftMargin">
-                      <number>20</number>
-                     </property>
-                    </layout>
-                   </item>
-                  </layout>
-                 </widget>
-                </item>
-               </layout>
              </widget>
             </item>
            </layout>
           </item>
-           <item row="2" column="0">
-            <spacer name="verticalSpacer_2">
-             <property name="orientation">
-              <enum>Qt::Vertical</enum>
+           <item>
+            <widget class="QGroupBox" name="groupBox">
+             <property name="sizePolicy">
+              <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+               <horstretch>0</horstretch>
+               <verstretch>0</verstretch>
+              </sizepolicy>
             </property>
-             <property name="sizeHint" stdset="0">
+             <property name="minimumSize">
              <size>
-               <width>20</width>
-               <height>3</height>
+               <width>0</width>
+               <height>0</height>
              </size>
             </property>
-            </spacer>
+             <property name="autoFillBackground">
+              <bool>false</bool>
+             </property>
+             <property name="title">
+              <string>Filter by paper size</string>
+             </property>
+             <property name="flat">
+              <bool>false</bool>
+             </property>
+             <property name="checkable">
+              <bool>false</bool>
+             </property>
+             <layout class="QVBoxLayout" name="verticalLayout_5">
+              <item>
+               <layout class="QVBoxLayout" name="verticalLayout">
+                <property name="spacing">
+                 <number>3</number>
+                </property>
+                <item>
+                 <widget class="QCheckBox" name="pageSizeIsoCheck">
+                  <property name="text">
+                   <string>ISO sizes</string>
+                  </property>
+                 </widget>
+                </item>
+                <item>
+                 <widget class="QCheckBox" name="pageSizeUsCheck">
+                  <property name="text">
+                   <string>US sizes</string>
+                  </property>
+                 </widget>
+                </item>
+                <item>
+                 <widget class="QCheckBox" name="pageSizeOtherCheck">
+                  <property name="text">
+                   <string>Other</string>
+                  </property>
+                 </widget>
+                </item>
+               </layout>
+              </item>
+             </layout>
+            </widget>
           </item>
-           <item row="0" column="0">
-            <widget class="QLabel" name="label_2">
-             <property name="text">
-              <string>Search entire product database.</string>
-             </property>
-             <property name="wordWrap">
-              <bool>true</bool>
+           <item>
+            <widget class="QGroupBox" name="groupBox_3">
+             <property name="title">
+              <string>Filter by category</string>
             </property>
+             <layout class="QVBoxLayout" name="verticalLayout_4">
+              <property name="spacing">
+               <number>3</number>
+              </property>
+              <item>
+               <widget class="QRadioButton" name="allCategoriesRadio">
+                <property name="text">
+                 <string>All</string>
+                </property>
+               </widget>
+              </item>
+              <item>
+               <widget class="QRadioButton" name="selectedCategoriesRadio">
+                <property name="text">
+                 <string>Selected</string>
+                </property>
+               </widget>
+              </item>
+              <item>
+               <widget class="QWidget" name="categoriesCheckContainer" native="true">
+                <layout class="QGridLayout" name="gridLayout">
+                 <property name="leftMargin">
+                  <number>0</number>
+                 </property>
+                 <property name="topMargin">
+                  <number>0</number>
+                 </property>
+                 <property name="rightMargin">
+                  <number>0</number>
+                 </property>
+                 <property name="bottomMargin">
+                  <number>0</number>
+                 </property>
+                 <property name="spacing">
+                  <number>0</number>
+                 </property>
+                 <item row="0" column="0">
+                  <layout class="QVBoxLayout" name="categoriesLayout">
+                   <property name="spacing">
+                    <number>3</number>
+                   </property>
+                   <property name="leftMargin">
+                    <number>20</number>
+                   </property>
+                  </layout>
+                 </item>
+                </layout>
+               </widget>
+              </item>
+             </layout>
            </widget>
           </item>
          </layout>
-         </widget>
-         <widget class="QWidget" name="recent">
-          <attribute name="title">
-           <string>Recent</string>
-          </attribute>
-          <layout class="QGridLayout" name="gridLayout_3">
-           <item row="0" column="0">
-            <widget class="QLabel" name="label">
-             <property name="text">
-              <string>Select from recently used products.</string>
-             </property>
-             <property name="wordWrap">
-              <bool>true</bool>
-             </property>
-            </widget>
-           </item>
-           <item row="1" column="0">
-            <spacer name="verticalSpacer">
-             <property name="orientation">
-              <enum>Qt::Vertical</enum>
-             </property>
-             <property name="sizeHint" stdset="0">
-              <size>
-               <width>20</width>
-               <height>40</height>
-              </size>
-             </property>
-            </spacer>
-           </item>
-          </layout>
-         </widget>
-        </widget>
-       </item>
-       <item>
-        <widget class="glabels::TemplatePicker" name="templatePicker">
-         <property name="minimumSize">
-          <size>
-           <width>140</width>
-           <height>0</height>
-          </size>
-         </property>
-         <property name="showDropIndicator" stdset="0">
-          <bool>false</bool>
-         </property>
-        </widget>
-       </item>
-      </layout>
+         </item>
+         <item row="2" column="0">
+          <spacer name="verticalSpacer_2">
+           <property name="orientation">
+            <enum>Qt::Vertical</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>20</width>
+             <height>3</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
+         <item row="0" column="0">
+          <widget class="QLabel" name="label_2">
+           <property name="text">
+            <string>Search entire product database.</string>
+           </property>
+           <property name="wordWrap">
+            <bool>true</bool>
+           </property>
+          </widget>
+         </item>
+        </layout>
+       </widget>
+       <widget class="QWidget" name="recent">
+        <attribute name="title">
+         <string>Recent</string>
+        </attribute>
+        <layout class="QGridLayout" name="gridLayout_3">
+         <item row="0" column="0">
+          <widget class="QLabel" name="label">
+           <property name="text">
+            <string>Select from recently used products.</string>
+           </property>
+           <property name="wordWrap">
+            <bool>true</bool>
+           </property>
+          </widget>
+         </item>
+         <item row="1" column="0">
+          <spacer name="verticalSpacer">
+           <property name="orientation">
+            <enum>Qt::Vertical</enum>
+           </property>
+           <property name="sizeHint" stdset="0">
+            <size>
+             <width>20</width>
+             <height>40</height>
+            </size>
+           </property>
+          </spacer>
+         </item>
+        </layout>
+       </widget>
+      </widget>
     </item>
     <item>
-      <layout class="QHBoxLayout" name="horizontalLayout">
-       <item>
-        <spacer name="horizontalSpacer">
-         <property name="orientation">
-          <enum>Qt::Horizontal</enum>
-         </property>
-         <property name="sizeHint" stdset="0">
-          <size>
-           <width>40</width>
-           <height>20</height>
-          </size>
-         </property>
-        </spacer>
-       </item>
-       <item>
-        <widget class="QPushButton" name="cancelButton">
-         <property name="text">
-          <string>&amp;Cancel</string>
-         </property>
-        </widget>
-       </item>
-      </layout>
+      <widget class="glabels::TemplatePicker" name="templatePicker">
+       <property name="minimumSize">
+        <size>
+         <width>500</width>
+         <height>0</height>
+        </size>
+       </property>
+       <property name="showDropIndicator" stdset="0">
+        <bool>false</bool>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QGroupBox" name="productGroupBox">
+       <property name="sizePolicy">
+        <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+         <horstretch>0</horstretch>
+         <verstretch>0</verstretch>
+        </sizepolicy>
+       </property>
+       <property name="minimumSize">
+        <size>
+         <width>300</width>
+         <height>0</height>
+        </size>
+       </property>
+       <property name="title">
+        <string>Product information</string>
+       </property>
+       <layout class="QVBoxLayout" name="verticalLayout_7">
+        <item>
+         <widget class="QWidget" name="productInfoWidget" native="true">
+          <layout class="QVBoxLayout" name="verticalLayout_3" stretch="0,1">
+           <item>
+            <layout class="QFormLayout" name="formLayout">
+             <item row="0" column="0">
+              <widget class="QLabel" name="label_3">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>Vendor:</string>
+               </property>
+              </widget>
+             </item>
+             <item row="0" column="1">
+              <widget class="QLabel" name="vendorLabel">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>TextLabel</string>
+               </property>
+              </widget>
+             </item>
+             <item row="1" column="0">
+              <widget class="QLabel" name="label_4">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>Part #:</string>
+               </property>
+              </widget>
+             </item>
+             <item row="1" column="1">
+              <widget class="QLabel" name="partLabel">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>TextLabel</string>
+               </property>
+              </widget>
+             </item>
+             <item row="2" column="0">
+              <widget class="QLabel" name="label_5">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>Description:</string>
+               </property>
+               <property name="alignment">
+                <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignTop</set>
+               </property>
+              </widget>
+             </item>
+             <item row="2" column="1">
+              <widget class="QLabel" name="descriptionLabel">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>TextLabel</string>
+               </property>
+               <property name="alignment">
+                <set>Qt::AlignLeading|Qt::AlignLeft|Qt::AlignTop</set>
+               </property>
+               <property name="wordWrap">
+                <bool>true</bool>
+               </property>
+              </widget>
+             </item>
+             <item row="3" column="0">
+              <widget class="QLabel" name="label_7">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>Page size:</string>
+               </property>
+              </widget>
+             </item>
+             <item row="3" column="1">
+              <widget class="QLabel" name="pageSizeLabel">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>TextLabel</string>
+               </property>
+              </widget>
+             </item>
+             <item row="4" column="0">
+              <widget class="QLabel" name="label_9">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>Label size:</string>
+               </property>
+              </widget>
+             </item>
+             <item row="4" column="1">
+              <widget class="QLabel" name="labelSizeLabel">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>TextLabel</string>
+               </property>
+              </widget>
+             </item>
+             <item row="5" column="0">
+              <widget class="QLabel" name="label_11">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Minimum" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>Layout:</string>
+               </property>
+              </widget>
+             </item>
+             <item row="5" column="1">
+              <widget class="QLabel" name="layoutLabel">
+               <property name="sizePolicy">
+                <sizepolicy hsizetype="Preferred" vsizetype="Preferred">
+                 <horstretch>0</horstretch>
+                 <verstretch>0</verstretch>
+                </sizepolicy>
+               </property>
+               <property name="text">
+                <string>TextLabel</string>
+               </property>
+              </widget>
+             </item>
+            </layout>
+           </item>
+           <item>
+            <widget class="glabels::SimplePreview" name="preview">
+             <property name="sizePolicy">
+              <sizepolicy hsizetype="Expanding" vsizetype="Preferred">
+               <horstretch>0</horstretch>
+               <verstretch>0</verstretch>
+              </sizepolicy>
+             </property>
+            </widget>
+           </item>
+          </layout>
+         </widget>
+        </item>
+       </layout>
+      </widget>
+     </item>
+    </layout>
+   </item>
+   <item>
+    <layout class="QHBoxLayout" name="horizontalLayout">
+     <item>
+      <widget class="QPushButton" name="viewModeButton">
+       <property name="text">
+        <string/>
+       </property>
+       <property name="icon">
+        <iconset resource="../icons.qrc">
+         <normaloff>:/icons/flat/22x22/glabels-view-grid.svg</normaloff>:/icons/flat/22x22/glabels-view-grid.svg</iconset>
+       </property>
+       <property name="iconSize">
+        <size>
+         <width>22</width>
+         <height>22</height>
+        </size>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <spacer name="horizontalSpacer">
+       <property name="orientation">
+        <enum>Qt::Horizontal</enum>
+       </property>
+       <property name="sizeHint" stdset="0">
+        <size>
+         <width>40</width>
+         <height>20</height>
+        </size>
+       </property>
+      </spacer>
+     </item>
+     <item>
+      <widget class="QPushButton" name="cancelButton">
+       <property name="text">
+        <string>&amp;Cancel</string>
+       </property>
+       <property name="autoDefault">
+        <bool>false</bool>
+       </property>
+      </widget>
+     </item>
+     <item>
+      <widget class="QPushButton" name="selectButton">
+       <property name="enabled">
+        <bool>false</bool>
+       </property>
+       <property name="text">
+        <string>Select</string>
+       </property>
+      </widget>
     </item>
    </layout>
   </item>
@@ -300,6 +532,11 @@
   <extends>QListWidget</extends>
   <header>TemplatePicker.h</header>
  </customwidget>
+  <customwidget>
+   <class>glabels::SimplePreview</class>
+   <extends>QGraphicsView</extends>
+   <header>SimplePreview.h</header>
+  </customwidget>
 </customwidgets>
 <resources>
  <include location="../icons.qrc"/>
@@ -312,8 +549,8 @@
   <slot>onPageSizeCheckClicked()</slot>
   <hints>
    <hint type="sourcelabel">
-     <x>78</x>
-     <y>184</y>
+     <x>130</x>
+     <y>196</y>
    </hint>
    <hint type="destinationlabel">
     <x>4</x>
@@ -344,8 +581,8 @@
   <slot>onPageSizeCheckClicked()</slot>
   <hints>
    <hint type="sourcelabel">
-     <x>80</x>
-     <y>161</y>
+     <x>132</x>
+     <y>170</y>
    </hint>
    <hint type="destinationlabel">
     <x>2</x>
@@ -360,8 +597,8 @@
   <slot>onCancelButtonClicked()</slot>
   <hints>
    <hint type="sourcelabel">
-     <x>955</x>
-     <y>648</y>
+     <x>981</x>
+     <y>783</y>
    </hint>
    <hint type="destinationlabel">
     <x>689</x>
@@ -376,8 +613,8 @@
   <slot>onSearchEntryTextChanged()</slot>
   <hints>
    <hint type="sourcelabel">
-     <x>93</x>
-     <y>104</y>
+     <x>107</x>
+     <y>102</y>
    </hint>
    <hint type="destinationlabel">
     <x>2</x>
@@ -392,8 +629,8 @@
   <slot>onCategoryRadioClicked()</slot>
   <hints>
    <hint type="sourcelabel">
-     <x>76</x>
-     <y>270</y>
+     <x>126</x>
+     <y>296</y>
    </hint>
    <hint type="destinationlabel">
     <x>0</x>
@@ -408,8 +645,8 @@
   <slot>onCategoryRadioClicked()</slot>
   <hints>
    <hint type="sourcelabel">
-     <x>72</x>
-     <y>294</y>
+     <x>122</x>
+     <y>322</y>
    </hint>
    <hint type="destinationlabel">
     <x>1</x>
@@ -433,6 +670,38 @@
    </hint>
   </hints>
  </connection>
+  <connection>
+   <sender>selectButton</sender>
+   <signal>clicked()</signal>
+   <receiver>SelectProductDialog</receiver>
+   <slot>onSelectButtonClicked()</slot>
+   <hints>
+    <hint type="sourcelabel">
+     <x>1022</x>
+     <y>769</y>
+    </hint>
+    <hint type="destinationlabel">
+     <x>1067</x>
+     <y>682</y>
+    </hint>
+   </hints>
+  </connection>
+  <connection>
+   <sender>viewModeButton</sender>
+   <signal>clicked()</signal>
+   <receiver>SelectProductDialog</receiver>
+   <slot>onViewModeButtonClicked()</slot>
+   <hints>
+    <hint type="sourcelabel">
+     <x>20</x>
+     <y>760</y>
+    </hint>
+    <hint type="destinationlabel">
+     <x>-2</x>
+     <y>762</y>
+    </hint>
+   </hints>
+  </connection>
 </connections>
 <slots>
  <slot>onSearchClearButtonClicked()</slot>
@@ -444,5 +713,6 @@
  <slot>onPageSizeCheckClicked()</slot>
  <slot>onCategoryRadioClicked()</slot>
  <slot>onModeTabChanged()</slot>
+  <slot>onViewModeButtonClicked()</slot>
 </slots>
 </ui>