fix theme: link
* add .btn class and .btn-link class to button.tobago-link HTML component
* fix cursor 'not-allowed' for disabled links (and buttons)
* refactor tobago-dropdown-submenu
* fix button.tobago-link inside titles (like h1, h2, ...)
* cleanup
* adjust tests
diff --git a/tobago-core/npm/scss/_tobago.scss b/tobago-core/npm/scss/_tobago.scss
index 09b9e50..b5a9a6a 100644
--- a/tobago-core/npm/scss/_tobago.scss
+++ b/tobago-core/npm/scss/_tobago.scss
@@ -40,6 +40,23 @@
$page-padding-top: 1rem;
/* main ---------------------------------------------------------- */
+@mixin buttonLinkDisabledCursor() {
+ &:disabled {
+ pointer-events: auto;
+
+ &:hover {
+ cursor: not-allowed;
+ }
+ }
+}
+
+@mixin dropdownMenuFormCheckComponents() {
+ .dropdown-menu .form-check {
+ /* move form-check components to the right, so checkbox/radio buttons are inside dropdown-menu */
+ padding-left: (($dropdown-item-padding-x ) + ($form-check-padding-left / 1em))
+ }
+}
+
@mixin linkWithoutUnderline() {
> .tobago-link {
text-decoration: none;
@@ -143,10 +160,11 @@
}
}
-tobago-links {
+/* button, link ------------------------------------------------------- */
+.tobago-button {
+ @include buttonLinkDisabledCursor();
}
-/* button, link ------------------------------------------------------- */
.tobago-button, .tobago-link {
> img + span {
margin-left: .4em;
@@ -401,63 +419,25 @@
h1, h2, h3, h4, h5, h6 {
button.tobago-link {
+ font-size: inherit;
font-weight: inherit;
}
}
button {
- &.tobago-link {
- color: $blue;
- border-width: 0;
+ &.tobago-link.btn {
+ @include buttonLinkDisabledCursor();
+
padding: 0;
- background-color: transparent;
- text-align: left;
+ vertical-align: baseline;
- &:focus, &:hover {
- color: $link-hover-color;
- cursor: pointer;
- outline: none;
- text-decoration: underline;
- }
-
- &:disabled {
- color: $nav-link-disabled-color;
-
- &:hover {
- cursor: not-allowed;
- text-decoration: none;
- }
-
- > img {
- opacity: .65;
- }
+ &:focus {
+ box-shadow: none;
}
}
&.tobago-link.dropdown-item {
- padding: $dropdown-item-padding-y $dropdown-item-padding-x;
- color: $dropdown-link-color;
- text-align: inherit;
- white-space: nowrap;
-
- &:active {
- color: $dropdown-link-active-color;
- }
-
- &:focus, &:hover {
- cursor: pointer;
- text-decoration: none;
- }
-
- &:disabled {
- color: $dropdown-link-disabled-color;
- }
- }
-
- &.tobago-link.dropdown-toggle {
- &:focus, &:hover {
- text-decoration: none;
- }
+ @include buttonLinkDisabledCursor();
}
&.nav-link { /* bootstrap don't know button.nav-link*/
@@ -470,12 +450,7 @@
padding-right: 0;
}
-span.dropdown {
- display: inline-block;
-}
-
-.dropdown > .btn.dropdown-toggle {
- width: 100%;
+tobago-links {
}
/* messages / help text ----------------------------------------------- */
@@ -553,13 +528,6 @@
/* nav ----------------------------------------------------------- */
-/* styles for drop down menu first level */
-.dropdown-toggle {
- &:focus, &:hover {
- text-decoration: none;
- }
-}
-
/* no bottom border in navtabs, if panel-body under it */
.nav-tabs {
border-bottom-width: 0;
@@ -581,103 +549,35 @@
/* dropdown ------------------------------------------------------- */
tobago-dropdown {
- display: inline-block;
-}
+ @include dropdownMenuFormCheckComponents();
-tobago-dropdown, .tobago-page-menuStore {
- .tobago-dropdown-selected {
- color: $dropdown-link-hover-color;
- text-decoration: none;
- @include gradient-bg($dropdown-link-hover-bg);
- }
-}
-
-ul > tobago-dropdown {
- display: list-item;
-}
-
-.dropdown-menu {
- .form-check {
- padding-left: 0;
-
- .form-check-label.dropdown-item {
- // todo check! this was BS4: padding-left: ($custom-control-gutter + $custom-control-indicator-size) + $dropdown-item-padding-x;
- padding-left: ($spacer * 1.5 + $spacer) + $dropdown-item-padding-x;
-
- &:before {
- top: (($font-size-base * $line-height-base - $spacer) / 2) + $dropdown-item-padding-y;
- left: $dropdown-item-padding-x;
- }
-
- &:after {
- top: (($font-size-base * $line-height-base - $spacer) / 2) + $dropdown-item-padding-y;
- left: $dropdown-item-padding-x;
- }
- }
- }
-}
-
-/* dropdown-submenu ------------------------------------------------------- */
-
-.tobago-dropdown-submenu {
- cursor: pointer;
- position: relative;
- width: 100%;
-
- &:active {
- > button.tobago-link {
- color: $dropdown-link-active-color;
- }
- }
-
- > .dropdown-menu {
- top: 0;
- left: 100%;
- margin-top: -6px;
- margin-left: -1px;
- border-radius: 6px 6px 6px 6px;
- }
-
- > button:after {
- display: none;
- }
-
- > button.tobago-link {
- color: $dropdown-link-color;
-
- &:focus, &:hover {
- text-decoration: none;
- }
- }
-
- &:after {
- content: " ";
+ &.tobago-dropdown-submenu {
+ cursor: pointer;
+ position: relative;
+ width: 100%;
float: right;
- border-color: transparent;
- border-style: solid;
- border-width: 5px 0 5px 5px;
- border-left-color: #cccccc;
- margin-top: 7px;
- margin-right: -10px;
- }
- &:hover, &.tobago-dropdown-open {
- > .dropdown-menu {
- display: block;
+ &:hover {
+ background-color: $dropdown-link-hover-bg;
- > a:after {
- border-left-color: $dropdown-bg;
+ > .dropdown-menu {
+ display: block;
+ top: 0;
+ left: 100%;
+ margin-top: -0.5rem;
+ margin-left: -1px;
}
}
- }
- &.pull-left {
- float: none;
-
- > .dropdown-menu {
- left: -100%;
- margin-left: 10px;
- border-radius: 6px 0 6px 6px;
+ > .dropdown-item::after {
+ content: " ";
+ float: right;
+ border-color: transparent;
+ border-style: solid;
+ border-width: 5px 0 5px 5px;
+ border-left-color: #cccccc;
+ margin-top: 7px;
+ margin-right: -10px;
}
}
}
@@ -1621,6 +1521,8 @@
/* menuStore -------------------------------------------------------- */
.tobago-page-menuStore {
+ @include dropdownMenuFormCheckComponents();
+
position: absolute;
top: 0;
left: 0;
@@ -1682,3 +1584,7 @@
custom styling is much more complicated. */
margin-bottom: 1rem;
}
+
+.tobago-dropdown-open, .tobago-dropdown-select {
+ // deprecated; must be added for test
+}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
index 504ef87..5dd94b6 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/CommandRendererBase.java
@@ -115,7 +115,7 @@
getRendererCssClass(),
getRendererCssClass().createMarkup(component.getMarkup()),
getCssItems(facesContext, component),
- !parentOfCommands && dropdownSubmenu ? BootstrapClass.DROPDOWN_ITEM : null,
+ dropdownSubmenu ? BootstrapClass.DROPDOWN_ITEM : null,
parentOfCommands && !dropdownSubmenu ? BootstrapClass.DROPDOWN_TOGGLE : null,
component.getCustomClass(),
isInside(facesContext, HtmlElements.TOBAGO_LINKS) ? BootstrapClass.NAV_LINK : null);
@@ -228,9 +228,7 @@
writer.startElement(HtmlElements.TOBAGO_DROPDOWN);
writer.writeIdAttribute(clientId);
- writer.writeClassAttribute(
- dropdownSubmenu ? TobagoClass.DROPDOWN__SUBMENU : BootstrapClass.DROPDOWN,
- dropdownSubmenu ? BootstrapClass.DROPDOWN_ITEM : null);
+ writer.writeClassAttribute(dropdownSubmenu ? TobagoClass.DROPDOWN__SUBMENU : BootstrapClass.DROPDOWN);
}
}
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java
index bc6a83d..3bc9903 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/internal/renderkit/renderer/LinkRenderer.java
@@ -24,6 +24,7 @@
import org.apache.myfaces.tobago.renderkit.css.BootstrapClass;
import org.apache.myfaces.tobago.renderkit.css.CssItem;
import org.apache.myfaces.tobago.renderkit.css.TobagoClass;
+import org.apache.myfaces.tobago.renderkit.html.HtmlElements;
import javax.faces.context.FacesContext;
@@ -36,9 +37,14 @@
@Override
protected CssItem[] getCssItems(final FacesContext facesContext, final T command) {
+ final boolean disabled = command.isDisabled();
+ final boolean anchor = (command.getLink() != null || command.getOutcome() != null) && !disabled;
+ final boolean dropdownSubmenu = isInside(facesContext, HtmlElements.COMMAND);
final Markup markup = command.getMarkup() != null ? command.getMarkup() : Markup.NULL;
return new CssItem[]{
+ !anchor && !dropdownSubmenu ? BootstrapClass.BTN : null,
+ !anchor && !dropdownSubmenu ? BootstrapClass.BTN_LINK : null,
BootstrapClass.textColor(markup),
BootstrapClass.fontStyle(markup)
};
diff --git a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
index 42403f3..6921a94 100644
--- a/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
+++ b/tobago-core/src/main/java/org/apache/myfaces/tobago/renderkit/css/TobagoClass.java
@@ -125,7 +125,15 @@
COLLAPSED("tobago-collapsed"),
DATE("tobago-date"),
DATE__PICKER("tobago-date-picker"),
+ /**
+ * @deprecated since 5.0.0
+ */
+ @Deprecated
DROPDOWN__OPEN("tobago-dropdown-open"),
+ /**
+ * @deprecated since 5.0.0
+ */
+ @Deprecated
DROPDOWN__SELECTED("tobago-dropdown-selected"),
FILE("tobago-file"),
FIGURE("tobago-figure"),
diff --git a/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html b/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html
index a1a424d..3e2a0d0 100644
--- a/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/booleanInsideLink.html
@@ -16,7 +16,7 @@
-->
<tobago-dropdown id='id' class='dropdown'>
- <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+ <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
<div class='dropdown-menu' aria-labelledby='id::command' name='id'>
<tobago-select-boolean-checkbox id='id' class='form-check dropdown-item'>
<input class='form-check-input' type='checkbox' value='true' name='id' id='id::field'>
diff --git a/tobago-core/src/test/resources/renderer/link/manyInsideLink.html b/tobago-core/src/test/resources/renderer/link/manyInsideLink.html
index 887b42e..9601fe6 100644
--- a/tobago-core/src/test/resources/renderer/link/manyInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/manyInsideLink.html
@@ -16,7 +16,7 @@
-->
<tobago-dropdown id='id' class='dropdown'>
- <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+ <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
<div class='dropdown-menu' aria-labelledby='id::command' name='id'>
<tobago-select-many-checkbox>
<div class='form-check dropdown-item'>
diff --git a/tobago-core/src/test/resources/renderer/link/radioInsideLink.html b/tobago-core/src/test/resources/renderer/link/radioInsideLink.html
index f982168..f3e71c6 100644
--- a/tobago-core/src/test/resources/renderer/link/radioInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/radioInsideLink.html
@@ -16,7 +16,7 @@
-->
<tobago-dropdown id='id' class='dropdown'>
- <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+ <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
<div class='dropdown-menu' aria-labelledby='id::command' name='id'>
<tobago-select-one-radio>
<div class='form-check dropdown-item'>
diff --git a/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html b/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html
index e21ff09..43674b2 100644
--- a/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html
+++ b/tobago-core/src/test/resources/renderer/link/separatorInsideLink.html
@@ -16,7 +16,7 @@
-->
<tobago-dropdown id='id' class='dropdown'>
- <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
+ <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>dropdown</span></button>
<div class='dropdown-menu' aria-labelledby='id::command' name='id'>
<a id='link1' name='link1' href='https://www.apache.org/' class='tobago-link dropdown-item'><tobago-behavior event='click' client-id='link1' omit='omit'></tobago-behavior><span>Link 1</span></a>
<tobago-separator id='separator' class='dropdown-divider'>
diff --git a/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html b/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html
index 294ae20..9a04122 100644
--- a/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html
+++ b/tobago-core/src/test/resources/renderer/links/link-inside-links-sub.html
@@ -21,7 +21,7 @@
<ul class='nav'>
<li class='nav-item'>
<tobago-dropdown id='id' class='dropdown'>
- <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link dropdown-toggle nav-link'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>apache</span></button>
+ <button type='button' id='id::command' name='id' data-toggle='dropdown' class='tobago-link btn btn-link dropdown-toggle nav-link'><tobago-behavior event='click' client-id='id' field-id='id::command'></tobago-behavior><span>apache</span></button>
<div class='dropdown-menu' aria-labelledby='id::command' name='id'>
<a id='sub' name='sub' href='https://www.apache.org/' class='tobago-link dropdown-item nav-link'><tobago-behavior event='click' client-id='sub' omit='omit'></tobago-behavior><span>sub</span></a>
</div>
