Skip to content

Commit 1ba7282

Browse files
oltonolton
committed
release 5.1.19
2 parents 9549171 + b3c2264 commit 1ba7282

25 files changed

+1368
-827
lines changed

‎CHANGELOG-HISTORY.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
# Changelog
22

3+
### 5.1.18
4+
5+
+ [x] Fixed `bg-*-clown` family colors
6+
+ [x] Corrected saturated and darken colors
7+
+ [x] Added animation to the linked block connector
8+
+ [x] Changed `Metro.makePlugin()`, now return plugin instance instead of an element
9+
+ [x] Fixed page control creating
10+
+ [x] Updated `datetime` package with fix for `utc()`, `locale()` methods, and added formatting system, align strategies system
11+
+ [x] Updated `analog-clock`, now you can use attribute `data-time-zone` to set specific utc offset in hours (-/+) and `data-use-utc` to enable it
12+
+ [x] Updated `clock`, now you can use attribute `data-time-zone` to set specific utc offset in hours (-/+) and `data-use-utc` to enable it
13+
+ [x] Updated `cutter`, now default style is `line`, added `wave`, wave can have any color
14+
+ [x] Fixed `data-size` attribute in `activity` component, added attribute `data-box-size` for `metro` activity
15+
+ [x] Fixed prev, next icons in calendar for android
16+
+ [x] Fixed accordion fame state marker for android
17+
+ [x] Fixed reaction inputs, select, and textarea components to change disabled property for input, select, textarea elements
18+
+ [x] Improved `button` for using colors, now you can use all colors to define button color with classes `button-light-[color]`, `button-minor-[color]`, `button-[color]`, `button-sat-[color]`, and `button-dark-[color]`
19+
+ [x] Added classes `glow`, `glow-hover`, `glow-animated`, and `glow-animated-hover` to push button
20+
+ [x] Fixed passing classes to the parent element for `custom-checkbox`, remove border by default
21+
+ [x] Remove duplicate border definition for before and after pseudo elements
22+
+ [x] Improved color correction for `dropdown-caret` in colored parents
23+
+ [x] Improved `analog-clock` - changed element sizes and positions
24+
+ [x] Fixed minor issues for `dropdown` component, Fixed `analog-clock` style
25+
326
### 5.1.17
427

528
+ [x] Added components `linked-block` and `linked-connector`

‎CHANGELOG.md‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,7 @@
1-
### 5.1.18
1+
### 5.1.19
22

3-
+ [x] Fixed `bg-*-clown` family colors
4-
+ [x] Corrected saturated and darken colors
5-
+ [x] Added animation to the linked block connector
6-
+ [x] Changed `Metro.makePlugin()`, now return plugin instance instead of an element
7-
+ [x] Fixed page control creating
8-
+ [x] Updated `datetime` package with fix for `utc()`, `locale()` methods, and added formatting system, align strategies system
9-
+ [x] Updated `analog-clock`, now you can use attribute `data-time-zone` to set specific utc offset in hours (-/+) and `data-use-utc` to enable it
10-
+ [x] Updated `clock`, now you can use attribute `data-time-zone` to set specific utc offset in hours (-/+) and `data-use-utc` to enable it
11-
+ [x] Updated `cutter`, now default style is `line`, added `wave`, wave can have any color
12-
+ [x] Fixed `data-size` attribute in `activity` component, added attribute `data-box-size` for `metro` activity
13-
+ [x] Fixed prev, next icons in calendar for android
14-
+ [x] Fixed accordion fame state marker for android
15-
+ [x] Fixed reaction inputs, select, and textarea components to change disabled property for input, select, textarea elements
16-
+ [x] Improved `button` for using colors, now you can use all colors to define button color with classes `button-light-[color]`, `button-minor-[color]`, `button-[color]`, `button-sat-[color]`, and `button-dark-[color]`
17-
+ [x] Added classes `glow`, `glow-hover`, `glow-animated`, and `glow-animated-hover` to push button
18-
+ [x] Fixed passing classes to the parent element for `custom-checkbox`, remove border by default
19-
+ [x] Remove duplicate border definition for before and after pseudo elements
20-
+ [x] Improved color correction for `dropdown-caret` in colored parents
21-
+ [x] Improved `analog-clock` - changed element sizes and positions
22-
+ [x] Fixed minor issues for `dropdown` component, Fixed `analog-clock` style
23-
24-
3+
+ [x] Added attribute `data-size` to `analog-clock` component
4+
+ [x] Refactored `clock` component, added attributes `data-size`, `data-hour-format=12|24`, improved time calculation
5+
+ [x] Fixed `data-on-color`, `data-off-color` for `rating` component
6+
+ [x] Added method `validate()` to `validator` component
7+
+ [x] Added component `log`, you can use `Metro.log(...)`, `Metro.warn(...)`, and `Metro.error(...)`, these messages extended from `console.log`, and have different color output.

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<div align="center">
2+
<h1 align="center">Welcome to Metro UI!</h1>
23
<h1 align="center"><img src="banner.png" alt="Metro UI"/></h1>
34
<h3>A progressive front-end framework for creating high-performance responsive web applications</h3>
45

‎banner.png‎

136 KB
Loading

‎examples/analog-clock-{size}.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
8+
<link href="index.css" rel="stylesheet">
9+
10+
<title>Test Analog Clock Size - Metro UI :: Popular HTML, CSS and JS library</title>
11+
12+
</head>
13+
<body class="cloak h-100-vh">
14+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
15+
<div class="app-bar-item-static no-hover">
16+
<div class="text-leader" id="component-name">Analog Clock</div>
17+
</div>
18+
<div class="app-bar-item-static no-hover ml-auto">
19+
<input type="checkbox" data-role="theme-switcher"/>
20+
</div>
21+
</nav>
22+
23+
<div class="container h-100 d-flex flex-center gap-10">
24+
<div data-role="analog-clock" data-icon="<span>Local Time</span>" data-size="300"></div>
25+
</div>
26+
27+
<script src="../lib/metro.js"></script>
28+
<script>
29+
</script>
30+
</body>
31+
</html>

‎examples/clock.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,20 @@
88
<title>Test Clock - Metro UI :: Popular HTML, CSS and JS library</title>
99

1010
</head>
11-
<body class="m4-cloak">
12-
<div class="container">
13-
<h1>Clock test page</h1>
14-
15-
<div id="clock" data-role="clock" data-date-format="dddd, D MMMM YYYY" lang="pt"></div>
11+
<body class="cloak h-100-vh">
12+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
13+
<div class="app-bar-item-static no-hover">
14+
<div class="text-leader" id="component-name">Component Name</div>
15+
</div>
16+
<div class="app-bar-item-static no-hover ml-auto">
17+
<input type="checkbox" data-role="theme-switcher"/>
18+
</div>
19+
</nav>
1620

21+
<div class="container h-100 d-flex flex-center flex-column">
22+
<div data-role="clock" data-date-format="dddd, D MMMM YYYY" lang="uk"></div>
23+
<div data-role="clock" data-show-date="false" lang="en" data-digital="true" data-size="64"></div>
24+
<div data-role="clock" data-show-date="false" lang="en" data-digital="true" data-size="64" data-hour-format="12"></div>
1725
</div>
1826

1927
<script src="../lib/metro.js"></script>

‎examples/log.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
8+
<link href="index.css" rel="stylesheet">
9+
10+
<title>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
11+
12+
</head>
13+
<body class="cloak h-100-vh">
14+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
15+
<div class="app-bar-item-static no-hover">
16+
<div class="text-leader" id="component-name">Component Name</div>
17+
</div>
18+
<div class="app-bar-item-static no-hover ml-auto">
19+
<input type="checkbox" data-role="theme-switcher"/>
20+
</div>
21+
</nav>
22+
23+
<div class="container h-100 d-flex flex-center">
24+
</div>
25+
26+
<script src="../lib/metro.js"></script>
27+
<script>
28+
window.DEBUG_PAGE = true
29+
Metro.log('Page loaded')
30+
Metro.log('Others', 1, 2, 3)
31+
Metro.warn('warning')
32+
Metro.error('error')
33+
</script>
34+
</body>
35+
</html>

‎examples/rating.html‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,29 @@
1616
<div class="container">
1717
<h1>Rating test page</h1>
1818

19-
<div class="example">
20-
<input data-role="rating">
21-
<input data-role="rating" data-label="Rating:">
22-
<input data-role="rating" data-stars="10">
23-
<input data-role="rating" data-value="3">
24-
<input data-role="rating" data-value="3" data-message="(3856)">
25-
<input data-role="rating" data-value="3" data-star-color="pink" data-stared-color="cyan">
26-
</div>
19+
<!-- <div class="example">-->
20+
<!-- <input data-role="rating">-->
21+
<!-- <input data-role="rating" data-label="Rating:">-->
22+
<!-- <input data-role="rating" data-stars="10">-->
23+
<!-- <input data-role="rating" data-value="3">-->
24+
<!-- <input data-role="rating" data-value="3.5" data-message="(3856)" data-half="true" data-static="true">-->
25+
<!-- <input data-role="rating" data-value="3" data-off-color="var(&#45;&#45;color-light-red)" data-on-color="red">-->
26+
<!-- </div>-->
2727

28+
<div class="mt-10">
29+
<h2>Get Value Example</h2>
30+
<form action="javascript:">
31+
<input id="VOTO" name="voto"
32+
data-role="rating" data-stars="5" data-value=""
33+
data-label="Voto"
34+
data-cls-label="text-bold text-small text-upper"
35+
value="1" />
36+
<div class="form-actions">
37+
<button type="button" onclick="alert($('#VOTO').val())">Get Value</button>
38+
<button type="reset">Reset</button>
39+
</div>
40+
</form>
41+
</div>
2842
</div>
2943

3044
<script src="../lib/metro.js"></script>

‎examples/validator-{submit}.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6+
<link href="../lib/metro.css" rel="stylesheet">
7+
<link href="../lib/icons.css" rel="stylesheet">
8+
9+
<title>Validator - Form Submit - Metro UI :: Popular HTML, CSS and JS library</title>
10+
11+
</head>
12+
<body class="cloak h-100-vh">
13+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
14+
<div class="app-bar-item-static no-hover">
15+
<div class="text-leader" id="component-name">Validator - Form Submit</div>
16+
</div>
17+
<div class="app-bar-item-static no-hover ml-auto">
18+
<input type="checkbox" data-role="theme-switcher"/>
19+
</div>
20+
</nav>
21+
22+
<div class="container h-100 d-flex flex-center">
23+
<FORM data-role="validator" action="" method="post" class="w-75">
24+
25+
<DIV class="mt-10">
26+
27+
<DIV class="row">
28+
<DIV class="cell-2">
29+
<input id="MACHINE" name="machine" data-role="input"
30+
data-label="Machine" data-validate="required"
31+
data-cls-label="text-bold fg-black" value="mrdorunrun" />
32+
</DIV>
33+
<DIV class="cell-2">
34+
<input id="SIZE" name="size" data-role="input"
35+
data-label="Size kb" data-validate="number required min=1 max=100000"
36+
data-cls-label="text-bold fg-black" value="" />
37+
</DIV>
38+
</DIV>
39+
40+
<DIV class="row">
41+
<DIV class="cell-4">
42+
<select id="CATEGORIES" name="categories" data-role="select" data-validate="required" data-filter="true" data-show-group-name="true" data-cls-option-group="text-bold bg-white fg-terracotta" data-label="Category" data-cls-label="text-bold fg-black" size="1">
43+
<OPTION value="|">&nbsp;</OPTION>
44+
<OPTGROUP label="Arcade">
45+
<OPTION class="pl-7" value="QXJjYWRl|Kg==">*</OPTION>
46+
<OPTION class="pl-7" value="QXJjYWRl|Rm9ydHVuZSBUZWxsZXI=">Fortune Teller</OPTION>
47+
<OPTION class="pl-7" value="QXJjYWRl|UGh5c2ljYWwgQWJpbGl0eQ==">Physical Ability</OPTION>
48+
<OPTION class="pl-7" value="QXJjYWRl|UGluYmFsbA==">Pinball</OPTION>
49+
<OPTION class="pl-7" value="QXJjYWRl|U2tpbGwgRHJvcA==">Skill Drop</OPTION>
50+
<OPTION class="pl-7" value="QXJjYWRl|U3RyZW5ndGggVGVzdGVy">Strength Tester</OPTION>
51+
<OPTION class="pl-7" value="QXJjYWRl|VW5rbm93bg==">Unknown</OPTION>
52+
</OPTGROUP>
53+
<OPTGROUP label="Ball & Paddle">
54+
<OPTION class="pl-7" value="QmFsbCAmIFBhZGRsZQ==|Kg==">*</OPTION>
55+
<OPTION class="pl-7" value="QmFsbCAmIFBhZGRsZQ==|QnJlYWtvdXQ=">Breakout</OPTION>
56+
<OPTION class="pl-7" value="QmFsbCAmIFBhZGRsZQ==|SnVtcCBhbmQgVG91Y2g=">Jump and Touch</OPTION>
57+
<OPTION class="pl-7" value="QmFsbCAmIFBhZGRsZQ==|TWlzYy4=">Misc.</OPTION>
58+
<OPTION class="pl-7" value="QmFsbCAmIFBhZGRsZQ==|UG9uZw==">Pong</OPTION>
59+
</OPTGROUP>
60+
<OPTGROUP label="Bartop">
61+
<OPTION class="pl-7" value="QmFydG9w|Kg==">*</OPTION>
62+
<OPTION class="pl-7" value="QmFydG9w|TXVsdGktR2FtZXM=">Multi-Games</OPTION>
63+
</OPTGROUP>
64+
<OPTGROUP label="Board Game">
65+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|Kg==">*</OPTION>
66+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|QmFja2dhbW1vbiBNYWNoaW5l">Backgammon Machine</OPTION>
67+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|QnJpZGdlIE1hY2hpbmU=">Bridge Machine</OPTION>
68+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|Q2FyZHM=">Cards</OPTION>
69+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|Q2hlY2tlciBNYWNoaW5l">Checker Machine</OPTION>
70+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|Q2hlc3MgQ29uc29sZQ==">Chess Console</OPTION>
71+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|Q2hlc3MgTWFjaGluZQ==">Chess Machine</OPTION>
72+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|Q2hpbmVzZSdzIENoZXNzIE1hY2hpbmU=">Chinese's Chess Machine</OPTION>
73+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|RGFtZSBNYWNoaW5l">Dame Machine</OPTION>
74+
<OPTION class="pl-7" value="Qm9hcmQgR2FtZQ==|TXVsdGktR2FtZXMgTWFjaGluZQ==">Multi-Games Machine</OPTION>
75+
</OPTGROUP>
76+
</select>
77+
</DIV>
78+
</DIV>
79+
80+
<DIV class="row no-gap border-top bd-blue border-size-2 mt-2 py-2">
81+
<DIV class="form-actions border-none">
82+
<BUTTON id="SUBMIT" type="button" onClick="onBeforeSubmit(this.form);"
83+
class="bg-sat-cyan bg-cyan-hover fg-white"><SPAN class="icon mif-checkmark" ></SPAN>Conferma</BUTTON>
84+
<button>Submit</button>
85+
</DIV>
86+
</DIV>
87+
</DIV>
88+
</FORM>
89+
</div>
90+
91+
<script src="../lib/metro.js"></script>
92+
<script>
93+
function onBeforeSubmit(pForm) {
94+
const validator = $(pForm).data('validator');
95+
if (validator?.validate()) {
96+
Metro.dialog.create({
97+
title: "INSERT",
98+
content: "Confermi l'inserimento nel DB?",
99+
defaultActions: false,
100+
customButtons: [{
101+
text: "Si",
102+
cls: "js-dialog-close alert medium",
103+
onclick: function () {
104+
pForm.submit();
105+
}
106+
},
107+
{
108+
text: "No",
109+
cls: "js-dialog-close medium",
110+
onclick: function () {
111+
return false;
112+
}
113+
}]
114+
});
115+
}
116+
}
117+
</script>
118+
</body>
119+
</html>

‎lib/metro.all.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)