Skip to content

Commit b71e8ae

Browse files
oltonolton
committed
Fixed bug in hotkey component when using $(...).hotkey() method
1 parent 7bfea68 commit b71e8ae

File tree

12 files changed

+720
-34
lines changed

12 files changed

+720
-34
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
### 5.1.15
22

33
+ [x] Fix validator for the `required` rule for the `input` with role
4-
+ [x] Improved rule `date` for validator
4+
+ [x] Improved rule `date` for validator
5+
+ [x] Added component `resizable-container`
6+
+ [x] Fixed bug in `hotkey` component when using `$(...).hotkey()` method

‎examples/resizable-container.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
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>Test Any - Metro UI :: Popular HTML, CSS and JS library</title>
10+
<style>
11+
.demo-box {
12+
width: 300px;
13+
height: 300px;
14+
background-color: var(--color-light-nude);
15+
border: 1px solid var(--color-nude);
16+
position: absolute;
17+
display: flex;
18+
align-items: center;
19+
justify-content: center;
20+
}
21+
</style>
22+
</head>
23+
<body class="cloak h-100-vh">
24+
<nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
25+
<div class="app-bar-item-static no-hover">
26+
<div class="text-leader">Resizable Container</div>
27+
</div>
28+
<div class="app-bar-container" style="position: absolute; left: 50%; transform: translateX(-50%)">
29+
Press Alt+T to toggle the resize mode.
30+
<!-- <button class="d-none" data-hotkey="alt+t" onclick="toggleResizeMode()"></button>-->
31+
</div>
32+
<div class="app-bar-item-static no-hover ml-auto">
33+
<input type="checkbox" data-role="theme-switcher"/>
34+
</div>
35+
</nav>
36+
37+
<div class="container h-100">
38+
<div class="demo-box" data-role="resizable-container, draggable" data-enable-resize="false" style="width: 300px; height: 300px;">
39+
</div>
40+
</div>
41+
42+
<script src="../lib/metro.js"></script>
43+
<script>
44+
function toggleResizeMode() {
45+
const container = $(".demo-box");
46+
const mode = container.attr("data-enable-resize");
47+
container.attr("data-enable-resize", mode === "true" ? "false" : "true");
48+
}
49+
50+
(() => {
51+
$("body").hotkey("alt+t", toggleResizeMode)
52+
53+
const container = $(".demo-box");
54+
const parentRect = container.parent()[0].getBoundingClientRect();
55+
container.css({
56+
top: parentRect.height / 2 - container.height() / 2,
57+
left: parentRect.width / 2 - container.width() / 2,
58+
})
59+
})()
60+
</script>
61+
</body>
62+
</html>

‎lib/metro.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71504,6 +71504,85 @@ label:has(input) {
7150471504
border-bottom-color: hsl(0, 0%, 80%);
7150571505
}
7150671506

71507+
/* source/components/resizable-container/resizable-container.less */
71508+
:root {
71509+
--resizable-container-border-color: #000;
71510+
--resizable-container-border-width: 1px;
71511+
--resizable-container-point-size: 8px;
71512+
}
71513+
.dark-side {
71514+
--resizable-container-border-color: #fff;
71515+
}
71516+
.resizable-container {
71517+
user-select: none;
71518+
}
71519+
.resizable-container .rc-contour {
71520+
position: absolute;
71521+
inset: 0;
71522+
background: transparent;
71523+
border: var(--resizable-container-border-width) dashed var(--resizable-container-border-color);
71524+
border-radius: 0;
71525+
overflow: visible;
71526+
}
71527+
.resizable-container .rc-contour .rc-point {
71528+
position: absolute;
71529+
width: var(--resizable-container-point-size);
71530+
aspect-ratio: 1;
71531+
background: var(--default-background);
71532+
border: var(--resizable-container-border-width) solid var(--resizable-container-border-color);
71533+
}
71534+
.resizable-container .rc-contour .-nw {
71535+
top: 0;
71536+
left: 0;
71537+
cursor: nw-resize;
71538+
transform: translate(-50%, -50%);
71539+
}
71540+
.resizable-container .rc-contour .-ne {
71541+
top: 0;
71542+
right: 0;
71543+
cursor: ne-resize;
71544+
transform: translate(50%, -50%);
71545+
}
71546+
.resizable-container .rc-contour .-sw {
71547+
bottom: 0;
71548+
left: 0;
71549+
cursor: sw-resize;
71550+
transform: translate(-50%, 50%);
71551+
}
71552+
.resizable-container .rc-contour .-se {
71553+
bottom: 0;
71554+
right: 0;
71555+
cursor: se-resize;
71556+
transform: translate(50%, 50%);
71557+
}
71558+
.resizable-container .rc-contour .-n {
71559+
top: 0;
71560+
left: 50%;
71561+
transform: translateX(-50%) translateY(calc(-50% - 1px));
71562+
cursor: n-resize;
71563+
}
71564+
.resizable-container .rc-contour .-s {
71565+
bottom: 0;
71566+
left: 50%;
71567+
transform: translateX(-50%) translateY(calc(50% + 1px));
71568+
cursor: s-resize;
71569+
}
71570+
.resizable-container .rc-contour .-e {
71571+
top: 50%;
71572+
right: 0;
71573+
transform: translateY(-50%) translateX(calc(50% + 1px));
71574+
cursor: e-resize;
71575+
}
71576+
.resizable-container .rc-contour .-w {
71577+
top: 50%;
71578+
left: 0;
71579+
transform: translateY(-50%) translateX(calc(-50% - 1px));
71580+
cursor: w-resize;
71581+
}
71582+
.resizable-container .rc-contour.disabled {
71583+
display: none;
71584+
}
71585+
7150771586
/* source/components/ribbon/ribbon.less */
7150871587
:root {
7150971588
--ribbon-background: #757575;

‎lib/metro.css.map‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)