Merge pull request #4483 from aignatov-bio/ai-sci-7262-css-fixes-label-templates

CSS fixes for label templates [SCI-7262]

app/assets/stylesheets/label_templates/show.scss

@@ -13,7 +13,7 @@
     border-bottom: $border-tertiary;
     display: flex;
     margin-left: -2em;
-    padding: .5em 2em;
+    padding: .25em 2em;
     width: calc(100% + 4em);
 
     .label-template-icon {
@@ -32,7 +32,7 @@
 
   .template-descripiton {
     @include font-button;
-    margin: 1em 0;
+    margin: .5em 0;
 
     .title {
       font-weight: bold;
@@ -126,6 +126,10 @@
       top: 0;
     }
 
+    &.read-only {
+      cursor: initial;
+    }
+
     &:hover:not(.read-only) {
       background-color: $color-concrete;
 

app/assets/stylesheets/partials/_sidebar.scss

@@ -163,7 +163,6 @@
         background: $color-white;
         color: $brand-primary;
         font-weight: bold;
-        pointer-events: none;
       }
 
       .fa-folder {

app/assets/stylesheets/shared/dropdown_selector.scss

@@ -38,6 +38,7 @@
     .right-icon {
       color: $color-volcano;
       cursor: pointer;
+      height: 18px;
       line-height: 18px;
       position: absolute;
       right: 12px;

app/javascript/vue/label_template/container.vue

@@ -46,7 +46,7 @@
           @update="updateDescription"
         />
         <template v-else>
-          {{ labelTemplate.attributes.description }}
+          {{ labelTemplate.attributes.description || i18n.t('label_templates.show.description_empty') }}
         </template>
       </div>
     </div>
@@ -240,6 +240,11 @@
         let textAfter  = this.newContent.substring(this.cursorPos, this.newContent.length);
         this.newContent = textBefore + field + textAfter;
         this.cursorPos = this.cursorPos + field.length;
+
+        this.$nextTick(() => {
+          $(this.$refs.contentInput).prop('selectionStart', this.cursorPos);
+          $(this.$refs.contentInput).prop('selectionEnd', this.cursorPos);
+        });
       },
       showErrors() {
         if (this.editingContent) {

config/locales/en.yml

@@ -871,6 +871,7 @@ en:
       description_error_prefix: 'Label template description'
       description_title: 'Template description'
       description_placeholder: 'Enter the template description (optional)'
+      description_empty: 'No template description'
       content_title: '%{format} template code'
       preview_title: 'Template preview'
       view_content_tooltip: 'Click to edit template code'