Commit a7e8e64d by Matt Toback

The beginnings of the build mode and rows

parent 5f6ecac3
...@@ -10,8 +10,6 @@ function (_, $, coreModule) { ...@@ -10,8 +10,6 @@ function (_, $, coreModule) {
return { return {
link: function($scope, elem) { link: function($scope, elem) {
var lastHideControlsVal;
$scope.onAppEvent('panel-fullscreen-enter', function() { $scope.onAppEvent('panel-fullscreen-enter', function() {
elem.toggleClass('panel-in-fullscreen', true); elem.toggleClass('panel-in-fullscreen', true);
}); });
......
...@@ -51,6 +51,10 @@ ...@@ -51,6 +51,10 @@
<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li> <li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
</ul> </ul>
</li> </li>
<li>
<a ng-click="dashboard.editMode()" ng-show="!dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom"><i class="fa fa-wrench"></i></a>
<a ng-click="!dashboard.editMode()" ng-show="dashboard.editMode" bs-tooltip="'Build Mode <br> CTRL+B'" data-placement="bottom" style="color: #33B5E5;"><i class="fa fa-wrench fa-wrench-close" style="color: #33B5E5;"></i> Leave Build Mode </a>
</li>
</ul> </ul>
<ul class="nav dash-playlist-actions" ng-if="playlistSrv"> <ul class="nav dash-playlist-actions" ng-if="playlistSrv">
......
...@@ -43,7 +43,7 @@ function(angular, $) { ...@@ -43,7 +43,7 @@ function(angular, $) {
scope.broadcastRefresh(); scope.broadcastRefresh();
}, { inputDisabled: true }); }, { inputDisabled: true });
keyboardManager.bind('ctrl+e', function() { keyboardManager.bind('ctrl+b', function() {
scope.dashboard.editMode = !scope.dashboard.editMode; scope.dashboard.editMode = !scope.dashboard.editMode;
}, { inputDisabled: true }); }, { inputDisabled: true });
......
...@@ -49,8 +49,8 @@ ...@@ -49,8 +49,8 @@
label-class="width-10"> label-class="width-10">
</gf-form-switch> </gf-form-switch>
<gf-form-switch class="gf-form" <gf-form-switch class="gf-form"
label="Edit Mode" label="Build Mode"
tooltip="Enable edit mode. Shortcut: CTRL+E" tooltip="Enable build mode. Shortcut: CTRL+B"
checked="dashboard.editMode" checked="dashboard.editMode"
label-class="width-10"> label-class="width-10">
</gf-form-switch> </gf-form-switch>
...@@ -125,4 +125,3 @@ ...@@ -125,4 +125,3 @@
</div> </div>
</div> </div>
</div> </div>
...@@ -32,6 +32,11 @@ function (angular, _, config) { ...@@ -32,6 +32,11 @@ function (angular, _, config) {
row.collapse = row.collapse ? false : true; row.collapse = row.collapse ? false : true;
}; };
$scope.settingsHover = function(row) {
// Shows/hides the settings button on hover
return row.hoverSettings = ! row.hoverSettings;
};
$scope.addPanel = function(panel) { $scope.addPanel = function(panel) {
$scope.dashboard.addPanel(panel, $scope.row); $scope.dashboard.addPanel(panel, $scope.row);
}; };
......
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
<div class="clearfix"></div> <div class="clearfix"></div>
<div class="dash-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height> <div class="dash-row" ng-controller="RowCtrl" ng-repeat="(row_name, row) in dashboard.rows" row-height>
<div class="dash-row-header" ng-if="row.showTitle || dashboard.editMode"> <div class="dash-row-header pointer" ng-click="toggleRow(row)" ng-if="row.showTitle || dashboard.editMode" ng-mouseenter="settingsHover(row)" ng-mouseleave="settingsHover(row)">
<div class="dash-row-header-title" ng-bind="row.title | interpolateTemplateVars:this"></div> <div class="dash-row-header-title" ng-bind="row.title | interpolateTemplateVars:this"></div>
<div class="dash-row-header-settings dropdown"> <div class="dash-row-header-settings dropdown">
<a class="pointer dropdown-toggle" data-toggle="dropdown"> <a class="pointer dropdown-toggle" data-toggle="dropdown" ng-show="row.hoverSettings || dashboard.editMode">
<i class="fa fa-cog"></i> <i class="fa fa-cog"></i>
</a> </a>
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1"> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="drop1">
...@@ -63,9 +63,10 @@ ...@@ -63,9 +63,10 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="dash-row-header-collapse-toggle"> <div class="dash-row-header-chevron">
<a class="pointer" ng-click="row.collapse = !row.collapse"> <a class="pointer" ng-click="row.collapse = !row.collapse">
<i class="fa fa-chevron-down"></i> <i class="fa fa-chevron-down" ng-show="!row.collapse"></i>
<i class="fa fa-chevron-right" ng-show="row.collapse"></i>
</a> </a>
</div> </div>
</div> </div>
......
...@@ -268,3 +268,7 @@ $checkboxImageUrl: '../img/checkbox.png'; ...@@ -268,3 +268,7 @@ $checkboxImageUrl: '../img/checkbox.png';
$card-background: linear-gradient(135deg, #2f2f2f, #262626); $card-background: linear-gradient(135deg, #2f2f2f, #262626);
$card-background-hover: linear-gradient(135deg, #343434, #262626); $card-background-hover: linear-gradient(135deg, #343434, #262626);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
// dash row
$dash-row-background: linear-gradient(135deg, #262626, #292929);
$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
...@@ -292,3 +292,7 @@ $checkboxImageUrl: '../img/checkbox_white.png'; ...@@ -292,3 +292,7 @@ $checkboxImageUrl: '../img/checkbox_white.png';
$card-background: linear-gradient(135deg, $gray-5, $gray-6); $card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7); $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1); $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
// dash row
$dash-row-background: linear-gradient(135deg, $gray-5, $gray-6);
$dash-row-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
...@@ -217,32 +217,62 @@ div.flot-text { ...@@ -217,32 +217,62 @@ div.flot-text {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
align-items: center;
} }
.dash-row-header-title { .dash-row-header-title {
font-size: $font-size-h3; font-size: $font-size-h3;
font-family: $headings-font-family; font-family: $headings-font-family;
padding: $spacer $spacer*2; padding: $spacer $spacer $spacer $spacer/2;
} }
.dash-row-header-settings { .dash-row-header-settings {
display: none; display: block;
}
.dash-row-header-chevron {
flex-grow: 100;
text-align: right;
margin-right: 0.6rem;
} }
.dash-row-header-collapse-toggle { .dash-row-header-collapse-toggle {
flex-grow: 100; flex-grow: 100;
text-align: right; text-align: right;
display: none; display: none;
margin-right: $spacer/2;
} }
.dash-edit-mode { .dash-edit-mode {
.dash-row { // .dash-row {
background-color: $dark-5; // background: $dash-row-background;
padding: 0 $spacer $spacer $spacer; // box-shadow: $dash-row-shadow;
} // padding: 0 ($spacer/4) ($spacer/2) ($spacer/4);
// margin-bottom: $spacer;
// }
.dash-row {
background: lighten($body-bg, 1%);
box-shadow: inset 15px 0px 0px 0px #262626;
padding: 0 ($spacer/4) ($spacer/2) ($spacer*2);
margin-left: 5px;
margin-bottom: $spacer;
}
.dash-row-header-collapse-toggle, .dash-row-header-collapse-toggle,
.dash-row-header-settings { .dash-row-header-settings {
display: block; display: block;
} }
} }
.fa.fa-wrench-close:after {
content: "";
position: absolute;
width: .22rem;
height: 33.421356%;
top: 19px;
display: block;
background: #33B5E5;
left: 181px;
transform: translate(-50%, 0) rotate(-45deg);
}
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