Skip to content

Commit

Permalink
Use Patternfly vertical navigation and add project bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@sg00dwin @spadgett
sg00dwin authored and spadgett committed Aug 24, 2017
1 parent c9a5d1a commit 13bd176
Show file tree
Hide file tree
Showing 96 changed files with 8,091 additions and 8,935 deletions.
48 changes: 23 additions & 25 deletions app/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html class="no-js layout-pf-alt layout-pf-alt-fixed">
<html class="no-js layout-pf layout-pf-fixed">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta charset="utf-8">
Expand Down Expand Up @@ -35,43 +35,41 @@
<link rel="stylesheet" type="text/css" href="styles/extensions.css">
<style type="text/css">


</style>
</head>
<body class="console-os">
<body class="console-os">
<!-- Add your site or application content here -->

<p ng-if="globalTechPreviewIndicator" ng-cloak class="tech-preview-banner">Technology preview is enabled</p>
<osc-header></osc-header>
<toast-notifications></toast-notifications>
<div ng-view>
<div ng-view class="container-pf-nav-pf-vertical" ng-class="{ 'collapsed-nav': nav.collapsed }">
<!-- Include default simple nav and shaded background as a placeholder until API discovery finishes -->
<nav class="navbar navbar-pf-alt top-header" role="navigation">
<!-- <nav class="navbar navbar-pf-vertical top-header" role="navigation">
<div row>
<div class="navbar-header">
<a class="navbar-brand" id="openshift-logo" href="./">
<div id="header-logo"></div>
</a>
</div>
</div>
</nav>
<div class="wrap no-sidebar">
<div class="middle surface-shaded">
<div class="middle-section">
<div class="empty-state-message">
<h2 class="text-center" id="temporary-loading-message" style="display: none;">Loading...</h2>
<!-- So that we don't get the Loading... message AND the noscript message -->
<script>
document.getElementById('temporary-loading-message').style.display = "";
</script>
</div>
<noscript>
<div class="attention-message">
<h1>JavaScript Required</h1>
<p>The OpenShift web console requires JavaScript to provide a rich interactive experience. Please
enable JavaScript to continue. If you do not wish to enable JavaScript or are unable to do so,
you may use the command-line tools to manage your projects and applications instead.</p>
</div>
</noscript>
</nav> -->
<div class="middle">
<div class="middle-content">
<div class="empty-state-message">
<h2 class="text-center" id="temporary-loading-message" style="display: none;">Loading...</h2>
<!-- So that we don't get the Loading... message AND the noscript message -->
<script>
document.getElementById('temporary-loading-message').style.display = "";
</script>
</div>
<noscript>
<div class="attention-message">
<h1>JavaScript Required</h1>
<p>The OpenShift web console requires JavaScript to provide a rich interactive experience. Please
enable JavaScript to continue. If you do not wish to enable JavaScript or are unable to do so,
you may use the command-line tools to manage your projects and applications instead.</p>
</div>
</noscript>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/scripts/controllers/overview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1374,7 +1374,7 @@ function OverviewController($scope,

$scope.$on('$destroy', function() {
DataService.unwatchAll(watches);
$(window).off('resize.overview', onResize);
$(window).off('.overview');
});
}));
}
78 changes: 22 additions & 56 deletions app/scripts/directives/logViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ angular.module('openshiftConsole')
DataService,
HTMLService,
ModalsService,
logLinks,
BREAKPOINTS) {
logLinks) {
// cache the jQuery win, but not clobber angular's $window
var $win = $(window);

Expand Down Expand Up @@ -78,9 +77,7 @@ angular.module('openshiftConsole')
// cached node's are set by the directive's postLink fn after render (see link: func below)
// A jQuery wrapped version is cached in var of same name w/$
var cachedLogNode;
var cachedScrollableNode;
var $cachedScrollableNode;
var scrollableDOMNode;
var scrollableNode;
var $affixableNode;
var html = document.documentElement;
$scope.logViewerID = _.uniqueId('log-viewer');
Expand All @@ -96,16 +93,6 @@ angular.module('openshiftConsole')
name = $scope.object.metadata.name;
}

// are we going to scroll the window, or the DOM node?
var detectScrollableNode = function() {
if(window.innerWidth < BREAKPOINTS.screenSmMin && !$scope.fixedHeight) {
scrollableDOMNode = null;
} else {
scrollableDOMNode = cachedScrollableNode;
}
};



// is just toggling show/hide, nothing else.
var updateScrollLinksVisibility = function() {
Expand Down Expand Up @@ -141,42 +128,25 @@ angular.module('openshiftConsole')


var attachScrollEvents = function() {
// always clear all scroll listeners before reattaching
$cachedScrollableNode.off('scroll', onScroll);
$win.off('scroll', onScroll);

// only add the appropriate event
if(window.innerWidth <= BREAKPOINTS.screenSmMin && !$scope.fixedHeight) {
$win.on('scroll', onScroll);
if(scrollableNode) {
$(scrollableNode).on('scroll', onScroll);
} else {
$cachedScrollableNode.on('scroll', onScroll);
$win.on('scroll', onScroll);
}
};

// TODO: resize event breaks the affix, even with this if/else.
// however, on first load of either mobile or non this works fine.
var affix = function() {
// don't affix for a fixed height scroll window
if ($scope.fixedHeight) {
return;
}
if(window.innerWidth < BREAKPOINTS.screenSmMin && !$scope.fixedHeight) {
$affixableNode
.affix({
target: window,
offset: {
top: $scope.followAffixTop || 0 // 390
}
});
} else {
$affixableNode
.affix({
target: $cachedScrollableNode,
offset: {
top: $scope.followAffixTop || 0 // 390
}
});
}
$affixableNode
.affix({
target: window,
offset: {
top: $scope.followAffixTop || 0 // 390
}
});
};

var getLogOutputElement = function() {
Expand Down Expand Up @@ -243,11 +213,7 @@ angular.module('openshiftConsole')
// roll up & debounce the various fns to call on resize
var onResize = _.debounce(function() {
fillHeight(true);
// update scroll handlers
detectScrollableNode();
attachScrollEvents();
updateScrollLinksVisibility(); // toggles show/hide
affix();
// toggle off the follow behavior if the user resizes the window
onScroll();
}, 100);
Expand All @@ -263,7 +229,7 @@ angular.module('openshiftConsole')
// Tell the scroll listener this is an auto-scroll. The listener
// will reset it to false.
autoScrollingNow = true;
logLinks.scrollBottom(scrollableDOMNode);
logLinks.scrollBottom(scrollableNode);
};


Expand Down Expand Up @@ -471,11 +437,8 @@ angular.module('openshiftConsole')

// PUBLIC API ----------------------------------------------------

// scrollable node is a parent div#container-main, but may be window
// if we are currently mobile
this.cacheScrollableNode = function(node) {
cachedScrollableNode = node;
$cachedScrollableNode = $(cachedScrollableNode);
scrollableNode = node;
};

this.cacheLogNode = function(node) {
Expand All @@ -487,7 +450,6 @@ angular.module('openshiftConsole')
};

this.start = function() {
detectScrollableNode();
attachScrollEvents();
affix();
};
Expand All @@ -500,11 +462,11 @@ angular.module('openshiftConsole')
autoScrollActive: true,
state: false, // show nothing initially to avoid flicker
onScrollBottom: function() {
logLinks.scrollBottom(scrollableDOMNode);
logLinks.scrollBottom(scrollableNode);
},
onScrollTop: function() {
$scope.autoScrollActive = false;
logLinks.scrollTop(scrollableDOMNode);
logLinks.scrollTop(scrollableNode);
$('#' + $scope.logViewerID + '-affixedFollow').affix('checkPosition');
},
toggleAutoScroll: toggleAutoScroll,
Expand All @@ -521,7 +483,9 @@ angular.module('openshiftConsole')
// clean up all the listeners
$win.off('resize', onResize);
$win.off('scroll', onScroll);
$cachedScrollableNode.off('scroll', onScroll);
if (scrollableNode) {
$(scrollableNode).off('scroll', onScroll);
}
});


Expand All @@ -543,7 +507,9 @@ angular.module('openshiftConsole')
// would be better if 'scrollable' was a directive on a parent div
// and we were sending it messages telling it when to scroll.
$timeout(function() {
ctrl.cacheScrollableNode(document.getElementById($scope.fixedHeight ? ($scope.logViewerID + '-fixed-scrollable') : 'container-main'));
if ($scope.fixedHeight) {
ctrl.cacheScrollableNode(document.getElementById($scope.logViewerID + '-fixed-scrollable'));
}
ctrl.cacheLogNode(document.getElementById($scope.logViewerID+'-logContent'));
ctrl.cacheAffixable(document.getElementById($scope.logViewerID+'-affixedFollow'));
ctrl.start();
Expand Down

0 comments on commit 13bd176

Please sign in to comment.