Skip to content

Commit 73fcdf8

Browse files
JavaTMPJavaTMP
committed
separate the custom profile dropdown item to custom-bootstrap-dropdown.scss #146 
1 parent 491d01a commit 73fcdf8

182 files changed

Lines changed: 1416 additions & 878 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎JavaTMP-Java-Ajax-Starter/web/WEB-INF/index.jsp‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@
2929
<span class="d-none d-lg-inline">${labels['global.system.name.long']}</span>
3030
</a>
3131
<ul class="main-navbar-menu nav ml-auto">
32-
<li class="nav-item py-0 dropdown d-none d-sm-inline">
33-
<a class="nav-link dropdown-toggle faa-parent animated-hover" data-toggle="dropdown" href="">
34-
<i class="fa fa-globe fa-lg faa-spin"></i>
32+
<li class="nav-item dropdown d-none d-sm-flex d-flex align-items-stretch">
33+
<a class="nav-link dropdown-toggle faa-parent animated-hover d-flex align-items-center" data-toggle="dropdown" href="">
34+
<i class="fa fa-globe fa-lg faa-spin mr-1"></i>
3535
<span class="d-none d-lg-inline">${labels['global.navbar.lang.current']}</span>
3636
</a>
3737
<ul class="dropdown-menu">
@@ -53,9 +53,9 @@
5353
</li>
5454
</ul>
5555
</li>
56-
<li class="nav-item py-0 dropdown mega-on-sm" id="myMessagesDropdownId">
57-
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
58-
<i class="fa fa-envelope fa-lg faa-shake animated"></i>
56+
<li class="nav-item dropdown mega-on-sm d-flex align-items-stretch" id="myMessagesDropdownId">
57+
<a class="nav-link dropdown-toggle d-flex align-items-center" data-toggle="dropdown" href="#">
58+
<i class="fa fa-envelope fa-lg faa-shake animated mr-1"></i>
5959
<span class="badge badge-danger d-none d-md-inline">99+</span>
6060
</a>
6161
<div class="dropdown-menu dropdown-menu-extender">
@@ -78,9 +78,9 @@
7878
</div>
7979
</div>
8080
</li>
81-
<li class="nav-item py-0 dropdown mega-on-sm">
82-
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
83-
<i class="fa fa-lg fa-bars faa-float animated"></i>
81+
<li class="nav-item dropdown mega-on-sm d-flex align-items-stretch">
82+
<a class="nav-link dropdown-toggle d-flex align-items-center" data-toggle="dropdown" href="#">
83+
<i class="fa fa-lg fa-bars faa-float animated mr-1"></i>
8484
<span class="badge badge-danger d-none d-md-inline">99+</span>
8585
</a>
8686
<div class="dropdown-menu dropdown-menu-extender">
@@ -185,9 +185,9 @@
185185
</div>
186186
</div>
187187
</li>
188-
<li class="nav-item py-0 dropdown mega-on-sm">
189-
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">
190-
<i class="fa fa-lg fa-bell faa-ring animated"></i>
188+
<li class="nav-item dropdown mega-on-sm d-flex align-items-stretch">
189+
<a class="nav-link d-flex align-items-center dropdown-toggle" data-toggle="dropdown" href="#">
190+
<i class="fa fa-lg fa-bell faa-ring animated mr-1"></i>
191191
<span class="badge badge-danger d-none d-md-inline">99+</span>
192192
</a>
193193
<ul class="dropdown-menu dropdown-menu-extender">
@@ -242,12 +242,12 @@
242242
</li>
243243
</ul>
244244
</li>
245-
<li class="nav-item py-0 dropdown">
246-
<a class="nav-link user-profile-menu-item dropdown-toggle" data-toggle="dropdown" href="#">
247-
<img class="user-profile-pic rounded-circle"
245+
<li class="nav-item dropdown">
246+
<a class="d-flex align-items-center h-100 text-left nav-link dropdown-toggle" data-toggle="dropdown" href="#">
247+
<img class="rounded-circle mr-1"
248248
src="${pageContext.request.contextPath}/assets/img/avatar/profile_pic_min.png" alt=""/>
249-
<span class="user-profile-menu-item-info d-none d-md-inline-block">
250-
<small>Welcome,</small>
249+
<span class="d-none d-md-inline">
250+
<small class="d-flex">Welcome,</small>
251251
${sessionScope.user.firstName}&nbsp;${sessionScope.user.lastName}
252252
</span>
253253
</a>
@@ -529,6 +529,12 @@
529529
Menu
530530
</a>
531531
<ul aria-expanded="true">
532+
<li>
533+
<a href="${pageContext.request.contextPath}/pages/custom-components/menu/custom-bootstrap-dropdown-button">
534+
<i class="far fa-lg fa-fw fa-lightbulb"></i>
535+
Custom Bootstrap Dropdown Button
536+
</a>
537+
</li>
532538
<li>
533539
<a href="${pageContext.request.contextPath}/pages/custom-components/menu/horizontal-mega-menu">
534540
<i class="far fa-lg fa-fw fa-lightbulb"></i>

‎JavaTMP-Java-Ajax-Starter/web/WEB-INF/pages/custom-components/menu/custom-bootstrap-dropdown-button.jsp‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
<%@page contentType="text/html" pageEncoding="UTF-8"%>
2+
<div class="dynamic-ajax-content">
3+
<div class="page-header">
4+
<h1>Custom Bootstrap Dropdown Button</h1>
5+
</div>
6+
<div class="row">
7+
<div class="col">
8+
<div class="card">
9+
<div class="card-header">
10+
<div class="options float-right">
11+
<a href="#" class="settings"><i class="fa fa-cog"></i></a>
12+
<a href="#" class="collapse"><i class="fa fa-chevron-up"></i></a>
13+
<a href="#" class="reload"><i class="fa fa-sync"></i></a>
14+
<a href="#" class="fullscreen"><i class=" fa fa-expand"></i></a>
15+
<a href="#" class="remove"><i class="fa fa-times"></i></a>
16+
</div>
17+
</div>
18+
<div class="card-body">
19+
<h5 class="card-title text-primary">1. Default Setting and View</h5>
20+
<div class="dropdown m-1">
21+
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
22+
Dropdown button
23+
</button>
24+
<div class="dropdown-menu">
25+
<a class="dropdown-item" href="#">Action</a>
26+
<a class="dropdown-item" href="#">Another action</a>
27+
<div class="dropdown-divider"></div>
28+
<a class="dropdown-item" href="#">Something else here</a>
29+
</div>
30+
</div>
31+
<h5 class="card-title text-primary">2. Dropdown with caret off</h5>
32+
<div class="dropdown m-1">
33+
<button class="btn btn-primary dropdown-toggle bs-dd-caret-off" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
34+
...
35+
</button>
36+
<div class="dropdown-menu">
37+
<a class="dropdown-item" href="#">Action</a>
38+
<a class="dropdown-item" href="#">Another action</a>
39+
<div class="dropdown-divider"></div>
40+
<a class="dropdown-item" href="#">Something else here</a>
41+
</div>
42+
</div>
43+
<h5 class="card-title text-primary">3. Dropdown with Multi line button text button</h5>
44+
<div class="dropdown m-1">
45+
<button class="d-flex align-items-center text-left btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
46+
<span>Welcome,<small class="d-flex">Admistrator</small></span>
47+
</button>
48+
<div class="dropdown-menu">
49+
<a class="dropdown-item" href="#">Action</a>
50+
<a class="dropdown-item" href="#">Another action</a>
51+
<div class="dropdown-divider"></div>
52+
<a class="dropdown-item" href="#">Something else here</a>
53+
</div>
54+
</div>
55+
<h5 class="card-title text-primary">4. Dropdown with Multi line button text and image button</h5>
56+
<div class="dropdown d-inline-flex m-1">
57+
<button class="d-flex align-items-center text-left btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
58+
<img class="rounded-circle mr-1" src="assets/img/avatar/profile_pic_min.png" alt=""/>
59+
<span><small class="d-flex">Welcome</small>Admistrator</span>
60+
</button>
61+
<div class="dropdown-menu">
62+
<a class="dropdown-item" href="#">Action</a>
63+
<a class="dropdown-item" href="#">Another action</a>
64+
<div class="dropdown-divider"></div>
65+
<a class="dropdown-item" href="#">Something else here</a>
66+
</div>
67+
</div>
68+
<div class="dropdown d-inline-flex m-1">
69+
<button class="p-1 bs-dd-caret-off d-flex align-items-center btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
70+
<img class="" src="assets/img/avatar/profile_pic_min.png" alt=""/>
71+
</button>
72+
<div class="dropdown-menu">
73+
<a class="dropdown-item" href="#">Action</a>
74+
<a class="dropdown-item" href="#">Another action</a>
75+
<div class="dropdown-divider"></div>
76+
<a class="dropdown-item" href="#">Something else here</a>
77+
</div>
78+
</div>
79+
<h5 class="card-title text-primary">5. Dropdown with media object button</h5>
80+
<div class="dropdown d-inline-flex m-1">
81+
<button class="d-flex align-items-center btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
82+
<div class="media align-items-center">
83+
<img class="rounded-circle mr-1" src="assets/img/avatar/profile_pic_min.png" alt=""/>
84+
<div class="media-body">
85+
<span><small class="d-flex">Welcome</small>Admistrator</span>
86+
</div>
87+
</div>
88+
<!--
89+
-->
90+
</button>
91+
<div class="dropdown-menu">
92+
<a class="dropdown-item" href="#">Action</a>
93+
<a class="dropdown-item" href="#">Another action</a>
94+
<div class="dropdown-divider"></div>
95+
<a class="dropdown-item" href="#">Something else here</a>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
</div>
101+
</div>
102+
<!--
103+
Reference Your external Stylesheet file here
104+
if your feature or plugins could not support to run globally.
105+
<link href="components/" rel="stylesheet">
106+
-->
107+
<style type="text/css">
108+
/*
109+
Embed CSS styling for current page.
110+
*/
111+
.bs-dd-caret-off::before {
112+
display: none;
113+
}
114+
.bs-dd-caret-off::after {
115+
display: none;
116+
}
117+
</style>
118+
119+
<!--
120+
Reference Your external Javascript file here
121+
if your feature or plugins could not support to run globally.
122+
<script src="components/"></script>
123+
-->
124+
<script type="text/javascript">
125+
// You could write safely Javascript code here too as our template
126+
// should load mandatory libraries and plugins before.
127+
// <--- HERE --->
128+
//
129+
130+
jQuery(function ($) {
131+
// any code put here will be run after content attach to ajax output container and before
132+
// controll return to main javascript file.
133+
// <--- HERE --->
134+
//
135+
136+
$(javatmp.settings.defaultOutputSelector).on(javatmp.settings.javaTmpAjaxContainerReady, function (event) {
137+
// fire AFTER all transition done and your ajax content is shown to user.
138+
});
139+
140+
$(javatmp.settings.defaultOutputSelector).on(javatmp.settings.javaTmpContainerResizeEventName, function (event) {
141+
// fire when user resize browser window or sidebar hide / show
142+
});
143+
144+
$(javatmp.settings.defaultOutputSelector).on(javatmp.settings.cardFullscreenCompress, function (event, card) {
145+
// when card compress by pressing the top right tool button
146+
});
147+
148+
$(javatmp.settings.defaultOutputSelector).on(javatmp.settings.cardFullscreenExpand, function (event, card) {
149+
// when card Expand by pressing the top right tool button
150+
});
151+
152+
/**
153+
* When another sidebar menu item pressed and before container issues new ajax request.
154+
* You can cancel, destroy, or remove any thing here before replace main output ajax container.
155+
* return false or event.preventDefault() will cancel ajax and stay you in the current page and do nothing.
156+
**/
157+
$(javatmp.settings.defaultOutputSelector).on(javatmp.settings.javaTmpContainerRemoveEventName, function (event) {
158+
$(javatmp.settings.defaultOutputSelector).off(javatmp.settings.cardFullscreenCompress);
159+
$(javatmp.settings.defaultOutputSelector).off(javatmp.settings.cardFullscreenExpand);
160+
return true;
161+
});
162+
});
163+
</script>
164+
</div>

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-cerulean-rtl.min.css‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-cerulean.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-cosmo-rtl.min.css‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-cosmo.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-cyborg-rtl.min.css‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-cyborg.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-darkly-rtl.min.css‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaTMP-Java-Ajax-Starter/web/assets/dist/css/javatmp-darkly.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)