Custom window dimension shortcuts

Ryan Hanson
Dec 12, 2020 · 3 min read
Image for post
Image for post

One of the most common requests I have received for Rectangle is the addition of shortcuts for more window dimensions that are not currently in the app. The preferences window for Rectangle is already pretty packed with shortcuts, and in my opinion, there is a limit to how many shortcuts are desirable in its current UI.

In Hookshot, I went with a table view so that it isn’t quite so overwhelming to have more shortcuts. This frees Hookshot from a UI restriction on the quantity of shortcuts, but it removes an element of simplicity and immediate accessibility. It also breaks from a convention set by other window managers.

I spent a while thinking about a UI that could handle any window dimension that a user wants, and also allow the user to configure the subsequent dimensions when the shortcut is repeatedly pressed. Initially, I built this UI for Rectangle so that I could alleviate all of the window dimension requests I received at once. After building it, I felt like it just didn’t fit in Rectangle. The simplicity of Rectangle is, in my opinion, one of its best features.

While the main feature of Hookshot is also quite simple, there’s more depth to the app so this custom window dimension UI doesn’t feel out of place here. Let’s see how this custom dimension UI works.

Image for post
Image for post
  1. Go to the wrench & ruler tab in the Hookshot preferences window.
  2. Press the + button to add a new shortcut.
  3. A new shortcut item is added in the table, and a popover is displayed for configuration. Here you can record your keyboard shortcut, select a docking position, and set window dimensions for the shortcut.
Image for post
Image for post

The docking position selection should be pretty straightforward — top, bottom, corners, sides, center, etc. There’s also a “Custom” selection that lets you specify where the bottom left corner of the window should go.

The fields for entering width and height, or x/y coordinates of the window can take the following inputs:

Fractions, decimal numbers, whole numbers, or blank

  • Inputs that are less than or equal to 1 will correspond to a percentage of the screen.
  • Inputs that are greater than 1 will correspond to pixel sizes.
  • Inputs that are left blank will correspond to keeping the current dimension.
Image for post
Image for post
This shortcut will make the window leave a 10% screen width gap on the left and have a width of 50% the screen.

Last, let’s add window dimensions for repeated executions of the same shortcut. To do this, we simply hover the cursor over the configuration we want to add the next repetition, and click the + to bring up the same configuration popover.

Image for post
Image for post

The repeated executions will loop through each configuration in the order that they appear. Here’s an example of a vertical sixths configuration that will move the window 1/6 width and full height of the screen on each repeated shortcut press:

Image for post
Image for post

That’s it! Configuring custom window dimension shortcuts still takes a little bit of time and know-how, but to me it’s a pretty good tradeoff between configuration time and power over your windows. Give Hookshot a try!

Ryan Hanson

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store