Add segmented control style #6

DivineDominion · 2018-11-10T13:41:25Z

Closes #2

I struggled a while with different approaches until I threw out NSTabViewController out of the window and began managing the toolbar in a custom controller.

Now you can configure the style upon initialization and have it your way. Replicating the transition animation was a bit tricky because the user could click faster than the transition, ending in an invalid view state; I added a PausableWindow that swallows user events to prevent this from happening without disabling the toolbar controls.

Enhancements I'd prefer to tackle in separate issues/PRs:

make the segmented control configurable: isCentered/alignment, isSizedUniformly (all segments have the same with; that's the current state)
make the toolbar version configurable: isCentered/alignment, toolbarStyle (icon, label, icon and label)
hide window management of PreferencesWindowController: make PreferencesWindowController internal, expose PreferencesController as a plain Swift object with a simple API
make preferences controllers configurable after initialization (which also makes it possible again to use init(fromCoder:))

Changes to the PR:

Extract PausableWindow into its own file and add a comment about what exactly it does and its use-case/purpose
Use own identifiers: extension NSToolbarItem.Identifier
consider rename crossfadeTransitions to animate
rename preferencesWindowController.showWindow(withPreference: .advanced)
add preferencesWindowController.change(to: .preferenceAdvanced) (obsolete)
change style from tabs to segmented controls on the fly
left-align toolbar items
center window around segmented controls

DivineDominion · 2018-11-10T14:33:50Z

Something I'd like to have feedback on: using Auto Layout to pin the content views to the window size; because on the one hand, it makes window size management trivial, but on the other you end up with somewhat unexpected constraint animations when the window size change is animated.

DivineDominion · 2018-11-24T10:12:55Z

@sindresorhus Did you have a chance to take a look? You want me to adjust something?

sindresorhus · 2018-11-25T06:11:22Z

I really appreciate the PR. I’ve just been too busy in real life to look at it yet (wedding and family visits). I’ll hopefully have a chance to look at it the coming week :)

DivineDominion · 2018-12-10T18:53:47Z

The latest commit adds a representation for what we may call "overflow menu", which is how AppKit displays segmented controls in toolbars that outgrow the window.

Example with a few duplicates of the 1st example app's preference to make the control too big:

In addition, we should also prevent this from happening by keeping a minimum window size, I would say. But nevertheless, if users force the window size down, this is a better fallback than the previous behavior, i.e. displaying an empty menu.

DivineDominion · 2019-01-07T15:54:44Z

@sindresorhus Did you have a chance to assess the code so far? :)

DivineDominion · 2019-01-11T09:19:37Z

Today's changes make prefs work with Auto Layout properly.

disable translatesAutoResizingMAskIntoConstraints in the preferences views in IB
add sufficient constraints to define the preferences views' size
use NSView.fittingSize to compute the new window frame during animations, effectively fixing when you save IB files at a size that won't fit the runtime size
use built-in NSViewController.transition(from:to:options:completionHandler:) for animations
cache and remove constraints when embedding the child view controller, fixing jiggling in transitions

sindresorhus · 2019-01-16T13:54:27Z

This is looking really promising. I finally have a chance to look through the code now.

sindresorhus · 2019-01-16T13:56:25Z

One thing I noticed is that when using the segmented control style and I change a tab, it should animate from the segmented buttons, meaning, the segmented buttons should not move.

Example/AppDelegate.swift

Sources/Preferences/PreferencesWindowController.swift

sindresorhus · 2019-01-16T14:09:18Z

I think it could be useful to have a public method to change tabs while the preferences window is open.

Something like:

preferencesWindowController.change(to: .preferenceAdvanced)

sindresorhus · 2019-01-16T14:11:19Z

Example/AppDelegate.swift


 	func applicationWillFinishLaunching(_ notification: Notification) {
 		window.orderOut(self)
 	}

 	func applicationDidFinishLaunching(_ notification: Notification) {
-		preferencesWindowController.showWindow()
+		preferencesWindowController.showWindow(toolbarItemIdentifier: .preferenceAdvanced)


I think this would read better as:

preferencesWindowController.showWindow(withPreference: .advanced)

Or something similar.

Since showWindow would do the same as change(to:), what do you think about the latest change to showPreference? I hope it brings across that it opens the window if needed, too.

Yeah, that's good.

Example/AppDelegate.swift

Example/GeneralPreferenceViewController.swift

sindresorhus · 2019-03-15T10:06:45Z

@DivineDominion Hey, still interested in finishing this? You are so close :)

DivineDominion · 2019-03-22T15:24:29Z

I can have a look at this with one of my next app's iterations. I find it surprisingly hard to animate both the window frame and the content size smoothly, so growing the window symmetrically left and right to make the segmented controls stick could take more time than I can spare in the upcoming week or two.

I'll schedule time for this, though. Thanks for the review so far :) Good to know it's only minor things.

Smaller icons would work, but look odd, so I think we should leave them disabled completely for now

Cache all tab sizes first when the views are new and use these sizes. Segmented controls at the top seem to affect the window frame size.

Now that it's not implicitly assumed anymore that all preferenceables _are_ indeed view controllers, but could also be configuration objects, the name should reflect this change.

Using NSTabBarViewController makes switching between the controls hard: segmented controls are not supposed to be part of the toolbar.

DivineDominion · 2019-04-03T07:30:57Z

I actually didn't mean it had to be dynamically changeable. That doesn't really make sense outside the example app, so we don't really have to complicate the code for that. I was thinking just restarting the app when the button is pressed. Should be almost instantaneous anyway.

Gotcha. Changed it.

Also fixed the remaining issues. Centering the window is jiggling the segmented control around a bit, probably due to rounding errors. I tried floor and ceil in PreferencesTabViewController.setWindowFrame(for:animated:), but that didn't help either.

Sources/Preferences/ToolbarItemStyleViewController.swift

sindresorhus · 2019-04-03T09:18:03Z

From the HIG:

Restore the last viewed preference pane. If the user switches preference panes, your app should remember this change and show the same pane immediately the next time the user opens your preferences window.

We don't currently do that. I think we should do it when users call .show() without an argument, and mention in the docs that that should be the preferred way to show the preferences window, and refer to the HIG docs. This would be another benefit of having #14 and we could enforce it there.

DivineDominion · 2019-04-03T09:21:25Z

@sindresorhus Will happily add that, but again favor doing that in another PR to keep this focused on the segmented controls. Would that work with you?

sindresorhus · 2019-04-03T10:17:28Z

Yup, agreed. This PR is already very large. Moved it to a new issue: #16

sindresorhus · 2019-04-03T10:33:13Z

Can you update the readme to reflect the changes?

sindresorhus · 2019-04-03T10:39:44Z

Also fixed the remaining issues. Centering the window is jiggling the segmented control around a bit, probably due to rounding errors. I tried floor and ceil in PreferencesTabViewController.setWindowFrame(for:animated:), but that didn't help either.

I don't really know a solution to that either. If you cannot find a solution, I'm fine with just deferring it to later and move it to a new issue.

DivineDominion · 2019-04-03T11:28:53Z

I think I caught everything in the README. I also added screenshots of the two styles, but oddly the README preview on my branch doesn't work. I hope it's just due to it being a fork and relative paths not working correctly, but can you double-check this when you merge?

sindresorhus · 2019-04-03T12:15:18Z

Didn’t we decide on .show(preferencePane: .general)? The word “preferences” in .showPreferences feels moot as it’s already part of the controller name and the parameter. We also need to mention that we recommend .show() without an argument.

sindresorhus · 2019-04-03T12:15:35Z

Otherwise, the changes look great! 👌

DivineDominion · 2019-04-03T12:24:30Z

You're right, this totally went under my radar. I added a docstring for now; when #16 is implemented, the recommendation can be expanded and will make more sense IMHO

sindresorhus · 2019-04-03T14:00:54Z

This is absolutely amazing. I'm very happy about the end result. Thank you so much for working so hard on this, @DivineDominion. I really appreciate it. 🙌

Should we do a new release with what we have here now or do you intend to work on more things in the near future?

Also, would you be interested in joining the project as a maintainer? No commitment required. Just want to highlight your contribution in the readme.

readme.md

sindresorhus · 2019-04-03T14:36:46Z

I forgot to double-check the images before merge, but they are definitely corrupt. Would you mind submitting them again?

DivineDominion · 2019-04-03T15:12:43Z

I was transitioning all my macOS apps to this framework, so I have sufficient skin in the game to help you with this. If you can use a helping hand, I'd be happy to contribute!

I don't have a strong opinion about releases. In fact, I prefer more frequent releases over big releases that take a long time. Adding this is kind of a big thing, compared to the original code base, so why not! Then fix the open issues and localization problems.

sindresorhus · 2019-04-05T08:17:02Z

I was transitioning all my macOS apps to this framework, so I have sufficient skin in the game to help you with this. If you can use a helping hand, I'd be happy to contribute!

When you have done so, I would be happy to list your apps in the readme.

sindresorhus · 2019-04-05T08:17:21Z

I also replied to #6 (comment), in case it gets lost.

DivineDominion · 2019-04-05T11:56:30Z

Cool! Am currently using this for:

Am transitioning this one when we're done with the next release:

https://christiantietze.de/move-work-break/

sindresorhus · 2019-04-05T20:54:56Z

Cool! Am currently using this for:

Can you do a PR to add them to the readme? Maybe a new section above the FAQ section.

Fixes sindresorhus#6

Fixes #2

sindresorhus reviewed Jan 16, 2019

View reviewed changes

Example/AppDelegate.swift Outdated Show resolved Hide resolved

sindresorhus reviewed Jan 16, 2019

View reviewed changes

Sources/Preferences/PreferencesWindowController.swift Outdated Show resolved Hide resolved

sindresorhus changed the title ~~add Segmented Control~~ Add segmented control style Jan 16, 2019

sindresorhus reviewed Jan 16, 2019

View reviewed changes

Example/AppDelegate.swift Outdated Show resolved Hide resolved

sindresorhus reviewed Jan 16, 2019

View reviewed changes

Example/GeneralPreferenceViewController.swift Outdated Show resolved Hide resolved

sindresorhus mentioned this pull request Feb 13, 2019

Need a way to programmatically select tabs #8

Closed

DivineDominion added 12 commits April 1, 2019 11:19

make preference item icon optional

4e6b164

add PreferencesStyle enum

00386c2

change NSToolbarViewController style

ae725fc

do not use icons in segmented controls

d93446f

Smaller icons would work, but look odd, so I think we should leave them disabled completely for now

fix view controllers shrinking with every switch

a8152a4

Cache all tab sizes first when the views are new and use these sizes. Segmented controls at the top seem to affect the window frame size.

replace force-casting with Preferenceable.viewController property

0bfec58

rename viewControllers parameter to preferences

02d8acb

Now that it's not implicitly assumed anymore that all preferenceables _are_ indeed view controllers, but could also be configuration objects, the name should reflect this change.

use custom PreferencesTabViewController and toolbar

9037a33

Using NSTabBarViewController makes switching between the controls hard: segmented controls are not supposed to be part of the toolbar.

prevent transition to the same tab

2530d93

display window title for tabs toolbar

f52226a

add tabs toolbar variant

a8cb856

fix subview layout not fitting the window

c4d3873

keep toolbar items centered on screen if they are centered in toolbar

7d0faa7

sindresorhus reviewed Apr 3, 2019

View reviewed changes

Sources/Preferences/ToolbarItemStyleViewController.swift Show resolved Hide resolved

DivineDominion added 3 commits April 3, 2019 13:18

rename "preferences" properties and parameters to "preferencePanes"

b1504cd

properly pluralize showPreferences

801a22e

adjust README for new API changes

e15ca47

rename showPreferences to show(preferencePane:) and add docstring

08b75b3

sindresorhus approved these changes Apr 3, 2019

View reviewed changes

sindresorhus merged commit 3b62df8 into sindresorhus:master Apr 3, 2019

sindresorhus reviewed Apr 3, 2019

View reviewed changes

readme.md Show resolved Hide resolved

DivineDominion deleted the segmented-control branch April 3, 2019 15:35

dezinezync pushed a commit to dezinezync/Preferences that referenced this pull request Dec 17, 2022

Fix access level for init and other tweaks

e37e6d5

Fixes sindresorhus#6

dezinezync pushed a commit to dezinezync/Preferences that referenced this pull request Dec 17, 2022

Fix access level for init and other tweaks

3dffe71

Fixes sindresorhus#6

dezinezync pushed a commit to dezinezync/Preferences that referenced this pull request Dec 17, 2022

Add segmented control style (sindresorhus#6)

c6d3e07

Fixes #2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add segmented control style #6

Add segmented control style #6

DivineDominion commented Nov 10, 2018 •

edited

Loading

DivineDominion commented Nov 10, 2018

DivineDominion commented Nov 24, 2018

sindresorhus commented Nov 25, 2018

DivineDominion commented Dec 10, 2018 •

edited

Loading

DivineDominion commented Jan 7, 2019

DivineDominion commented Jan 11, 2019

sindresorhus commented Jan 16, 2019

sindresorhus commented Jan 16, 2019 •

edited

Loading

sindresorhus commented Jan 16, 2019

sindresorhus Jan 16, 2019

DivineDominion Apr 2, 2019

sindresorhus Apr 2, 2019

sindresorhus commented Mar 15, 2019

DivineDominion commented Mar 22, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 5, 2019

sindresorhus commented Apr 5, 2019

DivineDominion commented Apr 5, 2019 •

edited

Loading

sindresorhus commented Apr 5, 2019

Add segmented control style #6

Add segmented control style #6

Conversation

DivineDominion commented Nov 10, 2018 • edited Loading

DivineDominion commented Nov 10, 2018

DivineDominion commented Nov 24, 2018

sindresorhus commented Nov 25, 2018

DivineDominion commented Dec 10, 2018 • edited Loading

DivineDominion commented Jan 7, 2019

DivineDominion commented Jan 11, 2019

sindresorhus commented Jan 16, 2019

sindresorhus commented Jan 16, 2019 • edited Loading

sindresorhus commented Jan 16, 2019

sindresorhus Jan 16, 2019

Choose a reason for hiding this comment

DivineDominion Apr 2, 2019

Choose a reason for hiding this comment

sindresorhus Apr 2, 2019

Choose a reason for hiding this comment

sindresorhus commented Mar 15, 2019

DivineDominion commented Mar 22, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

sindresorhus commented Apr 3, 2019

DivineDominion commented Apr 3, 2019

sindresorhus commented Apr 5, 2019

sindresorhus commented Apr 5, 2019

DivineDominion commented Apr 5, 2019 • edited Loading

sindresorhus commented Apr 5, 2019

DivineDominion commented Nov 10, 2018 •

edited

Loading

DivineDominion commented Dec 10, 2018 •

edited

Loading

sindresorhus commented Jan 16, 2019 •

edited

Loading

DivineDominion commented Apr 5, 2019 •

edited

Loading