mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-03 06:55:59 +00:00
@@ -51,7 +51,6 @@ internal enum Asset {
|
||||
internal static let encryptionWarning = ImageAsset(name: "images/encryption-warning")
|
||||
internal static let endedPoll = ImageAsset(name: "images/ended-poll")
|
||||
internal static let launchBackground = ImageAsset(name: "images/launch-background")
|
||||
internal static let launchLogo = ImageAsset(name: "images/launch-logo")
|
||||
internal static let locationMarker = ImageAsset(name: "images/location-marker")
|
||||
internal static let locationPin = ImageAsset(name: "images/location-pin")
|
||||
internal static let locationPointerFull = ImageAsset(name: "images/location-pointer-full")
|
||||
|
||||
@@ -22,7 +22,7 @@ struct PillView: View {
|
||||
MXLog.info("TEXT ATTACHMENT TEST")
|
||||
} label: {
|
||||
HStack {
|
||||
Image(asset: Asset.Images.launchLogo)
|
||||
Image(asset: Asset.Images.appLogo)
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
}
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
//
|
||||
// Copyright 2023 New Vector Ltd
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
|
||||
/// The app's logo styled to fit on various launch pages.
|
||||
struct OnboardingLogo: View {
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
/// Set to `true` when using on top of `Asset.Images.launchBackground`
|
||||
let isOnGradient: Bool
|
||||
|
||||
/// Extra padding needed to avoid cropping the shadows.
|
||||
private let extra: CGFloat = 64
|
||||
/// The shape that the logo is composed on top of.
|
||||
private let outerShape = RoundedRectangle(cornerRadius: 44)
|
||||
private let outerShapeShadowColor = Color(red: 0.11, green: 0.11, blue: 0.13)
|
||||
private var isLight: Bool { colorScheme == .light }
|
||||
|
||||
var body: some View {
|
||||
Image(asset: Asset.Images.appLogo)
|
||||
.background {
|
||||
Circle()
|
||||
.inset(by: 1)
|
||||
.shadow(color: .black.opacity(!isLight && isOnGradient ? 0.3 : 0.4),
|
||||
radius: 12.57143,
|
||||
y: 6.28571)
|
||||
|
||||
Circle()
|
||||
.inset(by: 1)
|
||||
.shadow(color: .black.opacity(0.5),
|
||||
radius: 12.57143,
|
||||
y: 6.28571)
|
||||
.blendMode(.overlay)
|
||||
}
|
||||
.padding(24)
|
||||
.background {
|
||||
Color.white
|
||||
.opacity(isLight ? 0.23 : isOnGradient ? 0.05 : 0.13)
|
||||
}
|
||||
.clipShape(outerShape)
|
||||
.overlay {
|
||||
outerShape
|
||||
.inset(by: 0.25)
|
||||
.stroke(.white.opacity(isLight ? 1 : isOnGradient ? 0.9 : 0.25), lineWidth: 0.5)
|
||||
.blendMode(isLight ? .normal : .overlay)
|
||||
}
|
||||
.padding(extra)
|
||||
.background {
|
||||
ZStack {
|
||||
if !isLight, isOnGradient {
|
||||
outerShape
|
||||
.inset(by: 1)
|
||||
.padding(extra)
|
||||
.shadow(color: .black.opacity(0.5),
|
||||
radius: 32.91666,
|
||||
y: 1.05333)
|
||||
} else {
|
||||
outerShape
|
||||
.inset(by: 1)
|
||||
.padding(extra)
|
||||
.shadow(color: outerShapeShadowColor.opacity(isLight ? 0.23 : 0.08),
|
||||
radius: 16,
|
||||
y: 8)
|
||||
|
||||
outerShape
|
||||
.inset(by: 1)
|
||||
.padding(extra)
|
||||
.shadow(color: outerShapeShadowColor.opacity(0.5),
|
||||
radius: 16,
|
||||
y: 8)
|
||||
.blendMode(.overlay)
|
||||
}
|
||||
}
|
||||
.mask {
|
||||
outerShape
|
||||
.inset(by: -extra / 2)
|
||||
.stroke(lineWidth: extra)
|
||||
.padding(extra)
|
||||
}
|
||||
}
|
||||
.padding(-extra)
|
||||
.accessibilityHidden(true)
|
||||
}
|
||||
}
|
||||
@@ -56,8 +56,7 @@ struct OnboardingScreen: View {
|
||||
if verticalSizeClass == .regular {
|
||||
Spacer()
|
||||
|
||||
Image(asset: Asset.Images.launchLogo)
|
||||
.accessibilityHidden(true)
|
||||
OnboardingLogo(isOnGradient: true)
|
||||
}
|
||||
|
||||
Spacer()
|
||||
|
||||
@@ -22,74 +22,15 @@ class PlaceholderScreenCoordinator: CoordinatorProtocol {
|
||||
}
|
||||
}
|
||||
|
||||
/// The app's splash screen. This screen is shown after the LaunchScreen
|
||||
/// until the app is ready to show the relevant coordinator. The design of
|
||||
/// these 2 screens are matched.
|
||||
/// The screen shown in split view when the detail has no content.
|
||||
struct PlaceholderScreen: View {
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
private let outerShape = RoundedRectangle(cornerRadius: 44)
|
||||
private var isLight: Bool { colorScheme == .light }
|
||||
|
||||
var body: some View {
|
||||
image
|
||||
.accessibilityHidden(true)
|
||||
OnboardingLogo(isOnGradient: false)
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.background()
|
||||
.environment(\.backgroundStyle, AnyShapeStyle(Color.compound.bgCanvasDefault))
|
||||
.ignoresSafeArea(edges: .top)
|
||||
}
|
||||
|
||||
@ViewBuilder
|
||||
var image: some View {
|
||||
if isLight {
|
||||
logo
|
||||
} else {
|
||||
darkLogo
|
||||
}
|
||||
}
|
||||
|
||||
var logo: some View {
|
||||
Image(asset: Asset.Images.appLogo)
|
||||
.padding(24)
|
||||
.background(.white.opacity(0.4))
|
||||
.clipShape(outerShape)
|
||||
.background {
|
||||
outerShape.fill(Color.white)
|
||||
.shadow(color: Color(red: 0.11, green: 0.11, blue: 0.13).opacity(0.08), radius: 16, y: 8)
|
||||
|
||||
outerShape.fill(Color.white)
|
||||
.shadow(color: Color(red: 0.11, green: 0.11, blue: 0.13).opacity(0.5), radius: 16, y: 8)
|
||||
.blendMode(.overlay)
|
||||
}
|
||||
.overlay {
|
||||
outerShape
|
||||
.inset(by: 0.25)
|
||||
.stroke(.white, lineWidth: 0.5)
|
||||
}
|
||||
}
|
||||
|
||||
var darkLogo: some View {
|
||||
Image(asset: Asset.Images.appLogo)
|
||||
.shadow(color: .black.opacity(0.2), radius: 0.5, y: 2)
|
||||
.shadow(color: Color(red: 0.05, green: 0.74, blue: 0.55).opacity(0.2), radius: 16)
|
||||
.padding(24)
|
||||
.background {
|
||||
LinearGradient(stops: [.init(color: .white.opacity(0.05), location: 0.00),
|
||||
.init(color: .white.opacity(0), location: 1.00)],
|
||||
startPoint: UnitPoint(x: 0, y: 0),
|
||||
endPoint: UnitPoint(x: 1, y: 1))
|
||||
.blendMode(.multiply)
|
||||
}
|
||||
.clipShape(outerShape)
|
||||
.shadow(color: .black.opacity(0.9), radius: 80, x: 0, y: 1)
|
||||
.overlay {
|
||||
outerShape
|
||||
.inset(by: 0.25)
|
||||
.stroke(.white.opacity(0.9), lineWidth: 0.5)
|
||||
.blendMode(.overlay)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct PlaceholderScreen_Previews: PreviewProvider {
|
||||
|
||||
@@ -44,11 +44,10 @@ struct WelcomeScreen: View {
|
||||
@ViewBuilder
|
||||
private var header: some View {
|
||||
VStack(spacing: 32) {
|
||||
Image(asset: Asset.Images.launchLogo)
|
||||
.resizable()
|
||||
.scaledToFit()
|
||||
.frame(width: 118, height: 118)
|
||||
.accessibilityHidden(true)
|
||||
OnboardingLogo(isOnGradient: true)
|
||||
.scaleEffect(x: 0.75, y: 0.75)
|
||||
.padding(.vertical, -20)
|
||||
|
||||
title
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user