lsm/initializr
1
0
Fork 0
mirror of https://gitee.com/dcren/initializr.git synced 2025-11-09 19:05:01 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Reorganize UI

Browse Source 
* move back project type and Boot version in form
* support for dependencies weight, group and keywords information
* hide non-essential info by default and show them when clicking on link
* add green top border in header
* add link to bring back simple version

See gh-145
This commit is contained in:
Brian Clozel
2015-10-01 13:37:05 +02:00
committed by Stephane Nicoll
parent ac970139e8
commit cdec30a664
3 changed files with 106 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
initializr/src/main/resources/static/css/spring.css
View File

@@ -6,23 +6,34 @@ body, h1, h2, h3 {
.start-header { .start-header {
color: #eee; color: #eee;
background-color: #34302d; background-color: #34302d;
height: auto;
padding: 0.8em 0;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
font-size: 25px; font-size: 25px;
text-align: center; padding: 0.5em 0;
border-top: 4px solid #6db33f;
} }
.start-header select { .start-header h1 {
font-size: 18px; text-transform: uppercase;
} }
.start-header .help-block { .start-header small {
font-size: 0.6em; text-transform: none;
font-size: 50%;
}
.project-choice {
margin: 1em 0;
}
.project-choice select {
font-size: 22px;
}
#starters {
min-height: 3em;
}
button.btn-primary {
margin-top: 1em;
} }
button kbd { button kbd {
@@ -31,32 +42,6 @@ button kbd {
box-shadow: none; box-shadow: none;
} }
.start-header button {
margin-top: 1em;
}
@media (min-width: 992px) {
.start-header button {
margin-top: 0;
}
}
.start-main {
margin-top: 270px;
}
@media (min-width: 768px) {
.start-main {
margin-top: 160px;
}
}
@media (min-width: 992px) {
.start-main {
margin-top: 110px;
}
}
input[type=text] { input[type=text] {
font-family: monospace; font-family: monospace;
background-color: #fafafa; background-color: #fafafa;
@@ -77,6 +62,10 @@ input[type=text] {
margin-left: 0.2em; margin-left: 0.2em;
} }
.advanced {
margin: 1em 0;
}
/* autocomplete */ /* autocomplete */
#autocomplete, .twitter-typeahead, .tt-hint { #autocomplete, .twitter-typeahead, .tt-hint {

23
initializr/src/main/resources/static/js/start.js
View File

@@ -94,6 +94,11 @@ $(function () {
var initializeSearchEngine = function (engine, bootVersion) { var initializeSearchEngine = function (engine, bootVersion) {
$.getJSON("/ui/dependencies.json?version=" + bootVersion, function (data) { $.getJSON("/ui/dependencies.json?version=" + bootVersion, function (data) {
engine.clear(); engine.clear();
$.each(data.dependencies, function(idx, item) {
if(item.weight === undefined) {
item.weight = 0;
}
});
engine.add(data.dependencies); engine.add(data.dependencies);
}); });
}; };
@@ -108,14 +113,28 @@ $(function () {
refreshDependencies(this.value); refreshDependencies(this.value);
initializeSearchEngine(starters, this.value); initializeSearchEngine(starters, this.value);
}); });
$(".tofullversion a").on("click", function() {
$(".full").removeClass("hidden");
$(".tofullversion").addClass("hidden");
$(".tosimpleversion").removeClass("hidden");
$("body").scrollTop(0);
return false;
});
$(".tosimpleversion a").on("click", function() {
$(".full").addClass("hidden");
$(".tofullversion").removeClass("hidden");
$(".tosimpleversion").addClass("hidden");
$("body").scrollTop(0);
return false;
});
var starters = new Bloodhound({ var starters = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name', 'description'), datumTokenizer: Bloodhound.tokenizers.obj.nonword('name', 'description', 'keywords', 'group'),
queryTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function (obj) { identify: function (obj) {
return obj.id; return obj.id;
}, },
sorter: function(a,b) { sorter: function(a,b) {
return 0; return b.weight - a.weight;
}, },
cache: false cache: false
}); });

89
initializr/src/main/resources/templates/home.html
View File

@@ -12,10 +12,15 @@
<body> <body>
<form id="form" action="/starter.zip" method="get" role="form"> <form id="form" action="/starter.zip" method="get" role="form">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row start-header">
<div class="start-header"> <div class="container">
<div class="row baseline form-inline"> <h1>Spring Initializr <small>bootstrap your application now</small></h1>
<div class="form-group col-md-9">Generate a </div>
</div>
<div class="container start-main">
<div class="row form-inline text-center">
<div class="form-group project-choice">
<h2>Generate a
<select tabindex="1" class="form-control" id="type" name="type"> <select tabindex="1" class="form-control" id="type" name="type">
<% types.content.each { %> <% types.content.each { %>
<option data-action="${it.action}" value="${it.id}" ${it.default==true ? <option data-action="${it.action}" value="${it.id}" ${it.default==true ?
@@ -29,51 +34,46 @@
' selected' : ''}>${it.name}</option> ' selected' : ''}>${it.name}</option>
<% } %> <% } %>
</select> </select>
</div> </h2>
<div class="col-md-3">
<button tabindex="12" name="generate-project" type="submit" class="btn btn-lg btn-primary" role="button">
Generate Project
</button>
</div> </div>
</div> </div>
</div>
</div>
<div class="container start-main">
<input id="baseDir" name="baseDir" type="hidden" value="${artifactId.content}"> <input id="baseDir" name="baseDir" type="hidden" value="${artifactId.content}">
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6">
<h2>Project Metadata</h2> <h2>Project Metadata</h2>
<p>Artifact coordinates and packaging</p> <p>Artifact coordinates</p>
<div class="col-sm-12 col-md-6">
<div class="form-group"> <div class="form-group">
<label for="groupId" class="control-label">${groupId.title}</label> <label for="groupId" class="control-label">${groupId.title}</label>
<input tabindex="3" id="groupId" class="form-control" type="text" value="${groupId.content}" name="groupId"> <input tabindex="3" id="groupId" class="form-control" type="text" value="${groupId.content}"
name="groupId">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="artifactId" class="control-label">${artifactId.title}</label> <label for="artifactId" class="control-label">${artifactId.title}</label>
<input tabindex="4" id="artifactId" class="form-control" type="text" value="${artifactId.content}" <input tabindex="4" id="artifactId" class="form-control" type="text"
value="${artifactId.content}"
name="artifactId"> name="artifactId">
</div> </div>
<div class="form-group"> <div class="form-group full hidden">
<label for="name" class="control-label">${name.title}</label> <label for="name" class="control-label">${name.title}</label>
<input tabindex="5" id="name" class="form-control" type="text" value="${name.content}" name="name"> <input tabindex="5" id="name" class="form-control" type="text" value="${name.content}"
name="name">
</div> </div>
<div class="form-group"> <div class="form-group full hidden">
<label for="description" class="control-label">${description.title}</label> <label for="description" class="control-label">${description.title}</label>
<input tabindex="6" id="description" class="form-control" type="text" <input tabindex="6" id="description" class="form-control" type="text"
value="${description.content}" name="description"> value="${description.content}" name="description">
</div> </div>
</div> <div class="form-group full hidden">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="packageName" class="control-label">${packageName.title}</label> <label for="packageName" class="control-label">${packageName.title}</label>
<input tabindex="7" id="packageName" class="form-control" type="text" value="${packageName.content}" <input tabindex="7" id="packageName" class="form-control" type="text"
value="${packageName.content}"
name="packageName"> name="packageName">
</div> </div>
<div class="form-group"> <div class="form-group full hidden">
<label for="packaging" class="control-label">${packagings.title}</label> <label for="packaging" class="control-label">${packagings.title}</label>
<select tabindex="8" class="form-control" id="packaging" name="packaging"> <select tabindex="8" class="form-control" id="packaging" name="packaging">
<% packagings.content.each { %> <% packagings.content.each { %>
@@ -82,15 +82,16 @@
<% } %> <% } %>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group full hidden">
<label for="javaVersion" class="control-label">${javaVersions.title}</label> <label for="javaVersion" class="control-label">${javaVersions.title}</label>
<select tabindex="9" class="form-control" name="javaVersion" id="javaVersion"> <select tabindex="9" class="form-control" name="javaVersion" id="javaVersion">
<% javaVersions.content.each { %> <% javaVersions.content.each { %>
<option value="${it.id}" ${it.default==true ? ' selected' : ''}>${it.name}</option> <option value="${it.id}" ${it.default==true ?
' selected' : ''}>${it.name}</option>
<% } %> <% } %>
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group full hidden">
<label for="language" class="control-label">${languages.title}</label> <label for="language" class="control-label">${languages.title}</label>
<select tabindex="10" class="form-control" name="language" id="language"> <select tabindex="10" class="form-control" name="language" id="language">
<% languages.content.each { %> <% languages.content.each { %>
@@ -100,25 +101,40 @@
</select> </select>
</div> </div>
</div> </div>
</div> <div class="col-sm-12 col-md-6">
<div class="row">
<h2>Dependencies</h2> <h2>Dependencies</h2>
<p>Add Spring Boot Starters and dependencies to your application</p> <p>Add Spring Boot Starters and dependencies to your application</p>
<div class="form-group col-md-6 col-sm-12">
<div class="form-group"> <div class="form-group">
<input tabindex="11" id="autocomplete" class="form-control" type="text" placeholder="Search for Starters" <label for="autocomplete" class="control-label">Search for dependencies</label>
<input tabindex="11" id="autocomplete" class="form-control" type="text"
placeholder="Web, Security, JPA, Actuator, Devtools..."
name="autocomplete"> name="autocomplete">
</div> </div>
</div> <div class="form-group">
<div class="form-group col-md-6 col-sm-12"> <label for="starters" class="control-label">Selected Starters</label>
<div id="starters"> <div id="starters">
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row hidden tosimpleversion">
<p>Too many options? <a href="#">Switch back to the simple version.</a></p>
</div>
<div class="row"> <div class="row">
<div id="dependencies"> <p class="text-center">
<button tabindex="12" name="generate-project" type="submit" class="btn btn-lg btn-primary"
role="button">
Generate Project
</button>
</p>
</div>
<div class="row tofullversion">
<p>Don't know what to look for? Want more options? <a href="#">Switch to the full version.</a></p>
</div>
<div class="row">
<div id="dependencies" class="full hidden">
<% dependencies.content.each { %> <% dependencies.content.each { %>
<div class="form-group col-sm-6"> <div class="form-group col-sm-6">
<h3>${it.name}</h3> <h3>${it.name}</h3>
@@ -135,9 +151,10 @@
<% } %> <% } %>
</div> </div>
</div> </div>
<div class="row"> <div class="row full hidden">
<p class="text-center"> <p class="text-center">
<button tabindex="14" name="generate-project" type="submit" class="btn btn-lg btn-primary" role="button"> <button tabindex="14" name="generate-project" type="submit" class="btn btn-lg btn-primary"
role="button">
Generate Project Generate Project
</button> </button>
</p> </p>