From f548ae20504823ebcdb2719a628080df8a2288d1 Mon Sep 17 00:00:00 2001
From: Dariusz Szut <dew326@gmail.com>
Date: Sat, 29 Jan 2022 12:08:45 +0100
Subject: [PATCH] IBX-2133: Styling for translation select (#266)

---
 .../Resources/public/scss/_extra-actions.scss | 38 ++++---------------
 .../_translation.selector.scss                | 18 ++++++---
 .../universal_discovery_widget.en.xliff       |  4 +-
 .../translation.selector.js                   |  4 +-
 4 files changed, 24 insertions(+), 40 deletions(-)

diff --git a/src/bundle/Resources/public/scss/_extra-actions.scss b/src/bundle/Resources/public/scss/_extra-actions.scss
index 30f6d61d42..7dd31a0bc5 100644
--- a/src/bundle/Resources/public/scss/_extra-actions.scss
+++ b/src/bundle/Resources/public/scss/_extra-actions.scss
@@ -78,39 +78,15 @@
         }
 
         .form-check {
-            display: block;
-            background: none;
-            border: 0 none;
-            width: 100%;
-            text-align: left;
-            border-radius: calculateRem(4px);
-            padding: 0 calculateRem(16px);
-            line-height: calculateRem(45px);
-            background: $ibexa-color-white;
-            text-decoration: none;
-            cursor: pointer;
-            transition: all 0.2s $ibexa-admin-transition;
-            margin-bottom: calculateRem(16px);
-            font-size: calculateRem(15px);
-            box-shadow: 0 calculateRem(2px) calculateRem(4px) 0 rgba($ibexa-color-black, 0.1);
-
-            &:hover,
-            &:focus {
-                background: $ibexa-color-light;
-                font-weight: 700;
-                text-decoration: none;
-            }
-
-            &:active {
-                background: $ibexa-color-primary;
-                color: $ibexa-color-white;
-            }
-
             &-label {
-                display: flex;
-                align-items: center;
-                margin: 0;
+                @include sidebar-drag-item;
+
                 cursor: pointer;
+
+                &:hover,
+                &:focus {
+                    border-color: $ibexa-color-dark;
+                }
             }
 
             &-input[type='radio'] {
diff --git a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_translation.selector.scss b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_translation.selector.scss
index 5fa2269d99..54be917ff9 100644
--- a/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_translation.selector.scss
+++ b/src/bundle/Resources/public/scss/ui/modules/universal-discovery/_translation.selector.scss
@@ -1,17 +1,18 @@
 .c-translation-selector {
     @include container-box-shadow-right;
 
-    position: absolute;
-    right: 100%;
+    position: fixed;
+    right: 0;
     top: 0;
     height: 100%;
-    width: calculateRem(360px);
+    width: calculateRem(700px);
     background-color: $ibexa-color-white;
     transform: scaleX(1);
     transform-origin: right center;
     opacity: 1;
     transition: all $ibexa-admin-transition-duration $ibexa-admin-transition;
     padding: calculateRem(16px);
+    z-index: 5;
 
     &--hidden {
         transform: scaleX(0);
@@ -28,7 +29,7 @@
     }
 
     &__title {
-        color: $ibexa-color-primary;
+        margin-bottom: 0;
     }
 
     &__close-button {
@@ -41,7 +42,14 @@
     }
 
     &__language {
-        padding: calculateRem(8px);
+        @include sidebar-drag-item;
+
         cursor: pointer;
+        width: 60%;
+
+        &:hover,
+        &:focus {
+            border-color: $ibexa-color-dark;
+        }
     }
 }
diff --git a/src/bundle/Resources/translations/universal_discovery_widget.en.xliff b/src/bundle/Resources/translations/universal_discovery_widget.en.xliff
index 53aa75b4cb..120b5fc8fb 100644
--- a/src/bundle/Resources/translations/universal_discovery_widget.en.xliff
+++ b/src/bundle/Resources/translations/universal_discovery_widget.en.xliff
@@ -222,8 +222,8 @@
         <note>key: meta_preview.edit</note>
       </trans-unit>
       <trans-unit id="4828dcbcd9cf2ad9c2b69a9b9420c94eccbe5dcc" resname="meta_preview.edit_translation">
-        <source>Edit translation</source>
-        <target state="new">Edit translation</target>
+        <source>Select translation</source>
+        <target state="new">Select translation</target>
         <note>key: meta_preview.edit_translation</note>
       </trans-unit>
       <trans-unit id="954055c80d86d18a4b101c2060e4dd63dd10971f" resname="meta_preview.last_modified">
diff --git a/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js b/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js
index ae4996afc7..72b634d577 100644
--- a/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js
+++ b/src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js
@@ -7,7 +7,7 @@ import Icon from '../../../common/icon/icon';
 const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation, version, isOpen }) => {
     const languageCodes = version ? version.VersionInfo.languageCodes.split(',') : [];
     const editTranslationLabel = Translator.trans(
-        /*@Desc("Edit translation")*/ 'meta_preview.edit_translation',
+        /*@Desc("Select translation")*/ 'meta_preview.edit_translation',
         {},
         'universal_discovery_widget'
     );
@@ -19,7 +19,7 @@ const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation,
     return (
         <div className={className}>
             <div className="c-translation-selector__header">
-                <span className="c-translation-selector__title">{`${editTranslationLabel} (${languageCodes.length})`}</span>
+                <h3 className="c-translation-selector__title">{`${editTranslationLabel} (${languageCodes.length})`}</h3>
                 <button className="c-translation-selector__close-button btn" onClick={hideTranslationSelector}>
                     <Icon name="discard" extraClasses="ibexa-icon--small" />
                 </button>