Skip to content

J
jenkins

xxadev / jenkins
与 Fork 源项目一致

从无法访问的项目Fork

通知 3
Star 0
Fork 0
J
jenkins

体验新版 GitCode，发现更多精彩内容 >>

提交 e2ec9eb3 编写于 作者: T tfennelly
浏览文件
操作

[FIX JENKINS-26312] reimpl of layout changes 3e9cdcbc 

Attempt to do it in pure CSS ala 3e9cdcbc failed so using CSS and JS combo.
上级 66c02a4c
隐藏空白更改
内联 并排
Showing with 149 addition and 78 deletion
core/src/main/resources/lib/layout/layout.jelly
浏览文件 @ e2ec9eb3
......@@ -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">
......
war/src/main/webapp/css/style.css
浏览文件 @ e2ec9eb3
......@@ -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 {
......@@ -112,8 +123,6 @@ body {
}
#footer-container {
position: absolute;
bottom: 0;
width: 100%;
padding: 10px 0px;
border-top: 1px solid #d3d7cf;
......
war/src/main/webapp/scripts/hudson-behavior.js
浏览文件 @ e2ec9eb3
......@@ -1931,9 +1931,6 @@ function updateBuildHistory(ajaxUrl,nBuild) {
}
window.setTimeout(updateBuilds, updateBuildsRefreshInterval);
onPanelResize(function() {
checkAllRowCellOverflows();
});
onBuildHistoryChange(function() {
checkAllRowCellOverflows();
});
......@@ -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'
......@@ -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.
*
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或