From a413748cff786bf26427febbcf2220515d08a74f Mon Sep 17 00:00:00 2001 From: Matthieu Leproux Date: Tue, 19 Apr 2022 16:18:38 +0200 Subject: [PATCH] related to #1609 dropdown for small screens positionned and working --- admin/themes/default/js/albums.js | 67 +++++++++++++++++++++--- admin/themes/default/template/albums.tpl | 15 ++++++ admin/themes/default/theme.css | 11 ++-- 3 files changed, 82 insertions(+), 11 deletions(-) diff --git a/admin/themes/default/js/albums.js b/admin/themes/default/js/albums.js index 3caea4da3..ae55cf8e9 100644 --- a/admin/themes/default/js/albums.js +++ b/admin/themes/default/js/albums.js @@ -32,9 +32,12 @@ $(document).ready(() => { action_small = "
" +"" - +"{'Duplicate'|@translate}" - +"{'Delete'|@translate}" - +"" + +""+ str_add_album +"" + +""+ str_edit_album +"" + +""+ str_add_photo +"" + +""+ str_visit_gallery +"" + +""+ str_sort_order +"" + +""+ str_delete_album +"" +"" +"
"; @@ -50,7 +53,7 @@ $(document).ready(() => { cont.find(".toggle-cat-option").on("click", function () { $(".cat-option").hide(); $(this).find(".cat-option").toggle(); - }) + }); if (node.children.length != 0) { open_nodes = $('.tree').tree('getState').open_nodes; @@ -64,6 +67,7 @@ $(document).ready(() => { .replace(/%id%/g, node.id))); } else { cont.find('.move-cat-order').addClass("notClickable"); + cont.find('#catOptionsSmall .icon-sort-name-up').hide(); cont.append($(toggler_cont .replace(/%content%/g, toggler_close) @@ -116,9 +120,25 @@ $(document).ready(() => { if (node.has_not_access) { cont.find(".move-cat-see").addClass("notClickable"); + cont.find('#catOptionsSmall .icon-eye').hide(); } } + /* Hide group options and rename field on click on the screen */ + + $(document).mouseup(function (e) { + e.stopPropagation(); + let option_is_clicked = false + $("#catOptionsSmall a").each(function () { + if (!($(this).has(e.target).length === 0)) { + option_is_clicked = true; + } + }) + if (!option_is_clicked) { + $(".jqtree-element").find("#catOptionsSmall").hide(); + } + }); + var url_split = window.location.href.split("#"); var catToOpen = url_split[url_split.length-1].split("-")[1]; @@ -130,7 +150,7 @@ $(document).ready(() => { nodeToGo = $('.tree').tree('getNodeById', catToOpen); goToNode(nodeToGo, nodeToGo); - if (nodeToGo.children) { + if (nodeToGo.children) {move-cat-delete-small $(".tree").tree("openNode", nodeToGo, false); } } @@ -280,6 +300,10 @@ $(document).ready(() => { openAddAlbumPopIn(); $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); }) + $(".move-cat-add-small").on("click", function () { + openAddAlbumPopIn(); + $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); + }) $(".CloseAddAlbum").on("click", function () { closeAddAlbumPopIn(); }); @@ -351,9 +375,16 @@ $(document).ready(() => { openAddAlbumPopIn(); $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); }); + $(".move-cat-add-small").unbind("click").on("click", function () { + openAddAlbumPopIn(); + $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); + }); $(".move-cat-delete").on("click", function () { triggerDeleteAlbum($(this).data("id")); }); + $(".move-cat-delete-small").on("click", function () { + triggerDeleteAlbum($(this).data("id")); + }); goToNode($(".tree").tree('getNodeById', data.result.id), $(".tree").tree('getNodeById', data.result.id)); $('html,body').animate({ @@ -371,7 +402,10 @@ $(document).ready(() => { // Delete Album $(".move-cat-delete").on("click", function () { triggerDeleteAlbum($(this).data("id")); - }) + }); + $(".move-cat-delete-small").on("click", function () { + triggerDeleteAlbum($(this).data("id")); + }); /*---------------- Checkboxes @@ -481,9 +515,16 @@ function openDeleteAlbumPopIn(cat_to_delete) { openAddAlbumPopIn(); $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); }); + $(".move-cat-add-small").on("click", function () { + openAddAlbumPopIn(); + $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); + }); $(".move-cat-delete").on("click", function () { triggerDeleteAlbum($(this).data("id")); }); + $(".move-cat-delete-small").on("click", function () { + triggerDeleteAlbum($(this).data("id")); + }); setSubcatsBadge(parentOfDeletedNode); closeDeleteAlbumPopIn(); @@ -622,9 +663,16 @@ function applyMove(event) { openAddAlbumPopIn(); $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); }); + $(".move-cat-add-small").unbind("click").on("click", function () { + openAddAlbumPopIn(); + $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); + }); $(".move-cat-delete").on("click", function () { triggerDeleteAlbum($(this).data("id")); }); + $(".move-cat-delete-small").on("click", function () { + triggerDeleteAlbum($(this).data("id")); + }); $(".move-cat-title-container").on("click", function () { openRenameAlbumPopIn($(this).find(".move-cat-title").attr("title")); $(".RenameAlbumSubmit").data("cat_id", $(this).attr('data-id')); @@ -636,9 +684,16 @@ function applyMove(event) { openAddAlbumPopIn(); $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); }); + $(".move-cat-add-small").unbind("click").on("click", function () { + openAddAlbumPopIn(); + $(".AddAlbumSubmit").data("a-parent", $(this).data("aid")); + }); $(".move-cat-delete").on("click", function () { triggerDeleteAlbum($(this).data("id")); }); + $(".move-cat-delete-small").on("click", function () { + triggerDeleteAlbum($(this).data("id")); + }); $(".move-cat-title-container").on("click", function () { openRenameAlbumPopIn($(this).find(".move-cat-title").attr("title")); $(".RenameAlbumSubmit").data("cat_id", $(this).attr('data-id')); diff --git a/admin/themes/default/template/albums.tpl b/admin/themes/default/template/albums.tpl index ef9420b37..d8768f012 100644 --- a/admin/themes/default/template/albums.tpl +++ b/admin/themes/default/template/albums.tpl @@ -30,6 +30,13 @@ const has_images_associated_outside = '{"delete album and all %d photos, even th const has_images_becomming_orphans = '{'delete album and the %d orphan photos'|@translate|escape:javascript}'; const has_images_recursives = '{'delete only album, not photos'|@translate|escape:javascript}'; const rename_item = '{'Rename "%s"'|@translate|escape:javascript}'; + +const str_add_album = '{'Add album'|@translate|escape:javascript}'; +const str_edit_album = '{'Edit album'|@translate|escape:javascript}'; +const str_add_photo = '{'Add Photos'|@translate|escape:javascript}'; +const str_visit_gallery = '{'Visit Gallery'|@translate|escape:javascript}'; +const str_sort_order = '{'Automatic sort order'|@translate|escape:javascript}'; +const str_delete_album = '{'Delete album'|@translate|escape:javascript}'; {/footer_script} {combine_script id='albums' load='footer' path='admin/themes/default/js/albums.js'} @@ -554,6 +561,14 @@ input[name="position"] { padding: 20px 10px; } +#catOptionsSmall .dropdown-option { + font-size: 10px; + font-weight: bold; +} +#catOptionsSmall .dropdown-option::before{ + margin: 0 6px 0 -2px; +} + @media (max-width: 1415px) { .badge-container .last-update { display: none; diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css index c1e6461fd..6e35234ae 100644 --- a/admin/themes/default/theme.css +++ b/admin/themes/default/theme.css @@ -687,12 +687,13 @@ LI.menuLi { #catOptionsSmall.dropdown::after { content: " "; position: absolute; - bottom: 100%; - left: 85%; + bottom: 15%; + left: 103%; margin-left: -5px; border-width: 5px; border-style: solid; - border-color: transparent transparent #ff7700 transparent; + border-color: transparent transparent #ffa33e transparent; + transform: rotate(90deg); } .dropdown-content { @@ -4986,8 +4987,8 @@ input:checked + .slider:before, input:checked + .slider::after { #catOptionsSmall{ display:none; position:absolute; - right: -10px; - top: 40px; + right: 80%; + bottom: 0%; } .is-default-token {