Skip to content

Commit d6a4718

Browse files
nolimits4webnolimits4web
committed
feat(actions): m3 styles, rename bold -> strong button
1 parent e80fbb2 commit d6a4718

File tree

21 files changed

+140
-94
lines changed

21 files changed

+140
-94
lines changed

‎kitchen-sink/core/pages/action-sheet.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@
6060
},
6161
{
6262
text: 'Button 1',
63-
bold: true
63+
strong: true
6464
},
6565
{
6666
text: 'Button 2',
@@ -81,7 +81,7 @@
8181
},
8282
{
8383
text: 'Button 1',
84-
bold: true
84+
strong: true
8585
},
8686
{
8787
text: 'Button 2',

‎kitchen-sink/core/pages/swipeout.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@
367367
[
368368
{
369369
text: 'Cancel',
370-
bold: true,
370+
strong: true,
371371
}
372372
]
373373
],

‎kitchen-sink/react/src/pages/action-sheet.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default () => {
3636
},
3737
{
3838
text: 'Button 1',
39-
bold: true,
39+
strong: true,
4040
},
4141
{
4242
text: 'Button 2',
@@ -99,7 +99,7 @@ export default () => {
9999
>
100100
<ActionsGroup>
101101
<ActionsLabel>Do something</ActionsLabel>
102-
<ActionsButton bold>Button 1</ActionsButton>
102+
<ActionsButton strong>Button 1</ActionsButton>
103103
<ActionsButton>Button 2</ActionsButton>
104104
<ActionsButton color="red">Cancel</ActionsButton>
105105
</ActionsGroup>
@@ -109,7 +109,7 @@ export default () => {
109109
<Actions id="actions-two-groups">
110110
<ActionsGroup>
111111
<ActionsLabel>Do something</ActionsLabel>
112-
<ActionsButton bold>Button 1</ActionsButton>
112+
<ActionsButton strong>Button 1</ActionsButton>
113113
<ActionsButton>Button 2</ActionsButton>
114114
</ActionsGroup>
115115
<ActionsGroup>

‎kitchen-sink/react/src/pages/swipeout.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default () => {
5050
[
5151
{
5252
text: 'Cancel',
53-
bold: true,
53+
strong: true,
5454
},
5555
],
5656
],

‎kitchen-sink/svelte/src/pages/action-sheet.svelte

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
},
3030
{
3131
text: 'Button 1',
32-
bold: true,
32+
strong: true,
3333
},
3434
{
3535
text: 'Button 2',
@@ -66,7 +66,8 @@
6666
fill
6767
onClick={() => {
6868
actionsOneGroupOpened = true;
69-
}}>
69+
}}
70+
>
7071
One group
7172
</Button>
7273
<!-- Two groups, open by "actionsOpen" attribute -->
@@ -78,7 +79,8 @@
7879
fill
7980
onClick={() => {
8081
actionGridOpened = true;
81-
}}>
82+
}}
83+
>
8284
Action Grid
8385
</Button>
8486
</p>
@@ -99,7 +101,7 @@
99101
<Actions bind:opened={actionsOneGroupOpened}>
100102
<ActionsGroup>
101103
<ActionsLabel>Do something</ActionsLabel>
102-
<ActionsButton bold>Button 1</ActionsButton>
104+
<ActionsButton strong>Button 1</ActionsButton>
103105
<ActionsButton>Button 2</ActionsButton>
104106
<ActionsButton color="red">Cancel</ActionsButton>
105107
</ActionsGroup>
@@ -109,7 +111,7 @@
109111
<Actions id="actions-two-groups">
110112
<ActionsGroup>
111113
<ActionsLabel>Do something</ActionsLabel>
112-
<ActionsButton bold>Button 1</ActionsButton>
114+
<ActionsButton strong>Button 1</ActionsButton>
113115
<ActionsButton>Button 2</ActionsButton>
114116
</ActionsGroup>
115117
<ActionsGroup>
@@ -125,23 +127,26 @@
125127
slot="media"
126128
src="https://cdn.framework7.io/placeholder/people-96x96-1.jpg"
127129
width="48"
128-
style="max-width: 100%" />
130+
style="max-width: 100%"
131+
/>
129132
<span>Button 1</span>
130133
</ActionsButton>
131134
<ActionsButton>
132135
<img
133136
slot="media"
134137
src="https://cdn.framework7.io/placeholder/people-96x96-2.jpg"
135138
width="48"
136-
style="max-width: 100%" />
139+
style="max-width: 100%"
140+
/>
137141
<span>Button 2</span>
138142
</ActionsButton>
139143
<ActionsButton>
140144
<img
141145
slot="media"
142146
src="https://cdn.framework7.io/placeholder/people-96x96-3.jpg"
143147
width="48"
144-
style="max-width: 100%" />
148+
style="max-width: 100%"
149+
/>
145150
<span>Button 3</span>
146151
</ActionsButton>
147152
</ActionsGroup>
@@ -151,23 +156,26 @@
151156
slot="media"
152157
src="https://cdn.framework7.io/placeholder/fashion-96x96-4.jpg"
153158
width="48"
154-
style="max-width: 100%" />
159+
style="max-width: 100%"
160+
/>
155161
<span>Button 4</span>
156162
</ActionsButton>
157163
<ActionsButton>
158164
<img
159165
slot="media"
160166
src="https://cdn.framework7.io/placeholder/fashion-96x96-5.jpg"
161167
width="48"
162-
style="max-width: 100%" />
168+
style="max-width: 100%"
169+
/>
163170
<span>Button 5</span>
164171
</ActionsButton>
165172
<ActionsButton>
166173
<img
167174
slot="media"
168175
src="https://cdn.framework7.io/placeholder/fashion-96x96-6.jpg"
169176
width="48"
170-
style="max-width: 100%" />
177+
style="max-width: 100%"
178+
/>
171179
<span>Button 6</span>
172180
</ActionsButton>
173181
</ActionsGroup>

‎kitchen-sink/svelte/src/pages/swipeout.svelte

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
[
5050
{
5151
text: 'Cancel',
52-
bold: true,
52+
strong: true,
5353
},
5454
],
5555
],
@@ -172,7 +172,8 @@
172172
title="Facebook"
173173
after="17:14"
174174
subtitle="New messages from John Doe"
175-
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
175+
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
176+
>
176177
<SwipeoutActions left>
177178
<SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
178179
<SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
@@ -190,7 +191,8 @@
190191
title="John Doe (via Twitter)"
191192
after="17:11"
192193
subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
193-
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
194+
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
195+
>
194196
<SwipeoutActions left>
195197
<SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
196198
<SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
@@ -208,7 +210,8 @@
208210
title="Facebook"
209211
after="16:48"
210212
subtitle="New messages from John Doe"
211-
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
213+
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
214+
>
212215
<SwipeoutActions left>
213216
<SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
214217
<SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>
@@ -226,7 +229,8 @@
226229
title="John Doe (via Twitter)"
227230
after="15:32"
228231
subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
229-
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.">
232+
text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
233+
>
230234
<SwipeoutActions left>
231235
<SwipeoutButton overswipe color="green" onClick={reply}>Reply</SwipeoutButton>
232236
<SwipeoutButton color="blue" onClick={forward}>Forward</SwipeoutButton>

‎kitchen-sink/vue/src/pages/action-sheet.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
<f7-actions id="actions-one-group">
3333
<f7-actions-group>
3434
<f7-actions-label>Do something</f7-actions-label>
35-
<f7-actions-button bold>Button 1</f7-actions-button>
35+
<f7-actions-button strong>Button 1</f7-actions-button>
3636
<f7-actions-button>Button 2</f7-actions-button>
3737
<f7-actions-button color="red">Cancel</f7-actions-button>
3838
</f7-actions-group>
@@ -42,7 +42,7 @@
4242
<f7-actions id="actions-two-groups">
4343
<f7-actions-group>
4444
<f7-actions-label>Do something</f7-actions-label>
45-
<f7-actions-button bold>Button 1</f7-actions-button>
45+
<f7-actions-button strong>Button 1</f7-actions-button>
4646
<f7-actions-button>Button 2</f7-actions-button>
4747
</f7-actions-group>
4848
<f7-actions-group>
@@ -165,7 +165,7 @@ export default {
165165
},
166166
{
167167
text: 'Button 1',
168-
bold: true,
168+
strong: true,
169169
},
170170
{
171171
text: 'Button 2',

‎kitchen-sink/vue/src/pages/swipeout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export default {
300300
[
301301
{
302302
text: 'Cancel',
303-
bold: true,
303+
strong: true,
304304
},
305305
],
306306
],

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -272,10 +272,10 @@ class Actions extends Modal {
272272
<div class="actions-group">
273273
{group.map((button) => {
274274
const buttonClasses = [`actions-${button.label ? 'label' : 'button'}`];
275-
const { color, bg, bold, disabled, label, text, icon } = button;
275+
const { color, bg, strong, disabled, label, text, icon } = button;
276276
if (color) buttonClasses.push(`color-${color}`);
277277
if (bg) buttonClasses.push(`bg-color-${bg}`);
278-
if (bold) buttonClasses.push('actions-button-bold');
278+
if (strong) buttonClasses.push('actions-button-strong');
279279
if (disabled) buttonClasses.push('disabled');
280280
if (label) {
281281
return <div class={buttonClasses.join(' ')}>{text}</div>;
@@ -306,10 +306,10 @@ class Actions extends Modal {
306306
<ul>
307307
{group.map((button) => {
308308
const itemClasses = [];
309-
const { color, bg, bold, disabled, label, text, icon } = button;
309+
const { color, bg, strong, disabled, label, text, icon } = button;
310310
if (color) itemClasses.push(`color-${color}`);
311311
if (bg) itemClasses.push(`bg-color-${bg}`);
312-
if (bold) itemClasses.push('popover-from-actions-bold');
312+
if (strong) itemClasses.push('popover-from-actions-strong');
313313
if (disabled) itemClasses.push('disabled');
314314
if (label) {
315315
itemClasses.push('popover-from-actions-label');

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,46 @@
11
.ios {
2+
.actions-group {
3+
border-radius: var(--f7-actions-border-radius);
4+
}
5+
.actions-button,
6+
.actions-label {
7+
background: var(--f7-actions-bg-color);
8+
.ios-translucent-modals(var(--f7-actions-bg-color-rgb));
9+
&:first-child {
10+
border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
11+
}
12+
&:last-child {
13+
.hairline-remove(bottom);
14+
border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
15+
}
16+
&:first-child:last-child {
17+
border-radius: var(--f7-actions-border-radius);
18+
}
19+
b,
20+
&.actions-button-strong {
21+
font-weight: 600;
22+
}
23+
}
24+
.actions-grid {
25+
.actions-group {
26+
border-radius: 0;
27+
background: var(--f7-actions-bg-color);
28+
.ios-translucent-modals(var(--f7-actions-bg-color-rgb));
29+
&:first-child {
30+
border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
31+
}
32+
&:last-child {
33+
border-radius: 0 0 var(--f7-actions-border-radius) var(--f7-actions-border-radius);
34+
}
35+
&:first-child:last-child {
36+
border-radius: var(--f7-actions-border-radius);
37+
}
38+
}
39+
.actions-button,
40+
.actions-label {
41+
border-radius: 0 !important;
42+
}
43+
}
244
.actions-button-media {
345
margin-left: 16px;
446
+ .actions-button-text {

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
.md {
2+
.actions-modal {
3+
background-color: var(--f7-actions-bg-color);
4+
border-radius: var(--f7-actions-border-radius) var(--f7-actions-border-radius) 0 0;
5+
}
26
.actions-button {
37
transition-duration: 300ms;
48
}
9+
.actions-button,
10+
.actions-label {
11+
b,
12+
&.actions-button-strong {
13+
font-weight: 500;
14+
}
15+
}
16+
517
.actions-button-media {
618
min-width: 40px;
719
+ .actions-button-text {

0 commit comments

Comments
 (0)