Skip to content

Commit

Permalink
commit 5.0.13
Browse files Browse the repository at this point in the history
  • Loading branch information
@olton
olton committed Oct 31, 2024
2 parents b3d9362 + ebb3bd2 commit eee7a32
Show file tree
Hide file tree
Showing 16 changed files with 445 additions and 162 deletions.
6 changes: 5 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,17 @@
# Changelog

### 5.0.13
+ [x] Update Sidenav Counter, added role, theme
+ [x] Update NavView (save compact state)
+ [x] Set default size for body 100vh

### 5.0.12
+ [x] Update components for themes
+ [x] Update NavView (save compact state)
+ [x] Update sizing css, added `h-10, h-66, h-80, h-90`
+ [x] Improve Spinner button hold event
+ [x] Fix Calendar duplicate day 27 for october


### 5.0.11
+ [x] Fix G.number()
+ [x] Bugs fixes
Expand Down
251 changes: 166 additions & 85 deletions __html__/navview.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,124 +7,205 @@
<link href="../lib/icons.css" rel="stylesheet">

<title>Test Navview - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body class="cloak">
<nav data-role="appbar">
<span class="app-bar-item-static">Navview</span>
<div class="app-bar-item-static">
<input type="checkbox" data-role="theme-switcher" data-state="light"/>
</div>
</nav>

<div id="navview" data-role="navview" data-expand-point="lg" data-initial-view="expand">
<nav class="navview-pane">
<button class="pull-button">
<span class="mif-menu"></span>
</button>
<div data-role="navview" data-expand-point="md">
<div class="navview-pane">
<div class="logo-container">
<button class="pull-button">
<span class="mif-menu"></span>
</button>
</div>

<div class="suggest-box">
<div class="suggest-box mt-4">
<input type="text" data-role="input" data-clear-button="false" data-search-button="true">
<button class="holder">
<span class="mif-search"></span>
</button>
</div>

<ul class="navview-menu">
<li>
<a href="#">
<span class="icon"><span class="mif-home"></span></span>
<span class="caption">Home</span>
<ul class="navview-menu" id="side-menu">
<li class="item-header">General</li>
<li id="li-dashboard">
<a href="#dashboard">
<span class="icon"><span class="mif-roofing"></span></span>
<span class="caption">Dashboard</span>
</a>
</li>
<li id="li-widgets">
<a href="#widgets">
<span class="icon"><span class="mif-build"></span></span>
<span class="caption">Widgets</span>
</a>
</li>
<li id="li-tables">
<a href="#tables">
<span class="icon"><span class="mif-table"></span></span>
<span class="caption">Tables</span>
</a>
</li>
<li id="li-ui-elements">
<a href="#ui-elements">
<span class="icon"><span class="mif-group-by-ref"></span></span>
<span class="caption">UI Elements</span>
</a>
</li>
<li id="li-form-elements">
<a href="#form-elements">
<span class="icon"><span class="mif-insert-template"></span></span>
<span class="caption">Form Elements</span>
</a>
</li>

<li class="item-separator"></li>

<li class="item-header">Main pages</li>
<li class="item-header">Information</li>
<li id="li-windows">
<a href="#windows">
<span class="icon"><span class="mif-windows"></span></span>
<span class="caption">Windows</span>
</a>
</li>
<li id="li-dialogs">
<a href="#dialogs">
<span class="icon"><span class="mif-dynamic_feed"></span></span>
<span class="caption">Dialogs</span>
</a>
</li>
<li id="li-infobox">
<a href="#infobox">
<span class="icon"><span class="mif-info_outline"></span></span>
<span class="caption">Info Boxes</span>
</a>
</li>
<li id="li-hints">
<a href="#hints">
<span class="icon"><span class="mif-mark_chat_unread"></span></span>
<span class="caption">Hints &amp; Popovers</span>
</a>
</li>
<li id="li-notify">
<a href="#notify">
<span class="icon"><span class="mif-notifications"></span></span>
<span class="caption">Notifies</span>
</a>
</li>

<li>
<a href="#">
<li class="item-header">Navigation</li>
<li id="li-appbar">
<a href="#appbar">
<span class="icon"><span class="mif-apps"></span></span>
<span class="caption">Apps</span>
<span class="caption">Appbar</span>
</a>
</li>
<li class="active">
<a href="#">
<span class="icon"><span class="mif-gamepad"></span></span>
<span class="caption">Games</span>
<li id="li-ribbon-menu">
<a href="#ribbon-menu">
<span class="icon"><span class="mif-dashboard"></span></span>
<span class="caption">Ribbon Menu</span>
</a>
</li>
<li>
<li id="li-menus">
<a href="#menus">
<span class="icon"><span class="mif-menu_open"></span></span>
<span class="caption">Menus &amp; Sidebars</span>
</a>
</li>

<li class="item-header">Components</li>
<li id="li-streamer">
<a href="#streamer">
<span class="icon"><span class="mif-film"></span></span>
<span class="caption">Streamer</span>
</a>
</li>
<li id="li-wizards">
<a href="#wizards">
<span class="icon"><span class="mif-magic-wand"></span></span>
<span class="caption">Wizards</span>
</a>
</li>
<li id="li-chat">
<a href="#">
<span class="icon"><span class="mif-envelop"></span></span>
<span class="caption">Email</span>
<div class="badges">
<span class="badge inline alert">10</span>
<span class="badge inline info">5</span>
</div>
<span class="hotkey">Ctrl+E</span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<span class="icon"><span class="mif-music"></span></span>
<span class="caption">Music</span>
<span class="hotkey">Ctrl+M</span>
</a>
<ul data-role="dropdown">
<li>
<a href="#">
<span class="icon"><span class="mif-gamepad"></span></span>
<span class="caption">Games</span>
</a>
</li>
<li>
<a href="#">
<span class="icon"><span class="mif-film"></span></span>
<span class="caption">Movies</span>
</a>
</li>
</ul>
</li>
<li class="disabled">
<span class="icon"><span class="mif-chat"></span></span>
<span class="caption">Chat</span>
</a>
</li>
<li id="li-tabs">
<a href="#">
<span class="icon"><span class="mif-images"></span></span>
<span class="caption">Images</span>
<span class="icon"><span class="mif-folder-open2"></span></span>
<span class="caption">Tabs &amp; PageControl</span>
</a>
</li>

<li class="item-separator"></li>
<li class="item-header">Samples Pages</li>
<li id="li-signin">
<a href="#signin">
<span class="icon"><span class="mif-person_add_alt"></span></span>
<span class="caption">SignIn &amp; Register</span>
</a>
</li>
<li id="li-errors">
<a href="#errors">
<span class="icon"><span class="mif-cancel1"></span></span>
<span class="caption">Errors &amp; Maintains</span>
</a>
</li>
<li id="li-support">
<a href="#support">
<span class="icon"><span class="mif-support_agent"></span></span>
<span class="caption">Support &amp; Help</span>
</a>
</li>
<li id="li-ecommerce">
<a href="#ecommerce">
<span class="icon"><span class="mif-add-shopping-cart"></span></span>
<span class="caption">E-Commerce</span>
</a>
</li>
<li id="li-email">
<a href="#email">
<span class="icon"><span class="mif-email"></span></span>
<span class="caption">Work with Emails</span>
</a>
</li>
<li id="li-multimedia">
<a href="#multimedia">
<span class="icon"><span class="mif-youtube"></span></span>
<span class="caption">Multimedia</span>
</a>
</li>

<li>
<a href="#">
<span class="icon"><span class="mif-folder"></span></span>
<span class="caption">Documents</span>
<li class="item-header mt-auto"></li>
<li id="li-information">
<a href="#about">
<span class="icon"><span class="mif-info1"></span></span>
<span class="caption">About</span>
</a>
</li>
</ul>
</nav>

<div class="navview-content pl-4-md pr-4-md">
<h1>
<button id="pane-toggle" class="button square d-none-md"><span class="mif-menu" ></span></button>
What is?
</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<button onclick="Metro.getPlugin('#navview', 'navview').pullClick(this)" class="button">Close menu</button>
</div>

<div class="navview-content">
<div class="navview-content-inner">
<div data-role="appbar" class="bg-reserve-steppe pos-absolute border-bottom bd-default" data-expand-point="fs">
<div class="app-bar-item-static">
<div class="text-bold enlarge-2" id="content-title">[...]</div>
</div>

<div class="app-bar-item-static ml-auto">
<div data-role="clock"></div>
</div>
<div class="app-bar-item-static">
<input type="checkbox" data-role="theme-switcher"/>
</div>

</div>

<div id="page-content"></div>
</div>
</div>
</div>


<script src="../lib/metro.js"></script>
<script>
</script>
</body>
</html>
58 changes: 58 additions & 0 deletions __html__/sidenav-counter.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!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>
<style>
body {
padding-top: 50px;
}
</style>
</head>
<body class="m4-cloak">
<nav data-role="appbar">
<span class="app-bar-item">Any</span>
<div class="app-bar-item no-hover">
<input type="checkbox" data-role="theme-switcher" data-state="dark"/>
</div>
<button class="button" id="toggle">Toggle</button>
</nav>
<ul data-role="sidenav-counter" data-expand-point="md" data-toggle="#toggle" id="menu">
<li><a href="#">
<span class="mif-apps icon"></span>
<span class="title">all items</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-vpn-lock icon"></span>
<span class="title">websites</span>
<span class="counter">0</span>
</a></li>
<li class="active"><a href="#">
<span class="mif-drive-eta icon"></span>
<span class="title">Virtual machines</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-cloud icon"></span>
<span class="title">Cloud services</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-database icon"></span>
<span class="title">SQL Databases</span>
<span class="counter">0</span>
</a></li>
<li><a href="#">
<span class="mif-cogs icon"></span>
<span class="title">Automation</span>
<span class="counter">0</span>
</a></li>
</ul>
<script src="../lib/metro.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion lib/metro.all.css
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions lib/metro.all.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion lib/metro.css
View file

Large diffs are not rendered by default.

36 changes: 18 additions & 18 deletions lib/metro.js
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"author": "Serhii Pimenov <[email protected]>",
"name": "@olton/metroui",
"version": "5.0.12",
"version": "5.0.13",
"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",
Expand Down Expand Up @@ -37,7 +37,7 @@
"deploy": "node deploy.cjs",
"deploy:dev": "node deploy-dev.cjs",
"pub": "npm publish --access public",
"test": "easytest --include='__tests__/*.test.js' --skip='gravatar,touch,sidebar,list.html'",
"test": "easytest --include='__tests__/*.test.js' --skip='gravatar,touch,sidebar,list.html,audio-player'",
"test:abc": "easytest --include='abc/accordion.test.js' --coverage --verbose --dom --errors"
},
"browserslist": [
Expand Down
1 change: 1 addition & 0 deletions source/common-css/base-theme.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
--border-color: #e8e8e8;
--link-color: #5a87cb;
--link-color-hover: #0056B3FF;
--selected-color: #1FB1F8FF;

--selected-row-background: #f5f8fe;
--selected-item-background: #d4e2ff;
Expand Down
Loading

0 comments on commit eee7a32

Please sign in to comment.