98.swift

98.swift

//
//  98.swift
//
//  Created by Rob Chatfield on 24/4/20.
//  Inspired by (98.css)[https://jdan.github.io/98.css]
//  Copyright © 2020 Rob Chatfield. All rights reserved.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // Title
            WinTitle(title: "My First VB4 Program")
            // Text
            HStack {
                Text("Hello, world!")
                Spacer()
            }
            .padding(10)
            // Buttons
            HStack {
                Spacer()
                Button("OK") { }
                Button("Cancel") { }
            }
            .padding(top: 10, bottom: 15, trailing: 15)
        }
        .frame(maxWidth: 350)
        .win_raised()
        .font(.win1)
        .foregroundColor(.win_text)
        .buttonStyle(WinButton())
    }
}

// MARK: - Buttons

struct WinButton: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(configuration.isPressed ? .win_heading_text : .win_text)
            .padding(.vertical, 2)
            .padding(.horizontal, 8)
            .frame(minWidth: 100)
            .background(Color.win_background)
            .win_raised(isPressed: configuration.isPressed)
            .animation(.none)
    }
}

// MARK: - Title

struct WinTitle: View {
    let title: String
    
    var body: some View {
        HStack {
            Text(title)
                .font(.win_heading)
                .foregroundColor(.win_heading_text)
                .padding(.horizontal, 2)
            Spacer()
            HStack(spacing: 5) {
               WinWindowMinimiseButton()
               WinWindowMaximiseButton()
               WinWindowCloseButton()
            }
            .buttonStyle(WinButton2())
            .padding(5)
        }
        .background(Color.win_heading_background)
        .padding(1)
    }
}

struct WinWindowCloseButton: View {
    var body: some View {
        Button(action: { }) {
            Path { (path: inout Path) in
                path.move(to: CGPoint(x: 2, y: 1))
                path.addLine(to: CGPoint(x: 12, y: 10))
                path.move(to: CGPoint(x: 2, y: 10))
                path.addLine(to: CGPoint(x: 12, y: 1))
            }
            .stroke(Color.win_borderBottom2, lineWidth: 2)
            .frame(width: 14, height: 12)
        }
    }
}

struct WinWindowMaximiseButton: View {
    var body: some View {
        Button(action: { }) {
            Path { (path: inout Path) in
                path.addRect(CGRect(x: 2, y: 2, width: 10, height: 9))
                path.move(to: CGPoint(x: 2, y: 3))
                path.addLine(to: CGPoint(x: 12, y: 3))
            }
            .stroke(Color.win_borderBottom2, lineWidth: 1.5)
            .frame(width: 14, height: 12)
        }
    }
}

struct WinWindowMinimiseButton: View {
    var body: some View {
        Button(action: { }) {
            Path { (path: inout Path) in
                path.move(to: CGPoint(x: 2, y: 10))
                path.addLine(to: CGPoint(x: 10, y: 10))
            }
            .stroke(Color.win_borderBottom2, lineWidth: 2.5)
            .frame(width: 14, height: 12)
        }
    }
}

struct WinButton2: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding(2)
            .foregroundColor(configuration.isPressed ? .win_heading_text : .win_text)
            .frame(width: 14, height: 12)
            .background(Color.win_background)
            .win_raised(isPressed: configuration.isPressed)
            .animation(.none)
    }
}

// MARK: - Helpers

extension View {
    
    func win_raised(isPressed: Bool = false) -> some View {
        let borderWidth: CGFloat = 1
        return self
            .background(Color.win_background)
            .padding(top: borderWidth, leading: borderWidth)
            .background(isPressed ? Color.win_borderBottom1 : Color.win_borderTop1)
            .padding(bottom: borderWidth, trailing: borderWidth)
            .background(isPressed ? Color.win_borderTop1 : Color.win_borderBottom1)
            .padding(top: borderWidth, leading: borderWidth)
            .background(isPressed ? Color.win_borderBottom2 : Color.win_borderTop2)
            .padding(bottom: borderWidth, trailing: borderWidth)
            .background(isPressed ? Color.win_borderTop2 : Color.win_borderBottom2)
    }
    
    func padding(
        top: CGFloat? = nil,
        leading: CGFloat? = nil,
        bottom: CGFloat? = nil,
        trailing: CGFloat? = nil
    ) -> some View {
        padding(EdgeInsets(
            top: top ?? 0,
            leading: leading ?? 0,
            bottom: bottom ?? 0,
            trailing: trailing ?? 0
        ))
    }
}

// MARK: - Style

extension Color {
    
    static let win_text = Color(#colorLiteral(red: 0.1333196759, green: 0.1333409548, blue: 0.133312434, alpha: 1))
    static let win_background = Color(#colorLiteral(red: 0.7528827786, green: 0.7529742718, blue: 0.752851665, alpha: 1))
    
    static let win_heading_text = Color(#colorLiteral(red: 0.9999071956, green: 1, blue: 0.999881804, alpha: 1))
    static let win_heading_background = LinearGradient(
        gradient: Gradient(colors: [Color(#colorLiteral(red: 0.03092844412, green: 0.02612281404, blue: 0.5239065289, alpha: 1)), Color(#colorLiteral(red: 0.0677633509, green: 0.5190133452, blue: 0.8152487874, alpha: 1))]),
        startPoint: .leading,
        endPoint: .trailing
    )
    
    static let win_borderTop1 = Color(#colorLiteral(red: 0.8744425774, green: 0.8745477796, blue: 0.8744066358, alpha: 1))
    static let win_borderTop2 = Color(#colorLiteral(red: 0.9999071956, green: 1, blue: 0.999881804, alpha: 1))
    static let win_borderBottom1 = Color(#colorLiteral(red: 0.5019205213, green: 0.501983583, blue: 0.501899004, alpha: 1))
    static let win_borderBottom2 = Color(#colorLiteral(red: 0.03920887411, green: 0.03921952844, blue: 0.03920524195, alpha: 1))
    
}

extension Font {
    static let win1 = Font.custom("AppleSDGothicNeo-Medium", size: 17)
    static let win2 = Font.custom("AppleSDGothicNeo-Regular", size: 17)
    static let win_heading = Font.custom("AppleSDGothicNeo-Bold", size: 17)
}

// MARK: - Preview

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ZStack {
            Color.win_background
            ContentView()
        }
        .previewDevice("iPad Air 2")
        .previewLayout(.sizeThatFits)
    }
}