Skip to content

Commit fa37aee

Browse files
nolimits4webnolimits4web
committed
feat(dialog): m3 styles + rename bold -> strong button
1 parent bb09829 commit fa37aee

File tree

7 files changed

+48
-38
lines changed

7 files changed

+48
-38
lines changed

‎src/core/components/dialog/dialog-class.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class Dialog extends Modal {
5656
<div class="dialog-buttons">
5757
{buttons.map((button) => (
5858
<span
59-
class={`dialog-button${button.bold ? ' dialog-button-bold' : ''}${
59+
class={`dialog-button${button.strong ? ' dialog-button-strong' : ''}${
6060
button.color ? ` color-${button.color}` : ''
6161
}${button.cssClass ? ` ${button.cssClass}` : ''}`}
6262
>

‎src/core/components/dialog/dialog-ios.less‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@
3333
&:first-child:last-child {
3434
border-radius: 0 0 var(--f7-dialog-border-radius) var(--f7-dialog-border-radius);
3535
}
36-
&.dialog-button-bold {
37-
font-weight: 500;
38-
}
3936
}
4037
.dialog-button[class*='color-'] {
4138
--f7-dialog-button-text-color: var(--f7-theme-color);

‎src/core/components/dialog/dialog-md.less‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,26 @@
1313
line-height: 1.5;
1414
}
1515
.dialog-buttons {
16-
height: 48px;
17-
padding: 6px 8px;
16+
height: 64px;
17+
padding: 0px 24px 24px;
1818
overflow: hidden;
1919
box-sizing: border-box;
2020
justify-content: flex-end;
2121
}
2222

2323
.dialog-button {
2424
--f7-touch-ripple-color: rgba(var(--f7-theme-color-rgb), 0.25);
25-
border-radius: 4px;
25+
border-radius: 99px;
2626
min-width: 64px;
27-
padding: 0 8px;
27+
padding: 0px 16px;
2828
border: none;
2929
transition-duration: 300ms;
3030
transform: translate3d(0, 0, 0);
31-
&.dialog-button-bold {
32-
font-weight: 700;
33-
}
3431
+ .dialog-button {
35-
margin-left: 4px;
32+
margin-left: 8px;
33+
}
34+
&-strong {
35+
--f7-touch-ripple-color: var(--f7-touch-ripple-white);
3636
}
3737
}
3838
.dialog-button[class*='color-'] {
@@ -46,7 +46,7 @@
4646
align-items: flex-end;
4747
}
4848
.dialog-button + .dialog-button {
49-
margin-top: 12px;
49+
margin-top: 8px;
5050
}
5151
}
5252

‎src/core/components/dialog/dialog-vars.less‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,9 @@
44
.light-vars({
55
--f7-dialog-input-bg-color: #fff;
66
});
7-
.dark-vars({
8-
--f7-dialog-text-color: #fff;
9-
});
107
}
118
.ios-vars({
12-
--f7-dialog-box-shadow: none;
9+
1310
--f7-dialog-width: 270px;
1411
--f7-dialog-inner-padding: 16px;
1512
--f7-dialog-border-radius: 13px;
@@ -25,6 +22,9 @@
2522
--f7-dialog-button-letter-spacing: 0;
2623
--f7-dialog-button-font-weight: 400;
2724
--f7-dialog-button-text-transform: none;
25+
--f7-dialog-button-strong-bg-color: transparent;
26+
--f7-dialog-button-strong-text-color: var(--f7-theme-color);
27+
--f7-dialog-button-strong-font-weight: 500;
2828

2929
--f7-dialog-input-border-radius: 4px;
3030
--f7-dialog-input-font-size: 14px;
@@ -39,57 +39,62 @@
3939
--f7-dialog-bg-color-rgb: 255, 255, 255;
4040
--f7-dialog-text-color: #000;
4141
--f7-dialog-button-pressed-bg-color: rgba(0,0,0,0.1);
42+
--f7-dialog-button-strong-pressed-bg-color: rgba(0,0,0,0.1);
4243
--f7-dialog-input-border-color: rgba(0,0,0,0.3);
4344
--f7-dialog-border-divider-color: rgba(0,0,0,0.2);
4445
});
4546
.dark-vars({
47+
--f7-dialog-text-color: #fff;
4648
--f7-dialog-bg-color: rgba(45,45,45,0.95);
4749
--f7-dialog-bg-color-rgb: 45, 45, 45;
4850
--f7-dialog-button-pressed-bg-color: rgba(0,0,0,0.2);
51+
--f7-dialog-button-strong-pressed-bg-color: rgba(0,0,0,0.2);
4952
--f7-dialog-border-divider-color: rgba(255,255,255,0.15);
5053
--f7-dialog-input-border-color: rgba(255,255,255,0.15);
5154
--f7-dialog-input-bg-color: rgba(0,0,0,0.5);
5255
});
5356
});
5457
.md-vars({
55-
--f7-dialog-box-shadow: var(--f7-elevation-24);
5658
--f7-dialog-width: 280px;
5759
--f7-dialog-inner-padding: 24px;
58-
--f7-dialog-border-radius: 4px;
60+
--f7-dialog-border-radius: 28px;
5961
.ltr({
6062
--f7-dialog-text-align: left;
6163
});
6264
.rtl({
6365
--f7-dialog-text-align: right;
6466
});
65-
--f7-dialog-font-size: 16px;
66-
--f7-dialog-title-font-size: 20px;
67-
--f7-dialog-title-font-weight: 500;
67+
--f7-dialog-font-size: 14px;
68+
--f7-dialog-title-font-size: 24px;
69+
--f7-dialog-title-font-weight: 400;
6870
--f7-dialog-title-line-height: 1.3;
6971

7072
--f7-dialog-button-font-size: 14px;
71-
--f7-dialog-button-height: 36px;
72-
--f7-dialog-button-letter-spacing: 0.05em;
73+
--f7-dialog-button-height: 40px;
74+
--f7-dialog-button-letter-spacing: normal;
7375
--f7-dialog-button-font-weight: 500;
74-
--f7-dialog-button-text-transform: uppercase;
76+
--f7-dialog-button-text-transform: none;
7577
--f7-dialog-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), 0.15);
7678

79+
--f7-dialog-button-strong-bg-color: var(--f7-theme-color);
80+
--f7-dialog-button-strong-text-color: var(--f7-md-on-primary);
81+
--f7-dialog-button-strong-font-weight: 500;
82+
--f7-dialog-button-strong-pressed-bg-color: var(--f7-theme-color-shade);
83+
7784
--f7-dialog-input-border-radius: 0px;
7885
--f7-dialog-input-font-size: 16px;
7986
--f7-dialog-input-height: 36px;
8087
--f7-dialog-input-border-color: transparent;
8188
--f7-dialog-input-border-width: 0px;
8289

8390
--f7-dialog-preloader-size: 32px;
91+
--f7-dialog-bg-color: var(--f7-md-surface-3);
92+
--f7-dialog-text-color: var(--f7-md-on-surface-variant);
93+
--f7-dialog-title-text-color: var(--f7-md-on-surface);
8494
.light-vars({
85-
--f7-dialog-bg-color: #fff;
86-
--f7-dialog-text-color: rgba(0,0,0,0.54);
87-
--f7-dialog-title-text-color: #212121;
8895
--f7-dialog-input-placeholder-color: rgba(0,0,0,0.35);
8996
});
9097
.dark-vars({
91-
--f7-dialog-bg-color: #1c1c1d;
92-
--f7-dialog-title-text-color: #fff;
9398
--f7-dialog-input-bg-color: transparent;
9499
--f7-dialog-input-placeholder-color: rgba(255,255,255,0.54);
95100
});

‎src/core/components/dialog/dialog.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export namespace Dialog {
4444
interface DialogButton {
4545
/** String with Button's text (could be HTML string). */
4646
text: string;
47-
/** Enables bold button text. (default false) */
48-
bold?: boolean;
47+
/** Enables strong button style. (default false) */
48+
strong?: boolean;
4949
/** Button color, one of default colors. */
5050
color?: string;
5151
/** If enabled then button click will close Dialog. (default true) */

‎src/core/components/dialog/dialog.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export default {
4040
},
4141
}
4242
: {};
43+
const isIosTheme = app.theme === 'ios';
4344

4445
app.dialog = extend(
4546
ModalMethods({
@@ -60,7 +61,7 @@ export default {
6061
buttons: [
6162
{
6263
text: app.params.dialog.buttonOk,
63-
bold: true,
64+
strong: isIosTheme,
6465
onClick: callbackOk,
6566
keyCodes: keyboardActions ? [13, 27] : null,
6667
},
@@ -87,7 +88,7 @@ export default {
8788
},
8889
{
8990
text: app.params.dialog.buttonOk,
90-
bold: true,
91+
strong: isIosTheme,
9192
keyCodes: keyboardActions ? [13] : null,
9293
},
9394
],
@@ -117,7 +118,7 @@ export default {
117118
},
118119
{
119120
text: app.params.dialog.buttonOk,
120-
bold: true,
121+
strong: isIosTheme,
121122
onClick: callbackOk,
122123
keyCodes: keyboardActions ? [13] : null,
123124
},
@@ -149,7 +150,7 @@ export default {
149150
},
150151
{
151152
text: app.params.dialog.buttonOk,
152-
bold: true,
153+
strong: isIosTheme,
153154
keyCodes: keyboardActions ? [13] : null,
154155
},
155156
],
@@ -184,7 +185,7 @@ export default {
184185
},
185186
{
186187
text: app.params.dialog.buttonOk,
187-
bold: true,
188+
strong: isIosTheme,
188189
keyCodes: keyboardActions ? [13] : null,
189190
},
190191
],

‎src/core/components/dialog/dialog.less‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
transition-property: transform, opacity;
1616
display: none;
1717
transition-duration: 400ms;
18-
box-shadow: var(--f7-dialog-box-shadow);
1918
width: var(--f7-dialog-width);
2019
margin-left: calc(-1 * var(--f7-dialog-width) / 2);
2120
border-radius: var(--f7-dialog-border-radius);
@@ -79,6 +78,14 @@
7978
background-color: var(--f7-dialog-button-pressed-bg-color);
8079
}
8180
}
81+
.dialog-button-strong {
82+
background-color: var(--f7-dialog-button-strong-bg-color);
83+
color: var(--f7-dialog-button-strong-text-color);
84+
font-weight: var(--f7-dialog-button-strong-font-weight);
85+
&.active-state {
86+
background-color: var(--f7-dialog-button-strong-pressed-bg-color);
87+
}
88+
}
8289
.dialog-no-buttons {
8390
.dialog-buttons {
8491
display: none;

0 commit comments

Comments
 (0)