Skip to content

Commit 5e6a3ce

Browse files
JoaoFerreira-FrontEndJoaoFerreira-FrontEnd
authored
Merge pull request #1134 from OutSystems/ROU-12666
ROU-12666: Make Pickers preview react to icon library
2 parents ea3b2e0 + cd36c76 commit 5e6a3ce

7 files changed

Lines changed: 114 additions & 133 deletions

File tree

‎src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker.scss‎

Lines changed: 64 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
/// Import Flatpickr library styles
77
@import '../../../../../Providers/OSUI/SharedProviderResources/Flatpickr/scss/flatpickr';
88

9-
@import 'datepicker_ss_preview_imgs';
10-
119
///
1210
.osui-datepicker {
1311
input {
@@ -51,9 +49,6 @@
5149
// Service Studio Preview
5250
& {
5351
-servicestudio-background-color: get-background-color('neutral-0');
54-
-servicestudio-background-position: top center;
55-
-servicestudio-background-repeat: no-repeat;
56-
-servicestudio-background-size: contain;
5752
-servicestudio-border-radius: var(--border-radius-soft);
5853
-servicestudio-border: var(--border-size-s) solid get-border-color('neutral-5');
5954
-servicestudio-display: inline-block;
@@ -65,39 +60,86 @@
6560
-servicestudio-width: 100%;
6661
-servicestudio-z-index: var(--layer-local-tier-1);
6762

63+
&:before,
64+
&:after {
65+
-servicestudio-color: var(--color-indigo);
66+
-servicestudio-font-family: var(--osui-icon-font-family);
67+
-servicestudio-position: absolute;
68+
-servicestudio-height: 34px;
69+
-servicestudio-top: var(--space-m);
70+
-servicestudio-width: 34px;
71+
}
72+
73+
&:before {
74+
-servicestudio-content: var(--osui-icon-arrow-left);
75+
-servicestudio-right: var(--space-xl);
76+
}
77+
78+
&:after {
79+
-servicestudio-content: var(--osui-icon-arrow-right);
80+
-servicestudio-right: var(--space-s);
81+
}
82+
83+
.osui-datepicker-calendar-ss-preview--time,
84+
.osui-datepicker-calendar-ss-preview--today{
85+
-servicestudio-display: none;
86+
}
87+
88+
&.time12h,
89+
&.time24h {
90+
.osui-datepicker-calendar-ss-preview--time {
91+
-servicestudio-text-align: center;
92+
-servicestudio-display: block;
93+
-servicestudio-margin-bottom: var(--space-s);
94+
-servicestudio-position: relative;
95+
}
96+
}
97+
98+
&.time12h .osui-datepicker-calendar-ss-preview--time::before {
99+
-servicestudio-background-color: var(--color-indigo);
100+
-servicestudio-border-radius: var(--border-radius-soft);
101+
-servicestudio-color: var(--color-neutral-0);
102+
-servicestudio-content: "am";
103+
-servicestudio-font-size: var(--font-size-xs);
104+
-servicestudio-font-weight: var(--font-semi-bold);
105+
-servicestudio-height: var(--space-base);
106+
-servicestudio-line-height: var(--space-base);
107+
-servicestudio-position: absolute;
108+
-servicestudio-right: var(--space-s);
109+
-servicestudio-top: 50%;
110+
-servicestudio-transform: translateY(-50%) translateX(-50%);
111+
-servicestudio-vertical-align: middle;
112+
-servicestudio-width: var(--space-xl);
113+
}
114+
115+
68116
// If has not today btn
69117
&:not(.has-today-btn) {
70118
&.single {
71-
-servicestudio-background-image: $calendar_single_img_base64;
72-
-servicestudio-height: 310px;
73-
}
74-
75-
&.time12h {
76-
-servicestudio-background-image: $calendar_time12h_img_base64;
77-
-servicestudio-height: 344px;
119+
-servicestudio-height: 360px;
78120
}
79121

122+
&.time12h,
80123
&.time24h {
81-
-servicestudio-background-image: $calendar_time24h_img_base64;
82-
-servicestudio-height: 344px;
124+
-servicestudio-height: 394px;
83125
}
84126
}
85127

86128
// If has today btn
87129
&.has-today-btn {
88130
&.single {
89-
-servicestudio-background-image: $calendar_single_hasToday_img_base64;
90-
-servicestudio-height: 344px;
131+
-servicestudio-height: 394px;
91132
}
92133

93-
&.time12h {
94-
-servicestudio-background-image: $calendar_time12h_hasToday_img_base64;
95-
-servicestudio-height: 390px;
134+
&.time12h,
135+
&.time24h {
136+
-servicestudio-height: 440px;
96137
}
97138

98-
&.time24h {
99-
-servicestudio-background-image: $calendar_time24h_hasToday_img_base64;
100-
-servicestudio-height: 390px;
139+
.osui-datepicker-calendar-ss-preview--today{
140+
display:block;
141+
text-align: center;
142+
font-size: var(--font-size-s);
101143
}
102144
}
103145

@@ -127,45 +169,3 @@
127169
-servicestudio-margin-top: -22px;
128170
}
129171
}
130-
131-
// If Hybrid IDE
132-
///
133-
html[data-uieditorversion^='1'] {
134-
.osui-datepicker-calendar-ss-preview {
135-
// If has not today btn
136-
&:not(.has-today-btn) {
137-
&.single {
138-
-servicestudio-padding-top: min(300px, 100%);
139-
-servicestudio-height: 0;
140-
}
141-
142-
&.time12h {
143-
-servicestudio-padding-top: min(344px, 100%);
144-
-servicestudio-height: 0;
145-
}
146-
147-
&.time24h {
148-
-servicestudio-padding-top: min(344px, 100%);
149-
-servicestudio-height: 0;
150-
}
151-
}
152-
153-
// If has today btn
154-
&.has-today-btn {
155-
&.single {
156-
-servicestudio-padding-top: min(344px, 100%);
157-
-servicestudio-height: 0;
158-
}
159-
160-
&.time12h {
161-
-servicestudio-padding-top: min(390px, 100%);
162-
-servicestudio-height: 0;
163-
}
164-
165-
&.time24h {
166-
-servicestudio-padding-top: min(390px, 100%);
167-
-servicestudio-height: 0;
168-
}
169-
}
170-
}
171-
}

‎src/scripts/OSFramework/OSUI/Pattern/DatePicker/scss/_datepicker_ss_preview_imgs.scss‎

Lines changed: 0 additions & 19 deletions
This file was deleted.

‎src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker.scss‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
/// Import Flatpickr library styles
77
@import '../../../../../Providers/OSUI/Monthpicker/Flatpickr/scss/_flatpickr.scss';
88

9-
@import 'monthpicker_ss_preview_image';
10-
119
///
1210
.osui-monthpicker {
1311
// Service Studio Preview Container Styles
@@ -16,19 +14,10 @@
1614

1715
// Service Studio Preview
1816
& {
19-
-servicestudio-background-image: $monthpicker_img_base64;
20-
-servicestudio-background-position: top center;
21-
-servicestudio-background-repeat: no-repeat;
22-
-servicestudio-background-size: contain;
2317
-servicestudio-display: inline-block;
24-
-servicestudio-height: 0;
25-
-servicestudio-margin-left: -3px;
2618
-servicestudio-margin-top: 2px;
27-
-servicestudio-max-width: 320px;
2819
-servicestudio-overflow: hidden;
29-
-servicestudio-padding-top: min(250px, 100%);
3020
-servicestudio-position: relative;
31-
-servicestudio-width: 100%;
3221
-servicestudio-z-index: var(--layer-local-tier-1);
3322

3423
& + .placeholder-ss-preview {
@@ -37,6 +26,26 @@
3726
-servicestudio-overflow: hidden;
3827
-servicestudio-width: 100%;
3928
}
29+
30+
&:before,
31+
&:after {
32+
-servicestudio-color: var(--color-indigo);
33+
-servicestudio-font-family: var(--osui-icon-font-family);
34+
-servicestudio-position: absolute;
35+
-servicestudio-height: 34px;
36+
-servicestudio-top: var(--space-m);
37+
-servicestudio-width: 34px;
38+
}
39+
40+
&:before {
41+
-servicestudio-content: var(--osui-icon-arrow-left);
42+
-servicestudio-right: var(--space-l);
43+
}
44+
45+
&:after {
46+
-servicestudio-content: var(--osui-icon-arrow-right);
47+
-servicestudio-right: var(--space-xs);
48+
}
4049
}
4150
}
4251

‎src/scripts/OSFramework/OSUI/Pattern/MonthPicker/scss/_monthpicker_ss_preview_image.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker.scss‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,6 @@
66
/// Import Flatpickr library styles
77
@import '../../../../../Providers/OSUI/Timepicker/Flatpickr/scss/_flatpickr.scss';
88

9-
@import 'timepicker_ss_preview_imgs';
10-
119
///
1210
.osui-timepicker {
1311
input {
@@ -51,32 +49,39 @@
5149

5250
// Service Studio Preview
5351
& {
54-
-servicestudio-background-color: get-background-color('transparent');
55-
-servicestudio-background-position: top left;
56-
-servicestudio-background-repeat: no-repeat;
57-
-servicestudio-background-size: contain;
52+
-servicestudio-background-color: var(--color-neutral-0);
5853
-servicestudio-border-radius: var(--border-radius-soft);
59-
-servicestudio-display: inline-block;
60-
-servicestudio-height: 0;
54+
-servicestudio-display: flex;
55+
-servicestudio-justify-content: space-evenly;
56+
-servicestudio-line-height: var(--space-xl);
6157
-servicestudio-margin-top: 2px;
6258
-servicestudio-max-width: 320px;
63-
-servicestudio-overflow: hidden;
6459
-servicestudio-position: relative;
65-
-servicestudio-width: 100%;
60+
-servicestudio-text-align: center;
6661
-servicestudio-z-index: var(--layer-local-tier-1);
6762

68-
&.time12h {
69-
-servicestudio-background-image: $timepicker_time12h_img_base64;
70-
-servicestudio-height: var(--space-xl);
71-
}
63+
&.time12h{
64+
padding-right: var(--space-xxl);
65+
&:after{
66+
background-color: var(--color-neutral-7);
67+
border-radius: var(--border-radius-rounded);
68+
color: var(--color-neutral-0);
69+
content:"am";
70+
font-size: var(--font-size-xs);
71+
font-weight: var(--font-semi-bold);
72+
height: var(--space-m);
73+
line-height: var(--space-m);
74+
position: absolute;
75+
right: var(--space-s);
76+
top: 50%;
77+
transform: translateY(-50%);
78+
width: var(--space-xl);
79+
text-transform: uppercase;
80+
}
7281

73-
&.time24h {
74-
-servicestudio-background-image: $timepicker_time24h_img_base64;
75-
-servicestudio-height: var(--space-xl);
7682
}
7783

7884
& + .placeholder-ss-preview {
79-
-servicestudio-height: 0;
8085
-servicestudio-opacity: 0;
8186
-servicestudio-overflow: hidden;
8287
-servicestudio-width: 100%;
@@ -102,18 +107,6 @@
102107
}
103108
}
104109

105-
// If Hybrid IDE
106-
///
107-
html[data-uieditorversion^='1'] {
108-
.osui-timepicker__dropdown-ss-preview {
109-
&.time12h,
110-
&.time24h {
111-
-servicestudio-padding-top: min(var(--space-xl), 100%);
112-
-servicestudio-height: 0;
113-
}
114-
}
115-
}
116-
117110
.osui-timepicker__dropdown {
118111
&.hasTime.noCalendar {
119112
.flatpickr-time {

‎src/scripts/OSFramework/OSUI/Pattern/TimePicker/scss/_timepicker_ss_preview_imgs.scss‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎src/scss/01-foundations/_icon-library-o11.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,13 @@
221221
}
222222
}
223223

224+
.osui-datepicker-calendar-ss-preview,
225+
.osui-monthpicker-ss-preview {
226+
--osui-icon-font-family: 'FontAwesome';
227+
--osui-icon-arrow-left: '\f104';
228+
--osui-icon-arrow-right: '\f105';
229+
}
230+
224231
// DropdownServerSide
225232
.osui-dropdown-serverside {
226233
&__balloon {

0 commit comments

Comments
 (0)