Implement zooming for list view

kra-mo · Dec 26, 2023 · 9861351 · 9861351
1 parent 4f9eda0
commit 9861351
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 119 deletions.
diff --git a/data/hu.kramo.Hyperplane.gschema.xml.in b/data/hu.kramo.Hyperplane.gschema.xml.in
@@ -24,8 +24,11 @@
 		<key name="show-hidden" type="b">
 			<default>false</default>
 		</key>
-		<key name="zoom-level" type="u">
+		<key name="grid-zoom-level" type="u">
 			<default>3</default>
 		</key>
+		<key name="list-zoom-level" type="u">
+			<default>0</default>
+		</key>
 	</schema>
 </schemalist>
diff --git a/hyperplane/gtk/item.blp b/hyperplane/gtk/item.blp
@@ -3,125 +3,139 @@ using Adw 1;
 
 template $HypItem : Adw.Bin {
   Box box {
-    Overlay thumbnail {
+    Overlay circular_thumbnail {
       overflow: hidden;
       halign: center;
 
       [overlay]
-      Box dir_thumbnails {
-        halign: start;
-        valign: start;
-        margin-end: 6;
-
-        Overlay dir_thumbnail_1 {
-          overflow: hidden;
-
-          [overlay]
-          Picture dir_picture_1 {
-            visible: false;
-            content-fit: cover;
-          }
+      Image circular_icon {
+        gicon: bind template.gicon;
+
+        styles [
+          "circular-icon"
+        ]
+      }
+
+      Overlay thumbnail {
+        overflow: hidden;
+        halign: center;
+
+        [overlay]
+        Box dir_thumbnails {
+          halign: start;
+          valign: start;
+          margin-end: 6;
+
+          Overlay dir_thumbnail_1 {
+            overflow: hidden;
+
+            [overlay]
+            Picture dir_picture_1 {
+              visible: false;
+              content-fit: cover;
+            }
 
-          Image {
-            visible: bind dir_picture_1.visible inverted;
+            Image {
+              visible: bind dir_picture_1.visible inverted;
+            }
+
+            styles [
+              "small-thumbnail",
+            ]
           }
 
-          styles [
-            "small-thumbnail",
-          ]
-        }
+          Overlay dir_thumbnail_2 {
+            overflow: hidden;
+
+            [overlay]
+            Picture dir_picture_2 {
+              visible: false;
+              content-fit: cover;
+            }
 
-        Overlay dir_thumbnail_2 {
-          overflow: hidden;
+            Image {
+              visible: bind dir_picture_2.visible inverted;
+            }
 
-          [overlay]
-          Picture dir_picture_2 {
-            visible: false;
-            content-fit: cover;
+            styles [
+              "small-thumbnail",
+            ]
           }
 
-          Image {
-            visible: bind dir_picture_2.visible inverted;
+          Overlay dir_thumbnail_3 {
+            overflow: hidden;
+
+            [overlay]
+            Picture dir_picture_3 {
+              visible: false;
+              content-fit: cover;
+            }
+
+            Image {
+              visible: bind dir_picture_3.visible inverted;
+            }
+
+            styles [
+              "small-thumbnail",
+            ]
           }
+        }
+
+        [overlay]
+        Picture picture {
+          content-fit: cover;
+          paintable: bind template.thumbnail-paintable;
 
           styles [
-            "small-thumbnail",
+            "thumbnail-picture",
           ]
         }
 
-        Overlay dir_thumbnail_3 {
-          overflow: hidden;
-
-          [overlay]
-          Picture dir_picture_3 {
-            visible: false;
-            content-fit: cover;
-          }
+        [overlay]
+        Box play_button {
+          halign: center;
+          valign: center;
+          visible: false;
 
-          Image {
-            visible: bind dir_picture_3.visible inverted;
+          Image play_button_icon {
+            icon-name: 'media-playback-start-symbolic';
           }
 
           styles [
-            "small-thumbnail",
+            "osd",
+            "circular-box",
           ]
         }
-      }
 
-      [overlay]
-      Picture picture {
-        content-fit: cover;
-        paintable: bind template.thumbnail-paintable;
+        [overlay]
+        Label extension_label {
+          valign: end;
+          halign: end;
+          margin-bottom: 5;
+          margin-end: 5;
+          margin-start: 5;
+          ellipsize: end;
+          label: bind template.extension;
 
-        styles [
-          "thumbnail-picture",
-        ]
-      }
-
-      [overlay]
-      Box play_button {
-        halign: center;
-        valign: center;
-        visible: false;
-
-        Image play_button_icon {
-          icon-name: 'media-playback-start-symbolic';
+          styles [
+            "file-extension",
+          ]
         }
 
-        styles [
-          "osd",
-          "circular-box",
-        ]
-      }
-
-      [overlay]
-      Label extension_label {
-        valign: end;
-        halign: end;
-        margin-bottom: 5;
-        margin-end: 5;
-        margin-start: 5;
-        ellipsize: end;
-        label: bind template.extension;
+        Image icon {
+          gicon: bind template.gicon;
+          visible: bind picture.visible inverted;
+        }
 
         styles [
-          "file-extension",
+          "item-thumbnail",
         ]
       }
-
-      Image icon {
-        gicon: bind template.gicon;
-        visible: bind picture.visible inverted;
-      }
-
-      styles [
-        "item-thumbnail",
-      ]
     }
 
     Label label {
       wrap-mode: word_char;
       label: bind template.display-name;
     }
   }
-}
+}