mirror of
https://github.com/nicoverbruggen/phpmon.git
synced 2025-08-07 03:50:08 +02:00
🍱 Tweaked onboarding view
This commit is contained in:
@ -8,96 +8,109 @@
|
||||
|
||||
import SwiftUI
|
||||
|
||||
struct OnboardingTextItem: View {
|
||||
@State var icon: String
|
||||
@State var title: String
|
||||
@State var description: String
|
||||
var body: some View {
|
||||
HStack(spacing: 15) {
|
||||
Image(systemName: icon)
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.frame(width: 24, height: 24)
|
||||
.foregroundColor(Color.appPrimary)
|
||||
.padding(.trailing, 10)
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
Text(title.localizedForSwiftUI)
|
||||
.font(.system(size: 15))
|
||||
Text(description.localizedForSwiftUI)
|
||||
.foregroundColor(Color.secondary)
|
||||
.font(.system(size: 13))
|
||||
.fixedSize(horizontal: false, vertical: true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct OnboardingView: View {
|
||||
var body: some View {
|
||||
VStack {
|
||||
VStack(alignment: .leading) {
|
||||
HStack {
|
||||
Image(nsImage: NSApp.applicationIconImage)
|
||||
.resizable()
|
||||
.frame(width: 80, height: 80)
|
||||
.padding(.bottom, 5)
|
||||
.padding(.trailing, 25)
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
Text("onboarding.welcome".localized)
|
||||
.font(.title)
|
||||
.bold()
|
||||
VStack(spacing: 10) {
|
||||
VStack(alignment: .center) {
|
||||
HStack {
|
||||
Image(nsImage: NSApp.applicationIconImage)
|
||||
.resizable()
|
||||
.frame(width: 80, height: 80)
|
||||
.padding(.bottom, 5)
|
||||
Text("onboarding.explore".localized)
|
||||
.padding(.bottom)
|
||||
}.padding(.top, 10)
|
||||
}
|
||||
|
||||
TabView {
|
||||
.padding(.trailing, 25)
|
||||
VStack(alignment: .leading, spacing: 0) {
|
||||
Text("onboarding.welcome".localized)
|
||||
.font(.title)
|
||||
.bold()
|
||||
.padding(.bottom, 5)
|
||||
Text("onboarding.explore".localized)
|
||||
.padding(.bottom)
|
||||
}
|
||||
.padding(.top, 10)
|
||||
}
|
||||
VStack {
|
||||
Image("Tour.MenuBar")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.padding(.top)
|
||||
Text("onboarding.tour.menu_bar".localizedForSwiftUI)
|
||||
.padding(.init(top: 5, leading: 20, bottom: 20, trailing: 20))
|
||||
}.tabItem { Label("onboarding.tour.menu_bar.title".localized,
|
||||
systemImage: "info.circle.fill") }
|
||||
VStack {
|
||||
Image("Tour.Domains")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.padding(.top)
|
||||
Text("onboarding.tour.domains".localized)
|
||||
.padding(.init(top: 5, leading: 20, bottom: 20, trailing: 20))
|
||||
}.tabItem { Label("onboarding.tour.domains.title".localized,
|
||||
systemImage: "info.circle.fill") }
|
||||
VStack {
|
||||
Image("Tour.Isolation")
|
||||
.resizable()
|
||||
.aspectRatio(contentMode: .fit)
|
||||
.padding(.top)
|
||||
Text("onboarding.tour.isolation".localized)
|
||||
.padding(.init(top: 5, leading: 20, bottom: 20, trailing: 20))
|
||||
}.tabItem { Label("onboarding.tour.isolation.title".localized,
|
||||
systemImage: "info.circle.fill") }
|
||||
VStack(alignment: .leading, spacing: 20) {
|
||||
OnboardingTextItem(
|
||||
icon: "sparkles.rectangle.stack",
|
||||
title: "onboarding.tour.menu_bar.title",
|
||||
description: "onboarding.tour.menu_bar"
|
||||
)
|
||||
OnboardingTextItem(
|
||||
icon: "list.star",
|
||||
title: "onboarding.tour.domains.title",
|
||||
description: "onboarding.tour.domains"
|
||||
)
|
||||
OnboardingTextItem(
|
||||
icon: "pin.fill",
|
||||
title: "onboarding.tour.isolation.title",
|
||||
description: "onboarding.tour.isolation"
|
||||
)
|
||||
}
|
||||
.padding(20)
|
||||
.overlay(
|
||||
RoundedRectangle(cornerRadius: 10)
|
||||
.stroke(Color.gray.opacity(0.3), lineWidth: 1)
|
||||
)
|
||||
}.padding()
|
||||
VStack(spacing: 20) {
|
||||
HStack {
|
||||
Image(systemName: "questionmark.circle.fill")
|
||||
.resizable()
|
||||
.frame(width: 24, height: 24)
|
||||
.foregroundColor(Color.appSecondary)
|
||||
.padding(.trailing, 10)
|
||||
Text("onboarding.tour.faq_hint".localizedForSwiftUI)
|
||||
}
|
||||
VStack {
|
||||
Text("onboarding.tour.once".localized)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.gray)
|
||||
.padding(.top, 5)
|
||||
.padding(.bottom, 5)
|
||||
Button("onboarding.tour.close".localized) {
|
||||
App.shared.onboardingWindowController?.close()
|
||||
}
|
||||
}
|
||||
}.padding()
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
|
||||
VStack(alignment: .center) {
|
||||
HStack {
|
||||
Image(systemName: "person.fill.questionmark")
|
||||
.resizable()
|
||||
.frame(width: 24, height: 24)
|
||||
.foregroundColor(.accentColor)
|
||||
.padding(.trailing, 10)
|
||||
Text("onboarding.tour.faq_hint".localizedForSwiftUI)
|
||||
}.padding()
|
||||
Text("onboarding.tour.once".localized)
|
||||
.font(.subheadline)
|
||||
.foregroundColor(.gray)
|
||||
.padding(.top, 5)
|
||||
.padding(.bottom, 5)
|
||||
Button("Close Tour") {
|
||||
App.shared.onboardingWindowController?.close()
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(maxHeight: 580)
|
||||
}
|
||||
.padding(.top, 8)
|
||||
.padding(.leading)
|
||||
.padding(.trailing)
|
||||
.padding(.bottom)
|
||||
}
|
||||
}
|
||||
|
||||
struct OnboardingView_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
Group {
|
||||
OnboardingView().frame(
|
||||
width: 600,
|
||||
height: 600
|
||||
)
|
||||
OnboardingView().preferredColorScheme(.dark).frame(
|
||||
width: 600,
|
||||
height: 600
|
||||
)
|
||||
OnboardingView()
|
||||
OnboardingView().preferredColorScheme(.dark)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -513,12 +513,13 @@ If you are seeing this message but are confused why this folder has gone missing
|
||||
|
||||
"onboarding.title" = "Welcome Tour";
|
||||
"onboarding.welcome" = "Welcome to PHP Monitor!";
|
||||
"onboarding.explore" = "Explore some of the cool features PHP Monitor has to offer.";
|
||||
"onboarding.explore" = "Learn more about some of the features that PHP Monitor has to offer.";
|
||||
"onboarding.tour.menu_bar.title" = "Get Started";
|
||||
"onboarding.tour.menu_bar" = "PHP Monitor lives in your menu bar. From here, you can switch the globally linked PHP version, start or stop services, locate configuration files, and more.";
|
||||
"onboarding.tour.faq_hint" = "**If you are new to PHP Monitor**, I recommend that you check out the [README](https://github.com/nicoverbruggen/phpmon/blob/main/README.md) on GitHub: it contains a comprehensive FAQ with various tips and common questions and answers. Don't hesitate to get in touch either.";
|
||||
"onboarding.tour.faq_hint" = "I recommend that you check out the [README](https://github.com/nicoverbruggen/phpmon/blob/main/README.md) on GitHub: it contains a comprehensive FAQ with various tips and common questions and answers.";
|
||||
"onboarding.tour.domains.title" = "Domains";
|
||||
"onboarding.tour.domains" = "By opening the Domains window via the Menu Bar item, you can view which domains are linked and parked.";
|
||||
"onboarding.tour.isolation.title" = "Isolation";
|
||||
"onboarding.tour.isolation" = "If you have Valet 3 installed, you can even use domain isolation by right-clicking on a given domain in the Domains window. This allows you to pick a specific version of PHP to use for that domain!";
|
||||
"onboarding.tour.once" = "You will only see the Welcome Tour once. You can re-open the Welcome Tour later via the menu bar icon.";
|
||||
"onboarding.tour.close" = "Close Tour";
|
||||
|
||||
Reference in New Issue
Block a user