task detail editor: option to edit taskReference

frontend/src/Editor.svelte

@@ -74,7 +74,7 @@
     open(
       TaskDetailEditor,
       { task: t, tasks: tasks },
-      { closeButton: false },
+      { closeButton: false, styleWindow: { width: "50vw"} },
       {
         onClose: () => {
           tasks = tasks;
@@ -257,7 +257,8 @@
 <div class="container">
   <div class="topLeftHint">
     Last clicked: <b>{clicked.join(' | ')}</b><br /><i>Double click na node
-      otevře detail. Po kliknutí na label se zobrazí možnost rotace. Držením pravého tlačítka je možné udělat skupinový výběr.</i>
+      otevře detail. Po kliknutí na label se zobrazí možnost rotace. Držením
+      pravého tlačítka je možné udělat skupinový výběr.</i>
   </div>
 
   <div class="right">

frontend/src/TaskDetailEditor.svelte

@@ -52,7 +52,7 @@
 
     function saveAndExit() {
         if (editData.task.type == "text")
-            editData.task.htmlContent = editor.getData()
+            editData.task.htmlContent = editor.getData();
         Object.assign(task, editData.task);
 
         // kategorie musíme první odevšad odstranit
@@ -73,10 +73,17 @@
         // a nakonec zavřít dialog
         close();
     }
-
-  
 </script>
 
+<style>
+    .fakeInput {
+        border: 1px solid lightgray;
+        padding: 0.5em;
+        display: inline-block;
+        margin: 0.5em;
+    }
+</style>
+
 <div>
     <div>
         <span><i>ID:</i> {editData.task.id},</span>
@@ -97,10 +104,15 @@
         <span contenteditable="true" bind:textContent={editData.task.title} />
     </h1>
     <div>
-        <h3>Interní komentář</h3>
+        <div style="display: inline-block">Interní komentář: </div>
-        <div contenteditable="true" bind:textContent={editData.task.comment} />
+        <div class="fakeInput" contenteditable="true" bind:textContent={editData.task.comment} />
     </div>
-    <div style="display: {editData.task.type == "text" ? 'block' : 'none'}">
+    {#if editData.task.type == 'open-data'}
+        <label>
+            Task reference: <input type="text" bind:value={editData.task.taskReference} />
+        </label>
+    {/if}
+    <div style="display: {editData.task.type == 'text' ? 'block' : 'none'}">
         <h3>HTML obsah</h3>
         <textarea id="editor">{editData.task.htmlContent}</textarea>
     </div>