Design der Formulare inkonsistent

Closes #5091

Merge request studip/studip!3828

9 files changed, 27 insertions, 12 deletions

diff --git a/resources/assets/javascripts/lib/i18n.js b/resources/assets/javascripts/lib/i18n.js
index 694716f..0ee07e9 100644
--- a/resources/assets/javascripts/lib/i18n.js
+++ b/resources/assets/javascripts/lib/i18n.js
@@ -1,9 +1,11 @@
 const i18n = {
     init: function(root) {
         $('.i18n_group', root).each(function() {
-            var languages = $(this).children('.i18n'),
-                select = $('<select tabindex="-1">')
-                    .addClass('i18n')
+            let languages = $(this).children('.i18n');
+            const isInput = $(this).find('input').length > 0;
+            const selectClasses = isInput ? 'i18n i18n-input' : 'i18n i18n-textarea';
+            let select = $('<select tabindex="0">')
+                    .addClass(selectClasses)
                     .css(
                         'background-image',
                         $(languages)
@@ -11,8 +13,8 @@ const i18n = {
                             .data('icon')
                     );
             select.change(function() {
-                var opt = $(this).find('option:selected'),
-                    index = opt.index();
+                let opt = $(this).find('option:selected');
+                let index = opt.index();
                 languages.not(':eq(' + index + ')').hide();
                 languages
                     .eq(index)
@@ -30,7 +32,7 @@ const i18n = {
             languages.not(':eq(0)').hide();
 
             $('div.i18n input[required], div.i18n textarea[required]', this).on('invalid', function() {
-                var element = $(this).closest('.i18n');
+                let element = $(this).closest('.i18n');
                 element
                     .siblings('select')
                     .val($(element).data('lang'))
diff --git a/resources/assets/stylesheets/scss/actionmenu.scss b/resources/assets/stylesheets/scss/actionmenu.scss
index 24239e9..84183b9 100644
--- a/resources/assets/stylesheets/scss/actionmenu.scss
+++ b/resources/assets/stylesheets/scss/actionmenu.scss
@@ -32,7 +32,7 @@ $action-menu-shadow: 2px 2px 0 var(--color--action-menu-shadow);
 
         background: var(--white);
         border: thin solid var(--color--action-menu-border);
-        border-radius: $border-radius;
+        border-radius: var(--border-radius-default);
         box-shadow: $action-menu-shadow;
         font-weight: normal;
         text-align: left;
diff --git a/resources/assets/stylesheets/scss/dashboard.scss b/resources/assets/stylesheets/scss/dashboard.scss
index 3d19ba0..ccf9f22 100644
--- a/resources/assets/stylesheets/scss/dashboard.scss
+++ b/resources/assets/stylesheets/scss/dashboard.scss
@@ -137,6 +137,8 @@ form div.files-search {
             margin: 0;
             border-top-left-radius: var(--border-radius-search);
             border-bottom-left-radius: var(--border-radius-search);
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
         .input-group-append {
diff --git a/resources/assets/stylesheets/scss/forms.scss b/resources/assets/stylesheets/scss/forms.scss
index 1cb037f..b5bf7e2 100644
--- a/resources/assets/stylesheets/scss/forms.scss
+++ b/resources/assets/stylesheets/scss/forms.scss
@@ -41,8 +41,8 @@ form.default {
     input[type=password], input[type=text], input[type=time], input[type=url], input[type=tel],
     textarea, select {
         box-sizing: border-box;
-
         border: 1px solid var(--light-gray-color-40);
+        border-radius: var(--border-radius-default);
         color: var(--dark-gray-color);
         max-width: $max-width-m;
         padding: 5px;
@@ -529,10 +529,10 @@ form.default {
 
     // designing vue-select in studipform:
     .vs__dropdown-toggle {
-        border-radius: 0;
+        border-radius: var(--border-radius-default);
     }
     .vs__selected {
-        border-radius: 0;
+        border-radius: var(--border-radius-default);
         padding: 5px;
     }
 
diff --git a/resources/assets/stylesheets/scss/i18n.scss b/resources/assets/stylesheets/scss/i18n.scss
index 318c1c8..e2ac91b 100644
--- a/resources/assets/stylesheets/scss/i18n.scss
+++ b/resources/assets/stylesheets/scss/i18n.scss
@@ -21,6 +21,15 @@ div.i18n_group {
         background-size: 20px auto;
         padding: 0 2px 0 28px !important;
 
+        &.i18n-textarea {
+            border-top-left-radius: var(--border-radius-default);
+        }
+
+        &.i18n-input{
+            border-top-left-radius: var(--border-radius-default);
+            border-bottom-left-radius: var(--border-radius-default);
+        }
+
         > option {
             background-position: left 1px center;
             background-repeat: no-repeat;
diff --git a/resources/assets/stylesheets/scss/select.scss b/resources/assets/stylesheets/scss/select.scss
index f963fd0..3285081 100644
--- a/resources/assets/stylesheets/scss/select.scss
+++ b/resources/assets/stylesheets/scss/select.scss
@@ -19,7 +19,7 @@
     }
 
     .vs__dropdown-menu, &.vs__dropdown-menu {
-        border-radius: 0;
+        border-radius: var(--border-radius-default);
     }
 
     .vs__actions {
diff --git a/resources/assets/stylesheets/scss/selects.scss b/resources/assets/stylesheets/scss/selects.scss
index 80befb2..5e11c6b 100644
--- a/resources/assets/stylesheets/scss/selects.scss
+++ b/resources/assets/stylesheets/scss/selects.scss
@@ -1,6 +1,6 @@
 $select-border: 1px solid var(--light-gray-color-40);
 $select-border-focus: 1px solid var(--brand-color-dark);
-$select-border-radius: 0;
+$select-border-radius: var(--border-radius-default);
 $select-height-default: 30px;
 $select-arrow-size: 10px;
 
diff --git a/resources/vue/components/I18nTextarea.vue b/resources/vue/components/I18nTextarea.vue
index b0390ec..c6d102b 100644
--- a/resources/vue/components/I18nTextarea.vue
+++ b/resources/vue/components/I18nTextarea.vue
@@ -31,6 +31,7 @@
                :required="required && defaultLanguage === language.id"
                :name="nameOfInput(language.id)">
         <select class="i18n"
+                :class="[type === 'text' ? 'i18n-input' : 'i18n-textarea']"
                 tabindex="0"
                 @change="selectLanguage"
                 :aria-label="$gettext('Sprache des Textfeldes auswählen.')"
diff --git a/templates/sidebar/select-widget.php b/templates/sidebar/select-widget.php
index b7aa596..169e12e 100644
--- a/templates/sidebar/select-widget.php
+++ b/templates/sidebar/select-widget.php
@@ -1,4 +1,5 @@
 <form action="<?= URLHelper::getLink($url) ?>"
+    class="default"
       <?= $onsubmit ? 'onsubmit="'.htmlReady($onsubmit).'"' : '' ?>
       method="<?= $method ?>">
     <?= \SelectWidget::arrayToHiddenInput($params) ?>