From 24a4305700a365fc1d08451dd309531bc820161c Mon Sep 17 00:00:00 2001
From: dcz2 <dcz@ipipan.waw.pl>
Date: Wed, 22 Jun 2022 22:07:24 +0200
Subject: [PATCH] Fix tooltips and splits

---
 .../entries/js/components/InfoTooltip.js      |  5 ++--
 .../js/components/LexicalUnitDisplay.js       | 12 +++++++++
 .../entries/js/components/LexicalUnitEdit.js  | 24 ++++++++++++++++-
 entries/static/entries/js/unification.js      | 27 +------------------
 4 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/entries/static/entries/js/components/InfoTooltip.js b/entries/static/entries/js/components/InfoTooltip.js
index 01f3bcc..aab7df5 100644
--- a/entries/static/entries/js/components/InfoTooltip.js
+++ b/entries/static/entries/js/components/InfoTooltip.js
@@ -10,8 +10,8 @@ export default {
       return this.text.replace(/"/g, '&quot;');
     }
   },
-  created () {
-    $("[data-toggle='tooltip']").tooltip();
+  mounted () {
+    $(this.$refs.tooltip).tooltip();
   },
   template: `
     <span
@@ -19,6 +19,7 @@ export default {
       data-placement="bottom"
       data-html="true"
       :title="quotedText"
+      ref="tooltip"
     >
       <img :src="iconUrl" alt="info" width="14" height="14" />
     </span>
diff --git a/entries/static/entries/js/components/LexicalUnitDisplay.js b/entries/static/entries/js/components/LexicalUnitDisplay.js
index 7559c61..b1b5583 100644
--- a/entries/static/entries/js/components/LexicalUnitDisplay.js
+++ b/entries/static/entries/js/components/LexicalUnitDisplay.js
@@ -52,6 +52,18 @@ export default {
       setup_notes($('#lexical-unit-notes'), $('#lexical-unit-notes-template'), this.lexicalUnitId, this.entryId);
     });
   },
+  mounted () {
+    Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
+      sizes: [40, 60],
+      minSize: 400,
+      gutterSize: 4,
+      elementStyle: (dimension, size, gutterSize) => {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+    });
+  },
   template: `
     <div class="col h-100 px-1 pt-0 pb-2 overflow-auto" id="semantics-frames-pane">
       <spinner />
diff --git a/entries/static/entries/js/components/LexicalUnitEdit.js b/entries/static/entries/js/components/LexicalUnitEdit.js
index 611e808..081c9e5 100644
--- a/entries/static/entries/js/components/LexicalUnitEdit.js
+++ b/entries/static/entries/js/components/LexicalUnitEdit.js
@@ -86,6 +86,16 @@ export default {
       } else {
         this.active_unified_frame_argument = argument;
       }
+      this.unifiedFrameArgumentHovered(argument);
+    },
+    unifiedFrameArgumentHovered (argument) {
+      clear_info();
+      if (argument && this.active_unified_frame_argument === argument) {
+        show_info(gettext('Kliknij, aby cofnąć wybór kolumny do edycji.'));
+      }
+      if (argument && this.active_unified_frame_argument !== argument) {
+        show_info(gettext('Kliknij, aby wybrać kolumnę do edycji.'));
+      }
     },
     addSelectivePreference () {
       if (!this.active_unified_frame_argument) {
@@ -95,7 +105,17 @@ export default {
       }
     }
   },
-  created() {
+  mounted () {
+    Split(['#semantics-frames-pane', '#semantics-schemata-pane'], {
+      sizes: [40, 60],
+      minSize: 400,
+      gutterSize: 4,
+      elementStyle: (dimension, size, gutterSize) => {
+        return {
+          'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
+        }
+      },
+    });
     this.loadFrame();
   },
   template: `
@@ -128,6 +148,8 @@ export default {
               v-for="argument in unified_frame_arguments"
               :key="argument.id"
               @click="unifiedFrameArgumentSelected(argument)"
+              @mouseover="unifiedFrameArgumentHovered(argument)"
+              @mouseleave="unifiedFrameArgumentHovered(null)"
             >
               {{ argument.role_type }}
               <ul>
diff --git a/entries/static/entries/js/unification.js b/entries/static/entries/js/unification.js
index b544445..e3e296b 100644
--- a/entries/static/entries/js/unification.js
+++ b/entries/static/entries/js/unification.js
@@ -2,7 +2,6 @@
 
 var unified_view_frame_content;
 var unified_frame_active_frame;
-var unified_frame_active_argument_id;
 
 function change_slowal2unified_frame_argument_mapping(slowal_frame_id) {
     var argument_ids = [];
@@ -380,35 +379,11 @@ function show_unified_frame(unified_frame, slowal_frames) {
     var unified_frame_dom = unifiedFrame2dom(unified_frame, slowal_frames);
     unified_frame_active_frame = unified_frame;
     $('#unified-frame').empty().append($(unified_frame_dom));
-    select_unified_frame_argument(0);
-    $('#unified-frame .argument')
-        .mouseenter(function() {
-            if (!$(this).hasClass('active')) {
-                $(this).addClass('highlight bg-highlight');
-                show_info(gettext('Kliknij, aby wybrać kolumnę do edycji.'));
-            }
-        })
-        .mouseleave(function() {
-            $(this).removeClass('highlight bg-highlight');
-            clear_info();
-        })
-        .click(function() {
-            select_unified_frame_argument($(this).data('argument_id'));
-            clear_info();
-        });
-}
-
-function select_unified_frame_argument(argument_id) {
-    unified_frame_active_argument_id = argument_id;
-    $('#unified-frame .argument')
-        .removeClass('active')
-        .filter(`[data-argument_id=${unified_frame_active_argument_id}]`).addClass('active');
 }
 
 function show_unified_frame_lexical_units(frames) {
-    var lexical_units_dom = frames2lexical_unitsHTML(frames);
     $('#unified-frame-lexical-units').empty();
-    $('#unified-frame-lexical-units').append($(lexical_units_dom));
+    $('#unified-frame-lexical-units').append($(frames2lexical_unitsHTML(frames)));
 }
 
 function extract_frames_to_new_frame(unified_frame_id, slowal_frame_ids, new_unified_frame_id) {
-- 
GitLab