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

home structure

parent 230e9343
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 205 additions and 110 deletions
resources/frontend_client/app/card/card.controllers.js
+ 4
− 2
View file @ 67ec7905
......@@ -70,12 +70,14 @@ CardControllers.controller('CardDetail', [
// ===== Controller local objects
console.log('route params', $routeParams);
var newQueryTemplates = {
"query": {
database: null,
database: $routeParams.db || null,
type: "query",
query: {
source_table: null,
source_table: $routeParams.table || null,
aggregation: [null],
breakout: [],
filter: []
......
resources/frontend_client/app/components/core_nav/core_nav.css
+ 8
− 1
View file @ 67ec7905
.CoreNav {
.NavItem {
padding-top: 1em;
padding-bottom: 1em;
padding-left: 0.5em;
padding-right: 0.5em;
border-radius: 8px;
}
.NavItem:hover {
background-color: rgba(255, 255, 255, 0.1);
cursor: pointer;
}
resources/frontend_client/app/components/dropdown/dropdown.css
+ 9
− 5
View file @ 67ec7905
:root {
--dropdown-border-color: #d9d9d9;
--dropdown-border-color: rgba(0, 0, 0, 0.064);
}
.Dropdown {
......@@ -44,10 +44,10 @@
}
.Dropdown-item {
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2em;
padding-right: 2em;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding-right: 2rem;
}
.Dropdown .Dropdown-item .link:hover {
......@@ -58,3 +58,7 @@
color: #fff;
background-color: var(--brand-color);
}
.Dropdown-item .link:hover {
text-decoration: none;
}
resources/frontend_client/app/css/core/colors.css
+ 1
− 1
View file @ 67ec7905
:root {
--brand-color: #4A90E2;
--brand-color: #509EE3;
--base-grey: #f8f8f8;
--alt-bg-color: #F4F6F8;
......
resources/frontend_client/app/css/home.css
+ 56
− 1
View file @ 67ec7905
......@@ -5,7 +5,7 @@
.Greeting-title,
.Greeting-subtitle {
font-size: 1.5375em;
font-size: 1.9375em;
font-weight: 100;
}
......@@ -25,3 +25,58 @@
font-weight: bold;
color: rgba(0, 0, 0, .24);
}
.Home {
}
/* on the homepage, the wrapper should only be as wide as our largest size */
.Home .wrapper {
max-width: var(--xl-width);
margin: 0 auto;
}
.HomeTab {
text-decoration: none;
border: 1px solid #fff;
color: #fff;
padding: 1em 2em;
border-radius: 4px;
}
.HomeTab:hover {
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
.HomeTab.HomeTab--active {
background-color: #fff;
color: var(--brand-color);
transition: background .3s linear;
}
.HomeSubNav {
padding-top: 1.345em;
padding-bottom: 1.345em;
font-size: 1.235em;
}
.DashboardDropdown .Dropdown-content {
min-width: 20em;
}
.QuestionFilter:hover {
cursor: pointer;
color: var(--brand-color);
transition: color .3s linear;
}
.QuestionFilter--active {
color: var(--brand-color);
}
.DBItem {
text-decoration: none;
}
.TableRows {
color: #ddd;
}
resources/frontend_client/app/css/query_builder.css
+ 1
− 1
View file @ 67ec7905
......@@ -348,7 +348,7 @@
border: 1px solid #ddd;
box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
display: flex;
max-width: 32em;
max-width: 40em;
flex: 1;
}
......
resources/frontend_client/app/explore/explore.controllers.js
+ 19
− 30
View file @ 67ec7905
......@@ -6,38 +6,27 @@
var ExploreControllers = angular.module('corvus.explore.controllers', ['corvus.metabase.services']);
ExploreControllers.controller('ExploreDatabaseList', ['$scope', 'Metabase', function($scope, Metabase) {
$scope.show_non_entities = {};
Metabase.table_list(function(tables) {
var databases = {};
tables.forEach(function(table) {
var database;
if (databases[table.db.id]) {
database = databases[table.db.id];
} else {
database = table.db;
database.entities = [];
database.non_entities = [];
databases[table.db.id] = database;
}
if (table.entity_name) {
database.entities.push(table);
} else {
database.non_entities.push(table);
}
if (database.entities.length > 0) {
$scope.show_non_entities[database.id] = false;
} else {
$scope.show_non_entities[database.id] = true;
}
});
$scope.databases = [];
$scope.currentDB = {};
$scope.tables = [];
Metabase.db_list(function (databases) {
$scope.databases = databases;
}, function(error) {
console.log('error getting table list', error);
$scope.selectCurrentDB(0)
}, function (error) {
console.log(error);
});
$scope.selectCurrentDB = function(index) {
$scope.currentDB = $scope.databases[index];
Metabase.db_tables({
'dbId': $scope.currentDB.id
}, function (tables) {
$scope.tables = tables;
}, function (error) {
console.log(error);
})
}
}]);
resources/frontend_client/app/home/home.controllers.js
+ 23
− 4
View file @ 67ec7905
var HomeControllers = angular.module('corvus.home.controllers', []);
HomeControllers.controller('Home', ['$scope', '$location', function($scope, $location) {
console.log("FUCK YEAH WE'RE HOME")
$scope.currentView = 'data';
}]);
HomeControllers.controller('HomeGreeting', ['$scope', '$location', function($scope, $location) {
var greetingPrefixes = [
'Hey there',
'How\'s it going',
'Good morning',
'Howdy',
'Aloha',
'Looking good',
];
function buildGreeting () {
var subheadPrefixes = [
'What do you want to know?',
'What\'s on your mind?',
];
function buildGreeting (greetingOptions, personalization) {
// TODO - this can result in an undefined thing
var randomGreetingIndex = Math.floor(Math.random() * (greetingOptions.length - 0 + 1) + 0);
var greeting = greetingOptions[randomGreetingIndex];
if(personalization) {
greeting = greeting + ' ' + personalization;
}
return greeting;
}
$scope.greeting = 'Hey there Kyle';
console.log($scope);
$scope.greeting = buildGreeting(greetingPrefixes, $scope.user.first_name);
$scope.subheading = buildGreeting(subheadPrefixes);
}]);
resources/frontend_client/app/home/home.html
+ 76
− 56
View file @ 67ec7905
<div class="border-bottom">
<div class="wrapper">
<div class="Greeting" ng-controller="HomeGreeting">
<h1 class="Greeting-title">Good morning, Kyle</h1>
<h1 class="Greeting-subtitle">What do you want to know?</h1>
</div>
<div>
<a class="inline-block" href="#" ng-click="current = 'data'">I have a new question</a>
<a class="inline-block" href="#" ng-click="current = null">An existing question</a>
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'all' }" ng-click="filter('all')">Popular</a>
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'mine' }" ng-click="filter('mine')">Mine</a>
<a class="Button" ng-class="{ 'Button--selected' : filterMode == 'fav' }" ng-click="filter('fav')">Favorite</a>
<div class="Home" ng-controller="Home">
<div class="bg-brand text-white border-bottom">
<div class="wrapper">
<div class="Greeting" ng-controller="HomeGreeting">
<h1 class="Greeting-title">{{greeting}}</h1>
<h1 class="Greeting-subtitle">{{subheading}}</h1>
</div>
<div class="mb4">
<a class="HomeTab inline-block" ng-class="{'HomeTab--active' : currentView === 'data' }" ng-click="currentView = 'data'">I have a new question</a>
<a class="HomeTab inline-block" ng-class="{'HomeTab--active' : currentView === 'questions'}" ng-click="currentView = 'questions'">An existing question</a>
</div>
</div>
</div>
</div>
<div class="wrapper">
<div class="mt4" ng-controller="CardList" ng-if="current != 'data'">
<div ng-if="!cards">
<h1 clas="text-normal text-centered">Loading ...</h1>
<div ng-controller="CardList" ng-if="currentView != 'data'">
<div class="HomeSubNav border-bottom">
<div class="wrapper flex">
<a class="QuestionFilter flex align-center mr2" ng-click="filter('all')" ng-class="{'QuestionFilter--active': filterMode === 'all'}">
<mb-icon class="mr1" name="star" width="18px" height="18px"></mb-icon>
Popular
</a>
<a class="QuestionFilter flex align-center mr2" ng-click="filter('mine')" ng-class="{'QuestionFilter--active': filterMode === 'mine'}">
<mb-icon class="mr1" name="star" width="18px" height="18px"></mb-icon>
Mine
</a>
<a class="QuestionFilter flex align-center mr2" ng-click="filter('fav')" ng-class="{'QuestionFilter--active': filterMode === 'fav'}">
<mb-icon class="mr1" name="star" width="18px" height="18px"></mb-icon>
Favorite
</a>
</div>
</div>
<ul>
<li class="HoverItem" ng-repeat="card in cards | filter:searchFilter ">
<h2><a class="text-normal link" href="/card/{{card.id}}">{{card.name}}</a></h2>
<h5>Asked by: {{card.creator.common_name}}</h5>
</li>
</ul>
</div>
<div ng-controller="ExploreDatabaseList" ng-if="current === 'data'">
<div ng-repeat="(dbId, database) in databases">
<div class="mt2 py2 clearfix">
<h2>{{currentDB.name}}</h2>
<div class="wrapper">
<div ng-if="!cards">
<h1 clas="text-normal text-centered">Loading ...</h1>
</div>
<ul class="clearfix">
<li class="py4" ng-repeat="table in database.entities">
<span class="float-right text-grey-3 mt2">{{table.rows}} rows</span>
<h3 class="text-normal text-brand mt2 mb0">
<a class="link" href="/card/create">{{table.entity_name}}</a>
</h3>
<p class="text-grey-3 mt1">{{table.description}}</p>
<ul>
<li ng-repeat="card in cards | filter:searchFilter">
<div class="HoverItem inline-block">
<h2>
<a class="text-normal link" href="/card/{{card.id}}">{{card.name}}</a>
</h2>
<h5>Asked by: {{card.creator.common_name}}</h5>
</div>
</li>
</ul>
<div>
<h5 class="text-bold mb2" ng-if="database.entities.length > 0">Other tables</h5>
<ul>
<li class="border-bottom py3" ng-repeat="table in database.non_entities">
<div class="clearfix">
<span class="float-right text-grey-3 mt1">{{table.rows}} Total</span>
<h4 class="text-normal inline-block">
<a ng-if="table.rows > 0" class="link" href="/card/create">
{{table.name}}
</div>
</div>
<div ng-if="currentView === 'data'" ng-controller="ExploreDatabaseList">
<div class="HomeSubNav border-bottom mb2">
<div class="wrapper">
Data source:
<div class="Dropdown inline-block" dropdown on-toggle="toggled(open)">
<div class="DataSourceDropdown-title text-brand" dropdown-toggle>
{{currentDB.name}}
<mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
</span>
<ul class="Dropdown-content">
<li ng-repeat="(id, db) in databases">
<a class="Dropdown-item block" ng-click="selectCurrentDB(id)">
{{db.name}}
</a>
<span ng-if="table.rows === 0">
{{table.name}}
</span>
</h4>
</div>
<p class="text-grey-3 m0 pb1" ng-if="table.description">{{table.description}}</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<ol class="wrapper" ng-if="tables">
<li ng-repeat="table in tables" ng-if="table.rows > 0">
<a class="DBItem HoverItem flex align-center" href="/card/create?db={{currentDB.id}}&table={{table.id}}">
<h1 class="text-brand">{{table.name}}</h1>
<div class="TableRows flex-align-right text-right">
<h1>
{{table.rows}}
</h1>
<div class="text-uppercase ">total</div>
</div>
</a>
</li>
</ol>
<div ng-if="tables.length === 0">
<h2>No data is avaliable for this database</h2>
</div>
</div>
</div>
resources/frontend_client/index.html
+ 8
− 9
View file @ 67ec7905
......@@ -17,30 +17,29 @@
<body ng-controller="Corvus">
<div ng-controller="Nav" ng-if="user" ng-cloak>
<!-- MAIN NAV -->
<nav class="CoreNav relative bg-brand" ng-show="nav === 'main'">
<nav class="pt2 pb2 relative bg-brand" ng-show="nav === 'main'">
<div class="wrapper flex align-center">
<a class="NavItem-text text-white flex align-center" href="/">
<mb-logo-icon class="text-white mr1"></mb-logo-icon>
<a class="NavItem text-white flex align-center" href="/">
<mb-logo-icon class="text-white"></mb-logo-icon>
</a>
<div class="DashboardDropdown Dropdown ml4" dropdown on-toggle="toggled(open)">
<div class="DashboardDropdown Dropdown ml3" dropdown on-toggle="toggled(open)">
<a class="NavItem NavItem-withIcon text-white flex align-center" dropdown-toggle>
<mb-icon name="dashboards" width="28px" height="28px"></mb-icon>
Dashboards
<mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
<mb-icon class="ml1" name="chevrondown" width="8px" height="8px"></mb-icon>
</a>
<ul class="Dropdown-content" ng-controller="DashList">
<li ng-repeat="dash in dashboards">
<a class="Dropdown-item link block text-normal" href="/dash/{{dash.id}}">
{{dash.name}}
<span class="Badge">{{dash.public_perms}}</span>
<span class="Badge Badge--permissions" ng-if="dash.public_perms === 0">Private</span>
</a>
</li>
</ul>
</div>
<div class="UserDropdown Dropdown" dropdown on-toggle="toggled(open)">
<a class="NavItem text-white" selectable-nav-item="settings" dropdown-toggle>
<span class="NavItem-text" ng-if="!user.first_name">Me</span>
<span class="NavItem-text" ng-if="user.first_name">{{user.first_name}}</span>
<span ng-if="!user.first_name">Me</span>
<span ng-if="user.first_name">{{user.first_name}}</span>
<mb-icon name="chevrondown" width="8px" height="8px"></mb-icon>
</a>
<ul class="Dropdown-content right">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment