Commit f7e3297a by Torkel Ödegaard

ux(): updated navbar on all pages to new style, no subnav/dropdown yet though

parent f98dbd24
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
"grunt-jscs": "~1.5.x", "grunt-jscs": "~1.5.x",
"grunt-sync": "^0.4.1", "grunt-sync": "^0.4.1",
"karma-sinon": "^1.0.3", "karma-sinon": "^1.0.3",
"lodash": "^4.0.0", "lodash": "^2.4.1",
"sinon": "1.16.1", "sinon": "1.16.1",
"systemjs-builder": "^0.15.7", "systemjs-builder": "^0.15.7",
"tslint": "^3.2.1", "tslint": "^3.2.1",
......
...@@ -10,15 +10,13 @@ ...@@ -10,15 +10,13 @@
</a> </a>
</div> </div>
<span ng-if="ctrl.title"> <div class="top-nav-btn dashnav-dashboards-btn" ng-if="ctrl.title">
<span class="icon-circle top-nav-icon"> <a class="pointer" href="{{ctrl.titleUrl}}">
<i ng-class="ctrl.icon"></i> <i ng-class="ctrl.icon"></i>
</span> <span class="dashboard-title">{{ctrl.title}}</span>
<a ng-href="{{ctrl.titleUrl}}" class="top-nav-title"> <!-- <i class="fa fa&#45;caret&#45;down"></i> -->
{{ctrl.title}}
</a> </a>
<i ng-show="ctrl.subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i> </div>
</span>
<div ng-transclude></div> <div ng-transclude></div>
</div> </div>
......
...@@ -17,15 +17,14 @@ export function navbarDirective() { ...@@ -17,15 +17,14 @@ export function navbarDirective() {
templateUrl: 'public/app/core/components/navbar/navbar.html', templateUrl: 'public/app/core/components/navbar/navbar.html',
controller: NavbarCtrl, controller: NavbarCtrl,
bindToController: true, bindToController: true,
controllerAs: 'ctrl',
transclude: true, transclude: true,
controllerAs: 'ctrl',
scope: { scope: {
title: "@", title: "@",
titleUrl: "@", titleUrl: "@",
}, },
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
ctrl.icon = attrs.icon; ctrl.icon = attrs.icon;
ctrl.subnav = attrs.subnav;
} }
}; };
} }
......
<navbar title="Plugins" title-url="Plugins" icon="icon-gf icon-gf-apps" subnav="true"> <navbar title="Plugins" title-url="Plugins" icon="icon-gf icon-gf-apps">
<ul class="nav">
<li class="active" ><a href="apps/edit/{{ctrl.current.type}}">{{ctrl.appModel.name}}</a></li>
</ul>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar icon="fa fa-fw fa-cubes" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit" subnav="true"> <navbar icon="fa fa-fw fa-cubes" title="{{ctrl.appModel.name}}" title-url="apps/{{ctrl.appId}}/edit">
<ul class="nav">
<li class="active"><a href="apps/{{ctrl.appId}}/ctrl.page.slug">{{ctrl.page.name}}</a></li>
</ul>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar icon="fa fa-th-large" title="Dashboards" subnav="true"> <navbar title="Import" title-url="import/dashboard" icon="fa fa-download">
<ul class="nav">
<li class="active"><a href="import/dashboard">Import</a></li>
</ul>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar> <navbar
<div class="top-nav-btn dashnav-dashboards-btn" > title="Data Sources"
<a class="pointer" ng-click="openSearch()"> title-url="datasources"
<i class="icon-gf icon-gf-datasources"></i> icon="icon-gf icon-gf-datasources">
<span class="dashboard-title">Data Sources</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<!-- <ul class="nav">
<li ng-class="{active: isNew}" ng-show="isNew"><a href="datasources/new">Add new</a></li>
<li class="active" ng-show="!isNew"><a href="datasources/edit/{{current.name}}">{{current.name}}</a></li>
</ul> -->
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar> <navbar
<div class="top-nav-btn dashnav-dashboards-btn" > title="Data Sources"
<a class="pointer" ng-click="openSearch()"> title-url="datasources"
<i class="icon-gf icon-gf-datasources"></i> icon="icon-gf icon-gf-datasources">
<span class="dashboard-title">Data Sources</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
</div> </div>
</div> </div>
<div style="margin-top: 20px;"> <div style="margin-top: 20px; text-align: left;">
<a class="btn btn-inverse" ng-click="addInvite()">+ Invite another</a> <a class="btn btn-inverse" ng-click="addInvite()">+ Invite another</a>
<div class="form-inline" style="margin-top: 20px"> <div class="form-inline" style="margin-top: 20px">
<editor-checkbox text="Skip sending invite email" model="options.skipEmails" change="targetBlur()"></editor-checkbox> <editor-checkbox text="Skip sending invite email" model="options.skipEmails" change="targetBlur()"></editor-checkbox>
......
<navbar title="Organization" icon="fa fa-fw fa-users" subnav="true"> <navbar title="Organization" icon="icon-gf icon-gf-users">
<ul class="nav">
<li class="active"><a href="org/new">New organization</a></li>
</ul>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar icon="fa fa-fw fa-users" title="Organization" subnav="true"> <navbar icon="icon-gf icon-gf-users" title="Organization">
<ul class="nav">
<li class="active"><a href="org/apikeys">API Keys</a></li>
</ul>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
...@@ -26,9 +23,9 @@ ...@@ -26,9 +23,9 @@
</li> </li>
</ul> </ul>
<button class="btn btn-success" style="margin-left:15px; vertical-algin:middle;" ng-click="addToken()">Add</button> <button class="btn btn-success" style="margin-left:15px; vertical-algin:middle;" ng-click="addToken()">Add</button>
<div class="clearfix"></div> <div class="clearfix"></div>
</form> </form>
<table class="filter-table"> <table class="filter-table">
......
<navbar> <navbar icon="icon-gf icon-gf-users" title="Organization">
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-users"></i>
<span class="dashboard-title">Organization Preferences</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
<div class="page"> <div class="page">
<h1>Organization</h1> <h1>Preferences</h1>
<section class="simple-box">
<h3 class="">Preferences</h3>
</section>
<form name="orgForm"> <form name="orgForm">
<div class="norm-form last"> <div class="norm-form last">
...@@ -98,6 +87,10 @@ ...@@ -98,6 +87,10 @@
</form> </form>
</div> </div>
<h3>Org. Users</h3>
<a href="org/users" class="btn btn-inverse">Manage</a>
</div> </div>
<navbar> <navbar icon="icon-gf icon-gf-users" title="Organization Users">
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-users"></i>
<span class="dashboard-title">Organization Users</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar> <navbar icon="fa fa-fw fa-list" title="Playlist">
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="fa fa-fw fa-list"></i>
<span class="dashboard-title">Playlist</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<!-- <navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
<ul class="nav">
<li ng-class="{active: ctrl.isNew()}" ng-show="ctrl.isNew()"><a href="datasources/create">New</a></li>
<li class="active" ng-show="!ctrl.isNew()"><a href="playlists/edit/{{ctrl.playlist.id}}">{{ctrl.playlist.name}}</a></li>
</ul>
</navbar> -->
<div class="page-container" ng-form="playlistEditForm"> <div class="page-container" ng-form="playlistEditForm">
<div class="page"> <div class="page">
......
<navbar> <navbar icon="fa fa-fw fa-list" title="New Playlist">
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="fa fa-fw fa-list"></i>
<span class="dashboard-title">New Playlist</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar> <navbar icon="icon-gf icon-gf-users" title="Profile" title-url="profile">
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-users"></i>
<span class="dashboard-title">Change Password</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar> <navbar icon="icon-gf icon-gf-users" title="Profile">
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-users"></i>
<span class="dashboard-title">Profile</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
<navbar> <navbar icon="icon-gf icon-gf-snapshot" title="Snapshots">
<div class="top-nav-btn dashnav-dashboards-btn" >
<a class="pointer" ng-click="openSearch()">
<i class="icon-gf icon-gf-snapshot"></i>
<span class="dashboard-title">Snapshots</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</navbar> </navbar>
<div class="page-container"> <div class="page-container">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment