Skip to content

Commit

Permalink
[FIX JENKINS-26312] reimpl of layout changes 3e9cdcb
Browse files Browse the repository at this point in the history 
Attempt to do it in pure CSS ala 3e9cdcb failed so using CSS and JS combo.

(cherry picked from commit e2ec9eb)
  • Loading branch information
@tfennelly @olivergondza
tfennelly authored and olivergondza committed Feb 3, 2015
1 parent 79379fd commit f98947f
Show file tree
Hide file tree
Showing 3 changed files with 149 additions and 78 deletions.
116 changes: 59 additions & 57 deletions core/src/main/resources/lib/layout/layout.jelly
View file
Expand Up @@ -156,66 +156,68 @@ ${h.initPageVariables(context)}
<!-- for accessibility, skip the entire navigation bar and etc and go straight to the head of the content -->
<a href="#skip2content" class="skiplink">Skip to content</a>

<div id="header">
<div class="logo">
<a id="jenkins-home-link" href="${rootURL}/">
<img id="jenkins-head-icon" src="${imagesURL}/headshot.png" alt="title" />
<img id="jenkins-name-icon" src="${imagesURL}/title.png" alt="title" width="139" height="34" />
</a>
</div>
<div class="login">
<!-- login field -->
<j:if test="${app.useSecurity}">
<st:nbsp/>
<j:choose>
<j:when test="${!h.isAnonymous()}">
<j:invokeStatic var="user" className="hudson.model.User" method="current" />
<j:choose>
<j:when test="${user.fullName == null || user.fullName.trim().isEmpty()}">
<j:set var="userName" value="${user.id}"/>
</j:when>
<j:otherwise>
<j:set var="userName" value="${user.fullName}"/>
</j:otherwise>
</j:choose>
<span style="white-space:nowrap">
<a href="${rootURL}/user/${user.id}" class="model-link inside inverse"><b>${userName}</b></a>
<j:if test="${app.securityRealm.canLogOut()}">
|
<a href="${rootURL}/logout"><b>${%logout}</b></a>
</j:if>
</span>
</j:when>
<j:otherwise>
<st:include it="${app.securityRealm}" page="loginLink.jelly" />
</j:otherwise>
</j:choose>
</j:if>
<div id="page-head">
<div id="header">
<div class="logo">
<a id="jenkins-home-link" href="${rootURL}/">
<img id="jenkins-head-icon" src="${imagesURL}/headshot.png" alt="title" />
<img id="jenkins-name-icon" src="${imagesURL}/title.png" alt="title" width="139" height="34" />
</a>
</div>
<div class="login">
<!-- login field -->
<j:if test="${app.useSecurity}">
<st:nbsp/>
<j:choose>
<j:when test="${!h.isAnonymous()}">
<j:invokeStatic var="user" className="hudson.model.User" method="current" />
<j:choose>
<j:when test="${user.fullName == null || user.fullName.trim().isEmpty()}">
<j:set var="userName" value="${user.id}"/>
</j:when>
<j:otherwise>
<j:set var="userName" value="${user.fullName}"/>
</j:otherwise>
</j:choose>
<span style="white-space:nowrap">
<a href="${rootURL}/user/${user.id}" class="model-link inside inverse"><b>${userName}</b></a>
<j:if test="${app.securityRealm.canLogOut()}">
|
<a href="${rootURL}/logout"><b>${%logout}</b></a>
</j:if>
</span>
</j:when>
<j:otherwise>
<st:include it="${app.securityRealm}" page="loginLink.jelly" />
</j:otherwise>
</j:choose>
</j:if>
</div>
<div class="searchbox hidden-xs">
<!-- search box -->
<j:set var="searchURL" value="${h.searchURL}"/>
<form action="${searchURL}" method="get" style="position:relative;" class="no-json" name="search">
<!-- this div determines the minimum width -->
<div id="search-box-minWidth"/>
<!-- this div is used to calculate the width of the text box -->
<div id="search-box-sizer"/>
<div id="searchform">
<input name="q" placeholder="${%search}" id="search-box" class="has-default-text" value="${request.getParameter('q')}" />
<st:nbsp />
<a href="${%searchBox.url}"><l:icon class="icon-help icon-sm" /></a>
<div id="search-box-completion" />
<script>createSearchBox("${searchURL}");</script>
</div>
</form>
</div>
</div>
<div class="searchbox hidden-xs">
<!-- search box -->
<j:set var="searchURL" value="${h.searchURL}"/>
<form action="${searchURL}" method="get" style="position:relative;" class="no-json" name="search">
<!-- this div determines the minimum width -->
<div id="search-box-minWidth"/>
<!-- this div is used to calculate the width of the text box -->
<div id="search-box-sizer"/>
<div id="searchform">
<input name="q" placeholder="${%search}" id="search-box" class="has-default-text" value="${request.getParameter('q')}" />
<st:nbsp />
<a href="${%searchBox.url}"><l:icon class="icon-help icon-sm" /></a>
<div id="search-box-completion" />
<script>createSearchBox("${searchURL}");</script>
</div>
</form>
<div id="breadcrumbBar">
<l:breadcrumbBar>
<j:set var="mode" value="breadcrumbs" />
<d:invokeBody/>
</l:breadcrumbBar>
</div>
</div>
<div id="breadcrumbBar">
<l:breadcrumbBar>
<j:set var="mode" value="breadcrumbs" />
<d:invokeBody/>
</l:breadcrumbBar>
</div>

<div id="page-body">
<div class="row">
Expand Down
19 changes: 14 additions & 5 deletions war/src/main/webapp/css/style.css
View file
Expand Up @@ -74,21 +74,32 @@ body {
background-color: #f6faf2;
}

#side-panel {
z-index: 1;
}
#main-panel {
z-index: 0;
}

#side-panel, #main-panel {
margin: 0px 0px 40px 0px;
margin: 0px;
padding: 0px;
}

.fixedGridLayout #side-panel, .fixedGridLayout #main-panel {
position: absolute;
}

.fixedGridLayout #side-panel {
float:left;
position: fixed;
width: 360px;
margin-left: 15px;
}

.fixedGridLayout #main-panel {
margin-left: 370px;
padding-left: 370px;
margin-right: 15px;
width: 100%
}

#side-panel-content, #main-panel-content {
Expand All @@ -112,8 +123,6 @@ body {
}

#footer-container {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px 0px;
border-top: 1px solid #d3d7cf;
Expand Down
92 changes: 76 additions & 16 deletions war/src/main/webapp/scripts/hudson-behavior.js
View file
Expand Up @@ -1931,9 +1931,6 @@ function updateBuildHistory(ajaxUrl,nBuild) {
}
window.setTimeout(updateBuilds, updateBuildsRefreshInterval);

onPanelResize(function() {
checkAllRowCellOverflows();
});
onBuildHistoryChange(function() {
checkAllRowCellOverflows();
});
Expand Down Expand Up @@ -2005,43 +2002,68 @@ function removeZeroWidthSpaces(element) {
}
}

function onPanelResize(handler) {
Event.observe(window, 'jenkins:panelResized', handler);
}
function firePanelResized() {
Event.fire(window, 'jenkins:panelResized');
}

Element.observe(document, 'dom:loaded', function(){
if(isRunAsTest) {
return;
}

var pageHead = $('page-head');
var pageBody = $('page-body');
var sidePanel = $(pageBody).getElementsBySelector('#side-panel')[0];
var sidePanelContent = $(sidePanel).getElementsBySelector('#side-panel-content')[0];
var mainPanel = $(pageBody).getElementsBySelector('#main-panel')[0];
var mainPanelContent = $(mainPanel).getElementsBySelector('#main-panel-content')[0];
var pageFooter = $('footer-container');

function doPanelResize() {
function applyFixedGridLayout() {
var pageBodyWidth = Element.getWidth(pageBody);
if (pageBodyWidth > 768) {
pageBody.addClassName("fixedGridLayout");
pageBody.removeClassName("container-fluid");
sidePanel.removeClassName("col-sm-9");
mainPanel.removeClassName("col-sm-15");
return true; // It's a fixedGridLayout
} else {
pageBody.removeClassName("fixedGridLayout");
pageBody.addClassName("container-fluid");
sidePanel.addClassName("col-sm-9");
mainPanel.addClassName("col-sm-15");
return false; // It's not a fixedGridLayout
}
}

function applyFixedGridHeights() {
var windowHeight = document.viewport.getDimensions().height;
var headHeight = Element.getHeight(pageHead);
var footerHeight = Element.getHeight(pageFooter);
var sidePanelHeight = Element.getHeight(sidePanel);
var mainPanelHeight = Element.getHeight(mainPanel);
var minPageBodyHeight = (windowHeight - headHeight - footerHeight);

firePanelResized();
minPageBodyHeight = Math.max(minPageBodyHeight, sidePanelHeight);
minPageBodyHeight = Math.max(minPageBodyHeight, mainPanelHeight);

$(pageBody).setStyle({'min-height': minPageBodyHeight + 'px'});
$(sidePanel).setStyle({'min-height': minPageBodyHeight + 'px'});
$(mainPanel).setStyle({'min-height': minPageBodyHeight + 'px'});
}
doPanelResize();

Event.observe(window, 'resize', function() {
doPanelResize();
});
var doPanelLayouts = function() {
// remove all style
pageBody.removeAttribute('style');
sidePanel.removeAttribute('style');
mainPanel.removeAttribute('style');
if (applyFixedGridLayout()) {
applyFixedGridHeights();
}
}

Event.observe(window, 'resize', doPanelLayouts);
elementResizeTracker.onResize(sidePanelContent, doPanelLayouts);
elementResizeTracker.onResize(mainPanelContent, doPanelLayouts);

doPanelLayouts();
fireBuildHistoryChanged();
});

// get the cascaded computed style value. 'a' is the style name like 'backgroundColor'
Expand All @@ -2053,6 +2075,44 @@ function getStyle(e,a){
return null;
}

function ElementResizeTracker() {
this.trackedElements = [];

if(isRunAsTest) {
return;
}

var thisTracker = this;
function checkForResize() {
for (var i = 0; i < thisTracker.trackedElements.length; i++) {
var element = thisTracker.trackedElements[i];
var currDims = Element.getDimensions(element);
var lastDims = element.lastDimensions;
if (currDims.width !== lastDims.width || currDims.height !== lastDims.height) {
Event.fire(element, 'jenkins:resize');
}
element.lastDimensions = currDims;
}
setTimeout(checkForResize, 200);
}
checkForResize();
}
ElementResizeTracker.prototype.addElement = function(element) {
for (var i = 0; i < this.trackedElements.length; i++) {
if (this.trackedElements[i] === element) {
// we're already tracking it so no need to add it.
return;
}
}
this.trackedElements.push(element);
}
ElementResizeTracker.prototype.onResize = function(element, handler) {
element.lastDimensions = Element.getDimensions(element);
Event.observe(element, 'jenkins:resize', handler);
this.addElement(element);
}
var elementResizeTracker = new ElementResizeTracker();

/**
* Makes sure the given element is within the viewport.
*
Expand Down

0 comments on commit f98947f

Please sign in to comment.