SDCAlertView icon indicating copy to clipboard operation
SDCAlertView copied to clipboard

Allow user to turn off blur effect by using nil.

Open yccheok opened this issue 3 years ago • 2 comments

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.

yccheok avatar Jun 29 '21 17:06 yccheok

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

sberrevoets avatar Jul 06 '21 22:07 sberrevoets

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.

yccheok avatar Jul 09 '21 14:07 yccheok