improved d-menu

olton · May 7, 2024 · a8b4435 · a8b4435
2 parents 11d9f8a + 6e45911
commit a8b4435
Show file tree

Hide file tree

Showing 17 changed files with 140 additions and 60 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,3 @@
-build
 .github
 cypress
 icons-extractor

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+### 5.0.2
++ [x] Improved `d-menu`, fix interacts with other components (`treeview`, `sidenav-m3`, `app-bar`)
+
 ### 5.0.1
 + [x] Fixed button `outline` style
 + [x] Improved `d-menu` 

diff --git a/lib/metro.all.js b/lib/metro.all.js
diff --git a/lib/metro.css b/lib/metro.css
diff --git a/lib/metro.js b/lib/metro.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "author": "Serhii Pimenov <[email protected]>",
   "name": "@olton/metroui",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style",
   "keywords": [
     "metro",

diff --git a/source/components/app-bar/app-bar.js b/source/components/app-bar/app-bar.js
@@ -50,7 +50,7 @@
             var hamburger, menu, elementColor = Utils.getStyleOne(element, "background-color");
 
             element.addClass("app-bar");
-            console.log(elementColor)
+            // console.log(elementColor)
             hamburger = element.find(".hamburger");
             if (hamburger.length === 0) {
                 hamburger = $("<button>").attr("type", "button").addClass("hamburger menu-down");

diff --git a/source/components/app-bar/app-bar.less b/source/components/app-bar/app-bar.less
@@ -120,11 +120,10 @@
     }
 
     .app-bar-menu {
-        .d-menu, .v-menu {
+        .v-menu {
             box-shadow: none;
             position: relative;
             width: 100%;
-            background-color: @light;
         }
     }
 
@@ -137,13 +136,6 @@
     }
 
     .app-bar-container {
-        .d-menu {
-            background-color: @light;
-            position: absolute;
-            width: auto;
-            .default-shadow();
-        }
-
         .v-menu {
             position: absolute;
             float: left;
@@ -222,12 +214,6 @@
         .d-menu {
             position: absolute;
             width: auto;
-            .default-shadow();
-
-            li, a {
-                height: 38px;
-                line-height: 38px;
-            }
         }
 
         .v-menu {

diff --git a/source/components/d-menu/d-menu.less b/source/components/d-menu/d-menu.less
@@ -97,7 +97,7 @@
     .icon {
         position: absolute;
         left: 8px;
-        top: 6px;
+        top: 5px;
         width: 16px;
         height: 16px;
         font-size: 16px;

diff --git a/source/components/sidenav-m3/sidenav-m3.less b/source/components/sidenav-m3/sidenav-m3.less
@@ -91,24 +91,12 @@
         width: 100%;
         float: none;
 
-        a {
-            padding: 0 1rem 0 3rem;
-            text-decoration: none;
-        }
-
         li {
             border-top: 1px solid @borderColor;
         }
 
-        .icon {
-            .square(24, px);
-            font-size: 22px;
-            line-height: 24px;
-            vertical-align: middle;
-            text-align: center;
-            position: absolute;
-            left: .625rem;
-            top: 50%;
+        a {
+            border-radius: 0;
         }
     }
 }

diff --git a/source/components/tabs/tabs.less b/source/components/tabs/tabs.less
@@ -183,7 +183,6 @@
         .d-menu {
             position: absolute;
             width: auto;
-            .default-shadow();
         }
     }
 

diff --git a/source/components/treeview/treeview.js b/source/components/treeview/treeview.js
@@ -118,14 +118,15 @@
             if (data.actions) {
                 const actionsHolder = $("<div class='dropdown-button'>").addClass("actions-holder");
                 const actionsListTrigger = $("<span class='actions-list-trigger'>").text("⋮").appendTo(actionsHolder)
-                const actionsList = $("<ul data-role='dropdown' class='d-menu context actions-list'>").appendTo(actionsHolder)
+                const actionsList = $("<ul data-role='dropdown' class='d-menu actions-list'>").appendTo(actionsHolder)
                 node.append(actionsHolder)
                 for(let a of data.actions) {
                     if (a.type && a.type === "divider") {
                         $("<li>").addClass("divider").appendTo(actionsList)
                     } else {
                         const icon = a.icon ? $(a.icon).addClass("icon").outerHTML() : ""
-                        const li = $(`<li><a href="#">${icon} ${a.caption}</a></li>`).appendTo(actionsList)
+                        const caption = `<span class="caption">${a.caption}</span>`
+                        const li = $(`<li><a href="#">${icon} ${caption}</a></li>`).appendTo(actionsList)
                         if (a.cls) {
                             li.addClass(a.cls)
                         }
@@ -135,7 +136,7 @@
                     }
                 }
                 actionsList.on(Metro.events.leave, (e) => {
-                    Metro.getPlugin(actionsList, "dropdown").close()
+                    // Metro.getPlugin(actionsList, "dropdown").close()
                 })
             }
 

diff --git a/source/components/treeview/treeview.less b/source/components/treeview/treeview.less
@@ -19,7 +19,7 @@
         cursor: pointer;
         line-height: 1.25rem;
 
-        .icon {
+        & > .icon {
             position: absolute;
             width: 16px;
             height: 16px;
@@ -34,7 +34,7 @@
             }
         }
 
-        .caption {
+        & > .caption {
             position: relative;
             color: #5e5e5e;
 
@@ -44,7 +44,7 @@
             }
         }
 
-        .icon ~ .caption {
+        & > .icon ~ .caption {
             margin-left: 20px;
         }
 
@@ -130,7 +130,7 @@
         padding-left: 1rem;
 
         .icon {
-            left: 1rem;
+            //left: 1rem;
         }
     }
 }

diff --git a/source/core/metro.js b/source/core/metro.js
@@ -19,8 +19,8 @@
 
     var Metro = {
 
-        version: "5.0.1",
-        build_time: "07.05.2024, 21:11:51",
+        version: "5.0.2",
+        build_time: "07.05.2024, 22:15:32",
         buildNumber: 0,
         isTouchable: isTouch,
         fullScreenEnabled: document.fullscreenEnabled,
@@ -146,10 +146,12 @@
             FS: "(min-width: 0px)",
             XS: "(min-width: 360px)",
             SM: "(min-width: 576px)",
+            LD: "(min-width: 640px)",
             MD: "(min-width: 768px)",
             LG: "(min-width: 992px)",
             XL: "(min-width: 1200px)",
-            XXL: "(min-width: 1452px)"
+            XXL: "(min-width: 1452px)",
+            XXXL: "(min-width: 2000px)"
         },
 
         media_sizes: {
@@ -160,20 +162,23 @@
             MD: 768,
             LG: 992,
             XL: 1200,
-            XXL: 1452
+            XXL: 1452,
+            XXXL: 2000
         },
 
         media_mode: {
             FS: "fs",
             XS: "xs",
             SM: "sm",
+            LD: "ld",
             MD: "md",
             LG: "lg",
             XL: "xl",
-            XXL: "xxl"
+            XXL: "xxl",
+            XXXL: "xxxl"
         },
 
-        media_modes: ["fs","xs","sm","md","lg","xl","xxl"],
+        media_modes: ["fs","xs","sm","ld","md","lg","xl","xxl","xxxl"],
 
         actions: {
             REMOVE: 1,

diff --git a/tests/app-bar.html b/tests/app-bar.html
@@ -4,14 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <link href="../lib/metro.css" rel="stylesheet">
+    <link href="../lib/icons.css" rel="stylesheet">
 
     <title>Test App bar - Metro 4 :: Popular HTML, CSS and JS library</title>
 </head>
 <body class="m4-cloak" style="padding-top: 50px;">
 <div class="container">
     <h1>App-bar test page</h1>
 
-    <div data-role="app-bar" data-expand-point="md" class="bg-dark fg-white">
+    <div data-role="app-bar" data-expand-point="md">
         <a href="#" class="brand no-hover">
             <span style="width: 40px; height: 40px; line-height: 40px" class="text-center border bd-darkGray border-radius">m<sup>4</sup></span>
         </a>
@@ -21,10 +22,28 @@ <h1>App-bar test page</h1>
             <li>
                 <a href="#" class="dropdown-toggle">Products</a>
                 <ul class="d-menu" data-role="dropdown">
-                    <li><a href="#">Windows 10</a></li>
-                    <li><a href="#">Office 365</a></li>
-                    <li class="divider bg-lightGray"></li>
-                    <li><a href="#">Skype</a></li>
+                    <li><a href="#">
+                        <span class="icon mif-codepen"></span>
+                        <span class="caption">Go to Definition</span>
+                        <span class="hotkey">Ctrl+F12</span>
+                    </a></li>
+                    <li><a href="#">Go to Type Definition</a></li>
+                    <li class="disabled"><a href="#">
+                        <span class="caption">Go to Type Implementation</span>
+                        <span class="hotkey">Ctrl+F12</span></a></li>
+                    <li><a href="#">Go to References<span class="hotkey">Alt+Shift+F12</span></a></li>
+                    <li>
+                        <a href="#" class="dropdown-toggle">Peek</a>
+                        <ul class="d-menu" data-role="dropdown">
+                            <li><a href="#"><span class="caption">Find All References</span></a></li>
+                            <li><a href="#"><span class="caption">Find All Implementations</span></a></li>
+                            <li><a href="#"><span class="caption">Show Call Hierarchy</span></a></li>
+                        </ul>
+                    </li>
+                    <li class="divider"></li>
+                    <li><a href="#">Find All References</a></li>
+                    <li><a href="#">Find All Implementations</a></li>
+                    <li><a href="#">Show Call Hierarchy</a></li>
                 </ul>
             </li>
             <li><a href="#">Blog</a></li>

diff --git a/tests/sidenav.html b/tests/sidenav.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <link href="../lib/metro.css" rel="stylesheet">
+    <link href="../lib/icons.css" rel="stylesheet">
+
+    <title>Test Sidenav - Metro 4 :: Popular HTML, CSS and JS library</title>
+
+</head>
+<body class="m4-cloak">
+<div class="container">
+    <h1>Sidenav test page</h1>
+
+    <div class="example">
+        <ul class="sidenav-m3">
+            <li class="title">Title 1</li>
+            <li class="active"><a href="#"><span class="mif-home icon"></span>Dashboard</a></li>
+            <li class="stick-right bg-red"><a href="#"><span class="mif-cog icon"></span>Layouts</a></li>
+            <li class="stick-left bg-green">
+                <a class="dropdown-toggle" href="#"><span class="mif-tree icon"></span>Sub menu</a>
+                <ul class="d-menu" data-role="dropdown" style="display: none;">
+                    <li><a href=""><span class="mif-vpn-lock icon"></span> Subitem 1</a></li>
+                    <li><a href="">Subitem 2</a></li>
+                    <li><a href="">Subitem 3</a></li>
+                    <li><a href="">Subitem 4</a></li>
+                    <li class="disabled"><a href="">Subitem 5</a></li>
+                </ul>
+            </li>
+            <li class=""><a href="#">Thread item</a></li>
+            <li class="disabled"><a href="#">Disabled item</a></li>
+
+            <li class="title">Title 2</li>
+            <li><a href="#">Other Item 1</a></li>
+            <li><a href="#">Other item 2</a></li>
+            <li><a href="#">Other item 3</a></li>
+        </ul>
+    </div>
+
+    <div class="example mt-10 d-none">
+        <div class="dropdown-button">
+            <button class="button dropdown-toggle">Button</button>
+            <ul class="d-menu" data-role="dropdown">
+                <li><a href="#">
+                    <span class="icon mif-codepen"></span>
+                    <span class="caption">Go to Definition</span>
+                    <span class="hotkey">Ctrl+F12</span>
+                </a></li>
+                <li><a href="#">Go to Type Definition</a></li>
+                <li class="disabled"><a href="#">
+                    <span class="caption">Go to Type Implementation</span>
+                    <span class="hotkey">Ctrl+F12</span></a></li>
+                <li><a href="#">Go to References<span class="hotkey">Alt+Shift+F12</span></a></li>
+                <li>
+                    <a href="#" class="dropdown-toggle">Peek</a>
+                    <ul class="d-menu" data-role="dropdown">
+                        <li><a href="#"><span class="caption">Find All References</span></a></li>
+                        <li><a href="#"><span class="caption">Find All Implementations</span></a></li>
+                        <li><a href="#"><span class="caption">Show Call Hierarchy</span></a></li>
+                    </ul>
+                </li>
+                <li class="divider"></li>
+                <li><a href="#">Find All References</a></li>
+                <li><a href="#">Find All Implementations</a></li>
+                <li><a href="#">Show Call Hierarchy</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<script src="../lib/metro.js"></script>
+<script>
+    // $(function(){
+    //     $("#block1").dropdown();
+    //     $("#block2").dropdown();
+    // })
+</script>
+</body>
+</html>