Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-slider, ui5-range-slider)Fiori Next Implementation #4132

Merged
merged 8 commits into from
Oct 21, 2021
Merged

feat(ui5-slider, ui5-range-slider)Fiori Next Implementation #4132

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ce43f02
Sliders Fiori Next Implementation
ndeshev Oct 20, 2021
b4b5023
Add new hover/active/focus styles
ndeshev Oct 20, 2021
9c9d23e
Fix handle hover border
ndeshev Oct 20, 2021
975064c
Fix Fiori 3 Interaction states
ndeshev Oct 20, 2021
9809925
Restore HTML markup
ndeshev Oct 20, 2021
843bf89
Add interaction states of the range slider handles
ndeshev Oct 21, 2021
ac363ae
Range slider interaction states CSS improvements
ndeshev Oct 21, 2021
31a4db1
Fix startpoint dot of the range slider, fix tooltip background to white
ndeshev Oct 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/main/src/SliderBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,7 +678,7 @@ class SliderBase extends UI5Element {
// There is a CSS bug with the 'currentcolor' value of a CSS gradient that does not
// respect the variable for more than one theme. It has to be set here for now.
const currentTheme = getTheme();
const tickmarkWidth = currentTheme === "sap_horizon" ? "2px" : "1px";
const tickmarkWidth = "1px";
const currentColor = SliderBase.TICKMARK_COLOR_MAP[currentTheme];

this._tickmarksAmount = `${maxStr - minStr} / ${stepStr}`;
Expand Down
74 changes: 62 additions & 12 deletions packages/main/src/themes/SliderBase.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@
top: -0.125rem;
}

:host([ui5-range-slider]) .ui5-slider-progress-container::before {
background-color: #8396A8;
}

.ui5-slider-progress-container::after {
display: var(--_ui5_slider_progress_container_dot_display);
content: "";
Expand Down Expand Up @@ -105,29 +109,77 @@
width: var(--_ui5_slider_handle_width);
}

.ui5-slider-handle--start, .ui5-slider-handle--end {
background: var(--_ui5_range_slider_handle_background);
.ui5-slider-handle:after {
display: var(--_ui5_slider_handle_icon_display);
font-family: var(--_ui5_slider_handle_font_family);
font-size: 14px;
font-weight: bold;
content: var(--_ui5_slider_handle_icon);
color: #2d8ae6;
position: relative;
top: 1px;
left: 9px;
vertical-align: middle;
}

.ui5-slider-handle:focus {
outline: var(--_ui5_slider_handle_outline);
outline-offset: var(--_ui5_slider_handle_outline_offset);
.ui5-slider-handle--start, .ui5-slider-handle--end {
background: var(--_ui5_range_slider_handle_background);
}

[dir="rtl"] .ui5-slider-handle {
margin-right: var(--_ui5_slider_handle_margin_left);
}

.ui5-slider-root:hover .ui5-slider-handle,
[dir="rtl"] .ui5-slider-handle:after {
right:9px;
left: 0;
}

.ui5-slider-root:hover .ui5-slider-handle:not(:focus), .ui5-slider-handle:hover {
background: var(--_ui5_slider_handle_hover_background);
border: var(--_ui5_slider_handle_hover_border);
}

.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle, .ui5-slider-inner .ui5-slider-handle:focus {
outline: var(--_ui5_slider_handle_outline);
outline-offset: var(--_ui5_slider_handle_outline_offset);
border: var(--_ui5_slider_handle_focus_border);
box-shadow: var(--_ui5_slider_handle_box_shadow_focus);
}

.ui5-slider-root:active .ui5-slider-handle, .ui5-slider-handle:active {
background: var(--_ui5_slider_handle_hover_background);
border-color: var(--_ui5_slider_handle_hover_border);
border: var(--_ui5_slider_handle_active_border);
}

.ui5-slider-root:hover .ui5-slider-handle--start, .ui5-slider-root:hover .ui5-slider-handle--end,
.ui5-slider-root:active .ui5-slider-handle--start, .ui5-slider-root:active .ui5-slider-handle--end,
.ui5-slider-handle--start:active, .ui5-slider-handle--end:active {
.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start,
.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle--end,
.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start,
.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle--end,
.ui5-slider-root .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:focus,
.ui5-slider-root .ui5-slider-inner .ui5-slider-handle--end:focus,
.ui5-slider-handle--start:active, .ui5-slider-handle--end:active {
background: var(--_ui5_range_slider_handle_hover_background);

}

.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:after,
.ui5-slider-root:hover .ui5-slider-inner .ui5-slider-handle--end:after,
.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:after,
.ui5-slider-root:active .ui5-slider-inner .ui5-slider-handle--end:after,
.ui5-slider-handle--start:active:after, .ui5-slider-handle--end:active:after,
.ui5-slider-root .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:focus:after,
.ui5-slider-root .ui5-slider-inner .ui5-slider-handle--end:focus:after {
display: none;
}

.ui5-slider-root .ui5-slider-inner .ui5-slider-handle.ui5-slider-handle--start:focus,
.ui5-slider-root .ui5-slider-inner .ui5-slider-handle--end:focus {
border: -_ui5_slider_handle_focus_border;
}

.ui5-slider-root:focus:hover .ui5-slider-handle, .ui5-slider-handle:focus:hover {
border: var(--_ui5_slider_handle_focus_border);
}

.ui5-slider-tooltip {
Expand All @@ -142,7 +194,6 @@
background: var(--_ui5_slider_tooltip_background);
border: var(--_ui5_slider_tooltip_border);
border-radius: var(--_ui5_slider_tooltip_border_radius);
box-shadow: var(--_ui5_slider_tooltip_box_shadow);
font-size: var(--_ui5_slider_tooltip_fontsize);
color: var(--_ui5_slider_tooltip_color);
height: var(--_ui5_slider_tooltip_height);
Expand All @@ -154,7 +205,6 @@
position: relative;
}


.ui5-slider-labels {
position: absolute;
top: 1rem;
Expand Down
13 changes: 7 additions & 6 deletions packages/main/src/themes/base/SliderBase-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,24 @@
--_ui5_slider_outer_height: 1.6875rem;
--_ui5_slider_progress_border_radius: 0.25rem;
--_ui5_slider_progress_background: var(--sapActiveColor);
--_ui5_slider_handle_icon_display: none;
--_ui5_slider_handle_height: 1.625rem;
--_ui5_slider_handle_width: 1.625rem;
--_ui5_slider_handle_border: solid 0.125rem var(--sapField_BorderColor);
--_ui5_slider_handle_border_radius: 1rem;
--_ui5_slider_handle_box_shadow: none;
--_ui5_slider_handle_box_shadow_focus: none;
--_ui5_slider_handle_background: var(--sapButton_Background);
/* --_ui5_range_slider_handle_background: rgba(var(--sapButton_Background), 0.25); - doesn't work on IE */
--_ui5_range_slider_handle_background: rgba(255, 255, 255, 0.25);
--_ui5_range_slider_handle_background: #FFF;
--_ui5_slider_handle_top: -0.825rem;
--_ui5_slider_handle_margin_left: -0.9725rem;
--_ui5_slider_handle_hover_background: var(--sapButton_Hover_Background);
--_ui5_slider_handle_hover_border: var(--sapButton_Hover_BorderColor);
--_ui5_slider_handle_hover_border: 2px solid var(--sapButton_Hover_BorderColor);
--_ui5_slider_handle_outline: 1px dotted var(--sapContent_FocusColor);
--_ui5_slider_handle_focus_border: var(--_ui5_slider_handle_hover_border);
--_ui5_slider_handle_active_border: var(--_ui5_slider_handle_hover_border);
--_ui5_slider_handle_outline_offset: 0.075rem;
/* --_ui5_range_slider_handle_hover_background: rgba(var(--sapButton_Background), 0.25); - doesn't work on IE */
--_ui5_range_slider_handle_hover_background: rgba(255, 255, 255, 0.25);
--_ui5_range_slider_handle_hover_background: rgba(var(--sapButton_Background), 0.25);
--_ui5_slider_progress_outline: 0.0625rem dotted var(--sapContent_FocusColor);
--_ui5_slider_progress_outline_offset: -0.8125rem;
--_ui5_slider_tickmark_color: #89919a;
Expand All @@ -36,7 +38,6 @@
--_ui5_slider_tooltip_border: 1px solid var(--_ui5_slider_tooltip_border_color);
--_ui5_slider_tooltip_padding: 0.4125rem;
--_ui5_slider_tooltip_height: 1rem;
--_ui5_slider_tooltip_box_shadow: none;
--_ui5_slider_tooltip_min_width: 2rem;
--_ui5_slider_tooltip_bottom: 2rem;
--_ui5_slider_label_fontsize: var(--sapFontSmallSize);
Expand Down
24 changes: 24 additions & 0 deletions packages/main/src/themes/sap_horizon/SliderBase-parameters.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,29 @@
@import "../base/SliderBase-parameters.css";

:root {
--_ui5_slider_progress_container_background: #D5DADD;
--_ui5_slider_progress_container_dot_display: block;
--_ui5_slider_inner_min_width: 4rem;
--_ui5_slider_progress_background: #1B90FF;
--_ui5_slider_handle_background: #FFF;
--_ui5_slider_handle_icon_display: inline-block;
--_ui5_slider_handle_border: 1px solid transparent;
--_ui5_slider_handle_border_radius: 0.5rem;
--_ui5_slider_handle_box_shadow: var(--sapContent_Selected_Shadow);
--_ui5_slider_handle_top: -0.563rem;
--_ui5_slider_handle_height: 1.5rem;
--_ui5_slider_handle_width: 2rem;
--_ui5_slider_handle_top: -0.75rem;
--_ui5_slider_handle_font_family: "SAP-icons";
--_ui5_slider_handle_hover_border: 1px solid var(--sapContent_Selected_ForegroundColor);
--_ui5_slider_handle_focus_border: 2px solid var(--sapContent_Selected_ForegroundColor);
--_ui5_slider_handle_active_border: var(--_ui5_slider_handle_focus_border);
--_ui5_slider_handle_outline: none:
--_ui5_slider_tooltip_background: #FFF;
--_ui5_slider_tooltip_border: none;
--_ui5_slider_tooltip_border_radius: 0.75rem;
--_ui5_slider_tooltip_color: #8396A8;
--_ui5_slider_handle_font_family: "SAP-icons";
--_ui5_slider_handle_icon: "\e244";
--_ui5_range_slider_handle_icon_hover:
}
2 changes: 1 addition & 1 deletion packages/main/test/pages/Slider.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ <h2>Event Testing Result Slider</h2>
<script>
const eventTargetSlider = document.getElementById("test-slider");
const eventResultSlider = document.getElementById("test-result-slider");

eventTargetSlider.addEventListener("ui5-input", () => {
eventResultSlider.setAttribute("value", parseInt(eventResultSlider.getAttribute("value")) + 1);
});
Expand Down