Material: Toolbar right items are not shown

[leobouilloux]

Hi!

I have a problem using your toolbar component.
It occurred since I've update your framework to version 1.41.8 (the last update atm).
For the moment, I went back to 1.41.6 and my right control is displayed correctly.

Maybe I'm not using it correctly.
Just in case, here is my code:

    private func prepareToolbar() {
        toolbar = Toolbar()
        shareView.addSubview(toolbar)

        // Title label.
        toolbar.titleLabel.text = "Share \(node.loadName()!)"
        toolbar.titleLabel.textColor = MaterialColor.white

        var image: UIImage? = MaterialIcon.cm.share

        // Menu button.
        let mailButton: IconButton = IconButton()
        mailButton.pulseColor = MaterialColor.white
        mailButton.tintColor = MaterialColor.white
        mailButton.setImage(image, forState: .Normal)
        mailButton.setImage(image, forState: .Highlighted)

        // Search button.
        image = MaterialIcon.cm.close
        let closeButton: IconButton = IconButton()
        closeButton.pulseColor = MaterialColor.white
        closeButton.tintColor = MaterialColor.white
        closeButton.setImage(image, forState: .Normal)
        closeButton.setImage(image, forState: .Highlighted)
        closeButton.addTarget(self, action: #selector(ShareViewControllerMaterial.closeButtonPressed), forControlEvents: .TouchUpInside)

        toolbar.backgroundColor = MaterialColor.blue.base
        toolbar.leftControls = [mailButton]
        toolbar.rightControls = [closeButton]
    }

[danieldahan]

Hi :)

What is shareView?

[leobouilloux]

Here it is:

    private func prepareShareView() {
        shareView = MaterialView()
        shareView.backgroundColor = MaterialColor.white
        shareView.depth = MaterialDepth.Depth5
        shareView.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(shareView)

        let top: CGFloat = 20 + 44 + 76
        MaterialLayout.alignToParent(view, child: shareView, top: top, left: 0, bottom: 0, right: 0, options: .AlignAllBaseline)
    }

view is the default UIViewController view

[chashmeetsingh]

the problem is I suppose you should add subview at the end ?

[danieldahan]

If he doesn't add SubView prior to using MaterialLayout, it will crash, because the view is not added to the hierarchy when trying to calculate the layouts.

[mohpor]

@leobouilloux Hi :)
could you elaborate more on the issue you're having?

[chashmeetsingh]

@danieldahan I meant in prepareToolbar()

[danieldahan]

@chashmeetsingh good point.

[leobouilloux]

BTW I noticed that a problem occurs with the example in the sample solution:
Sample project Toolbar code:

    private func prepareToolbar() {
        toolbar = Toolbar()
        containerView.addSubview(toolbar)

        // Title label.
        toolbar.title = "Material"
        toolbar.titleLabel.textColor = MaterialColor.white

        // Detail label.
        toolbar.detail = "Build Beautiful Software"
        toolbar.detailLabel.textColor = MaterialColor.white

        var image: UIImage? = MaterialIcon.cm.menu

        // Menu button.
        let menuButton: IconButton = IconButton()
        menuButton.pulseColor = MaterialColor.white
        menuButton.tintColor = MaterialColor.white
        menuButton.setImage(image, forState: .Normal)
        menuButton.setImage(image, forState: .Highlighted)

        // Switch control.
        let switchControl: MaterialSwitch = MaterialSwitch(state: .Off, style: .LightContent, size: .Small)

        // Search button.
        image = MaterialIcon.cm.search
        let searchButton: IconButton = IconButton()
        searchButton.pulseColor = MaterialColor.white
        searchButton.tintColor = MaterialColor.white
        searchButton.setImage(image, forState: .Normal)
        searchButton.setImage(image, forState: .Highlighted)

        /*
        To lighten the status bar - add the
        "View controller-based status bar appearance = NO"
        to your info.plist file and set the following property.
        */
        toolbar.backgroundColor = MaterialColor.blue.base
        toolbar.leftControls = [menuButton]
        toolbar.rightControls = [switchControl, searchButton]
    }

@mohpor Hi :)
My problem is that the close button is not displayed on my toolbar on the right (see screenshot below)

Hope it helps and thank you so much for your help.

[danieldahan]

I s this with the latest changes? 1.41.8

[leobouilloux]

The "close" button was no longer displayed when I updated to 1.41.8.
The last screenshot is version 1.41.6

[chashmeetsingh]

@danieldahan he's right the example toolbar right alignment is not getting applied (checked in the example) (Programmatic) storyboard works fine

[danieldahan]

There is a verified regression here. It shall be fixed. Thank you!

[chashmeetsingh]

same with dev branch (view.layout) update causing an error

[danieldahan]

@chashmeetsingh that's because the call is incomplete. It needed to be updated.

[chashmeetsingh]

ok! thanks :)

[mohpor]

This is easily solvable by setting a Frame for your toolbar.

for example:
toolbar = Toolbar(frame: CGRect(x: 0, y: 0, width: shareView.bounds.width, height: 32.0))

[danieldahan]

Yes, but there is a regression here and it should be fixed.

also @chashmeetsingh this is the updated line

view.layout.align.edges(containerView, top: 100, left: 20, right: 20)

[chashmeetsingh]

thanks for the info @danieldahan 👍

[leobouilloux]

Thank you very much for your help, I'll use your suggestions 👍

[danieldahan]

This has been solved and will be fixed in the next release. I will leave the issue up until that release. Once again, thanks for bringing it to our attention.

[danieldahan]

Hi, sorry for the delay, please try 1.42.0 for a fix. If the issue persists, please reopen or create a new issue. Thank you!