SERV-2286 - top nav elements WIP

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -23,6 +23,47 @@
 
 @section('Limitless::TopBarContent')
     @Limitless::TopNavStart
+        @Limitless::TopNavMenuItem(['title' => 'Title Only'])
+        @Limitless::TopNavMenuItem(['icon' => 'icon-calendar3', 'icon-only' => true, 'badge' => 5])
+        @Limitless::TopNavMenuItem(['title' => 'Title with Icon', 'icon' => 'icon-people', 'url' => 'https://www.google.com'])
+
+        @Limitless::TopNavMenuItemDropdownStart(['title' => 'Dropdown menu', 'icon' => 'icon-gift', 'badge' => 11])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 1'])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 2', 'icon' => 'icon-user-plus', 'badge' => 6])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 3', 'badge' => 5, 'badge-color' => 'green'])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 4', 'icon' => 'icon-switch2'])
+        @Limitless::TopNavMenuItemDropdownStop
+
+        @Limitless::TopNavMenuItemDropdownStart(['user' => 'Kivin', 'img' => '/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/images/placeholders/placeholder.jpg', 'basic-dropdown' => false])
+            @Limitless::TopNavDropdownContentBodyStart
+                @Limitless::TopNavDropdownContentMenuItem(['title' => 'title', 'subtitle' => 'subtitle', 'icon' => 'icon-pencil3', 'icon-color' => 'primary', 'description' => 'description here', 'sub-description' => 'subdescription'])
+                @Limitless::TopNavDropdownContentMenuItem(['title' => 'title', 'subtitle' => 'subtitle', 'img' => '/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/images/placeholders/placeholder.jpg', 'description' => 'description here', 'sub-description' => 'subdescription'])
+            @Limitless::TopNavDropdownContentBodyStop
+        @Limitless::TopNavMenuItemDropdownStop
+
+    @Limitless::TopNavStop
+
+    @Limitless::TopNavStart(true)
+
+        @Limitless::TopNavMenuItemDropdownStart(['icon-only' => true, 'icon' => 'icon-bubbles4', 'badge' => '99+', 'badge-color' => 'primary', 'basic-dropdown' => false, 'caret' => false])
+    @Limitless::TopNavDropdownContentHeaderStart(['title' => ['value' => 'content header <code>test</code>', 'secure' => false], 'icon' => 'icon-compose'])
+            @Limitless::TopNavDropdownContentBodyStart
+                @Limitless::TopNavDropdownContentMenuItem(['title' => 'title', 'subtitle' => 'subtitle', 'icon' => 'icon-pencil3', 'icon-color' => 'primary', 'description' => 'description here', 'sub-description' => 'subdescription'])
+                @Limitless::TopNavDropdownContentMenuItem(['title' => 'title', 'subtitle' => 'subtitle', 'img' => '/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/images/placeholders/placeholder.jpg', 'description' => 'description here', 'sub-description' => 'subdescription'])
+            @Limitless::TopNavDropdownContentBodyStop
+        @Limitless::TopNavMenuItemDropdownStop
+
+        @Limitless::TopNavMenuItem
+        @Limitless::TopNavMenuItem
+
+        @Limitless::TopNavMenuItemDropdownStart(['user' => 'Keven', 'img' => '/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/images/placeholders/placeholder.jpg'])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 1'])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 2', 'icon' => 'icon-user-plus', 'badge' => 6])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 3', 'badge' => 5, 'badge-color' => 'green'])
+            @Limitless::TopNavDropdownMenuItem(['title' => 'Dropdown menu item 4', 'icon' => 'icon-switch2'])
+        @Limitless::TopNavMenuItemDropdownStop
+
+    @Limitless::TopNavStop
 @stop
 
 @section('Limitless::SidebarContent')

src/Views/Limitless/Topnav/Config.php

@@ -34,6 +34,17 @@ class Config
     public $methodAllocation = [
         'Limitless::TopNavStart' => 'topNavStart',
         'Limitless::TopNavStop' => 'topNavStop',
+        'Limitless::TopNavMenuItem' => 'topNavMenuItem',
+        'Limitless::TopNavMenuItemDropdownStart' => 'topNavMenuItemDropdownStart',
+        'Limitless::TopNavMenuItemDropdownStop' => 'topNavMenuItemDropdownStop',
+        'Limitless::TopNavDropdownMenuItem' => 'topNavDropdownMenuItem',
+        'Limitless::TopNavDropdownContentMenuItem' => 'topNavDropdownContentMenuItem',
+        'Limitless::TopNavDropdownContentBodyStart' => 'topNavDropdownContentBodyStart',
+        'Limitless::TopNavDropdownContentBodyStop' => 'topNavDropdownContentBodyStop',
+        'Limitless::TopNavDropdownContentHeaderStart' => 'topNavDropdownContentHeaderStart',
+        'Limitless::TopNavDropdownContentHeaderStop' => 'topNavDropdownContentHeaderStop',
+        'Limitless::TopNavDropdownContentFooterStart' => 'topNavDropdownContentFooterStart',
+        'Limitless::TopNavDropdownContentFooterStop' => 'topNavDropdownContentFooterStop',
     ];
 
     public $assetAllocation;
@@ -42,21 +53,170 @@ class Config
     {
         $this->assetAllocation = [
             'Limitless::TopNavStart' => [
-                'topnav.js'
+                'topnav.js',
+                'topnav.css'
             ]
         ];
     }
 
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavDropdownContentFooterStart"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavDropdownContentFooterStart($parameters)
+    {
+        return View('Limitless::Topnav.DropdownContentFooterStart');
+
+    }
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavDropdownContentFooterStop"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavDropdownContentFooterStop($parameters)
+    {
+        return View('Limitless::Topnav.DropdownContentFooterStop');
+
+    }
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavDropdownContentHeaderStart"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavDropdownContentHeaderStart($parameters)
+    {
+        return View('Limitless::Topnav.DropdownContentHeaderStart')
+            ->withTitle($parameters['title'] ?? null)
+            ->withIcon($parameters['icon'] ?? null)
+            ->withIconUrl($parameters['icon-url'] ?? null);
+
+    }
+
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavDropdownContentBodyStart"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavDropdownContentBodyStart($parameters)
+    {
+        return View('Limitless::Topnav.DropdownContentBodyStart');
+
+    }
+
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "TopNavDropdownContentBodyStop"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function TopNavDropdownContentBodyStop($parameters)
+    {
+        return View('Limitless::Topnav.DropdownContentBodyStop');
+
+    }
+
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavDropdownContentMenuItem"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavDropdownContentMenuItem($parameters)
+    {
+        return View('Limitless::Topnav.DropdownContentMenuItem')
+            ->withImg($parameters['img'] ?? null)
+            ->withIcon($parameters['icon'] ?? null)
+            ->withIconColor($parameters['icon-color'] ?? null)
+            ->withUrl($parameters['url'] ?? null)
+            ->withTitle($parameters['title'] ?? null)
+            ->withSubtitle($parameters['subtitle'] ?? null)
+            ->withDescription($parameters['description'] ?? 'No Description.')
+            ->withSubdescription($parameters['sub-description'] ?? null);
+
+    }
+
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavDropdownMenuItem"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavDropdownMenuItem($parameters)
+    {
+        return View('Limitless::Topnav.DropdownMenuItem')
+            ->withUrl($parameters['url'] ?? null)
+            ->withIcon($parameters['icon'] ?? null)
+            ->withTitle($parameters['title'] ?? 'No title')
+            ->withBadge($parameters['badge'] ?? null)
+            ->withBadgeColor($parameters['badge-color'] ?? 'warning-600');
+
+    }
+
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavMenuItemDropdownStart"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavMenuItemDropdownStart($parameters)
+    {
+        return View('Limitless::Topnav.MenuItemDropdownStart')
+            ->withCaret($parameters['caret'] ?? true)
+            ->withIcon($parameters['icon'] ?? null)
+            ->withIconOnly($parameters['icon-only'] ?? false)
+            ->withTitle($parameters['title'] ?? 'No title')
+            ->withBadge($parameters['badge'] ?? null)
+            ->withBadgeColor($parameters['badge-color'] ?? 'warning-600')
+            ->withBasicDropdown($parameters['basic-dropdown'] ?? true)
+            ->withUser($parameters['user'] ?? null)
+            ->withImg($parameters['img'] ?? null);;
+
+    }
+
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavMenuItemDropdownStop"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavMenuItemDropdownStop($parameters)
+    {
+        return View('Limitless::Topnav.MenuItemDropdownStop');
+
+    }
+
+
+    /*
+    |--------------------------------------------------------------------------------------------
+    | Method "topNavMenuItem"
+    |--------------------------------------------------------------------------------------------
+    */
+    public function topNavMenuItem($parameters)
+    {
+        return View('Limitless::Topnav.MenuItem')
+            ->withUrl($parameters['url'] ?? null)
+            ->withIcon($parameters['icon'] ?? null)
+            ->withIconOnly($parameters['icon-only'] ?? false)
+            ->withTitle($parameters['title'] ?? 'No title')
+            ->withBadge($parameters['badge'] ?? null)
+            ->withBadgeColor($parameters['badge-color'] ?? 'warning-600');
+
+    }
+
 
     /*
     |--------------------------------------------------------------------------------------------
     | Method "topNavStart"
     |--------------------------------------------------------------------------------------------
     */
-    public function topNavStart($right)
+    public function topNavStart($floatRight)
     {
         return View('Limitless::Topnav.Start')
-            ->withRight( ($right ?? false) );
+            ->withFloatRight( ($floatRight == [] ? false : $floatRight) );
 
     }
 

src/Views/Limitless/Topnav/DropdownContentBodyStart.php

+<div class="dropdown-content-body dropdown-scrollable">
+    <ul class="media-list">
\ No newline at end of file

src/Views/Limitless/Topnav/MenuItemDropdownContentHeaderStop.php → src/Views/Limitless/Topnav/DropdownContentBodyStop.php

+</ul>
 </div>

src/Views/Limitless/Topnav/DropdownContentHeaderStart.blade.php

+<div class="dropdown-content-header">
+    @if($title)
+        <span class="font-weight-semibold">
+                @if(is_array($title))
+                        @if(isset($title['value']) && $title['value'])
+                                @if($title['secure'] === false) {!! $title['value'] !!} @else {{ $title['value'] }} @endif
+                        @endif
+                @else
+                        {{ $title }}
+                @endif
+        </span>
+    @endif
+    @if($icon) <a href="{{ $iconUrl }}" class="text-default"><i class="{{ $icon }} font-size-base"></i></a> @endif
+</div>
\ No newline at end of file

src/Views/Limitless/Topnav/DropdownContentMenuItem.blade.php

+<li class="media">
+    @if($img || $icon)
+        <div class="mr-3 position-relative">
+            @if($img)<img src="{{ $img }}" width="36" height="36" class="rounded-circle" alt=""> @endif
+            @if($icon)
+                <a href="#" class="btn bg-transparent @if($iconColor) border-{{ $iconColor }} text-{{ $iconColor }} @endif rounded-round border-2 btn-icon">
+                    <i class="{{ $icon }}"></i>
+                </a>
+            @endif
+        </div>
+    @endif
+    <div class="media-body">
+        <div class="media-title">
+            <a href=" {{ $url }}">
+                <span class="font-weight-semibold text-white">{{ $title }}</span>
+                @if($subtitle) <span class="text-muted float-right font-size-sm">{{ $subtitle }}</span> @endif
+            </a>
+        </div>
+        <span>{!! $description !!}</span>
+        @if($subdescription) <div class="text-muted font-size-sm">{{ $subdescription }}</div> @endif
+    </div>
+</li>
\ No newline at end of file

src/Views/Limitless/Topnav/DropdownMenuItem.blade.php

+<a href="{{ $url }}" class="dropdown-item">
+    @if($icon) <i class="{{ $icon }}"></i> @endif
+    <span @if($badge) class="mr-2" @endif >{{ $title }} </span>
+    @if($badge) <span class="badge badge-pill bg-{{ $badgeColor }} ml-auto">{{ $badge }}</span> @endif
+</a>
\ No newline at end of file

src/Views/Limitless/Topnav/MenuItem.blade.php

 <li class="nav-item">
-    <a href="{{ $link }}" class="navbar-nav-link">
-        {{ $title }}
+    <a href="{{ $url }}" class="navbar-nav-link">
+        @if($icon)
+            <i class="{{ $icon }} @if(!$iconOnly) mr-2 @endif"></i>
+        @endif
+        @if(!$iconOnly) {{ $title }} @endif
+        @if($badge) <span class="badge badge-pill bg-{{ $badgeColor }} ml-auto ml-md-0">{{ $badge }}</span> @endif
     </a>
 </li>
\ No newline at end of file

src/Views/Limitless/Topnav/MenuItemDropdownContentHeaerStart.php

-<div class="dropdown-content-footer">

src/Views/Limitless/Topnav/MenuItemDropdownMenuStart.blade.php

-<li class="nav-item dropdown">
-    <a href="#" class="navbar-nav-link dropdown-toggle caret-0" data-toggle="dropdown">
-        <i class="icon-git-compare"></i>
-        <span class="d-md-none ml-2">Git updates</span>
-        <span class="badge badge-pill bg-warning-400 ml-auto ml-md-0">9</span>
-    </a>
-    <div class="dropdown-menu dropdown-content wmin-md-350">
-        <div class="dropdown-content-header">
-            <span class="font-weight-semibold">Git updates</span>
-            <a href="#" class="text-default"><i class="icon-sync"></i></a>
-        </div>
-        <div class="dropdown-content-body dropdown-scrollable">
-            <ul class="media-list">
-                <li class="media">
-                    <div class="mr-3">
-                        <a href="#" class="btn bg-transparent border-blue-300 text-blue-300 rounded-round border-2 btn-icon"><i class="icon-git-pull-request"></i></a>
-                    </div>
-                    <div class="media-body">
-                        Drop the IE <a href="#">specific hacks</a> for temporal inputs
-                        <div class="text-muted font-size-sm">4 minutes ago</div>
-                    </div>
-                </li>
-                <li class="media">
-                    <div class="mr-3">
-                        <a href="#" class="btn bg-transparent border-orange-300 text-orange-300 rounded-round border-2 btn-icon"><i class="icon-git-commit"></i></a>
-                    </div>
-                    <div class="media-body">
-                        Add full font overrides for popovers and tooltips
-                        <div class="text-muted font-size-sm">36 minutes ago</div>
-                    </div>
-                </li>
-                <li class="media">
-                    <div class="mr-3">
-                        <a href="#" class="btn bg-transparent border-green text-green rounded-round border-2 btn-icon"><i class="icon-git-branch"></i></a>
-                    </div>
-                    <div class="media-body">
-                        <a href="#">Chris Arney</a> created a new <span class="font-weight-semibold">Design</span> branch
-                        <div class="text-muted font-size-sm">2 hours ago</div>
-                    </div>
-                </li>
-                <li class="media">
-                    <div class="mr-3">
-                        <a href="#" class="btn bg-transparent border-pink-300 text-pink-300 rounded-round border-2 btn-icon"><i class="icon-git-merge"></i></a>
-                    </div>
-                    <div class="media-body">
-                        <a href="#">Eugene Kopyov</a> merged <span class="font-weight-semibold">Master</span> and <span class="font-weight-semibold">Dev</span> branches
-                        <div class="text-muted font-size-sm">Dec 18, 18:36</div>
-                    </div>
-                </li>
-                <li class="media">
-                    <div class="mr-3">
-                        <a href="#" class="btn bg-transparent border-blue-300 text-blue-300 rounded-round border-2 btn-icon"><i class="icon-git-pull-request"></i></a>
-                    </div>
-                    <div class="media-body">
-                        Have Carousel ignore keyboard events
-                        <div class="text-muted font-size-sm">Dec 12, 05:46</div>
-                    </div>
-                </li>
-            </ul>
-        </div>
-
-    </div>
-</li>
\ No newline at end of file

src/Views/Limitless/Topnav/MenuItemDropdownStart.blade.php

+<li class="nav-item dropdown @if($user) dropdown-user @endif">
+    <a href="#" class="navbar-nav-link dropdown-toggle
+        @if($user) d-flex align-items-center @endif
+        @if(!$caret) caret-0 @endif"
+        data-toggle="dropdown" aria-expanded="false">
+
+        @if($user)
+
+            @if($img) <img src="{{ $img }}" class="rounded-circle mr-2" height="34" alt=""> @endif
+            <span>{{ $user }}</span>
+
+        @else
+
+            @if($icon) <i class="{{ $icon }}"></i> @endif
+            <span class="@if($iconOnly) d-md-none @endif ml-2">
+            {{ $title }}
+            </span>
+            @if($badge) <span class="badge badge-pill bg-{{ $badgeColor }} ml-auto ml-md-0">{{ $badge }}</span> @endif
+
+        @endif
+
+    </a>
+    <div class="dropdown-menu dropdown-menu-right @if(!$basicDropdown) dropdown-content wmin-md-300 @endif">
\ No newline at end of file

src/Views/Limitless/Topnav/Start.blade.php

-<ul class="navbar-nav @if($right) ml-xl-auto @endif ">
\ No newline at end of file
+<ul class="navbar-nav @if($floatRight) ml-xl-auto @endif ">
\ No newline at end of file

src/Views/Limitless/Topnav/topnav.css

+/* This is a workaround for .media:first-child of bootstrap_limitless.css will not work because of picasso tags. */
+.media-list > .media:first-of-type {
+    margin-top: 0;
+}
+
+/* This is a workaround for .dropdown-content-header:not([class*=bg-])+.dropdown-content-body of bootstrap_limitless.css will not work because of picasso tags. */
+.dropdown-content-header ~ .dropdown-content-body {
+    padding-top: 0;
+}
\ No newline at end of file