i4designer Knowledgebase

The contextual actions area

Abstract

The i4designer contextual actions area allows the user with possibility to switch between a set of contextually relevant operations each serving to different purposes.

The so called contextual actions area, is the toolbar next to the global actions area. This view is dedicated for the actual design actions and consists of the following options:

The Toolbox menu

The second left-side panel called the Toolbox displays all the Components available for the currently active platform. The controls are stored in categories that can be:

  • expanded

    Expand.jpg

    The expand option

  • collapsed

    colapse_option.jpg

    The collapse option

  • accessed through the group components list

    comp_list.jpg

    The Group components list

The Toolbox provides the user with possibility to switch between several view modes:

  • collapsed mode can be set by clicking the Collapse all option, located at the top of the items list view.

    Collapse_all.jpg

    The Collapse all option

  • expanded mode can be set by clicking the Expand all option, located at the top of the items list view.

    Expand_all.jpg

    The Expand all option

  • thumbs mode can be set by clicking the Show thumbs option.

    thumbs_mode.jpg

    The thumbs mode

  • list mode can be set by clicking the Show list option.

    List_mode.jpg

    The list mode

The Toolbox panel also features a simple filtering mechanism allowing the user to easily pin-point controls. By typing the name or a part of the control name, the list is filtered to display the matching controls.

serach_field.jpg

The search field

The Properties menu

By clicking the Properties menu on the second left-side toolbar the Properties panel is opened. The contents of the Properties panel is adjusted in relation with the selection met in the design area.

Properties_menu.jpg

The Properties menu

Filtering and sorting properties

The Properties panel provides the user with possibility filter the properties list by typing in the designated search field a part or the entire name of the property. Without taking any further action, the list will be filtered to display only the matching results.

Filtering_PRs.jpg

Filtering the list of properties

When the Components Properties panel is displayed, the user can Collapse all or Expand all the listed properties.

Collapse_all_properties.jpg

Collapse all properties

Expand_all_properties.jpg

Expand all properties

Page properties panel

By default, when opening the Properties panel, the Page configuration properties panel is displayed. Also, by clicking anywhere in the design area, where no control is available the Page configuration panel is displayed.

Project_Properties_panel.jpg

The Page Configuration Properties panel

In this view, the user can adjust the current Project page by changing it's configuration:

  • Background image - allows the user to set a background image. By clicking on the Upload image button the view is extended. In this view the user can either drag and drop an image or manually upload it.

    backgroundImage.jpg

    The Background Image component

    The Content folder lists all existing images that the user uploaded so far, for the currently opened project. If the project is new and no images have been loaded so far, the content folder will be empty.

  • Column number - Sets the number of grid columns when the Page mode property is set to "grid page" option.

    Column_number.jpg

    The Column number component

    Based on the selected number of columns, the project components will be displayed as grid columns. The components ordering in each column is injected by means of the default CSS class. Hence, when dragging a new component to a page split up in multiple columns, will be methodically distributed to fill the space of the column.

    Page_columns.jpg

    Components displayed as columns

  • Page height -sets the page height of the drawing surface, measured in pixels.

    Page_Height.jpg

    The Page height property

  • Page width - sets the page width of the drawing surface, measured in pixels.

    Page_width.jpg

    The Page width property

  • Page mode - sets the page display mode, allowing the user to chose from the following modes:

    Page_mode.jpg

    The Page mode property

    • drawing page - the page is displayed as a simple drawing surface, where each component occupies its space.

    • grid page - allows the user to split the page in multiple columns. The display mode works in combination with the Column number property.

    • stretched page - the page is displayed a stretched out drawing surface, suitable for widescreen monitors.

  • Background color - allows the user to set a different background color. By default the color is set to white, but by clicking the Color picker button the view is extended allowing the user to select another color. The RGBA color picker allows the user to easily select the desired page color.

    Tip

    An RGBA color value is specified with: rgba values (red, green, blue, alpha).

    The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

    Background_color.jpg

    The Background color property

  • Name - allows the user to change the name of the current Project page.

    Name.jpg

    The Name property

  • Background Repeat - allows the user to set if and how a background image will be repeated, selecting from a set of predefined options:

    ackground_repeat.jpg

    The Background repeat property

    • no-repeat - By default, the background-image is not repeated. The image will only be shown once

    • repeat - The background image is repeated both vertically and horizontally.  The last image will be clipped if it does not fit.

    • repeat-x - The background image is repeated only horizontally

    • repeat-y - The background image is repeated only vertically

    • round - The background-image is repeated and squished or stretched to fill the space (no gaps)

    • space - The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images

    • unset - Resets a the background-image to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

    • inherit - Inherits this property from its parent element.

    • initial - Sets this property to its default value.

  • Background size - allows the user to change the size of the element's background image, selecting from a set of predefined options:

    Background_size.jpg

    The Background size property

    • auto - Retains its original size.

    • contain - Scales the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.

    • cover - Scales the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

    • inherit - Inherits the value of the background size specified on its parent element.

    • initial - Sets this property to its default value.

    • unset - Resets a property to its inherited value if it inherits from its parent, and to its initial value if not. In other words, it behaves like the inherit keyword in the first case, and like the initial keyword in the second case.

Components properties panel

Further on, the Properties panel also serves as Components configuration panel. The Components Configuration Properties panel is displayed as soon as a Component available on the drawing surface is selected.

Property_config_panel.jpg

Example of a Component configuration panel

The Components Properties can be split up in multiple categories that the user can collapse or expand, using the respective options.

collapse_individually.jpg

Collapse category

Expand_category.jpg

Expand category

By default, Components Properties sorted by categories, but the user can chose to show them as flat properties by clicking the toolbar button Show properties as flat list. The list will be then sorted and properties will be displayed in alphabetical order.

Properties_displayed_as_flat.jpg

Show properties as flat list

To return to the categories view list the user can click the Show properties by categories button.

Show_PRs_by_categories.jpg

Show properties by categories

Note

Each component has it's own set of properties that we shall discuss separately, in the upcoming articles.

Pin properties function

Both Page Properties and Components Properties can be grouped as favourites by using the Pin property function.

Pin_prperty.jpg

The Pin property button

As soon as at least one property as been pinned, a new category will be added to the Properties panel, listing the pinned properties.

Pinned_properties.jpg

Pinned properties category

Note

A pinned property cannot be pinned again.

To remove a property from the pinned properties list, the user can click the Unpin property button.

Unpon_property.jpg

The Unpin property button

The Page explorer menu

By clicking the Page explorer menu a list of all the current project page components is displayed.

Page_explorer.jpg

The Page Explorer menu

Besides the general overview upon the page project components, the Page explorer feature can be used to easily pinpoint a component, by clicking it in the list view.

Note

If the current project has multiple pages, the Page explorer can be opened for each page, separately.

Page_explorer_different_page.jpg

Example: The Page explorer of "Page 3"

The list of components under the Page explorer menu does not display the components of all project pages.

The Page explorer also features a simple filtering mechanism, allowing the user to search for a specific components of the project page. By typing in the name or part of the component name in the designated search field, the list is filtered to display only the relevant results.

Search_example.jpg

Filtering the Page explorer list of components

Each component listed in the Page explorer panel, features a set of action buttons allowing the user to manage the page components.

Actions_area.jpg

Page components actions

The Visible component icon Set_as_visible.jpg is by default active for all components. By clicking it, the user can decide to hide that particular component, from the page view, marking it as Hidden component Hidden_comp.jpg.

Further on, the Lock component Lock_comp.jpg option allows the user to lock a component. Once a component has been locked, the icon changes its appearance, restricting the user to change the component position and deactivates the duplicate. To unlock a component the user can click the Unlock component icon Unlock.jpg.

The Duplicate component Clone.jpg option can be useful when the user desires to add more components with the same set of parameters to the project page.

Redundant components can be deleted from the project page, by clicking the Remove component icon Remove.jpg.