Skip to content

CIRCLE / cloud

Go to a project
Commit 98449110 by Kálmán Viktor
Options

Merge branch 'feature-base-template' into 'master' 

Common base template for dashboard, network, registration

Closes #191
Closes #173

Also Font Awesome 4.1 upgrade

https://miskolc.cloud.bme.hu:18525/dashboard/
parents 2ca7eb56 325b8bba
Showing with 894 additions and 670 deletions
circle/dashboard/forms.py
......@@ -131,7 +131,7 @@ class VmCustomizeForm(forms.Form):
"button",
AnyTag(
"i",
css_class="icon-play"
css_class="fa fa-play"
),
HTML(" Start"),
css_id="vm-create-customized-start",
......@@ -163,7 +163,7 @@ class VmCustomizeForm(forms.Form):
Div( # cpu priority
Div(
HTML('<label for="vm-cpu-priority-slider">'
'<i class="icon-trophy"></i> CPU priority'
'<i class="fa fa-trophy"></i> CPU priority'
'</label>'),
css_class="col-sm-3"
),
......@@ -182,7 +182,7 @@ class VmCustomizeForm(forms.Form):
Div( # cpu count
Div(
HTML('<label for="cpu-count-slider">'
'<i class="icon-cogs"></i> CPU count'
'<i class="fa fa-cogs"></i> CPU count'
'</label>'),
css_class="col-sm-3"
),
......@@ -201,7 +201,7 @@ class VmCustomizeForm(forms.Form):
Div( # ram size
Div(
HTML('<label for="ram-slider">'
'<i class="icon-ticket"></i> RAM amount'
'<i class="fa fa-ticket"></i> RAM amount'
'</label>'),
css_class="col-sm-3"
),
......@@ -313,7 +313,7 @@ class VmCustomizeForm(forms.Form):
"a",
AnyTag(
"i",
css_class="icon-plus-sign",
css_class="fa fa-plus-circle",
),
css_id=("vm-create-network-add"
"-button"),
......@@ -556,7 +556,7 @@ class NodeForm(forms.ModelForm):
"button",
AnyTag(
"i",
css_class="icon-play"
css_class="fa fa-play"
),
HTML("Start"),
css_id="node-create-submit",
......@@ -958,7 +958,7 @@ class CircleAuthenticationForm(AuthenticationForm):
"span",
AnyTag(
"i",
css_class="icon-user",
css_class="fa fa-user",
),
css_class="input-group-addon",
),
......@@ -972,7 +972,7 @@ class CircleAuthenticationForm(AuthenticationForm):
"span",
AnyTag(
"i",
css_class="icon-lock",
css_class="fa fa-lock",
),
css_class="input-group-addon",
),
......@@ -1000,7 +1000,7 @@ class CirclePasswordResetForm(PasswordResetForm):
"span",
AnyTag(
"i",
css_class="icon-envelope",
css_class="fa fa-envelope",
),
css_class="input-group-addon",
),
......
circle/dashboard/static/dashboard/bootstrap-slider/slider.css
......@@ -146,10 +146,10 @@
height: 26px;
margin-top: -4px!important;
margin-left: -6px !important;
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-webkit-border-radius: 0px;
text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#428bca), to(#3071a9));
......@@ -196,10 +196,10 @@
}
.vm-slider {
width: 300px;
width: 300px;
}
.output {
padding-left: 10px;
font-weight: bold;
}
}
circle/dashboard/static/dashboard/dashboard.css
......@@ -145,13 +145,13 @@ html {
background-color: transparent;
}
.sub-timeline {
}
.sub-timeline {
}
.sub-activity {
margin-left: 30px;
padding-left: 10px;
border-left: 3px solid green;
border-left: 3px solid green;
}
.sub-activity-active {
......@@ -235,7 +235,7 @@ html {
#vm-details-rename, #vm-details-h1-name, #vm-details-rename ,
#node-details-rename, #node-details-rename *, #node-details-h1-name, #node-list-rename, #node-list-rename *#group-details-rename, #group-details-rename *, #group-details-h1-name, #group-list-rename, #group-list-rename * {
display: inline;
}
......@@ -302,8 +302,8 @@ html {
}
/* port add buttons */
.vm-details-network-port-add .input-group-addon, .vm-details-network-port-add .input-group-btn {
width: inherit ;
.vm-details-network-port-add .input-group-addon, .vm-details-network-port-add .input-group-btn {
width: inherit ;
}
/* vm-create */
......@@ -426,12 +426,12 @@ a.hover-black {
cursor: pointer;
}
#vm-migrate-node-list {
list-style: none;
}
#vm-migrate-node-list li {
padding-bottom: 10px;
#vm-migrate-node-list {
list-style: none;
}
#vm-migrate-node-list li {
padding-bottom: 10px;
}
.vm-migrate-node-property {
......@@ -446,7 +446,7 @@ a.hover-black {
/* fancy stuff
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
border-radius: 8px;
border-radius: 8px;
*/
}
......@@ -460,25 +460,25 @@ a.hover-black {
/* footer */
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 30px;
background-color: #101010;
color: white;
font-size: 13px;
padding: 5px 5px 0 5px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
text-align: center;
}
footer a, footer a:hover, footer a:visited {
color: white;
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 30px;
background-color: #101010;
color: white;
font-size: 13px;
padding: 5px 5px 0 5px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
text-align: center;
}
footer a, footer a:hover, footer a:visited {
color: white;
text-decoration: underline;
}
.template-disk-list {
list-style: none;
padding-left: 0;
......@@ -513,15 +513,15 @@ footer a, footer a:hover, footer a:visited {
}
/* template create vm help */
.alert-new-template {
background: #3071a9;
color: white;
font-size: 22px;
}
.alert-new-template ol {
.alert-new-template {
background: #3071a9;
color: white;
font-size: 22px;
}
.alert-new-template ol {
margin-left: 25px;
}
}
/* bootstrap tour */
.tour-template {
......@@ -542,11 +542,11 @@ footer a, footer a:hover, footer a:visited {
}
.index-vm-list-name {
display: inline-block;
max-width: 70%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
max-width: 70%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
float: left;
}
......@@ -555,11 +555,11 @@ footer a, footer a:hover, footer a:visited {
}
.index-template-list-name {
display: inline-block;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
float: left;
}
......@@ -574,7 +574,7 @@ footer a, footer a:hover, footer a:visited {
}
#vm-details-home-description {
display: inline-block;
display: inline-block;
position: relative;
}
......@@ -588,8 +588,8 @@ footer a, footer a:hover, footer a:visited {
}
.vm-details-description-submit {
position: absolute;
bottom: 10px;
position: absolute;
bottom: 10px;
right: 20px;
}
......@@ -670,25 +670,25 @@ textarea[name="list-new-namelist"] {
}
/* vm list css */
.vm-list-selected, .vm-list-selected td {
background-color: #e8e8e8 !important;
}
.vm-list-selected:hover, .vm-list-selected:hover td {
background-color: #d0d0d0 !important;
}
.vm-list-selected td:first-child {
font-weight: bold;
}
.vm-list-table-thin {
width: 10px;
}
.vm-list-table-admin {
width: 130px;
}
.vm-list-selected, .vm-list-selected td {
background-color: #e8e8e8 !important;
}
.vm-list-selected:hover, .vm-list-selected:hover td {
background-color: #d0d0d0 !important;
}
.vm-list-selected td:first-child {
font-weight: bold;
}
.vm-list-table-thin {
width: 10px;
}
.vm-list-table-admin {
width: 130px;
}
#vm-details-connection-string-copy {
cursor: pointer;
......@@ -705,9 +705,9 @@ textarea[name="list-new-namelist"] {
}
#group-detail-user-table td:nth-child(2) a,
#group-detail-perm-table td:nth-child(2) a,
#template-access-table td:nth-child(2) a,
#vm-access-table td:nth-child(2) a,
#group-detail-perm-table td:nth-child(2) a,
#template-access-table td:nth-child(2) a,
#vm-access-table td:nth-child(2) a,
.no-style-link, .no-style-link:hover {
color: #555 !important;
text-decoration: none;
......@@ -733,7 +733,7 @@ textarea[name="list-new-namelist"] {
border: 1px solid #ccc;
}
#group-detail-permissions .selector-available h2,
#group-detail-permissions .selector-available h2,
#group-detail-permissions .selector-chosen h2 {
margin: 0;
padding: 5px 8px 5px 8px;
......@@ -749,5 +749,5 @@ textarea[name="list-new-namelist"] {
}
#group-detail-permissions input[type="submit"]{
margin-top: -6px;
margin-top: -6px;
}
circle/dashboard/static/dashboard/dashboard.js
......@@ -121,11 +121,11 @@ $(function () {
$("#dashboard-vm-list").on('click', '.dashboard-vm-favourite', function(e) {
var star = $(this).children("i");
var pk = $(this).data("vm");
if(star.hasClass("icon-star-empty")) {
star.removeClass("icon-star-empty").addClass("icon-star");
if(star.hasClass("fa-star-o")) {
star.removeClass("fa-star-o").addClass("fa-star");
star.prop("title", "Unfavourite");
} else {
star.removeClass("icon-star").addClass("icon-star-empty");
star.removeClass("fa-star").addClass("fa-star-o");
star.prop("title", "Mark as favourite");
}
$.ajax({
......@@ -381,12 +381,12 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
return '<a href="/dashboard/vm/' + pk + '/" class="list-group-item' +
(is_last ? ' list-group-item-last' : '') + '">' +
'<span class="index-vm-list-name">' +
'<i class="' + icon + '" title="' + _status + '"></i> ' + name +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + name +
'</span>' +
'<small class="text-muted"> ' + host + '</small>' +
'<div class="pull-right dashboard-vm-favourite" data-vm="' + pk + '">' +
(fav ? '<i class="icon-star text-primary title-favourite" title="Unfavourite"></i>' :
'<i class="icon-star-empty text-primary title-favourite" title="Mark as favorite"></i>' ) +
(fav ? '<i class="fa fa-star text-primary title-favourite" title="Unfavourite"></i>' :
'<i class="fa fa-star-o text-primary title-favourite" title="Mark as favorite"></i>' ) +
'</div>' +
'<div style="clear: both;"></div>' +
'</a>';
......@@ -394,14 +394,14 @@ function generateVmHTML(pk, name, host, icon, _status, fav, is_last) {
function generateGroupHTML(url, name) {
return '<a href="' + url + '" class="list-group-item real-link">'+
'<i class="icon-group"></i> '+ name +
'<i class="fa fa-users"></i> '+ name +
'</a>';
}
function generateNodeHTML(name, icon, _status, url, is_last) {
return '<a href="' + url + '" class="list-group-item real-link' + (is_last ? ' list-group-item-last' : '') + '">' +
'<span class="index-node-list-name">' +
'<i class="' + icon + '" title="' + _status + '"></i> ' + name +
'<i class="fa ' + icon + '" title="' + _status + '"></i> ' + name +
'</span>' +
'<div style="clear: both;"></div>' +
'</a>';
......
circle/dashboard/static/dashboard/loopj-jquery-simple-slider-fa64f59/demo.html
......@@ -5,8 +5,8 @@
<script src="js/simple-slider.js"></script>
<link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
<link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />
<!-- These styles are only used for this page, not required for the slider -->
<style>
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
......
circle/dashboard/static/dashboard/template-list.js
......@@ -31,7 +31,7 @@ $(function() {
ttable.on("aftertablesort", function(event, data) {
$(".template-list-table thead th i").remove();
var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right" style="position: absolute;"></i>';
var icon_html = '<i class="fa fa-sort-' + (data.direction == "desc" ? "desc" : "asc") + ' pull-right" style="position: absolute;"></i>';
$(".template-list-table thead th").eq(data.column).append(icon_html);
});
......
circle/dashboard/static/dashboard/vm-common.js
......@@ -4,13 +4,13 @@ $(function() {
/* vm operations */
$('#ops, #vm-details-resources-disk').on('click', '.operation.btn', function(e) {
var icon = $(this).children("i").addClass('icon-spinner icon-spin');
var icon = $(this).children("i").addClass('fa-spinner fa-spin');
$.ajax({
type: 'GET',
url: $(this).attr('href'),
success: function(data) {
icon.removeClass("icon-spinner icon-spin");
icon.removeClass("fa-spinner fa-spin");
$('body').append(data);
$('#confirmation-modal').modal('show');
$('#confirmation-modal').on('hidden.bs.modal', function() {
......
circle/dashboard/static/dashboard/vm-create.js
......@@ -288,11 +288,11 @@ function vmCustomizeLoaded() {
function vmCreateNetworkLabel(pk, name, managed) {
return '<span id="vlan-' + pk + '" class="label label-' + (managed ? 'primary' : 'default') + '"><i class="icon-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="icon-remove-sign"></i></a></span> ';
return '<span id="vlan-' + pk + '" class="label label-' + (managed ? 'primary' : 'default') + '"><i class="fa fa-' + (managed ? 'globe' : 'link') + '"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-network"><i class="fa fa-times-circle"></i></a></span> ';
}
function vmCreateDiskLabel(pk, name) {
var style = "float: left; margin: 5px 5px 5px 0;";
return '<span id="disk-' + pk + '" class="label label-primary" style="' + style + '"><i class="icon-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="icon-remove-sign"></i></a></span> ';
return '<span id="disk-' + pk + '" class="label label-primary" style="' + style + '"><i class="fa fa-file"></i> ' + name + ' <a href="#" class="hover-black vm-create-remove-disk"><i class="fa fa-times-circle"></i></a></span> ';
}
circle/dashboard/static/dashboard/vm-details.js
......@@ -4,24 +4,24 @@ $(function() {
checkNewActivity(false, 1);
}
$('a[href="#activity"]').click(function(){
$('a[href="#activity"] i').addClass('icon-spin');
$('a[href="#activity"] i').addClass('fa-spin');
checkNewActivity(false, 1);
});
/* save resources */
$('#vm-details-resources-save').click(function() {
$('i.icon-save', this).removeClass("icon-save").addClass("icon-refresh icon-spin");
$('i.fa-floppy-o', this).removeClass("fa-floppy-o").addClass("fa-refresh fa-spin");
var vm = $(this).data("vm");
$.ajax({
type: 'POST',
url: "/dashboard/vm/" + vm + "/op/resources_change/",
data: $('#vm-details-resources-form').serialize(),
success: function(data, textStatus, xhr) {
$("#vm-details-resources-save i").removeClass('icon-refresh icon-spin').addClass("icon-save");
$("#vm-details-resources-save i").removeClass('fa-refresh fa-spin').addClass("fa-floppy-o");
$('a[href="#activity"]').trigger("click");
},
error: function(xhr, textStatus, error) {
$("#vm-details-resources-save i").removeClass('icon-refresh icon-spin').addClass("icon-save");
$("#vm-details-resources-save i").removeClass('fa-refresh fa-spin').addClass("fa-floppy-o");
if (xhr.status == 500) {
addMessage("500 Internal Server Error", "danger");
} else {
......@@ -76,13 +76,13 @@ $(function() {
var eye = $(this).children("#vm-details-pw-eye");
eye.tooltip("destroy")
if(eye.hasClass("icon-eye-open")) {
eye.removeClass("icon-eye-open").addClass("icon-eye-close");
if(eye.hasClass("fa-eye")) {
eye.removeClass("fa-eye").addClass("fa-eye-slash");
input.prop("type", "text");
input.focus();
eye.prop("title", "Hide password");
} else {
eye.removeClass("icon-eye-close").addClass("icon-eye-open");
eye.removeClass("fa-eye-slash").addClass("fa-eye");
input.prop("type", "password");
eye.prop("title", "Show password");
}
......@@ -269,7 +269,7 @@ $(function() {
$("#getScreenshotButton").click(function() {
var vm = $(this).data("vm-pk");
var ct = $("#vm-console-screenshot");
$("i", this).addClass("icon-spinner icon-spin");
$("i", this).addClass("fa-spinner fa-spin");
$(this).prop("disabled", true);
ct.slideDown();
var img = $("img", ct).prop("src", '/dashboard/vm/' + vm + '/screenshot/');
......@@ -280,7 +280,7 @@ $(function() {
// see: http://stackoverflow.com/a/3877079/1112653
$("#vm-console-screenshot img").load(function(e) {
$("#getScreenshotButton").prop("disabled", false)
.find("i").removeClass("icon-spinner icon-spin");
.find("i").removeClass("fa-spinner fa-spin");
});
......@@ -320,7 +320,7 @@ function removePort(data) {
function decideActivityRefresh() {
var check = false;
/* if something is still spinning */
if($('.timeline .activity:first i:first').hasClass('icon-spin'))
if($('.timeline .activity:first i:first').hasClass('fa-spin'))
check = true;
/* if there is only one activity */
if($('#activity-timeline div[class="activity"]').length < 2)
......@@ -360,7 +360,7 @@ function checkNewActivity(only_status, runs) {
$("[title]").tooltip();
}
$("#vm-details-state i").prop("class", data['icon']);
$("#vm-details-state i").prop("class", "fa " + data['icon']);
$("#vm-details-state span").html(data['human_readable_status'].toUpperCase());
if(data['status'] == "RUNNING") {
$("[data-target=#_console]").attr("data-toggle", "pill").attr("href", "#console").parent("li").removeClass("disabled");
......@@ -382,7 +382,7 @@ function checkNewActivity(only_status, runs) {
1000 + Math.exp(runs * 0.05)
);
}
$('a[href="#activity"] i').removeClass('icon-spin');
$('a[href="#activity"] i').removeClass('fa-spin');
},
error: function() {
......
circle/dashboard/static/dashboard/vm-list.js
......@@ -171,7 +171,7 @@ $(function() {
$(".vm-list-table thead th i").remove();
var icon_html = '<i class="icon-sort-' + (data.direction == "desc" ? "up" : "down") + ' pull-right"></i>';
var icon_html = '<i class="fa fa-sort-' + (data.direction == "desc" ? "desc" : "asc") + ' pull-right"></i>';
$(".vm-list-table thead th").eq(data.column).append(icon_html);
});
......
circle/dashboard/static/dashboard/vm-tour.js
......@@ -17,13 +17,13 @@ function createTemplateTour() {
"<div class='popover-navigation'>" +
"<div class='btn-group'>" +
"<button class='btn btn-sm btn-default' data-role='prev'>" +
'<i class="icon-chevron-left"></i> ' + gettext("Prev") + "</button> " +
'<i class="fa fa-chevron-left"></i> ' + gettext("Prev") + "</button> " +
"<button class='btn btn-sm btn-default' data-role='next'>" +
gettext("Next") + ' <i class="icon-chevron-right"></i></button> ' +
gettext("Next") + ' <i class="fa fa-chevron-right"></i></button> ' +
"<button class='btn btn-sm btn-default' data-role='pause-resume' data-pause-text='Pause' data-resume-text='Resume'>Pause</button> " +
"</div>" +
"<button class='btn btn-sm btn-default' data-role='end'>" +
gettext("End tour") + ' <i class="icon-flag-checkered"></i></button>' +
gettext("End tour") + ' <i class="fa fa-flag-checkered"></i></button>' +
"</div>" +
"</div>",
});
......@@ -99,7 +99,7 @@ function createTemplateTour() {
ttour.addStep({
element: "#ops",
title: '<i class="icon-play"></i> ' + gettext("Deploy"),
title: '<i class="fa fa-play"></i> ' + gettext("Deploy"),
placement: "left",
backdrop: true,
content: gettext("Deploy the virtual machine."),
......@@ -123,7 +123,7 @@ function createTemplateTour() {
ttour.addStep({
element: "#ops",
title: '<i class="icon-save"></i> ' + gettext("Save as"),
title: '<i class="fa fa-floppy-o"></i> ' + gettext("Save as"),
placement: "left",
backdrop: true,
content: gettext('Press the "Save as template" button and wait until the activity finishes.'),
......
circle/dashboard/static/template.css 0 → 100644
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
padding-bottom: 20px;
margin-bottom: 30px; /* sticky footer */
}
html {
position: relative;
min-height: 100%;
}
/* Set widths on the navbar form inputs since otherwise they're 100% wide */
.navbar-form input[type="text"],
.navbar-form input[type="password"] {
width: 180px;
}
/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* values for 45px tall navbar */
.navbar {
min-height: 45px;
}
.navbar-brand {
height: 45px;
padding: 12.5px 12.5px;
}
.navbar-toggle {
margin-top: 5.5px;
margin-bottom: 5.5px;
}
.navbar-form {
margin-top: 5.5px;
margin-bottom: 5.5px;
}
.navbar-btn {
margin-top: 5.5px;
margin-bottom: 5.5px;
}
.navbar-btn.btn-sm {
margin-top: 7.5px;
margin-bottom: 7.5px;
}
.navbar-btn.btn-xs {
margin-top: 11.5px;
margin-bottom: 11.5px;
}
.navbar-text {
margin-top: 12.5px;
margin-bottom: 12.5px;
}
/* --- */
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Let the jumbotron breathe */
.container > :first-child {
margin-top: 20px;
}
/* Remove padding from wrapping element since we kick in the grid classes here */
.body-content {
padding: 0;
}
.navbar-nav > li > a {
padding-top: 12.5px;
padding-bottom: 12.5px;
}
}
.no-margin {
margin: 0!important;
}
.list-group .list-group-footer {
padding-top: 5px;
padding-bottom: 5px;
}
.big {
font-size: 2em;
}
.bigbig {
font-size: 3em;
}
/* small buttons for tags, copied from Bootstraps input-sm, bnt-sm */
.btn-tags, .btn-traits {
padding: 3px 6px;
font-size: 11px;
line-height: 1.5;
border-radius: 3px;
}
.input-tags, .input-tratis {
height: 22px;