Style Bar – Antetype 1.3

Two new editing bars have been added to the main window in Antetype 1.3, both are designed to provide at-a-glance information about the currently selected element and enable quicker editing.

This post explores the functions available from the Style bar and some hidden features that will improve your workflow.

At-a-glance styling information

The style bar has been designed so that designers can quickly see information about the most commonly used styling properties.

Style Bar - Antetype 1.3

In the above image we can see the following information:

  • quickbar-visible The cell is visible by default
  • Style bar - Size The width is controlled manually (SizeManual-gray) at 100px and the height is also manually controlled at 30px
  • Style Bar - Fill The fill of the element is a gradient that goes from red to a light grey
  • Style bar - Border The border is dotted and 1 px thick, there are multiple colors used in the border
  • Screenshot_2013-12-05_09.04.39 11 The element uses a vertical layout ( LayoutVerticalFlow-gray ) and all child elements will be laid out from the centre (quickbar-alignment-middle)
  • Style Bar - Rounded Corners The two top corners are rounded with a value of 5
  • Screenshot_2013-12-05_09.04.39 5 The left and right margins are 3 and there are no margins on the top and bottom
  • Screenshot_2013-12-05_09.04.39 All 4 sides internally use a padding of 4 for any child elements
  • Screenshot_2013-12-05_09.04.39 6 There is a drop shadow applied to the element
  • Screenshot_2013-12-05_09.04.39 7 There is no inner shadow used by the element
  • Screenshot_2013-12-05_09.04.39 8 The element is not floating
  • Screenshot_2013-12-05_09.04.39 9 The element can be nested

Please note that not all properties are available for all elements, e.g. you can’t alter the visibility of a screen.

Single update / revert indicators for widgets

At the end of the style bar there are two controls that only appear when the properties of an instance of a widget do not match the definition of the widget.

  • quickbar-update Using the update control the properties of the currently selected widget will overwrite the widget definition and all other instances of the widget will also get those properties
  • quickbar-revert Using the revert control the properties of the instance will revert back to the values from the widget definition.

For more detail about which properties have changed – please consult the widget inspector.

Change widget state

When a widget is selected the first control in the style bar is a control that shows the currently selected state of a widget.

Screenshot 2013-12-10 12.34.57

Untitled__New_Blank_copy_

In this case the selected state is Normal – this control can be used to change the state of a widget from one state to another. You can also choose to Select All States, to make a more complex selection of states or to add and remove states from a widget chooser Manage States to show the Style Inspector where you can make changes to the states.

Focused Popup Editors

A few controls in the style bar can be interacted with directly in the style bar, e.g. state and nest. Most of the controls will open a Style Editor when they are clicked e.g. Visibility, Size etc.

The Style Editors are designed to be focused on single task and a separate blog post will cover Style Editors in more detail.

Copy / Paste Styles

All controls in the style bar come with a hidden feature that allow the designer to copy or paste all the styling properties for that control between elements.

If you ctrl-click on any of the controls in the style bar that open a Style Editing popup you will see a context menu that enables you to copy or paste the style relevant to that particular part of the style bar.

Pasting can also be achieved with the keyboard shortcut ⌥⌘V.

Further Reading

Read more about Antetype 1.3.

Read about the new Style Editors used by the Style bar in Antetype 1.3.

Read about the new navigation and selection possibilities with the Status bar in Antetype 1.3.

This post is part of a series of posts about Antetype 1.3.

2 Responses to Style Bar – Antetype 1.3

Leave a Reply