Compress Property

From MSX - Wiki
Jump to navigation Jump to search

It is possible to set a compress property (of type boolean) to the content data to compress the content by 25%. The compression increases the layout grid size from 12x6 to 16x8 (or from 8x6 to 10x8 for panels). This allows you to display more content items per page. This feature is available since version 0.1.123.

Note: Since the size of each content item is reduced, the font sizes of specific properties (e.g. label, icon, headline, etc.) are adjusted accordingly. Please note that only the font sizes that are larger than the minimum font size are adjusted (e.g. the font size of a text property is not adjusted as this is the minimum font size). If you set the compress property to false on a content page or item object, no font size adjustments are performed.

Please see following example.

Example[edit]

Screenshot[edit]

Example Screenshot (Compress Property)

Code[edit]

{
    "compress": true,
    "type": "list",
    "headline": "Compression Test",
    "template": {
        "type": "control",
        "layout": "0,0,16,1",
        "icon": "adb"
    },
    "header": {
        "compress": false,
        "offset": "0,0,0,0.666",
        "items": [{
                "type": "control",
                "layout": "0,0,16,1",
                "offset": "0,0,0,0.333",
                "icon": "adb",
                "label": "Header"
            }]
    },
    "footer": {
        "offset": "0,0.333,0,0",
        "items": [{
                "compress": false,
                "type": "space",
                "layout": "0,0,16,1",
                "headline": "Footer"
            }, {
                "compress": false,
                "badge": "Uncompressed",
                "type": "button",
                "layout": "0,1,4,4",
                "offset": "0,-0.333,0,0",
                "icon": "msx-green:check-circle",
                "label": "Success",
                "action": "success:This is a success message."
            }, {
                "compress": false,
                "badge": "Uncompressed",
                "type": "button",
                "layout": "4,1,4,4",
                "offset": "0,-0.333,0,0",
                "icon": "msx-blue:info",
                "label": "Info",
                "action": "info:This is an info message."
            }, {
                "compress": false,
                "badge": "Uncompressed",
                "type": "button",
                "layout": "8,1,4,4",
                "offset": "0,-0.333,0,0",
                "icon": "msx-yellow:warning",
                "label": "Warning",
                "action": "warn:This is a warning message."
            }, {
                "compress": false,
                "badge": "Uncompressed",
                "type": "button",
                "layout": "12,1,4,4",
                "offset": "0,-0.333,0,0",
                "icon": "msx-red:error",
                "label": "Error",
                "action": "error:This is an error message."
            }, {
                "compress": true,
                "badge": "Compressed",
                "type": "button",
                "layout": "0,5,3,3",
                "icon": "msx-green:check-circle",
                "label": "Success",
                "action": "success:This is a success message."
            }, {
                "compress": true,
                "badge": "Compressed",
                "type": "button",
                "layout": "3,5,3,3",
                "icon": "msx-blue:info",
                "label": "Info",
                "action": "info:This is an info message."
            }, {
                "compress": true,
                "badge": "Compressed",
                "type": "button",
                "layout": "6,5,3,3",
                "icon": "msx-yellow:warning",
                "label": "Warning",
                "action": "warn:This is a warning message."
            }, {
                "compress": true,
                "badge": "Compressed",
                "type": "button",
                "layout": "9,5,3,3",
                "icon": "msx-red:error",
                "label": "Error",
                "action": "error:This is an error message."
            }]
    },    
    "items": [{
            "label": "Item 1"
        }, {
            "label": "Item 2"
        }, {
            "label": "Item 3"
        }, {
            "label": "Item 4"
        }, {
            "label": "Item 5"
        }, {
            "label": "Item 6"
        }, {
            "label": "Item 7"
        }, {
            "label": "Item 8"
        }]
}

Demo[edit]