Commit 2749dc5461e73206177fba697754110ee5f2f5da

services: remake ui. put service headers inside the frame and alternate background of each row and use status icons
plugins/services/app/views/services/index.rhtml
(32 / 25)
  
33<% javascript_tag do %>
44$(document).ready(function() {
55
6 $("#services fieldset").each (function(index) {
6 $("#services div.list-fieldset").each (function(index) {
77 if ($(this).is(":has(span.status_running)")) {
8 $(this).find("legend .service-icon").attr('class','service-icon running');
8 $(this).find(".list-fieldset-header .service-icon").attr('class','service-icon status-icon ok');
99 }
1010 else if ($(this).is(":has(span.status_dead)")) {
11 $(this).find("legend .service-icon").attr('class','service-icon dead');
11 $(this).find(".list-fieldset-header .service-icon").attr('class','service-icon status-icon error');
1212 }
1313 else {
14 $(this).find("legend .service-icon").attr('class','service-icon unknown');
14 $(this).find(".list-fieldset-header .service-icon").attr('class','service-icon status-icon unused');
1515 }
1616 });
1717
18 $('#services fieldset').quicksearch({
18 $('#services div.list-fieldset').quicksearch({
1919 attached: '#services',
2020 loaderText: '',
2121 labelText: '<%= _("Quick Search")%>',
2222 delay: 100
2323 });
2424
25 $(".accordion").accordion({
26 autoHeight : false,
27 navigation : true,
28 collapsible: true,
29 header : 'fieldset legend'
30 });
31
32 $(".accordion").accordion('activate',false);
25 $('.accordion div.list-fieldset:even').addClass('alt-bg');
3326})
3427
3528// adapt the status icon of given service
3629function toggle_service_info (id) {
37 var heading = $(id).closest('.service-content').siblings('legend');
30 var heading = $(id).closest('.service-content').siblings('div.list-fieldset-header');
3831 if ($(id).is(':has(span.status_running)')) {
39 $(heading).find(".service-icon").attr('class','service-icon running');
32 $(heading).find(".service-icon").attr('class','service-icon status-icon ok');
4033 $(id).siblings('a#start').hide();
4134 $(id).siblings('a#stop').show();
4235 }
4336 else if ($(id).is(':has(span.status_dead)')) {
44 $(heading).find(".service-icon").attr('class','service-icon dead');
37 $(heading).find(".service-icon").attr('class','service-icon status-icon error');
4538 $(id).siblings('a#stop').hide();
4639 $(id).siblings('a#start').show();
4740 }
4841 else {
49 $(heading).find(".service-icon").attr('class','service-icon unknown');
42 $(heading).find(".service-icon").attr('class','service-icon status-icon unused');
5043 $(id).siblings('a#stop').hide();
5144 $(id).siblings('a#start').show();
5245 }
……
4747
4848function select_status (val) {
4949 if (val == "all") {
50 $("#services > fieldset").show();
50 $("#services > div.list-fieldset").show();
5151 }
5252 else if (val == "not-running") {
53 $('#services > fieldset').each(function(index) {
53 $('#services > div.list-fieldset').each(function(index) {
5454 if ($(this).is(":has(span.status_not_running)")) {
5555 $(this).show();
5656 } else {
……
5959 });
6060 }
6161 else if (val == "running") {
62 $('#services > fieldset').each(function(index) {
62 $('#services > div.list-fieldset').each(function(index) {
6363 if ($(this).is(":has(span.status_running)")) {
6464 $(this).show();
6565 } else {
……
6868 });
6969 }
7070 else if (val == "dead") {
71 $('#services > fieldset').each(function(index) {
71 $('#services > div.list-fieldset').each(function(index) {
7272 if ($(this).is(":has(span.status_dead)")) {
7373 $(this).show();
7474 } else {
……
7878 };
7979}
8080<% end %>
81<% content_for :before_script do %>
82 <% javascript_tag do %>
83 $(document).ready(function(){
84 $(".accordion").accordion({
85 autoHeight : false,
86 navigation : true,
87 collapsible: true,
88 header : 'div.list-fieldset div.list-fieldset-header'
89 });
90 $(".accordion").accordion('activate',false);
91 });
92 <% end %>
93<% end %>
8194
95
8296<div class='plugin-icon'><img src='/icons/yast-system.png' alt=''/><%= _("System Services") %></div>
8397
8498<div class="plugin-content grid_12">
……
117117<%
118118commands = [ "start", "stop", "restart", ]
119119@services.each do |service| %>
120 <fieldset class="wrapper with-background">
120 <div class="list-fieldset">
121121
122 <legend><span class="service-icon"></span><%=service.name %> <em style="position:absolute; left:25%"><%=service.summary%></em></legend>
122 <div class="list-fieldset-header"><span class="service-icon"></span><%=service.name %> <em style="position:absolute; left:25%"><%=service.summary%></em></div>
123123
124 <div class='service-content'>
124 <div class='service-content' style="display:none">
125125
126126 <p class='description'>
127127 <i><%= service.description ? h(service.description) : _("Description for service is not available") %></i>
……
187187 <%= render :partial => 'result' %>
188188 </span>
189189 </div>
190 </fieldset>
190 </div>
191191<% end %>
192192</div>
193193<fieldset>
webclient/public/stylesheets/style.css
(40 / 13)
  
533533.status-icon {
534534 display: block;
535535 width: 23px;
536 height: 23px;
536 height: 19px;
537537 background: transparent url(images/status-imagemap.png) no-repeat scroll 0 0;
538538 float: left;
539 margin-left: 3px;
540 margin-right: 3px;
539541}
540542
541543.bug-icon {
542544 display: block;
543 position: relative;
544 top: -3px;
545545 width: 23px;
546546 height: 23px;
547547 background: transparent url(images/bug.png) no-repeat scroll 0 0;
……
554554}
555555
556556.status-icon.ok {
557 background-position: 0 0;
557 background-position: 0 -3;
558558}
559559.status-icon.warning {
560 background-position: 0 -22px;
560 background-position: 0 -24px;
561561}
562562.status-icon.error {
563 background-position: 0 -44px;
563 background-position: 0 -46px;
564564}
565565.status-icon.optional {
566 background-position: 0 -66px;
566 background-position: 0 -68px;
567567}
568568.status-icon.unused {
569 background-position: 0 -88px;
569 background-position: 0 -89px;
570570}
571571.status-icon.none {
572572 background: transparent;
……
749749.password-strength-bar {
750750 height: 3px;
751751}
752/* status icons for services module */
753.service-icon { width: 20px; height: 20px; display:block; float:left;}
754.service-icon.running { background-image: url(/images/green.png); }
755.service-icon.dead { background-image: url(/images/red.png); }
756.service-icon.unknown { background-image: url(/images/grey.png); }
752
753.list-fieldset {
754 border-color: #ddd #ccc #bbb;
755 border-style: solid;
756 border-width: 1px;
757 background-color: #eee;
758
759 -moz-border-radius: 5px;
760 -webkit-border-radius: 5px;
761 -khtml-border-radius: 5px;
762 border-radius: 5px;
763
764 -webkit-box-shadow: 0 1px 3px #ccc;
765 -moz-box-shadow: none;
766
767 margin: 0.5em 1em 0.5em;
768}
769
770.list-fieldset-header,
771.ui-accordion .list-fieldset-header.ui-accordion-header {
772 font-weight: bold !important;
773 margin-bottom: 5px;
774 margin-top: 4px;
775}
776
777.list-fieldset select {
778 background-color: #fff;
779}
780
781.list-fieldset.alt-bg {
782 background-color: #ddd;
783}