Пропал скин Air Compact

SveSve
edited December 6 in General

Здравствуйте.
У меня весь проект был построен на скине air compact, но начиная с 6 версии webix он пропал, при копировании скина со старой версии в новую - выглядит чудовищно. Ссылка, указанная при формировании скина также не работает:
When a new version is released, just visit
http://webix.com/skin-builder/b0f6c8c5

Что делать?

Tagged:

Comments

  • edited December 6

    Здравствуйте,

    Для старых скинов мы сохранили старую версию Skin builder: https://webix.com/skin-builder-54/b0f6c8c5

    при копировании скина со старой версии в новую - выглядит чудовищно

    Скорее всего, не применились размеры, выставляемые ранее в JS коде. Сейчас вам надо в объект webix.skin передать нужную размерность до инициализации приложения:

    webix.skin.$active = settings;
    webix.ui(..);
    

    Вот настройки для Air Compact:

    var settings = {
        topLayout:"wide",
        barHeight:24,
        tabbarHeight: 26,
        rowHeight:26,
        toolbarHeight:22,
        listItemHeight:28,
        inputHeight:29,
        inputPadding: 2,
        menuHeight: 25,
        menuMargin:0,
        labelTopHeight: 16,
        inputSpacing: 4,
        borderWidth: 1,
        sliderHandleWidth: 12,
        sliderPadding: 10,
        sliderBorder: 1,
        vSliderPadding:12.5,
        vSliderHeight:100,
        switchHeight:20,
        switchWidth:40,
        layoutMargin:{ space:10, wide:4, clean:0, head:4, 
               line:-1, toolbar:4, form:8 },
        layoutPadding:{ space:10, wide:0, clean:0, head:0, line:0,
                toolbar:4, form:8 },
        tabMargin:0,
        popupPadding: 8,
        calendarHeight: 70,
        padding:0,
        optionHeight: 23
    };
    

    Что делать?

    Также обратите внимание, что старые скины мы больше не поддерживаем, стилей для новых виджетов там не будет. Сейчас в пакете есть 2 компактных скина - Mini и Compact, возможно есть смысл в перспективе перейти на один из них.

  • SveSve
    edited December 6

    Не получилось, всё очень широкое, вот картинка с оригинальным скином и тем, что получилось: https://ibb.co/q1cfmpw
    Рекомендованные настройки инициализирую сразу же:

    webix.ready(function () {

    webix.skin.$active = {
        topLayout: "wide",
        barHeight: 24,
        tabbarHeight: 26,
        rowHeight: 26,
        toolbarHeight: 22,
        listItemHeight: 28,
        inputHeight: 29,
        inputPadding: 2,
        menuHeight: 25,
        menuMargin: 0,
        labelTopHeight: 16,
        inputSpacing: 4,
        borderWidth: 1,
        sliderHandleWidth: 12,
        sliderPadding: 10,
        sliderBorder: 1,
        vSliderPadding: 12.5,
        vSliderHeight: 100,
        switchHeight: 20,
        switchWidth: 40,
        layoutMargin: {
            space: 10, wide: 4, clean: 0, head: 4,
            line: -1, toolbar: 4, form: 8
        },
        layoutPadding: {
            space: 10, wide: 0, clean: 0, head: 0, line: 0,
            toolbar: 4, form: 8
        },
        tabMargin: 0,
        popupPadding: 8,
        calendarHeight: 70,
        padding: 0,
        optionHeight: 23
    };
    

    //... вырезано

  • Да, немного иначе:

    webix.extend(webix.skin.$active, settings, true);
    

    https://snippet.webix.com/jjpo8w5u

  • SveSve
    edited December 8

    Спасибо, помогло, правда комбобоксы и кнопки всё ещё гигантские :)

  • edited December 9

    С версии 6.0 еще одно свойство добавилось, buttonHeight:

    С ним кнопки принимают нужный размер: https://snippet.webix.com/kt84sycm

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion