Skip to content

S
slapos.toolbox
Commit 5a973856 authored by Nicolas Wavrant's avatar Nicolas Wavrant
Browse files
Options

Update features in styles and scripts 

Conflicts:
	slapos/runner/static/css/styles.css
parent 81f046c3
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 158 additions and 137 deletions
slapos/runner/static/css/jqueryTabs.css
View file @ 5a973856
#tabContaier{ #tabContainer{
background: #e4e4e4; background: #D5D5D5;
padding:3px; padding:3px;
/*position:relative;*/ /*position:relative;*/
width:930px; width:930px;
font-size: 14px; font-size: 14px;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
#tabContaier textarea { #tabContainer textarea {
width:702px; width:702px;
} }
#tabContaier textarea.slap{white-space: pre-wrap;word-wrap: break-word;overflow: hidden;color: #6F6F6F;width:616px; max-height:120px; #tabContainer textarea.slap{white-space: pre-wrap;word-wrap: break-word;overflow: hidden;color: #6F6F6F;width:616px; max-height:120px;
resize: none; height:18px;padding:3px;min-height:18px;font-size: 13px;} resize: none; height:18px;padding:3px;min-height:18px;font-size: 13px;}
#tabContaier textarea.mb_style{width:713px;} #tabContainer textarea.mb_style{width:713px;}
#tabContaier > ul{ #tabContainer > ul{
overflow:hidden; overflow:hidden;
height:34px; height:34px;
position:absolute; position:absolute;
z-index:80; z-index:80;
} margin: 0;
#tabContaier > ul > li{ }
float:left; #tabContainer > ul > li{
list-style:none; float:left;
} list-style:none;
#tabContaier > ul > li a{ font-family: Arial;
background:#e4e4e4; }
border-left:1px solid #fcfcfc; #tabContainer > ul > li a{
color:#666; background:#D5D5D5;
cursor:pointer; border-left:1px solid #fcfcfc;
display:block; color:#666;
height:34px; cursor:pointer;
line-height:34px; display:block;
padding:0 30px; height:34px;
text-decoration:none; line-height:34px;
color: #737373; padding:0 30px;
text-shadow: 0px 1px #FFF; text-decoration:none;
font-size: 17px; color: #737373;
} text-shadow: 0px 1px #ECECEC;
#tabContaier > ul > li a:hover{ font-size: 17px;
background:#eee; }
} #tabContainer > ul > li a:hover{
#tabContaier > ul > li a.active{ background:#E2E2E2;
background:#fbfbfb; }
border:1px solid #fff; #tabContainer > ul > li a.active{
background:#fbfbfb;
border:1px solid #fff;
border-top:0; border-top:0;
border-right:0; border-right:0;
color:#333; color:#333;
} }
#tabContaier > ul > li:first-child a{border-left:0} #tabContainer > ul > li:first-child a{border-left:0}
.tabDetails{ .tabDetails{
background:#fbfbfb; background:#fbfbfb;
border-top: none; border-top: none;
margin:34px 0 0; margin:34px 0 0;
} }
.tabContents{ .tabContents{
padding:20px; padding:20px;
min-height: 250px; min-height: 250px;
} }
.tabContents p{ .tabContents p{
padding:0 0 10px; padding:0 0 10px;
} }
slapos/runner/static/css/styles.css
View file @ 5a973856
...@@ -181,6 +181,7 @@ body { ...@@ -181,6 +181,7 @@ body {
color: #4c6172; color: #4c6172;
font-weight: normal; font-weight: normal;
font-size: 1.4em; font-size: 1.4em;
line-height: 25px;
} }
.content h2 a{ .content h2 a{
text-decoration:none; text-decoration:none;
...@@ -436,24 +437,6 @@ padding: 10px;height: 80px;padding-bottom:15px;} ...@@ -436,24 +437,6 @@ padding: 10px;height: 80px;padding-bottom:15px;}
margin: 5px; margin: 5px;
} }
#contentInfo h2, .hight{
background: #e4e4e4;
width: 100%;
height: 25px;
padding-top:2px;
text-indent: 5px;
color: #737373;
text-shadow: 0px 1px #FFF;
}
.show{
background: #e4e4e4 url(../images/arrow_up.png) 97% 50% no-repeat;
}
.hide{
background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;
}
.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);} .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{ h2.hight:hover{
...@@ -672,13 +655,13 @@ a.lshare img{ ...@@ -672,13 +655,13 @@ a.lshare img{
} }
.box_header li{float: left;border: 1px solid #AAB8C2;padding: 1px 5px 1px 0;margin-left: 5px;} .box_header li{float: left;border: 1px solid #AAB8C2;padding: 1px 5px 1px 0;margin-left: 5px;}
.box_header li:last-child{border:none} .box_header li:last-child{border:none}
.box_header li h2{padding-top: 2px;}
.box_header li > span{cursor: pointer; height: 22px; display: block;line-height: 22px;font-weight: bold;padding: 1px;} .box_header li > span{cursor: pointer; height: 22px; display: block;line-height: 22px;font-weight: bold;padding: 1px;}
.box_header li:hover{border: 1px solid #57A1D6;background: #C7C7C7;} .box_header li:hover{border: 1px solid #57A1D6;background: #C7C7C7;}
.box_header li:last-child:hover{background:none; border: none} .box_header li:last-child:hover{background:none; border: none}
.box_header li>a{font-weight: bold; font-size:15px;display: block;padding: 2px;} .box_header li>a{font-weight: bold; font-size:15px;display: block;padding: 2px;}
.save_btn{background: url(../images/icon_save.png) center right no-repeat;width: 60px;} .save_btn{background: url(../images/icon_save.png) center right no-repeat;width: 60px;}
.swith_btn{background: url(../images/gnome-session-switch.png) center right no-repeat;width: 105px;} .swith_btn{background: url(../images/gnome-session-switch.png) center right no-repeat;width: 105px;}
.flist_btn{background: url(../images/list2_down.png) center right no-repeat;width: 26px;}
#error{ #error{
padding: 0px; padding: 0px;
...@@ -703,6 +686,8 @@ a.lshare img{ ...@@ -703,6 +686,8 @@ a.lshare img{
z-index: 170; z-index: 170;
clear: both; clear: both;
} }
#error div.alert{background: lightYellow; border: 1px solid #E6DB55;}
#error div.confirm, #error div.info{background: none repeat scroll 0 0 #CBECF7; border: 1px solid #2599A3;}
#error table{ #error table{
background: none; background: none;
...@@ -726,7 +711,7 @@ a.lshare img{ ...@@ -726,7 +711,7 @@ a.lshare img{
width: 30px; width: 30px;
height:22px; height:22px;
} }
#error p{white-space: pre-wrap; word-wrap: break-word; width: 95%; padding-bottom: 5px;} #error p{white-space: pre-wrap; word-wrap: break-word;padding: 0 5px; line-height: 18px; color: #67767C;max-width: 430px;}
.noscroll { .noscroll {
overflow: hidden; overflow: hidden;
} }
...@@ -739,16 +724,17 @@ a.lshare img{ ...@@ -739,16 +724,17 @@ a.lshare img{
div.sep{display:block; height:7px;} div.sep{display:block; height:7px;}
.slidebox{padding:10px; } .slidebox{padding:10px; }
.alert_message{ background: url(../images/alert.png) center no-repeat; height: 26px;}
.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{ font-size: 13px; color: #4A131F;}
.pClose, .close{background:url(../images/close.png) no-repeat 0px 0px; display:block; width:22px; height:22px; cursor:pointer} .pClose, .close{background:url(../images/close.png) no-repeat 0px 0px; display:block; width:22px; height:22px; cursor:pointer}
.pClose:hover, .close:hover{background:url(../images/close_hover.png) no-repeat 0px 0px;} .pClose:hover, .close:hover{background:url(../images/close_hover.png) no-repeat 0px 0px;}
.md5sum {margin:10px; font-size:15px;} .md5sum {margin:10px; font-size:15px;}
.title{background: #e4e4e4; width: 100%; height: 26px; padding-top:2px; text-indent: 5px; color: #737373; text-shadow: 0px 1px #FFF;}
#contentInfo h2, .hight, .title{background: #D5D5D5; width: 100%; height: 26px; padding-top:2px; text-indent: 5px; color: #737373;
text-shadow: 0px 1px #ECECEC;}
.hight, .title{border-bottom: 3px solid #6DB9DD;}
.show{background: #e4e4e4 url(../images/arrow_up.png) 97% 50% no-repeat;}
.hide{background: #e4e4e4 url(../images/arrow_down.png) 97% 50% no-repeat;}
.menu-box-left{float:left; width: 135px; font-size:14px; background: #e4e4e4; padding:5px 0 5px 5px; margin-top:10px; .menu-box-left{float:left; width: 135px; font-size:14px; background: #e4e4e4; padding:5px 0 5px 5px; margin-top:10px;
font-size:14px; border-radius: 4px 0 0 4px;} font-size:14px; border-radius: 4px 0 0 4px;}
.menu-box-right{background: #e4e4e4; padding: 5px; float:right; width: 745px; margin-left: -5px; .menu-box-right{background: #e4e4e4; padding: 5px; float:right; width: 745px; margin-left: -5px;
...@@ -776,11 +762,11 @@ div.sep{display:block; height:7px;} ...@@ -776,11 +762,11 @@ div.sep{display:block; height:7px;}
.popup a{display: block; font-weight:bold; color: #4DA0C6; padding-left: 5px; padding-bottom: 5px;} .popup a{display: block; font-weight:bold; color: #4DA0C6; padding-left: 5px; padding-bottom: 5px;}
.popup a:hover{color: #666666;} .popup a:hover{color: #666666;}
.popup ul{margin:0; margin-bottom:10px; padding:0; list-style:none;} .popup ul{margin:0; margin-bottom:10px; padding:0; list-style:none;}
.popup li{border-bottom: 1px dashed #666666; padding:0;} .popup li{border-bottom: 1px solid #E4E4E4; padding:3px 0; margin: 0 5px;}
.popup ul li:last-child{border-bottom:none}
.popup ul li a{padding-bottom:0} .popup ul li a{padding-bottom:0}
ul.menu li {padding-top:5px; padding-bottom:5px;} ul.menu li {padding-top:5px; padding-bottom:5px;}
ul.menu{margin-bottom:0;} ul.menu{margin-bottom:0;}
.inline a, .inline{display: inline;}
.popup-value{display:none;} .popup-value{display:none;}
textarea.parameter {border: solid 1px #678dad; color: #666666; height:110px;} textarea.parameter {border: solid 1px #678dad; color: #666666; height:110px;}
.link{color:#fff; font-weight:bold; text-decoration:none} .link{color:#fff; font-weight:bold; text-decoration:none}
...@@ -805,5 +791,22 @@ padding:10px; font-size:14px; color:#03406A} ...@@ -805,5 +791,22 @@ padding:10px; font-size:14px; color:#03406A}
.login-input{width:220px;} .login-input{width:220px;}
.information{display:block; float:left; height:16px; margin-top:10px; margin-left:10px; font-weight:bold} .information{display:block; float:left; height:16px; margin-top:10px; margin-left:10px; font-weight:bold}
.account{margin-left:60px;} .account{margin-left:60px;}
.bt_close {
text-decoration: none;
color: #999;
font-weight: bold;
font-size: 16px;
padding: 0 4px;
-webkit-border-radius: .2em;
-moz-border-radius: .2em;
border-radius: .2em;
cursor: pointer;
}
.bt_close:hover {
background: #D6D6D6;
color: #333;
}
/* ********************/ /* ********************/
#shellinabox{width:100%; min-height:530px;} #shellinabox{width:100%; min-height:530px;}
slapos/runner/static/css/ui.fancytree.css
View file @ 5a973856
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
margin: 0; /* issue 201 */ margin: 0; /* issue 201 */
background-color: white; background-color: white;
overflow: auto; overflow: auto;
height: 98%; /* issue 263 */ /*height: 98%; /* issue 263 */
} }
ul.fancytree-container ul ul.fancytree-container ul
......
slapos/runner/static/js/jquery/jqueryTabs.js
View file @ 5a973856
...@@ -4,7 +4,7 @@ $(document).ready(function(){ ...@@ -4,7 +4,7 @@ $(document).ready(function(){
var fromheight = 0; var fromheight = 0;
var previoustab = null; var previoustab = null;
if (hashes.length == 2 && hashes[1] !== ''){ if (hashes.length == 2 && hashes[1] !== ''){
$("#tabContaier>ul li").each(function() { $("#tabContainer>ul li").each(function() {
var $tab = $(this).find("a"); var $tab = $(this).find("a");
if($tab.hasClass("active")){ if($tab.hasClass("active")){
$tab.removeClass("active"); $tab.removeClass("active");
...@@ -18,26 +18,26 @@ $(document).ready(function(){ ...@@ -18,26 +18,26 @@ $(document).ready(function(){
}); });
} }
else{$(".tabContents:first").show(); previoustab = ".tabContents:first";} // Show the first div of tab content by default else{$(".tabContents:first").show(); previoustab = ".tabContents:first";} // Show the first div of tab content by default
$("#tabContaier ul li a").click(function(){ //Fire the click event $("#tabContainer ul li a").click(function(){ //Fire the click event
if($(this).hasClass('active')){ if($(this).hasClass('active')){
return false; return false;
} }
fromheight = $(previoustab).height(); fromheight = $(previoustab).height();
var activeTab = $(this).attr("href"); // Catch the click link var activeTab = $(this).attr("href"); // Catch the click link
$("#tabContaier .tabDetails").css("height", $("#tabContaier .tabDetails").height()); $("#tabContainer .tabDetails").css("height", $("#tabContainer .tabDetails").height());
$("#tabContaier ul li a").removeClass("active"); // Remove pre-highlighted link $("#tabContainer ul li a").removeClass("active"); // Remove pre-highlighted link
$(this).addClass("active"); // set clicked link to highlight state $(this).addClass("active"); // set clicked link to highlight state
$(".tabContents").hide(); // hide currently visible tab content div $(".tabContents").hide(); // hide currently visible tab content div
$(activeTab).fadeIn(); // show the target tab content div by matching clicked link. $(activeTab).fadeIn(); // show the target tab content div by matching clicked link.
var diff = fromheight - $(activeTab).height(); var diff = fromheight - $(activeTab).height();
if (diff > 0){$("#tabContaier .tabDetails").animate({height: '-=' + diff + 'px'}, 850, 'swing', function() { if (diff > 0){$("#tabContainer .tabDetails").animate({height: '-=' + diff + 'px'}, 850, 'swing', function() {
$("#tabContaier .tabDetails").css("height", ""); $("#tabContainer .tabDetails").css("height", "");
});} });}
else{diff = -1*diff; $("#tabContaier .tabDetails").animate({height: '+=' + diff + 'px'}, 850, 'swing', function() { else{diff = -1*diff; $("#tabContainer .tabDetails").animate({height: '+=' + diff + 'px'}, 850, 'swing', function() {
$("#tabContaier .tabDetails").css("height", ""); $("#tabContainer .tabDetails").css("height", "");
});} });}
previoustab = activeTab; previoustab = activeTab;
$("#tabContaier .tabDetails").css("height", $("#tabContaier .tabDetails").height()); $("#tabContainer .tabDetails").css("height", $("#tabContainer .tabDetails").height());
return false;//this reinitialize tab index when reload page return false;//this reinitialize tab index when reload page
}); });
}); });
\ No newline at end of file
slapos/runner/static/js/jquery/jqueryToolTip.js
View file @ 5a973856
...@@ -5,47 +5,63 @@ $(function () { ...@@ -5,47 +5,63 @@ $(function () {
var hideDelayTimer = null; var hideDelayTimer = null;
var beingShown = false; var beingShown = false;
var shown = false; var shown = false;
var canShow = false;
$('.popup').css('opacity', 0); $('.popup').css('opacity', 0);
$('a[rel=tooltip], a[rel=tooltip-min], .popup').mouseover(function () { $('a[rel=tooltip], span[rel=tooltip]').click(function(){
var height = $(this).height(); if (!canShow){
var top = $(this).offset().top + height; canShow = true;
var left = $(this).offset().left +($(this).width()/2)-30; $(this).mouseover();
var content = "#tooltip-" + $(this).attr('id'); }
if (hideDelayTimer) clearTimeout(hideDelayTimer); else{
if (beingShown || shown) { $(this).mouseout();
return; }
} else { return false;
$('#jqtooltip').empty(); });
var contentValue = $(content).clone(true, true); $('a[rel=tooltip], span[rel=tooltip], .popup').mouseover(function () {
$(contentValue).appendTo('#jqtooltip'); if (!canShow){
$('#jqtooltip ' + content).show();
// reset position of info box
beingShown = true;
$('.popup').css({
top: top,
left: left,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
}).mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
$('.popup').animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
$('.popup').css('display', 'none');
shown = false;
});
}, hideDelay);
return false; return false;
}
var height = $(this).height();
var top = $(this).offset().top + height;
var left = $(this).offset().left +($(this).width()/2)-30;
var content = "#tooltip-" + $(this).attr('id');
if (hideDelayTimer) clearTimeout(hideDelayTimer);
if (beingShown || shown) {
return;
} else {
$('#jqtooltip').empty();
var contentValue = $(content).clone(true, true);
$(contentValue).appendTo('#jqtooltip');
$('#jqtooltip ' + content).show();
// reset position of info box
beingShown = true;
$('.popup').css({
top: top,
left: left,
display: 'block'
}).animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
beingShown = false;
shown = true;
});
}
return false;
});
$('a[rel=tooltip], span[rel=tooltip], .popup').mouseout(function () {
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
$('.popup').animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
$('.popup').css('display', 'none');
shown = false;
canShow = false;
});
}, hideDelay);
return false;
}); });
}); });
\ No newline at end of file
slapos/runner/static/js/jquery/popupBox.js
View file @ 5a973856
...@@ -31,10 +31,9 @@ ...@@ -31,10 +31,9 @@
} }
$box.show(); $box.show();
$box.css('top', + ($(window).scrollTop()) +'px'); $box.css('top', + ($(window).scrollTop()) +'px');
$box.append('<div id="' + currentBox + '" style="display:none"><table><tr>' + $box.append('<div id="' + currentBox + '" style="display:none" class="'+option.type+'"><table><tr>' +
'<td valign="middle" class="logo ' + option.type + '_message"></td>' +
'<td valign="middle"><p>' + msg + '</p></td>' + '<td valign="middle"><p>' + msg + '</p></td>' +
'<td valign="middle" class="b_close"><span id="pClose'+boxCount+'" class="pClose"></span></td></tr></table></div>'); '<td valign="top" class="b_close"><span id="pClose'+boxCount+'" class="pClose"></span></td></tr></table></div>');
$("#pClose"+boxCount).bind("click", function() { $("#pClose"+boxCount).bind("click", function() {
close($("#"+currentBox)); close($("#"+currentBox));
...@@ -58,8 +57,9 @@ ...@@ -58,8 +57,9 @@
} }
function close($elt){ function close($elt){
$elt.unbind('click'); $elt.unbind('click');
$elt.fadeOut(); $elt.fadeOut("slow", function() {
$elt.remove(); $elt.remove();
});
} }
} }
}); });
......
slapos/runner/templates/account.html
View file @ 5a973856
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<h2>Web runner parameters</h2><br/> <h2>Web runner parameters</h2><br/>
<div id="tabContaier"> <div id="tabContainer">
<ul> <ul>
<li><a href="#tab1" class="active">Your personal information</a></li> <li><a href="#tab1" class="active">Your personal information</a></li>
<!--<li><a href="#tab2">Configurations</a></li>--> <!--<li><a href="#tab2">Configurations</a></li>-->
......
slapos/runner/templates/instanceInspect.html
View file @ 5a973856
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
<input type='hidden' name='root' id='root' value='{%if file_path != "" %}{{file_path}}{%endif%}' /> <input type='hidden' name='root' id='root' value='{%if file_path != "" %}{{file_path}}{%endif%}' />
<input type="hidden" name="partition_amount" id="partitionAmount" value="{{ partition_amount }}" /> <input type="hidden" name="partition_amount" id="partitionAmount" value="{{ partition_amount }}" />
<h2>Instance inspection</h2><br/> <h2>Instance inspection</h2><br/>
<div id="tabContaier"> <div id="tabContainer">
<ul> <ul>
<li><a href="#tab1" class="active">Process</a></li> <li><a href="#tab1" class="active">Process</a></li>
<li><a href="#tab2">Connection Information</a></li> <li><a href="#tab2">Connection Information</a></li>
......
slapos/runner/templates/manageRepository.html
View file @ 5a973856
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
<script src="{{ url_for('static', filename='js/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script> <script src="{{ url_for('static', filename='js/ace/ace.js') }}" type="text/javascript" charset="utf-8"></script>
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div id="tabContaier"> <div id="tabContainer">
<ul> <ul>
<li><a href="#tab1" class="active" id="cloneTab">Clone repository</a></li> <li><a href="#tab1" class="active" id="cloneTab">Clone repository</a></li>
<li><a href="#tab2" id="gitTab">Manage (GIT)</a></li> <li><a href="#tab2" id="gitTab">Manage (GIT)</a></li>
......
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