bogdan Refresh app UI with themed meter views

d426752 2 weeks ago History

//
//  ControlView.swift
//  USB Meter
//
//  Created by Bogdan Timofte on 09/03/2020.
//  Copyright © 2020 Bogdan Timofte. All rights reserved.
//

import SwiftUI

struct ControlView: View {
    
    @EnvironmentObject private var meter: Meter

    var body: some View {
        VStack(alignment: .leading, spacing: 14) {
            HStack {
                Text("Controls")
                    .font(.headline)
                Spacer()
                Text(meter.reportsCurrentScreenIndex ? "Device Screen" : "Page Controls")
                    .font(.caption.weight(.semibold))
                    .foregroundColor(.secondary)
            }

            HStack(spacing: 12) {
                controlButton(
                    title: "Prev",
                    symbol: "chevron.left",
                    tint: .indigo,
                    action: { meter.previousScreen() }
                )

                VStack(spacing: 6) {
                    Text(meter.currentScreenDescription)
                        .font(.subheadline.weight(.semibold))
                        .multilineTextAlignment(.center)
                    if !meter.reportsCurrentScreenIndex {
                        Text("The protocol allows navigation, but it does not report the active page back to the app.")
                            .font(.caption)
                            .foregroundColor(.secondary)
                            .multilineTextAlignment(.center)
                    }
                }
                .frame(maxWidth: .infinity, minHeight: 92)
                .padding(.horizontal, 12)
                .meterCard(tint: meter.color, fillOpacity: 0.06, strokeOpacity: 0.10)

                controlButton(
                    title: "Next",
                    symbol: "chevron.right",
                    tint: .indigo,
                    action: { meter.nextScreen() }
                )
            }

            controlButton(
                title: "Rotate Screen",
                symbol: "rotate.right.fill",
                tint: .orange,
                compact: false,
                action: { meter.rotateScreen() }
            )
        }
    }

    private func controlButton(
        title: String,
        symbol: String,
        tint: Color,
        compact: Bool = true,
        action: @escaping () -> Void
    ) -> some View {
        Button(action: action) {
            VStack(spacing: 10) {
                Image(systemName: symbol)
                    .font(.system(size: compact ? 18 : 20, weight: .semibold))
                Text(title)
                    .font(.footnote.weight(.semibold))
                    .multilineTextAlignment(.center)
            }
            .foregroundColor(tint)
            .frame(maxWidth: .infinity, minHeight: compact ? 92 : 68)
            .padding(.horizontal, 8)
            .meterCard(tint: tint, fillOpacity: 0.10, strokeOpacity: 0.14)
        }
        .buttonStyle(.plain)
    }
}

struct ControlView_Previews: PreviewProvider {
    static var previews: some View {
        ControlView()
    }
}