-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
User is able to select species specific search via Togglebutton (#814)
* Provide CSS based implementation of toggle button * Suggest change for enhanced usability --------- Co-authored-by: Sven Fillinger <[email protected]>
- Loading branch information
1 parent
5de2e98
commit ea71ecc
Showing
5 changed files
with
111 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
user-interface/frontend/themes/datamanager/components/toggle-button.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /*Adapted from example provided in | ||
| https://vaadin.com/forum/t/togglebutton-for-flow-3-0-0-vaadin-24-3-10-problem-with-applying-custom-css/166148/17*/ | ||
|
|
||
| /*Define checkbox width and height*/ | ||
| .toggle-button::part(checkbox) { | ||
| width: var(--lumo-size-m); | ||
| border-radius: 1em; | ||
| } | ||
|
|
||
| /*Button size and style within checkbox*/ | ||
| .toggle-button::part(checkbox)::after { | ||
| content: ""; | ||
| height: calc(var(--lumo-size-m) / 3); | ||
| background-color: var(--lumo-secondary-text-color); | ||
| border-radius: 1em; | ||
| inset: 0; | ||
| margin: calc(var(--lumo-size-m) / 12); | ||
| opacity: 1; | ||
| transition: transform 0.3s; | ||
| width: calc(var(--lumo-size-m) / 3); | ||
| } | ||
|
|
||
| /*After the checkbox is pressed, move the button to the right and change color*/ | ||
| .toggle-button[checked]::part(checkbox)::after { | ||
| background-color: var(--lumo-primary-contrast-color); | ||
| transform: translateX(calc(var(--lumo-size-m) / 2)); | ||
| } |
Binary file not shown.
77 changes: 77 additions & 0 deletions
77
user-interface/src/main/java/life/qbic/datamanager/views/general/ToggleButton.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,77 @@ | ||
| package life.qbic.datamanager.views.general; | ||
|
|
||
| import com.vaadin.flow.component.checkbox.Checkbox; | ||
|
|
||
| /** | ||
| * Custom Toggle Button adapted via css from the default {@link Checkbox} component | ||
| */ | ||
| public class ToggleButton extends Checkbox { | ||
|
|
||
| private static final Boolean DEFAULT_IS_ENABLED = Boolean.FALSE; | ||
|
|
||
| private ToggleButton() { | ||
| addClassName("toggle-button"); | ||
| this.setValue(DEFAULT_IS_ENABLED); | ||
| } | ||
|
|
||
| /** | ||
| * Creates a plain toggle button with no label and is toggled off by default. | ||
| * | ||
| * @return an instance of {@link ToggleButton} | ||
| * @since 1.4.0 | ||
| */ | ||
| public static ToggleButton create() { | ||
| return new ToggleButton(); | ||
| } | ||
|
|
||
| /** | ||
| * Sames as {@link ToggleButton#create()}, but also sets a label for the button directly. | ||
| * | ||
| * @param label the label for the toggle button | ||
| * @return an instance of {@link ToggleButton} with a label | ||
| * @since 1.0.0 | ||
| */ | ||
| public static ToggleButton createWithLabel(String label) { | ||
| var toggleButton = create(); | ||
| toggleButton.setLabel(label); | ||
| return toggleButton; | ||
| } | ||
|
|
||
| /** | ||
| * Toggles the button to its <code>ON</code> status. | ||
| * | ||
| * @since 1.4.0 | ||
| */ | ||
| public void toggleOn() { | ||
| setValue(false); | ||
| } | ||
|
|
||
| /** | ||
| * Toggles the button to its <code>ON</code> status. | ||
| * | ||
| * @since 1.4.0 | ||
| */ | ||
| public void toggleOff() { | ||
| setValue(true); | ||
| } | ||
|
|
||
| /** | ||
| * Indicates, if the toggle button is set to <code>ON</code> position | ||
| * | ||
| * @return true, if the button is in <code>ON</code> position, else returns false | ||
| * @since 1.4.0 | ||
| */ | ||
| public boolean isOn() { | ||
| return getValue(); | ||
| } | ||
|
|
||
| /** | ||
| * Indicates, if the toggle button is set to <code>OFF</code> position | ||
| * | ||
| * @return true, if the button is in <code>OFF</code> position | ||
| * @since 1.4.0 | ||
| */ | ||
| public boolean isOff() { | ||
| return !isEnabled(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters