minor UI changes
This commit is contained in:
parent
586f5fcea0
commit
58e5c2c555
@ -1,4 +1,5 @@
|
||||
import SwiftUI
|
||||
import SwiftData
|
||||
|
||||
extension View {
|
||||
func placeholder<Content: View>(
|
||||
@ -69,6 +70,7 @@ struct PowerModeView: View {
|
||||
var body: some View {
|
||||
NavigationStack(path: $navigationPath) {
|
||||
VStack(spacing: 0) {
|
||||
// Header Section
|
||||
VStack(spacing: 12) {
|
||||
HStack {
|
||||
VStack(alignment: .leading, spacing: 4) {
|
||||
@ -135,120 +137,122 @@ struct PowerModeView: View {
|
||||
.padding(.horizontal, 24)
|
||||
.padding(.top, 20)
|
||||
.padding(.bottom, 16)
|
||||
.frame(maxWidth: .infinity)
|
||||
.background(Color(NSColor.windowBackgroundColor))
|
||||
|
||||
Rectangle()
|
||||
.fill(Color(NSColor.separatorColor))
|
||||
.frame(height: 1)
|
||||
.padding(.horizontal, 24)
|
||||
|
||||
if isReorderMode {
|
||||
VStack(spacing: 12) {
|
||||
List {
|
||||
ForEach(powerModeManager.configurations) { config in
|
||||
HStack(spacing: 12) {
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(Color(NSColor.controlBackgroundColor))
|
||||
.frame(width: 40, height: 40)
|
||||
Text(config.emoji)
|
||||
.font(.system(size: 20))
|
||||
}
|
||||
|
||||
Text(config.name)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
|
||||
Spacer()
|
||||
|
||||
HStack(spacing: 6) {
|
||||
if config.isDefault {
|
||||
Text("Default")
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule().fill(Color.accentColor))
|
||||
.foregroundColor(.white)
|
||||
// Content Section
|
||||
Group {
|
||||
if isReorderMode {
|
||||
VStack(spacing: 12) {
|
||||
List {
|
||||
ForEach(powerModeManager.configurations) { config in
|
||||
HStack(spacing: 12) {
|
||||
ZStack {
|
||||
Circle()
|
||||
.fill(Color(NSColor.controlBackgroundColor))
|
||||
.frame(width: 40, height: 40)
|
||||
Text(config.emoji)
|
||||
.font(.system(size: 20))
|
||||
}
|
||||
if !config.isEnabled {
|
||||
Text("Disabled")
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(Capsule().fill(Color(NSColor.controlBackgroundColor)))
|
||||
.overlay(
|
||||
Capsule().stroke(Color(NSColor.separatorColor), lineWidth: 0.5)
|
||||
)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.vertical, 12)
|
||||
.padding(.horizontal, 14)
|
||||
.background(CardBackground(isSelected: false))
|
||||
.listRowInsets(EdgeInsets())
|
||||
.listRowBackground(Color.clear)
|
||||
.listRowSeparator(.hidden)
|
||||
.padding(.vertical, 6)
|
||||
}
|
||||
.onMove(perform: powerModeManager.moveConfigurations)
|
||||
}
|
||||
.listStyle(.plain)
|
||||
.listRowSeparator(.hidden)
|
||||
.scrollContentBackground(.hidden)
|
||||
.background(Color(NSColor.controlBackgroundColor))
|
||||
}
|
||||
.padding(.horizontal, 24)
|
||||
.padding(.vertical, 20)
|
||||
} else {
|
||||
GeometryReader { geometry in
|
||||
ScrollView {
|
||||
VStack(spacing: 0) {
|
||||
if powerModeManager.configurations.isEmpty {
|
||||
VStack(spacing: 24) {
|
||||
|
||||
Text(config.name)
|
||||
.font(.system(size: 15, weight: .semibold))
|
||||
|
||||
Spacer()
|
||||
.frame(height: geometry.size.height * 0.2)
|
||||
|
||||
VStack(spacing: 16) {
|
||||
Image(systemName: "square.grid.2x2.fill")
|
||||
.font(.system(size: 48, weight: .regular))
|
||||
.foregroundColor(.secondary.opacity(0.6))
|
||||
|
||||
VStack(spacing: 8) {
|
||||
Text("No Power Modes Yet")
|
||||
.font(.system(size: 20, weight: .medium))
|
||||
.foregroundColor(.primary)
|
||||
|
||||
Text("Create first power mode to automate your VoiceInk workflow based on apps/website you are using")
|
||||
.font(.system(size: 14))
|
||||
|
||||
HStack(spacing: 6) {
|
||||
if config.isDefault {
|
||||
Text("Default")
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule().fill(Color.accentColor))
|
||||
.foregroundColor(.white)
|
||||
}
|
||||
if !config.isEnabled {
|
||||
Text("Disabled")
|
||||
.font(.system(size: 11, weight: .medium))
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.background(Capsule().fill(Color(NSColor.controlBackgroundColor)))
|
||||
.overlay(
|
||||
Capsule().stroke(Color(NSColor.separatorColor), lineWidth: 0.5)
|
||||
)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
.lineSpacing(2)
|
||||
}
|
||||
}
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(minHeight: geometry.size.height)
|
||||
} else {
|
||||
VStack(spacing: 0) {
|
||||
PowerModeConfigurationsGrid(
|
||||
powerModeManager: powerModeManager,
|
||||
onEditConfig: { config in
|
||||
configurationMode = .edit(config)
|
||||
navigationPath.append(configurationMode!)
|
||||
.padding(.vertical, 12)
|
||||
.padding(.horizontal, 14)
|
||||
.background(CardBackground(isSelected: false))
|
||||
.listRowInsets(EdgeInsets())
|
||||
.listRowBackground(Color.clear)
|
||||
.listRowSeparator(.hidden)
|
||||
.padding(.vertical, 6)
|
||||
}
|
||||
.onMove(perform: powerModeManager.moveConfigurations)
|
||||
}
|
||||
.listStyle(.plain)
|
||||
.listRowSeparator(.hidden)
|
||||
.scrollContentBackground(.hidden)
|
||||
.background(Color(NSColor.controlBackgroundColor))
|
||||
}
|
||||
.padding(.horizontal, 16)
|
||||
.padding(.vertical, 20)
|
||||
} else {
|
||||
GeometryReader { geometry in
|
||||
ScrollView {
|
||||
VStack(spacing: 0) {
|
||||
if powerModeManager.configurations.isEmpty {
|
||||
VStack(spacing: 24) {
|
||||
Spacer()
|
||||
.frame(height: geometry.size.height * 0.2)
|
||||
|
||||
VStack(spacing: 16) {
|
||||
Image(systemName: "square.grid.2x2.fill")
|
||||
.font(.system(size: 48, weight: .regular))
|
||||
.foregroundColor(.secondary.opacity(0.6))
|
||||
|
||||
VStack(spacing: 8) {
|
||||
Text("No Power Modes Yet")
|
||||
.font(.system(size: 20, weight: .medium))
|
||||
.foregroundColor(.primary)
|
||||
|
||||
Text("Create first power mode to automate your VoiceInk workflow based on apps/website you are using")
|
||||
.font(.system(size: 14))
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
.lineSpacing(2)
|
||||
}
|
||||
}
|
||||
)
|
||||
.padding(.horizontal, 24)
|
||||
.padding(.vertical, 20)
|
||||
|
||||
Spacer()
|
||||
.frame(height: 40)
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.frame(minHeight: geometry.size.height)
|
||||
} else {
|
||||
VStack(spacing: 0) {
|
||||
PowerModeConfigurationsGrid(
|
||||
powerModeManager: powerModeManager,
|
||||
onEditConfig: { config in
|
||||
configurationMode = .edit(config)
|
||||
navigationPath.append(configurationMode!)
|
||||
}
|
||||
)
|
||||
.padding(.horizontal, 24)
|
||||
.padding(.vertical, 20)
|
||||
|
||||
Spacer()
|
||||
.frame(height: 40)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.background(Color(NSColor.controlBackgroundColor))
|
||||
}
|
||||
.background(Color(NSColor.controlBackgroundColor))
|
||||
.navigationDestination(for: ConfigurationMode.self) { mode in
|
||||
@ -259,11 +263,9 @@ struct PowerModeView: View {
|
||||
}
|
||||
|
||||
|
||||
|
||||
// New component for section headers
|
||||
struct SectionHeader: View {
|
||||
let title: String
|
||||
|
||||
|
||||
var body: some View {
|
||||
Text(title)
|
||||
.font(.system(size: 16, weight: .bold))
|
||||
|
||||
@ -65,7 +65,6 @@ struct PowerModeConfigurationsGrid: View {
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(.horizontal)
|
||||
}
|
||||
}
|
||||
|
||||
@ -186,7 +185,7 @@ struct ConfigurationRow: View {
|
||||
.font(.caption2)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if websiteCount > 0 {
|
||||
HStack(spacing: 4) {
|
||||
Image(systemName: "globe")
|
||||
@ -196,6 +195,7 @@ struct ConfigurationRow: View {
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(.top, 2)
|
||||
.foregroundColor(.secondary)
|
||||
}
|
||||
|
||||
@ -213,7 +213,6 @@ struct ConfigurationRow: View {
|
||||
|
||||
if selectedModel != nil || selectedLanguage != nil || config.isAIEnhancementEnabled || config.isAutoSendEnabled {
|
||||
Divider()
|
||||
.padding(.horizontal, 16)
|
||||
|
||||
HStack(spacing: 8) {
|
||||
if let model = selectedModel, model != "Default" {
|
||||
@ -223,8 +222,8 @@ struct ConfigurationRow: View {
|
||||
Text(model)
|
||||
.font(.caption)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule()
|
||||
.fill(Color(NSColor.controlBackgroundColor)))
|
||||
.overlay(
|
||||
@ -240,8 +239,8 @@ struct ConfigurationRow: View {
|
||||
Text(language)
|
||||
.font(.caption)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule()
|
||||
.fill(Color(NSColor.controlBackgroundColor)))
|
||||
.overlay(
|
||||
@ -257,8 +256,8 @@ struct ConfigurationRow: View {
|
||||
Text(modelName.count > 20 ? String(modelName.prefix(18)) + "..." : modelName)
|
||||
.font(.caption)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule()
|
||||
.fill(Color(NSColor.controlBackgroundColor)))
|
||||
.overlay(
|
||||
@ -274,8 +273,8 @@ struct ConfigurationRow: View {
|
||||
Text("Auto Send")
|
||||
.font(.caption)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule()
|
||||
.fill(Color(NSColor.controlBackgroundColor)))
|
||||
.overlay(
|
||||
@ -291,8 +290,8 @@ struct ConfigurationRow: View {
|
||||
Text("Context Awareness")
|
||||
.font(.caption)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule()
|
||||
.fill(Color(NSColor.controlBackgroundColor)))
|
||||
.overlay(
|
||||
@ -307,8 +306,8 @@ struct ConfigurationRow: View {
|
||||
Text(selectedPrompt?.title ?? "AI")
|
||||
.font(.caption)
|
||||
}
|
||||
.padding(.horizontal, 8)
|
||||
.padding(.vertical, 4)
|
||||
.padding(.horizontal, 6)
|
||||
.padding(.vertical, 2)
|
||||
.background(Capsule()
|
||||
.fill(Color.accentColor.opacity(0.1)))
|
||||
.foregroundColor(.accentColor)
|
||||
@ -316,10 +315,13 @@ struct ConfigurationRow: View {
|
||||
|
||||
Spacer()
|
||||
}
|
||||
.padding(.vertical, 10)
|
||||
|
||||
.padding(.vertical, 6)
|
||||
.padding(.horizontal, 16)
|
||||
.background(Color.secondary.opacity(0.1))
|
||||
}
|
||||
}
|
||||
.clipShape(RoundedRectangle(cornerRadius: 16))
|
||||
.background(CardBackground(isSelected: isEditing))
|
||||
.opacity(config.isEnabled ? 1.0 : 0.5)
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user