feat: update item language selector

packages/portal/src/components/embed/EmbedHTML.vue

@@ -87,6 +87,7 @@
 
 <style lang="scss" scoped>
   @import '@europeana/style/scss/variables';
+  @import '@europeana/style/scss/mixins';
 
   .html-embed {
     height: 100%;
@@ -107,27 +108,17 @@
 
       iframe {
         width: 100%;
-        max-height: $swiper-height-max;
-        height: $swiper-height;
-
-        @media (max-width: $bp-medium) {
-          height: 22.5rem;
-        }
+        @include media-viewer-height;
       }
     }
   }
 
   .responsive-embed-wrapper {
-    height: $swiper-height;
-    max-height: $swiper-height-max;
+    @include media-viewer-height;
     margin: 0 auto;
     width: 100%;
     max-width: 100%;
 
-    @media (max-width: $bp-medium) {
-      height: 22.5rem;
-    }
-
     .html-embed {
       display: block;
       position: relative;
@@ -140,18 +131,6 @@
         left: 0;
         width: 100%;
         height: 100%;
-
-        @media (max-height: $bp-medium) {
-          max-height: $swiper-height;
-        }
-
-        @media (min-height: $bp-medium) {
-          max-height: $swiper-height-max;
-        }
-
-        @media (max-width: $bp-medium) {
-          max-height: $swiper-height-medium;
-        }
       }
     }
   }

packages/portal/src/components/item/ItemLanguageSelector.vue

@@ -1,101 +1,67 @@
 <template>
-  <transition
-    name="fade"
-  >
-    <b-container
-      fluid
-      class="d-flex border-bottom align-items-center"
+  <div>
+    <b-dropdown
       data-qa="item language selector"
+      :disabled="fromTranslationError"
     >
-      <b-container>
-        <b-row>
-          <b-col class="col-12 py-3 d-sm-inline-flex align-items-center flex-wrap">
-            <span class="d-sm-inline-flex align-items-center flex-wrap">
-              <span class="icon-translate pr-2" />
-              <i18n
-                v-if="fromTranslationError"
-                path="multilingual.translateQuotaError"
-                tag="span"
-                class="pr-1"
-                data-qa="translate item error"
-              />
-              <i18n
-                v-else-if="!$auth.loggedIn"
-                path="multilingual.loginToTranslate"
-                tag="span"
-                data-qa="translate item login suggestion"
-              >
-                <template #login>
-                  <b-link
-                    data-qa="log in button"
-                    :href="localePath({ name: 'account-login', query: { redirect: $route.fullPath } })"
-                    :target="null"
-                    @click.prevent="keycloakLogin"
-                  >
-                    {{ $t('actions.login') }}<!-- This comment removes white space
-                  -->
-                  </b-link>
-                </template>
-              </i18n>
-              <i18n
-                v-else
-                path="multilingual.translateLanguage"
-                tag="span"
-                data-qa="translate item suggestion"
-              >
-                <b-dropdown
-                  :text="$t('multilingual.other')"
-                  variant="link"
-                  toggle-class="multilingual-dropdown border-0"
-                  toggle-tag="span"
-                  no-flip
-                  class="multilingual-selector"
-                  data-qa="item language dropdown"
-                >
-                  <b-dropdown-item
-                    v-for="locale in translateLocales"
-                    :key="locale.code"
-                    class="multilingual-dropdown-item"
-                    :to="translateParams(locale.code)"
-                    :data-qa="`item language option ${locale.code}`"
-                  >
-                    {{ locale.name }}
-                  </b-dropdown-item>
-                </b-dropdown>
-              </i18n>
-              <b-button
-                v-b-tooltip.bottom
-                :title="$t('multilingual.translateMetadata')"
-                class="icon-info-outline tooltip-button px-2"
-                variant="light-flat"
-              />
-            </span>
-            <b-link
-              v-if="translationLanguage"
-              :to="translateParams(null)"
-              :target="null"
-              data-qa="remove item translation button"
-            >
-              <i18n
-                path="multilingual.stopTranslating"
-                tag="span"
-                class="pr-1"
-              >
-                <span>{{ translationLanguageLabel }}</span>
-              </i18n>
-            </b-link>
-          </b-col>
-        </b-row>
-      </b-container>
-      <b-button
-        class="button-icon-only icon-clear"
-        variant="light-flat"
-        :aria-label="$t('actions.close')"
-        data-qa="item language selector close button"
-        @click="handleClose()"
-      />
-    </b-container>
-  </transition>
+      <template #button-content>
+        <span
+          class="icon-translate pr-sm-2"
+          :class="{'translation-applied': translationLanguage}"
+        />
+        <i18n
+          v-if="translationLanguage"
+          path="multilingual.viewingThisItemIn"
+          tag="span"
+          class="d-none d-sm-inline align-middle"
+          data-qa="item language selector toggle text translated"
+        >
+          <strong>{{ translationLanguageLabel }}</strong>
+        </i18n>
+        <span
+          v-else
+          class="d-none d-sm-inline align-middle"
+          data-qa="item language selector toggle text suggestion"
+        >
+          {{ $t('multilingual.viewItemInAnotherLanguage') }}
+        </span>
+      </template>
+      <template v-if="translationLanguage">
+        <b-dropdown-item
+          :to="translateParams(null)"
+          :target="null"
+          data-qa="remove item translation button"
+          link-class="stop-link"
+        >
+          <span class="icon-clear pr-2" />
+          <i18n
+            path="multilingual.stopViewingThisItemIn"
+            tag="span"
+          >
+            <strong>{{ translationLanguageLabel }}</strong>
+          </i18n>
+        </b-dropdown-item>
+        <b-dropdown-divider />
+      </template>
+      <b-dropdown-item
+        v-for="locale in translateLocales"
+        :key="locale.code"
+        class="multilingual-dropdown-item"
+        :to="translateParams(locale.code)"
+        :data-qa="`item language option ${locale.code}`"
+        @click="login"
+      >
+        {{ locale.name }}
+      </b-dropdown-item>
+    </b-dropdown>
+    <i18n
+      v-if="fromTranslationError"
+      path="multilingual.translateQuotaError"
+      tag="p"
+      class="form-text text-muted"
+      data-qa="translate item error"
+    />
+  </div>
 </template>
 
 <script>
@@ -109,10 +75,16 @@
       locales
     ],
     props: {
+      /**
+       * Translation request error
+       */
       fromTranslationError: {
         type: Boolean,
         default: false
       },
+      /**
+       * Language the item is translated to
+       */
       translationLanguage: {
         type: String,
         default: null
@@ -121,8 +93,7 @@
     data() {
       return {
         // "eu" language code not supported for translation
-        translateLocales: this.$i18n.locales.filter(locale => locale.code !== 'eu'),
-        hide: false
+        translateLocales: this.$i18n.locales.filter(locale => locale.code !== 'eu')
       };
     },
     computed: {
@@ -138,43 +109,120 @@
         }
         return { path: this.$route.path, query };
       },
-      handleClose() {
-        this.$emit('hidden');
+      login() {
+        if (!this.$auth.loggedIn) {
+          this.keycloakLogin();
+        }
       }
     }
   };
 </script>
 
 <style lang="scss" scoped>
   @import '@europeana/style/scss/variables';
-  @import '@europeana/style/scss/transitions';
-  @import '@europeana/style/scss/icon-font';
+  @import '@europeana/style/scss/mixins';
 
-  .icon-translate::before {
-    font-size: 1.4375rem;
-  }
+  .icon-translate {
+    font-size: 1.125rem;
+
+    &.translation-applied {
+      @media (max-width: ($bp-small - 1px)) {
+        position: relative;
+        @include status-indicator;
 
-  .multilingual-selector {
-    vertical-align: baseline;
+        &:after {
+          top: -2px;
+          right: -2px;
+          outline-color: $offwhite;
+        }
+      }
+    }
   }
 
-  ::v-deep .multilingual-dropdown {
-    padding: 0;
-    color: $greyblack;
-    text-decoration: underline;
+  ::v-deep .dropdown-toggle {
+    text-transform: none;
+    padding: 0.25rem 0.5rem;
+    display: flex;
+    align-items: center;
 
-    &::after {
-      @extend %icon-font;
+    @media (min-width: $bp-small) {
+      padding: 0.25rem 0.75rem;
+    }
+
+    // dropdown is flipped up
+    &:has(+ [x-placement='top-start']) {
+      border-radius: 0 0 0.375rem 0.375rem;
+    }
+
+    &:after {
+      padding-left: 0.5rem;
+      margin: 2px 0 0 0;
+
+      @media (min-width: $bp-small) {
+        padding-left: 0.25rem;
+      }
+    }
 
-      // icon-chevron
-      content: '\e91b';
-      font-size: 0.5rem;
-      border: none;
-      margin-left: 0.25rem;
+    strong {
+      font-weight: 700;
     }
   }
 
-  .multilingual-dropdown-item {
+  ::v-deep .dropdown-menu {
+    width: auto;
     font-size: $font-size-small;
+    max-height: 15rem;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-top: 0;
+    border-radius: 0 0 0.375rem 0.375rem;
+    box-shadow: $boxshadow-large;
+    border: 0;
+
+    @media (min-width: $bp-small) {
+      width: 100%;
+    }
+
+    // dropdown is flipped up
+    &[x-placement='top-start'] {
+      border-radius: 0.375rem 0.375rem 0 0;
+    }
+  }
+
+  ::v-deep .stop-link {
+    color: $mediumgrey-light;
+    display: flex;
+    white-space: wrap;
+    min-width: 15rem;
+
+    &:active,
+    &.active {
+      color: $mediumgrey-light;
+      background-color: $bodygrey;
+    }
+
+    .icon-clear {
+      font-size: $font-size-extrasmall;
+      line-height: 1.875;
+    }
   }
 </style>
+
+<docs lang="md">
+  No language selected
+  ```jsx
+    <ItemLanguageSelector />
+  ```
+  Translation language set to Nederlands
+  ```jsx
+    <ItemLanguageSelector
+      translation-language="nl"
+    />
+  ```
+  Translation error
+  ```jsx
+    <ItemLanguageSelector
+      :from-translation-error="true"
+    />
+  ```
+</docs>