Add base theming syntax for the grid

- The themes can now configure following elements : pos, size
- Change some default values for them

THEMES.md

@@ -277,7 +277,7 @@ You can now change the order in which elements are rendered by setting `zIndex`
 * `carousel name="systemcarousel"` - 40
 * `text name="systemInfo"` - 50
 
-##### basic, detailed, video
+##### basic, detailed, grid, video
 * `image name="background"` - 0
 * Extra Elements `extra="true"` - 10
 * `textlist name="gamelist"` - 20
@@ -471,6 +471,8 @@ Reference
 	- Displays the name of the system.  Only present if no "logo" image is specified.  Displayed at the top of the screen, centered by default.
 * `image name="logo"` - ALL
 	- A header image.  If a non-empty `path` is specified, `text name="headerText"` will be hidden and this image will be, by default, displayed roughly in its place.
+* `imagegrid name="gamegrid"` - ALL
+	- The gamegrid.
 
 * Metadata
 	* Labels
@@ -564,7 +566,13 @@ Can be created as an extra.
 	- Multiply each pixel's color by this color. For example, an all-white image with `<color>FF0000</color>` would become completely red.  You can also control the transparency of an image with `<color>FFFFFFAA</color>` - keeping all the pixels their normal color and only affecting the alpha channel.
 * `zIndex` - type: FLOAT.
 	- z-index value for component.  Components will be rendered in order of z-index value from low to high.
-	
+
+#### imagegrid
+
+* `pos` - type: NORMALIZED_PAIR.
+* `size` - type: NORMALIZED_PAIR.
+    - The size of the grid. Take care the selected tile can go out of the grid size, so don't position the grid too close to another element or the screen border.
+
 #### video
 
 * `pos` - type: NORMALIZED_PAIR.

es-app/src/views/gamelist/GridGameListView.cpp

@@ -21,7 +21,6 @@ GridGameListView::GridGameListView(Window* window, FileData* root) :
 	const float padding = 0.01f;
 
 	mGrid.setPosition(mSize.x() * 0.1f, mSize.y() * 0.1f);
-//	mGrid.setSize(mSize.x(), mSize.y() * 0.8f);
 	mGrid.setCursorChangedCallback([&](const CursorState& /*state*/) { updateInfoPanel(); });
 	addChild(&mGrid);
 
@@ -125,6 +124,8 @@ void GridGameListView::onThemeChanged(const std::shared_ptr<ThemeData>& theme)
 
 	using namespace ThemeFlags;
 
+	mGrid.applyTheme(theme, getName(), "gamegrid", ALL);
+
 	initMDLabels();
 	std::vector<TextComponent*> labels = getMDLabels();
 	assert(labels.size() == 8);

es-core/src/ThemeData.cpp

@@ -25,6 +25,9 @@ std::map<std::string, std::map<std::string, ThemeData::ElementPropertyType>> The
 		{ "tile", BOOLEAN },
 		{ "color", COLOR },
 		{ "zIndex", FLOAT } } },
+	{ "imagegrid", {
+		{ "pos", NORMALIZED_PAIR },
+		{ "size", NORMALIZED_PAIR } } },
 	{ "text", {
 		{ "pos", NORMALIZED_PAIR },
 		{ "size", NORMALIZED_PAIR },

es-core/src/components/ImageGridComponent.h

@@ -38,6 +38,7 @@ public:
 	bool input(InputConfig* config, Input input) override;
 	void update(int deltaTime) override;
 	void render(const Transform4x4f& parentTrans) override;
+	virtual void applyTheme(const std::shared_ptr<ThemeData>& theme, const std::string& view, const std::string& element, unsigned int properties) override;
 
 	inline void setCursorChangedCallback(const std::function<void(CursorState state)>& func) { mCursorChangedCallback = func; }
 
@@ -74,10 +75,10 @@ ImageGridComponent<T>::ImageGridComponent(Window* window) : IList<ImageGridData,
 
 	mEntriesDirty = true;
 
-	mSize = screen * 0.8f;
+	mSize = screen * 0.79f;
 	mMargin = screen * 0.01f;
 	mTileMaxSize = screen * 0.19f;
-	mSelectedTileMaxSize = mTileMaxSize + mMargin * 3.0f;
+	mSelectedTileMaxSize = mTileMaxSize * 1.15f;
 }
 
 template<typename T>
@@ -173,6 +174,12 @@ void ImageGridComponent<T>::render(const Transform4x4f& parentTrans)
 	GuiComponent::renderChildren(trans);
 }
 
+template<typename T>
+void ImageGridComponent<T>::applyTheme(const std::shared_ptr<ThemeData>& theme, const std::string& view, const std::string& element, unsigned int properties)
+{
+	GuiComponent::applyTheme(theme, view, element, properties);
+}
+
 template<typename T>
 void ImageGridComponent<T>::onCursorChanged(const CursorState& state)
 {