Skip to content

Commit

Permalink
Improve styles of the translation table form
Browse files Browse the repository at this point in the history
  • Loading branch information
@yurabakhtin
yurabakhtin committed Sep 19, 2024
1 parent f56ed8e commit b6c8af9
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 108 deletions.
116 changes: 77 additions & 39 deletions resources/css/translation.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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{
Expand Down Expand Up @@ -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;
}
}
24 changes: 3 additions & 21 deletions resources/js/humhub.translation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
}

Expand Down
79 changes: 31 additions & 48 deletions widgets/views/translationForm.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -122,51 +105,51 @@
</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; ?>

</div>
<hr>

<p class="clearfix">
<?= $saveButton ?>
<?= $copyButton ?>
<?= $parentButton ?>
<?= Button::save()->submit()->right() ?>
</p>
<?php endif; ?>
</div>
Expand Down

0 comments on commit b6c8af9

Please sign in to comment.