From b6c8af9af0547d50d0c93efdfd31e52c17c62014 Mon Sep 17 00:00:00 2001
From: Yuriy Bakhtin <yurybakh@gmail.com>
Date: Thu, 19 Sep 2024 11:04:34 +0200
Subject: [PATCH] Improve styles of the translation table form

---
 resources/css/translation.css      | 116 +++++++++++++++++++----------
 resources/js/humhub.translation.js |  24 +-----
 widgets/views/translationForm.php  |  79 ++++++++------------
 3 files changed, 111 insertions(+), 108 deletions(-)

diff --git a/resources/css/translation.css b/resources/css/translation.css
index aff4a11..63a2bf8 100644
--- a/resources/css/translation.css
+++ b/resources/css/translation.css
@@ -1,16 +1,53 @@
+#words {
+    display: flex;
+    flex-direction: column;
+}
+#words .item {
+    display: flex;
+    align-items: stretch;
+}
 #words .elem {
     width: 50%;
-    max-width: 50%;
-    padding: 10px 20px;
+    padding: 10px 0;
     float: left;
-    position: relative;
+    display: flex;
+    align-items: center;
+}
+#words .elem:first-child {
+    padding-right: 10px;
+}
+#words .elem > div:first-child {
+    flex-grow: 1;
+    height: 100%;
+}
+#words .elem > div:last-child {
+    white-space: nowrap;
+}
+#words .elem .btn i {
+    margin: 0;
+}
+#words .elem .btn span {
+    display: none;
+}
+#words .elem .btn {
+    float: left;
+    margin-left: 10px;
+    padding: 8px 12px;
+}
+#words textarea {
+    height: 100%;
+}
+#words textarea::-webkit-input-placeholder {
+    color: var(--success) !important;
+}
+#words textarea::-moz-placeholder { /* Firefox 19+ */
+    color: var(--success) !important;
 }
-
 
 #translation-editor .pre {
     display: block;
     padding: 9.5px;
-    margin: 0 0 10px;
+    margin: 0;
     font-size: 13px;
     line-height: 1.42857143;
     color: #333;
@@ -21,25 +58,6 @@
     border-radius: 4px;
     min-height: 56px;
 }
-.translation-copy-original-button, .translation-copy-parent-button {
-    position: absolute;
-    top: 10px;
-    right: 20px;
-    padding: 0 3px;
-    background: none !important;
-    box-shadow: none !important;
-    opacity: 0.8;
-}
-.translation-copy-parent-button {
-    top: 32px;
-}
-
-.translation-history-button {
-    position: absolute;
-    right: 25px;
-    top: 15px;
-    opacity: 0.5;
-}
 
 .translation-wallentry-content .detail-view th,
 #translation-history .detail-view th{
@@ -76,25 +94,45 @@
     width: 310px;
 }
 
-
 @media screen and (max-width: 768px) {
+    #words > div:first-child {
+        display: none;
+    }
+    #words .item {
+        flex-direction: column;
+        padding-bottom: 20px;
+    }
     #words .elem {
-        width: 50%;
-        max-width: 50%;
-        padding: 5px 10px;
-        float: left;;
+        width: 100%;
+        flex-direction: column;
+        padding-bottom: 0;
     }
-
-    .translation-history-button {
-        top: 10px;
-        right: 15px;
+    #words .elem:first-child {
+        padding-right: 0;
+    }
+    #words .elem > div {
+        width: 100%;
+    }
+    #words .elem > div:first-child {
+        margin-bottom: 10px;
+    }
+    #words .elem > div:last-child {
+        display: flex;
+    }
+    #words .elem .btn {
+        width: 100%;
+        margin-left: 0;
+    }
+    #words .elem .btn:last-child:not(:first-child) {
+        margin-left: 10px;
+    }
+    #words .elem .btn i {
+        margin-right: 4px;
     }
-    .translation-copy-original-button {
-        top: 6px;
-        right: 10px;
+    #words .elem .btn i.fa-arrow-right {
+        transform: rotate(90deg);
     }
-    .translation-copy-parent-button {
-        top: 26px;
-        right: 10px;
+    #words .elem .btn span {
+        display: inline;
     }
 }
diff --git a/resources/js/humhub.translation.js b/resources/js/humhub.translation.js
index 2275b92..fae38dc 100644
--- a/resources/js/humhub.translation.js
+++ b/resources/js/humhub.translation.js
@@ -90,31 +90,13 @@ humhub.module('translation', function(module, require, $) {
         });
     };
 
-    Form.prototype.copyAllOriginals = function () {
-        this.$.find('#words > .row').each(function () {
-            const input = $(this).find('textarea');
-            if (input.val() === '') {
-                input.val($(this).find('.elem .pre').text());
-            }
-        });
-    }
-
-    Form.prototype.copyAllParents = function () {
-        this.$.find('#words textarea').each(function () {
-            const input = $(this);
-            if (input.val() === '') {
-                input.val(input.attr('placeholder'));
-            }
-        });
-    }
-
     Form.prototype.copyOriginal = function (evt) {
-        evt.$trigger.closest('.row').find('textarea')
-            .val(evt.$trigger.prev().text());
+        evt.$trigger.closest('.item').find('textarea')
+            .val(evt.$trigger.closest('.elem').find('.pre').text());
     }
 
     Form.prototype.copyParent = function (evt) {
-        const input = evt.$trigger.parent().find('textarea');
+        const input = evt.$trigger.closest('.elem').find('textarea');
         input.val(input.attr('placeholder'));
     }
 
diff --git a/widgets/views/translationForm.php b/widgets/views/translationForm.php
index d3dff65..1dcb29f 100644
--- a/widgets/views/translationForm.php
+++ b/widgets/views/translationForm.php
@@ -93,24 +93,7 @@
                 </p>
 
                 <p class="clearfix" style="margin-bottom:0">
-                    <?= $saveButton = Button::save()->submit()->right() ?>
-
-                    <?= $copyButton = Button::defaultType('Copy original messages')
-                        ->icon('copy')
-                        ->action('copyAllOriginals')
-                        ->loader(false)
-                        ->tooltip(Yii::t('TranslationModule.base', 'Fill empty translations with original message'))
-                        ->style('margin-right:10px')
-                        ->right() ?>
-
-                    <?= $parentButton = $hasParentLanguage ?
-                        Button::defaultType('Use parent language translations')
-                        ->icon('clipboard')
-                        ->action('copyAllParents')
-                        ->loader(false)
-                        ->tooltip(Yii::t('TranslationModule.base', 'Fill empty translations with parent language message'))
-                        ->style('margin-right:10px')
-                        ->right() : '' ?>
+                    <?= Button::save()->submit()->right() ?>
                 </p>
 
                 <hr style="margin-top:0">
@@ -122,41 +105,43 @@
                     </div>
 
                     <?php foreach ($model->messages as $original => $translated) : ?>
-                        <div class="row ">
+                        <div class="item">
                             <div class="elem">
                                 <div class="pre"><?= Html::encode($original) ?></div>
-                                <?= Button::defaultType()
-                                    ->icon('arrow-right')
-                                    ->action('copyOriginal')
-                                    ->loader(false)
-                                    ->cssClass('translation-copy-original-button')
-                                    ->xs()
-                                ?>
+                                <div>
+                                    <?= Button::defaultType('<span>' . Yii::t('TranslationModule.base', 'Adopt original language') . '</span>')
+                                        ->icon('arrow-right')
+                                        ->action('copyOriginal')
+                                        ->tooltip(Yii::t('TranslationModule.base', 'Adopt original language'))
+                                        ->loader(false) ?>
+                                </div>
                             </div>
-                            <div class="form-group elem <?= $model->getTranslationFieldClass($original)?>" style="position:relative">
-                                <?= Html::textArea(TranslationLog::tid($original), $translated, [
-                                    'class' => 'form-control translation ' . (empty($translated) ? 'empty' : 'translated'),
-                                    'placeholder' => $model->parentMessages[$original] ?? '',
-                                ]) ?>
-
-                                <?php if(!empty($model->getHelpBlockMessage($original))) : ?>
-                                    <p class="help-block"><?= Html::encode($model->getHelpBlockMessage($original)) ?></p>
-                                <?php endif; ?>
-
-                                <?= Button::asLink(null, Url::toHistory($model, $original))
+                            <div class="elem <?= $model->getTranslationFieldClass($original) ?>">
+                                <div>
+                                    <?= Html::textArea(TranslationLog::tid($original), $translated, [
+                                        'class' => 'form-control translation ' . (empty($translated) ? 'empty' : 'translated'),
+                                        'placeholder' => $model->parentMessages[$original] ?? '',
+                                    ]) ?>
+
+                                    <?php if(!empty($model->getHelpBlockMessage($original))) : ?>
+                                        <p class="help-block"><?= Html::encode($model->getHelpBlockMessage($original)) ?></p>
+                                    <?php endif; ?>
+                                </div>
+                                <div>
+                                <?= Button::defaultType('<span>' . Yii::t('TranslationModule.base', 'View history') . '</span>')
+                                    ->link(Url::toHistory($model, $original))
                                     ->icon('history')
-                                    ->title(Yii::t('TranslationModule.base', 'View history'))
-                                    ->cssClass('translation-history-button tt') ?>
+                                    ->tooltip(Yii::t('TranslationModule.base', 'View translation history'))
+                                    ->loader(false) ?>
 
                                 <?= $hasParentLanguage ?
-                                    Button::defaultType()
-                                    ->icon('clipboard')
+                                    Button::success('<span>' . Yii::t('TranslationModule.base', 'Confirm translation') . '</span>')
+                                    ->icon('check')
                                     ->action('copyParent')
-                                    ->loader(false)
-                                    ->cssClass('translation-copy-parent-button')
-                                    ->xs() : '' ?>
+                                        ->tooltip(Yii::t('TranslationModule.base', 'Confirm translation'))
+                                    ->loader(false) : '' ?>
+                                </div>
                             </div>
-
                         </div>
                     <?php endforeach; ?>
 
@@ -164,9 +149,7 @@
                 <hr>
 
                 <p class="clearfix">
-                    <?= $saveButton ?>
-                    <?= $copyButton ?>
-                    <?= $parentButton ?>
+                    <?= Button::save()->submit()->right() ?>
                 </p>
             <?php endif; ?>
         </div>