Attached is a first port of the list view to the new CSS markup. I still
have a question though.
https://git.fedorahosted.org/cgit/spacewalk.git/tree/web/modules/sniglets/Sniglets/ListView/Style.pm
The way the styles work is by defining Style:standard with the default
methods and then other styles override this default.
When I look at Sniglets::ListView::Style::standard sub header
I see that package Sniglets::ListView::Style::channel_tree redefines it
exactly in the same way (overrides without changing it). Is it because
of the use of Style::blank below?
package Sniglets::ListView::Style::channel_tree;
use base qw/Sniglets::ListView::Style::blank/;
What is the reason for this?
--
Duncan Mac-Vicar P. - http://www.suse.com/
SUSE LINUX Products GmbH, GF: Jeff Hawn, Jennifer Guild, Felix
Imendörffer, HRB 16746 (AG Nürnberg)
Maxfeldstraße 5, 90409 Nürnberg, Germany
diff --git a/branding/templates/header.pxt b/branding/templates/header.pxt
index d90e605..c567b3a 100644
--- a/branding/templates/header.pxt
+++ b/branding/templates/header.pxt
@@ -21,6 +21,10 @@
<script src="/javascript/bootstrap.js"></script>
<script src="/javascript/spacewalk-essentials.js"></script>
<script src="/javascript/spacewalk-checkall.js"></script>
+
+ <script src="/rhn/dwr/engine.js"></script>
+ <script src="/rhn/dwr/util.js"></script>
+ <script src="/rhn/dwr/interface/DWRItemSelector.js"></script>
</head>
</pxt-passthrough>
diff --git a/web/modules/pxt/PXT/HTML.pm b/web/modules/pxt/PXT/HTML.pm
index 7064042..dbde608 100644
--- a/web/modules/pxt/PXT/HTML.pm
+++ b/web/modules/pxt/PXT/HTML.pm
@@ -119,6 +119,7 @@ sub hidden {
#text(
# -name => foo,
# -value => foo,
+# -placeholder => foo,
# -maxlength => 30,
# -size => 15);
sub text{
@@ -129,7 +130,7 @@ sub text{
$class->_spew("->text no name given, defaulting to " . $e{-name});
}
- return $class->_format(\%e,"input type=\"text\"");
+ return $class->_format(\%e,"input class=\"form-control\" type=\"text\"");
}
#file(
@@ -451,6 +452,26 @@ sub link {
return sprintf qq{<a href="%s"$css_class$target>%s</a>}, $url, $label;
}
+sub button {
+ my $class = shift;
+ my $text = shift;
+ my %params = @_;
+
+ if (not exists $params{-name}) {
+ die "nameless button";
+ }
+
+ my @inner;
+ for my $attr (qw/value type name class/) {
+ next unless exists $params{"-$attr"};
+ push @inner, sprintf(qq{$attr="$params{-$attr}"});
+ }
+
+ my $inner_str = join(" ", @inner);
+
+ return qq{<button $inner_str>$text</button>};
+}
+
sub link2 {
my $class = shift;
my %params = validate(@_, { url => 1, text => 0, css => 0, target => 0, params => 0 });
diff --git a/web/modules/sniglets/Sniglets/ListView/List.pm b/web/modules/sniglets/Sniglets/ListView/List.pm
index 47030ce..9732c20 100644
--- a/web/modules/sniglets/Sniglets/ListView/List.pm
+++ b/web/modules/sniglets/Sniglets/ListView/List.pm
@@ -492,6 +492,17 @@ sub render_formvars {
sub render_alphabar {
my $self = shift;
+ my $pxt = shift;
+ my $content = shift;
+
+ # if there is no alphabar we still need the div there
+ my $template = $self->style->alphabar();
+ $template =~ s/\{alphabar_content\}/$content/;
+ return $template;
+}
+
+sub render_alphabar_content {
+ my $self = shift;
my $alphabar = shift;
my $pagesize = shift;
my $url = shift;
@@ -536,10 +547,12 @@ sub render_filterbox {
throw "No 'sort_by' column for mode '" . $self->mode->{__name__} . "'\n" unless defined $filter_by;
- $ret .= q{<div class="filter-input">};
- $ret .= sprintf('Filter by %s: ', $filter_by->name);
+ $ret .= q{<div class="spacewalk-list-filter">};
+ $ret .= q{<div class="input-group input-group-sm">};
+
if ($self->filter_type eq 'text') {
- $ret .= PXT::HTML->text(-name => 'filter_value', -value => PXT::Utils->escapeHTML($self->filter_string || ''), -size => 12);
+ $ret .= PXT::HTML->text(-name => 'filter_value', -value => PXT::Utils->escapeHTML($self->filter_string || ''),
+ -placeholder => sprintf('Filter by %s: ', $filter_by->name));
$ret .= PXT::HTML->hidden(-name => 'prev_filter_value', -value => PXT::Utils->escapeHTML($self->filter_string || ''));
}
elsif ($self->filter_type eq 'select') {
@@ -554,8 +567,12 @@ sub render_filterbox {
throw "Unknown filter type: '" . $self->filter_type . "'";
}
- $ret .= " ";
- $ret .= PXT::HTML->submit_image(-src => '/img/button-go.gif', -alt => "Filter", -name => "filter_list");
+ $ret .= q{<div class="input-group-btn">};
+ $ret .= PXT::HTML->button(PXT::HTML->icon(-class => 'fa fa-eye') , -type => 'submit', -name => "filter_list",
+ -class => "btn btn-default spacewalk-button-filter");
+ $ret .= q{</div>};
+
+ $ret .= q{</div>};
$ret .= q{</div>};
return $ret;
@@ -598,26 +615,6 @@ sub render_select_buttons {
return $block;
}
-sub render_set_info {
- my $self = shift;
- my $pxt = shift;
- my $block = shift;
- my $pos = shift;
-
- my $subst = { };
-
- if ($self->allow_selections($pxt) and $self->{__set__}) {
- my $num_contents = scalar $self->{__set__}->contents;
- $subst->{set_string} = sprintf('<span id="pagination_selcount_%s">(%s selected)</span>', $pos, $num_contents);
- }
- else {
- $subst->{set_string} = '';
- }
-
- $block = PXT::Utils->perform_substitutions($block, $subst);
- return $block;
-}
-
sub render_page_info {
my $self = shift;
my $pxt = shift;
@@ -674,10 +671,10 @@ sub render_pagination_buttons {
# show buttons
if ($lower != '1' || ($upper != $total)) {
- $back_buttons_str = $self->render_pagination_button("First", "/img/list-allbackward$back_status_str.gif", " |< ", $back_status);
- $back_buttons_str .= $self->render_pagination_button("Prev", "/img/list-backward$back_status_str.gif", " < ", $back_status);
- $forward_buttons_str = $self->render_pagination_button("Next", "/img/list-forward$forward_status_str.gif", " > ", $forward_status);
- $forward_buttons_str .= $self->render_pagination_button("Last", "/img/list-allforward$forward_status_str.gif", " >| ", $forward_status);
+ $back_buttons_str = $self->render_pagination_button("First", "fa fa-fast-backward", " |< ", $back_status);
+ $back_buttons_str .= $self->render_pagination_button("Prev", "fa fa-backward", " < ", $back_status);
+ $forward_buttons_str = $self->render_pagination_button("Next", "fa fa-forward", " > ", $forward_status);
+ $forward_buttons_str .= $self->render_pagination_button("Last", "fa fa-fast-forward", " >| ", $forward_status);
}
my %subst;
@@ -693,23 +690,22 @@ sub render_pagination_buttons {
sub render_pagination_button {
my $self = shift;
my $name = shift;
- my $img_file = shift;
+ my $icon_class = shift;
my $text = shift;
my $is_active = shift;
my $ret = '';
+ my $disabled = '';
if ($is_active) {
- $ret = <<EOH
-<input type="image" src="$img_file" border="0" name="$name" value="$text" class="list-nextprev-active" />
-EOH
- }
- else {
- $ret = <<EOH
-<img src="$img_file" border="0" alt="$text" title="$text" class="list-nextprev-inactive" />
-EOH
+ $disabled = ' disabled';
}
+ $ret = <<EOH;
+<button class="btn btn-default btn-xs" type="submit" name="$name" value="$text"$disabled>
+<i class="$icon_class" title="$text"></i>
+</button>
+EOH
return $ret;
}
@@ -750,7 +746,7 @@ sub render_rows_header {
chomp($col_str);
- my $header = $self->style->header;
+ my $header = $self->style->table_header;
$header =~ s/\{header_row\}/$col_str/g;
@@ -766,7 +762,7 @@ sub render_rows_footer {
$numcols++;
}
- my $footer = $self->style->footer;
+ my $footer = $self->style->table_footer;
$footer =~ s/\{numcols\}/$numcols/g;
return $footer;
@@ -865,6 +861,18 @@ sub render_checkbox {
return $checkbox_template;
}
+sub render_pagination {
+ my $self = shift;
+ my $pxt = shift;
+
+ my $template = $self->style->pagination;
+
+ $template = $self->render_pagination_buttons($pxt, $template);
+ $template = $self->render_pagination_formvars($pxt, $template);
+ $template = $self->render_page_info($pxt, $template);
+ return $template;
+}
+
sub render_empty_list_message {
my $self = shift;
@@ -940,21 +948,36 @@ sub render {
if ($self->filter_string) {
$ret .= PXT::HTML->form_start(-name => 'rhn_list', -method => "POST", -action => $pxt->uri) . "\n";
- $ret .= $self->render_filterbox($pxt) . '<br />';
+
+ my $template = $self->style->header();
+ $template =~ s/\{alphabar\}//;
+ $template =~ s/\{pagination\}//;
+ my $filterbox = $self->render_filterbox($pxt);
+ $template =~ s/\{control_area\}/$filterbox/;
+
+ $ret .= $template;
$ret .= $self->render_empty_list_message();
$ret .= $self->render_formvars($pxt);
$ret .= PXT::HTML->hidden(-name => "pxt:trap", -value => $self->trap());
$ret .= PXT::HTML->hidden(-name => "list_mode", -value => $mode->{__name__});
if ($self->{__set__}) {
- $ret .= PXT::HTML->hidden(-name => "list_set_label", -value => $self->{__set__}->label);
+ $ret .= PXT::HTML->hidden(-name => "list_set_label", -value => $self->{__set__}->label);
}
-
+ $ret .= $self->style->footer;
$ret .= PXT::HTML->form_end;
return $ret;
}
else {
- return $self->render_empty_list_message();
+ my $template = $self->style->header();
+ $template =~ s/\{alphabar\}//;
+ $template =~ s/\{pagination\}//;
+ $template =~ s/\{control_area\}//;
+
+ $ret .= $template;
+ $ret .= $self->render_empty_list_message();
+ $ret .= $self->style->footer;
+ return $ret;
}
}
@@ -964,15 +987,13 @@ sub render {
my $filter = ' ';
-
-
- my $alphabar;
+ my $alphabar_content;
if (exists $results{alphabar} && defined $results{alphabar}) {
- $alphabar = " ";
+ $alphabar_content = " ";
if (scalar @{$results{all_ids}} > $pxt->user->preferred_page_size) {
- $alphabar = $self->render_alphabar($results{alphabar},
+ $alphabar_content = $self->render_alphabar_content($results{alphabar},
$pxt->user->preferred_page_size,
$pxt->uri,
$self->formvars($pxt));
@@ -982,20 +1003,17 @@ sub render {
$filter = $self->render_filterbox($pxt);
}
- $ret .= $alphabar if $alphabar;
-
$ret .= PXT::HTML->form_start(-name => 'rhn_list', -method => "POST", -action => $pxt->uri) . "\n";
- my $pagination = $self->style->pagination;
+ my $header .= $self->style->header;
+ my $pagination = $self->render_pagination($pxt);
+ my $alphabar = $self->render_alphabar($pxt, $alphabar_content);
+ $header =~ s/\{alphabar\}/$alphabar/;
- $pagination = $self->render_pagination_buttons($pxt, $pagination);
- $pagination = $self->render_pagination_formvars($pxt, $pagination);
- $pagination = $self->render_set_info($pxt, $pagination, 'top');
- $pagination = $self->render_page_info($pxt, $pagination);
- $pagination =~ s/\{control_area\}/$filter/;
-
- $ret .= $pagination;
+ $header =~ s/\{pagination\}/$pagination/;
+ $header =~ s/\{control_area\}/$filter/;
+ $ret .= $header;
$ret .= $self->render_rows_header(\%acl_failures);
$self->init_row_counter();
@@ -1170,17 +1188,10 @@ sub render {
$ret .= $self->render_rows_footer();
- $pagination = $self->style->pagination;
-
- $pagination = $self->render_pagination_buttons($pxt, $pagination);
- $pagination = $self->render_set_info($pxt, $pagination, 'bottom');
- $pagination = $self->render_page_info($pxt, $pagination);
-
- $pagination = $self->render_select_buttons($pxt, $pagination, $acl_failures{'Select'});
-
- $pagination =~ s/\{hidden_vars\}//;
-
- $ret .= $pagination;
+ my $footer = $self->style->footer;
+ $footer =~ s/\{pagination\}/$pagination/;
+ $footer = $self->render_select_buttons($pxt, $footer, $acl_failures{'Select'});
+ $ret .= $footer;
$ret .= PXT::HTML->hidden(-name => "pxt:trap", -value => $self->trap());
$ret .= PXT::HTML->hidden(-name => "list_mode", -value => $mode->{__name__});
diff --git a/web/modules/sniglets/Sniglets/ListView/Style.pm b/web/modules/sniglets/Sniglets/ListView/Style.pm
index 288c615..486b1c1 100644
--- a/web/modules/sniglets/Sniglets/ListView/Style.pm
+++ b/web/modules/sniglets/Sniglets/ListView/Style.pm
@@ -35,7 +35,7 @@ sub header_column {
my $self = shift;
my $ret = <<EOQ;
- <th{attr_string}>{column_name}</th>
+ <th>{column_name}</th>
EOQ
return $ret;
@@ -45,16 +45,34 @@ sub header {
my $self = shift;
my $ret =<<EOQ;
-<div class="panel panel-default">
-<table class="table table-striped">
-<!-- Begin Header Row -->
- <thead>
- <tr>
-{header_row}
- </tr>
- </thead>
-<!-- End Header Row -->
+<div class="spacewalk-list">
+ <div class="spacewalk-list-top-addons">
+ {alphabar}
+ {pagination}
+ </div>
+ <div class="panel panel-default">
+ <div class="panel-heading">
+ <div class="spacewalk-list-head-addons">
+ {control_area}
+ </div>
+ </div>
+EOQ
+ return $ret;
+}
+
+sub table_header {
+ my $self = shift;
+
+ my $ret =<<EOQ;
+ <table class="table table-striped">
+ <!-- Begin Header Row -->
+ <thead>
+ <tr>
+ {header_row}
+ </tr>
+ </thead>
+ <!-- End Header Row -->
EOQ
return $ret;
@@ -75,11 +93,29 @@ EOQ
return $ret;
}
+sub table_footer {
+ my $self = shift;
+
+ my $ret =<<EOQ;
+ </table>
+EOQ
+ return $ret;
+}
+
sub footer {
my $self = shift;
my $ret =<<EOQ;
-</table>
+ <div class="panel-footer">
+ <div class="spacewalk-list-footer-addons">
+ {control_area}
+ </div>
+ </div>
+ </div>
+ <div class="spacewalk-list-bottom-addons">
+ {pagination}
+ </div>
+
</div>
EOQ
@@ -90,16 +126,14 @@ sub pagination {
my $self = shift;
my $ret =<<EOQ;
+ <div class="spacewalk-list-pagination">
<!-- Begin Pagination Buttons -->
- <table width="100%" class="list-pagination" align="center">
- <tr>
- <td valign="center" width="90%">{control_area}</td>
- <td valign="center" class="list-infotext"><strong>{current_lower}</strong> - <strong>{current_upper}</strong> of <strong>{total} {set_string}</strong>  </td>
- <td valign="center" class="list-navbuttons">{back_buttons_str} {forward_buttons_str}</td>
- </tr>
- </table>
-
+ <span id="list_min">{current_lower}</span> - <span id="list_max">{current_upper}</span> of <span id="list_total">{total}</span>
+ <div class="spacewalk-list-pagination-btns btn-group">
+ {back_buttons_str} {forward_buttons_str}
+ </div>
{hidden_vars}
+ </div>
<!-- End Pagination Buttons -->
EOQ
@@ -135,7 +169,7 @@ sub column {
my $self = shift;
my $ret =<<EOQ;
- <td{width_str}{align_str}{nowrap_str}{class_str}>
+ <td>
{col_data}
</td>
EOQ
@@ -159,7 +193,9 @@ sub empty_list_wrapper {
my $self = shift;
my $ret =<<EOQ;
- <div class="list-empty-message">{empty_list_message}</div>
+ <div class="panel-body">
+ <div class="list-empty-message">{empty_list_message}</div>
+ </div>
EOQ
return $ret;
@@ -169,11 +205,9 @@ sub alphabar {
my $self = shift;
my $ret =<<EOQ;
-<table width="100%" cellspacing="0" cellpadding="1">
- <tr valign="top">
- <td class="list-alphabar">{alphabar}</td>
- </tr>
-</table>
+ <div class="spacewalk-list-alphabar">
+ {alphabar_content}
+ </div>
EOQ
return $ret;
@@ -325,11 +359,31 @@ EOQ
return $ret;
}
+sub table_footer {
+ my $self = shift;
+
+ my $ret =<<EOQ;
+ </table>
+EOQ
+ return $ret;
+}
+
sub footer {
my $self = shift;
my $ret =<<EOQ;
-</table>
+ </div>
+ <div class="panel-footer">
+ <div class="spacewalk-list-footer-addons">
+ {control_area}
+ </div>
+ </div>
+
+ <div class="spacewalk-list-bottom-addons">
+ {pagination}
+ </div>
+
+</div>
EOQ
return $ret;
_______________________________________________
Spacewalk-devel mailing list
Spacewalk-devel@redhat.com
https://www.redhat.com/mailman/listinfo/spacewalk-devel
