Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Horizon] Add navigation bar #3034

Merged
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -18,11 +18,15 @@

import Core
import SwiftUI
import HorizonUI

struct DashboardView: View {
@ObservedObject private var viewModel: DashboardViewModel
@Environment(\.viewController) private var viewController

// TODO: - Set with correct url later
private let logoURL = "https://cdn.prod.website-files.com/5f7685be6c8c113f558855d9/62c87dbd6208a1e98e89e707_Logo_Canvas_Red_Vertical%20copy.png"

init(viewModel: DashboardViewModel) {
self.viewModel = viewModel
}
@@ -50,8 +54,14 @@ struct DashboardView: View {
}
}
}
.navigationBarItems(leading: nameLabel)
.navigationBarItems(trailing: navBarIcons)
.navigationBarItems(leading: HorizonUI.NavigationBar.Leading(logoURL: logoURL))
.navigationBarItems(trailing: HorizonUI.NavigationBar.Trailing {
viewModel.notebookDidTap(controller: viewController)
} onNotificationDidTap: {
viewModel.notificationsDidTap()
} onMailDidTap: {
viewModel.mailDidTap()
})
.scrollIndicators(.hidden, axes: .vertical)
.background(Color.backgroundLight)
}
@@ -60,43 +70,6 @@ struct DashboardView: View {
Size16RegularTextDarkestTitle(title: viewModel.title)
}

private var navBarIcons: some View {
HStack(spacing: 0) {
Button {
viewModel.notebookDidTap(viewController)
} label: {
Image(systemName: "book.closed")
.tint(.backgroundDark)
.frame(width: 40, height: 40)
.background(Color.backgroundLightest)
.clipShape(.circle)
.shadow(color: .backgroundDark, radius: 2)
}

Button {
viewModel.notificationsDidTap()
} label: {
Image(systemName: "bell.badge")
.tint(.backgroundDark)
.frame(width: 40, height: 40)
.background(Color.backgroundLightest)
.clipShape(.circle)
.shadow(color: .backgroundDark, radius: 2)
}

Button {
viewModel.profileDidTap()
} label: {
Image(systemName: "person")
.tint(.backgroundDark)
.frame(width: 40, height: 40)
.background(Color.backgroundLightest)
.clipShape(.circle)
.shadow(color: .backgroundDark, radius: 2)
}
}
}

@ViewBuilder
private func moduleView(course: HCourse) -> some View {
if let module = course.currentModule, let moduleItem = course.currentModuleItem {
Original file line number Diff line number Diff line change
@@ -59,11 +59,11 @@ final class DashboardViewModel: ObservableObject {

// MARK: - Inputs

func notebookDidTap(_ viewController: WeakViewController) {
router.route(to: "/notebook", from: viewController)
func notebookDidTap(controller: WeakViewController ) {
router.route(to: "/notebook", from: controller)
}

func notificationsDidTap() {}

func profileDidTap() {}
func mailDidTap() {}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"images" : [
{
"filename" : "menu_book_notebook.svg",
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
},
"properties" : {
"template-rendering-intent" : "template"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
//
// This file is part of Canvas.
// Copyright (C) 2024-present Instructure, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
//

import SwiftUI
public extension HorizonUI.NavigationBar {
struct Storybook: View {
public var body: some View {
VStack {

}
.navigationBarItems(leading: HorizonUI.NavigationBar.Leading(logoURL: "https://cdn.prod.website-files.com/5f7685be6c8c113f558855d9/62c87dbd6208a1e98e89e707_Logo_Canvas_Red_Vertical%20copy.png"))
.navigationBarItems(trailing: HorizonUI.NavigationBar.Trailing(onNotebookDidTap: {}, onNotificationDidTap: {}, onMailDidTap: {}))
.navigationTitle("NavigationBar")
}
}
}

#Preview {
HorizonUI.NavigationBar.Storybook()
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
//
// This file is part of Canvas.
// Copyright (C) 2024-present Instructure, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
//

import SwiftUI

public extension HorizonUI.NavigationBar {
struct Leading: View {
let logoURL: String

public init(logoURL: String) {
self.logoURL = logoURL
}

public var body: some View {
AsyncImage(url: URL(string: logoURL)) { image in
image
.image?
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 118, height: 44)
.background(Color.huiColors.surface.pageTertiary)
}
}
}
}

#Preview {
HorizonUI.NavigationBar.Leading(logoURL: "https://cdn.prod.website-files.com/5f7685be6c8c113f558855d9/62c87dbd6208a1e98e89e707_Logo_Canvas_Red_Vertical%20copy.png")
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
//
// This file is part of Canvas.
// Copyright (C) 2024-present Instructure, Inc.
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as
// published by the Free Software Foundation, either version 3 of the
// License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
//

import SwiftUI

public extension HorizonUI.NavigationBar {
struct Trailing: View {
// MARK: - Dependencies

private let onNotebookDidTap: () -> Void
private let onNotificationDidTap: () -> Void
private let onMailDidTap: () -> Void

// MARK: - Init

public init(
onNotebookDidTap: @escaping () -> Void,
onNotificationDidTap: @escaping () -> Void,
onMailDidTap: @escaping () -> Void
) {
self.onNotebookDidTap = onNotebookDidTap
self.onNotificationDidTap = onNotificationDidTap
self.onMailDidTap = onMailDidTap
}

public var body: some View {
HStack(spacing: .zero) {
Button {
Ahmed-Naguib93 marked this conversation as resolved.
Show resolved Hide resolved
onNotebookDidTap()
} label: {
Image.huiIcons.menuBookNotebook
.dropShadow()
}

Button {
onNotificationDidTap()
} label: {
Image.huiIcons.notificationsUnread
.dropShadow()
}

Button {
onMailDidTap()
} label: {
Image.huiIcons.mail
.dropShadow()
}
}
}
}
}

#Preview {
HorizonUI.NavigationBar.Trailing(onNotebookDidTap: {}, onNotificationDidTap: {}, onMailDidTap: {})
}

fileprivate extension HorizonUI.NavigationBar.Trailing {
struct DropShadowModifire: ViewModifier {
func body(content: Content) -> some View {
content
.foregroundStyle(Color.huiColors.icon.default)
.frame(width: 44, height: 44)
.background {
Rectangle()
.fill(Color.huiColors.surface.pageSecondary)
.huiCornerRadius(level: .level6)
.huiElevation(level: .level4)
}
}
}
}

fileprivate extension View {
func dropShadow() -> some View {
modifier(HorizonUI.NavigationBar.Trailing.DropShadowModifire())
}
}

public extension HorizonUI {
struct NavigationBar {}
}
Original file line number Diff line number Diff line change
@@ -416,6 +416,7 @@ public extension HorizonUI {
let circle = Image(.circle)
let ai = Image(.ai)
let aiFilled = Image(.aiFilled)
let menuBookNotebook = Image(.menuBookNotebook)

func allImages() -> [Image] {
let mirror = Mirror(reflecting: self)
Original file line number Diff line number Diff line change
@@ -104,7 +104,9 @@ public struct Storybook: View {
NavigationLink {} label: {
Text("Cards").tint(Color.black)
}
NavigationLink {} label: {
NavigationLink {
HorizonUI.NavigationBar.Storybook()
} label: {
Text("Navigation").tint(Color.black)
}
}