mirror of
https://github.com/Piwigo/Piwigo.git
synced 2026-08-06 16:53:34 +02:00
Issue #1206: Implement new album manager
This commit is contained in:
Zacharie
@@ -2,158 +2,55 @@
|
||||
|
||||
{footer_script require='jquery.ui.sortable'}{literal}
|
||||
jQuery(document).ready(function(){
|
||||
jQuery(".drag_button").show();
|
||||
jQuery(".categoryLi").css("cursor","move");
|
||||
jQuery(".categoryUl").sortable({
|
||||
axis: "y",
|
||||
opacity: 0.8,
|
||||
update : function() {
|
||||
jQuery("#manualOrder").show();
|
||||
jQuery("#notManualOrder").hide();
|
||||
jQuery("#formAutoOrder").hide();
|
||||
jQuery("#formCreateAlbum").hide();
|
||||
}
|
||||
});
|
||||
|
||||
jQuery("#categoryOrdering").submit(function(){
|
||||
ar = jQuery('.categoryUl').sortable('toArray');
|
||||
for(i=0;i<ar.length;i++) {
|
||||
cat = ar[i].split('cat_');
|
||||
document.getElementsByName('catOrd[' + cat[1] + ']')[0].value = i;
|
||||
}
|
||||
});
|
||||
|
||||
jQuery("input[name=order_type]").click(function () {
|
||||
jQuery("#automatic_order_params").hide();
|
||||
if (jQuery("input[name=order_type]:checked").val() == "automatic") {
|
||||
jQuery("#automatic_order_params").show();
|
||||
}
|
||||
});
|
||||
|
||||
jQuery("#addAlbumOpen").click(function(){
|
||||
jQuery("#formCreateAlbum").toggle();
|
||||
jQuery("input[name=virtual_name]").focus();
|
||||
jQuery("#formAutoOrder").hide();
|
||||
});
|
||||
|
||||
jQuery("#addAlbumClose").click(function(){
|
||||
jQuery("#formCreateAlbum").hide();
|
||||
});
|
||||
|
||||
|
||||
jQuery("#autoOrderOpen").click(function(){
|
||||
jQuery("#formAutoOrder").toggle();
|
||||
jQuery("#formCreateAlbum").hide();
|
||||
});
|
||||
|
||||
jQuery("#autoOrderClose").click(function(){
|
||||
jQuery("#formAutoOrder").hide();
|
||||
});
|
||||
|
||||
jQuery("#cancelManualOrder").click(function(){
|
||||
jQuery(".categoryUl").sortable("cancel");
|
||||
jQuery("#manualOrder").hide();
|
||||
jQuery("#notManualOrder").show();
|
||||
});
|
||||
});
|
||||
{/literal}{/footer_script}
|
||||
|
||||
<div class="selectedAlbum cat-list-album-path"><span class="icon-sitemap">{$CATEGORIES_NAV}</span></div>
|
||||
<p class="showCreateAlbum" id="notManualOrder">
|
||||
<a href="#" id="addAlbumOpen" class="icon-plus">{'create a new album'|@translate}</a>
|
||||
{if count($categories)}<span class="userSeparator">·</span><a href="#" id="autoOrderOpen" class="icon-sort-alt-down">{'apply automatic sort order'|@translate}</a>{/if}
|
||||
{if ($PARENT_EDIT)}<span class="userSeparator">·</span><a href="{$PARENT_EDIT}" class="icon-pencil"></span>{'edit'|@translate}</a>{/if}
|
||||
</p>
|
||||
<form id="formCreateAlbum" action="{$F_ACTION}" method="post" style="display:none;">
|
||||
<fieldset class="with-border">
|
||||
<legend>{'create a new album'|@translate}</legend>
|
||||
<div class="selectedAlbum cat-list-album-path"><span class="icon-red icon-sitemap">{$CATEGORIES_NAV}</span></div>
|
||||
{assign var='color_tab' value=["icon-red", "icon-blue", "icon-yellow", "icon-purple", "icon-green"]}
|
||||
<div class="categoryContainer">
|
||||
<div class="addAlbum">
|
||||
<div class="addAlbumHead" onclick="$('.addAlbum').addClass('input-mode');">
|
||||
<span class="icon-plus-circled icon-blue"></span>
|
||||
<p>{"Add Album"|@translate}
|
||||
</div>
|
||||
<form action="{$F_ACTION}" method="post">
|
||||
<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
|
||||
|
||||
<p>
|
||||
<strong>{'Album name'|@translate}</strong><br>
|
||||
<input type="text" name="virtual_name" maxlength="255">
|
||||
</p>
|
||||
|
||||
<p class="actionButtons">
|
||||
<button name="submitAdd" type="submit" class="buttonLike">
|
||||
<i class="icon-plus-circled"></i> {'Create'|translate}
|
||||
<label for="virtual_name">{"Album Name"|@translate}</label>
|
||||
<input type="text" name="virtual_name" placeholder="{"Portraits..."|@translate}">
|
||||
<button name="submitAdd" type="submit" class="buttonLike">
|
||||
<i class="icon-plus"></i> {"Create"|@translate}
|
||||
</button>
|
||||
|
||||
<a href="#" id="addAlbumClose" class="icon-cancel-circled">{'Cancel'|@translate}</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
{if count($categories)}
|
||||
<form id="formAutoOrder" action="{$F_ACTION}" method="post" style="display:none;">
|
||||
<fieldset class="with-border">
|
||||
<legend>{'Automatic sort order'|@translate}</legend>
|
||||
<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
|
||||
<a onclick="$('.addAlbum').removeClass('input-mode');">{"Cancel"|@translate}</a>
|
||||
</form>
|
||||
</div>
|
||||
{if count($categories)}
|
||||
{foreach from=$categories item=category}
|
||||
<div class="categoryBox{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
|
||||
|
||||
<p><strong>{'Sort order'|@translate}</strong>
|
||||
{foreach from=$sort_orders key=sort_code item=sort_label}
|
||||
<br>
|
||||
<label class="font-checkbox">
|
||||
<span class="icon-dot-circled"></span>
|
||||
<input type="radio" value="{$sort_code}" name="order_by" {if $sort_code eq $sort_order_checked}checked="checked"{/if}> {$sort_label}
|
||||
</label>
|
||||
{/foreach}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label class="font-checkbox">
|
||||
<span class="icon-check"></span>
|
||||
<input type="checkbox" name="recursive"> <strong>{'Apply to sub-albums'|@translate}</strong>
|
||||
</label>
|
||||
</p>
|
||||
|
||||
<p class="actionButtons">
|
||||
<button name="submitAutoOrder" type="submit" class="buttonLike">
|
||||
<i class="icon-floppy"></i> {'Save order'|translate}
|
||||
</button>
|
||||
<a href="#" id="autoOrderClose" class="icon-cancel-circled">{'Cancel'|@translate}</a>
|
||||
</p>
|
||||
</fieldset>
|
||||
</form>
|
||||
{/if}
|
||||
<div class="albumIcon">
|
||||
<span class="
|
||||
{if $category.NB_SUB_ALBUMS == 0}icon-flow-tree{else}icon-folder-open{/if}
|
||||
{$color_tab[$category.ID % 5]}
|
||||
"> </span>
|
||||
</div>
|
||||
|
||||
<div class="albumTitle">
|
||||
{$category.NAME}
|
||||
</div>
|
||||
<span class="albumInfos"><p>{$category.NB_PHOTOS|translate_dec:'%d photo':'%d photos'}</p> <p>{$category.NB_SUB_PHOTOS|translate_dec:'%d photo':'%d photos'} {$category.NB_SUB_ALBUMS|translate_dec:'in %d sub-album':'in %d sub-albums'}</p></span>
|
||||
|
||||
<form id="categoryOrdering" action="{$F_ACTION}" method="post">
|
||||
<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
|
||||
<p id="manualOrder" style="display:none">
|
||||
<input class="submit" name="submitManualOrder" type="submit" value="{'Save manual order'|@translate}">
|
||||
{'... or '|@translate} <a href="#" id="cancelManualOrder">{'cancel manual order'|@translate}</a>
|
||||
</p>
|
||||
|
||||
{if count($categories)}
|
||||
<ul class="categoryUl">
|
||||
{foreach from=$categories item=category}
|
||||
<li class="categoryLi{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
|
||||
<!-- category {$category.ID} -->
|
||||
<div class="albumBlock">
|
||||
<div class="albumLineBlock">
|
||||
<p class="albumTitle">
|
||||
<i class="icon-arrow-combo" title="{'Drag to re-order'|translate}"></i>
|
||||
<strong>{$category.NAME}</strong>
|
||||
</p>
|
||||
<span class="albumInfos"><span class="userSeparator">·</span> {$category.NB_PHOTOS|translate_dec:'%d photo':'%d photos'} <span class="userSeparator">·</span> {$category.NB_SUB_PHOTOS|translate_dec:'%d photo':'%d photos'} {$category.NB_SUB_ALBUMS|translate_dec:'in %d sub-album':'in %d sub-albums'}</span>
|
||||
</div>
|
||||
|
||||
<input type="hidden" name="catOrd[{$category.ID}]" value="{$category.RANK}">
|
||||
|
||||
<p class="albumActions">
|
||||
<a href="{$category.U_EDIT}"><span class="icon-pencil"></span>{'Edit'|@translate}</a>
|
||||
<a href="{$category.U_CHILDREN}" class="actionTitle"><span class="icon-flow-tree"></span><span>{'sub-albums'|@translate}</span></a>
|
||||
{if isset($category.U_SYNC) }
|
||||
<a href="{$category.U_SYNC}"><span class="icon-exchange"></span>{'Synchronize'|@translate}</a>
|
||||
{/if}
|
||||
{if cat_admin_access($category.ID)}
|
||||
<a href="{$category.U_JUMPTO}"><span class="icon-eye">{'Visit Gallery'|@translate} </a>
|
||||
{/if}
|
||||
<a href="{$category.U_ADD_PHOTOS_ALBUM}"><span class="icon-plus">{'Add Photos'|@translate} </a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</li>
|
||||
<div class="albumActions">
|
||||
<a href="{$category.U_EDIT}" title="{'Edit'|@translate}"><span class="icon-pencil"></span>{'Edit'|@translate}</a>
|
||||
<a href="{$category.U_CHILDREN}" class="actionTitle" title="{'sub-albums'|@translate}"><span class="icon-flow-tree"></span>{'sub-albums'|@translate}</a>
|
||||
{if cat_admin_access($category.ID)}
|
||||
<a href="{$category.U_JUMPTO}" title="{'Visit Gallery'|@translate}"><span class="icon-eye"></span>{'Visit Gallery'|@translate} </a>
|
||||
{else}
|
||||
<span href="{$category.U_JUMPTO}" title="{'This album is private'|@translate}"><span class="icon-eye"></span>{'Visit Gallery'|@translate} </span>
|
||||
{/if}
|
||||
<a href="{$category.U_ADD_PHOTOS_ALBUM}" title="{'Add Photos'|@translate}"><span class="icon-plus"></span>{'Add Photos'|@translate}</a>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</ul>
|
||||
{/if}
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
+151
-28
@@ -152,36 +152,165 @@ TABLE.plugins TR TD { padding: 4px 10px; }
|
||||
TABLE.languages TR TD { padding: 7px 20px; }
|
||||
|
||||
|
||||
/* categoryOrdering */
|
||||
FORM#categoryOrdering .orderParams {
|
||||
line-height:30px;
|
||||
margin-bottom:10px;
|
||||
/* Category List */
|
||||
.categoryContainer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
SELECT.categoryList {
|
||||
width: 100%;
|
||||
.categoryBox, .addAlbum {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
height: 300px;
|
||||
width: 220px;
|
||||
margin: 15px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
FORM#categoryOrdering p {
|
||||
text-align: left;
|
||||
/* margin-top: 1em; */
|
||||
/* margin-bottom: 1em; */
|
||||
}
|
||||
UL.categoryUl {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 1em;
|
||||
.albumIcon {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
LI.categoryLi {
|
||||
/*
|
||||
width: 100%;
|
||||
*/
|
||||
margin-bottom: 20px;
|
||||
border-radius:5px;
|
||||
.albumIcon span{
|
||||
font-size: 19px;
|
||||
width: 27px;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.albumTitle {
|
||||
font-size: 16px;
|
||||
padding: 0px 15px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.albumInfos {
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.albumInfos p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.albumActions {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
overflow: hidden;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.albumActions a, .albumActions span {
|
||||
margin: 5px;
|
||||
font-size: 14px;
|
||||
text-transform: capitalize;
|
||||
font-weight: bold;
|
||||
transition: 0.2s ease;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.albumActions a span, .albumActions span span{
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.addAlbum {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.addAlbum.input-mode {
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.addAlbum label {
|
||||
margin: 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
padding: 2px;
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
font-size: 14px;
|
||||
color: #3C3C3C;
|
||||
}
|
||||
|
||||
.addAlbumHead {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: -10px;
|
||||
transform: translateY(75px);
|
||||
transition: 0.4s ease;
|
||||
transition-delay: 0.4s;
|
||||
padding: 110px 0px;
|
||||
}
|
||||
|
||||
.addAlbum.input-mode .addAlbumHead {
|
||||
transition-delay: 0s;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.addAlbumHead span {
|
||||
font-size: 19px;
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
padding: 10px;
|
||||
border-radius: 30px;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
.addAlbumHead p {
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.addAlbum form {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 0.4s ease;
|
||||
transition-delay: 0s;
|
||||
}
|
||||
|
||||
.addAlbum form input {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
display: inline-block;
|
||||
width: 159px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.addAlbum button, .addAlbum a {
|
||||
display: table;
|
||||
margin: 10px auto;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.addAlbum.input-mode .addAlbumHead{
|
||||
transform: translateY(0px);
|
||||
}
|
||||
|
||||
.addAlbum.input-mode form {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transition-delay: 0.4s;
|
||||
}
|
||||
|
||||
/* menuOrdering */
|
||||
FORM#menuOrdering {
|
||||
padding-left: 1em;
|
||||
@@ -2995,7 +3124,6 @@ ul.jqtree-tree .jqtree-element {
|
||||
#addAlbumOpen, #autoOrderOpen {padding: 7px 15px; font-weight: bold; font-size: 11px;}
|
||||
.afterUploadActions {text-align: center; margin-bottom: 30px !important;}
|
||||
.afterUploadActions a {justify-content: center; margin: 35px; font-weight: bold; font-size: 14px; padding: 10px 12px;}
|
||||
#addAlbumOpen::before ,#autoOrderOpen::before {margin-right: 10px; font-weight: bold; font-size: 15px;}
|
||||
#autoOrder p, #createAlbum p {text-align:left; margin:0 0 1em 0;}
|
||||
#autoOrder p.actionButtons, #createAlbum p.actionButtons {margin-bottom:0;}
|
||||
|
||||
@@ -4202,7 +4330,6 @@ fieldset#environment legend i[class*="icon-"] {
|
||||
#permissions {display: none!important;}
|
||||
#permissions, .selectFiles {margin-top: 35px; margin-bottom: 20px;}
|
||||
.selectAlbumBlock {display: flex; margin-left: 10px; margin-top: 10px;}
|
||||
.albumActions a:last-child {border-radius: 0 5px 5px 0;}
|
||||
.icon-plus.cboxElement {
|
||||
padding: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); font-size: 15px; margin-bottom: 8px; transition: all 125ms ease-out;
|
||||
}
|
||||
@@ -4389,9 +4516,5 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
|
||||
|
||||
/* album manager */
|
||||
.selectedAlbum.cat-list-album-path {
|
||||
margin: 40px 0 30px 0;
|
||||
margin: 30px 0 30px 0;
|
||||
}
|
||||
.selectedAlbum.cat-list-album-path span {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user