Minor tweaks

sentryco · Nov 24, 2024 · fb1a8c8 · fb1a8c8
1 parent 8efabd3
commit fb1a8c8
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 28 deletions.
diff --git a/README.md b/README.md
@@ -16,6 +16,10 @@ BlurView is a versatile library for iOS and macOS that provides an easy way to a
 
 ## Example:
 
+- Adding an `.overlay()` can tint the translucent effect for both iOS and macOS. See View+Blur for example
+- There is a macOS example in `DebugHeaderView.swift`
+- There is a iOS example in `EffectView.swift`
+
 **MacOS:**
 
 ```swift

diff --git a/Sources/BlurView/effect/DebugHeaderView.swift b/Sources/BlurView/effect/DebugHeaderView.swift
@@ -3,46 +3,62 @@ import SwiftUI
 /**
  * Note: Only for macOS
  * - Description: DebugHeaderView is a SwiftUI View component used for displaying a debug header.  It consists of a ZStack with a clear rectangle as the background, a pink rectangle box,  and an overlay rectangle with visual effects. This component is primarily used for debugging purposes.
- * - Fixme: ⚠️️ Move to debug folder? 👈
- * - Fixme: ⚠️️ Check legacy how headers look, begin making headers for iPad and macos etc 👈
- * - Fixme: ⚠️️ get things looking good for detail etc 👈 (keep in mind that we need to add a rounded header design as well)
  */
 struct DebugHeaderView: View {
    /**
-    * - Fixme: ⚠️️ Move each into a seperate var?
+    * - Important: ⚠️️ It seems best to leave the background color to be decided by the operating system. It matches better with the translucent tint. Custom background colors creates more visible seems.
+    * - Fixme: ⚠️️ Look into how this was done in legacy. Legacy supported any custom background color I think.
     */
    var body: some View {
       ZStack(alignment: .top) {
-         // black background
-         Rectangle()
-            .fill(Color.clear.opacity(0))
-            .frame(width: .infinity, height: .infinity)
-            .visualEffect(material: .headerView, blendingMode: .withinWindow, emphasized: false)
-         // orange box
-         Rectangle()
-            .fill(.pink.opacity(1))
-            .frame(width: 100, height: 100, alignment: .top)
-         // overlay
-         Rectangle()
-            .foregroundColor(Color.clear.opacity(0))
-         // .foregroundColor(.clear)
-         // .fill(.clear.opacity(1))
-            .frame(width: .infinity, height: 80, alignment: .top)
-         // .presentationBackground(.ultraThinMaterial)
-         // .background(.gray.opacity(1))
-         // - Fixme: ⚠️️⚠️️⚠️️ use this for login and onboarding overlay etc:
-            .visualEffect(material: .headerView, blendingMode: .withinWindow, emphasized: false)
-         // .background(.ultraThinMaterial)
-         // .background(VisualEffectView())
+//         Rectangle()
+//            .fill(Color.gray.opacity(1))
+//            .frame(width: .infinity, height: .infinity)
+         Underlay()
+         Graphic()
+         Overlay()
       }
    }
 }
 /**
- * - Fixme: ⚠️️ how does this work?
+ * Underlay
+ * - Important: ⚠️️ This tints the background to the same tint that the translucent cover produces. So that there is near no visible seem between cover and background
  */
-struct OverlayView: View {
+struct Underlay: View {
    var body: some View {
-      EmptyView()
+      Rectangle()
+         .fill(Color.clear.opacity(0))
+         .frame(width: .infinity, height: .infinity)
+         .visualEffect(material: .headerView, blendingMode: .withinWindow, emphasized: false)
+   }
+}
+/**
+ * Graphic element (Bright color)
+ */
+struct Graphic: View {
+   var body: some View {
+      Rectangle()
+         .fill(.pink.opacity(1))
+         .frame(width: 100, height: 100, alignment: .top)
+   }
+}
+/**
+ * Overlay
+ * - Description: Matches best if no custom background color is uses. This is a current limitation that might be improved in the future
+ * - Fixme: ⚠️️ make this a viewmodifier instead?
+ */
+struct Overlay: View {
+   var body: some View {
+      Rectangle()
+         .foregroundColor(Color.clear.opacity(0))
+      // .foregroundColor(.clear)
+      // .fill(.clear.opacity(1))
+         .frame(width: .infinity, height: 80, alignment: .top)
+      // .presentationBackground(.ultraThinMaterial)
+      // .background(.gray.opacity(1))
+         .visualEffect(material: .headerView, blendingMode: .withinWindow, emphasized: false)
+      // .background(.ultraThinMaterial)
+      // .background(VisualEffectView())
    }
 }
 /**