Skip to content

GitLab

Commit 3706f8f9 authored by Olga Brani's avatar Olga Brani
Browse files

Helpdesk UI improvements

parent 788a5ce7
Hide whitespace changes
Inline Side-by-side
snf-cyclades-app/synnefo/helpdesk/static/css/extra.css
View file @ 3706f8f9
......@@ -102,24 +102,25 @@ h1 { margin-bottom: 20px; }
.subnav-fixed h2 { display: block }
.account-form { float: right; margin-top: 2px; margin-bottom: 0}
.info-block { margin-top: 30px; background-color: #fff}
.info-block { margin-top: 30px; background-color: #fff; padding:0;}
.info-block h3 .badge { font-size: 0.8em; padding: 5px 8px; background-color:#659CEF;}
.info-block table { margin-bottom: 0 }
.object-details h5 { float: right; margin-top: 10px; margin-right: 10px; font-size: 1em; color: #D9397E }
.object-anchor { margin-bottom: 70px }
.object-anchor { margin-bottom: 5px; height:15px; }
.subnav a.deleted { color: #F00 !important }
/* new styles olga */
h1 a:hover { text-decoration:none; }
.search-query { border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; }
a { color:#659CEF; }
a:hover { color:#2956B2 }
h3 { font-size:21px; cursor:pointer;}
h3 { font-size:21px; cursor:pointer; margin:20px;}
h4 { font-size:18px; margin-bottom:1em; }
input:focus,
textarea:focus {
......@@ -145,30 +146,34 @@ textarea:focus {
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover { background-color:#F5F5F5; color:#2956B2; font-weight:bold;}
.nav-tabs > li { margin-bottom:-2px; }
.badge { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:5px; }
.badge { border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; }
.object-details .badge { margin-right:8px; }
.label-success,
.badge-success { background-color:#8BBA00 }
.badge-important { background-color: #F81A23; }
.badge-info { background-color:#659CEF }
.show-hide-tabs { margin:2em 0; }
.show-hide-all { float:right; margin:0; line-height:27px;}
.show-hide-all { float:right; margin:20px; line-height:27px;}
.toggle .badge { font-size:14px; padding:5px 9px; }
.toggle .badge:hover { cursor:pointer; }
.show-hide-tabs .badge { background-color:#8BBA00; }
.show-hide-tabs .badge:hover { background-color:#789B0F }
.show-hide-all .badge { background-color:#8BBA00; }
.show-hide-all .badge:hover { background-color:#789B0F }
/*.show-hide-all .badge { background-color:#D61153; }
.show-hide-all .badge:hover { background-color:#9F0C3E }*/
.show-hide-all .badge:hover { background-color:#789B0F }
.vms h3,
.vms h4 { color:#D61153 }
.vms h3:hover { color:#9F0C3E }
.vms h4 { color:#E42867 }
.vms h3:hover,
.vms h4:hover { color:#9F0C3E }
.networks h3,
.networks h4 { color:#F46906 }
.networks h3:hover { color:#D65C04 }
.networks h3:hover,
.networks h4:hover { color:#D65C04 }
.account h3,
.account h4 { color:#2956B2 }
.account h3:hover { color:#213D75 }
\ No newline at end of file
.account h3:hover,
.account h4:hover { color:#213D75 }
.object-details { padding:20px; }
.object-details h4 { cursor:pointer; }
h4 .badge { padding:6px 9px 2px; background:url(../img/glyphicons-halflings.png) 160px 43px transparent;}
h4.expanded .badge { background-position: 185px 43px}
.row2 { background-color:#EDEDED; }
snf-cyclades-app/synnefo/helpdesk/static/js/common.js
View file @ 3706f8f9
......@@ -31,65 +31,59 @@ $(document).ready(function(){
// hide/show expand/collapse
$('.subnav a').click(function(){
$('.subnav .dropdown-menu a').click(function(){
$('.info-block-content, .show-hide-all').show();
})
function checkBadgeExpanded(el){
if (el.hasClass('expanded')){
el.html( txt_tab[1]);
} else {
el.html( txt_tab[0]);
}
}
var txt_tab = ['+ Show Info','- Hide Info'];
var txt_all = ['+ Expand all','- Collapse all'];
$('.show-hide-tabs span').html(txt_tab[0]);
$('.show-hide-all span').html(txt_all[0]);
$('.show-hide-all').click(function(){
var badgeAll = $(this).children('span');
var tabs = $(this).parents('.info-block').find('.show-hide-tabs');
badgeAll.toggleClass('open');
var tabs = $(this).parent('.info-block').find('.object-details-content')
console.info(tabs);
if (badgeAll.hasClass('open')){
badgeAll.html( txt_all[1]);
tabs.each(function() {
$(this).next().show('slow');
$(this).children('span').addClass('expanded');
checkBadgeExpanded($(this).children('span'));
$(this).show();
$(this).siblings('h4').addClass('expanded');
});
} else {
badgeAll.html( txt_all[0]);
tabs.each(function() {
$(this).next().hide('slow');
$(this).children('span').removeClass('expanded');
checkBadgeExpanded($(this).children('span'));
$(this).hide();
$(this).siblings('h4').removeClass('expanded');
});
}
});
$('.show-hide-tabs').click(function(){
$('.object-details h4').click(function(){
$(this).next().toggle('slow');
var badge = $(this).children('span');
badge.toggleClass('expanded');
checkBadgeExpanded(badge);
$(this).siblings('.object-details-content').toggle();
$(this).toggleClass('expanded');
});
$('.info-block h3').click(function(){
$(this).next('.info-block-content').toggle();
$(this).prev('.show-hide-all').toggle();
})
})
snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/account.html
View file @ 3706f8f9
......@@ -67,6 +67,7 @@
<h3>Virtual machines <span class="badge badge-info">Total: {{ vms|length }}</span></h3>
<div class="info-block-content">
{% for vm in vms %}
<!-- {% cycle 'row1' 'row2' as rowcls %} -->
{% include "helpdesk/vms_list.html" %}
{% empty %}
<p>No virtual machines available for this account</p>
......@@ -81,6 +82,7 @@
<h3>Networks <span class="badge badge-info">Total: {{ networks|length }}</span></h3>
<div class="info-block-content">
{% for network in networks %}
<!--{% cycle 'row1' 'row2' as rowcls %}-->
{% include "helpdesk/networks_list.html" %}
{% empty %}
<p>No networks available for this account</p>
......
snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/networks_list.html
View file @ 3706f8f9
{% load helpdesk_tags %}
<div class="object-anchor" id="network-{{network.pk}}"></div>
<div class="network-details object-details">
<h4>{{ network.name }}</h4>
<h4>{{ network.name }} <span class="badge">&nbsp;</span></h4>
<span class="badge badge-info">ID: {{ network.pk }}</span>
{{ network|network_deleted_badge|safe }}
<div class="show-hide-tabs toggle">
<span class="badge">&nbsp;</span>
</div>
<div class="network-details-content object-details-content">
<ul class="nav nav-tabs">
<li class="active"><a href="#details{{ network.pk }}" data-toggle="tab">Details</a></li>
......@@ -18,8 +16,8 @@
<dt>Name</dt><dd>{{ network.name }}</dd>
<dt>Public</dt><dd>{{ network.public }}</dd>
<dt>User ID</dt><dd>{{ network.userid }}</dd>
<dt>Created</dt><dd>{{ network.created }}( {{ network.created|timesince }} <strong>ago</strong>)</dd>
<dt>Updated</dt><dd>{{ network.updated }}( {{ network.created|timesince }} <strong>ago</strong>)</dd>
<dt>Created</dt><dd>{{ network.created }} ({{ network.created|timesince }} <strong>ago</strong>)</dd>
<dt>Updated</dt><dd>{{ network.updated }} ({{ network.created|timesince }} <strong>ago</strong>)</dd>
<dt>State</dt><dd>{{ network.get_state_display }} ({{ network.state }})</dd>
</dl>
</div>
......
snf-cyclades-app/synnefo/helpdesk/templates/helpdesk/vms_list.html
View file @ 3706f8f9
{% load helpdesk_tags %}
<div class="object-anchor" id="vm-{{vm.pk}}"></div>
<div class="vm-details object-details">
<h4> {{ vm.name }}</h4>
<div class="vm-details object-details {{ rowcls }}">
<h4>{{ vm.name }} <span class="badge">&nbsp;</span></h4>
<span class="badge badge-info">ID: {{ vm.pk }}</span>
{{ vm|vm_status_badge|safe }}
<span class="badge badge-info">{{ vm|vm_public_ip }}</span>
......@@ -10,9 +10,7 @@
<span class="ram">{{ vm.flavor.ram}}MB</span>
<span class="disk">{{ vm.flavor.disk }}GB</span>
</span>
<div class="show-hide-tabs toggle">
<span class="badge">&nbsp;</span>
</div>
<div class="vm-details-content object-details-content">
<ul class="nav nav-tabs">
......@@ -27,8 +25,8 @@
<dt>ID</dt><dd>{{ vm.pk }}</dd>
<dt>Name</dt><dd>{{ vm.name }}</dd>
<dt>User id</dt><dd>{{ vm.userid }}</dd>
<dt>Created</dt><dd>{{ vm.created }}( {{ vm.created|timesince }} <strong>ago</strong>)</dd>
<dt>Updated</dt><dd>{{ vm.updated }} ( {{ vm.updated|timesince }} <strong>ago</strong>)</dd>
<dt>Created</dt><dd>{{ vm.created }} ({{ vm.created|timesince }} <strong>ago</strong>)</dd>
<dt>Updated</dt><dd>{{ vm.updated }} ({{ vm.updated|timesince }} <strong>ago</strong>)</dd>
<dt>Suspended</dt><dd>{{ vm.suspended }}</dd>
<dt>Deleted</dt><dd>{{ vm.deleted }}</dd>
<dt>Image id</dt><dd>{{ vm.imageid }}</dd>
......
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