SideMenu : not collapsible as expected in V7.2.x

mortoza_khan · March 7, 2020, 7:09pm

Hi
According to the release note here I am trying to have the new closable side menu but seems like not getting it.

As suggested, I changed my side menu xml to replace hbox with cssLayout

   <window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        extends="/com/haulmont/cuba/web/app/main/main-screen.xml">
    <layout>
        <cssLayout id="horizontalWrap">
            <workArea id="workArea">

But I don’t see any change. Then I have removed my ext-main-screen files and recreated it but still the same, the SideMenu is not collapsible.

Thanks for any help.

gorelov · March 10, 2020, 6:28am

Hi,

Unfortunately, I can’t reproduce the problem. Both options: no main screen extension and extended main screen have a collapsible side menu. Could you please provide a screen XML and controller code?

Gleb

mortoza_khan · March 10, 2020, 10:49pm

Hi Gleb
Thanks for your attention. I was trying to implement this in responsive side menu that I was using in my application but now I realized that I have to use “side menu” extension instead of “responsive side menu”. It’s now working.

I must say that, this is awesome sideMenu that one can expect.

I have a few questions while I am trying to move some elements from my previous side menu to this one as follows:

Company Logo. The logo now displayed a very tiny in size. If you please suggest how I can make the logo bigger, most likely in a separate plan as follows?

Use of ReachSearch and FTS Search
Here is the xml file of ext-main-screen where you will see I am trying to use ReachSearch and FTS Search components but it is showing some errors:

        <hbox id="companyButtonsBox">
            <button id="btnDefaultCompany" height="20px" width="20px" align="MIDDLE_CENTER"/>
            <label id="empty" />
        </hbox>
        <hbox id="titleBar"
              align="TOP_CENTER">
            <search:richSearch id="search"
                               align="MIDDLE_CENTER"
                               caption="Menu Search"
                               description="Menu Search"
                               inputPrompt="msg://search"
                               suggestionsLimit="20">
                <search:strategyBean name="search_SideMenuSearchStrategy"/>
            </search:richSearch>
        </hbox>
        <ftsField id="ftsField"
                  width="100%"/>

        <workArea id="workArea">
            <initialLayout>
                spacing="true">
                <label id="welcomeLabel"
                       align="MIDDLE_CENTER"
                       width="100%"
                       stylename="c-welcome-text"
                       value="mainMsg://application.welcomeText"/>
            </initialLayout>
        </workArea>
    </cssLayout>
</layout>

Here is where you will see errors:

The badge value i have initiated at run-time has been overflowing and partially hidden as below:

21%20PM

gorelov · March 11, 2020, 6:55am

The logo image has such size, because it looks the same in collapsed and non-collapsed mode (see cuba/app-window.scss at master · cuba-platform/cuba · GitHub).
Compare with the previous main screen XML. The window element must contain additional xmlns attribute, e.g. xmlns:search="<path_to_xsd>".
Thank you for reporting the problem, I’ve created a GitHub issue.

mortoza_khan · March 11, 2020, 5:04pm

Hi Gleb
Thanks for your help and creating the issue in GitHub.
Here are my additional comments on those items:

I fully understand why the logo size is so tiny, it’s for using the same location and size of the logo for both collapsed sideMenu and expanded Sidemenu. But I hope you also realize that it is not that appealing like when we can enlarge the logo when the collapsed menu is expanded. Therefore, here is an idea:

Add a space above the current logo+application title so and add this first line for standard size logo. This image of the logo to centered so that it is not visible when the sideMenu is collapsed. When the sideMenu is not collapsed, just hide the tine logo image.

This will look like as follows:

RichSearch add-on
Thanks for suggesting the missing line. However, now the search component is displayed off the menu as follows:

I want to put it on top of the menu items
according to the example in (1) above, will that be possible? Here is my xml code for ref.

    <window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
        extends="/com/haulmont/cuba/web/app/main/main-screen.xml"
        xmlns:search="http://schemas.haulmont.com/cuba/search.xsd">

<timers>
    <timer id="taskCounterTimer" delay="10000" repeating="true" autostart="true"/>
</timers>
<layout>
    <cssLayout id="horizontalWrap">

        <hbox id="companyButtonsBox">
            <button id="btnDefaultCompany" height="20px" width="20px" align="MIDDLE_CENTER"/>
            <label id="empty" />
        </hbox>
        <hbox id="titleBar"
              align="TOP_CENTER">
            <search:richSearch id="search"
                               align="MIDDLE_CENTER"
                               caption="Menu Search"
                               description="Menu Search"
                               inputPrompt="msg://search"
                               suggestionsLimit="20">
                <search:strategyBean name="search_SideMenuSearchStrategy"/>
            </search:richSearch>
        </hbox>
        <workArea id="workArea">
            <initialLayout>
                spacing="true">
                <label id="welcomeLabel"
                       align="MIDDLE_CENTER"
                       width="100%"
                       stylename="c-welcome-text"
                       value="mainMsg://application.welcomeText"/>
            </initialLayout>
        </workArea>
    </cssLayout>
</layout>
</window>

Thanks for the issue log
Is there any change in fts embedded into this new side menu?

 <main:ftsField id="ftsField"
                           width="100%"
                           stylename="side-panel-field"/>

gorelov · March 12, 2020, 6:49am

Possibly the RichSearch add-on isn’t optimized with the new collapsible side menu. Could you please create a separate topic in the add-ons section, so the responsible team can investigate the problem?

As I can see in main-screen.xml (you can navigate to the source from the extends attribute - extends="/com/haulmont/cuba/web/app/main/main-screen.xml"), the ftsField field no longer has a prefix:

<ftsField id="ftsField"
          width="100%"/>

Gleb

mortoza_khan · March 28, 2020, 6:22am

This has been fixed for halo theme but helium theme has same issue:

gorelov · March 28, 2020, 10:32am

Helium currently depends on CUBA 7.2.0. Next theme release will be updated to the latest CUBA version, so that it will has no this bug.

Regards,
Gleb

mortoza_khan · March 28, 2020, 2:30pm

Thank you