-
Notifications
You must be signed in to change notification settings - Fork 349
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add foundation for new connection view
- Loading branch information
Showing
8 changed files
with
296 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
93 changes: 93 additions & 0 deletions
93
ios/MullvadVPN/View controllers/Tunnel/FeatureIndicators/ConnectionView.swift
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| // | ||
| // ConnectionView.swift | ||
| // MullvadVPN | ||
| // | ||
| // Created by Jon Petersson on 2024-12-03. | ||
| // Copyright © 2024 Mullvad VPN AB. All rights reserved. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| // TODO: Replace all hardcoded values with real values dependent on tunnel state. To be addressed in upcoming PR. | ||
|
|
||
| struct ConnectionView: View { | ||
| var body: some View { | ||
| ZStack { | ||
| BlurView() | ||
|
|
||
| VStack(alignment: .leading, spacing: 16) { | ||
| ConnectionPanel() | ||
| ButtonPanel() | ||
| } | ||
| .padding(16) | ||
| } | ||
| .cornerRadius(12) | ||
| .padding(16) | ||
| // Importing UIView in SwitftUI (see BlurView) has sizing limitations, so we need to help the view | ||
| // understand its width constraints. | ||
| .frame(maxWidth: UIScreen.main.bounds.width) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| ZStack { | ||
| VStack { | ||
| Spacer() | ||
| ConnectionView() | ||
| } | ||
| } | ||
| .background(UIColor.secondaryColor.color) | ||
| .ignoresSafeArea() | ||
| } | ||
|
|
||
| private struct BlurView: View { | ||
| var body: some View { | ||
| Spacer() | ||
| .overlay { | ||
| VisualEffectView(effect: UIBlurEffect(style: .dark)) | ||
| .opacity(0.8) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private struct ConnectionPanel: View { | ||
| var body: some View { | ||
| VStack(alignment: .leading) { | ||
| Text("Connected") | ||
| .textCase(.uppercase) | ||
| .font(.title3.weight(.semibold)) | ||
| .foregroundStyle(UIColor.successColor.color) | ||
| .padding(.bottom, 4) | ||
| Text("Country, City") | ||
| .font(.title3.weight(.semibold)) | ||
| .foregroundStyle(UIColor.primaryTextColor.color) | ||
| Text("Server") | ||
| .font(.body) | ||
| .foregroundStyle(UIColor.primaryTextColor.color.opacity(0.6)) | ||
| } | ||
| } | ||
| } | ||
|
|
||
| private struct ButtonPanel: View { | ||
| var body: some View { | ||
| VStack(spacing: 16) { | ||
| SplitMainButton( | ||
| text: "Switch location", | ||
| image: .iconReload, | ||
| style: .default, | ||
| primaryAction: { | ||
| print("Switch location tapped") | ||
| }, secondaryAction: { | ||
| print("Reload tapped") | ||
| } | ||
| ) | ||
|
|
||
| MainButton( | ||
| text: "Cancel", | ||
| style: .danger | ||
| ) { | ||
| print("Cancel tapped") | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| // | ||
| // Untitled.swift | ||
| // MullvadVPN | ||
| // | ||
| // Created by Jon Petersson on 2024-12-04. | ||
| // Copyright © 2024 Mullvad VPN AB. All rights reserved. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct MainButton: View { | ||
| var text: String | ||
| var style: MainButtonStyle.Style | ||
|
|
||
| var action: () -> Void | ||
|
|
||
| var body: some View { | ||
| Button(action: action, label: { | ||
| HStack { | ||
| Spacer() | ||
| Text(text) | ||
| Spacer() | ||
| } | ||
| }) | ||
| .buttonStyle(MainButtonStyle(style)) | ||
| .cornerRadius(UIMetrics.MainButton.cornerRadius) | ||
| } | ||
| } | ||
|
|
||
| #Preview { | ||
| MainButton(text: "Connect", style: .default) { | ||
| print("Tapped") | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| // | ||
| // MainButtonStyle.swift | ||
| // MullvadVPN | ||
| // | ||
| // Created by Jon Petersson on 2024-12-05. | ||
| // Copyright © 2024 Mullvad VPN AB. All rights reserved. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| struct MainButtonStyle: ButtonStyle { | ||
| @State var style: Style | ||
|
|
||
| init(_ style: Style) { | ||
| self.style = style | ||
| } | ||
|
|
||
| func makeBody(configuration: Configuration) -> some View { | ||
| configuration.label | ||
| .padding(.horizontal, 8) | ||
| .frame(height: 44) | ||
| .foregroundColor( | ||
| configuration.isPressed | ||
| ? UIColor.secondaryTextColor.color | ||
| : UIColor.primaryTextColor.color | ||
| ) | ||
| .background(style.color) | ||
| .font(.body.weight(.semibold)) | ||
| } | ||
| } | ||
|
|
||
| extension MainButtonStyle { | ||
| enum Style { | ||
| case `default` | ||
| case danger | ||
| case success | ||
|
|
||
| var color: Color { | ||
| switch self { | ||
| case .default: | ||
| Color(UIColor.primaryColor) | ||
| case .danger: | ||
| Color(UIColor.dangerColor) | ||
| case .success: | ||
| Color(UIColor.successColor) | ||
| } | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.