Merge pull request #66 from picture-pro/39-add-component-for-photodeck

39 add component for photodeck

crates/site-app/src/components/photo.rs

@@ -40,21 +40,36 @@ pub fn Photo(
   #[prop(default = PhotoSize::Regular)] size: PhotoSize,
   #[prop(default = "rounded-box")] rounded: &'static str,
   #[prop(default = "")] extra_class: &'static str,
+  #[prop(optional)] rotation: Option<f32>,
+  #[prop(optional)] scale: Option<f32>,
+  #[prop(optional)] z_index: Option<i32>,
+  #[prop(optional)] opacity: Option<f32>,
 ) -> impl IntoView {
-  let photo = create_resource(
-    move || (),
-    move |_| bl::fetch::fetch_photo_thumbnail(photo_id),
-  );
+  let photo =
+    create_resource(move || photo_id, bl::fetch::fetch_photo_thumbnail);
 
   view! {
-    <Suspense fallback=|| view!{ }>
+    <Suspense fallback={move || view!{
+      <div class="flex justify-center items-center w-24 h-24">
+        <span class="d-loading d-loading-spinner" />
+      </div>
+    }}>
       { move || match photo() {
         Some(Ok(Some(photo))) => {
           Some(view! {
             <img
               src={format!("data:image/png;base64,{}", photo.data)} alt={photo.alt}
               width={size.physical(photo.size).0} height={size.physical(photo.size).1}
               class={format!("{rounded} {extra_class}")}
+              style:transform={
+                format!(
+                  "rotate({}deg) scale({})",
+                  rotation.map(|r| r.to_string()).unwrap_or_default(),
+                  scale.map(|s| s.to_string()).unwrap_or_default()
+                )
+              }
+              style:z-index={z_index.map(|z| z.to_string())}
+              style:opacity={opacity.map(|o| o.to_string())}
             />
           }
           .into_view())

crates/site-app/src/components/photo_deck.rs

@@ -1,13 +1,43 @@
 use leptos::*;
 
+use crate::components::photo::Photo;
+
+#[derive(Clone, Copy, Debug, PartialEq, Eq, Default)]
+pub enum PhotoDeckDisplayMode {
+  Flat,
+  #[default]
+  Stacked,
+}
+
 #[component]
-pub fn PhotoDeck(ids: Vec<core_types::PhotoRecordId>) -> impl IntoView {
-  view! {
-    { ids.into_iter().map(|photo_id| {
+pub fn PhotoDeck(
+  ids: Vec<core_types::PhotoRecordId>,
+  #[prop(optional)] display_mode: PhotoDeckDisplayMode,
+) -> impl IntoView {
+  match display_mode {
+    PhotoDeckDisplayMode::Flat => view! {
+      <div class="flex flex-wrap gap-2 items-center">
+        { ids.into_iter().map(|id| view! { <Photo photo_id={id} /> }).collect::<Vec<_>>() }
+      </div>
+    }
+    .into_view(),
+    PhotoDeckDisplayMode::Stacked => {
+      let count = ids.len();
       view! {
-        <crate::components::photo::Photo photo_id=photo_id />
+        <div class="grid">
+          { ids.into_iter().enumerate().map(|(i, id)| view! {
+            <Photo
+              photo_id={id}
+              rotation={i as f32 * 16.0}
+              scale={1.0 - (i as f32 * 0.05)}
+              z_index={count as i32 - i as i32}
+              opacity={1.0 - (i as f32 * 0.1)}
+              extra_class="col-start-1 row-start-1"
+            />
+          }).collect::<Vec<_>>() }
+        </div>
       }
       .into_view()
-    }).collect::<Vec<_>>() }
+    }
   }
 }

crates/site-app/src/pages/qr_code.rs

@@ -92,7 +92,10 @@ pub fn PhotoDeckWrapper(
         match r {
           Ok(Some(photo_group)) => view! {
             <div class="flex flex-row justify-center">
-              <crate::components::photo_deck::PhotoDeck ids={photo_group.photos.clone()} />
+              <crate::components::photo_deck::PhotoDeck
+                ids={photo_group.photos.clone()}
+                display_mode={crate::components::photo_deck::PhotoDeckDisplayMode::Flat}
+              />
             </div>
           }.into_view(),
           Ok(None) => view! {