Skip to content
Snippets Groups Projects
Commit 3aa44040 authored by Kyle Doherty's avatar Kyle Doherty
Browse files

admin nav and breadcrumbs

parent cd51da11
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 196 additions and 84 deletions
resources/frontend_client/app/admin/databases/partials/database_edit.html
+ 63
− 60
View file @ 3aa44040
<!-- breadcrumb -->
<section>
<h2 class="BreadcrumbPath">Databases &gt;</h2>
<h2 class="BreadcrumbPage" ng-if="!database.id">Add Database</h2>
<h2 class="BreadcrumbPage" ng-if="database.id">{{database.name}}</h2>
</section>
<div class="wrapper">
<section class="Breadcrumbs">
<a class="Breadcrumb Breadcrumb--path" cv-org-href="/admin/databases/">Databases</a>
<cv-chevron-right-icon class="Breadcrumb-divider" width="12px" height="12px"></cv-chevron-right-icon>
<h2 class="Breadcrumb Breadcrumb--page" ng-if="!database.id">Add Database</h2>
<h2 class="Breadcrumb Breadcrumb--page" ng-if="database.id">{{database.name}}</h2>
</section>
<section class="clearfix">
<!-- actions -->
<div class="p4 bordered">
<h3>Actions</h3>
<button class="Button" ng-click="save(database)">Sync</button>
<div>
<label>Danger Zone:</label>
<button class="Button" ng-click="save(database)">Remove this database</button>
</div>
</div>
<!-- form -->
<div class="p4 bordered">
<form name="form" novalidate>
<div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
<div ng-init="" ng-class="{'FormFieldError': form.name.$error.message == undefined}">
<label>Name: <span ng-show="form.name.$error.message">{{form.name.$error.message}}</span></label>
<input class="input full" name="name" ng-model="database.name" required />
</div>
<section class="clearfix">
<!-- actions -->
<div class="p4 bordered">
<h3>Actions</h3>
<button class="Button" ng-click="save(database)">Sync</button>
<div>
<label>Database Type:</label>
<select class="Select" name="engine" ng-model="database.engine" ng-options="type as properties.name for (type, properties) in form_input.engines"></select>
<label>Danger Zone:</label>
<button class="Button" ng-click="save(database)">Remove this database</button>
</div>
</div>
<!-- TODO: database type dependent inputs -->
<div class="FormInputGroup" ng-show="database.engine == 'postgres'">
<div ng-class="{'FormFieldError': form.host.$error.message == undefined}">
<label>Host: <span ng-show="form.host.$error.message">{{form.host.$error.message}}</span></label>
<input class="input full" name="host" ng-model="details.host" required />
</div>
<!-- form -->
<div class="p4 bordered">
<form name="form" novalidate>
<div class="FormError" ng-show="form.$error.message">{{form.$error.message}}</div>
<div ng-class="{'FormFieldError': form.port.$error.message == undefined}">
<label>Port: <span ng-show="form.port.$error.message">{{form.port.$error.message}}</span></label>
<input class="input full" name="port" ng-model="details.port" required />
<div ng-init="" ng-class="{'FormFieldError': form.name.$error.message == undefined}">
<label>Name: <span ng-show="form.name.$error.message">{{form.name.$error.message}}</span></label>
<input class="input full" name="name" ng-model="database.name" required />
</div>
<div ng-class="{'FormFieldError': form.dbname.$error.message == undefined}">
<label>Database name: <span ng-show="form.dbname.$error.message">{{form.dbname.$error.message}}</span></label>
<input class="input full" name="dbname" ng-model="details.dbname" required />
<div>
<label>Database Type:</label>
<select class="Select" name="engine" ng-model="database.engine" ng-options="type as properties.name for (type, properties) in form_input.engines"></select>
</div>
<div ng-class="{'FormFieldError': form.user.$error.message == undefined}">
<label>Database username: <span ng-show="form.user.$error.message">{{form.user.$error.message}}</span></label>
<input class="input full" name="user" ng-model="details.user" required />
</div>
<!-- TODO: database type dependent inputs -->
<div class="FormInputGroup" ng-show="database.engine == 'postgres'">
<div ng-class="{'FormFieldError': form.host.$error.message == undefined}">
<label>Host: <span ng-show="form.host.$error.message">{{form.host.$error.message}}</span></label>
<input class="input full" name="host" ng-model="details.host" required />
</div>
<div ng-class="{'FormFieldError': form.pass.$error.message == undefined}">
<label>Database password: <span ng-show="form.pass.$error.message">{{form.pass.$error.message}}</span></label>
<input class="input full" name="pass" ng-model="details.pass" />
<div ng-class="{'FormFieldError': form.port.$error.message == undefined}">
<label>Port: <span ng-show="form.port.$error.message">{{form.port.$error.message}}</span></label>
<input class="input full" name="port" ng-model="details.port" required />
</div>
<div ng-class="{'FormFieldError': form.dbname.$error.message == undefined}">
<label>Database name: <span ng-show="form.dbname.$error.message">{{form.dbname.$error.message}}</span></label>
<input class="input full" name="dbname" ng-model="details.dbname" required />
</div>
<div ng-class="{'FormFieldError': form.user.$error.message == undefined}">
<label>Database username: <span ng-show="form.user.$error.message">{{form.user.$error.message}}</span></label>
<input class="input full" name="user" ng-model="details.user" required />
</div>
<div ng-class="{'FormFieldError': form.pass.$error.message == undefined}">
<label>Database password: <span ng-show="form.pass.$error.message">{{form.pass.$error.message}}</span></label>
<input class="input full" name="pass" ng-model="details.pass" />
</div>
</div>
</div>
<!-- SAVE BUTTON -->
<div>
<button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database)" ng-disabled="!form.$valid">
Save
</button>
<!-- SAVE BUTTON -->
<div>
<button class="Button" ng-class="{'Button--primary': form.$valid}" ng-click="save(database)" ng-disabled="!form.$valid">
Save
</button>
<button class="Button" ng-click="foo()">
Status
</button>
</div>
</form>
</div>
</section>
<button class="Button" ng-click="foo()">
Status
</button>
</div>
</form>
</div>
</section>
</div> <!-- wrapper -->
resources/frontend_client/app/components/breadcrumbs/breadcrumbs.css 0 → 100644
+ 35
− 0
View file @ 3aa44040
:root {
--breadcrumbs-color: #BFC1C2;
--breadcrumbs-padding: 2.375em;
--breadcrumb-page-color: #636060;
--breadcrumb-divider-spacing: 0.75em;
}
.Breadcrumbs {
display: flex;
align-items: center;
padding-top: var(--breadcrumbs-padding);
padding-bottom: var(--breadcrumbs-padding);
color: var(--breadcrumbs-color);
}
.Breadcrumb {
font-weight: bold;
font-size: 0.85em;
text-transform: uppercase;
}
.Breadcrumb-divider {
margin-left: var(--breadcrumb-divider-spacing);
margin-right: var(--breadcrumb-divider-spacing);
}
/* the breadcrumb path will always inherit the color of the breadcrumbs object */
.Breadcrumb.Breadcrumb--path {
color: currentColor;
}
/* the breadcrumb page (current page) should be a different contrasting color */
.Breadcrumb.Breadcrumb--page {
color: var(--breadcrumb-page-color);
}
\ No newline at end of file
resources/frontend_client/app/components/core_nav/core_nav.css
+ 4
− 0
View file @ 3aa44040
......@@ -194,3 +194,7 @@
left: 10px;
color: var(--icon-color);
}
.NavTitle {
color: currentColor;
}
resources/frontend_client/app/components/icons/icons.js
+ 1
− 0
View file @ 3aa44040
......@@ -8,6 +8,7 @@
'Cards',
'Close',
'ChevronDown',
'ChevronRight',
'Dashboards',
'Explore',
'Grid',
......
resources/frontend_client/app/css/admin.css
+ 53
− 9
View file @ 3aa44040
#id_sql {
height: 200px;
:root {
--admin-nav-bg-color: #6F7A8B;
--admin-nav-item-text-color: rgba(255, 255, 255, 0.63);
--admin-nav-item-text-active-color: #fff;
}
.AdminNav {
padding: 1em;
background: var(--admin-nav-bg-color);
color: #fff;
}
.AdminNav .NavItem {
padding: 1.15em 0;
margin: 0 1em 0 0;
font-size: 1.12em;
/* cancel out padding as .AdminNav + flex will allow for proper centering */
padding-top: 0;
padding-bottom: 0;
padding-left: 1em;
padding-right: 1em;
color: var(--admin-nav-item-text-color);
}
.AdminNav .NavItem:hover,
.AdminNav .NavItem.is--selected {
color: var(--admin-nav-item-text-active-color);
}
/* TODO: this feels itchy. should refactor .NavItem.is--selected to be less cascadey */
.AdminNav .NavItem:hover:after,
.AdminNav .NavItem.is--selected:after {
display: none;
}
.UserNick {
border-width: 1px;
border-style: solid;
border-radius: 99px;
width: 2rem;
height: 2rem; /* set an explicit height since we want it to be square */
display: flex;
align-items: center;
justify-content: center;
}
.AdminExit-trigger {
color: #ddd;
.AdminNav .UserNick {
color: #fff;
border-color: #fff;
background-color: #fff;
background-color: rgba(255, 255, 255, 0.3);
}
.AdminTitle {
color: #222;
.UserInitials,
.UserInitials:hover {
font-size: 1rem;
color: currentColor;
}
/* TODO: this is for the ace editor and should be handled without an ID */
#id_sql {
height: 200px;
}
\ No newline at end of file
resources/frontend_client/app/css/core/flex.css 0 → 100644
+ 22
− 0
View file @ 3aa44040
/* provide flex utilities in lieu of float based layouts */
.flex {
display: flex;
}
.flex-full {
flex: 1;
}
.align-center {
align-items: center;
}
.align-start {
align-items: flex-start;
}
.align-self-end {
align-self: flex-end;
}
resources/frontend_client/app/directives.js
+ 2
− 3
View file @ 3aa44040
......@@ -131,11 +131,10 @@ NavbarDirectives.directive('mbProfileLink', [function () {
return {
restrict: 'E',
replace: true,
template: '<ul class="float-right">' +
template: '<ul class="UserNick">' +
'<li class="Dropdown inline-block" dropdown on-toggle="toggled(open)">' +
'<a class="NavItem" selectable-nav-item="settings" dropdown-toggle>' +
'<a class="UserInitials" selectable-nav-item="settings" dropdown-toggle>' +
'<span class="NavItem-text">{{initials}}</span> ' +
'<cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>' +
'</a>' +
'<ul class="Dropdown-content right">' +
'<li><a class="link" href="/user/edit_current">Account Settings</a></li>' +
......
resources/frontend_client/index.html
+ 16
− 12
View file @ 3aa44040
......@@ -87,14 +87,18 @@
<!-- ADMIN NAV -->
<nav class="AdminNav" ng-show="nav === 'admin'">
<!-- TODO: dropdown component -->
<div class="col col-sm-12">
<div class="wrapper flex align-center">
<!-- org title -->
<div class="NavItem float-left" ng-if="!user.is_multi_org">
<!-- TODO: gear icon -->
<div class="NavTitle flex align-center" ng-if="!user.is_multi_org">
<svg id="cog" class="mr1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16px" height="16px" fill="currentcolor">
<path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
</svg>
<span class="NavItem-text">{{currentOrg.name}} Admin</span>
</div>
<div class="NavItem Dropdown float-left" dropdown on-toggle="toggled(open)" ng-if="user.is_multi_org">
<!-- TODO: gear icon -->
<div class="NavTitle Dropdown" dropdown on-toggle="toggled(open)" ng-if="user.is_multi_org">
<svg class="mr1" id="cog" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="16px" height="16px"fill="currentcolor">
<path d="M14 0 H18 L19 6 L20.707 6.707 L26 3.293 L28.707 6 L25.293 11.293 L26 13 L32 14 V18 L26 19 L25.293 20.707 L28.707 26 L26 28.707 L20.707 25.293 L19 26 L18 32 L14 32 L13 26 L11.293 25.293 L6 28.707 L3.293 26 L6.707 20.707 L6 19 L0 18 L0 14 L6 13 L6.707 11.293 L3.293 6 L6 3.293 L11.293 6.707 L13 6 L14 0 z M16 10 A6 6 0 0 0 16 22 A6 6 0 0 0 16 10 "></path>
</svg>
<span dropdown-toggle>
<span class="NavItem-text">{{currentOrg.name}} Admin</span>
<cv-chevron-down-icon width="8px" height="8px"></cv-chevron-down-icon>
......@@ -107,33 +111,33 @@
</div>
<!-- admin sections -->
<ul class="float-left ml4">
<li class="inline-block">
<ul class="ml4 flex flex-full">
<li>
<a class="NavItem" ng-class="{ 'is--selected' : isActive('/admin/org')}" cv-org-href="/admin/org/">
<span class="NavItem-text">Organization</span>
</a>
</li>
<li class="inline-block">
<li>
<a class="NavItem" ng-class="{ 'is--selected' : isActive('/admin/people')}" cv-org-href="/admin/people/">
<span class="NavItem-text">People</span>
</a>
</li>
<li class="inline-block">
<li>
<a class="NavItem" ng-class="{ 'is--selected' : isActive('/admin/databases')}" cv-org-href="/admin/databases/">
<span class="NavItem-text">Databases</span>
</a>
</li>
<li class="inline-block">
<li>
<a class="NavItem" ng-class="{ 'is--selected' : isActive('/admin/datasets')}" cv-org-href="/admin/datasets/">
<span class="NavItem-text">Datasets</span>
</a>
</li>
<li class="inline-block">
<li>
<a class="NavItem" ng-class="{ 'is--selected' : isActive('/admin/emailreport')}" cv-org-href="/admin/emailreport/">
<span class="NavItem-text">Email Reports</span>
</a>
</li>
<li class="inline-block">
<li>
<a class="NavItem" ng-class="{ 'is--selected' : isActive('/admin/query')}" cv-org-href="/admin/query/run">
<span class="NavItem-text">SQL Query</span>
</a>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment