mirrors/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2025-04-26 03:09:58 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

New QuickSearch Modal

Browse source 
Added a new quicksearch modal for batch manager filter (Unfinished)
This commit is contained in:
marsooooo 2024-09-13 17:02:16 +02:00
parent e66de5a513
commit 461e6c9edd
5 changed files with 263 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

4
admin/themes/clear/theme.css
View file

@ -418,7 +418,7 @@ label>p.group_select {
/*UserList Pop in*/
.UserListPopInContainer{
.UserListPopInContainer, .SearchModalContainer{
background-color:white;
border-radius:10px;
@ -571,7 +571,7 @@ input:focus + .slider {
/*UserList Pop in*/
.CloseUserList, .CloseAddAlbum, .CloseDeleteAlbum, .CloseRenameAlbum {
.CloseUserList, .CloseAddAlbum, .CloseDeleteAlbum, .CloseRenameAlbum, .CloseSearchModal {
color:white;
}

1
admin/themes/default/template/include/batch_manager_filter.inc.tpl
View file

@ -202,6 +202,7 @@ var sliders = {
</strong></em>
</div>
{/if}
{include file='include/search_modal.inc.tpl'}
</li>
<li id="filter_filesize" {if !isset($filter.filesize)}style="display:none"{/if}>

142
admin/themes/default/template/include/search_modal.inc.tpl Normal file
View file

@ -0,0 +1,142 @@
{footer_script}
$(document).ready(function () {
function open_search_modal() {
$("#HelpSearchModal").fadeIn();
}
});
{/footer_script}
<div id="HelpSearchModal" class="SearchModal">
<div class="SearchModalContainer">
<strong>{'Search with extended syntax'|@translate}</strong>
<div>{'The quick search engine allows the use of Boolean operators to refine your search. By default, the search applies to all keywords. Searches are not case-sensitive. Here is a list of actions you can perform :'|@translate}</div>
<legend>{'With keywords'|@translate}</legend>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Keywords in quotes'|@translate}</p>
<code>"captain haddock"</code>
</div>
<div class="searchModalContent">{'Use quotes to search for an exact word or phrase'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'inclusive OR'|@translate}</p>
<code>"alain **OR** bernard"</code>
</div>
<div class="searchModalContent">{'Use OR between keywords to get results containing one or the other'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Exclusion'|@translate}</p>
<code>- "NOT keyword"</code>
</div>
<div class="searchModalContent">{'Use a minus sign (-) or NOT before a keyword to exclude it from the search. Note that NOT acts as a filter. You cannot use only NOT operators and cannot combine OR and NOT'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Grouping'|@translate}</p>
<code>(parentheses)</code>
</div>
<div class="searchModalContent">{'Use parentheses to group keywords with AND/OR conditions'|@translate}</div>
</div>
<legend>{'By Filters'|@translate}</legend>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Tag'|@translate}</p>
<code> tag:"alain" </code>
</div>
<div class="searchModalContent">{'Searches only within tags, ignoring titles and descriptions'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'File'|@translate}</p>
<code> file:"DSC_" </code>
</div>
<div class="searchModalContent">{'Searches within file names'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Author'|@translate}</p>
<code> author:"Alain" </code>
</div>
<div class="searchModalContent">{'Searches by author'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Created Date'|@translate}</p>
<code> created:"2003" </code>
</div>
<div class="searchModalContent">{'Searches for photos taken in 2003'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Width and Height'|@translate}</p>
<code> width:"" </code>
<code> height:"" </code>
</div>
<div class="searchModalContent">{'Searches for photos of a specific width or height in pixels'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Size'|@translate}</p>
<code> size:">5m" </code>
</div>
<div class="searchModalContent">{'Searches for photos larger than 5 million pixels'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Ratio'|@translate}</p>
<code> ratio:"3/4" </code>
</div>
<div class="searchModalContent">{'Searches for photos with a specific aspect ratio'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Hits'|@translate}</p>
<code> hits:"" </code>
</div>
<div class="searchModalContent">{'Searches for photos by the number of hits'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Score'|@translate}</p>
<code> score:"*" </code>
</div>
<div class="searchModalContent">{'Returns all photos with or without a score'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'Filesize'|@translate}</p>
<code> filesize:"1m..10m" </code>
</div>
<div class="searchModalContent">{'Searches for files within a size range'|@translate}</div>
</div>
<div class="searchModalTab">
<div class="searchModalContent">
<p>{'ID'|@translate}</p>
<code> id:"123..126" </code>
</div>
<div class="searchModalContent">{'Searches for photos using their unique identifier'|@translate}</div>
</div>
<a class="icon-cancel CloseSearchModal"></a>
</div>
</div>

117
admin/themes/default/theme.css
View file

@ -5840,6 +5840,121 @@ input:checked + .slider:before, input:checked + .slider::after {
display:block;
}
}
/*Search Modal*/
/* #HelpSearchModal{
display: none;
} */
.SearchModal {
position: fixed;
z-index: 100;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
align-items: center;
}
.SearchModalContainer {
width: 60%;
max-width: 800px;
background-color: white;
padding: 30px;
border-radius: 8px;
text-align: left;
overflow-y: auto;
max-height: 60vh;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.SearchModalContainer::-webkit-scrollbar {
width: 12px; /* Width of the scrollbar */
height: 12px; /* Height of the scrollbar (for horizontal scrollbar) */
}
.SearchModalContainer::-webkit-scrollbar-track {
background: #f1f1f1; /* Track color */
border-radius: 10px; /* Rounding the track */
}
.SearchModalContainer::-webkit-scrollbar-thumb {
background-color: #888; /* Thumb color */
border-radius: 10px; /* Rounding the thumb */
border: 3px solid #f1f1f1; /* Adds a padding effect */
}
.SearchModalContainer::-webkit-scrollbar-thumb:hover {
background-color: #555; /* Thumb color on hover */
}
.SearchModalContainer strong {
font-size: 1.25rem;
display: block;
margin-bottom: 10px;
}
.SearchModalContainer legend {
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
border-bottom: 2px solid #ddd;
padding-bottom: 5px;
font-size: 1.1rem;
}
.searchModalTab {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
padding-left: 10px;
}
.searchModalContent {
flex: 1;
margin-left: 15px;
font-size: 0.9rem;
color: #555;
}
.searchModalContent p {
font-weight: bold;
margin: 0;
font-size: 1rem;
}
.searchModalContent code {
background-color: #c3c3c3;
padding: 2px 5px;
font-size: 0.95rem;
margin: 0 5px;
white-space: nowrap;
}
.searchModalContent {
border-left: 3px solid #eee;
padding-left: 15px;
}
.searchModalTab + .searchModalTab {
margin-top: 10px;
}
.SearchModalContainer > div {
margin-top: 10px;
}
.CloseSearchModal{
position:absolute;
right:-40px;
top:-40px;
font-size:30px;
}
/*UserList Pop in*/
@ -6874,7 +6989,7 @@ color:#FF7B00;
color:#353535;
}
.UserListPopInContainer {
.UserListPopInContainer, .SearchModalContainer {
background-color:white;
}

4
admin/themes/roma/theme.css
View file

@ -626,7 +626,7 @@ label>p.group_select {
/*UserList Pop in*/
.UserListPopInContainer{
.UserListPopInContainer, .SearchModalContainer{
background-color:#444;
border-radius:10px;
@ -1606,7 +1606,7 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
color:#c1c1c1;
}
.UserListPopInContainer {
.UserListPopInContainer, .SearchModalContainer {
background-color:#444;
}