[vlc-devel] [PATCH 03/14] qml: update GridItem's sizes according to grid system based upon designs

[Prince Gupta]

---
 .../gui/qt/medialibrary/qml/AudioGridItem.qml |  4 +--
 .../gui/qt/medialibrary/qml/VideoGridItem.qml |  4 +--
 .../gui/qt/network/qml/NetworkGridItem.qml    |  4 +--
 modules/gui/qt/style/VLCStyle.qml             | 30 +++++++++++--------
 4 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/AudioGridItem.qml b/modules/gui/qt/medialibrary/qml/AudioGridItem.qml
index 8db11c9788..abbef7053e 100644
--- a/modules/gui/qt/medialibrary/qml/AudioGridItem.qml
+++ b/modules/gui/qt/medialibrary/qml/AudioGridItem.qml
@@ -27,6 +27,6 @@ Widgets.GridItem {
     image: model.cover || VLCStyle.noArtAlbum
     title: model.title || i18n.qtr("Unknown title")
     subtitle: model.main_artist || i18n.qtr("Unknown artist")
-    pictureWidth: VLCStyle.cover_normal
-    pictureHeight: VLCStyle.cover_normal
+    pictureWidth: VLCStyle.gridCover_music_width
+    pictureHeight: VLCStyle.gridCover_music_height
 }
diff --git a/modules/gui/qt/medialibrary/qml/VideoGridItem.qml b/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
index 4e11c04be7..72305caa0b 100644
--- a/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoGridItem.qml
@@ -32,8 +32,8 @@ Widgets.GridItem {
         model.channel || ""
     ].filter(function(a) { return a !== "" } )
     progress: model.progress > 0 ? model.progress : 0
-    pictureWidth: VLCStyle.video_normal_width
-    pictureHeight: VLCStyle.video_normal_height
+    pictureWidth: VLCStyle.gridCover_video_width
+    pictureHeight: VLCStyle.gridCover_video_height
     onItemDoubleClicked: {
         if ( model.id !== undefined ) {
             medialib.addAndPlay( model.id )
diff --git a/modules/gui/qt/network/qml/NetworkGridItem.qml b/modules/gui/qt/network/qml/NetworkGridItem.qml
index 2676eb075d..06b12a1145 100644
--- a/modules/gui/qt/network/qml/NetworkGridItem.qml
+++ b/modules/gui/qt/network/qml/NetworkGridItem.qml
@@ -31,8 +31,8 @@ Widgets.GridItem {
     width: VLCStyle.gridItem_network_width
     height: VLCStyle.gridItem_network_height
 
-    pictureWidth: VLCStyle.network_normal
-    pictureHeight: VLCStyle.network_normal
+    pictureWidth: VLCStyle.gridCover_network_width
+    pictureHeight: VLCStyle.gridCover_network_height
 
     image: {
         if (model.artwork && model.artwork.toString() !== "") {
diff --git a/modules/gui/qt/style/VLCStyle.qml b/modules/gui/qt/style/VLCStyle.qml
index 8c9b4a7376..e12c9857d0 100644
--- a/modules/gui/qt/style/VLCStyle.qml
+++ b/modules/gui/qt/style/VLCStyle.qml
@@ -114,12 +114,6 @@ Item {
     property int scrollbarHeight: dp(100, scale);
 
     property int selectedBorder: 2
-    property real video_normal_height: dp(90, scale);
-    property real video_large_height:  dp(120, scale);
-    property real video_small_height:  dp(70, scale);
-    property real video_normal_width: video_normal_height * (16/10);
-    property real video_large_width: video_large_height * (16/10);
-    property real video_small_width: video_small_height * (16/10);
 
     property real network_normal: dp(100, scale)
 
@@ -144,15 +138,27 @@ Item {
     property int table_section_width: dp(32, scale)
     property int table_section_text_margin: dp(10, scale)
 
+    property int gridCover_network_width: colWidth(1)
+    property int gridCover_network_height: gridCover_network_width
+    property int gridCover_network_border: dp(2, scale)
+
+    property int gridCover_music_width: colWidth(1)
+    property int gridCover_music_height: gridCover_music_width
+    property int gridCover_music_border: dp(2, scale)
+
+    property int gridCover_video_width: colWidth(2)
+    property int gridCover_video_height: ( gridCover_video_width * 10.0 ) / 16
+    property int gridCover_video_border: dp(3, scale)
+
     //GridItem
-    property int gridItem_network_height: VLCStyle.network_normal + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small + VLCStyle.margin_xxsmall * 4
-    property int gridItem_network_width: VLCStyle.network_normal + VLCStyle.margin_xxsmall * 4
+    property int gridItem_network_width: VLCStyle.gridCover_network_width
+    property int gridItem_network_height: VLCStyle.gridCover_network_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small
 
-    property int gridItem_music_height: VLCStyle.cover_normal + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small + VLCStyle.margin_xxsmall * 4
-    property int gridItem_music_width: VLCStyle.cover_normal + VLCStyle.margin_xxsmall * 4
+    property int gridItem_music_width: VLCStyle.gridCover_music_width
+    property int gridItem_music_height: VLCStyle.gridCover_music_height + VLCStyle.margin_xsmall + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small
 
-    property int gridItem_video_height: VLCStyle.video_normal_height + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small  + VLCStyle.margin_xxsmall * 4
-    property int gridItem_video_width: VLCStyle.video_normal_width + VLCStyle.margin_xxsmall * 4
+    property int gridItem_video_width: VLCStyle.gridCover_video_width
+    property int gridItem_video_height: VLCStyle.gridCover_video_height + VLCStyle.margin_xxsmall + VLCStyle.fontHeight_normal + VLCStyle.fontHeight_small
 
     property int column_width: dp(114, scale)
     property int column_margin_width: dp(32, scale)
-- 
2.25.1