Skip to content

S
slapos.toolbox
Commit 06350aed authored by Alain Takoudjou's avatar Alain Takoudjou
Browse files
Options

Update Webrunner UI

parent 3938abf6
Hide whitespace changes
Inline Side-by-side
Showing with 142 additions and 140 deletions
slapos/runner/static/css/jqueryTabs.css
View file @ 06350aed
......@@ -4,6 +4,7 @@
position:relative;
width:757px;
font-size: 14px;
border-radius: 4px 4px 0 0;
}
#tabContaier textarea {
......@@ -11,7 +12,6 @@
}
#tabContaier > ul{
overflow:hidden;
border-right:1px solid #fff;
height:34px;
position:absolute;
z-index:100;
......@@ -21,10 +21,8 @@
list-style:none;
}
#tabContaier > ul > li a{
background:#ddd;
border:1px solid #fcfcfc;
border-right:0;
border-bottom: 0;
background:#e4e4e4;
border-left:1px solid #fcfcfc;
color:#666;
cursor:pointer;
display:block;
......@@ -42,12 +40,13 @@
#tabContaier > ul > li a.active{
background:#fbfbfb;
border:1px solid #fff;
border-right:0;
border-top:0;
border-right:0;
color:#333;
}
#tabContaier > ul > li:first-child a{border-left:0}
.tabDetails{
background:#fbfbfb;
border:1px solid #fff;
border-top: none;
margin:34px 0 0;
}
......
slapos/runner/static/css/styles.css
View file @ 06350aed
*{margin: 0px;padding: 0px;}
ol, ul {list-style: none outside none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: none;}
:focus {outline: 0 none;}
img{border:0}
a{
text-decoration: none;
......@@ -10,28 +15,26 @@ a:hover {
}
table {
margin: 0;
border: 1px solid #A8A8A8;
margin: 0;
border-right: none;
border-bottom: none;
font-size: 14px;
background: #fff;
}
td{
padding: 5px;
padding: 4px;
border: none;
border-bottom: 1px solid #A8A8A8;
border-right: 1px solid #A8A8A8;
}
td.propertie{padding-left:10px; color:blue;}
td.first{border-left: 1px solid #A8A8A8;}
th{
background: #e4e4e4;
padding: 5px;
border: none;
border-bottom: 1px solid #A8A8A8;
border-right: 1px solid #A8A8A8;
color: #4c6172;
background: #2281C1;
padding: 6px;
color: #fff;
font-weight: normal;
font-size: 16px;
font-size: 18px;
}
textarea {
......@@ -39,10 +42,10 @@ textarea {
}
body {
background: #7195c2 url('../images/cloud_bg.jpg') repeat-x;
font: 13px 'Helvetica Neue', Helvetica, Arial, sans-serif;
background: url("../images/1307251316-background-stripes.gif") repeat #9C9C9C;
font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
color: #000000;
font-size: normal;
font-size: 13px;
}
#page
......@@ -119,7 +122,7 @@ body {
}
.space{
margin-left: 18px;
margin-left: 28px;
}
.wmenu li{
......@@ -479,7 +482,7 @@ input[type="radio"], input[type="checkbox"]{
background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;
}
.gradient{border:1px solid #D4D4D4;background-color:#f4f4f4;background:-moz-linear-gradient(#f4f4f4,#ececec);background:-webkit-linear-gradient(#f4f4f4,#ececec);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#ececec')";background:linear-gradient(#f4f4f4,#ececec);}
.gradient{background-color:#f4f4f4;background:-moz-linear-gradient(#f4f4f4,#ececec);background:-webkit-linear-gradient(#f4f4f4,#ececec);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f4f4',endColorstr='#ececec')";background:linear-gradient(#f4f4f4,#ececec);}
h2.hight:hover{
cursor: pointer;
......@@ -572,23 +575,20 @@ select {
white-space: nowrap;}
a.lshare{
background: #fff url(../images/button_highlight.png) repeat-x;
background: #fff;
padding: 4px 7px 4px 7px;
height: 18px;
font-size: 15px;
border: solid 1px #678dad;
color: #666666;
margin-right: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
text-shadow: 0px 1px #F0F1F2;
color: #4DA0C6;
text-align:center;
font-weight:bold;
}
a.lshare:hover{
background:#D9D9D9 url(../images/button_highlight.png) 50% repeat-x;
background:#D9D9D9;
border:solid 1px #73A6FF;
text-shadow: 0px 1px #F0F1F2;
color: #666666;
}
a.lshare:focus{
border:solid 1px #73A6FF;
......@@ -645,22 +645,22 @@ a.lshare img{
.error_message{ background: url(../images/exit.png) center no-repeat; height: 26px;}
.confirm_message{ background: url(../images/confirm.png) center no-repeat; height: 26px;}
.info_message{ background: url(../images/info.png) center no-repeat; height: 26px;}
#error p{ fon-size: 13px; color: #4A131F;}
#error p{ font-size: 13px; color: #4A131F;}
#pClose{background:url(../images/close.png) no-repeat 0px 0px; display:block; width:22px; height:22px; cursor:pointer}
#pClose:hover{background:url(../images/close_hover.png) no-repeat 0px 0px;}
.md5sum {margin:10px; font-size:15px;}
.title{background: #e4e4e4; width: 100%; height: 25px; padding-top:2px; text-indent: 5px; color: #737373; text-shadow: 0px 1px #FFF;}
.clone-box-left{float:left; width: 120px; font-size:14px; background: #e4e4e4; padding:5px 0 5px 5px; margin-top:10px;
.menu-box-left{float:left; width: 120px; font-size:14px; background: #e4e4e4; padding:5px 0 5px 5px; margin-top:10px;
font-size:14px; border-radius: 4px 0 0 4px;}
.clone-box-right{background: #e4e4e4; padding: 5px; float:right; width: 634px; margin-left: -5px;
.menu-box-right{background: #e4e4e4; padding: 5px; float:right; width: 634px; margin-left: -5px;
margin-top:10px; box-shadow: 1px 1px 1px #888888;}
.clone-box-left ul{margin:0px; list-style:none}
.clone-box-left li{padding: 2px; padding-left:10px; padding-right:10px;}
.clone-box-left li:hover{background:#F0F2F2; border-radius: 4px 0 0 4px;}
.clone-box-left li.checked{background:#fff; border-radius: 4px 0 0 4px;}
.clone-box-right h2{text-align:center}
.menu-box-left ul{margin:0px; list-style:none;}
.menu-box-left li{padding: 2px; padding-left:10px; padding-right:10px; text-shadow: 0px 1px #fff;border-bottom:1px solid #fff;}
.menu-box-left li:hover{background:#F0F2F2;}
.menu-box-left li.checked{background:#fff;}
.menu-box-right h2{text-align:center}
/* Bubble pop-up */
.popup {position: absolute; display: none; z-index: 50;}
.popup {position: absolute; display: none; z-index: 150;}
.popup table, .popup td, .popup th{margin:0; padding:0; background:none; border:0; border-collapse:collapse;}
.popup td.corner {height: 15px;width: 19px;}
.popup td#topleft { background-image: url(../images/bubble-8.png); }
......@@ -677,4 +677,15 @@ a.lshare img{
.popup a:hover{color: #666666;}
.popup ul{margin:0; padding:0; list-style:none;}
.popup li{border-bottom: 1px dashed #666666; padding:5px; padding-top:5px;}
.popup-value{display:none;}
textarea.parameter {border: solid 1px #678dad; color: #666666; height:110px;}
input[type=radio] {
}
input[type=radio]:checked {
}
input[type=radio]:hover {
box-shadow: 0px 1px 3px #F0F1F2;
}
slapos/runner/static/js/jquery/jqueryToolTip.js
View file @ 06350aed
......@@ -6,15 +6,28 @@ $(function () {
var beingShown = false;
var shown = false;
$('.popup').css('opacity', 0);
$('a[rel=tooltip], .popup').mouseover(function () {
$('a[rel=tooltip], a[rel=tooltip-min], .popup').mouseover(function () {
var height = $(this).height();
var top = $(this).offset().top + height + 5;
var top = $(this).offset().top + height;
var left = $(this).offset().left - ($(this).width() /2);
var content = "#tooltip-" + $(this).attr('id');
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
return;
} else {
// reset position of info box
} else {
$('#jqtooltip').empty();
var contentValue = $(content).clone(true, true);
/*$(contentValue).find("*").each(function(index, element) {
if(element.id){element.id = "jqt_" + element.id;}
if($(this).attr('for')){$(this).attr('for', 'jqt_' + $(this).attr('for'))}
//var events = $(content).get[0];
//for (var type in events)
// for (var handler in events[type])
// jQuery.event.add(this, type, events[type][handler], events[type][handler].data);
});*/
$(contentValue).appendTo('#jqtooltip');
$('#jqtooltip ' + content).show();
// reset position of info box
beingShown = true;
$('.popup').css({
top: top,
......@@ -36,9 +49,9 @@ $(function () {
$('.popup').animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
shown = false;
}, time, 'swing', function () {
$('.popup').css('display', 'none');
shown = false;
});
}, hideDelay)
return false;
......
slapos/runner/static/js/scripts/common.js
View file @ 06350aed
......@@ -9,3 +9,22 @@ String.prototype.trim = function () {
}
/**************************/
$(document).ready(function() {
$('input[type="text"]').addClass("idleField");
$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
});
\ No newline at end of file
slapos/runner/static/js/scripts/editor.js
View file @ 06350aed
......@@ -7,7 +7,6 @@ $(document).ready( function() {
editor.getSession().setTabSize(2);
editor.getSession().setUseSoftTabs(true);
editor.renderer.setHScrollBarAlwaysVisible(false);
$("#editor").css("font-size", "14px");
var file = $("input#profile").val();
var workdir = $("input#workdir").val();
......
slapos/runner/static/js/scripts/softwareFolder.js
View file @ 06350aed
......@@ -7,7 +7,6 @@ $(document).ready( function() {
editor.getSession().setTabSize(2);
editor.getSession().setUseSoftTabs(true);
editor.renderer.setHScrollBarAlwaysVisible(false);
$("#editor").css("font-size", "14px");
var script = "/readFolder";
var softwareDisplay = true;
......
slapos/runner/templates/cloneRepository.html
View file @ 06350aed
......@@ -24,7 +24,7 @@
<br/><br/>
</div>
<h2>Set your Security Mode</h2>
<div class="clone-box-right">
<div class="menu-box-right">
<div style="background:#fff; padding:10px; min-height:100px; font-size:14px;">
<div id="box0">
<h2>Clone Repository without using HTTPS and SSH</h2><br/>
......@@ -51,11 +51,11 @@
</div>
</div>
</div>
<div class="clone-box-left">
<div class="menu-box-left">
<ul id="modelist">
<li class="checked"><input type="radio" name="security" id="nothing" value="nothing" /><label for="nothing">ReadOnly</label></li>
<li><input type="radio" name="security" id="ssh" value="SSH" checked /><label for="ssh">SSH Mode</label></li>
<li><input type="radio" name="security" id="https" value="HTTPS" /><label for="https">Https Mode</label></li>
<li style="border-bottom:none"><input type="radio" name="security" id="https" value="HTTPS" /><label for="https">Https Mode</label></li>
</ul>
</div>
<div class="clear"></div><br/>
......
slapos/runner/templates/layout.html
View file @ 06350aed
......@@ -6,7 +6,7 @@
{% block head %}
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Buildout runner</title>
<title>SlapOS Buildout web runner</title>
<meta name="keywords" content="" />
......@@ -24,29 +24,13 @@
<script src="{{ url_for('static', filename='js/scripts/common.js') }}" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$('input[type="text"]').addClass("idleField");
$('input[type="text"]').focus(function() {
$(this).removeClass("idleField").addClass("focusField");
if (this.value == this.defaultValue){
this.value = '';
}
if(this.value != this.defaultValue){
this.select();
}
});
$('input[type="text"]').blur(function() {
$(this).removeClass("focusField").addClass("idleField");
if ($.trim(this.value) == ''){
this.value = (this.defaultValue ? this.defaultValue : '');
}
});
if($("input#fmsg").val() != ""){
$("#error").Popup($("input#fmsg").val(), {type:'info', duration:5000, load:true});
}
bindRun();
if(!checkSavedCmd()){
getRunningState();
}
if($("input#fmsg").val() != ""){
$("#error").Popup($("input#fmsg").val(), {type:'info', duration:5000, load:true});
}
bindRun();
if(!checkSavedCmd()){
getRunningState();
}
});
</script>
{% endblock %}
......@@ -60,7 +44,7 @@
<!--</div>-->
<div id="header">
<div class="block_header">
<a href="{{ url_for('home') }}" style="float:left;" title="Home"><img alt="" src="{{ url_for('static', filename='images/home.png') }}" /></a>
<a href="{{ url_for('home') }}" style="float:left;" id="home" {% if request.path != '/' %}rel="tooltip"{% endif %} title="Home"><img alt="" src="{{ url_for('static', filename='images/home.png') }}" /></a>
<div class="line"></div>
<a href="{{ url_for('editCurrentProject') }}" style="float:left" title="Edit your current project"><img alt="" src="{{ url_for('static', filename='images/project.png') }}" /></a>
<div class="line"></div>
......@@ -75,15 +59,14 @@
<li><a href="{{ url_for('runSoftwareProfile') }}" id="softrun">Run</a></li>
<li><a href="{{ url_for('viewSoftwareLog') }}">Build log</a></li>
<li><a href="{{ url_for('inspectSoftware') }}">Inspect</a></li>
<li><a href="{{ url_for('removeSoftware') }}">Remove</a></li>
<li><a href="{{ url_for('removeSoftware') }}">Remove all</a></li>
<li class="space"><span class="title_instance">Instance</span></li>
<li><a href="{{ url_for('editInstanceProfile') }}">Edit</a></li>
<li><a href="{{ url_for('runInstanceProfile') }}" id="instrun">Run</a></li>
<li><a href="{{ url_for('viewInstanceLog') }}">Build log</a></li>
<li><a href="{{ url_for('inspectInstance') }}">Inspect</a></li>
<li><a href="{{ url_for('stopAllPartition') }}">Stop all</a></li>
<li><a href="{{ url_for('removeInstance') }}">Remove</a></li>
<li><a href="{{ url_for('removeInstance') }}">Remove all</a></li>
</ul>
</div>
<div class="clear"></div>
......@@ -107,5 +90,32 @@
SlapOs web runner &copy; Vifib SARL 2011 - All right reserved - Creative Commons Shared Alike Non Commercial
</div>
</div>
<div class="popup">
<table id="dpop" cellpadding="0" border="0">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"><img width="30" height="29" alt="" src="{{ url_for('static', filename='images/bubble-tail2.png') }}"/></td>
<td id="topright" class="corner"></td>
</tr><tr>
<td class="left"></td>
<td><div class="popup-contents" id="jqtooltip"></div></td>
<td class="right"></td>
</tr><tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom" valign="left"></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
<div id="tooltip-home" style="display:none">
<span style="font-weight:bold">QUICK ACCESS TO MENU</span><br/><br/>
<div style="margin-top:3px;border-bottom: 1px dashed #666666; heigth:1px"></div>
<ul>
<li><a href="{{ url_for('manageProject')}}">Manage Repositories</a></li>
<li><a href="{{ url_for('configRepo')}}" >Clone your Repository</a></li>
<li><a href="{{ url_for('openProject', method='open')}}">Open Software Release</a></li>
<li><a href="{{ url_for('openProject', method='new')}}">Create Software Release</a></li>
</ul>
</div>
</body>
</html>
slapos/runner/templates/softwareFolder.html
View file @ 06350aed
......@@ -50,35 +50,19 @@
</div>
</form>
<div class="popup">
<table id="dpop" cellpadding="0" border="0">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"><img width="30" height="29" alt="" src="{{ url_for('static', filename='images/bubble-tail2.png') }}"/></td>
<td id="topright" class="corner"></td>
</tr><tr>
<td class="left"></td>
<td><div class="popup-contents">
<span class="list">MD5 SUM for the current file</span>
<div id="tooltip-option" style="display:none">
<span class="list">MD5 SUM for the current file</span>
<div style="margin-top:3px; margin-bottom:5px;border-bottom: 1px dashed #666666; heigth:1px"></div>
<a id='getmd5' href="#">Get or Update md5sum</a>
<br/><span class="list">Add Project to Develop</span><br/>
<div style="margin-top:3px;border-bottom: 1px dashed #666666; heigth:1px"></div>
<ul id="plist">
{% for name in projectList%}
<li><input type="checkbox" name="develop" value="{{name}}" id="{{name}}">
<label for="{{name}}">{{name}}</label></li>
<li><input type="checkbox" name="develop" value="{{name}}" id="{{name}}">
<label>{{name}}</label></li>
{% endfor %}
</ul>
<br/>
<a href="#" id="adddevelop" class="lshare">Add to profile</a>
</div></td>
<td class="right"></td>
</tr><tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom" valign="left"></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
{% endblock %}
slapos/runner/templates/updateInstanceProfile.html
View file @ 06350aed
......@@ -10,7 +10,7 @@
{% block body %}
<form method=post class=add-entry>
<dl>
<dd><h2>Edit instance profile <a href='#' rel="tooltip" title='Show more option'>[More]</a>:</h2></dd>
<dd><h2>Edit instance profile <a href='#' id="editOption" rel="tooltip" title='Show more option'>[More]</a>:</h2></dd>
<dd><div class='md5sum' id='md5sum'></div></dd>
<dd>
<div class="main_content">
......@@ -22,36 +22,20 @@
<dd><input type=submit value=Save id="save" class="button"></dd>
</dl>
</form>
<div class="popup">
<table id="dpop" cellpadding="0" border="0">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"><img width="30" height="29" alt="" src="{{ url_for('static', filename='images/bubble-tail2.png') }}"/></td>
<td id="topright" class="corner"></td>
</tr><tr>
<td class="left"></td>
<td><div class="popup-contents">
<span class="list">MD5 SUM for the current file</span>
<div id="tooltip-editOption" style="display:none">
<span class="list">MD5 SUM for the current file</span>
<div style="margin-top:3px; margin-bottom:5px;border-bottom: 1px dashed #666666; heigth:1px"></div>
<a id='getmd5' href="#">Get or Update md5sum</a>
<br/><span class="list">Add Project to Develop</span><br/>
<div style="margin-top:3px;border-bottom: 1px dashed #666666; heigth:1px"></div>
<ul id="plist">
{% for name in projectList%}
<li><input type="checkbox" name="develop" value="{{name}}" id="{{name}}">
<label for="{{name}}">{{name}}</label></li>
<li><input type="checkbox" name="develop" value="{{name}}" id="{{name}}">
<label>{{name}}</label></li>
{% endfor %}
</ul>
<br/>
<a href="#" id="adddevelop" class="lshare">Add to profile</a>
</div></td>
<td class="right"></td>
</tr><tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom" valign="left"></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
{% endblock %}
slapos/runner/templates/updateSoftwareProfile.html
View file @ 06350aed
......@@ -10,7 +10,7 @@
{% block body %}
<form method=post class=add-entry>
<dl>
<dd><h2>Edit software profile <a href='#' rel="tooltip" title='Show more option'>[More]</a>:</h2></dd>
<dd><h2>Edit software profile <a href='#' id="editOption" rel="tooltip" title='Show more option'>[More]</a>:</h2></dd>
<dd><div class='md5sum' id='md5sum'></div></dd>
<dd>
<div class="main_content">
......@@ -22,36 +22,20 @@
<dd><input type=submit value=Save id="save" class="button"></dd>
</dl>
</form>
<div class="popup">
<table id="dpop" cellpadding="0" border="0">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"><img width="30" height="29" alt="" src="{{ url_for('static', filename='images/bubble-tail2.png') }}"/></td>
<td id="topright" class="corner"></td>
</tr><tr>
<td class="left"></td>
<td><div class="popup-contents">
<span class="list">MD5 SUM for the current file</span>
<div id="tooltip-editOption" style="display:none">
<span class="list">MD5 SUM for the current file</span>
<div style="margin-top:3px; margin-bottom:5px;border-bottom: 1px dashed #666666; heigth:1px"></div>
<a id='getmd5' href="#">Get or Update md5sum</a>
<br/><span class="list">Add Project to Develop</span><br/>
<div style="margin-top:3px;border-bottom: 1px dashed #666666; heigth:1px"></div>
<ul id="plist">
{% for name in projectList%}
<li><input type="checkbox" name="develop" value="{{name}}" id="{{name}}">
<label for="{{name}}">{{name}}</label></li>
<li><input type="checkbox" name="develop" value="{{name}}" id="{{name}}">
<label>{{name}}</label></li>
{% endfor %}
</ul>
<br/>
<a href="#" id="adddevelop" class="lshare">Add to profile</a>
</div></td>
<td class="right"></td>
</tr><tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom" valign="left"></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
{% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7