Integrate edit translations view

admin-dev/themes/default/sass/controllers/_translations.sass

@@ -1,4 +1,4 @@
-#translations_form 
+#translations_form
 	.translations-email-panel
 		padding: 8px 12px
 		@include margin(0, 0, 8px, 20px)
@@ -28,4 +28,4 @@
 				border: solid 2px $brand-danger
 				background-color: transparent
 		.panel-footer
-			margin: 0 -15px
+			margin: 0 -15px

admin-dev/themes/new-theme/js/translation-page/index.js

@@ -2,11 +2,12 @@ import $ from 'jquery';
 import initMessagesVisibilityToggling from './messages-visibility'
 import initMessagesEdition from './messages-edition'
 import initMessagesPagination from './messages-pagination'
+import initMessagesTree from './messages-tree'
 import initSearch from './messages-search'
 
 $(() => {
-  initMessagesVisibilityToggling();
+  initMessagesVisibilityToggling(initMessagesPagination);
   var search = initSearch();
   initMessagesEdition(search);
-  initMessagesPagination();
+  initMessagesTree()
 });

admin-dev/themes/new-theme/js/translation-page/messages-edition.js

@@ -13,6 +13,8 @@ export default function (search) {
 
   let showFlashMessageOnEdit = (form) => {
     $(form).submit((event) => {
+      event.preventDefault();
+
       let $editTranslationForm = $(event.target);
       let url = $editTranslationForm.attr('action');
 
@@ -41,13 +43,11 @@ export default function (search) {
         }, 4000);
       });
 
-      event.preventDefault();
-
       return false;
     })
   };
 
-  $('.search-translation form, .translation-domain form').each((formIndex, form) => {
+  $('#jetsContent form, .translation-domain form').each((formIndex, form) => {
     showFlashMessageOnEdit(form);
   });
 }

admin-dev/themes/new-theme/js/translation-page/messages-pagination.js

@@ -13,7 +13,12 @@ export default function () {
         let pageIndex;
         let pageLink;
         let pageLinkAnchor;
-        let totalPages = $(nav).parent().find('.page').length;
+        let totalPages = $(nav).parents('.translation-domains').find('.page').length;
+
+        if (totalPages > 10) {
+          $(nav).parent().addClass('relative-position');
+        }
+
         let i;
         for (i = 1; i < totalPages; i++) {
             pageIndex = i + 1;
@@ -26,19 +31,12 @@ export default function () {
         }
     };
 
-    let pushStateToHistory = (url) => {
-        if (!!(history && history.pushState)) {
-            history.pushState({}, document.title, url);
-        }
-    };
-
     // Fix internal navigation to anchors
     // by adding offset of fixed header height
     // @See also http://stackoverflow.com/a/13067009/282073
     let scrollToPreviousPaginationBar = (paginationBar, link) => {
         let paginationBarTop = paginationBar.getBoundingClientRect().top;
         window.scrollTo(window.pageXOffset, window.pageYOffset + paginationBarTop - fixedOffset);
-        pushStateToHistory(location.pathname + $(link).attr('href'));
     };
 
     $('.translation-domain .go-to-pagination-bar').click((event) => {
@@ -48,7 +46,7 @@ export default function () {
         return false;
     });
 
-    $('.translation-domain nav').each((navIndex, nav) => {
+    $('.translation-domains nav').each((navIndex, nav) => {
         addPageLinksToNavigationBar(nav);
 
         let hideActivePageInDomain = (domain) => {
@@ -70,7 +68,7 @@ export default function () {
 
         $(nav).find('.page-item').click((event) => {
             let pageLink = $(event.target);
-            let domain = pageLink.parents('.translation-domain');
+            let domain = pageLink.parents('.translation-domains').find('.translation-forms');
             let pageItem = pageLink.parent();
             let pageIndex = pageItem.data('page-index');
 
@@ -83,4 +81,4 @@ export default function () {
             return false;
         });
     });
-}
+}

admin-dev/themes/new-theme/js/translation-page/messages-search.js

@@ -5,6 +5,8 @@ export default function () {
   $(() => {
     const searchSelector = '.search-translation';
     $(searchSelector + ' form').submit(function (event) {
+      event.preventDefault();
+
       $('#jetsContent form').addClass('hide');
 
       const keywords = $('#jetsSearch').val().toLowerCase();
@@ -20,14 +22,16 @@ export default function () {
         $(jetsSelector).removeClass('hide');
       }
 
-      event.preventDefault();
-
       return false;
     });
 
-    $(searchSelector + ' input[type=reset]').click(function () {
+    $(searchSelector + ' input[type=reset]').click(function (event) {
+      event.preventDefault();
+
       $('#jetsSearch').val('');
       $('#jetsContent form').addClass('hide');
+
+      return false;
     })
   });
 

admin-dev/themes/new-theme/js/translation-page/messages-tree.js

@@ -0,0 +1,116 @@
+import $ from 'jquery';
+
+export default function () {
+  function updateVisibilityIcons(domainActions) {
+    let visibilityOffIcon = domainActions.find('.visibility-off');
+    let visibilityOnIcon = domainActions.find('.visibility-on');
+    let showMessagesButton = domainActions.find('.btn-show-messages');
+    let hideMessagesButton = domainActions.find('.btn-hide-messages');
+    let expandedMessages = visibilityOffIcon.hasClass('hide');
+    if (expandedMessages) {
+      visibilityOffIcon.removeClass('hide');
+      visibilityOnIcon.addClass('hide');
+      showMessagesButton.addClass('hide');
+      hideMessagesButton.removeClass('hide');
+    } else {
+      visibilityOnIcon.removeClass('hide');
+      visibilityOffIcon.addClass('hide');
+      showMessagesButton.removeClass('hide');
+      hideMessagesButton.addClass('hide');
+    }
+  }
+
+  function updateMissingTranslationsWarning(domainActions) {
+    let subdomain = domainActions.next();
+    let missingTranslations = subdomain.find('[data-missing-translations]');
+    let totalMissingTranslations = 0;
+
+    $(missingTranslations).each(function (index, element) {
+      totalMissingTranslations = totalMissingTranslations + parseInt($(element).attr('data-missing-translations'), 10);
+    });
+
+    if (totalMissingTranslations > 0) {
+      let missingTranslationsWarning = domainActions.find('.missing-translations');
+      let warningMessage = missingTranslationsWarning .text();
+      warningMessage = warningMessage.replace('%d', totalMissingTranslations);
+      missingTranslationsWarning.text(warningMessage);
+      missingTranslationsWarning.removeClass('hide');
+    }
+
+    return totalMissingTranslations;
+  }
+
+  let allDomainsMissingTranslations = 0;
+
+  $('.domain-first-part').each((index, domainToggler) => {
+    let domainActions = $(domainToggler).next();
+    allDomainsMissingTranslations = allDomainsMissingTranslations + updateMissingTranslationsWarning(domainActions);
+
+    $(domainToggler).click((event) => {
+      let domainTitle;
+
+      if ($(event.target).hasClass('domain-first-part')) {
+        domainTitle = $(event.target);
+      } else {
+        domainTitle = $(event.target).parent();
+      }
+
+      domainTitle.find('i').toggleClass('expanded');
+      $(domainTitle.nextAll().filter('.subdomains')[0]).toggleClass('hide');
+
+      updateVisibilityIcons(domainActions);
+
+      event.stopPropagation();
+
+      return false;
+    });
+  });
+
+  let totalTranslations = $('#jetsContent form').length;
+  (function (totalTranslations, totalRemainingTranslations) {
+    let totalTranslationsTemplate = $('.summary .total-translations').attr('data-template') ;
+    let remainingTranslationsTemplate = $('.summary .total-remaining-translations').attr('data-template') ;
+
+    if (totalRemainingTranslations > 0) {
+      let remainingTranslationsMessage = remainingTranslationsTemplate.replace('%d', totalRemainingTranslations);
+      $('.total-remaining-translations').text(remainingTranslationsMessage);
+      $('.summary .separator').removeClass('hide');
+    }
+
+    let totalTranslationsMessages = totalTranslationsTemplate.replace('%d', totalTranslations);
+    $('.summary .total-translations').text(totalTranslationsMessages);
+  })(totalTranslations, allDomainsMissingTranslations);
+
+  $('.domain-actions').click((event) => {
+    let domainActions = $(event.target);
+    if (!$(event.target).hasClass('domain-actions')) {
+      domainActions = $(event.target).parent();
+    }
+
+    let domainFirstPart = domainActions.prev();
+    domainFirstPart.click();
+  });
+
+  $('.btn-expand').click(() => {
+    $('.domain-first-part').each((index, domainToggler) => {
+      let domainTitle = $(domainToggler);
+      let isDomainExpanded = domainTitle.find('i').hasClass('expanded');
+      if (!isDomainExpanded) {
+        $(domainTitle.find('i')).click();
+      }
+    });
+  });
+
+  $('.btn-reduce').click(() => {
+    $('.domain-first-part').each((index, domainToggler) => {
+      let domainTitle = $(domainToggler);
+      let isDomainExpanded = domainTitle.find('i').hasClass('expanded');
+      if (isDomainExpanded) {
+        $(domainTitle.find('i')).click();
+      }
+    });
+  });
+
+  $($('.domain-first-part')[0]).click(); // Expand first domain in tree
+  $($('.domain-part .delegate-toggle-messages')[0]).click(); // Show messages of first domain
+}