Container Presentation Settings in QPR UI - Revision history

TeeHiet: 307316

2018-06-20T06:38:51Z

307316

TeeHiet: 307316

2018-06-20T06:37:36Z

307316

TeeHiet at 10:24, 21 February 2018

2018-02-21T10:24:10Z

Ollvihe at 22:25, 25 January 2018

2018-01-25T22:25:41Z

Ollvihe at 22:20, 25 January 2018

2018-01-25T22:20:53Z

Ollvihe at 22:14, 25 January 2018

2018-01-25T22:14:01Z

Ollvihe: Created page with "Panel's Presentation tab contains following settings: * '''Hide panel header''': Used to set panel header (caption) visible or hidden. If panel header is visible, also the pan..."

2018-01-25T22:13:29Z

Created page with "Panel's Presentation tab contains following settings: * '''Hide panel header''': Used to set panel header (caption) visible or hidden. If panel header is visible, also the pan..."

New page

Panel's Presentation tab contains following settings:
* '''Hide panel header''': Used to set panel header (caption) visible or hidden. If panel header is visible, also the panel name is not visible. Panel's buttons (edit, delete, fullscreen) are visible in both cases, but if panel header is hidden, buttons are located over the panel's content area. Panel header can be set hidden, if it's not needed, because it allows more space for the panel contents.
* '''Hide fullscreen mode icon''': Used to set panel full screen mode icon visible or hidden. The fullscreen icon can be set hidden, if the fullscreen functionality is not needed for the panel.
* '''Aspect ratio flex''': Decimal number determining how much panel content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the panel itself in a view (it's determined in the view designer), but only its contents.
** Panel has a '''design aspect ratio''' which is determined by how presentation objects are arranged in the panel designer. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
** Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', panel's aspect ratio is allowed to change between '''A/B''' and '''A*B'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, panel's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
** Panel contents always takes all available space horizontally. If the aspect ratio's lower limit is reached (i.e. panel contents is not allowed use all available space vertically), there may be empty space in the bottom of the panel. If the aspect ratio's higher limit is reached (i.e. panel contents doesn't fit vertically), the panel has a vertical scrollbar.
** The aspect ratio flex is useful e.g. for presentation objects which don't work properly if the aspect ratio stretches to too extreme.
* '''Inner margin''': Horizontal and vertical space between the presentation objects in the panel. Defined in pixels.
* '''Outer margin''': Space between the presentation object(s) and the panel border. Defined in pixels.
* '''Background color''': Background color of the panel content area. The background color doesn't affect the panel header's background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel. It's possible to set transparent background by defining "transparent" in the color selector input box.
* '''Border color''': Panel border color. Border color also affects the one pixel horizontal line between panel content area and header. It's possible to set transparent background by defining "transparent" in the color selector input box.
* '''Border width''': Border width of the panel. Border width can be set to zero to remove panel border. Border width doesn't affect the one pixel horizontal line between panel content area and header.
* '''Border corner radius''': The amount of rounding of the panel corners. Zero means that panel has sharp rectangular corners.
* '''SVG background''': The SVG image to use as the panel background. The SVG image will be rendered on top of the defined panel Background color. The SVG image is defined in the same way as with [[SVG_Properties|SVG Presentation Objects]], except that the SVG image used as the panel background cannot contain actions.

The View's Presentation tab contains following settings:
* '''Aspect ratio flex''': Decimal number determining how much the view content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the view itself, but only its contents, i.e. panels.
** The view has a '''design aspect ratio''' which is determined by how panels are arranged in the view designer. Note that the whole available design area doesn't matter - only the actual panels determine the shown area and the design aspect ratio.
** Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', the view's aspect ratio is allowed to change between '''A/B''' and '''A*B'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, the view's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 2*4=8).
** View contents always take all available space horizontally. If the aspect ratio's lower limit is reached (i.e. view contents are not allowed use all available space vertically), there may be empty space in the bottom of the view. If the aspect ratio's higher limit is reached (i.e. view contents don't fit vertically), the view has a vertical scrollbar.
** The aspect ratio flex is useful e.g. for views which don't work properly if the aspect ratio stretches to too extreme.
* '''Inner margin''': Horizontal and vertical space between the panels in the view. Defined in pixels.
* '''Outer margin''': Space between the panels and the view outer border. Defined in pixels.
* '''Background color''': Background color of the view. Panels inside the view may have other background colors than the view. It's possible to set transparent background by defining "transparent" in the color selector input box.
* '''SVG background''': The SVG image to use as the view background. The SVG image will be rendered on top of the defined view Background color. The SVG image is defined in the same way as with [[SVG_Properties|SVG Presentation Objects]], except that the SVG image used as the view background cannot contain actions.

@@ Line 7: / Line 7: @@
 * '''Inner margin''': For views, horizontal/vertical space between the panels in the view. For panels, horizontal/vertical space between the presentation objects in the panel. Defined in pixels.
 * '''Outer margin''': For views, space between the panels and the view outer border. For panels, space between the presentation object(s) and the panel border. Defined in pixels.
-* '''Background color''': Background color of the view/panel/repeater. Panels inside the view may have other background colors than the view. It's possible to set transparent background by defining '''transparent''' in the color selector input box. For panels, the background color doesn't affect the panel header background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel.
+* '''Background color''': Background color of the view/panel/repeater. Panels inside the view may have other background colors than the view. It's possible to set transparent background by setting the value of the alpha channel in the rgba to 0 either by inputting the value or by using the rightmost slider. For panels, the background color doesn't affect the panel header background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel.
 * '''SVG background''': The SVG image to use as the panel background. The SVG image will be rendered on top of the defined panel Background color. The SVG image is defined in the same way as with [[SVG_Properties|SVG Presentation Objects]], except that the SVG image used as the panel background cannot contain actions.

← Older revision		Revision as of 10:24, 21 February 2018
Line 22:		Line 22:
	* '''Vertical centering''': Center repeated items vertically inside repeater.		* '''Vertical centering''': Center repeated items vertically inside repeater.
	* '''Horizontal centering''': Center repeated items horizontally inside repeater.		* '''Horizontal centering''': Center repeated items horizontally inside repeater.
		+
		+	[[Category: QPR UI]]

@@ Line 1: / Line 1: @@
-Common settings for all containers:
+Common settings for all containers (view, panel, repeater):
 * '''Aspect ratio flex''': Decimal number determining how much panel content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the panel itself in a view (it's determined in the view designer), but only its contents.
 ** Panel has a '''design aspect ratio''' which is determined by how presentation objects are arranged in the panel designer. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
@@ Line 5: / Line 5: @@
 ** Panel contents always takes all available space horizontally. If the aspect ratio's lower limit is reached (i.e. panel contents is not allowed use all available space vertically), there may be empty space in the bottom of the panel. If the aspect ratio's higher limit is reached (i.e. panel contents doesn't fit vertically), the panel has a vertical scrollbar.
 ** The aspect ratio flex is useful e.g. for presentation objects which don't work properly if the aspect ratio stretches to too extreme.
-* '''Inner margin''': For views, horizontal and vertical space between the panels in the view. For panels, horizontal and vertical space between the presentation objects in the panel. Defined in pixels. Defined in pixels.
+* '''Inner margin''': For views, horizontal/vertical space between the panels in the view. For panels, horizontal/vertical space between the presentation objects in the panel. Defined in pixels.
-* '''Outer margin''': For views, space between the presentation object(s) and the panel border. For panels, space between the panels and the view outer border. Defined in pixels.
+* '''Outer margin''': For views, space between the panels and the view outer border. For panels, space between the presentation object(s) and the panel border. Defined in pixels.
-* '''Background color''': Background color of the view. Panels inside the view may have other background colors than the view. It's possible to set transparent background by defining "transparent" in the color selector input box. Background color of the panel content area. The background color doesn't affect the panel header's background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel. It's possible to set transparent background by defining "transparent" in the color selector input box.
+* '''Background color''': Background color of the view/panel/repeater. Panels inside the view may have other background colors than the view. It's possible to set transparent background by defining '''transparent''' in the color selector input box. For panels, the background color doesn't affect the panel header background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel.
 * '''SVG background''': The SVG image to use as the panel background. The SVG image will be rendered on top of the defined panel Background color. The SVG image is defined in the same way as with [[SVG_Properties|SVG Presentation Objects]], except that the SVG image used as the panel background cannot contain actions.
@@ Line 13: / Line 13: @@
 * '''Hide panel header''': Used to set panel header (caption) visible or hidden. If panel header is visible, also the panel name is not visible. Panel's buttons (edit, delete, fullscreen) are visible in both cases, but if panel header is hidden, buttons are located over the panel's content area. Panel header can be set hidden, if it's not needed, because it allows more space for the panel contents.
 * '''Hide fullscreen mode icon''': Used to set panel full screen mode icon visible or hidden. The fullscreen icon can be set hidden, if the fullscreen functionality is not needed for the panel.
-* '''Border color''': Panel border color. Border color also affects the one pixel horizontal line between panel content area and header. It's possible to set transparent background by defining "transparent" in the color selector input box.
+* '''Border color''': Panel border color. Border color also affects the one pixel horizontal line between panel content area and header. It's possible to set transparent background by defining '''transparent''' in the color selector input box.
 * '''Border width''': Border width of the panel. Border width can be set to zero to remove panel border. Border width doesn't affect the one pixel horizontal line between panel content area and header.
 * '''Border corner radius''': The amount of rounding of the panel corners. Zero means that panel has sharp rectangular corners.
 Repeater specific settings:
-* '''Item minimum width (px)''': The smallest width, in pixels, that a single repeated item can have. This setting can be used to limit the repeated item width so that it's not too small. Defining this settings means that the repeater is vertically scrollable if the limit width is reached (i.e. there is too few space to fit all the repeated items having the limited size).
+* '''Item minimum width''': The smallest width, in pixels, that a single repeated item can have. This setting can be used to limit the repeated item width so that it's not too small. Defining this settings means that the repeater is vertically scrollable if the limit width is reached (i.e. there is too few space to fit all the repeated items having the limited size).
-* '''Item maximum width (px)''': The largest width, in pixels, that a single repeated item should have. This setting can be used to limit the maximum size of repeated items. It's usefull when the Repeater takes large are in the screen and there may be only one or two repeated items. Defining this setting means that the repeater may contain empty space, when the repeated items are maximum width limited.
+* '''Item maximum width''': The largest width, in pixels, that a single repeated item should have. This setting can be used to limit the maximum size of repeated items. It's usefull when the Repeater takes large are in the screen and there may be only one or two repeated items. Defining this setting means that the repeater may contain empty space, when the repeated items are maximum width limited.
-* '''Vertical centering''': Selecting this will center the repeated items vertically inside the Repeater.
+* '''Vertical centering''': Center repeated items vertically inside repeater.
-* '''Horizontal centering''': Selecting this will center the repeated items horizontally inside the Repeater.
+* '''Horizontal centering''': Center repeated items horizontally inside repeater.

@@ Line 1: / Line 1: @@
-Panel's Presentation tab contains following settings:
+Common settings for all containers:
 * '''Aspect ratio flex''': Decimal number determining how much panel content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the panel itself in a view (it's determined in the view designer), but only its contents.
 ** Panel has a '''design aspect ratio''' which is determined by how presentation objects are arranged in the panel designer. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
@@ Line 7: / Line 5: @@
 ** Panel contents always takes all available space horizontally. If the aspect ratio's lower limit is reached (i.e. panel contents is not allowed use all available space vertically), there may be empty space in the bottom of the panel. If the aspect ratio's higher limit is reached (i.e. panel contents doesn't fit vertically), the panel has a vertical scrollbar.
 ** The aspect ratio flex is useful e.g. for presentation objects which don't work properly if the aspect ratio stretches to too extreme.
-* '''Inner margin''': Horizontal and vertical space between the presentation objects in the panel. Defined in pixels.
+* '''Inner margin''': For views, horizontal and vertical space between the panels in the view. For panels, horizontal and vertical space between the presentation objects in the panel. Defined in pixels. Defined in pixels.
-* '''Outer margin''': Space between the presentation object(s) and the panel border. Defined in pixels.
+* '''Outer margin''': For views, space between the presentation object(s) and the panel border. For panels, space between the panels and the view outer border. Defined in pixels.
-* '''Background color''': Background color of the panel content area. The background color doesn't affect the panel header's background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel. It's possible to set transparent background by defining "transparent" in the color selector input box.
+* '''Background color''': Background color of the view. Panels inside the view may have other background colors than the view. It's possible to set transparent background by defining "transparent" in the color selector input box. Background color of the panel content area. The background color doesn't affect the panel header's background, which is always white. Note that presentation objects inside the panel may be transparent or have other background color than the panel. It's possible to set transparent background by defining "transparent" in the color selector input box.
 * '''Border color''': Panel border color. Border color also affects the one pixel horizontal line between panel content area and header. It's possible to set transparent background by defining "transparent" in the color selector input box.
 * '''Border width''': Border width of the panel. Border width can be set to zero to remove panel border. Border width doesn't affect the one pixel horizontal line between panel content area and header.
 * '''Border corner radius''': The amount of rounding of the panel corners. Zero means that panel has sharp rectangular corners.
-The Repeater's Presentation tab contains the following settings:
+Repeater specific settings:
 * '''Item minimum width (px)''': The smallest width, in pixels, that a single repeated item can have. This setting can be used to limit the repeated item width so that it's not too small. Defining this settings means that the repeater is vertically scrollable if the limit width is reached (i.e. there is too few space to fit all the repeated items having the limited size).
 * '''Item maximum width (px)''': The largest width, in pixels, that a single repeated item should have. This setting can be used to limit the maximum size of repeated items. It's usefull when the Repeater takes large are in the screen and there may be only one or two repeated items. Defining this setting means that the repeater may contain empty space, when the repeated items are maximum width limited.
 * '''Vertical centering''': Selecting this will center the repeated items vertically inside the Repeater.
 * '''Horizontal centering''': Selecting this will center the repeated items horizontally inside the Repeater.

← Older revision		Revision as of 22:14, 25 January 2018
Line 25:		Line 25:
	* '''Background color''': Background color of the view. Panels inside the view may have other background colors than the view. It's possible to set transparent background by defining "transparent" in the color selector input box.		* '''Background color''': Background color of the view. Panels inside the view may have other background colors than the view. It's possible to set transparent background by defining "transparent" in the color selector input box.
	* '''SVG background''': The SVG image to use as the view background. The SVG image will be rendered on top of the defined view Background color. The SVG image is defined in the same way as with [[SVG_Properties\|SVG Presentation Objects]], except that the SVG image used as the view background cannot contain actions.		* '''SVG background''': The SVG image to use as the view background. The SVG image will be rendered on top of the defined view Background color. The SVG image is defined in the same way as with [[SVG_Properties\|SVG Presentation Objects]], except that the SVG image used as the view background cannot contain actions.
		+
		+	The Repeater's Presentation tab contains the following settings:
		+	* '''Aspect ratio flex''': Decimal number determining how much the repeater content's aspect ratio (width divided by height) is allowed to vary. Note that this setting doesn't affect the aspect ratio of the repeater itself in a panel (it's determined in the panel designer), but only its contents.
		+	** Repeater has a '''design aspect ratio''' which is determined by how presentation objects are arranged in the repeater designer. Note that the whole available design area doesn't matter - only the actual presentation objects determine the shown area and the design aspect ratio.
		+	** Aspect ratio calculation rule: If design aspect ratio is '''A''' and aspect ratio flex is '''B''', repeater's aspect ratio is allowed to change between '''A/B''' and '''AB'''. Example: If design aspect ratio is 2 and aspect ratio flex is 4, repeater's aspect ratio is allowed to vary between 0.5 and 8 (2/4=0.5 and 24=8).
		+	** Repeater contents always take all available space horizontally. If the aspect ratio's lower limit is reached (i.e. repeater contents is not allowed use all available space vertically), there may be empty space in the bottom of the repeater. If the aspect ratio's higher limit is reached (i.e. repeater contents doesn't fit vertically), the repeater has a vertical scrollbar.
		+	** The aspect ratio flex is useful e.g. for presentation objects which don't work properly if the aspect ratio stretches to too extreme.
		+	* '''Item minimum width (px)''': The smallest width, in pixels, that a single repeated item can have. This setting can be used to limit the repeated item width so that it's not too small. Defining this settings means that the repeater is vertically scrollable if the limit width is reached (i.e. there is too few space to fit all the repeated items having the limited size).
		+	* '''Item maximum width (px)''': The largest width, in pixels, that a single repeated item should have. This setting can be used to limit the maximum size of repeated items. It's usefull when the Repeater takes large are in the screen and there may be only one or two repeated items. Defining this setting means that the repeater may contain empty space, when the repeated items are maximum width limited.
		+	* '''Vertical centering''': Selecting this will center the repeated items vertically inside the Repeater.
		+	* '''Horizontal centering''': Selecting this will center the repeated items horizontally inside the Repeater.
		+	* '''Background color''': Background color of the Repeater content area.