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

Allow user to turn off blur effect by using nil. #321

Open
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

yccheok
Copy link
Contributor

@yccheok yccheok commented Jun 29, 2021

Hi,

Thank you for creating SDCAlertView. The code is very clean, and enjoyable to read.

I would like to propose the following change.

In certain case, when we are applying custom view on action sheet, we wish the background color of action sheet, have the same solid color as custom view.

But, current non nil blur effect, doesn't allow us to have a solid color action sheet.

May I propose to allow user to set nil on AlertVisualStyle's blurEffect, to provide user a choice to setup solid background color?

Thanks.

Allow user to turn off blur effect by using nil.
Revert to master copy.
Revert to master copy.
@sberrevoets
Copy link
Owner

Can you add an example of what this would look like and what code you'd use to instantiate the alert?

@yccheok
Copy link
Contributor Author

yccheok commented Jul 9, 2021

Hi @sberrevoets ,

Sorry for late response as these few days I have been busy dealing with CoreData related issue.

Let me show you a real-world use case, on how it looks like before & after the changes.

Before

before

`

private func show(_ kind: ColorPickerActionSheet.Kind, _ selectedColor: Int?, _ colorPickerDelegate: ColorPickerDelegate) {
    dismiss()

    self.colorPickerDelegate = colorPickerDelegate

    //
    // Initialize member variables
    //
    self.kind = kind
    self.selectedColor = selectedColor
    self.recentColors = WeNoteOptions.INSTANCE.getMostRecentSelectedColorLists(kind)

    if kind == ColorPickerActionSheet.Kind.note {
        self.presetColors = PlainNote.colors
    } else {
        precondition(kind == ColorPickerActionSheet.Kind.tab)
        self.presetColors = TabInfo.colors
    }

    let alertAlertController = AlertController(title: nil, message: nil, preferredStyle: .actionSheet)
    self.alertAlertController = alertAlertController

    let alertVisualStyle = AlertVisualStyle(alertStyle: .actionSheet)
    alertVisualStyle.backgroundColor = .systemBackground
    alertAlertController.visualStyle = alertVisualStyle

    let contentView = alertAlertController.contentView
    self.translatesAutoresizingMaskIntoConstraints = false
    contentView.addSubview(self)
    NSLayoutConstraint.activate([
        self.topAnchor.constraint(equalTo: contentView.topAnchor),
        self.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        self.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        self.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
    ])

    let colorPickerViewController = ColorPickerViewController(transitionStyle: .scroll, navigationOrientation: .horizontal)
    self.colorPickerViewController = colorPickerViewController
    colorPickerViewController.colorPickerDelegate = self
    colorPickerViewController.postInit(
        kind: kind,
        presetColors: presetColors,
        recentColors: recentColors,
        selectedColor: selectedColor
    )
    alertAlertController.addChild(colorPickerViewController)
    self.contentContainer.clipsToBounds = true
    self.contentContainer.addSubview(colorPickerViewController.view)
    colorPickerViewController.view.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        colorPickerViewController.view.leadingAnchor.constraint(equalTo: contentContainer.safeAreaLayoutGuide.leadingAnchor),
        colorPickerViewController.view.trailingAnchor.constraint(equalTo: contentContainer.safeAreaLayoutGuide.trailingAnchor),
        colorPickerViewController.view.topAnchor.constraint(equalTo: contentContainer.safeAreaLayoutGuide.topAnchor),
        colorPickerViewController.view.bottomAnchor.constraint(equalTo: contentContainer.safeAreaLayoutGuide.bottomAnchor)
    ])
    colorPickerViewController.didMove(toParent: alertAlertController)

    alertAlertController.addAction(AlertAction(
        title: "action_cancel".localized,
        style: .preferred
    ))

    alertAlertController.present()

    // We will only have valid contentView.frame after present()
    let height = getHeight(colorPickerViewController.pageIndex, contentView)
    let heightConstraint = contentView.heightAnchor.constraint(equalToConstant: height)
    self.heightConstraint = heightConstraint
    heightConstraint.isActive = true

    updateButtons(colorPickerViewController.pageIndex)
}

`

As you can see in the before case, there are 2 shortcomings

  1. The background of alert sheet is not tally with background of custom view, even though both are using same system background. The solution is to able to cancel the blur effect of content view only. Currently, content view and cancel button are sharing the same blur effect.
  2. During dark mode, I would like the cancel button not to have blur effect too.

(I didn't submit the cancel button blur effect disable feature. I can submit again if you agree with such change)

After

after

after2

`

private func show(_ kind: ColorPickerActionSheet.Kind, _ selectedColor: Int?, _ colorPickerDelegate: ColorPickerDelegate) {
    ...

    let alertAlertController = AlertController(title: nil, message: nil, preferredStyle: .actionSheet)
    self.alertAlertController = alertAlertController

    let alertVisualStyle = AlertVisualStyle(alertStyle: .actionSheet)
    alertVisualStyle.blurEffect = nil
    if UIUtils.isDarkTheme() {
        alertVisualStyle.cancelActionViewBlurEffect = nil
    }
    alertVisualStyle.backgroundColor = .systemBackground
    alertAlertController.visualStyle = alertVisualStyle

    ...
}

`

Please let me know what do you think? If you agree with such feature, I can resubmit the patch, which include the code to separate content view blur effect and cancel button blur effect.

Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants