From bbc147da7d249f552db2adccb71ebc96f8c9f575 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Mon, 28 Mar 2022 15:55:00 -0300
Subject: [PATCH 1/2] Tweaks to bring alternative text to outside of the modal.

---
 .../admin/components/edition/item-edition-form.vue     | 10 ++++++++++
 src/views/tainacan-i18n.php                            |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue
index 55783403a..65c3b566a 100644
--- a/src/views/admin/components/edition/item-edition-form.vue
+++ b/src/views/admin/components/edition/item-edition-form.vue
@@ -514,6 +514,16 @@
                                                 :alt="$i18n.get('label_thumbnail')"
                                                 :src="$thumbHelper.getEmptyThumbnailPlaceholder(item.document_mimetype)">
                                     </figure>
+                                    <b-field
+                                            :addons="false" 
+                                            :label="$i18n.get('label_thumbnail_alt')">
+                                        <help-button 
+                                                :title="$i18n.get('label_thumbnail_alt')" 
+                                                :message="$i18n.get('info_thumbnail_alt')"/>
+                                        <b-input
+                                                id="tainacan-text-description"
+                                                type="textarea" />
+                                    </b-field>    
                                     <div class="thumbnail-buttons-row">
                                         <a
                                                 class="button is-rounded is-secondary"
diff --git a/src/views/tainacan-i18n.php b/src/views/tainacan-i18n.php
index 0fa0c7935..b93c6d8bf 100644
--- a/src/views/tainacan-i18n.php
+++ b/src/views/tainacan-i18n.php
@@ -176,7 +176,7 @@ return apply_filters( 'tainacan-i18n', [
 	'label_slug'                                     => __( 'Slug', 'tainacan' ),
 	'label_image'                                    => __( 'Image', 'tainacan' ),
 	'label_thumbnail'                                => __( 'Thumbnail', 'tainacan' ),
-	'label_thumbnail_alt'                            => __( 'Thumbnail alternative text', 'tainacan' ),
+	'label_thumbnail_alt'                            => __( 'Alternative text', 'tainacan' ),
 	'label_empty_thumbnail'                          => __( 'Empty thumbnail', 'tainacan' ),
 	'label_empty_term_image'                         => __( 'Empty term image', 'tainacan' ),
 	'label_parent_collection'                        => __( 'Parent collection', 'tainacan' ),
@@ -304,7 +304,7 @@ return apply_filters( 'tainacan-i18n', [
 	'label_select_all_items_page'                    => __( 'Select all items on page', 'tainacan' ),
 	'label_select_all_taxonomies_page'               => __( 'Select all taxonomies on page', 'tainacan' ),
 	'label_select_all_processes_page'                => __( 'Select all processes on page', 'tainacan' ),
-	'label_add_or_update_attachments'                         => __( 'Add or update attachments', 'tainacan' ),
+	'label_add_or_update_attachments'                => __( 'Add or update attachments', 'tainacan' ),
 	'label_blank_collection'                         => __( 'Blank collection', 'tainacan' ),
 	/* translators: the metadata scheme https://dublincore.org/ */
 	'label_dublin_core'                              => __( 'Dublin Core', 'tainacan' ),

From 1046776009929001702f07c2ea59ee554608c505 Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Wed, 30 Mar 2022 12:05:38 -0300
Subject: [PATCH 2/2] Brings item thumbnail alt description to the side of the
 thumbnail.

---
 .../components/edition/item-edition-form.vue  | 54 ++++--------------
 .../modals/item-thumbnail-alt-text-modal.vue  | 57 -------------------
 src/views/admin/scss/_tables.scss             | 37 ++++++++++++
 src/views/admin/scss/tainacan-admin.scss      | 40 -------------
 4 files changed, 49 insertions(+), 139 deletions(-)
 delete mode 100644 src/views/admin/components/modals/item-thumbnail-alt-text-modal.vue

diff --git a/src/views/admin/components/edition/item-edition-form.vue b/src/views/admin/components/edition/item-edition-form.vue
index 65c3b566a..b10e27403 100644
--- a/src/views/admin/components/edition/item-edition-form.vue
+++ b/src/views/admin/components/edition/item-edition-form.vue
@@ -520,9 +520,11 @@
                                         <help-button 
                                                 :title="$i18n.get('label_thumbnail_alt')" 
                                                 :message="$i18n.get('info_thumbnail_alt')"/>
-                                        <b-input
+                                        <textarea
                                                 id="tainacan-text-description"
-                                                type="textarea" />
+                                                class="textarea"
+                                                rows="4"
+                                                v-model="form.thumbnail_alt" />
                                     </b-field>    
                                     <div class="thumbnail-buttons-row">
                                         <a
@@ -541,23 +543,6 @@
                                                 <i class="tainacan-icon tainacan-icon-edit"/>
                                             </span>
                                         </a>
-                                        <a
-                                                v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
-                                                id="button-alt-text-thumbnail"
-                                                class="button is-rounded is-secondary"
-                                                :aria-label="$i18n.get('label_button_delete_thumb')"
-                                                @click="openThumbnailModalAltText">
-                                            <span
-                                                    v-tooltip="{
-                                                        content: $i18n.get('label_thumbnail_alt'),
-                                                        autoHide: true,
-                                                        placement: 'bottom',
-                                                        popperClass: ['tainacan-tooltip', 'tooltip']
-                                                    }"
-                                                    class="icon">
-                                                <i class="tainacan-icon tainacan-icon-text"/>
-                                            </span>
-                                        </a>
                                         <a
                                                 v-if="item.thumbnail && item.thumbnail.thumbnail != undefined && item.thumbnail.thumbnail != false"
                                                 id="button-delete-thumbnail"
@@ -904,7 +889,6 @@ import ItemMetadatumErrorsTooltip from '../other/item-metadatum-errors-tooltip.v
 import { directive } from 'vue-awesome-swiper';
 import ItemDocumentTextModal from '../modals/item-document-text-modal.vue';
 import ItemDocumentURLModal from '../modals/item-document-url-modal.vue';
-import ItemThumbnailAltTextModal from '../modals/item-thumbnail-alt-text-modal.vue';
 
 export default {
     name: 'ItemEditionForm',
@@ -1562,27 +1546,6 @@ export default {
                 this.formErrorMessage = errors.error_message;
             });
         },
-        openThumbnailModalAltText() {
-            this.$buefy.modal.open({
-                parent: this,
-                component: ItemThumbnailAltTextModal,
-                canCancel: false,
-                width: 640,
-                scroll: 'keep',
-                trapFocus: true,
-                autoFocus: false,
-                ariaModal: true,
-                ariaRole: 'dialog',
-                customClass: 'tainacan-modal',
-                closeButtonAriaLabel: this.$i18n.get('close'),
-                props: {
-                    altText: this.form.thumbnail_alt ? this.form.thumbnail_alt : ''
-                },
-                events: {
-                    onUpdateThumbnailAlt: (altText) => this.form.thumbnail_alt = altText
-                }
-            });
-        },
         deleteThumbnail() {
             this.updateThumbnail({ itemId: this.itemId, thumbnailId: 0 })
                 .then(() => {
@@ -2372,7 +2335,12 @@ export default {
     }
 
     .thumbnail-field {
+        display: flex;
 
+        .field {
+            margin-left: 12px;
+            width: 100%;
+        }
         .content {
             padding: 10px;
             font-size: 0.8em;
@@ -2409,7 +2377,9 @@ export default {
         padding-left: 0;
         padding-right: 0;
     }
-
+    .section-thumbnaill {
+        padding-right: 0;
+    }
     .related-items-list-heading {
         display: flex;
         align-items: center;
diff --git a/src/views/admin/components/modals/item-thumbnail-alt-text-modal.vue b/src/views/admin/components/modals/item-thumbnail-alt-text-modal.vue
deleted file mode 100644
index c1b929bd8..000000000
--- a/src/views/admin/components/modals/item-thumbnail-alt-text-modal.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-    <form class="tainacan-modal-content tainacan-form">
-        <div class="tainacan-modal-title">
-            <h2 id="item-thumbnail-alt-text-modal-title">{{ $i18n.get('label_thumbnail_alt') }}</h2>
-            <hr>
-        </div>
-        <b-input
-                type="textarea"
-                ref="item-thumbnail-alt-text-input"
-                :autofocus="true"
-                lazy
-                :placeholder="$i18n.get('instruction_thumbnail_alt')"
-                :value="localAltText"
-                @input="(newValue) => $emit('onUpdateThumbnailAlt', newValue)" />
-        <p>{{ $i18n.get('info_thumbnail_alt') }}</p>
-
-        <div class="field is-grouped form-submit">
-            <div 
-                    style="margin-left: auto;"
-                    class="control">
-                <button
-                        id="button-submit-text-content-writing"
-                        type="submit"
-                        @click.prevent="$parent.close()"
-                        class="button is-success">
-                    {{ $i18n.get('finish') }}</button>
-            </div>
-        </div>
-    </form>
-</template>
-
-<script>
-export default {
-    props: {
-        altText: ''
-    },
-    data(){
-        return {
-            localAltText: ''
-        }
-    },
-    mounted() {
-        this.localAltText = this.altText;
-
-        if (
-            this.$refs && 
-            this.$refs['item-thumbnail-alt-text-input'] &&
-            this.$refs['item-thumbnail-alt-text-input']['$el'] &&
-            this.$refs['item-thumbnail-alt-text-input']['$el'].children &&
-            this.$refs['item-thumbnail-alt-text-input']['$el'].children[0]
-        ) {
-            this.$refs['item-thumbnail-alt-text-input']['$el'].children[0].focus();
-            this.$refs['item-thumbnail-alt-text-input']['$el'].children[0].click();
-        }
-    }
-}
-</script>
\ No newline at end of file
diff --git a/src/views/admin/scss/_tables.scss b/src/views/admin/scss/_tables.scss
index bedb7a170..6ef623626 100644
--- a/src/views/admin/scss/_tables.scss
+++ b/src/views/admin/scss/_tables.scss
@@ -246,6 +246,43 @@
                         }
                         a {
                             text-decoration: none !important;
+                        }
+                        .tainacan-compound-group {
+                            display: inline-block;
+                            font-size: 1.125em;
+                            margin-top: -0.25em;
+                            text-overflow: ellipsis;
+                            white-space: nowrap;
+                            overflow: hidden;
+                            max-width: 100%;
+                    
+                            & * {
+                                display: inline;
+                            }
+                            .label {
+                                font-size: 1em;
+                                color: var(--tainacan-info-color);
+                                &:not(:first-child)::before {
+                                    content: ', ';
+                                    font-size: 1em;
+                                    font-weight: normal;
+                                    color: var(--tainacan-info-color);
+                                    display: inline-block;
+                                    margin-right: 0.35em;
+                                    margin-left: -0.15em;
+                                }
+                                &::after {
+                                    content: ': ';
+                                    font-size: 1em;
+                                    color: var(--tainacan-info-color);
+                                    display: inline-block;
+                                    margin-right: 0.15em;
+                                }
+                            }
+                            p {
+                                font-size: 1em !important;
+                                line-height: 1.25em !important;
+                            }
                         }   
                     }
                     img.table-thumb,
diff --git a/src/views/admin/scss/tainacan-admin.scss b/src/views/admin/scss/tainacan-admin.scss
index 92a71df82..08158c84b 100644
--- a/src/views/admin/scss/tainacan-admin.scss
+++ b/src/views/admin/scss/tainacan-admin.scss
@@ -158,46 +158,6 @@ a:hover {
     color: var(--tainacan-gray3);
 }
 
-.column-large-width {
-    .tainacan-compound-group {
-        display: inline-block;
-        font-size: 1.125em;
-        margin-top: -0.25em;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        max-width: 100%;
-
-        & * {
-            display: inline-block;
-        }
-        .label {
-            font-size: 1em;
-            color: var(--tainacan-info-color);
-            &:not(:first-child)::before {
-                content: ', ';
-                font-size: 1em;
-                font-weight: normal;
-                color: var(--tainacan-info-color);
-                display: inline-block;
-                margin-right: 0.35em;
-                margin-left: -0.15em;
-            }
-            &::after {
-                content: ': ';
-                font-size: 1em;
-                color: var(--tainacan-info-color);
-                display: inline-block;
-                margin-right: 0.15em;
-            }
-        }
-        p {
-            font-size: 1em !important;
-            line-height: 1.25em !important;
-        }
-    }
-}
-
 // Inside one of the view modes
 .metadata-value {
     .tainacan-compound-group {