mirror of
https://github.com/Novaloop-AG/element-x-ios.git
synced 2026-11-03 06:55:59 +00:00
Move Compound Inspector into the project.
This commit is contained in:
Doug
Doug
@@ -0,0 +1,53 @@
|
||||
//
|
||||
// Copyright 2023, 2024 New Vector Ltd.
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
// Please see LICENSE files in the repository root for full details.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import Compound
|
||||
|
||||
struct ActionSheetScreen: View {
|
||||
@State private var isPresentingConfirmationDialog = true
|
||||
|
||||
var body: some View {
|
||||
ScreenContent(navigationTitle: "Action Sheets") {
|
||||
Text("This component will be rendered differently when running on macOS.")
|
||||
.font(.footnote)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
.toolbar {
|
||||
ToolbarItem(placement: .bottomBar) {
|
||||
Button("Show Sheet") {
|
||||
isPresentingConfirmationDialog = true
|
||||
}
|
||||
.confirmationDialog("A Short Title is Best",
|
||||
isPresented: $isPresentingConfirmationDialog) {
|
||||
Button("Default") { }
|
||||
Button("Default") { }
|
||||
Button("Default") { }
|
||||
Button("Disabled") { }
|
||||
.disabled(true) // This hides the button on iOS 16 😐
|
||||
Button("Destructive", role: .destructive) { }
|
||||
} message: {
|
||||
Text("A message should be a short, complete sentence.")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct ActionSheetScreen_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
NavigationStack {
|
||||
ActionSheetScreen()
|
||||
}
|
||||
.introspect(.window, on: .supportedVersions) { window in
|
||||
// Fix the tint colour like the App strut does.
|
||||
window.tintColor = .compound.textActionPrimary
|
||||
}
|
||||
.previewLayout(.fixed(width: 375, height: 750))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
//
|
||||
// Copyright 2023, 2024 New Vector Ltd.
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
// Please see LICENSE files in the repository root for full details.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import Compound
|
||||
|
||||
struct AlertScreen: View {
|
||||
@State private var isPresentingActionAlert = false
|
||||
@State private var isPresentingActionAndCancelAlert = false
|
||||
@State private var isPresentingDestructiveAlert = false
|
||||
@State private var isPresentingTextFieldAlert = false
|
||||
@State private var textFieldValue = ""
|
||||
|
||||
private let title = "A Short Title is Best"
|
||||
private let message = "A message should be a short, complete sentence."
|
||||
|
||||
var body: some View {
|
||||
ScreenContent(navigationTitle: "Alerts") {
|
||||
Text("This component will be rendered differently when running on macOS.")
|
||||
.font(.footnote)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Button("Action") { isPresentingActionAlert = true }
|
||||
.padding(.top)
|
||||
.alert(title, isPresented: $isPresentingActionAlert) {
|
||||
Button("Action") { }
|
||||
} message: {
|
||||
Text(message)
|
||||
}
|
||||
|
||||
Button("Action and Cancel") { isPresentingActionAndCancelAlert = true }
|
||||
.padding(.top)
|
||||
.alert(title, isPresented: $isPresentingActionAndCancelAlert) {
|
||||
Button("Action") { }
|
||||
Button("Cancel", role: .cancel) { }
|
||||
} message: {
|
||||
Text(message)
|
||||
}
|
||||
|
||||
Button("Destructive") { isPresentingDestructiveAlert = true }
|
||||
.padding(.top)
|
||||
.alert(title, isPresented: $isPresentingDestructiveAlert) {
|
||||
Button("Action") { }
|
||||
Button("Destructive", role: .destructive) { }
|
||||
Button("Cancel", role: .cancel) { }
|
||||
} message: {
|
||||
Text(message)
|
||||
}
|
||||
|
||||
Button("TextField") { isPresentingTextFieldAlert = true }
|
||||
.padding(.top)
|
||||
.alert(title, isPresented: $isPresentingTextFieldAlert) {
|
||||
TextField("Input", text: $textFieldValue, prompt: Text("Placeholder"))
|
||||
Button("Action") { }
|
||||
Button("Cancel", role: .cancel) { }
|
||||
} message: {
|
||||
Text(message)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct AlertScreen_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
NavigationStack {
|
||||
AlertScreen()
|
||||
}
|
||||
.introspect(.window, on: .supportedVersions) { window in
|
||||
// Fix the tint colour like the App strut does.
|
||||
window.tintColor = .compound.textActionPrimary
|
||||
}
|
||||
.previewLayout(.fixed(width: 375, height: 750))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
//
|
||||
// Copyright 2023, 2024 New Vector Ltd.
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
// Please see LICENSE files in the repository root for full details.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import Compound
|
||||
|
||||
struct ContextMenuScreen: View {
|
||||
var body: some View {
|
||||
ScreenContent(navigationTitle: "Context Menus") {
|
||||
Text("This component will be rendered differently when running on macOS.")
|
||||
.font(.footnote)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
Text("Actions")
|
||||
.padding()
|
||||
.contentShape(.contextMenuPreview, RoundedRectangle(cornerRadius: 12))
|
||||
.contextMenu {
|
||||
Section {
|
||||
Button { } label: {
|
||||
Label("Action", systemImage: "square.dashed")
|
||||
}
|
||||
Button { } label: {
|
||||
Label("Action", systemImage: "square.dashed")
|
||||
}
|
||||
Button { } label: {
|
||||
Label("Disabled", systemImage: "square.dashed")
|
||||
}
|
||||
.disabled(true)
|
||||
Button(role: .destructive) { } label: {
|
||||
Label("Destructive", systemImage: "square.dashed")
|
||||
}
|
||||
}
|
||||
Section {
|
||||
Button { } label: {
|
||||
Label("Action", systemImage: "square.dashed")
|
||||
}
|
||||
Button { } label: {
|
||||
Label("Action", systemImage: "square.dashed")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text("Toggles")
|
||||
.padding()
|
||||
.contentShape(.contextMenuPreview, RoundedRectangle(cornerRadius: 12))
|
||||
.contextMenu {
|
||||
Section {
|
||||
Toggle(isOn: .constant(true)) {
|
||||
Label("Toggle", systemImage: "square.dashed")
|
||||
}
|
||||
Toggle(isOn: .constant(false)) {
|
||||
Label("Toggle", systemImage: "square.dashed")
|
||||
}
|
||||
Toggle(isOn: .constant(false)) {
|
||||
Label("Disabled", systemImage: "square.dashed")
|
||||
}
|
||||
.disabled(true)
|
||||
}
|
||||
Section {
|
||||
Toggle(isOn: .constant(true)) {
|
||||
Label("Toggle", systemImage: "square.dashed")
|
||||
}
|
||||
Toggle(isOn: .constant(true)) {
|
||||
Label("Toggle", systemImage: "square.dashed")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct ContextMenuScreen_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
NavigationStack {
|
||||
ContextMenuScreen()
|
||||
}
|
||||
.previewLayout(.fixed(width: 375, height: 750))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
//
|
||||
// Copyright 2023, 2024 New Vector Ltd.
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
// Please see LICENSE files in the repository root for full details.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import Compound
|
||||
|
||||
struct NavigationBarScreen: View {
|
||||
enum TitleMode {
|
||||
case large
|
||||
case inline
|
||||
case hidden
|
||||
}
|
||||
|
||||
enum BackButtonMode {
|
||||
case navigation
|
||||
case cancellationAction
|
||||
case hidden
|
||||
}
|
||||
|
||||
@State private var titleMode = TitleMode.inline
|
||||
@State private var backButtonMode = BackButtonMode.navigation
|
||||
@State private var hasConfirmationAction = true
|
||||
@State private var hasPrimaryAction = false
|
||||
|
||||
var body: some View {
|
||||
Form {
|
||||
Section {
|
||||
ListRow(kind: .custom {
|
||||
Text("This component may be rendered differently when running on macOS.")
|
||||
.font(.compound.bodySM)
|
||||
.foregroundColor(.compound.textSecondary)
|
||||
.multilineTextAlignment(.center)
|
||||
.frame(maxWidth: .infinity)
|
||||
.listRowBackground(Color.clear)
|
||||
})
|
||||
}
|
||||
|
||||
Section {
|
||||
ListRow(label: .plain(title: "Title"),
|
||||
kind: .picker(selection: $titleMode, items: [
|
||||
(title: "Large", tag: .large),
|
||||
(title: "Inline", tag: .inline),
|
||||
(title: "Hidden", tag: .hidden)
|
||||
]))
|
||||
ListRow(label: .plain(title: "Back Button"),
|
||||
kind: .picker(selection: $backButtonMode, items: [
|
||||
(title: "Navigation", tag: .navigation),
|
||||
(title: "Cancelation Action", tag: .cancellationAction),
|
||||
(title: "Hidden", tag: .hidden)
|
||||
]))
|
||||
|
||||
ListRow(label: .plain(title: "Confirmation Action"),
|
||||
kind: .toggle($hasConfirmationAction))
|
||||
ListRow(label: .plain(title: "Primary Action"),
|
||||
kind: .toggle($hasPrimaryAction))
|
||||
} header: {
|
||||
Text("Configuration")
|
||||
.compoundListSectionHeader()
|
||||
}
|
||||
|
||||
Section {
|
||||
ListRow(kind: .custom {
|
||||
VStack {
|
||||
Text("Empty section to make the form scrollable")
|
||||
.font(.compound.bodySM)
|
||||
.foregroundColor(.compound.textSecondary)
|
||||
Spacer(minLength: 500)
|
||||
}
|
||||
.padding(ListRowPadding.insets)
|
||||
})
|
||||
}
|
||||
}
|
||||
.compoundList()
|
||||
.navigationTitle(titleMode == .hidden ? "" : "Navigation Bar")
|
||||
.navigationBarTitleDisplayMode(titleMode == .large ? .large : .inline)
|
||||
.navigationBarBackButtonHidden(backButtonMode != .navigation)
|
||||
.toolbar {
|
||||
if hasConfirmationAction {
|
||||
ToolbarItem(placement: .confirmationAction) {
|
||||
Button("Confirm") { }
|
||||
}
|
||||
}
|
||||
|
||||
if hasPrimaryAction {
|
||||
ToolbarItem(placement: .primaryAction) {
|
||||
Button("Primary") { }
|
||||
}
|
||||
}
|
||||
|
||||
if backButtonMode == .cancellationAction {
|
||||
ToolbarItem(placement: .cancellationAction) {
|
||||
Button("Cancel") { }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct NavigationBarScreen_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
NavigationStack {
|
||||
NavigationBarScreen()
|
||||
}
|
||||
.previewLayout(.fixed(width: 375, height: 750))
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
//
|
||||
// Copyright 2023, 2024 New Vector Ltd.
|
||||
//
|
||||
// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
// Please see LICENSE files in the repository root for full details.
|
||||
//
|
||||
|
||||
import SwiftUI
|
||||
import Compound
|
||||
|
||||
struct ShareSheetScreen: View {
|
||||
var body: some View {
|
||||
ScreenContent(navigationTitle: "Share Sheets") {
|
||||
Text("This component will be rendered differently when running on macOS.")
|
||||
.font(.footnote)
|
||||
.foregroundColor(.secondary)
|
||||
.multilineTextAlignment(.center)
|
||||
|
||||
ShareLink(item: URL(string: "https://element.io")!, subject: Text("The subject"), message: Text("The message"))
|
||||
.padding(.top)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct ShareSheetScreen_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
NavigationStack {
|
||||
ShareSheetScreen()
|
||||
}
|
||||
.previewLayout(.fixed(width: 375, height: 750))
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user