Update existing user menu

Babas007
Posts: 247
Joined: 24 May 2011, 09:42

16 Feb 2018, 15:29

Hi,

I'm trying to migrate our user menu to Barcelona user menu. Unfortunately, it does not support "submenu" like California does. Is it possible to port California user menu to Barcelona please?
Image

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

19 Feb 2018, 08:24

Hi,

I'll check and get back to you.

Best Regards

Babas007
Posts: 247
Joined: 24 May 2011, 09:42

19 Feb 2018, 11:55

Thank you kubrasulukan, let me know ;-)

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

19 Feb 2018, 12:52

Hi Babas007,

There codes(HTML, SCSS and JS) that an example of profile menu in California. You can use and edit them according to your need.

HTML code;

Code: Select all

<ul id="topbar-usermenu" class="usermenu">
                    <li>
                        <a href="#">
                            <i class="fa fa-fw fa-user"></i>
                            <span class="topbar-item-name">Profile</span>
                            <span class="topbar-submenuitem-badge">4</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-fw fa-cog"></i>
                            <span class="topbar-item-name">Settings</span>
                            <span class="topbar-submenuitem-badge">2</span>
                        </a>
                        <ul>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-paint-brush"></i>
                                    <span>Change</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-star-o"></i>
                                    <span>Favorites</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-lock"></i>
                                    <span>Lock Screen</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-picture-o"></i>
                                    <span>Wallpaper</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-fw fa-envelope-o"></i>
                            <span class="topbar-item-name">Messages</span>
                        </a>
                        <ul>
                            <li role="menuitem">
                                <a href="#" class="topbar-message">
                                    <p:graphicImage name="images/avatar1.png" library="california-layout" width="25"/>
                                    <span>Give me a call</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#" class="topbar-message">
                                    <p:graphicImage name="images/avatar2.png" library="california-layout" width="25"/>
                                    <span>Reports attached</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#" class="topbar-message">
                                    <p:graphicImage name="images/avatar3.png" library="california-layout" width="25"/>
                                    <span>About your invoice</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#" class="topbar-message">
                                    <p:graphicImage name="images/avatar2.png" library="california-layout" width="25"/>
                                    <span>Meeting today</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#" class="topbar-message">
                                    <p:graphicImage name="images/avatar4.png" library="california-layout" width="25"/>
                                    <span>Out of office</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-fw fa-bell-o"></i>
                            <span class="topbar-item-name">Notifications</span>
                        </a>
                        <ul>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-tasks"></i>
                                    <span>Pending tasks</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-calendar-check-o"></i>
                                    <span>Meeting today</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-download"></i>
                                    <span>Download</span>
                                </a>
                            </li>
                            <li role="menuitem">
                                <a href="#">
                                    <i class="fa fa-fw fa-plane"></i>
                                    <span>Book flight</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
SCSS code;

Code: Select all

.usermenu {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                        display: none;
                        
                        &.usermenu-active {
                            display: block;
                        }

                        li {
                            a {
                                display: block;
                                text-align: left;
                                
                                i {
                                    margin-right: 9px;
                                    vertical-align: middle;
                                }
                                
                                span, img {
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                            }
                            
                            ul {
                                display: none;
                                list-style: none;
                                margin: 0;
                                padding: 0;

                                a {
                                    padding-left: 24px;
                                    
                                    span, img {
                                        vertical-align: middle;
                                    }
                                    
                                    img {
                                        margin-right: 8px;
                                    }
                                }
                            }
                        } 

                        > li {
                            &.menuitem-active {
                                > a {          
                                    padding-left: 8px;
                                }
                            }
                        }                               
                    }
JS code;

Code: Select all

this.topbarUsermenuButton = $('#topbar-usermenu-button');
        this.topbarUserMenu = $('#topbar-usermenu');

        if (this.topbarUserMenu.length)
        this.usermenuLinks = this.topbarUserMenu.find('a');
        
        _bindEvents: function() {
        var $this = this;
        
        $this.topbarUsermenuButton.off('click').on('click', function (e) {
            $this.topbarMenuClick = true;

            if ($this.topbarUserMenu.hasClass('usermenu-active')) {
                $this.topbarUserMenu.removeClass('fadeInDown').addClass('fadeOutUp');

                setTimeout(function () {
                    $this.topbarUserMenu.removeClass('usermenu-active fadeOutUp');
                }, 250);
            }
            else {
                $this.topbarUserMenu.addClass('usermenu-active fadeInDown');
            }

            e.preventDefault();
        });

        $this.topbarUserMenu.off('click').on('click', function (e) {
            $this.topbarMenuClick = true;
        });

        $this.usermenuLinks.on('click', function (e) {
            var link = $(this),
            item = link.parent(),
            submenu = link.next();

            $this.usermenuLinkClick = true;
            item.siblings('.menuitem-active').removeClass('menuitem-active').children('ul').slideUp();

            if (item.hasClass('menuitem-active')) {
                item.removeClass('menuitem-active');
                submenu.slideUp();
            }
            else {
                item.addClass('menuitem-active');
                submenu.slideDown();
            }

            if (submenu.length) {
                e.preventDefault();
            }
        });
        
        $(document.body).on('click', function() {
            if (!$this.topbarMenuClick && $this.topbarUserMenu.hasClass('usermenu-active')) {
                $this.topbarUserMenu.removeClass('usermenu-active')
            }

            $this.topbarMenuClick = false;
        });
      }
Regards

Babas007
Posts: 247
Joined: 24 May 2011, 09:42

19 Feb 2018, 13:12

Great! Thank you kubrasulukan.

Can you confirm it will be present in the next version of Barcelona? We'd like to not modify the theme by ourself

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

19 Feb 2018, 15:31

It's not certain yet. We'll discuss with team members.

Best Regards

Babas007
Posts: 247
Joined: 24 May 2011, 09:42

21 Feb 2018, 15:36

@kubrasulukan,

I thank you for your quick answer, but, did you try the code on Barcelona itself? Honestly, I'm expecting this too work just like in California, and I don't want (me and my team) to struggle to make it work...

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

23 Feb 2018, 08:19

Of course we try every code that sent to you and we check out is it working on themes. I tried codes on Barcelona and it is working. I believe you can make it work without struggling.

Best Regards

Babas007
Posts: 247
Joined: 24 May 2011, 09:42

23 Mar 2018, 13:07

Is it possible to provide a patch instead? It would be a lot more easier for us to apply the changes. Unless you plan to integrate these changes in the next realese?

kubrasulukan
Posts: 87
Joined: 10 Jan 2018, 16:04

27 Mar 2018, 08:37

We don't plan to integrate these changes to Barcelona.

Regards

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest