superdesk-ui-framework 3.0.1-beta.14 → 3.0.1-beta.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/scripts/toggleBoxNext.js +1 -1
- package/app/styles/_buttons.scss +1 -1
- package/app/styles/_content-divider.scss +5 -5
- package/app/styles/_helpers.scss +24 -1
- package/app/styles/_icon-font.scss +9 -9
- package/app/styles/_modals.scss +3 -0
- package/app/styles/_normalize.scss +4 -0
- package/app/styles/_simple-list.scss +1 -0
- package/app/styles/_table-list.scss +14 -1
- package/app/styles/app.scss +1 -0
- package/app/styles/components/_list-item.scss +23 -16
- package/app/styles/components/_sd-collapse-box.scss +6 -6
- package/app/styles/design-tokens/_new-colors.scss +10 -5
- package/app/styles/form-elements/_input-wrap.scss +138 -0
- package/app/styles/form-elements/_inputs.scss +230 -61
- package/app/styles/interface-elements/_side-panel.scss +1 -1
- package/app/styles/layout/_editor.scss +1 -0
- package/app/styles/primereact/_pr-dialog.scss +1 -0
- package/app/styles/primereact/_pr-menu.scss +6 -5
- package/app-typescript/components/DurationInput.tsx +11 -17
- package/app-typescript/components/Form/FormLabel.tsx +8 -1
- package/app-typescript/components/Form/InputBase.tsx +12 -2
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +1 -1
- package/app-typescript/components/Layouts/AuthoringMain.tsx +4 -2
- package/app-typescript/components/Lists/ContentList.tsx +7 -3
- package/app-typescript/components/Lists/TableList.tsx +29 -16
- package/dist/examples.bundle.css +8 -8
- package/dist/examples.bundle.js +877 -856
- package/dist/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/dist/react/ContentDivider.tsx +4 -4
- package/dist/react/Inputs.tsx +1 -7
- package/dist/react/Togglebox.tsx +1 -1
- package/dist/superdesk-ui.bundle.css +462 -176
- package/dist/superdesk-ui.bundle.js +603 -687
- package/dist/vendor.bundle.js +2 -2
- package/examples/pages/playgrounds/react-playgrounds/CoreLayout.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/RundownEditor.tsx +2 -1
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +11 -2
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +198 -25
- package/examples/pages/react/ContentDivider.tsx +4 -4
- package/examples/pages/react/Inputs.tsx +1 -7
- package/examples/pages/react/Togglebox.tsx +1 -1
- package/package.json +1 -1
- package/react/components/DurationInput.js +13 -18
- package/react/components/Form/FormLabel.d.ts +4 -1
- package/react/components/Form/FormLabel.js +9 -3
- package/react/components/Form/InputBase.d.ts +0 -1
- package/react/components/Form/InputBase.js +15 -1
- package/react/components/Layouts/AuthoringInnerHeader.js +1 -1
- package/react/components/Layouts/AuthoringMain.js +1 -1
- package/react/components/Lists/ContentList.js +2 -2
- package/react/components/Lists/TableList.d.ts +4 -0
- package/react/components/Lists/TableList.js +13 -11
@@ -14,6 +14,7 @@
|
|
14
14
|
height: $form-input-height;
|
15
15
|
border-radius: $border-radius__base--x-small $border-radius__base--x-small 0 0;
|
16
16
|
display: block;
|
17
|
+
position: relative;
|
17
18
|
&::placeholder {
|
18
19
|
color: var(--color-text-lighter);
|
19
20
|
font-weight: 400;
|
@@ -34,7 +35,9 @@
|
|
34
35
|
}
|
35
36
|
|
36
37
|
@mixin Form-label-base {
|
37
|
-
display: inline-
|
38
|
+
display: inline-flex;
|
39
|
+
align-items: flex-start;
|
40
|
+
justify-content: flex-start;
|
38
41
|
font-size: 1.1rem;
|
39
42
|
margin: 0 0.5rem 0 0;
|
40
43
|
line-height: 1;
|
@@ -50,15 +53,15 @@
|
|
50
53
|
display: inline-flex;
|
51
54
|
align-items: center;
|
52
55
|
justify-content: center;
|
53
|
-
padding: 2px 8px
|
56
|
+
padding: 2px 8px;
|
54
57
|
font-size: 1.1rem;
|
55
58
|
font-family: $baseFontFamily;
|
56
59
|
font-weight: 400;
|
57
|
-
line-height:
|
60
|
+
line-height: 2rem;
|
58
61
|
text-transform: uppercase;
|
59
62
|
font-style: normal;
|
60
63
|
letter-spacing: 0.08em;
|
61
|
-
height:
|
64
|
+
height: 2rem;
|
62
65
|
transition: opacity ease 0.2s;
|
63
66
|
justify-self: start;
|
64
67
|
position: relative;
|
@@ -87,7 +90,50 @@
|
|
87
90
|
content: "*";
|
88
91
|
vertical-align: top;
|
89
92
|
font-size: 1.2rem;
|
90
|
-
padding-
|
93
|
+
padding-inline-start: 0.3rem;
|
94
|
+
margin-top: -2px
|
95
|
+
}
|
96
|
+
}
|
97
|
+
&--invalid {
|
98
|
+
color: $red;
|
99
|
+
}
|
100
|
+
&--focused {
|
101
|
+
color: var(--sd-colour-interactive);
|
102
|
+
&.form-label--invalid {
|
103
|
+
color: $red;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
&--boxed {
|
107
|
+
@include Boxed-label-base;
|
108
|
+
&--light {
|
109
|
+
background-color: hsla(214, 13%, 30%, 0.4);
|
110
|
+
color: hsl(214, 13%, 96%);
|
111
|
+
}
|
112
|
+
&--dark {
|
113
|
+
background-color: hsla(214, 13%, 30%, 0.4);
|
114
|
+
color: hsl(214, 13%, 96%);
|
115
|
+
}
|
116
|
+
&.form-label--required {
|
117
|
+
&::after {
|
118
|
+
margin-inline-start: 0.2rem;
|
119
|
+
color: #e41b21;
|
120
|
+
content: "*";
|
121
|
+
vertical-align: top;
|
122
|
+
font-size: 1.2rem;
|
123
|
+
padding-inline-start: 0.3rem;
|
124
|
+
position: absolute;
|
125
|
+
inset-block-start: -4px;
|
126
|
+
inset-inline-end: -10px;
|
127
|
+
}
|
128
|
+
}
|
129
|
+
&.form-label--invalid,
|
130
|
+
&.form-label--invalid.form-label--focused {
|
131
|
+
background-color: $red;
|
132
|
+
color: hsl(214, 13%, 96%);
|
133
|
+
}
|
134
|
+
&.form-label--focused {
|
135
|
+
background-color: var(--sd-colour-interactive);
|
136
|
+
color: hsl(214, 13%, 96%);
|
91
137
|
}
|
92
138
|
}
|
93
139
|
}
|
@@ -118,7 +164,7 @@
|
|
118
164
|
width: 100%;
|
119
165
|
}
|
120
166
|
&__value {
|
121
|
-
margin-
|
167
|
+
margin-inline-end: 6px;
|
122
168
|
text-transform: uppercase;
|
123
169
|
}
|
124
170
|
input, textarea {
|
@@ -175,25 +221,30 @@
|
|
175
221
|
}
|
176
222
|
.sd-line-input__info-left, .sd-line-input__info-right { // use for 1-2 letter info that appear inside inputs ("W" - for width; "H" - for height; px, mm - for units, etc.)
|
177
223
|
position: absolute;
|
178
|
-
|
224
|
+
inset-block-start: 2.5rem;
|
179
225
|
opacity: 0.3;
|
180
226
|
font-size: 1.5rem;
|
181
227
|
font-weight: 300;
|
182
228
|
}
|
183
229
|
.sd-line-input__info-right {
|
184
|
-
|
230
|
+
inset-inline-end: 0.8rem;
|
185
231
|
}
|
186
232
|
.sd-line-input__info-left {
|
187
|
-
|
233
|
+
inset-inline-start: 0.8rem;
|
188
234
|
}
|
189
235
|
|
190
236
|
.sd-line-input__icon-left, .sd-line-input__icon-right {
|
191
237
|
position: absolute;
|
192
|
-
|
238
|
+
inset-block-start: 1.6rem;
|
193
239
|
cursor: pointer;
|
194
240
|
}
|
195
241
|
.sd-line-input__icon-right {
|
196
|
-
|
242
|
+
inset-inline-end: 0.2rem;
|
243
|
+
}
|
244
|
+
.sd-line-input__icon-right.icn-btn {
|
245
|
+
inset-inline-end: 0.2rem;
|
246
|
+
inset-block-start: 1.8rem;
|
247
|
+
z-index: 1;
|
197
248
|
}
|
198
249
|
.sd-line-input__icon-left {
|
199
250
|
left: 0.2rem;
|
@@ -202,14 +253,14 @@
|
|
202
253
|
&.sd-line-input--indent-l30 {
|
203
254
|
input, textarea {
|
204
255
|
&.sd-line-input__input {
|
205
|
-
padding-
|
256
|
+
padding-inline-start: 3rem;
|
206
257
|
}
|
207
258
|
}
|
208
259
|
}
|
209
260
|
&.sd-line-input--indent-r30 {
|
210
261
|
input, textarea {
|
211
262
|
&.sd-line-input__input {
|
212
|
-
padding-
|
263
|
+
padding-inline-end: 3rem;
|
213
264
|
}
|
214
265
|
}
|
215
266
|
}
|
@@ -219,13 +270,13 @@
|
|
219
270
|
position: absolute;
|
220
271
|
line-height: 100%;
|
221
272
|
margin: 0;
|
222
|
-
|
273
|
+
inset-block-start:0;
|
223
274
|
&--required::after {
|
224
275
|
color:$red;
|
225
276
|
content: "*";
|
226
277
|
vertical-align: top;
|
227
278
|
font-size: 1.2rem;
|
228
|
-
padding-
|
279
|
+
padding-inline-start: 0.3rem;
|
229
280
|
}
|
230
281
|
|
231
282
|
}
|
@@ -241,15 +292,15 @@
|
|
241
292
|
}
|
242
293
|
.sd-line-input__hint {
|
243
294
|
position: absolute;
|
244
|
-
|
245
|
-
|
246
|
-
padding-
|
295
|
+
inset-inline-start: 1px;
|
296
|
+
inset-inline-end: auto;
|
297
|
+
padding-inline-end: 5.5rem;
|
247
298
|
margin-top: 0.4rem;
|
248
299
|
}
|
249
300
|
.sd-line-input__char-count {
|
250
301
|
position: absolute;
|
251
|
-
|
252
|
-
|
302
|
+
inset-inline-end: 1px;
|
303
|
+
inset-inline-start: auto;
|
253
304
|
margin-top: 0.5rem;
|
254
305
|
font-size: 1.1rem;
|
255
306
|
font-weight: 400;
|
@@ -347,12 +398,12 @@
|
|
347
398
|
}
|
348
399
|
&.sd-line-input--no-label {
|
349
400
|
&::after {
|
350
|
-
|
401
|
+
inset-block-start: 1.4rem;
|
351
402
|
}
|
352
403
|
}
|
353
404
|
&.sd-line-input--label-left {
|
354
405
|
&::after {
|
355
|
-
|
406
|
+
inset-block-start: 1.2rem;
|
356
407
|
}
|
357
408
|
}
|
358
409
|
}
|
@@ -368,7 +419,7 @@
|
|
368
419
|
content: "*";
|
369
420
|
vertical-align: top;
|
370
421
|
font-size: 1.2rem;
|
371
|
-
padding-
|
422
|
+
padding-inline-start: 0.3rem;
|
372
423
|
}
|
373
424
|
}
|
374
425
|
&.sd-line-input--no-label {
|
@@ -403,14 +454,14 @@
|
|
403
454
|
position: static;
|
404
455
|
grid-row: 2/3;
|
405
456
|
grid-column: 3/4;
|
406
|
-
padding-
|
457
|
+
padding-inline-end: 0;
|
407
458
|
}
|
408
459
|
.sd-line-input__char-count {
|
409
460
|
position: static;
|
410
461
|
grid-row: 2/3;
|
411
462
|
grid-column: 5/4;
|
412
463
|
text-align: end;
|
413
|
-
padding-
|
464
|
+
padding-inline-start: 1.6rem;
|
414
465
|
}
|
415
466
|
}
|
416
467
|
&--label-left-auto {
|
@@ -430,14 +481,14 @@
|
|
430
481
|
&--with-icon-l {
|
431
482
|
input, textarea {
|
432
483
|
&.sd-line-input__input {
|
433
|
-
padding-
|
484
|
+
padding-inline-end: 3rem;
|
434
485
|
}
|
435
486
|
}
|
436
487
|
}
|
437
488
|
.sd-line-input__plus-btn {
|
438
489
|
position: absolute;
|
439
|
-
|
440
|
-
|
490
|
+
inset-block-start: 1.8rem;
|
491
|
+
inset-inline-start: 0;
|
441
492
|
height: 2.2rem;
|
442
493
|
width: 2.2rem;
|
443
494
|
background-color: var(--sd-colour-interactive--alpha-70);
|
@@ -463,6 +514,129 @@
|
|
463
514
|
|
464
515
|
///////////////// -------------------- NEW INPUTS --------------------- /////////////////
|
465
516
|
|
517
|
+
.sd-input__input {
|
518
|
+
@include Line-input-base;
|
519
|
+
&--invalid {
|
520
|
+
border-bottom: 1px solid $red;
|
521
|
+
background-color: hsla(357, 79%, 50%, 0.075);
|
522
|
+
&:hover {
|
523
|
+
background-color: hsla(357, 79%, 50%, 0.12);
|
524
|
+
border-bottom-color: $red;
|
525
|
+
}
|
526
|
+
&:focus {
|
527
|
+
background-color: hsla(357, 79%, 50%, 0.16);
|
528
|
+
border-bottom-color: $red;
|
529
|
+
box-shadow: 0 1px 0 0 $red;
|
530
|
+
}
|
531
|
+
}
|
532
|
+
&--disabled {
|
533
|
+
opacity: 0.5;
|
534
|
+
background-color: var(--color-input-bg);
|
535
|
+
border-bottom: 1px dotted var(--color-input-border);
|
536
|
+
cursor: not-allowed !important;
|
537
|
+
box-shadow: none;
|
538
|
+
&:hover {
|
539
|
+
background-color: var(--color-input-bg);
|
540
|
+
border-bottom-color: var(--color-input-border);
|
541
|
+
}
|
542
|
+
}
|
543
|
+
&--boxed-style {
|
544
|
+
border: 0;
|
545
|
+
border: 2px solid var(--color-input-border);
|
546
|
+
background-color: transparent;
|
547
|
+
transition: all ease 0.3s;
|
548
|
+
border-radius: var(--b-radius--large);
|
549
|
+
display: block;
|
550
|
+
&:hover {
|
551
|
+
border-color: var(--color-input-border-hover);
|
552
|
+
background-color: transparent;
|
553
|
+
}
|
554
|
+
&:focus {
|
555
|
+
outline: none;
|
556
|
+
border-color: var(--sd-colour-interactive--alpha-50);
|
557
|
+
box-shadow: inset 0 0 0 4px var(--sd-colour-interactive--alpha-20);
|
558
|
+
background-color: transparent;
|
559
|
+
}
|
560
|
+
|
561
|
+
&.sd-input__input--disabled {
|
562
|
+
border: 2px solid var(--color-input-border);
|
563
|
+
// cursor: not-allowed !important;
|
564
|
+
box-shadow: none;
|
565
|
+
&:hover {
|
566
|
+
//background-color: var(--color-input-bg);
|
567
|
+
border-color: var(--color-input-border);
|
568
|
+
}
|
569
|
+
}
|
570
|
+
|
571
|
+
&.sd-input__input--invalid {
|
572
|
+
background-color: hsla(357, 79%, 50%, 0.075);
|
573
|
+
border-color: $red;
|
574
|
+
&:hover,
|
575
|
+
&:focus {
|
576
|
+
background-color: hsla(357, 79%, 50%, 0.12);
|
577
|
+
box-shadow: none !important;
|
578
|
+
}
|
579
|
+
}
|
580
|
+
}
|
581
|
+
&--medium {
|
582
|
+
border-radius: var(--b-radius--medium);
|
583
|
+
&:focus {
|
584
|
+
box-shadow: inset 0 0 0 3px var(--sd-colour-interactive--alpha-20);
|
585
|
+
}
|
586
|
+
}
|
587
|
+
&--large {
|
588
|
+
padding: 0 1.6rem;
|
589
|
+
min-height: 4.8rem;
|
590
|
+
font-size: 2.4rem;
|
591
|
+
font-weight: 500;
|
592
|
+
}
|
593
|
+
&--x-large {
|
594
|
+
padding: 0 1.6rem;
|
595
|
+
min-height: 5.6rem;
|
596
|
+
font-size: 3.2rem;
|
597
|
+
font-weight: 500;
|
598
|
+
}
|
599
|
+
}
|
600
|
+
|
601
|
+
.sd-input__select {
|
602
|
+
display: block;
|
603
|
+
position: relative;
|
604
|
+
@include Line-input-base;
|
605
|
+
padding-inline-end: 2rem;
|
606
|
+
min-width: 5rem;
|
607
|
+
cursor: pointer;
|
608
|
+
option {
|
609
|
+
color:inherit;
|
610
|
+
font-size: 1.4rem;
|
611
|
+
line-height: 2rem;
|
612
|
+
background-color: var(--color-dropdown-menu-Bg);
|
613
|
+
color: var(--color-dropdown-menu-text);
|
614
|
+
}
|
615
|
+
}
|
616
|
+
|
617
|
+
.sd-input__hint,
|
618
|
+
.sd-input__message,
|
619
|
+
.sd-input__char-count {
|
620
|
+
font-size: 1.2rem;
|
621
|
+
line-height: 1.4rem;
|
622
|
+
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
|
623
|
+
color: var(--color-text-light);
|
624
|
+
font-weight: 300;
|
625
|
+
letter-spacing: 0.03em;
|
626
|
+
display: block;
|
627
|
+
}
|
628
|
+
.sd-input__char-count {
|
629
|
+
font-size: 1.1rem;
|
630
|
+
font-weight: 400;
|
631
|
+
font-style: italic;
|
632
|
+
&--error {
|
633
|
+
color: $red;
|
634
|
+
}
|
635
|
+
}
|
636
|
+
|
637
|
+
|
638
|
+
//----
|
639
|
+
|
466
640
|
.sd-input {
|
467
641
|
padding-top: 0;
|
468
642
|
margin: 0;
|
@@ -475,7 +649,7 @@
|
|
475
649
|
|
476
650
|
|
477
651
|
.sd-input__input {
|
478
|
-
|
652
|
+
//@include Line-input-base;
|
479
653
|
grid-row: 2/3;
|
480
654
|
grid-column: 2/4;
|
481
655
|
}
|
@@ -501,21 +675,21 @@
|
|
501
675
|
}
|
502
676
|
}
|
503
677
|
.sd-input__select {
|
504
|
-
display: block;
|
505
|
-
position: relative;
|
506
|
-
@include Line-input-base;
|
507
|
-
padding-inline-end: 2rem;
|
678
|
+
// display: block;
|
679
|
+
// position: relative;
|
680
|
+
// @include Line-input-base;
|
681
|
+
// padding-inline-end: 2rem;
|
508
682
|
grid-row: 2/3;
|
509
683
|
grid-column: 2/4;
|
510
|
-
min-width: 5rem;
|
511
|
-
cursor: pointer;
|
512
|
-
option {
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
}
|
684
|
+
// min-width: 5rem;
|
685
|
+
// cursor: pointer;
|
686
|
+
// option {
|
687
|
+
// color:inherit;
|
688
|
+
// font-size: 1.4rem;
|
689
|
+
// line-height: 2rem;
|
690
|
+
// background-color: var(--color-dropdown-menu-Bg);
|
691
|
+
// color: var(--color-dropdown-menu-text);
|
692
|
+
// }
|
519
693
|
}
|
520
694
|
&.sd-input--is-select {
|
521
695
|
&::after {
|
@@ -556,24 +730,24 @@
|
|
556
730
|
.sd-input__hint,
|
557
731
|
.sd-input__message,
|
558
732
|
.sd-input__char-count {
|
559
|
-
font-size: 1.2rem;
|
560
|
-
line-height: 1.4rem;
|
561
|
-
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
|
562
|
-
color: var(--color-text-light);
|
563
|
-
font-weight: 300;
|
733
|
+
// font-size: 1.2rem;
|
734
|
+
// line-height: 1.4rem;
|
735
|
+
// transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
|
736
|
+
// color: var(--color-text-light);
|
737
|
+
// font-weight: 300;
|
564
738
|
margin: 0.5rem 0;
|
565
|
-
letter-spacing: 0.03em;
|
566
|
-
display: block;
|
739
|
+
// letter-spacing: 0.03em;
|
740
|
+
// display: block;
|
567
741
|
}
|
568
742
|
.sd-input__char-count {
|
569
|
-
font-size: 1.1rem;
|
570
|
-
font-weight: 400;
|
571
|
-
font-style: italic;
|
743
|
+
// font-size: 1.1rem;
|
744
|
+
// font-weight: 400;
|
745
|
+
// font-style: italic;
|
572
746
|
grid-row: 3/4;
|
573
747
|
grid-column: 3/4;
|
574
|
-
&--error {
|
575
|
-
|
576
|
-
}
|
748
|
+
// &--error {
|
749
|
+
// color: $red;
|
750
|
+
// }
|
577
751
|
}
|
578
752
|
.sd-input__label {
|
579
753
|
@include Form-label-base;
|
@@ -661,7 +835,7 @@
|
|
661
835
|
content: "*";
|
662
836
|
vertical-align: top;
|
663
837
|
font-size: 1.2rem;
|
664
|
-
padding-
|
838
|
+
padding-inline-start: 0.3rem;
|
665
839
|
}
|
666
840
|
.sd-input__label.sd-input__label--boxed::after {
|
667
841
|
position: absolute;
|
@@ -994,8 +1168,3 @@
|
|
994
1168
|
opacity: 0;
|
995
1169
|
}
|
996
1170
|
}
|
997
|
-
|
998
|
-
//&--boxed-style
|
999
|
-
|
1000
|
-
|
1001
|
-
|
@@ -23,13 +23,14 @@
|
|
23
23
|
padding: .8rem 1.6rem;
|
24
24
|
min-width: 100px;
|
25
25
|
font-size: 14px;
|
26
|
-
color:
|
26
|
+
color: var(--color-text);
|
27
|
+
width: 100%;
|
27
28
|
|
28
29
|
&:hover, &:focus-visible {
|
29
30
|
background: $sd-colour-background__menu-item--hover;
|
30
31
|
}
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
32
|
+
.p-menuitem-icon {
|
33
|
+
margin-right: 0.8rem;
|
34
|
+
color: var(--color-icon-default);
|
35
|
+
}
|
35
36
|
}
|
@@ -367,25 +367,19 @@ export function getDurationString(seconds: number, zero?: boolean) {
|
|
367
367
|
}
|
368
368
|
}
|
369
369
|
|
370
|
-
let hour;
|
371
|
-
let minute;
|
372
|
-
let second;
|
370
|
+
let hour = zeroPad(Math.floor(seconds / 3600));
|
371
|
+
let minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
372
|
+
let second = zeroPad(Math.floor(seconds % 60));
|
373
373
|
|
374
374
|
if (zero) {
|
375
|
-
hour = zeroPad(Math.floor(seconds / 3600));
|
376
|
-
minute = zeroPad(Math.floor((seconds % 3600) / 60));
|
377
|
-
second = zeroPad(Math.floor(seconds % 60));
|
378
|
-
} else {
|
379
|
-
hour = Math.floor(seconds / 3600);
|
380
|
-
minute = Math.floor((seconds % 3600) / 60);
|
381
|
-
second = Math.floor(seconds % 60);
|
382
|
-
}
|
383
|
-
|
384
|
-
if (Number(hour) === 0 && Number(minute) > 0) {
|
385
|
-
return `${minute}m ${second}s`;
|
386
|
-
} else if (Number(hour) === 0 && Number(minute) === 0) {
|
387
|
-
return `${second}s`;
|
388
|
-
} else {
|
389
375
|
return `${hour}h ${minute}m ${second}s`;
|
376
|
+
} else {
|
377
|
+
if (Number(hour) === 0 && Number(minute) > 0) {
|
378
|
+
return `${minute}m ${second}s`;
|
379
|
+
} else if (Number(hour) === 0 && Number(minute) === 0) {
|
380
|
+
return `${second}s`;
|
381
|
+
} else {
|
382
|
+
return `${hour}h ${minute}m ${second}s`;
|
383
|
+
}
|
390
384
|
}
|
391
385
|
}
|
@@ -2,15 +2,22 @@ import * as React from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
3
3
|
|
4
4
|
interface IProps {
|
5
|
-
style?: 'normal' | 'light';
|
5
|
+
style?: 'normal' | 'light' | 'boxed';
|
6
|
+
state?: 'default' | 'focused' | 'warning';
|
6
7
|
text: string;
|
7
8
|
forId?: string;
|
9
|
+
required?: boolean;
|
10
|
+
invalid?: boolean;
|
8
11
|
}
|
9
12
|
|
10
13
|
export class FormLabel extends React.PureComponent<IProps> {
|
11
14
|
render() {
|
12
15
|
let classes = classNames('form-label', {
|
13
16
|
'form-label--light': this.props.style === 'light',
|
17
|
+
'form-label--boxed': this.props.style === 'boxed',
|
18
|
+
'form-label--required': this.props.required,
|
19
|
+
'form-label--invalid': this.props.invalid,
|
20
|
+
[`form-label--${this.props.state}`]: this.props.state !== 'default' && this.props.state !== undefined,
|
14
21
|
|
15
22
|
});
|
16
23
|
return (
|
@@ -1,4 +1,5 @@
|
|
1
1
|
import * as React from 'react';
|
2
|
+
import classNames from 'classnames';
|
2
3
|
|
3
4
|
interface IPropsBase {
|
4
5
|
error?: string;
|
@@ -8,7 +9,7 @@ interface IPropsBase {
|
|
8
9
|
tabIndex?: number;
|
9
10
|
fullWidth?: boolean;
|
10
11
|
boxedStyle?: boolean;
|
11
|
-
boxedLable?: boolean;
|
12
|
+
// boxedLable?: boolean;
|
12
13
|
placeholder?: string;
|
13
14
|
htmlId?: string;
|
14
15
|
id?: string;
|
@@ -70,8 +71,17 @@ export class InputBase extends React.Component<IProps, IState> {
|
|
70
71
|
}
|
71
72
|
|
72
73
|
render() {
|
74
|
+
let classes = classNames('sd-input__input', {
|
75
|
+
'sd-input__input--boxed-style': this.props.boxedStyle,
|
76
|
+
'sd-input__input--required': this.props.required,
|
77
|
+
'sd-input__input--invalid': this.props.invalid,
|
78
|
+
'sd-input__input--disabled': this.props.disabled,
|
79
|
+
'sd-input__input--medium': this.props.size === undefined,
|
80
|
+
[`sd-input__input--${this.props.size}`]: this.props.size || this.props.size !== undefined,
|
81
|
+
|
82
|
+
});
|
73
83
|
return (
|
74
|
-
<input className=
|
84
|
+
<input className={classes}
|
75
85
|
type={this.props.type ?? 'text'}
|
76
86
|
id={this.props.htmlId}
|
77
87
|
value={this.state.value}
|
@@ -31,8 +31,10 @@ export class AuthoringMain extends React.PureComponent<IProps> {
|
|
31
31
|
)}
|
32
32
|
<AuthoringMainContent>
|
33
33
|
{this.props.authoringHeader && (
|
34
|
-
<AuthoringInnerHeader
|
35
|
-
{this.props.
|
34
|
+
<AuthoringInnerHeader
|
35
|
+
headerPadding={this.props.headerPadding}
|
36
|
+
collapsed={this.props.headerCollapsed}>
|
37
|
+
{this.props.authoringHeader}
|
36
38
|
</AuthoringInnerHeader>
|
37
39
|
)}
|
38
40
|
{this.props.authoringBookmarks && (
|
@@ -49,7 +49,11 @@ class ContentListItem extends React.PureComponent<IPropsItem> {
|
|
49
49
|
});
|
50
50
|
|
51
51
|
return (
|
52
|
-
<div
|
52
|
+
<div
|
53
|
+
role='listitem'
|
54
|
+
className={classes}
|
55
|
+
onClick={this.onSingleClick}
|
56
|
+
onDoubleClick={this.onDoubleClick}>
|
53
57
|
{this.props.locked
|
54
58
|
? <div className="sd-list-item__border sd-list-item__border--locked"></div>
|
55
59
|
: <div className="sd-list-item__border"></div>}
|
@@ -100,7 +104,7 @@ class ContentList extends React.PureComponent<IProps> {
|
|
100
104
|
render() {
|
101
105
|
let classes = classNames('sd-list-item-group sd-list-item-group--space-between-items');
|
102
106
|
return (
|
103
|
-
<
|
107
|
+
<div role='list' className={classes}>
|
104
108
|
{this.props.items.map((item, index) => {
|
105
109
|
return <ContentListItem
|
106
110
|
key={index}
|
@@ -114,7 +118,7 @@ class ContentList extends React.PureComponent<IProps> {
|
|
114
118
|
onClick={item.onClick}
|
115
119
|
onDoubleClick={item.onDoubleClick} />;
|
116
120
|
})}
|
117
|
-
</
|
121
|
+
</div>
|
118
122
|
);
|
119
123
|
}
|
120
124
|
}
|