Properties to hide default controls? about golden-layout HOT 12 CLOSED

@hoxton-one
Am I understanding correctly that "showPopoutIcon: true, showMaximiseIcon: true, showCloseIcon: true" properties are to the global layout? I can't control the behavior per pane, which is what I'm looking to do?

Also, for the vertical and horizontal grab bars (splitter) used for resizing, is it possible to show a grab bar graphic like the one that codepen has (it's a little hard to see on the screen shot, but in that highlighted area are 3 horizontal lines):

From looking at the css, it appears the grab bars currently get their css .lm_goldenlayout so if it would seem I can't add the desired effect via css currently? If I'm correct, would it be possible to add two additional css classes to allow styling the horizontal and vertical separately?

from golden-layout.

Hi @genachka

Yes, the settings are global. You can however control the visibility of the icons per panel by traversing the component tree, e.g. from within a component:

container.parent.parent.header.controlsContainer.find( '.lm_maximise').hide();

You can easily change the css for the splitters and add the desired drag handle icon. The splitters can be selected as .lm_splitter.lm_vertical and .lm_splitter.lm_horizontal respectively.

Please find a codepen here illustrating how to apply exactly the same styling that the codepen has to the GoldenLayout splitters:

from golden-layout.

Hi @genachka ,

yup, all those settings are available, please have a look here for documentation.

In particular

 showPopoutIcon: true,
  showMaximiseIcon: true,
  showCloseIcon: true

The setting to make tabs unclosable is part of the item config and is called

isClosable: true

• GoldenLayout has basic support for touch and touchmove events,

It doesn't support preventing areas from being drop-targets or positioning the tabs anywhere but the top

I hope that helps, please let me know if you have further questions.

from golden-layout.

@aemonge #385

from golden-layout.

@hoxton-one
Thanks for your prompt response! I'm glad to see support already there.

Are there plans to support positioning of the tabs and disabling certain panes from being undocked and not being dock targets?

Is there a roadmap on features planned?

from golden-layout.

@hoxton-one
Nice! Those work very well!

I saw example on how to add controls to the header. I'm trying to add a control to collapse the pane where only the header control shows arrow to expand it back to previous width. I've been able to add the control and can respond to the click event. But I can't seem to change the width but can the height. So far I try to collapse without the expand, via:

myLayout.on('stackCreated', function(stack) {
            stack.header.controlsContainer.prepend('<li class="lm_collapse_mine" title="collapse pane"><i class="fa fa-arrow-left">&nbsp;</i></li>');
            stack.on('activeContentItemChanged', function(contentItem) {
                if (contentItem.componentName === "test") {
                    contentItem.parent.header.controlsContainer.find('.lm_popout').hide();
                    contentItem.parent.header.controlsContainer.find('.lm_maximise').hide();
                }

                $(".lm_collapse_mine").on("click", function(event) {
                    componentItem.container.setSize(10, componentItem.container.height);
                })
            });
        });

from golden-layout.

@hoxton-one
Any suggestions on how to do previous question?

from golden-layout.

You can only set width for rows and height for columns. To resize an element in both dimensions, you would need to resize it and its parent.

from golden-layout.

The property is mentioned https://golden-layout.com/docs/Config.html

But, I am currently successfully using it in 1.5.1 on an individual item which is not documented.

from golden-layout.

I tried to hide the popOut per specific "Map" contentItem, it seems to affect it globally. using the example above to fine the .lm_popout.

Any able to help me please?
thanks

window.onload = function () {
    var myLayout = new GoldenLayout( config );
    myLayout.registerComponent( 'Map', function( container, componentState ){
        container.getElement().html( '<iframe src="http://server2/" scrolling="yes" height="100%" width="100%"> </iframe>' );
    });

    myLayout.registerComponent( 'Watson', function( container, componentState ){
        container.getElement().html( '<iframe src="http://server1/"  height="100%" width="100%"> </iframe>' );
    });


    myLayout.on('stackCreated', function(stack) {
            stack.on('activeContentItemChanged', function(contentItem) {
                if (contentItem.componentName == "Map") {
                 #    **contentItem.parent.header.controlsContainer.find('.lm_popout').hide();**
                }
            });
        }); 

    myLayout.init();
}

from golden-layout.

Is it possible to lock the re-size controls ?

from golden-layout.

I opened a new issue on that topic: #491

from golden-layout.