From cc24384fea8d7ff7dcb9f23e0fbb2a6a424dd599 Mon Sep 17 00:00:00 2001 From: iliajie Date: Thu, 11 May 2023 13:20:06 +0300 Subject: [PATCH] Fix clear search button to look inbuilt into search field --- gray-theme/unauthenticated/gray-theme.css | 20 ++++++++++++++- ui-lib.pl | 30 +++++++++-------------- 2 files changed, 31 insertions(+), 19 deletions(-) diff --git a/gray-theme/unauthenticated/gray-theme.css b/gray-theme/unauthenticated/gray-theme.css index 101d3a4bd..2a891a64d 100644 --- a/gray-theme/unauthenticated/gray-theme.css +++ b/gray-theme/unauthenticated/gray-theme.css @@ -585,11 +585,29 @@ body > .mode > b[data-mode="server-manager"] > a > .ff-cloudmin { float:right; margin-bottom: 3px; } - .ui_form_elements_wrapper_search * { line-height: initial !important; } +.ui_form_elements_wrapper_search [data-class="ui_textbox_pagination_search"] { + padding-right: 17px; +} +.ui_form_elements_wrapper_search [data-class="ui_textbox_pagination_search"] + .ui_reset:active, +.ui_form_elements_wrapper_search [data-class="ui_textbox_pagination_search"] + .ui_reset:focus, +.ui_form_elements_wrapper_search [data-class="ui_textbox_pagination_search"] + .ui_reset { + position: absolute; + right: 17px; + min-height: 17px; + background-color: transparent; + border-color: transparent; + cursor: pointer; + outline: none; +} +.ui_form_elements_wrapper_search [data-class="ui_textbox_pagination_search"]:not([value=""]) + .ui_reset { + color: #dd4242; +} + + .ui_form_elements_wrapper_paginator { float:right; margin-top: 3px; diff --git a/ui-lib.pl b/ui-lib.pl index 0f0949c04..78a7414ec 100755 --- a/ui-lib.pl +++ b/ui-lib.pl @@ -2865,12 +2865,14 @@ if (ref($arr) eq 'ARRAY' && $arr->[0]) { # Can pagination be done automatically # depending on the client screen height? + my $items_per_page_client = int($opts->{'client_height'} || get_http_cookie('client_height')); my $items_per_page = $tconfig{'paginate-noauto'} ? $items_per_page : (int($ENV{'HTTP_X_CLIENT_HEIGHT'}) || - (int($opts->{'client_height'}) ? - ((int(($opts->{'client_height'} - $top_offset_px - $bottom_offset_px) / $row_size_px))) : $items_per_page)); + ($items_per_page_client ? + ((int(($items_per_page_client - + $top_offset_px - $bottom_offset_px) / $row_size_px))) : $items_per_page)); # If caller wants specific pagination number, # e.g. a module config, use that instead if ($exported_form && $exported_form->{'paginate'}) { @@ -2907,13 +2909,6 @@ if (ref($arr) eq 'ARRAY' && $arr->[0]) { my $paginator_id = 'paginator-form'; my $paginator_data = "$paginator_id-data"; - # As clicking on pagination arrows send - # current screen height to the server - my $screenClickHeightGetter = - "onclick='this.href=this.href+\"&client_height=\"+document.documentElement.clientHeight'"; - my $screenChangeHeightGetter = - "onchange='form.client_height.value=document.documentElement.clientHeight'"; - # Paginator form $rv{$paginator_id} = &ui_form_start($pagination_target, "e_escape($pagination_action), undef, "id='$paginator_id${id}'"); @@ -2958,13 +2953,12 @@ if (ref($arr) eq 'ARRAY' && $arr->[0]) { &ui_link("$pagination_target?page${id}=$curent_page_prev_urlize". "&search${id}=$search_term_urlize&paginate${id}=$items_per_page_urlize$exported_form_query", ' ⏴ ', - "@{[&html_escape($link_page_cls)]} @{[&html_escape($link_page_cls)]}_left$page_prev_disabled", - $screenClickHeightGetter); + "@{[&html_escape($link_page_cls)]} @{[&html_escape($link_page_cls)]}_left$page_prev_disabled"); # Page number input selector $rv{$paginator_data} .= &ui_textbox("page${id}", $curent_page, $total_pages_length, undef, $total_pages_length, - "data-class='@{["e_escape($link_search_cls)]}' form='$paginator_id${id}' $screenChangeHeightGetter"); + "data-class='@{["e_escape($link_search_cls)]}' form='$paginator_id${id}'"); # Out of pages text $rv{$paginator_data} .= @@ -2976,8 +2970,7 @@ if (ref($arr) eq 'ARRAY' && $arr->[0]) { &ui_link("$pagination_target?page${id}=$curent_page_next_urlize". "&search${id}=$search_term_urlize&paginate${id}=$items_per_page_urlize$exported_form_query", ' ▸ ', - "@{[&html_escape($link_page_cls)]} @{[&html_escape($link_page_cls)]}_right$page_next_disabled", - $screenClickHeightGetter); + "@{[&html_escape($link_page_cls)]} @{[&html_escape($link_page_cls)]}_right$page_next_disabled"); # Dynamically adding external form elements if ($exported_form) { @@ -3004,18 +2997,19 @@ if (ref($arr) eq 'ARRAY' && $arr->[0]) { # Paginator search form data $rv{$search_data} .= &ui_hidden("paginate${id}", $items_per_page, "$search_id${id}"); $rv{$search_data} .= &ui_hidden("page${id}", 1, "$search_id${id}"); - my $search_placeholder_length = length($search_placeholder); - $search_placeholder_length < 12 ? 12 : $search_placeholder_length; + my $search_placeholder_length = length($search_term) || length($search_placeholder); + $search_placeholder_length = $search_placeholder_length < 8 ? 8 : $search_placeholder_length; + $search_placeholder_length = 24 if ($search_placeholder_length >= 24); # Search box $rv{$search_data} .= &ui_textbox("search${id}", $search_term, $search_placeholder_length, undef, undef, "data-class='@{["e_escape($link_search_cls)]}_search' ". - "placeholder='@{["e_escape($search_placeholder)]}' form='$search_id${id}' $screenChangeHeightGetter"); + "placeholder='@{["e_escape($search_placeholder)]}' form='$search_id${id}'"); # Search reset using JS $rv{$search_data} .= - &ui_reset($text{'reset'}, undef, + &ui_reset('⛌', undef, "onclick='document.getElementById(\"$search_id${id}\").search${id}.value = \"\";". "document.getElementById(\"$search_id${id}\").submit()'");