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

Jump to bottom

feat: Adapt time to fiori3 #801

Merged
merged 20 commits into from
Apr 24, 2020
Merged

feat: Adapt time to fiori3 #801

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
0c1e380
New Time component design fiori3 consistent
JKMarkowski Mar 20, 2020
03934f8
feat (time): Add docs styles, put tablet mode
JKMarkowski Mar 23, 2020
a7d7885
feat (time) Change docs
JKMarkowski Mar 23, 2020
821334d
Add new way to handle current state
JKMarkowski Mar 24, 2020
980d774
Add overflo
JKMarkowski Mar 24, 2020
673cc0b
fix issue with overflow and zindex
JKMarkowski Mar 24, 2020
2d2f55d
Add time examples with scrollable elements
JKMarkowski Mar 25, 2020
06afadf
Add test cases
JKMarkowski Mar 25, 2020
5df894e
Support rtl mode
JKMarkowski Mar 25, 2020
85809d1
Update test images ref
JKMarkowski Mar 25, 2020
306ed0d
Time Picker docs change
JKMarkowski Mar 25, 2020
8a0a5f1
documentation
JKMarkowski Mar 25, 2020
35b923a
Add documentation
JKMarkowski Mar 25, 2020
125ee94
Update Styles
JKMarkowski Mar 26, 2020
8410817
Update time picker icon
JKMarkowski Mar 26, 2020
80e8213
Add text truncation, add missing reset for elements
JKMarkowski Apr 15, 2020
b56a88b
Update ref images
JKMarkowski Apr 15, 2020
abbad44
Add mixins, apply max-width on label
JKMarkowski Apr 17, 2020
692b008
Remove label from markup, improve code
JKMarkowski Apr 22, 2020
3541f5c
Add ref images
JKMarkowski Apr 22, 2020
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
5 changes: 5 additions & 0 deletions docs/_sass/_docs-time.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.docs-time-wrapper {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
}
1 change: 1 addition & 0 deletions docs/css/docs-all.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
@import "docs-utils";
@import "docs-general";
@import "docs-top-nav";
@import "docs-time";
@import "docs-side-nav";
@import "docs-right-nav";
@import "docs-search-box";
Expand Down
790 changes: 663 additions & 127 deletions docs/pages/components/time.md
View file
Open in desktop

Large diffs are not rendered by default.

338 changes: 245 additions & 93 deletions docs/pages/patterns/time-picker.md
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 9 additions & 0 deletions src/mixins/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,3 +381,12 @@
overflow: hidden;
white-space: nowrap;
}

@mixin fd-remove-scrollbar {
&::-webkit-scrollbar {
display: none; // hide scrollbar but keep element scrollable for Chrome/Safari/Opera
}

-ms-overflow-style: none; // hide scrollbar but keep element scrollable for IE/Edge
scrollbar-width: none; // hide scrollbar on firefox
}
237 changes: 224 additions & 13 deletions src/time.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,242 @@ $block: #{$fd-namespace}-time;
.#{$block} {
@include fd-reset();

width: 184px; // Quick fix to solve overflow issue
$fd-time-item-height: 2.875rem;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be 2 rem for cozy mode, it only gets bigger for smaller applications like tablet and phone

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @stefan-sto compact mode has 2rem, default one has 2.875rem

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@JKMarkowski I think this is the wrong Stefano ;)

$fd-time-wrapper-height: 7 * $fd-time-item-height;
$fd-time-item-compact-height: 2rem;
$fd-time-wrapper-compact-height: 7 * $fd-time-item-compact-height;
$fd-time-dropdown-padding: 1rem;
$fd-time-dropdown-compact-padding: 0.5rem;
$fd-time-column-margin-x: 0.5rem;
$fd-time-item-width: 3rem;

&__item {
@include fd-flex() {
justify-content: center;
}

padding: $fd-time-dropdown-padding;

&__col {
@include fd-reset();

display: inline-block;
max-width: fd-space(10);
text-align: center;
margin-right: fd-space(1);
@include fd-flex-vertical-center() {
flex-direction: column;
}

margin-right: $fd-time-column-margin-x;

&:last-child {
margin-right: 0;
}
}

&__current-indicator {
@include fd-reset();

position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
box-sizing: border-box;
width: $fd-time-item-width;
height: $fd-time-item-height;
border: 0.0625rem solid var(--sapList_SelectionBorderColor);
border-radius: var(--sapButton_BorderCornerRadius);
}

&__wrapper {
@include fd-reset();

@include fd-flex-center() {
flex-direction: column;
}

overflow: hidden;
position: relative;
flex: 1 1 auto;
width: $fd-time-item-width;

&--active {
max-height: $fd-time-wrapper-height;
height: $fd-time-wrapper-height;
justify-content: initial;
}

&--meridian {
.#{$block}__item {
&:first-child {
margin-top: $fd-time-item-height * 3;
}

&:last-child {
margin-bottom: $fd-time-item-height * 3;
}
}

.#{$block}__list {
height: $fd-time-wrapper-height;
}
}
}

&__item {
@include fd-reset();
@include fd-flex-center();

cursor: default;
width: $fd-time-item-width;
height: $fd-time-item-height;
min-height: $fd-time-item-height;
border-radius: var(--sapButton_BorderCornerRadius);
background-color: var(--sapLegend_WorkingBackground);
border: 0.0625rem solid var(--sapList_Background);

&:hover {
background-color: var(--sapList_Hover_Background);
}

&:active {
background-color: var(--sapContent_Selected_Background);
border-color: transparent;
color: var(--sapContent_Selected_TextColor);
}

&--current {
border-color: var(--sapList_SelectionBorderColor);
background-color: var(--sapList_Background);

&:hover {
background-color: var(--sapList_Hover_Background);
}

&:active {
background-color: var(--sapContent_Selected_Background);
border-color: transparent;
color: var(--sapContent_Selected_TextColor);
}
}

&--collapsed {
background-color: var(--sapContent_Selected_Background);
color: var(--sapContent_Selected_TextColor);
border-color: transparent;

&:hover {
background-color: var(--sapContent_Selected_Hover_Background);
}
}

// Spacing and narrower side padding for child inputs
.#{$block}__input {
margin: fd-space(2) 0;
padding-left: fd-space(2);
padding-right: fd-space(2);
text-align: center;
width: 100%;
&--hidden {
visibility: hidden;
}
}

&__unit {
@include fd-reset();
@include fd-ellipsis();

text-align: center;
color: inherit;
display: block;
width: 100%;
height: 100%;
z-index: 2;
line-height: $fd-time-item-height;
}

&__list {
@include fd-reset();
@include fd-remove-scrollbar();

overflow: hidden;
}

&__slider-label {
@include fd-form-label();

line-height: $fd-time-item-compact-height;
height: $fd-time-item-compact-height;
font-size: var(--sapFontSmallSize);
max-width: $fd-time-item-width;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
padding: 0;
margin: 0;

@include fd-rtl() {
padding: 0;
margin: 0;
}
}

&__control {
@include fd-reset();
}

&--tablet {
padding: $fd-time-dropdown-compact-padding;

.#{$block}__item {
height: $fd-time-item-height;
min-height: $fd-time-item-height;
}
}

&--compact {
padding: $fd-time-dropdown-compact-padding;

.#{$block}__item {
height: $fd-time-item-compact-height;
min-height: $fd-time-item-compact-height;
}

.#{$block}__wrapper {
.#{$block}__current-indicator {
height: $fd-time-item-compact-height;
}

&.#{$block}__wrapper--active {
max-height: $fd-time-wrapper-compact-height;
height: $fd-time-wrapper-compact-height;
}

&.#{$block}__wrapper--meridian {
.#{$block}__item {
&:first-child {
margin-top: $fd-time-item-compact-height * 3;
}

&:last-child {
margin-bottom: $fd-time-item-compact-height * 3;
}
}

.#{$block}__list {
height: $fd-time-wrapper-compact-height;
}
}
}

.#{$block}__unit {
line-height: $fd-time-item-compact-height;
}
}

&--scrollable {
.#{$block}__list {
overflow: auto;
}
}

@include fd-rtl() {
.#{$block}__col {
margin-right: 0;
margin-left: $fd-time-column-margin-x;

&:last-child {
margin-left: 0;
}
}
}
}
6 changes: 1 addition & 5 deletions src/tokenizer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ $block: #{$fd-namespace}-tokenizer;
align-items: center;

&__inner {
&::-webkit-scrollbar {
display: none; // hide scrollbar but keep element scrollable for Chrome/Safari/Opera
}
@include fd-remove-scrollbar();

padding: 0 $fd-tokenizer-spacing;
overflow: hidden;
Expand All @@ -26,8 +24,6 @@ $block: #{$fd-namespace}-tokenizer;
display: flex;
align-items: center;
justify-content: flex-end;
-ms-overflow-style: none; // hide scrollbar but keep element scrollable for IE/Edge
scrollbar-width: none; // hide scrollbar on firefox
}

.fd-token {
Expand Down
32 changes: 22 additions & 10 deletions test/templates/time/component.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,32 @@ time:
{%- macro time(properties={}, modifier=[], aria=[]) -%}
<div class="fd-time{{ modifier | modifier('time') }}"{{ aria | aria }}>
{%- for item in properties.items %}
{{ time_item(item) }}
<div class="fd-time__col">
<label class="fd-time__slider-label fd-form-label">{{item.label}}</label>
{%- if item.active %}
<button class="btn-playground"></button>
{%- endif %}
<div class="fd-time__wrapper{{ ' fd-time__wrapper--active' if item.active }}{{' fd-time__wrapper--meridian' if item.meridian}}">
<ul class="fd-time__list">
{{ time_item(item) }}
</ul>
</div>
{%- if item.active %}
<button class="btn-playground"></button>
{%- endif %}
</div>
{%- endfor %}
</div>
{%- endmacro %}

{%- macro time_item(properties={}) -%}
{%- set _id = utils.id() %}
<div class="fd-time__item">
<div class="fd-time__control">
<button class="btn-playground"></button>
</div>
<input class="fd-time__input input-playground input-playground--full-width" type="text" placeholder="{{properties.placeholder}}" value="{{properties.value}}" id="{{ _id }}" aria-label="{{properties.label | capitalize }}"/>
<div class="fd-time__control">
<button class="btn-playground"></button>
</div>
</div>
{%- for item in properties.values %}
<li class="fd-time__item{{' fd-time__item--collapsed' if properties.values.length === 1}}">
<span class="fd-time__unit">{{item.item}}</span>
{%- if item.current %}
<div class="fd-time__current-indicator"></div>
{%- endif %}
</li>
{%- endfor %}
{%- endmacro %}
Loading