Use new sentence design as default

src/Controller/SentencesController.php

@@ -402,16 +402,17 @@ public function let_go($id)
     private function renderAdopt($id)
     {
         $acceptsJson = $this->request->accepts('application/json');
-        $sentence = $this->Sentences->get($id, [
-            'contain' => ['Users' => ['fields' => ['username']]]
-        ]);
 
         if ($acceptsJson) {
+            $sentence = $this->Sentences->getSentenceWith($id);
             $this->loadComponent('RequestHandler');
-            $this->set('user', $sentence->user);
-            $this->set('_serialize', ['user']);
+            $this->set('sentence', $sentence);
+            $this->set('_serialize', ['sentence']);
             $this->RequestHandler->renderAs($this, 'json');
         } else {
+            $sentence = $this->Sentences->get($id, [
+                'contain' => ['Users' => ['fields' => ['username']]]
+            ]);
             $this->set('sentenceId', $id);
             $this->set('owner', $sentence->user);
             $this->viewBuilder()->setLayout('ajax');
@@ -476,7 +477,7 @@ public function save_translation()
             $numberOfTranslations = $this->request->getQuery('numberOfTranslations');
             $includeTranslations = $translationLangFilter == 'und';
             $sentence = $this->Sentences->getSentenceWith($sentenceId, ['translations' => $includeTranslations]);
-            $sentence->extraTranslationsCount = $numberOfTranslations + 1 - SentencesTable::MAX_TRANSLATIONS_DISPLAYED;
+            $sentence->extraTranslationsCount = $numberOfTranslations + 1 - $sentence->max_visible_translations;
 
             $this->loadComponent('RequestHandler');
             $this->set('sentence', $sentence);

src/Controller/SentencesListsController.php

@@ -188,7 +188,7 @@ public function show($id = null, $translationsLang = null)
         $this->set('permissions', $list['Permissions']);
         $this->set('sentencesInList', $sentencesInList);
 
-        if (!CurrentUser::isMember() || CurrentUser::getSetting('use_new_design')) {
+        if (!CurrentUser::isMember() || !CurrentUser::getSetting('disable_new_design')) {
             $this->render('show_angular');
         }
     }

src/Model/Entity/Sentence.php

@@ -35,6 +35,7 @@ class Sentence extends Entity
         'is_favorite',
         'is_owned_by_current_user',
         'permissions',
+        'max_visible_translations',
         'current_user_review'
     ];
 
@@ -145,4 +146,13 @@ protected function _getCurrentUserReview()
         }
         return null;
     }
+
+    protected function _getMaxVisibleTranslations()
+    {
+        if (CurrentUser::isMember() && (int)CurrentUser::getSetting('max_visible_translations') > 0) {
+            return CurrentUser::getSetting('max_visible_translations');
+        }
+
+        return 5;
+    }
 }

src/Model/Entity/User.php

@@ -53,19 +53,22 @@ class User extends Entity
         'collapsible_translations' => false,
         'show_transcriptions' => false,
         'sentences_per_page' => 10,
+        'max_visible_translations' => 5,
         'users_collections_ratings' => false,
         'native_indicator' => false,
         'hide_random_sentence' => false,
         'use_new_design' => false,
+        'disable_new_design' => false,
         'default_license' => 'CC BY 2.0 FR',
         'can_switch_license' => false,
         'new_terms_of_use' => '1',
         'license_switch_list_id' => null,
-        'hide_new_design_announcement' => false,
+        'hide_new_design_announcement_2' => false,
     );
 
     private $settingsValidation = array(
         'sentences_per_page' => array(10, 20, 50, 100),
+        'max_visible_translations' => array(5, 10, 20, 50),
     );
 
     protected function _setPassword($password) {

src/Model/Table/SentencesTable.php

@@ -41,7 +41,6 @@ class SentencesTable extends Table
 {
     const MIN_CORRECTNESS = -1;
     const MAX_CORRECTNESS = 0;
-    const MAX_TRANSLATIONS_DISPLAYED = 5;
 
     protected function _initializeSchema(TableSchema $schema)
     {

src/Template/Activities/adopt_sentences.ctp

@@ -100,7 +100,7 @@ $this->set('title_for_layout', $this->Pages->formatTitle($title));
 
     $this->Pagination->display();
 
-    if (!CurrentUser::isMember() || CurrentUser::getSetting('use_new_design')) {
+    if (!CurrentUser::isMember() || !CurrentUser::getSetting('disable_new_design')) {
         foreach ($results as $sentence) {
             echo $this->element(
                 'sentences/sentence_and_translations',

src/Template/Activities/translate_sentences_of.ctp

@@ -63,7 +63,7 @@ $this->set('title_for_layout', $this->Pages->formatTitle($title));
     if ($results != null) {
         $this->Pagination->display();
 
-        if (!CurrentUser::isMember() || CurrentUser::getSetting('use_new_design')) {
+        if (!CurrentUser::isMember() || !CurrentUser::getSetting('disable_new_design')) {
             foreach ($results as $sentence) {
                 echo $this->element(
                     'sentences/sentence_and_translations',

src/Template/Element/sentences/expand_all_menus_button.ctp

@@ -1,7 +1,7 @@
 <?php 
 use App\Model\CurrentUser;
 
-if (CurrentUser::getSetting('use_new_design')) { ?>
+if (!CurrentUser::getSetting('disable_new_design')) { ?>
 <span toggle-all-menus ng-cloak>
     <md-button ng-if="!menu.expanded" class="md-icon-button" ng-click="menu.toggleAll()">
         <md-icon>unfold_more</md-icon>

src/Template/Element/sentences/sentence_and_translations.ctp

@@ -72,6 +72,12 @@ $sentenceUrl = $this->Url->build([
     'controller' => 'sentences',
     'action' => 'show'
 ]);
+
+if (CurrentUser::isMember()) {
+    $headerLayout = "{{vm.isMenuExpanded ? 'column' : 'row'}}";
+} else {
+    $headerLayout = "row";
+}
 ?>
 <div ng-cloak flex
      sentence-and-translations
@@ -82,8 +88,8 @@ $sentenceUrl = $this->Url->build([
         <div flex><?= $duplicateWarning ?></div>
     </div>
     <div layout="column">
-        <div layout="row" class="header">
-            <md-subheader flex class="ellipsis">
+        <div layout="<?= $headerLayout ?>" class="header">
+            <md-subheader flex class="ellipsis" flex-order="0">
                 <span ng-if="vm.sentence.user && vm.sentence.user.username">
                     <?php
                     echo format(

src/Template/Element/sentences/sentence_menu.ctp

@@ -1,4 +1,4 @@
-<div class="menu-wrapper" sentence-menu flex="{{vm.isMenuExpanded ? '100' : 'none'}}" 
+<div class="menu-wrapper" sentence-menu flex="{{vm.isMenuExpanded ? '100' : 'none'}}" flex-order="{{vm.isMenuExpanded ? -1 : 1}}"
      ng-init="vm.initMenu(<?= (int)$expanded ?>, vm.sentence.permissions)">
     <div class="menu" layout="row" layout-align="space-between center">
         <div>

src/Template/Pages/index.ctp

@@ -84,18 +84,16 @@ $moreCommentsUrl = $this->Url->build([
 
 <div id="main_content">
     <?php
-    if (!CurrentUser::getSetting('use_new_design') && !CurrentUser::getSetting('hide_new_design_announcement')) {
+    if (!CurrentUser::getSetting('use_new_design') && !CurrentUser::getSetting('hide_new_design_announcement_2')) {
         $this->Html->script('directives/info-banner.dir.js', ['block' => 'scriptBottom']); 
         ?>
-        <div info-banner ng-init="vm.init('hide_new_design_announcement')" ng-cloak>
+        <div info-banner ng-init="vm.init('hide_new_design_announcement_2')" ng-cloak>
             <div class="md-whiteframe-1dp" layout-padding style="background: #fafafa" ng-if="vm.isInfoBannerVisible">
                 <p><?= __(
-                    'The new sentence design will soon completely replace the old one. Please try it out and let us know if you experience any issue. '.
-                    'You can enable it with the option '.
-                    '"Display sentences with the new design" in your Settings.'
+                    'The new sentence design is now used by default. If you find any issue, please let us know on the Wall.'
                 ) ?></p>
                 <div layout="row" layout-align="end center">
-                    <md-button class="md-primary" href="/user/settings"><?= __('Go to settings') ?></md-button>
+                    <md-button class="md-primary" href="/wall/index"><?= __('Go to the Wall') ?></md-button>
                     <?php /* @translators: button to close the announcement about the new design (verb) */ ?>
                     <md-button class="md-primary" ng-click="vm.hideAnnouncement(true)"><?= __('Close') ?></md-button>
                 </div>

src/Template/Sentences/add.ctp

@@ -74,7 +74,7 @@ $vocabularyUrl = $this->Url->build(array(
 <div id="main_content">
 
     <?php
-    if (CurrentUser::getSetting('use_new_design')) {
+    if (!CurrentUser::getSetting('disable_new_design')) {
         echo $this->element('sentences/add_sentences_angular');
     } else {
         echo $this->element('sentences/add_sentences_jquery');

src/Template/Sentences/search.ctp

@@ -143,7 +143,7 @@ if (!isset($results)) {
 
     $this->Pagination->display();
 
-    if (!CurrentUser::isMember() || CurrentUser::getSetting('use_new_design')) {
+    if (!CurrentUser::isMember() || !CurrentUser::getSetting('disable_new_design')) {
         foreach ($results as $sentence) {
             echo $this->element(
                 'sentences/sentence_and_translations',

src/Template/Sentences/show.ctp

@@ -178,7 +178,7 @@ echo $this->element('/sentences/navigation', [
 
         <?php
         if (isset($sentence)) {
-            if (CurrentUser::isMember() && !CurrentUser::getSetting('use_new_design')) {
+            if (CurrentUser::isMember() && !!CurrentUser::getSetting('disable_new_design')) {
                 ?><div class="section md-whiteframe-1dp"><?php
                 $this->Sentences->displaySentencesGroup($sentence);
                 ?></div><?php

src/Template/Sentences/show_all_in.ctp

@@ -70,7 +70,7 @@ $this->set('title_for_layout', $this->Pages->formatTitle($title));
 
         $this->Pagination->display();
 
-        if (!CurrentUser::isMember() || CurrentUser::getSetting('use_new_design')) {
+        if (!CurrentUser::isMember() || !CurrentUser::getSetting('disable_new_design')) {
             foreach ($results as $sentence) {
                 echo $this->element(
                     'sentences/sentence_and_translations',

src/Template/Tags/show_sentences_with_tag.ctp

@@ -86,7 +86,7 @@ $tagsIndexUrl = $this->Url->build([
         <div class="sentencesList" id="sentencesList">
             <?php
             $useNewDesign = !CurrentUser::isMember()
-                || CurrentUser::getSetting('use_new_design');
+                || !CurrentUser::getSetting('disable_new_design');
             if ($useNewDesign) {
                 foreach ($allSentences as $item) {
                     $sentence = $item->sentence;

src/Template/User/settings.ctp

@@ -124,7 +124,7 @@ $this->set('title_for_layout', $this->Pages->formatTitle(__('Settings')));
                 </div>
             </md-list-item>
 
-            <md-list-item>
+            <md-list-item ng-show="disableNewDesign">
                 <?php $collapsibleTranslations = $userSettings->settings['collapsible_translations']; ?>
                 <md-checkbox
                     ng-false-value="0"
@@ -197,6 +197,30 @@ $this->set('title_for_layout', $this->Pages->formatTitle(__('Settings')));
                 </div>
             </md-list-item>
 
+            <md-list-item>
+                <?php $disableNewDesign = $userSettings->settings['disable_new_design']; ?>
+                <md-checkbox
+                    ng-false-value="1"
+                    ng-true-value="0"
+                    ng-model="disableNewDesign"
+                    ng-init="disableNewDesign = <?= (int)$disableNewDesign ?>"
+                    class="md-primary">
+                </md-checkbox>
+                <p><?php echo __(
+                    'Display sentences with the new design'
+                ) ?></p>
+                <div ng-hide="true">
+                <?php
+                echo $this->Form->input(
+                    'settings.disable_new_design',
+                    array(
+                        'value' => '{{disableNewDesign}}'
+                    )
+                );
+                ?>
+                </div>
+            </md-list-item>
+
             <md-list-item>
                 <?php
                 $sentencesByLanguageURL = $this->Url->build(
@@ -235,6 +259,15 @@ $this->set('title_for_layout', $this->Pages->formatTitle(__('Settings')));
                     'label' => ''
                 )); ?>
             </md-list-item>
+
+            <md-list-item ng-show="!disableNewDesign">
+                <p><?= __('Number of translations visible by default'); ?></p>
+                <?php echo $this->Form->input('settings.max_visible_translations', [
+                    'options' => [5 => 5, 10 => 10, 20 => 20, 50 => 50],
+                    'label' => ''
+                ]); ?>
+            </md-list-item>
+
             <?php if ($userSettings->settings['can_switch_license']) : ?>
                 <md-list-item>
                     <p><?= __('Default license for original sentences'); ?></p>
@@ -311,30 +344,6 @@ $this->set('title_for_layout', $this->Pages->formatTitle(__('Settings')));
                 ?>
                 </div>
             </md-list-item>
-            <md-list-item>
-                <?php $useNewDesign = $userSettings->settings['use_new_design']; ?>
-                <md-checkbox
-                    ng-false-value="0"
-                    ng-true-value="1"
-                    ng-model="useNewDesign"
-                    ng-init="useNewDesign = <?= $useNewDesign ?>"
-                    class="md-primary">
-                </md-checkbox>
-                <p><?php echo __(
-                    'Display sentences with the new design. '.
-                    'Note that some features are not yet implemented in this new design but are coming soon.'
-                ) ?></p>
-                <div ng-hide="true">
-                <?php
-                echo $this->Form->input(
-                    'settings.use_new_design',
-                    array(
-                        'value' => '{{useNewDesign}}'
-                    )
-                );
-                ?>
-                </div>
-            </md-list-item>
         </md-list>
         <br>
 

src/View/Helper/SentencesHelper.php

@@ -881,7 +881,7 @@ private function getNumberOfExtraTranslations($sentence)
     {
         $translations = $sentence->translations;
         $total = count($translations[0]) + count($translations[1]);
-        return $total - SentencesTable::MAX_TRANSLATIONS_DISPLAYED;
+        return $total - $sentence->max_visible_translations;
     }
 }
 ?>

webroot/css/layouts/elements.css

@@ -1303,6 +1303,7 @@ div.hideLink {
  */
 .sentence-and-translations {
     background-color: #fff;
+    padding-bottom: 5px;
 }
 
 .sentence-and-translations .header {
@@ -1332,7 +1333,7 @@ div.hideLink {
 }
 
 .sentence-and-translations .translation {
-    padding: 2px 10px;
+    padding: 0px 10px;
 }
 
 .sentence-and-translations .md-subheader {

webroot/js/directives/sentence-and-translations.dir.js

@@ -89,7 +89,6 @@
 
     SentenceAndTranslationsController.$inject = ['$rootScope', '$scope', '$http', '$cookies', '$timeout', '$injector'];
     function SentenceAndTranslationsController($rootScope, $scope, $http, $cookies, $timeout, $injector) {
-        const MAX_TRANSLATIONS = 5;
         const rootUrl = get_tatoeba_root_url();
 
         var vm = this;
@@ -232,7 +231,7 @@
             if (!listsDataService) {
                 listsDataService = $injector.get('listsDataService');
             }
-            var selectableLists = listsDataService.getLists();
+            var selectableLists = angular.copy(listsDataService.getLists());
 
             if (selectableLists) {
                 if (selectedLists) {
@@ -279,10 +278,10 @@
 
         function showFewerTranslations() {
             vm.directTranslations = allDirectTranslations.filter(function(item, index) {
-                return index <= MAX_TRANSLATIONS - 1;
+                return index <= vm.sentence.max_visible_translations - 1;
             });
             vm.indirectTranslations = allIndirectTranslations.filter(function(item, index) {
-                return index + allDirectTranslations.length <= MAX_TRANSLATIONS - 1;
+                return index + allDirectTranslations.length <= vm.sentence.max_visible_translations - 1;
             });
         }
 
@@ -456,8 +455,10 @@
             var action = vm.sentence.is_owned_by_current_user ? 'let_go' : 'adopt';
             vm.iconsInProgress.adopt = true;
             $http.get(rootUrl + '/sentences/' + action + '/' + vm.sentence.id).then(function(result) {
-                vm.sentence.user = result.data.user;
-                vm.sentence.is_owned_by_current_user = vm.sentence.user && vm.sentence.user.username;
+                var sentence = result.data.sentence;
+                sentence.expandLabel = vm.sentence.expandLabel;
+                initSentence(sentence);
+                initMenu(!vm.isExpanded, sentence.permissions);
                 vm.iconsInProgress.adopt = false;
             });
         }