Skip to content

Commit

Permalink
- changed account css values to support system dark mode
Browse files Browse the repository at this point in the history 
- moved logo image from the intro screen into the general account view
- added navigation bar in account view (visible, if cancel button is visible)
- removed title "Account Setup" and app name in branded client
  • Loading branch information
@hosy
hosy committed Sep 26, 2023
1 parent a686d4c commit 09e63b9
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 57 deletions.
4 changes: 2 additions & 2 deletions ownCloud/App Controllers/AppRootViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,9 +121,9 @@ open class AppRootViewController: EmbeddingViewController, BrowserNavigationView
noBookmarkCondition = DataSourceCondition(.empty, with: OCBookmarkManager.shared.bookmarksDatasource, initial: true, action: { [weak self] condition in
if condition.fulfilled == true {
// No account available
var configuration = BookmarkComposerConfiguration.newBookmarkConfiguration
let configuration = BookmarkComposerConfiguration.newBookmarkConfiguration
configuration.hasIntro = true
self?.contentViewController = BookmarkSetupViewController(configuration: configuration, headerTitle: "Account setup".localized)
self?.contentViewController = BookmarkSetupViewController(configuration: configuration, headerTitle: nil)
// self?.contentViewController = InitialSetupViewController()
} else {
// Account already available
Expand Down
100 changes: 58 additions & 42 deletions ownCloud/Bookmarks/Setup/BookmarkSetupViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,54 +77,70 @@ class BookmarkSetupViewController: EmbeddingViewController, BookmarkComposerDele
logoImageView.contentMode = .scaleAspectFit
logoImageView.translatesAutoresizingMaskIntoConstraints = false

if let logoImage {
// Keep aspect ratio + scale logo to 90% of available height
logoImageView.widthAnchor.constraint(equalTo: logoImageView.heightAnchor, multiplier: (logoImage.size.width / logoImage.size.height) * 0.9).isActive = true
}

let logoTitle = ThemeCSSLabel(withSelectors: [.title])
logoTitle.translatesAutoresizingMaskIntoConstraints = false
logoTitle.font = .preferredFont(forTextStyle: .title2, with: .bold)
logoTitle.text = headerTitle ?? Branding.shared.appDisplayName

let logoContainerView = UIView()
logoContainerView.translatesAutoresizingMaskIntoConstraints = false
logoContainerView.cssSelector = .header
logoContainerView.addSubview(logoImageView)
logoContainerView.addSubview(logoTitle)

logoContainerView.embedHorizontally(views: [logoImageView, logoTitle], insets: NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) { _, _ in
return 10
}

contentView.addSubview(logoContainerView)

NSLayoutConstraint.activate([
logoContainerView.leadingAnchor.constraint(greaterThanOrEqualTo: contentView.safeAreaLayoutGuide.leadingAnchor),
logoContainerView.trailingAnchor.constraint(lessThanOrEqualTo: contentView.safeAreaLayoutGuide.trailingAnchor),
logoContainerView.centerXAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.centerXAnchor).with(priority: .defaultHigh),
logoContainerView.topAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.topAnchor, constant: 20),
logoContainerView.heightAnchor.constraint(equalToConstant: 40)
])

// Add cancel button
if cancelHandler != nil {
let cancelButton = ThemeCSSButton(withSelectors: [.cancel])
cancelButton.translatesAutoresizingMaskIntoConstraints = false
cancelButton.setTitle("Cancel".localized, for: .normal)
cancelButton.addAction(UIAction(handler: { [weak self] _ in
let navigationView = UINavigationBar()
navigationView.translatesAutoresizingMaskIntoConstraints = false

let cancelBarButton = UIBarButtonItem(systemItem: .cancel, primaryAction: UIAction(handler: { [weak self] action in
self?.cancel()
}), for: .primaryActionTriggered)

contentView.addSubview(cancelButton)

}))
let navigationItem = UINavigationItem(title: headerTitle ?? Branding.shared.appDisplayName)
navigationItem.rightBarButtonItem = cancelBarButton
navigationView.setItems([navigationItem], animated: false)

contentView.addSubview(navigationView)
contentView.addSubview(logoImageView)

NSLayoutConstraint.activate([
navigationView.topAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.topAnchor),
navigationView.leadingAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.leadingAnchor),
navigationView.trailingAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.trailingAnchor),

logoImageView.widthAnchor.constraint(equalToConstant: 128),
logoImageView.heightAnchor.constraint(equalToConstant: 128),
logoImageView.topAnchor.constraint(equalTo: navigationView.safeAreaLayoutGuide.bottomAnchor, constant: 20.0),
logoImageView.centerXAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.centerXAnchor)
])
} else {
var title = headerTitle
if !Branding.shared.isBranded, title == "" {
title = Branding.shared.appDisplayName
}

let logoTitle = ThemeCSSLabel(withSelectors: [.title])
logoTitle.translatesAutoresizingMaskIntoConstraints = false
logoTitle.font = .preferredFont(forTextStyle: .title3, with: .bold)
logoTitle.text = title
logoTitle.textAlignment = .center

let logoContainerView = UIView()
logoContainerView.translatesAutoresizingMaskIntoConstraints = false
logoContainerView.cssSelector = .header
logoContainerView.addSubview(logoTitle)
logoContainerView.addSubview(logoImageView)

logoContainerView.embedHorizontally(views: [logoTitle], insets: NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) { _, _ in
return 10
}

contentView.addSubview(logoContainerView)
logoContainerView.addSubview(logoImageView)

NSLayoutConstraint.activate([
cancelButton.leadingAnchor.constraint(greaterThanOrEqualTo: logoContainerView.trailingAnchor, constant: 20),
cancelButton.trailingAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.trailingAnchor, constant: -20),
cancelButton.centerYAnchor.constraint(equalTo: logoContainerView.centerYAnchor)
logoContainerView.leadingAnchor.constraint(greaterThanOrEqualTo: contentView.safeAreaLayoutGuide.leadingAnchor),
logoContainerView.trailingAnchor.constraint(lessThanOrEqualTo: contentView.safeAreaLayoutGuide.trailingAnchor),
logoContainerView.centerXAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.centerXAnchor).with(priority: .defaultHigh),
logoContainerView.topAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.topAnchor, constant: 20),
logoContainerView.heightAnchor.constraint(equalToConstant: 40),

logoImageView.widthAnchor.constraint(equalToConstant: 128),
logoImageView.heightAnchor.constraint(equalToConstant: 128),
logoImageView.topAnchor.constraint(equalTo: logoTitle.safeAreaLayoutGuide.bottomAnchor, constant: 20.0),
logoImageView.centerXAnchor.constraint(equalTo: contentView.safeAreaLayoutGuide.centerXAnchor)
])
}

// Add help message
if configuration.helpButtonURL != nil || configuration.helpMessage != nil {
var helpElements: [ComposedMessageElement] = [
Expand Down
9 changes: 0 additions & 9 deletions ownCloud/Bookmarks/Setup/Steps/BookmarkSetupStepIntroViewController.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,22 +27,13 @@ class BookmarkSetupStepIntroViewController: BookmarkSetupStepViewController {
override func loadView() {
super.loadView()

var logoImage = AccountSettingsProvider.shared.logo

continueButtonLabelText = "Start setup".localized

if hasSettings {
backButtonLabelText = "Settings".localized
}

if let tintImageColor = Theme.shared.activeCollection.css.getThemeCSSColor(.fill, selectors: [.accountSetup, .welcome, .icon]) {
if let tintedLogoImage = logoImage.tinted(with: tintImageColor) {
logoImage = tintedLogoImage
}
}

let messageView = ComposedMessageView(elements: [
.image(logoImage, size: CGSize(width: 128, height: 128), adaptSizeToRatio: true, cssSelectors: [.icon], insets: .zero),
.title(String(format: "Welcome to %@".localized, VendorServices.shared.appName), alignment: .centered, cssSelectors: [.title], insets: NSDirectionalEdgeInsets(top: 10, leading: 0, bottom: 10, trailing: 0)),
.subtitle("The following steps will guide you through the setup process.".localized, alignment: .centered, cssSelectors: [.message])
])
Expand Down
9 changes: 5 additions & 4 deletions ownCloudAppShared/User Interface/Theme/ThemeCollection.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -690,16 +690,17 @@ public class ThemeCollection : NSObject {
ThemeCSSRecord(selectors: [.accountSetup, .message, .title], property: .stroke, value: UIColor.white),
ThemeCSSRecord(selectors: [.accountSetup, .header, .title], property: .stroke, value: UIColor.white),
ThemeCSSRecord(selectors: [.accountSetup, .welcome, .icon], property: .fill, value: darkBrandColor),
ThemeCSSRecord(selectors: [.accountSetup, .step, .title], property: .stroke, value: UIColor.black),
ThemeCSSRecord(selectors: [.accountSetup, .step, .message], property: .stroke, value: UIColor.lightGray),
ThemeCSSRecord(selectors: [.accountSetup, .step, .background], property: .fill, value: UIColor.white),
ThemeCSSRecord(selectors: [.accountSetup, .step, .title], property: .stroke, value: UIColor.label),
ThemeCSSRecord(selectors: [.accountSetup, .step, .message], property: .stroke, value: UIColor.secondaryLabel),
ThemeCSSRecord(selectors: [.accountSetup, .step, .background], property: .fill, value: UIColor.systemBackground),
ThemeCSSRecord(selectors: [.accountSetup, .step, .button], property: .stroke, value: UIColor.white),
ThemeCSSRecord(selectors: [.accountSetup, .step, .button], property: .fill, value: darkBrandColor),
ThemeCSSRecord(selectors: [.accountSetup, .help, .subtitle], property: .stroke, value: UIColor.lightGray),
ThemeCSSRecord(selectors: [.accountSetup, .help, .button], property: .stroke, value: lightBrandColor),
ThemeCSSRecord(selectors: [.accountSetup, .help, .button], property: .fill, value: UIColor.clear),
ThemeCSSRecord(selectors: [.accountSetup], property: .statusBarStyle, value: UIStatusBarStyle.lightContent),

ThemeCSSRecord(selectors: [.modal, .accountSetup], property: .fill, value: darkBrandColor),

// Side Bar
// - Interface Style
ThemeCSSRecord(selectors: [.sidebar], property: .style, value: UIUserInterfaceStyle.light),
Expand Down

0 comments on commit 09e63b9

Please sign in to comment.