Issue #2033 Redesign open in gallery buttons

admin/themes/default/js/picture_modify.js

@@ -60,6 +60,7 @@ function fill_results(cats) {
 
 function remove_related_category(cat_id) {
   $(".invisible-related-categories-select option[value="+ cat_id +"]").remove();
+  $(".invisible-related-categories-select").trigger('change');
   $("#" + cat_id).parent().remove();
 
   cat_to_remove_index = related_categories_ids.indexOf(cat_id);
@@ -80,7 +81,7 @@ function add_related_category(cat_id, cat_link_path) {
 
     $(".search-result-item #" + cat_id).addClass("notClickable");
     related_categories_ids.push(cat_id);
-    $(".invisible-related-categories-select").append("<option selected value="+ cat_id +"></option>");
+    $(".invisible-related-categories-select").append("<option selected value="+ cat_id +"></option>").trigger('change');
 
     $("#"+ cat_id).on("click", function () {
       remove_related_category($(this).attr("id"))

admin/themes/default/template/cat_modify.tpl

@@ -48,9 +48,6 @@ str_root = '{'Root'|@translate}';
     </div>
 
     <div class="cat-modify-actions">
-      {if cat_admin_access($CAT_ID)}
-        <a class="icon-eye tiptip" href="{$U_JUMPTO}" title="{'Open in gallery'|@translate}"></a>
-      {/if}
 
       {if isset($U_MANAGE_ELEMENTS) }
         <a class="icon-picture tiptip" href="{$U_MANAGE_ELEMENTS}" title="{'Manage album photos'|@translate}"></a>
@@ -183,10 +180,19 @@ str_root = '{'Root'|@translate}';
   </div>
 
   <div class="cat-modify-footer">
+   <div class="cat-modify-footer-start">
+    {if cat_admin_access($CAT_ID)}
+      <a class="cat-modify-footer-see-out" href="{$U_JUMPTO}"><i class="icon-left-open"></i>{'Open in gallery'|translate}</a>
+    {else}
+    <a class="tiptip cat-modify-footer-see-out disabled" title="{'ACCESS_5'|translate}" href="#"><i class="icon-left-open"></i>{'Open in gallery'|translate}</a>
+    {/if}
+   </div>
+   <div class="cat-modify-footer-end">
     <div class="info-message icon-ok">{'Album updated'|@translate}</div>
     <div class="info-error icon-cancel">{'An error has occured while saving album settings'|@translate}</div>
     <span class="buttonLike" id="cat-properties-save"><i class="icon-floppy"></i> {'Save Settings'|@translate}</span>
-    </div>
+   </div>
+  </div>
 </div>
 
 <style>

admin/themes/default/template/picture_modify.tpl

@@ -90,6 +90,23 @@ $('#action-delete-picture').on('click', function() {
 {/literal}
 
 }());
+{literal}
+  // Unsaved settings message before leave this page
+  $(document).ready(function() {
+    let form_unsaved = false;
+    $('#pictureModify').find(':input').on('change', function() {
+      form_unsaved = true;
+    });
+    $(window).on('beforeunload', function() {
+      if (form_unsaved) {
+        return 'Somes changes are not registered';
+      }
+    });
+    $('#pictureModify').on('submit', function() {
+      form_unsaved = false;
+    });
+  });
+{/literal}
 {/footer_script}
 
 {combine_script id='picture_modify' load='footer' path='admin/themes/default/js/picture_modify.js'}
@@ -102,11 +119,7 @@ $('#action-delete-picture').on('click', function() {
   <div id='picture-preview'>
 {/if}
     <div class='picture-preview-actions'>
-      {if isset($U_JUMPTO)}
-        <a class="icon-eye" href="{$U_JUMPTO}" title="{'Open in gallery'|@translate}"></a>
-      {else}
-        <a class="icon-eye unavailable" title="{'You don\'t have access to this photo'|translate}"></a>
-      {/if}
+      <a class="preview-box icon-zoom-square" href="{$FILE_SRC}" title="{'Zoom'|translate}"></a>
       <a class="icon-download" href="{$U_DOWNLOAD}" title="{'Download'|translate}"></a>
       <a class="icon-signal" href="{$U_HISTORY}" title="{'Visit history'|translate}"></a>
       {if !url_is_remote($PATH)}
@@ -114,7 +127,13 @@ $('#action-delete-picture').on('click', function() {
       <a class="icon-trash" title="{'delete photo'|@translate}" id='action-delete-picture'></a>
       {/if}
     </div>
-    <a href="{$FILE_SRC}" class="preview-box icon-zoom-in" title="{$TITLE|htmlspecialchars}" >
+    {if isset($U_JUMPTO)}
+      <a class="see-out" href="{$U_JUMPTO}" >
+      <p><i class="icon-left-open"></i>{'Open in gallery'|@translate}</p>
+    {else}
+      <a class="see-out disabled" href="#" >
+      <p class="tiptip" title="{'You don\'t have access to this photo'|translate}" ><i class="icon-left-open"></i>{'Open in gallery'|translate}</p>
+    {/if}
       {if $INTRO.is_svg}
       <img src="{$PATH}" alt="{'Thumbnail'|translate}" class="svg-image" style="{if $FORMAT}width:100%; max-height:100%;{else}max-width:100%; height:100%;{/if}">
       {else}

admin/themes/default/theme.css

@@ -631,7 +631,7 @@ LI.menuLi {
 }
 
 .cat-modify-representative-actions a{
-  color: white;
+  color: #3C3C3C;
   transform: translateY(5px);
   transition: 0.3s ease-in-out;
   margin-bottom: 10px;
@@ -707,8 +707,7 @@ LI.menuLi {
 
 .cat-modify-footer {
   display: flex;
-  align-items: end;
-  justify-content: end;
+  justify-content: space-between;
   border-top: 1px solid #ececec;
   padding: 12px;
   position: fixed;
@@ -718,6 +717,45 @@ LI.menuLi {
   background: white;
   }
 
+.cat-modify-footer-see-out {
+  display: flex;
+  background-color: #ECECEC;
+  color: #3C3C3C;
+  padding: 9px 10px;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+.cat-modify-footer-see-out:hover {
+  background-color: #F29F4B;
+  color: #3C3C3C;
+  text-decoration: none;
+}
+
+.cat-modify-footer-see-out:focus {
+  border: 2px solid #F4AB4F;
+  background: #ECECEC;
+}
+
+.cat-modify-footer-start {
+  margin-left: 230px;
+}
+
+.cat-modify-footer-end {
+  display: flex;
+}
+
+.cat-modify-footer-see-out.disabled{
+  background-color: #ECECEC;
+  color: #B8B8B8;
+  cursor: not-allowed;
+}
+.cat-modify-footer-see-out.disabled:focus {
+  border: none;
+
+}
 .cat-delete-modes {
   display: flex;
   flex-direction: column;
@@ -5825,6 +5863,69 @@ a.group_users {
 .preview-box.icon-zoom-in:hover img {
   opacity:0.5;
 }
+/* See in the gallery - Photo page */
+.see-out{
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.see-out::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  background: rgba(0, 0, 0, 0);
+  transition: background 0.3s ease-in-out;
+}
+.see-out:hover::after {
+  background: rgba(0, 0, 0, 0.301);
+}
+.see-out p{
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 100;
+  margin: unset;
+  transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
+  -webkit-transition: opacity 0.2s ease-in-out, transform 0.3s ease-in-out;
+  background-color: #ffa744;
+  color: #3C3C3C;
+  padding: 8px 10px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+.see-out p:hover {
+  background-color: #f70;
+}
+.see-out:hover p{
+  opacity: 1;
+  transform: translate(-50%, -60%);
+  -webkit-transform: translate(-50%, -60%);
+}
+.see-out p i {
+  font-size: 12px;
+  line-height: 12px;
+  vertical-align: 1px;
+}
+.see-out p i::before{
+  margin: unset;
+  margin-right: 4px;
+}
+.see-out.disabled {
+  cursor: not-allowed;
+}
+.see-out.disabled p {
+  background-color: #ECECEC;
+  color: #B8B8B8;
+}
+
 
 /* Edit user popin*/
 

admin/themes/roma/theme.css

@@ -1949,4 +1949,14 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
 
 .cat-modify-ariane a.icon-sitemap::after {
   background-color: #111111;
+}
+
+.cat-modify-footer-see-out.disabled {
+  background: #5d5d5d !important;
+  color: #373737 !important;
+}
+
+.see-out.disabled p {
+  background-color: #5d5d5d !important;;
+  color: #373737 !important;
 }