Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[JENKINS-34670] Add support for a new full screen layout #2445

Merged
merged 10 commits into from
Apr 2, 2017
Original file line number Diff line number Diff line change
@@ -1,38 +1,34 @@
<?jelly escape-by-default='true'?>
<l:html norefresh="true" title="${app.instance.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form">

<l:layout norefresh="true" type="full-screen" title="${app.instance.displayName}">
<l:main-panel>
<st:include page="client-scripts" />
<form action="${app.instance.securityRealm.authenticationGatewayUrl}" method="POST">
<st:include page="client-scripts" />
<form action="${app.instance.securityRealm.authenticationGatewayUrl}" method="POST">
<input type="hidden" name="from" value="${request.getParameter('from')}" />
<div class="plugin-setup-wizard bootstrap-3">
<div class="modal fade in" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title">${%authenticate-security-token.getting.started}</h4>
</div>
<div class="modal-body">
<i class="water-mark icon-service"></i>
<div class="jumbotron welcome-panel offline">

<h1>${%authenticate-security-token.unlock.jenkins}</h1>
<p>
${%jenkins.install.findSecurityTokenMessage(it.initialAdminPasswordFile)}
</p>
<p>${%jenkins.install.findSecurityTokenMessage(it.initialAdminPasswordFile)}</p>
<p>${%authenticate-security-token.copy.password}</p>
<j:if test="${error}">
<div class="alert alert-danger">
<strong>${%authenticate-security-token.error} </strong>
${%authenticate-security-token.password.incorrect}
<strong>${%authenticate-security-token.error}</strong> ${%authenticate-security-token.password.incorrect}
</div>
</j:if>
<div class="form-group ${error ? 'has-error' : ''}">
<label class="control-label" for="security-token">${%authenticate-security-token.password.administrator}</label>
<input name="j_username" value="${app.setupWizard.initialSetupAdminUserName}" type="hidden"/>
<input id="security-token" class="form-control" type="password" name="j_password"/>
<label class="control-label" for="security-token">${%authenticate-security-token.password.administrator}</label>
<input name="j_username" value="${app.setupWizard.initialSetupAdminUserName}" type="hidden"/>
<input id="security-token" class="form-control" type="password" name="j_password"/>
</div>

</div>
</div>
<div class="modal-footer">
Expand All @@ -42,6 +38,8 @@
</div>
</div>
</div>
</form>
</l:main-panel>
</l:html>
</form>
</l:main-panel>
</l:layout>

</j:jelly>
16 changes: 10 additions & 6 deletions core/src/main/resources/jenkins/install/SetupWizard/index.jelly
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
<?jelly escape-by-default='true'?>
<l:html norefresh="true" title="${it.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
<l:main-panel>
<div class="plugin-setup-wizard-container"></div>
<st:include page="wizard-ui"/>
</l:main-panel>
</l:html>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">

<l:layout norefresh="true" type="full-screen" title="${it.displayName}">
<l:main-panel>
<div class="plugin-setup-wizard-container"></div>
<st:include page="wizard-ui"/>
</l:main-panel>
</l:layout>

</j:jelly>
Original file line number Diff line number Diff line change
@@ -1,13 +1,27 @@
<?jelly escape-by-default='true'?>
<l:html norefresh="true" title="${it.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
<l:main-panel>
<h1>${%HTTP Proxy Configuration}</h1>
<f:form method="post" action="/pluginManager/proxyConfigure" name="proxyConfigure">
<j:scope>
<j:set var="instance" value="${app.proxy}"/>
<j:set var="descriptor" value="${app.pluginManager.proxyDescriptor}"/>
<st:include from="${descriptor}" page="${descriptor.configPage}" />
</j:scope>
</f:form>
</l:main-panel>
</l:html>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">

<l:layout norefresh="true" type="full-screen" title="${it.displayName}">
<l:main-panel>
<style type="text/css">

#proxy-configuration {
margin: 8px;
}

</style>

<div id="proxy-configuration">
<h1>${%HTTP Proxy Configuration}</h1>
<f:form method="post" action="/pluginManager/proxyConfigure" name="proxyConfigure">
<j:scope>
<j:set var="instance" value="${app.proxy}"/>
<j:set var="descriptor" value="${app.pluginManager.proxyDescriptor}"/>
<st:include from="${descriptor}" page="${descriptor.configPage}" />
</j:scope>
</f:form>
</div>
</l:main-panel>
</l:layout>

</j:jelly>
Original file line number Diff line number Diff line change
@@ -1,55 +1,52 @@
<!--
This is used to create the first user.
-->
<?jelly escape-by-default='true'?>
<l:html norefresh="true" title="${it.displayName}" xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form">
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:s="/lib/form">

<l:main-panel>
<l:layout norefresh="true" type="full-screen" title="${it.displayName}">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How this step of the Setup Wizard is managed (by using a iframe) needs to be changed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why, exactly?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kzantow I think we should not use iframes. I would like to work on a proposal based on a wizard (flow) with real steps / states, where we can have a URL per state.

<l:main-panel>
<link rel="stylesheet" href="${resURL}/css/google-fonts/roboto/css/roboto.css" type="text/css" />
<style type="text/css">

<link rel="stylesheet" href="${resURL}/css/google-fonts/roboto/css/roboto.css" type="text/css" />

<style type="text/css">

#main-panel {
margin: 0;
padding: 0;
}
tr td {
padding-bottom: 2px;
}
body {
#create-admin-user {
padding: 20px 20px 20px 100px;
font-family: 'roboto';
}
form > div {
margin: 8px;
}

#create-admin-user form > div {
margin: 0 !important;
}
h1 {
}

#create-admin-user h1 {
font-family: 'roboto', sans-serif;
font-size: 48px;
margin-top: 30px;
font-weight: 500;
}
h1 img {
position: absolute;
right: -80px;
top: 38px;
}
tr td, input {
}

#create-admin-user tr td {
padding-bottom: 2px;
}

#create-admin-user tr td, #create-admin-user input {
line-height: 25px;
margin-bottom: 6px;
}
input[type=text], input[type=password] {
}

#create-admin-user input[type=text], input[type=password] {
border: 1px solid #ddd;
border-radius: 2px;
padding: 1px 8px;
}
</style>
<form action="${rootURL}/setupWizard/createAdminUser" method="post">
<local:_entryForm it="${app.securityRealm}" host="${app.securityRealm}" title="${%Create First Admin User}" captcha="${false}" xmlns:local="/hudson/security/HudsonPrivateSecurityRealm" />
<script>
$('username').focus();
</script>
</form>
</l:main-panel>
</l:html>
}
</style>

<div id="create-admin-user">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More robust while removing the usage of iframe

<form action="${rootURL}/setupWizard/createAdminUser" method="post">
<local:_entryForm it="${app.securityRealm}" host="${app.securityRealm}" title="${%Create First Admin User}" captcha="${false}" xmlns:local="/hudson/security/HudsonPrivateSecurityRealm" />
<script>
$('username').focus();
</script>
</form>
</div>
</l:main-panel>
</l:layout>

</j:jelly>
3 changes: 3 additions & 0 deletions core/src/main/resources/lib/layout/html.jelly
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ THE SOFTWARE.
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:i="jelly:fmt" xmlns:x="jelly:xml">
<st:documentation>

This Jelly tag is deprecated, use <l:layout /> tag instead. Defined on layout.jelly.

Outer-most tag for a normal (non-AJAX) HTML rendering.
This is used with nested &lt;header>, &lt;side-panel>, and &lt;main-panel>
to form Jenkins's basic HTML layout.
Expand Down
14 changes: 12 additions & 2 deletions core/src/main/resources/lib/layout/layout.jelly
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ THE SOFTWARE.
(The permission will be checked against the "it" object.)
</st:attribute>
<st:attribute name="type" use="optional">
Available values: two-column (by default) or one-column (full-width size).
Available values: two-column (by default), one-column (full-width size) or full-screen (since TODO).
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

since TODO was asked by @daniel-beck

</st:attribute>
</st:documentation>
<st:setHeader name="Expires" value="0" />
Expand All @@ -69,9 +69,14 @@ ${h.initPageVariables(context)}
this also allows us to configure HttpSessionContextIntegrationFilter not to create sessions,
which I suspect can end up creating sessions for wrong resource types (such as static resources.)
-->

<j:if test="${attrs.type==null}">
<j:set var="layoutType" value="two-column"/>
</j:if>
<j:if test="${attrs.type!=null}">
<j:set var="layoutType" value="${attrs.type}"/>
</j:if>

<j:set var="isMSIE" value="${userAgent.contains('MSIE')}"/>
<j:set var="_" value="${request.getSession()}"/>
<j:set var="_" value="${h.configureAutoRefresh(request, response, attrs.norefresh!=null and !attrs.norefresh.equals(false))}"/>
Expand Down Expand Up @@ -169,7 +174,9 @@ ${h.initPageVariables(context)}
<script src="${resURL}/jsbundles/page-init.js" type="text/javascript"/>

</head>
<body id="jenkins" class="yui-skin-sam jenkins-${h.version} ${layoutType}" data-version="${h.version}" data-model-type="${it.class.name}">
<body id="jenkins" class="yui-skin-sam ${layoutType} jenkins-${h.version}" data-version="${h.version}" data-model-type="${it.class.name}">

<j:if test="${layoutType!='full-screen'}">
<!-- 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>

Expand Down Expand Up @@ -235,6 +242,7 @@ ${h.initPageVariables(context)}
</l:breadcrumbBar>
</div>
</div>
</j:if>

<div id="page-body" class="clear">
<j:if test="${layoutType=='two-column'}">
Expand All @@ -260,6 +268,7 @@ ${h.initPageVariables(context)}
</div>
</div>

<j:if test="${layoutType!='full-screen'}">
<footer>
<div class="container-fluid">
<div class="row">
Expand All @@ -279,6 +288,7 @@ ${h.initPageVariables(context)}
</div>
</div>
</footer>
</j:if>

</body>
</html>
Expand Down
8 changes: 8 additions & 0 deletions war/src/main/webapp/css/layout-common.css
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,14 @@ body.two-column #main-panel {
margin-left: 320px;
}

body.full-screen {
padding: 0;
}

body.full-screen #main-panel {
padding: 0;
}

@media (max-width: 970px) {
body.two-column #side-panel {
width: 100%;
Expand Down