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

wip

parent d1726f48
Branches
Tags
No related merge requests found
Showing with 56 additions and 135 deletions
......@@ -469,7 +469,7 @@ CardDirectives.directive('cvLatlongHeatmap', ['CardRenderer', function(CardRende
}]);
CardDirectives.directive('cvCardFavoriteButton', ['Card', function(Card) {
CardDirectives.directive('mbCardFavoriteButton', ['Card', function(Card) {
function link(scope, element, attr) {
scope.favorite = false;
......
<a href="#" ng-click="toggleFavorite()">
<mb-icon name="star" width="18px" height="18px" ng-class="{'text-grey-1' : !favorite}"></mb-icon>
<a href="#" class="animate-pop" ng-click="toggleFavorite()">
<mb-icon name="star" width="18px" height="18px" ng-class="{'text-grey-1' : !favorite, 'text-gold': favorite }"></mb-icon>
</a>
<div class="CardSettings mt3 pb3" ng-if="cardData">
<div class="clearfix py2 px4">
<label class="float-left text-bold py2">Show data as:</label>
<ul class="float-right">
<li class="inline-block" ng-repeat="chart in utils.charts">
<a class="block py2 px2 link" href="#" ng-class="{psdisabled: !displayTypes[chart.id].available, psunderline: chart.id == card.display && cardData.data}" title="{{getNotAvailableReasonsAsString(chart.id)}}">
<span ng-click="card.display = chart.id" ng-if="displayTypes[chart.id].available">{{chart.name}}</span>
<span ng-if="!displayTypes[chart.id].available" >{{chart.name}}</span>
</a>
</li>
</ul>
</div>
<div class="bordered rounded mx4">
<div class="CardSettings-group">
<div class="CardSettings-groupTitle">
<input type="checkbox" name="axis_settings" id="axis_settings" ng-model="axis_settings">
<label for="axis_settings">
<h4 class="mx1 inline-block">I need to change the scale of the axis</h4>
</label>
</div>
<div class="CardSettings-content" ng-if="axis_settings">
<div>
<h4 class="inline-block">X-Axis</h4>
<input class="input inline-block mx2" placeholder="Minimum" ng-model="card.visualization_settings.xAxis.min" type="number" name="xAxis_min"/>
<input class="input inline-block mx2" placeholder="Maximum" ng-model="card.visualization_settings.xAxis.max" type="number" name="xAxis_max"/>
</div>
<div class="mt4">
<h4 class="inline-block">Y-Axis</h4>
<input class="input inline-block mx2" placeholder="Minimum" ng-model="card.visualization_settings.yAxis.min" type="number" name="yAxis_min"/>
<input class="input inline-block mx2" placeholder="Maximum" ng-model="card.visualization_settings.yAxis.max" type="number" name="yAxis_max"/>
</div>
<div class="mt4">
<input type="checkbox" ng-model="card.visualization_settings.chart.panning" name="chart_panning" id="chart_panning">
<label class="CardSettings-label" for="chart_panning">Enable panning</label>
</div>
</div>
</div>
<div class="CardSettings-group">
<div class="CardSettings-groupTitle">
<input type="checkbox" name="color_settings" id="color_settings" ng-model="color_settings">
<label>
<h4 class="mx1 inline-block">I need to adjust the colors</h4>
</label>
</div>
<div class="CardSettings-content" ng-if="color_settings">
<ol class="mb3">
<li class="CardSettings-colorBlock" style="background-color: {{color}}" ng-repeat="color in vizColors" ng-click="setPrimaryChartColor(color)"></li>
</ol>
<input type="checkbox" name="gridline_enabled" id="gridline_enabled" ng-model="card.visualization_settings.xAxis.gridLine_enabled">
<label class="CardSettings-label" for="gridline_enabled">Show gridline</label>
</div>
</div>
<div class="CardSettings-group">
<div class="CardSettings-groupTitle">
<input type="checkbox" name="label_settings" id="label_settings" ng-model="label_settings">
<label for="label_settings">
<h4 class="mx1 inline-block">I need to change the labels on my chart.</h4>
</label>
</div>
<div class="CardSettings-content" ng-if="label_settings">
<div class="py1">
<input type="checkbox" name="xAxis_labels_enabled" id="xAxis_labels_enabled" ng-model="card.visualization_settings.xAxis.labels_enabled">
<label class="CardSettings-label" for="xAxis_labels_enabled">Show X axis labels</label>
<a class="link ml2" ng-click="customXAxisShowing=true">Add a custom title</a>
<div class="pl3" ng-if="customXAxisShowing">
<input type="checkbox" ng-model="card.visualization_settings.xAxis.title_enabled">
<input class="input block" ng-model="card.visualization_settings.xAxis.title_text" type="text" name="xAxis_title_text" placeholder="Custom X axis title">
</div>
</div>
<div class="py1">
<input type="checkbox" name="yAxis_labels_enabled" id="yAxis_labels_enabled" ng-model="card.visualization_settings.yAxis.labels_enabled">
<label class="CardSettings-label" for="yAxis_labels_enabled">Show Y axis labels</label>
<a class="link ml2" ng-click="customYAxisShowing = true">Add a custom title</a>
<div class="pl3" ng-if="customYAxisShowing">
<input type="checkbox" ng-model="card.visualization_settings.yAxis.title_enabled">
<input class="input block" ng-model="card.visualization_settings.yAxis.title_text" type="text" name="yAxis_title_text" placeholder="Custom Y axis title"/>
</div>
</div>
</div>
</div>
<div class="CardSettings-group" ng-if="card.display == 'pin_map'">
<div class="CardSettings-groupTitle">
<input type="checkbox" name="column_settings" id="column_settings" ng-model="column_settings">
<label>
<h4 class="mx1 inline-block">I need to change the columns</h4>
</label>
</div>
<div class="CardSettings-content" ng-if="column_settings">
<div class="py1" ng-if="card.display == 'pin_map'">
<select class="block" ng-model="card.visualization_settings.map.latitude_dataset_col_index" name="map_latitude_dataset_col_index" ng-options="column.index as column.name for column in getColumnsBySpecialTypes(['latitude'])"></select>
<label for="map_latitude_dataset_col_index">Latitude</label>
</div>
<div class="py1" ng-if="card.display == 'pin_map'">
<select class="block" ng-model="card.visualization_settings.map.longitude_dataset_col_index" name="map_longitude_dataset_col_index" ng-options="column.index as column.name for column in getColumnsBySpecialTypes(['longitude'])"></select>
<label for="map_longitude_dataset_col_index">Longitude</label>
</div>
</div>
</div>
</div>
</div>
......@@ -7,6 +7,8 @@
--success-color: #9CC177;
--headsup-color: #F5A623;
--gold-color: #F9D45C;
--error-color: #EF8C8C;
}
......@@ -59,6 +61,15 @@
background-color: var(--headsup-color);
}
/* favorite */
.text-gold {
color: var(--gold-color);
}
.bg-gold {
background-color: var(--gold-color);
}
/* grey */
.text-grey-1 { color: color(var(--base-grey) shade(10%)) }
......
......@@ -40,3 +40,7 @@
.flex-row {
flex-direction: row;
}
.flex-wrap {
flex-wrap: wrap;
}
......@@ -73,7 +73,6 @@
.Entity-title {
font-size: 1.24em;
margin-bottom: 0.45rem;
color: #797979;
}
......@@ -83,7 +82,32 @@
margin-bottom: 0.5em;
}
.NavItem {
padding: 1em;
border-radius: 8px;
}
.NavItem:hover {
background-color: rgba(255, 255, 255, 0.08);
cursor: pointer;
}
@keyframes pop {
0% { transform: scale(0.75) }
75% { transform: scale(1.0625) }
100% { transform: scale(1) }
}
.animate-pop {
animation-name: popin;
animation-duration: .15s;
animation-timing-function: ease-out;
}
.AdminLink {
opacity: 0.435;
}
.Entity--card:hover {
border-color: red;
.AdminLink:hover {
opacity: 1;
}
......@@ -10,13 +10,16 @@ HomeControllers.controller('HomeGreeting', ['$scope', '$location', function($sc
'How\'s it going',
'Good morning',
'Howdy',
'Aloha',
'Looking good',
'Greetings',
'Good to see you',
];
var subheadPrefixes = [
'What do you want to know?',
'What\'s on your mind?',
'What do you want to find out?',
'Hodor Hodor Hodor'
];
function buildGreeting (greetingOptions, personalization) {
......
<div class="Home full-height" ng-controller="Home">
<div class="bg-brand text-white border-bottom">
<div class="Grid Grid--full Grid--gutters large-Grid--1of2 align-center wrapper">
<div class="bg-brand text-white border-bottom pb2">
<div class="Grid Grid--full large-Grid--1of2 align-center wrapper">
<div class="Grid-cell" ng-controller="HomeGreeting">
<div class="Greeting">
<div class="Greeting-title">{{greeting}}</div>
......@@ -55,7 +55,7 @@
</span>
</div>
<div class="flex flex-align-right">
<mb-icon class="text-grey-1 mr4" name="star" width="18px" height="18px" ng-click="toggleFavorite(card.id, $event)"></mb-icon>
<mb-card-favorite-button class="mr4" card-id="card.id"></mb-card-favorite-button>
<mb-icon class="text-grey-1 flex-align-right" name="chevronright" width="18px" height="18px"></mb-icon>
</div>
</a>
......@@ -90,7 +90,7 @@
<li ng-repeat="table in tables" ng-if="table.rows > 0">
<a class="no-decoration py2 border-bottom flex align-center" href="/card/create?db={{currentDB.id}}&table={{table.id}}">
<div class="flex flex-column">
<h2 class="text-brand">{{table.name}}</h2>
<h2 class="text-brand flex-wrap">{{table.name}}</h2>
{{table.description}}
</div>
<div class="flex flex-align-right align-center">
......
......@@ -35,6 +35,7 @@ export default {
popular: 'M22.7319639,13.7319639 L16.5643756,19.8995521 L15.4656976,18.8008741 L15.4640332,18.8024814 L15.3719504,18.707127 L15.1500476,18.4852242 L15.1539209,18.4813508 L15.1522861,18.4796579 L15.1522861,18.4796579 L15.1103863,18.52012 L13.4809348,16.8327737 L13.4809348,16.8327737 L7.98163972,22.3320688 L6.56742615,20.9178552 L13.4852814,14 L14.5837075,15.0984261 L14.5851122,15.0970697 L14.6628229,15.1775415 L14.8994949,15.4142136 L14.8953638,15.4183447 L14.8968592,15.4198933 L14.9388754,15.3793187 L16.5684644,17.0668074 L16.5684644,17.0668074 L21.3176359,12.3176359 L19,10 L26,9 L25,16 L22.7319639,13.7319639 Z',
list: 'M3 8 A3 3 0 0 0 9 8 A3 3 0 0 0 3 8 M12 6 L28 6 L28 10 L12 10z M3 16 A3 3 0 0 0 9 16 A3 3 0 0 0 3 16 M12 14 L28 14 L28 18 L12 18z M3 24 A3 3 0 0 0 9 24 A3 3 0 0 0 3 24 M12 22 L28 22 L28 26 L12 26z',
lock: 'M8.8125,13.2659641 L5.50307055,13.2659641 C4.93891776,13.2659641 4.5,13.7132101 4.5,14.2649158 L4.5,30.8472021 C4.5,31.4051918 4.94908998,31.8461538 5.50307055,31.8461538 L26.4969294,31.8461538 C27.0610822,31.8461538 27.5,31.3989079 27.5,30.8472021 L27.5,14.2649158 C27.5,13.7069262 27.05091,13.2659641 26.4969294,13.2659641 L23.1875,13.2659641 L23.1875,7.18200446 C23.1875,3.22368836 19.9695466,0 16,0 C12.0385306,0 8.8125,3.21549292 8.8125,7.18200446 L8.8125,13.2659641 Z M12.3509615,7.187641 C12.3509615,5.17225484 13.9813894,3.53846154 15.9955768,3.53846154 C18.0084423,3.53846154 19.6401921,5.17309313 19.6401921,7.187641 L19.6401921,13.0473232 L12.3509615,13.0473232 L12.3509615,7.187641 Z',
mine: 'M28.4907419,50 C25.5584999,53.6578499 21.0527692,56 16,56 C10.9472308,56 6.44150015,53.6578499 3.50925809,50 L28.4907419,50 Z M29.8594823,31.9999955 C27.0930063,27.217587 21.922257,24 16,24 C10.077743,24 4.9069937,27.217587 2.1405177,31.9999955 L29.8594849,32 Z M16,21 C19.8659932,21 23,17.1944204 23,12.5 C23,7.80557963 22,3 16,3 C10,3 9,7.80557963 9,12.5 C9,17.1944204 12.1340068,21 16,21 Z',
search: 'M12 0 A12 12 0 0 0 0 12 A12 12 0 0 0 12 24 A12 12 0 0 0 18.5 22.25 L28 32 L32 28 L22.25 18.5 A12 12 0 0 0 24 12 A12 12 0 0 0 12 0 M12 4 A8 8 0 0 1 12 20 A8 8 0 0 1 12 4 ',
star: 'M16 0 L21 11 L32 12 L23 19 L26 31 L16 25 L6 31 L9 19 L0 12 L11 11',
};
......@@ -335,4 +335,4 @@ MetabaseServices.factory('TableSegment', ['$resource', '$cookies', function($res
},
});
}]);
\ No newline at end of file
}]);
......@@ -49,7 +49,7 @@
<li><a class="Dropdown-item link block" href="/auth/logout">Logout</a></li>
</ul>
</div>
<a class="NavItem" ng-if="user.is_superuser" href="/admin/">
<a class="AdminLink NavItem" ng-if="user.is_superuser" href="/admin/">
<mb-icon class="text-white" name="gear" width="16px" height="16px"></mb-icon>
</a>
</div>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment