menu-pin-button like the Barcelona theme

Post Reply
mzahl
Posts: 4
Joined: 29 Jun 2015, 15:53

24 Jul 2017, 13:30

Hi,

is there a solution to add the menu-pin-button to the atlantis menu like in the Barcelona theme?
I want to show the menu always without fading.

Thanks!

Regards,
Martin

User avatar
aragorn
Posts: 3428
Joined: 29 Jun 2013, 12:38

31 Jul 2017, 08:36

I added this feature to next version. For now, you need to override layout.js and TabMenuRenderer.java;

Code: Select all

// TabMenuRenderer.java
...
writer.endElement("a");

/* Please add this lines. Line 77 */
                writer.startElement("a", tab);
                        writer.writeAttribute("href", "#", null);
                        writer.writeAttribute("class", "menu-pin-button", null);
                        writer.startElement("i", null);
                        writer.writeAttribute("class", "fa fa-thumb-tack fa-rotate-90", null);
                        writer.endElement("i");
               writer.endElement("a");
 /******************************************/
 
 writer.endElement("div");
 ...

Code: Select all

// layout.js

PrimeFaces.widget.Atlantis = PrimeFaces.widget.BaseWidget.extend({
    
    init: function(cfg) {
        ...
        this.tabMenuContents = this.tabMenu.find('.layout-tabmenu-content'); // Please add this line


        this._bindEvents();
        this._restoreMenuState(); // Please add this line
    },
    
    _bindEvents: function() {
        ....
        
        this.tabMenu.find('.menu-pin-button').on('click', function(e) {   // Please add this event
            var icon = $(this).children('i');
            if(icon.hasClass('fa-rotate-90'))
                $this._saveMenuState($(this).closest('.layout-tabmenu-content').index());
            else
                $this.clearMenuState();
                
            $this.tabMenuContents.find('.menu-pin-button').children('i').toggleClass('fa-rotate-90');
            e.preventDefault();
        });
        ...
  }

Code: Select all

//Css
.layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button {
    padding: 0px 7px;
    float: right;
    text-align: center;
    -moz-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    transition: background-color 0.3s;
}
.layout-wrapper .layout-sidebar .layout-tabmenu .layout-tabmenu-contents .layout-tabmenu-content .layout-submenu-title .menu-pin-button:hover {
    background-color: #E0E0E0;
}

Post Reply

Return to “Atlantis - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests