diff --git a/README.md b/README.md index 5d9f30b..297e029 100644 --- 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 index cab7178..ed8f065 100644 --- 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()) } } /**