diff options
Diffstat (limited to 'app/core')
20 files changed, 470 insertions, 0 deletions
diff --git a/app/core/header/header.controller.js b/app/core/header/header.controller.js new file mode 100644 index 0000000..6f575ca --- /dev/null +++ b/app/core/header/header.controller.js @@ -0,0 +1,15 @@ +(function () { + + 'use strict'; + + angular + .module('dcaeApp.header') + .controller('HeaderController', HeaderController); + + function HeaderController($rootScope) { + var vm = this; + + + } + +})(); diff --git a/app/core/header/header.module.js b/app/core/header/header.module.js new file mode 100644 index 0000000..24c0929 --- /dev/null +++ b/app/core/header/header.module.js @@ -0,0 +1,13 @@ +(function () { + + 'use strict'; + + angular + .module('dcaeApp.header', []) + .config(config); + + function config() { + + } + +})(); diff --git a/app/core/header/layouts/content-with-header/header.html b/app/core/header/layouts/content-with-header/header.html new file mode 100644 index 0000000..64c6f44 --- /dev/null +++ b/app/core/header/layouts/content-with-header/header.html @@ -0,0 +1,36 @@ +<header class="banner navbar navbar-default navbar-static-top" role="banner" data-transparent-header="true"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + <span class="icon-bar"></span> + </button> + <div id="logo"> + <a href="index.html"> + <img class="logo-trans logo-reg" src="images/att_logo.png" height="56" width="56" alt="AT&T | DCAE App"> + </a> + </div> + </div> + <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> + <ul id="menu-primary-navigation" class="nav navbar-nav"> + <li class="active menu-home"> + <a title="home" href="index.html">Home</a> + </li> + <li class="menu-contact"> + <a title="Contact Us" href="contactUs.html">Contact Us</a> + </li> + <li style="margin-right:-30px"><!-- class="menu-contact"--> + <a title="Login" href="login.html">Login</a> + </li> + <li class="menu-contact"> + <a href="index.html">|</a> + </li> + <li style="margin-left:-28px"><!-- class="menu-contact"--> + <a title="Sign Up" href="signUp.html">Sign Up</a> + </li> + </ul> + </nav> + </div> +</header> diff --git a/app/core/header/layouts/content-with-header/header.less b/app/core/header/layouts/content-with-header/header.less new file mode 100644 index 0000000..94445d6 --- /dev/null +++ b/app/core/header/layouts/content-with-header/header.less @@ -0,0 +1,5 @@ +#header { + .header { + background-color: yellow; + } +} diff --git a/app/core/header/layouts/horizontal-navigation/header.html b/app/core/header/layouts/horizontal-navigation/header.html new file mode 100644 index 0000000..ee39e18 --- /dev/null +++ b/app/core/header/layouts/horizontal-navigation/header.html @@ -0,0 +1,14 @@ +<div class="col-md-2"><div class="header-logo">DCAE Application</div></div> + +<div class="col-md-8"> + <!--<ul class="header-top-menu"> + <li><a ui-sref="app.home">Dashboard</a></li> + <li><a ui-sref="app.docs">Documentation</a></li> + <li><a ui-sref="app.support">Support</a></li> + </ul>--> +</div> + +<div class="col-md-2 header-right"> + <div class="header-chat"></div> + <div class="header-avatar"></div> +</div> diff --git a/app/core/header/layouts/horizontal-navigation/header.less b/app/core/header/layouts/horizontal-navigation/header.less new file mode 100644 index 0000000..f5a7e96 --- /dev/null +++ b/app/core/header/layouts/horizontal-navigation/header.less @@ -0,0 +1,53 @@ +#header { + + background-color: #1370A3; + height: 80px; + + display: flex; + flex-direction: row; + align-items: center; + + .header-logo { + .p_24; + .logo-white; + width: 300px; + margin: 0 30px; + vertical-align: middle; + line-height: 56px; + text-indent: 55px; + } + + ul.header-top-menu { + display: flex; + flex-direction: row; + justify-content: center; + margin: 0; + + li { + list-style: none; + margin: 0 20px; + + a { + .p_18_m; + text-decoration: none; + } + } + } + + .header-right { + margin: 0 30px; + display: flex; + flex-direction: row; + justify-content: flex-end; + + .header-chat { + + } + + .header-avatar { + + } + } + +} + diff --git a/app/core/layouts/content-only/content-only.html b/app/core/layouts/content-only/content-only.html new file mode 100644 index 0000000..50c6d6f --- /dev/null +++ b/app/core/layouts/content-only/content-only.html @@ -0,0 +1,7 @@ +<div id="dcaedt">
+<div id="layout-content-only" class="template-layout">
+
+ <div id="content" ui-view="content"></div>
+
+</div>
+</div>
diff --git a/app/core/layouts/content-only/content-only.less b/app/core/layouts/content-only/content-only.less new file mode 100644 index 0000000..a65a6bc --- /dev/null +++ b/app/core/layouts/content-only/content-only.less @@ -0,0 +1,3 @@ +#layout-content-only { + /*background: url('images/top.jpg') no-repeat 0 0;*/ +} diff --git a/app/core/layouts/content-with-header/content-with-header.html b/app/core/layouts/content-with-header/content-with-header.html new file mode 100644 index 0000000..286cef5 --- /dev/null +++ b/app/core/layouts/content-with-header/content-with-header.html @@ -0,0 +1,5 @@ +<div id="layout-content-with-header" class="template-layout"> + + <div id="content" ui-view="content"></div> + +</div> diff --git a/app/core/layouts/content-with-header/content-with-header.less b/app/core/layouts/content-with-header/content-with-header.less new file mode 100644 index 0000000..82ad274 --- /dev/null +++ b/app/core/layouts/content-with-header/content-with-header.less @@ -0,0 +1,3 @@ +#layout-content-with-header { + /*background: url('images/top.jpg') no-repeat 0 0;*/ +} diff --git a/app/core/layouts/content-with-navigation/content-with-navigation.html b/app/core/layouts/content-with-navigation/content-with-navigation.html new file mode 100755 index 0000000..7b3c918 --- /dev/null +++ b/app/core/layouts/content-with-navigation/content-with-navigation.html @@ -0,0 +1,15 @@ +<div id="main-wrapper"> + + <div id="navigation" class="navigation" ui-view="navigation"></div> + + <div id="content-container" class="content-container"> + <div id="dcaeSidenav" class="sidenav"> + <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> + <a href="#">General</a> + <a href="#">Composition</a> + <a href="#">Artifact</a> + </div> + <div id="content" ui-view="content"></div> + </div> + +</div> diff --git a/app/core/layouts/content-with-navigation/content-with-navigation.less b/app/core/layouts/content-with-navigation/content-with-navigation.less new file mode 100755 index 0000000..2ff8b41 --- /dev/null +++ b/app/core/layouts/content-with-navigation/content-with-navigation.less @@ -0,0 +1,4 @@ +.content-container { + padding: 20px; + background-color: @main_color_p; +} diff --git a/app/core/layouts/full-page-with-header/full-page-with-header.html b/app/core/layouts/full-page-with-header/full-page-with-header.html new file mode 100644 index 0000000..d1f8372 --- /dev/null +++ b/app/core/layouts/full-page-with-header/full-page-with-header.html @@ -0,0 +1,30 @@ +<div id="full-page-with-header" class="template-layout">
+
+ <header class="banner navbar navbar-default navbar-static-top" role="banner" data-transparent-header="true">
+ <div class="container">
+
+ <div class="navbar-header">
+ <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+ <span class="sr-only">Toggle navigation</span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ <span class="icon-bar"></span>
+ </button>
+ <div id="logo" class="logo-white" ui-sref="home"></div>
+ </div>
+ <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
+ <ul id="menu-primary-navigation" class="nav navbar-nav">
+ <li class="menu-home" data-ng-class="{'active': state.current.name==='app.home'}"><a title="home" ui-sref="app.home">Home</a></li>
+ <li class="menu-contact" data-ng-class="{'active': state.current.name==='app.contactus'}"><a title="Contact Us" ui-sref="app.contactus">Contact Us</a></li>
+ <li class="menu-login" data-ng-class="{'active': state.current.name==='app.login'}"><a title="Login" ui-sref="app.login">Login</a></li>
+ <li class="menu-seperator">|</li>
+ <li class="menu-signup" data-ng-class="{'active': state.current.name==='app.register'}"><a title="Sign Up" ui-sref="app.register">Sign Up</a></li>
+ </ul>
+ </nav>
+
+ </div>
+ </header>
+
+ <div id="content" ui-view="content"></div>
+
+</div>
diff --git a/app/core/layouts/full-page-with-header/full-page-with-header.less b/app/core/layouts/full-page-with-header/full-page-with-header.less new file mode 100644 index 0000000..2a28cd1 --- /dev/null +++ b/app/core/layouts/full-page-with-header/full-page-with-header.less @@ -0,0 +1,167 @@ +#full-page-with-header { + /*background: url('images/top.jpg') no-repeat 0 0;*/ + + #content { + padding-top: 70px; + } + + /* ============================================================================= + Header + ========================================================================== */ + + .banner { + -webkit-box-shadow:0 1px 2px rgba(43, 48, 51, 0.08); + -moz-box-shadow:0 1px 2px rgba(43, 48, 51, 0.08); + box-shadow:0 1px 2px rgba(43, 48, 51, 0.08); + z-index:20; + } + + .navbar { + background-color:#fff; + margin-bottom:0; + } + + #logo { + float:left; + display:block; + margin:20px 0; + } + #logo .logo-trans {display:none} + + .navbar .navbar-nav { + float:right; + text-align:right; + margin: 20px 0 0 0; + } + + .navbar .navbar-nav > li > a { + position:relative; + color:#828282; + font-weight:600; + padding-top: 0; + padding-bottom:15px; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; + } + + .navbar .navbar-nav > li > a:after { + position:absolute; + bottom:7px; + left:50%; + content:''; + width:10px; + height:0px; + margin-left:-5px; + background-color:#fff; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; + } + + .navbar .navbar-nav > li > a:hover {color:#828282} + + .navbar .navbar-nav > li > a:hover:after, + .navbar .navbar-nav > li.active > a:after, + .navbar .navbar-nav > li.active > a:hover:after, + .navbar .navbar-nav > li.active > a:focus:after { + position:absolute; + bottom:9px; + left:50%; + content:''; + width:20px; + height:2px; + margin-left:-10px; + background-color:#2b8dd6; + } + + + .navbar-nav > li + li {margin-left:2px} + .navbar .navbar-nav > li.active > a, + .navbar .navbar-nav > li.active > a:hover, + .navbar .navbar-nav > li.active > a:focus { + color:#828282; + background-color:transparent; + } + .navbar .navbar-nav .dropdown-menu {border-radius:0 !important} + + .navbar .navbar-nav .dropdown-menu li a {position:relative} + .navbar .navbar-nav .dropdown-menu li a:after { + position:absolute; + bottom:2px; + left:30px; + content:''; + width:20px; + height:0px; + margin-left:-10px; + background-color:#fff; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; + } + .navbar .navbar-nav .dropdown-menu li a:hover:after { + position:absolute; + bottom:3px; + left:30px; + content:''; + width:20px; + height:2px; + margin-left:-10px; + background-color:#e2e2e2; + } + + .navbar .navbar-nav .dropdown-menu li.active a { + background-color:transparent; + color:#2b8dd6; + } + + .navbar .navbar-nav .dropdown-menu li a:hover, + .navbar .navbar-nav .dropdown-menu li.active a:hover { + color:#2b8dd6; + background-color:transparent; + } + + .navbar-collapse {max-height:none} + .navbar-collapse ul {margin-bottom:10px} + + /* Transparent Header */ + .banner[data-transparent-header="true"] { + width:100%; + top:0; + left:0; + position:absolute; + overflow:visible !important; + z-index:9998; + background-color:transparent; + box-shadow:none; + -webkit-box-shadow:none; + -moz-box-shadow:none; + -o-box-shadow:none; + border-bottom:1px solid rgba(255,255,255,0.25) !important; + } + + .boxed-mode .banner[data-transparent-header="true"] { + left:0; right:0; margin:0 auto; + } + + .banner[data-transparent-header="true"] #logo .logo-trans {display:inline} + .banner[data-transparent-header="true"] #logo .logo-main {display:none} + + .banner[data-transparent-header="true"] .navbar-nav > li > a, + .banner[data-transparent-header="true"] .navbar-nav > li.active > a {color:#fff} + .banner[data-transparent-header="true"] .navbar-nav > li > a:hover, + .banner[data-transparent-header="true"] .navbar-nav > li.active > a:hover {color:#fff} + + .banner[data-transparent-header="true"] .navbar-nav > li > a:hover:after, + .banner[data-transparent-header="true"] .navbar-nav > li.active > a:after, + .banner[data-transparent-header="true"] .navbar-nav > li.active > a:hover:after, + .banner[data-transparent-header="true"] .navbar-nav > li.active > a:focus:after {background-color:#fff} + + .menu-seperator { + .p_14_r; + } + + .menu-login a { padding-right: 4px; } + .menu-signup a { padding-left: 4px; } + +} diff --git a/app/core/layouts/header-navigation-content/header-navigation-content.html b/app/core/layouts/header-navigation-content/header-navigation-content.html new file mode 100644 index 0000000..3c7b283 --- /dev/null +++ b/app/core/layouts/header-navigation-content/header-navigation-content.html @@ -0,0 +1,11 @@ +<div id="main-wrapper"> + + <div id="header" class="header" ui-view="header"></div> + + <div id="navigation" class="navigation" ui-view="navigation"></div> + + <div id="content-container" class="content-container"> + <div id="content" ui-view="content"></div> + </div> + +</div> diff --git a/app/core/layouts/header-navigation-content/header-navigation-content.less b/app/core/layouts/header-navigation-content/header-navigation-content.less new file mode 100644 index 0000000..89028cc --- /dev/null +++ b/app/core/layouts/header-navigation-content/header-navigation-content.less @@ -0,0 +1,3 @@ +.content-container { + padding: 20px; +} diff --git a/app/core/navigation/layouts/horizontal-navigation/navigation.html b/app/core/navigation/layouts/horizontal-navigation/navigation.html new file mode 100644 index 0000000..4958ba4 --- /dev/null +++ b/app/core/navigation/layouts/horizontal-navigation/navigation.html @@ -0,0 +1,4 @@ +<ul class="navigation-top-menu"> + <li><a ui-sref="dcae.app.home">Home</a></li> + <li><a ui-sref="dcae.app.about">About</a></li> +</ul> diff --git a/app/core/navigation/layouts/horizontal-navigation/navigation.less b/app/core/navigation/layouts/horizontal-navigation/navigation.less new file mode 100644 index 0000000..e558311 --- /dev/null +++ b/app/core/navigation/layouts/horizontal-navigation/navigation.less @@ -0,0 +1,26 @@ +#navigation { + + background-color: #dddddd; + height: 40px; + display: flex; + flex-direction: row; + align-items: center; + + ul.navigation-top-menu { + display: flex; + flex-direction: row; + justify-content: center; + margin: 0; + + li { + list-style: none; + margin: 0 20px; + + a { + .m_16_m; + text-decoration: none; + } + } + } + +} diff --git a/app/core/navigation/navigation.controller.js b/app/core/navigation/navigation.controller.js new file mode 100644 index 0000000..a270e05 --- /dev/null +++ b/app/core/navigation/navigation.controller.js @@ -0,0 +1,41 @@ +(function () +{ + 'use strict'; + + angular + .module('dcaeApp.navigation') + .controller('NavigationController', NavigationController); + + /** @ngInject */ + function NavigationController($scope) + { + var vm = this; + + // Data + vm.bodyEl = angular.element('body'); + vm.folded = false; + vm.msScrollOptions = { + suppressScrollX: true + }; + + // Methods + vm.toggleMsNavigationFolded = toggleMsNavigationFolded; + + ////////// + + /** + * Toggle folded status + */ + function toggleMsNavigationFolded() + { + vm.folded = !vm.folded; + } + + // Close the mobile menu on $stateChangeSuccess + $scope.$on('$stateChangeSuccess', function () + { + vm.bodyEl.removeClass('ms-navigation-horizontal-mobile-menu-active'); + }); + } + +})(); diff --git a/app/core/navigation/navigation.module.js b/app/core/navigation/navigation.module.js new file mode 100644 index 0000000..f5ae2be --- /dev/null +++ b/app/core/navigation/navigation.module.js @@ -0,0 +1,15 @@ +(function () +{ + 'use strict'; + + angular + .module('dcaeApp.navigation', []) + .config(config); + + /** @ngInject */ + function config() + { + + } + +})(); |