mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-06-01 20:04:51 +02:00
issue #2409 add search engine filter : expert mode
* new access system not implemented yet * dark mode handled but needs review
This commit is contained in:
plegall
@@ -109,6 +109,11 @@
|
||||
color: #444;
|
||||
}
|
||||
|
||||
#expert-search {
|
||||
background: #eee;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.date_posted-option label{
|
||||
background-color:white;
|
||||
border-bottom:1px solid #f3f3f3;
|
||||
|
||||
@@ -105,6 +105,14 @@
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.help-popin-search {
|
||||
color:#ccc;
|
||||
}
|
||||
|
||||
.help-popin-search:hover {
|
||||
color:#fff;
|
||||
}
|
||||
|
||||
#word-search {
|
||||
background: #777;
|
||||
color: #eee;
|
||||
@@ -304,6 +312,10 @@
|
||||
color: #777
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.filter-form {
|
||||
width: 100vw;
|
||||
|
||||
@@ -534,6 +534,10 @@
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
#expert-search {
|
||||
width:350px;
|
||||
}
|
||||
|
||||
/*_____________________________*/
|
||||
|
||||
.head-button-2 {
|
||||
@@ -992,4 +996,74 @@
|
||||
|
||||
.mcs_hide{
|
||||
display:none!important;
|
||||
}
|
||||
}
|
||||
|
||||
/* expert mode : search tips modal */
|
||||
.bg-modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
}
|
||||
|
||||
.close-modal {
|
||||
color: white;
|
||||
position: absolute;
|
||||
right: -40px;
|
||||
top: -40px;
|
||||
font-size: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-modal:hover {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
border-radius: 10px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -48%);
|
||||
text-align: left;
|
||||
padding: 30px;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.help-popin-search {
|
||||
cursor: pointer;
|
||||
font-weight: normal !important;
|
||||
}
|
||||
|
||||
.help-popin-search:hover span,
|
||||
.help-popin-search:hover .icon-help-circled::before {
|
||||
color: #3C3C3C !important;
|
||||
}
|
||||
|
||||
#modalQuickSearch p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#modalQuickSearch .modal-content {
|
||||
max-height: 400px;
|
||||
height: 100%;
|
||||
width: 500px;
|
||||
gap:20px;
|
||||
}
|
||||
|
||||
.quick-search-content {
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@@ -685,6 +685,30 @@ $(document).ready(function () {
|
||||
empty_filters_list.push(PS_params.width_max);
|
||||
}
|
||||
|
||||
// Setup Expert filter
|
||||
if (global_params.fields.expert) {
|
||||
$(".filter-expert").css("display", "flex");
|
||||
$(".filter-manager-controller.expert").prop("checked", true);
|
||||
|
||||
expert_search_str = global_params.fields.expert.string;
|
||||
$("#expert-search").val(expert_search_str);
|
||||
|
||||
if (global_params.fields.expert.string && global_params.fields.expert.string.length > 0) {
|
||||
$(".filter-expert").addClass("filter-filled");
|
||||
$(".filter.filter-expert .search-words").text(expert_search_str);
|
||||
} else {
|
||||
$(".filter.filter-expert .search-words").text(str_expert_widget_label);
|
||||
}
|
||||
|
||||
$(".filter-expert .filter-actions .clear").on('click', function () {
|
||||
$(".filter-expert #expert-search").val('');
|
||||
});
|
||||
|
||||
PS_params.expert = global_params.fields.expert.string.length > 0 ? global_params.fields.expert.string : '';
|
||||
|
||||
empty_filters_list.push(PS_params.expert);
|
||||
}
|
||||
|
||||
if(filters_to_remove.length > 0){
|
||||
filters_to_remove = [];
|
||||
performSearch(PS_params, true);
|
||||
@@ -727,6 +751,7 @@ $(document).ready(function () {
|
||||
// 27 is 'Escape'
|
||||
if(e.keyCode === 27) {
|
||||
$(".filter-manager-popin .filter-manager-close").trigger('click');
|
||||
$('#closeModalQuickSearch').trigger('click');
|
||||
}
|
||||
// 13 is 'Enter'
|
||||
if (e.keyCode === 13) {
|
||||
@@ -1358,6 +1383,40 @@ $(document).ready(function () {
|
||||
$(".filter-manager-controller.width").prop("checked", false);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Expert widget
|
||||
*/
|
||||
$(".filter-expert").on('click', function (e) {
|
||||
if ($(".filter-form").has(e.target).length != 0 ||
|
||||
$(e.target).hasClass("filter-form") ||
|
||||
$(e.target).hasClass("remove")) {
|
||||
return;
|
||||
}
|
||||
$(".filter-expert-form").toggle(0, function () {
|
||||
if ($(this).is(':visible')) {
|
||||
$(".filter-expert").addClass("show-filter-dropdown");
|
||||
} else {
|
||||
$(".filter-expert").removeClass("show-filter-dropdown");
|
||||
|
||||
global_params.fields.expert = $("#expert-search").val();
|
||||
PS_params.expert = $("#expert-search").val();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$(".filter-expert .filter-validate").on("click", function () {
|
||||
$(".filter-expert").trigger("click");
|
||||
performSearch(PS_params, true);
|
||||
});
|
||||
$(".filter-expert .filter-actions .delete").on("click", function () {
|
||||
updateFilters('expert', 'del');
|
||||
performSearch(PS_params, true);
|
||||
if (!$(".filter-expert").hasClass("filter-filled")) {
|
||||
$(".filter-expert").hide();
|
||||
$(".filter-manager-controller.expert").prop("checked", false);
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
function performSearch(params, reload = false) {
|
||||
@@ -1658,4 +1717,12 @@ $(window).on('load', function() {
|
||||
});
|
||||
$(window).on('resize', function() {
|
||||
resize_filter_form();
|
||||
});
|
||||
|
||||
$('.help-popin-search').on('click', function() {
|
||||
$('#modalQuickSearch').fadeIn();
|
||||
});
|
||||
|
||||
$('#closeModalQuickSearch').on('click', function() {
|
||||
$('#modalQuickSearch').fadeOut();
|
||||
});
|
||||
@@ -50,6 +50,7 @@ str_ratios_label['Portrait'] ="{'Portrait'|@translate|escape:javascript}";
|
||||
str_ratios_label['square'] = "{'square'|@translate|escape:javascript}";
|
||||
str_ratios_label['Landscape'] = "{'Landscape'|@translate|escape:javascript}";
|
||||
str_ratios_label['Panorama'] = "{'Panorama'|@translate|escape:javascript}";
|
||||
str_expert_widget_label = "{'Expert mode'|@translate|escape:javascript}";
|
||||
|
||||
str_empty_search_top_alt = "{'Fill in the filters to start a search'|@translate|escape:javascript}";
|
||||
str_empty_search_bot_alt = "{'Pre-established filters are proposed, but you can add or remove them using the "Choose filters" button.'|@translate|escape:javascript}";
|
||||
@@ -189,6 +190,12 @@ const prefix_icon = 'gallery-icon-';
|
||||
<span class="mcs-icon gallery-icon-width">{'Width'|@translate}</span>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<label>
|
||||
<input data-wid='expert' class="filter-manager-controller expert" type="checkbox"/>
|
||||
<span class="mcs-icon gallery-icon-skull">{'Expert mode'|translate}</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filter-manager-actions">
|
||||
@@ -829,12 +836,51 @@ const prefix_icon = 'gallery-icon-';
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="filter filter-expert">
|
||||
<span class="mcs-icon gallery-icon-skull filter-icon"></span>
|
||||
<span class="search-words"></span>
|
||||
<span class="filter-arrow gallery-icon-up-open"></span>
|
||||
|
||||
<div class="filter-form filter-expert-form">
|
||||
<div class="filter-form-title gallery-icon-skull"> {'Expert mode'|@translate}</div>
|
||||
<div class="filter-actions">
|
||||
<span class="delete mcs-icon gallery-icon-trash">{'Delete'|@translate}</span>
|
||||
<span class="clear mcs-icon gallery-icon-arrow-rotate-left">{'Clear'|@translate}</span>
|
||||
</div>
|
||||
|
||||
<input type="text" id="expert-search" name="expert">
|
||||
|
||||
<p title="{'Help'|@translate}" class="help-popin-search">
|
||||
<i class="gallery-icon-selecters"></i>
|
||||
<span>{'Search tips'|translate}</span>
|
||||
</p>
|
||||
|
||||
<div class="filter-validate">
|
||||
<i class="loading gallery-icon-spin6 animate-spin"></i>
|
||||
<span class="validate-text">{'Validate'|@translate}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<span class="mcs-icon gallery-icon-arrow-rotate-left clear-all">{'Empty filters'|@translate}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-modal" id="modalQuickSearch">
|
||||
<div class="modal-content">
|
||||
<a class="gallery-icon-cancel close-modal" id="closeModalQuickSearch"></a>
|
||||
|
||||
<div class="quick-search-content">
|
||||
<div class="quick-search-syntax">
|
||||
{assign var=is_dark_mode value=$themeconf.colorscheme == 'dark'}
|
||||
{include file='themes/default/template/help/quick_search.tpl' dark_mode=$is_dark_mode}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if isset($TAGS_FOUND) or isset($ALBUMS_FOUND)}
|
||||
<div class="mcs-side-results">
|
||||
{if isset($TAGS_FOUND)}
|
||||
|
||||
Reference in New Issue
Block a user