From b88c78e3cf2bef22aa2f1c4d0bf305e303bc15f0 Mon Sep 17 00:00:00 2001 From: Koren Lev Date: Thu, 27 Jul 2017 16:42:15 +0300 Subject: adding calipso ui Change-Id: Ifa6f63daebb07f45580f747341960e898fdb00c4 Signed-off-by: Koren Lev --- ui/client/accounts-config.js | 11 + ui/client/css/accordionNavMenu.styl | 259 ++++++ ui/client/css/components.styl | 187 +++++ ui/client/css/d3graph.styl | 47 ++ ui/client/css/flex.styl | 23 + ui/client/css/header.styl | 118 +++ ui/client/css/landing.css | 122 +++ ui/client/css/loading.styl | 19 + ui/client/css/modals.styl | 10 + ui/client/css/plugins.styl | 4 + ui/client/css/wizard.css | 28 + ui/client/lib/jquery.multilevelpushmenu.css | 120 +++ ui/client/lib/jquery.multilevelpushmenu.js | 1148 +++++++++++++++++++++++++++ ui/client/main.html | 18 + ui/client/main.js | 10 + ui/client/main.styl | 85 ++ ui/client/style/d3plusgraph.css | 14 + ui/client/style/landingpage.css | 138 ++++ ui/client/style/multilevelorig.css | 43 + ui/client/style/threeTest.css | 65 ++ ui/client/style/threeTest2.css | 41 + ui/client/templates/envdialog.html | 131 +++ ui/client/templates/header.html | 13 + ui/client/templates/mainPage.html | 207 +++++ 24 files changed, 2861 insertions(+) create mode 100644 ui/client/accounts-config.js create mode 100644 ui/client/css/accordionNavMenu.styl create mode 100644 ui/client/css/components.styl create mode 100644 ui/client/css/d3graph.styl create mode 100644 ui/client/css/flex.styl create mode 100644 ui/client/css/header.styl create mode 100644 ui/client/css/landing.css create mode 100644 ui/client/css/loading.styl create mode 100644 ui/client/css/modals.styl create mode 100644 ui/client/css/plugins.styl create mode 100644 ui/client/css/wizard.css create mode 100644 ui/client/lib/jquery.multilevelpushmenu.css create mode 100644 ui/client/lib/jquery.multilevelpushmenu.js create mode 100644 ui/client/main.html create mode 100644 ui/client/main.js create mode 100644 ui/client/main.styl create mode 100644 ui/client/style/d3plusgraph.css create mode 100644 ui/client/style/landingpage.css create mode 100644 ui/client/style/multilevelorig.css create mode 100644 ui/client/style/threeTest.css create mode 100644 ui/client/style/threeTest2.css create mode 100644 ui/client/templates/envdialog.html create mode 100644 ui/client/templates/header.html create mode 100644 ui/client/templates/mainPage.html (limited to 'ui/client') diff --git a/ui/client/accounts-config.js b/ui/client/accounts-config.js new file mode 100644 index 0000000..68901ea --- /dev/null +++ b/ui/client/accounts-config.js @@ -0,0 +1,11 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others / +// / +// All rights reserved. This program and the accompanying materials / +// are made available under the terms of the Apache License, Version 2.0 / +// which accompanies this distribution, and is available at / +// http://www.apache.org/licenses/LICENSE-2.0 / +///////////////////////////////////////////////////////////////////////////////////////// +Accounts.ui.config({ + passwordSignupFields: 'USERNAME_ONLY', +}); \ No newline at end of file diff --git a/ui/client/css/accordionNavMenu.styl b/ui/client/css/accordionNavMenu.styl new file mode 100644 index 0000000..b5ba1d5 --- /dev/null +++ b/ui/client/css/accordionNavMenu.styl @@ -0,0 +1,259 @@ +// for WIKI + +.os-accordion-nav-menu + .sm-menu-items-list + >.os-accordion-tree-node + >a + display none + +.left-nav-content-wiki { + width: 300px; + height: 100vh + background brand-blue + top 90px + position fixed +} + + +.left-nav-menu + float: left; + min-width: 100px; + outline: 0; + position: relative; + //margin-top -40px + shadow-level(1) + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: 0; + .menu-footer, .menu-header + background: brand-blue; + color: #f0f0f0; + float: left; + font-weight: normal; + line-height: 50px; + font-size: 0.8em; + width: 100%; + border-bottom 1px solid black + .menu-footer + text-align: center; + .menu-header + height: 39px; + p + font-size 1.7em + padding 6px + margin 0px + + + i + cursor pointer + position absolute + top -5px + right 0 + display block + color white + padding-right 5px + trans() + &:hover + color spark-blue + opacity 0.8 + + ul + list-style: none; + margin: 0; + padding: 0; + li + display: block; + float: left; + position: relative; + width: 100%; + .menu-label + background: #f0f0f0; + border-radius: 100%; + color: #555555; + font-size: 11px; + font-weight: 800; + line-height: 18px; + min-width: 20px; + padding: 1px 2px 1px 1px; + position: absolute; + right: 18px; + text-align: center; + top: 14px; + a + background: brand-blue; + color: #f0f0f0; + float: left; + font-size: 13px; + overflow: hidden; + padding: 14px 22px; + position: relative; + text-decoration: none; + white-space: nowrap; + width: 100%; + trans() + &:hover + background: @background - 20%; + i + float: left; + font-size: 16px; + line-height: 18px; + text-align: left; + width: 34px; + +.left-nav-menu ul li .menu-label { + background: #f0f0f0; + border-radius: 100%; + color: #555555; + font-size: 11px; + font-weight: 800; + line-height: 18px; + min-width: 20px; + padding: 1px 2px 1px 1px; + position: absolute; + right: 18px; + text-align: center; + top: 14px; +} + +.left-nav-menu + ul + .submenu + display: none; + position: static; + width: 100%; + .submenu-indicator + line-height: 16px + li + clear: both; + width: 100%; + ul.submenu + display: none; + position: static; + width: 100%; + overflow: hidden; + a + background: brand-blue - 10% + border-left: solid 6px transparent; + border-top: none; + float: left; + font-size: 11px; + position: relative; + width: 100%; + &:hover + background @background - 20% + + +.left-nav-menu ul .submenu li .menu-label { + background: #f0f0f0; + border-radius: 100%; + color: #555555; + font-size: 11px; + font-weight: 800; + line-height: 18px; + min-width: 20px; + padding: 1px 2px 1px 1px; + position: absolute; + right: 18px; + text-align: center; + top: 12px; + top: 14px; +} + +.left-nav-menu ul .submenu li a + padding-left 40px + background brand-blue - 20% + +.left-nav-menu ul .submenu > li > ul.submenu > li > a + padding-left: 40px + background brand-blue - 30% + +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 40px; + background brand-blue - 40% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 50px; + background brand-blue - 50% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 60px; + background brand-blue - 60% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 70px; + background brand-blue - 70% +.left-nav-menu ul .submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > ul.submenu > li > a + padding-left: 80px; + background brand-blue - 80% + +.left-nav-menu .sm-open-close-indicator + float: right; + + i.fa + font-size: 10px; + width: 10px; + +.left-nav-menu .submenu-indicator { + -moz-transition: "transform .3s linear"; + -o-transition: "transform .3s linear"; + -webkit-transition: "transform .3s linear"; + transition: "transform .3s linear"; + float: right; + font-size: 20px; + line-height: 19px; + position: absolute; + right: 22px; +} + +.left-nav-menu .submenu-indicator-minus > .submenu-indicator { + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -o-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} + +.left-nav-menu > ul > li.active > a { + background: #3b424d; + color: #ffffff; +} + + +.left-nav-menu > ul > li > a { border-bottom: solid 1px #3b424d; } + +.ink { + -moz-transform: scale(0); + -ms-transform: scale(0); + -o-transform: scale(0); + -webkit-transform: scale(0); + background: rgba(255, 255, 255, 0.3); + border-radius: 100%; + display: block; + position: absolute; + transform: scale(0); +} + +.animate-ink { + -moz-animation: ripple .3s linear; + -ms-animation: ripple .3s linear; + -o-animation: ripple .3s linear; + -webkit-animation: ripple .3s linear; + animation: ripple .3s linear; +} + +// @-moz-keyframes 'ripple' { +// 100% { +// opacity: 0; +// transform: scale(2.5); +// } +// } +// @-webkit-keyframes 'ripple' { +// 100% { +// opacity: 0; +// transform: scale(2.5); +// } +// } +// @keyframes 'ripple' { +// 100% { +// opacity: 0; +// transform: scale(2.5); +// } +// } diff --git a/ui/client/css/components.styl b/ui/client/css/components.styl new file mode 100644 index 0000000..a4b2f04 --- /dev/null +++ b/ui/client/css/components.styl @@ -0,0 +1,187 @@ +.main-layout + margin 30px 30px 30px 330px + +.main-layout-no-nav + margin 0px + +.site-sidenav + width: 300px; + min-width: 300px; + max-width: 300px; + //height: 100vh + height: initial; + align-self: stretch; + min-height: 95vh; + background brand-blue + trans() + +.site-sidenav-collapse + width: 30px + min-width: 30px + max-width: 30px + min-height 100vh + background brand-blue + color white + margin-top -40px + trans() + +.cards + color #FFF + padding 20px + margin-bottom 30px + .material-icons + padding-top 20px + shadow-level(1) + trans() + &:hover + shadow-level(2) + &.not-active + shadow-level (0) + &.blue + background-color spark-blue + &.green + background-color status-green + &.grey + background-color dk-gray1 + &.light-grey + background-color light-grey + &.dk-blue + background-color dk-blue + &.orange + background-color status-orange + &.red + background-color status-red + &.white + background #FFF + color #000 + &.blue-text + color spark-blue + &.green-text + .fa, .material-icons + color status-green + h5 + border-bottom 3px solid status-green + p.active + padding-top 3px + font-size 1.2em + color status-green + &.orange-text + .fa, .material-icons + color status-orange + h5 + border-bottom 3px solid status-orange + p.active + padding-top 3px + font-size 1.2em + color status-orange + &.red-text + .fa, .material-icons + color status-red + h5 + border-bottom 3px solid status-red + p.active + padding-top 3px + font-size 1.2em + color status-red + h3 + color spark-blue + font-size 2em + border-bottom 3px solid spark-blue + p.text + color #000 + .fa, .material-icons + font-size 4em + &.title + h4 + margin 0 + text-align center + color spark-blue + +.cards-w250 + @extend .cards + padding 20px 5px + max-height 100px + width: 250px + max-width: 250px + min-width: 250px + text-align center + .fa, .material-icons + font-size 3em + p + margin 0 + span + font-size 1.3em + font-weight bold + +.cards-w300 + @extend .cards + max-height 100px + width: 300px + max-width: 300px + min-width: 300px; + p + font-size 1.1em + span + font-size 1.3em + font-weight bold + +.cards-w300-h60 + @extend .cards-w300 + font-size 0.9em + height 60px + .fa, .material-icons + font-size 2em + &:hover + shadow-level(1) + +.cards-flex-col-h120 + @extend .cards + height: 120px + max-height 120px + min-height 120px + h5 + padding 0px + margin 0px + a + color spark-blue + p + font-size 1em + padding 0px + margin 0px + span + font-size 1.3em + font-weight bold + +.cards-450 + @extend .cards + width: 520px + max-width: 520px + min-width: 520px + p + font-size 1.1em + span + font-size 1.3em + font-weight bold + .material-icons + color spark-blue + font-size 5em + padding 40px 30px + +.cards-flex-col-h500 + @extend .cards + margin-right 30px + height 500px + max-height 500px + min-height 500px + p + font-size 1.1em + span + font-size 1.3em + font-weight bold + .material-icons + color spark-blue + font-size 8em + padding 40px + +.margin-top-40 + margin-top 40px diff --git a/ui/client/css/d3graph.styl b/ui/client/css/d3graph.styl new file mode 100644 index 0000000..6d53c45 --- /dev/null +++ b/ui/client/css/d3graph.styl @@ -0,0 +1,47 @@ + +.node circle { + fill: steelblue; +} +.node text { + font: bold 14px sans-serif; + fill: rgb(16, 15, 15); + text-shadow: 0 0px 0 #fff; + /*font-size: 0.8em;*/ +} +.link { + /* + fill: #1313AB; + stroke: #1313AB; + */ +} +.different-groups{ + stroke: #999; +} +.default { + stroke: #fbb; + stroke-width: 4px; +} +.outline { + stroke: #844; + stroke-width: 6px; +} + +div.tooltip { + position: absolute; + text-align: left; + opacity 1 + font: bold 18px sans-serif !important; + /* width: 60px; */ + /* height: 28px; */ + padding: 20px; + font: 16px sans-serif; + background: dk-gray1; + color white + border: 2px solid stark-blue + pointer-events: none; +} +.background { + stroke: white; + stroke-width: 1px; + fill: white; +} diff --git a/ui/client/css/flex.styl b/ui/client/css/flex.styl new file mode 100644 index 0000000..e780d78 --- /dev/null +++ b/ui/client/css/flex.styl @@ -0,0 +1,23 @@ +// flex grid system +.flex-box + list-style none + display flex + flex-wrap wrap + // border 2px solid red + .flex-box-1 + flex 1 + // border 2px solid green + .flex-box-2 + flex 2 + .flex-box-3 + flex 3 + .flex-box-4 + flex 4 +.flex-col + flex-direction column +.justify-content-around + justify-content space-around +.justify-content-between + justify-content space-between +.justify-content-start + justify-content flex-start \ No newline at end of file diff --git a/ui/client/css/header.styl b/ui/client/css/header.styl new file mode 100644 index 0000000..ebc3ff6 --- /dev/null +++ b/ui/client/css/header.styl @@ -0,0 +1,118 @@ +.os-alarm-icons + display: flex; + flex-flow: row; + justify-content: flex-end; + + padding-top 50px + //background-color dk-gray1 + background-color: brand-blue + border-bottom: solid 1px black; + + .breadcrumb + background-color dk-gray1 + + .alarm-icons + padding-top 15px + padding-right 10px + color #FFF + //text-align right + + .material-icons:hover + cursor pointer + color spark-grey + trans() + + .dropdown + display inline + trans() + + .dropdown-menu-right + right 25px + + .dropdown-header + font-size 1.4em + color dk-gray1 + + >a + font-size: 20px; + color dk-gray1 + line-height: 1.42857143; + padding-left: 4px; + +img.navbar-brand.navbar-custom { + padding-left: 40px; +} + +p.navbar-brand.navbar-custom{ + margin: 0px; + padding-left: 95px; + color: #FFF; +} + +nav.navbar-inverse.navbar-custom + background-color: brand-blue + color: #FFF; + a + color: #FFF; + .login-close-text + color: #555; + #login-name-link:hover + color: rgb(63,81,181); + &:hover + color: rgb(63,81,181); + trans() + a.droplist + color: brand-blue + padding: 10px 0px 0px 10px + + .search + position: relative; + color: white + input + height: 30px; + background: brand-blue + // text-indent: 25px; + padding-left: 20px; + border 0px + border-bottom 2px solid spark-grey + width 175px + &:hover, &:active, &:focus + border-bottom 2px solid white + ::-webkit-input-placeholder + color: white + .fa-search + position: absolute; + top: 7px; + + .search-auto-complete + position: absolute; + right: 0; + top: 34px + z-index: 1000; + +.navbar-inverse .navbar-nav > .open > a, +.navbar-inverse .navbar-nav > .open > a:hover, +.navbar-inverse .navbar-nav > .open > a:focus { + color: brand-blue + background-color: #fff; +} + +/* Login form style */ +.sign-in #login-sign-in-link, #login-name-link, #login-name-link.login-link-text { + color: #FFF; + text-decoration: none; +} + +.login-button#login-buttons-open-change-password, +.login-button#login-buttons-password, +.login-button#login-buttons-logout { + background-color: brand-blue + border: brand-blue +} + +.login-button#login-buttons-open-change-password:hover, +.login-button#login-buttons-password:hover, +.login-button#login-buttons-logout:hover { + background-color: rgb(63,81,181); + border: rgb(63,81,181); +} diff --git a/ui/client/css/landing.css b/ui/client/css/landing.css new file mode 100644 index 0000000..59c0806 --- /dev/null +++ b/ui/client/css/landing.css @@ -0,0 +1,122 @@ +/****************************************************************************************/ +/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ +/* */ +/* All rights reserved. This program and the accompanying materials */ +/* are made available under the terms of the Apache License, Version 2.0 */ +/* which accompanies this distribution, and is available at */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/****************************************************************************************/ +/* ======= landging page =======*/ + +a.mdl-button:hover{ + text-decoration: none; +} + +.mdl-button--raised.mdl-button--colored { + background-color: #2196F3; +} + +.mdl-button--accent.mdl-button--accent.mdl-button--raised:hover { + background-color: rgb(63,81,181); + +} + +section.section-margin-50 { + margin: 50px 0; +} + +.background-blue{ + background-color: #2196F3; + color: #f9f9f9; +} +.background-white { + border-color: #FFF; +} + +.background-grey { + background-color: #f9f9f9; +} + +.home-fullscreen { + /* padding: 25px; */ +} + +.mtop-50{ + margin-top: 100px; +} + +.font20{ + font-size: 20px; +} + +.title-border-bottom{ + border-bottom: 5px solid #2196F3; +} +.text-align-center{ + text-align: center; +} + +/* +.home_mockups { + position: relative; + margin-top: 4rem; + margin-bottom: -1rem; + z-index: 3; +} + +.home_mockups_1 { + position: relative; + animation-delay: 0.5s; +} + +.home_mockups_2 { + animation-delay: 1s; +} + +.home_mockups_2, .home_mockups_3 { + position: absolute; + margin: 0 auto; + top: 0; + right: 0; + left: 0; + bottom: 0; +} +*/ + +.box { + margin: 50px; +} + +.box-side{ + margin: 10px 50px; +} +/* ======= End of section =========*/ + +/*====== Main page =======*/ +.logo{ + padding: 10px; +} + +.view-100{ + height: 100vh; +} + +.user-bar{ + background: #42A5F5; + color: #fff; + padding-left: 15px; +} +/* ======= End of section =======*/ + +/*// Rules for sizing the icon.*/ +.material-icons.md-18 { font-size: 21px; } +.material-icons.md-24 { font-size: 24px; } +.material-icons.md-36 { font-size: 36px; } +.material-icons.md-48 { font-size: 48px; } +/*// Rules for using icons as black on a light background.*/ +.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); } +.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); } +/*// Rules for using icons as white on a dark background.*/ +.material-icons.md-light { color: rgba(255, 255, 255, 1); } +.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } +/* ======= End of section ===========*/ diff --git a/ui/client/css/loading.styl b/ui/client/css/loading.styl new file mode 100644 index 0000000..1545b58 --- /dev/null +++ b/ui/client/css/loading.styl @@ -0,0 +1,19 @@ + + +.loading-message { + color: white; + font-size: 2.5em; + font-weight: 300; + font-family: sans-serif; +} + +.sk-spinner-rotating-plane.sk-spinner { + background-color: white; +} + +.landing + .material-icons + font-size 64px + +.margin-50 + margin 80px 0px \ No newline at end of file diff --git a/ui/client/css/modals.styl b/ui/client/css/modals.styl new file mode 100644 index 0000000..f0d4741 --- /dev/null +++ b/ui/client/css/modals.styl @@ -0,0 +1,10 @@ +.modal-header + .material-icons + color spark-blue + +.modal-body + a + color spark-blue + h5 + color spark-blue + border-bottom 2px solid spark-blue diff --git a/ui/client/css/plugins.styl b/ui/client/css/plugins.styl new file mode 100644 index 0000000..cd602ba --- /dev/null +++ b/ui/client/css/plugins.styl @@ -0,0 +1,4 @@ +.graph + width: 100%; + height: 400px; + border: 3px solid spark-blue; \ No newline at end of file diff --git a/ui/client/css/wizard.css b/ui/client/css/wizard.css new file mode 100644 index 0000000..ebac04f --- /dev/null +++ b/ui/client/css/wizard.css @@ -0,0 +1,28 @@ +/****************************************************************************************/ +/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ +/* */ +/* All rights reserved. This program and the accompanying materials */ +/* are made available under the terms of the Apache License, Version 2.0 */ +/* which accompanies this distribution, and is available at */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/****************************************************************************************/ +.btn-mgt-5 { + margin-top: 5px; +} + +.nav > li > a { + color: #2196F3; +} + +.form-horizontal { + margin-top: 25px; +} + +.mdl-button { + color: #2196F3; +} + +.mdl-button:hover { + background-color: rgb(63,81,181); + color: #FFF; +} diff --git a/ui/client/lib/jquery.multilevelpushmenu.css b/ui/client/lib/jquery.multilevelpushmenu.css new file mode 100644 index 0000000..407cda9 --- /dev/null +++ b/ui/client/lib/jquery.multilevelpushmenu.css @@ -0,0 +1,120 @@ +/****************************************************************************************/ +/* Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others */ +/* */ +/* All rights reserved. This program and the accompanying materials */ +/* are made available under the terms of the Apache License, Version 2.0 */ +/* which accompanies this distribution, and is available at */ +/* http://www.apache.org/licenses/LICENSE-2.0 */ +/****************************************************************************************/ +.multilevelpushmenu_wrapper { + position: absolute; + overflow: hidden; + min-width: 100%; + min-height: 100%; + margin: 0; + padding: 0; +} + +.multilevelpushmenu_wrapper .levelHolderClass { + position: absolute; + overflow: hidden; + top: 0; + background: #336ca6; + width: auto; + min-height: 100%; + font-family: 'Open Sans Condensed', sans-serif; + font-size: 1em; + zoom: 1; +} + +.multilevelpushmenu_wrapper .ltr { + margin-left: -100%; + left: 0; + -moz-box-shadow: 5px 0 5px -5px #1f4164; + -webkit-box-shadow: 5px 0 5px -5px #1f4164; + box-shadow: 5px 0 5px -5px #1f4164; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=90,strength=2); +} + +.multilevelpushmenu_wrapper .rtl { + margin-right: -100%; + right: 0; + -moz-box-shadow: 5px 0 5px 5px #1f4164; + -webkit-box-shadow: 5px 0 5px 5px #1f4164; + box-shadow: 5px 0 5px 5px #1f4164; + filter: progid:DXImageTransform.Microsoft.Shadow(color=#1f4164,direction=270,strength=2); +} + +.multilevelpushmenu_wrapper .multilevelpushmenu_inactive { + background: #2e6196; +} + +.multilevelpushmenu_wrapper h2 { + font-size: 1.5em; + line-height: 1em; + font-weight: bold; + color: #1f4164; + padding: 0 .4em 0 .4em; +} + +.multilevelpushmenu_wrapper ul { + list-style: none; + padding: 0; + margin: 0; +} + +.multilevelpushmenu_wrapper li { + cursor: pointer; + border-top: 1px solid #295685; + padding: .4em .4em .4em .4em; +} + +.multilevelpushmenu_wrapper li:last-child { + border-bottom: 1px solid #295685; +} + +.multilevelpushmenu_wrapper li:hover { + background-color: #295685; +} + +.multilevelpushmenu_wrapper a { + display: block; + outline: none; + overflow: hidden; + font-size: 1.5em; + line-height: 1em; + padding: .2em .2em; + text-decoration: none; + color: #fff; +} + +.multilevelpushmenu_wrapper a:hover { + color: #ffe; +} + +.multilevelpushmenu_wrapper .backItemClass { + display: block; + padding: .4em .4em .4em .4em; + background: #2e6196; + border-top: 1px solid #295685; +} + +.multilevelpushmenu_wrapper .floatRight { + float: right; +} + +.multilevelpushmenu_wrapper .floatLeft { + float: left; +} + +.multilevelpushmenu_wrapper .cursorPointer { + cursor: pointer; +} + +.multilevelpushmenu_wrapper .iconSpacing_ltr { + padding: 0 .4em 0 0; +} + +.multilevelpushmenu_wrapper .iconSpacing_rtl { + padding: 0 0 0 .4em; +} \ No newline at end of file diff --git a/ui/client/lib/jquery.multilevelpushmenu.js b/ui/client/lib/jquery.multilevelpushmenu.js new file mode 100644 index 0000000..0b2a24d --- /dev/null +++ b/ui/client/lib/jquery.multilevelpushmenu.js @@ -0,0 +1,1148 @@ +///////////////////////////////////////////////////////////////////////////////////////// +// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others / +// / +// All rights reserved. This program and the accompanying materials / +// are made available under the terms of the Apache License, Version 2.0 / +// which accompanies this distribution, and is available at / +// http://www.apache.org/licenses/LICENSE-2.0 / +///////////////////////////////////////////////////////////////////////////////////////// +/** + * jquery.multilevelpushmenu.js v2.1.4 + * + * Licensed under the MIT license. + * http://www.opensource.org/licenses/mit-license.php + * + * Copyright 2013-2014, Make IT d.o.o. + * http://multi-level-push-menu.make.rs + * https://github.com/adgsm/multi-level-push-menu + */ +(function ( $ ) { + $.fn.multilevelpushmenu = function( options ) { + "use strict"; + var args = arguments, + returnValue = null; + + this.each(function(){ + var instance = this, + $this = $( this ), + $container = ( $this.context != undefined ) ? $this : $( 'body' ), + menu = ( options && options.menu != undefined ) ? options.menu : $this.find( 'nav' ), + clickEventType, dragEventType; + + // Settings + var settings = $.extend({ + container: $container, + containersToPush: null, + menuID: ( ( $container.prop( 'id' ) != undefined && $container.prop( 'id' ) != '' ) ? $container.prop( 'id' ) : this.nodeName.toLowerCase() ) + "_multilevelpushmenu", + wrapperClass: 'multilevelpushmenu_wrapper', + menuInactiveClass: 'multilevelpushmenu_inactive', + menu: menu, + menuWidth: 0, + menuHeight: 0, + collapsed: false, + fullCollapse: false, + direction: 'ltr', + backText: 'Back', + backItemClass: 'backItemClass', + backItemIcon: 'fa fa-angle-right', + groupIcon: 'fa fa-angle-left', + mode: 'overlap', + overlapWidth: 40, + preventItemClick: true, + preventGroupItemClick: true, + swipe: 'both', + durationSlideOut: 400, + durationSlideDown: 500, + durationTransition: 400, + onCollapseMenuStart: function() {}, + onCollapseMenuEnd: function() {}, + onExpandMenuStart: function() {}, + onExpandMenuEnd: function() {}, + onGroupItemClick: function() {}, + onItemClick: function() {}, + onTitleItemClick: function() {}, + onBackItemClick: function() {}, + onMenuReady: function() {}, + onMenuSwipe: function() {} + }, options ); + + // Store a settings reference withint the element's data + if (!$.data(instance, 'plugin_multilevelpushmenu')) { + $.data(instance, 'plugin_multilevelpushmenu', settings); + instance.settings = $.data(instance, 'plugin_multilevelpushmenu'); + } + + // Exposed methods + var methods = { + // Initialize menu + init: function () { + return initialize.apply(this, Array.prototype.slice.call(arguments)); + }, + // Collapse menu + collapse: function () { + return collapseMenu.apply(this, Array.prototype.slice.call(arguments)); + }, + // Expand menu + expand: function () { + return expandMenu.apply(this, Array.prototype.slice.call(arguments)); + }, + // Menu expanded + menuexpanded: function () { + return menuExpanded.apply(this, Array.prototype.slice.call(arguments)); + }, + // Active menu + activemenu: function () { + return activeMenu.apply(this, Array.prototype.slice.call(arguments)); + }, + // Find menu(s) by title + findmenusbytitle: function () { + return findMenusByTitle.apply(this, Array.prototype.slice.call(arguments)); + }, + // Find item(s) by name + finditemsbyname: function () { + return findItemsByName.apply(this, Array.prototype.slice.call(arguments)); + }, + // Find path to root menu collection + pathtoroot: function () { + return pathToRoot.apply(this, Array.prototype.slice.call(arguments)); + }, + // Find shared path to root of two menus + comparepaths: function () { + return comparePaths.apply(this, Array.prototype.slice.call(arguments)); + }, + // Get/Set settings options + option: function () { + return manageOptions.apply(this, Array.prototype.slice.call(arguments)); + }, + // Add item(s) + additems: function () { + return addItems.apply(this, Array.prototype.slice.call(arguments)); + }, + // Remove item(s) + removeitems: function () { + return removeItems.apply(this, Array.prototype.slice.call(arguments)); + }, + // Size DOM elements + redraw: function () { + return sizeDOMelements.apply(this, Array.prototype.slice.call(arguments)); + }, + // Returns visible level holders + visiblemenus: function () { + return visibleLevelHolders.apply(this, Array.prototype.slice.call(arguments)); + }, + // Returns visible level holders + hiddenmenus: function () { + return hiddenLevelHolders.apply(this, Array.prototype.slice.call(arguments)); + }, + // Propagate event to underneath layer + propagateevent: function () { + return propagateEvent.apply(this, Array.prototype.slice.call(arguments)); + } + }; + + // IE 8 and modern browsers, prevent event propagation + function stopEventPropagation( e ){ + if ( e.stopPropagation && e.preventDefault ) { + e.stopPropagation(); + e.preventDefault(); + } + else { + e.cancelBubble = true; + e.returnValue = false; + } + } + + // propagate event to underneath layer + // http://jsfiddle.net/E9zTs/2/ + function propagateEvent( $element , event ) { + if( $element == undefined || event == undefined ) return false; + $element.on( event , function ( e , ee ) { + $element.hide(); + try { + if(!e.pageX || !e.pageY) return false; + ee = ee || { + pageX: e.pageX, + pageY: e.pageY + }; + var next = document.elementFromPoint( ee.pageX , ee.pageY ); + next = ( next.nodeType == 3 ) ? next.parentNode : next //Opera + $( next ).trigger( event , ee ); + } + catch ( err ) { + $.error( 'Error while propagating event: ' + err.message ); + } + finally { + $element.show(); + } + }); + } + + // Create DOM structure if it does not already exist within the container (input: array) + function createDOMStructure() { + var $mainWrapper = $( "