Skip to content

Commit 29cafb7

Browse files
nolimits4webnolimits4web
committed
5.6.0 release
1 parent 8ce6a81 commit 29cafb7

File tree

82 files changed

+1069
-193
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

82 files changed

+1069
-193
lines changed

‎BACKERS.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
</a>
5151
</td>
5252
<td align="center" valign="middle">
53-
<a href="https://cooltechzone.com/roku-vpn" target="_blank">
53+
<a href="https://cooltechzone.com/popcorn-time-vpn" target="_blank">
5454
<img width="160" src="https://framework7.io/i/sponsors/cooltechzone.png">
5555
</a>
5656
</td>

‎CHANGELOG.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,32 @@
22

33
# Change Log
44

5+
# [v5.6.0](https://github.com/framework7io/framework7/compare/v5.5.5...v5.6.0) - April 18, 2020
6+
* Core
7+
* App
8+
* Added new app instance boolean property `app.darkTheme`. This property has effect only when `autoDarkTheme` enabled and indicates whether the dark theme active or not
9+
* Added new app instance event `darkThemeChange`. It has effect only when `autoDarkTheme` enabled and fires on device preferred color scheme change
10+
* Checkbox
11+
* Fixed styles in RTL mode
12+
* Device
13+
* Added `nwjs` property that is true when app running under NW.js environment
14+
* Router
15+
* New `pageTabShow`/`page:tabshow` and `pageTabHide`/`page:tabhide` page events. These events fires on page's parent View-Tab show/hide
16+
* Segmented
17+
* Added animation for "strong" segmented active button
18+
* **BREAKING CHANGE** - now "strong" segmented requires new `<span class="segmented-highlight">` element
19+
* React/Vue/Svelte
20+
* Input
21+
* Added support for `inpumode` input attribute
22+
* ListInput
23+
* Added support for `inpumode` input attribute
24+
* Fixed issue with `errorMessage` in Svelte
25+
* ListItem
26+
* Added `tabLink` and `tabLinkActive` props to make list item as a tab link
27+
* Page
28+
* * New `pageTabShow`/`page:tabshow` and `pageTabHide`/`page:tabhide` page events. These events fires on page's parent View-Tab show/hide
29+
* Minor fixes
30+
531
# [v5.5.5](https://github.com/framework7io/framework7/compare/v5.5.4...v5.5.5) - April 10, 2020
632
* Core
733
* Modals (Popup, Actions, Popover, Login Screen, etc.)

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
6666
</a>
6767
</td>
6868
<td align="center" valign="middle">
69-
<a href="https://cooltechzone.com/roku-vpn" target="_blank">
69+
<a href="https://cooltechzone.com/popcorn-time-vpn" target="_blank">
7070
<img width="160" src="https://framework7.io/i/sponsors/cooltechzone.png">
7171
</a>
7272
</td>

‎packages/core/README.md

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
1010

1111
<table>
1212
<tr>
13+
<td align="center" valign="middle">
14+
<a href="https://www.wfmbuddy.com/" target="_blank">
15+
<img width="160" src="https://framework7.io/i/sponsors/wfmbuddy.png">
16+
</a>
17+
</td>
1318
<td align="center" valign="middle">
1419
<a href="https://privicy.com/" target="_blank">
1520
<img width="160" src="https://framework7.io/i/sponsors/privicy.png">
@@ -25,6 +30,13 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
2530
<img width="160" src="https://framework7.io/i/sponsors/sparheld.jpg">
2631
</a>
2732
</td>
33+
<td align="center" valign="middle">
34+
<a href="https://infatica.io" target="_blank">
35+
<img width="160" src="https://framework7.io/i/sponsors/infatica.svg">
36+
</a>
37+
</td>
38+
</tr>
39+
<tr>
2840
<td align="center" valign="middle">
2941
<a href="https://www.thoriumbuilder.com/" target="_blank">
3042
<img width="160" src="https://framework7.io/i/sponsors/thorium.png">
@@ -35,8 +47,6 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
3547
<img width="160" src="https://framework7.io/i/sponsors/appvalley.jpg">
3648
</a>
3749
</td>
38-
</tr>
39-
<tr>
4050
<td align="center" valign="middle">
4151
<a href="http://mytommy.com" target="_blank">
4252
<img width="160" src="https://framework7.io/i/sponsors/tommy.png">
@@ -47,6 +57,18 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
4757
<img width="160" src="https://framework7.io/i/sponsors/securcom.png">
4858
</a>
4959
</td>
60+
<td align="center" valign="middle">
61+
<a href="https://cooltechzone.com/popcorn-time-vpn" target="_blank">
62+
<img width="160" src="https://framework7.io/i/sponsors/cooltechzone.png">
63+
</a>
64+
</td>
65+
</tr>
66+
<tr>
67+
<td align="center" valign="middle">
68+
<a href="https://www.bonus.com.de/" target="_blank">
69+
<img width="160" src="https://framework7.io/i/sponsors/bonusfinder.png">
70+
</a>
71+
</td>
5072
<td align="center" valign="middle">
5173
<a href="http://ananyamultitech.com/" target="_blank">
5274
<img width="160" src="https://framework7.io/i/sponsors/ananya.png">
@@ -62,13 +84,13 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
6284
<img width="160" src="https://framework7.io/i/sponsors/writersperhour.jpg">
6385
</a>
6486
</td>
65-
</tr>
66-
<tr>
6787
<td align="center" valign="middle">
6888
<a href="https://monovm.com/linux-vps/" target="_blank">
6989
<img width="160" src="https://framework7.io/i/sponsors/monovm.jpg">
7090
</a>
7191
</td>
92+
</tr>
93+
<tr>
7294
<td align="center" valign="middle">
7395
<a href="https://unicorn.io" target="_blank">
7496
<img width="160" src="https://framework7.io/i/sponsors/unicorn.svg">
@@ -89,13 +111,13 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
89111
<img width="160" src="https://framework7.io/i/sponsors/usave.png">
90112
</a>
91113
</td>
92-
</tr>
93-
<tr>
94114
<td align="center" valign="middle">
95115
<a href="https://bid4papers.com/write-my-essay.html" target="_blank">
96116
<img width="160" src="https://framework7.io/i/sponsors/bid4papers.png">
97117
</a>
98118
</td>
119+
</tr>
120+
<tr>
99121
<td align="center" valign="middle">
100122
<a href="https://kidoverse.app" target="_blank">
101123
<img width="160" src="https://framework7.io/i/sponsors/kidoverse.png">
@@ -116,16 +138,11 @@ Framework7 is an MIT-licensed open source project with its ongoing development m
116138
<img width="160" src="https://framework7.io/i/sponsors/blokt.png">
117139
</a>
118140
</td>
119-
</tr>
120-
<tr>
121141
<td align="center" valign="middle">
122142
<a href="https://wappler.io/" target="_blank">
123143
<img width="160" src="https://framework7.io/i/sponsors/wappler.png">
124144
</a>
125145
</td>
126-
<td></td>
127-
<td></td>
128-
<td></td>
129146
</tr>
130147
</table>
131148

‎packages/core/components/app/app-class.d.ts

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,15 @@ export interface Framework7Plugin {
116116

117117
export interface Framework7Events {
118118
/** Event will be fired on app initialization. Automatically after new Framework7() or after app.init() if you disabled auto init. */
119-
'init': () => void
119+
init: () => void
120+
/** Event will be fired on device preferred color scheme change. It has effect only when `autoDarkTheme` enabled */
121+
darkThemeChange: (isDark: boolean) => void
122+
/** Event will be fired when app goes online */
123+
online: () => void
124+
/** Event will be fired when app goes offline */
125+
offline: () => void
126+
/** Event will be fired on network state change */
127+
connection: (isOnline: boolean) => void
120128
}
121129

122130
interface Framework7 extends Framework7Class<Framework7Events> {
@@ -136,6 +144,8 @@ interface Framework7 extends Framework7Class<Framework7Events> {
136144
rtl : boolean
137145
/** Current app theme. Can be md or ios */
138146
theme : string
147+
/** Indicates whether the dark theme active or not. This property has effect only when `autoDarkTheme` enabled */
148+
darkTheme : boolean
139149
/** Object with app root data passed on intialization */
140150
data : any
141151
/** Object with app root methods */

‎packages/core/components/app/app-class.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,8 +105,12 @@ class Framework7 extends Framework7Class {
105105
const html = document.querySelector('html');
106106
if (media === DARK) {
107107
html.classList.add('theme-dark');
108+
app.darkTheme = true;
109+
app.emit('darkThemeChange', true);
108110
} else if (media === LIGHT) {
109111
html.classList.remove('theme-dark');
112+
app.darkTheme = false;
113+
app.emit('darkThemeChange', false);
110114
}
111115
};
112116

@@ -158,8 +162,12 @@ class Framework7 extends Framework7Class {
158162
}
159163
if (app.mq.dark && app.mq.dark.matches) {
160164
html.classList.add('theme-dark');
165+
app.darkTheme = true;
166+
app.emit('darkThemeChange', true);
161167
} else if (app.mq.light && app.mq.light.matches) {
162168
html.classList.remove('theme-dark');
169+
app.darkTheme = false;
170+
app.emit('darkThemeChange', false);
163171
}
164172
}
165173

‎packages/core/components/button/button.less

Lines changed: 98 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -225,12 +225,16 @@ button {
225225
--f7-button-font-weight: var(--f7-segmented-strong-button-font-weight);
226226
--f7-button-text-transform: var(--f7-segmented-strong-button-text-transform);
227227
--f7-button-pressed-bg-color: var(--f7-segmented-strong-button-pressed-bg-color);
228+
position: relative;
228229
background: var(--f7-segmented-strong-bg-color);
229230
border-radius: calc(var(--f7-button-border-radius) + 2px);
230231
box-shadow: none;
231232
padding: var(--f7-segmented-strong-padding);
232233
overflow: hidden;
233234

235+
.button {
236+
z-index: 1;
237+
}
234238
.button,
235239
.button:first-child,
236240
.button:last-child {
@@ -246,19 +250,109 @@ button {
246250
}
247251
.button.button-active,
248252
.button.tab-link-active {
249-
--f7-button-hover-bg-color: var(--f7-segmented-strong-button-active-bg-color);
250-
--f7-button-bg-color: var(--f7-segmented-strong-button-active-bg-color);
253+
--f7-button-hover-bg-color: transparent;
254+
--f7-button-bg-color: transparent;
251255
--f7-button-text-color: var(--f7-segmented-strong-button-active-text-color);
252256
--f7-button-font-weight: var(--f7-segmented-strong-button-active-font-weight);
253-
--f7-button-box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
257+
}
258+
259+
.segmented-highlight {
260+
--f7-segmented-highlight-num: 1;
261+
--f7-segmented-highlight-active: 0;
262+
--f7-segmented-highlight-padding: calc(var(--f7-segmented-strong-padding) * 2);
263+
--f7-segmented-highlight-between: var(--f7-segmented-strong-between-buttons);
264+
--f7-segmented-highlight-width: calc((100% - var(--f7-segmented-highlight-padding) - var(--f7-segmented-highlight-between) * (var(--f7-segmented-highlight-num) - 1)) / var(--f7-segmented-highlight-num));
265+
266+
position: absolute;
267+
background-color: var(--f7-segmented-strong-button-active-bg-color);
268+
border-radius: var(--f7-button-border-radius);
269+
box-shadow: var(--f7-segmented-strong-button-active-box-shadow);
270+
left: var(--f7-segmented-strong-padding);
271+
top: var(--f7-segmented-strong-padding);
272+
height: calc(100% - var(--f7-segmented-strong-padding) * 2);
273+
width: var(--f7-segmented-highlight-width);
274+
z-index: 0;
275+
transform: translateX(calc(var(--f7-segmented-highlight-active) * 100% + var(--f7-segmented-highlight-active) * var(--f7-segmented-highlight-between)));
276+
transition: 200ms;
277+
}
278+
}
279+
280+
.segmented-highlight {
281+
.button:nth-child(2) ~ & {
282+
--f7-segmented-highlight-num: 2;
283+
}
284+
.button:nth-child(3) ~ & {
285+
--f7-segmented-highlight-num: 3;
286+
}
287+
.button:nth-child(4) ~ & {
288+
--f7-segmented-highlight-num: 4;
289+
}
290+
.button:nth-child(5) ~ & {
291+
--f7-segmented-highlight-num: 5;
292+
}
293+
.button:nth-child(6) ~ & {
294+
--f7-segmented-highlight-num: 6;
295+
}
296+
.button:nth-child(7) ~ & {
297+
--f7-segmented-highlight-num: 7;
298+
}
299+
.button:nth-child(8) ~ & {
300+
--f7-segmented-highlight-num: 8;
301+
}
302+
.button:nth-child(9) ~ & {
303+
--f7-segmented-highlight-num: 9;
304+
}
305+
.button:nth-child(10) ~ & {
306+
--f7-segmented-highlight-num: 10;
307+
}
308+
309+
.button-active:nth-child(2) ~ &,
310+
.tab-link-active:nth-child(2) ~ & {
311+
--f7-segmented-highlight-active: 1;
312+
}
313+
.button-active:nth-child(3) ~ &,
314+
.tab-link-active:nth-child(3) ~ & {
315+
--f7-segmented-highlight-active: 2;
316+
}
317+
.button-active:nth-child(4) ~ &,
318+
.tab-link-active:nth-child(4) ~ & {
319+
--f7-segmented-highlight-active: 3;
320+
}
321+
.button-active:nth-child(5) ~ &,
322+
.tab-link-active:nth-child(5) ~ & {
323+
--f7-segmented-highlight-active: 4;
324+
}
325+
.button-active:nth-child(6) ~ &,
326+
.tab-link-active:nth-child(6) ~ & {
327+
--f7-segmented-highlight-active: 5;
328+
}
329+
.button-active:nth-child(7) ~ &,
330+
.tab-link-active:nth-child(7) ~ & {
331+
--f7-segmented-highlight-active: 6;
332+
}
333+
.button-active:nth-child(8) ~ &,
334+
.tab-link-active:nth-child(8) ~ & {
335+
--f7-segmented-highlight-active: 7;
336+
}
337+
.button-active:nth-child(9) ~ &,
338+
.tab-link-active:nth-child(9) ~ & {
339+
--f7-segmented-highlight-active: 8;
340+
}
341+
.button-active:nth-child(10) ~ &,
342+
.tab-link-active:nth-child(10) ~ & {
343+
--f7-segmented-highlight-active: 9;
254344
}
255345
}
256346

347+
// Round
257348
.segmented-round,
258349
.ios .segmented-round-ios,
259350
.md .segmented-round-md,
260-
.aurora .segmented-round-aurora{
351+
.aurora .segmented-round-aurora {
261352
border-radius: var(--f7-button-height);
353+
.segmented-highlight {
354+
border-radius: var(--f7-button-height);
355+
}
262356
}
263357

264358
.subnavbar .segmented {

0 commit comments

Comments
 (0)