Fix Space browsing/editing on touch devices such as iPad (#152)

* touch (tablet): fix deselect when tapping space; add edit text butto
* touch: fix media upload on iDevice
* touch: fix vector transforming (points of arrows, scribbles)

Co-authored-by: Lukas F. Hartmann <lukas@mntre.com>

views/partials/space.html

@@ -85,13 +85,13 @@
          v-bind:class="{text-editing:(editing_artifact_id==a._id && (a.view.major_type=='text' || a.view.major_type=='shape'))}"
          id="artifact-{{a._id}}">
 
-
       <div v-if="a.view && a.view.major_type" style="height:100%; width:100%" v-bind:title="(a.editor_name || (a.user && a.user.nickname) || '')">
-          <span v-if="a.locked && is_selected(a)" class="link-wrapper">
-            <span class="btn btn-sm btn-icon btn-round btn-primary">
-              <span class="icon icon-lock-closed"></span>
-            </span>
+        <span v-if="a.locked && is_selected(a)" class="link-wrapper">
+          <span class="btn btn-sm btn-icon btn-round btn-primary">
+            <span class="icon icon-lock-closed"></span>
           </span>
+        </span>
+
         <!-- text -->
         <div v-if="a.view.major_type == 'text'" class="text" v-bind:style="a.view.inner_style">
           <div class="text-table">

views/partials/tool/image.html

@@ -4,7 +4,7 @@
   <div class="dialog-section">
     <label class="btn btn-xxl btn-transparent btn-icon">
       <span class="icon icon-picture-upload"></span>
-      <input type="file" accept="*/*" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload">
+      <input type="file" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload">
     </label>
     <p>Click to Upload<br/> or drag file(s) anywhere.</p>
   </div>

views/partials/tool/toolbar-elements.html

@@ -1,18 +1,18 @@
 <div class="toolbar toolbar-elements" v-bind:class="{in:toolbar_artifacts_in,out:!toolbar_artifacts_in}" v-show="!is_active_space_role('viewer') && active_space_loaded">
-  
+
   <div class="btn-group light vertical">
-    
+
     <a class="btn btn-icon btn-transparent"
        title="<%=__("home")%>" href="/spaces"
        v-if="(!active_space.parent_space_id && !guest_nickname && !embedded)">
       <span class="icon icon-folder"></span>
     </a>
-      
+
     <a class="btn btn-icon btn-dark"
        title="Parent Folder"
        href="/folders/{{active_space.parent_space_id}}"
        v-if="(active_space.parent_space_id && !guest_nickname && !embedded)">
-      
+
       <span class="icon icon-sd6 icon-svg"></span>
     </a>
 
@@ -35,15 +35,16 @@
       <span class="icon icon-tool-scribble"></span>
       <span class="icon-label"><%=__("tool_scribble")%></span>
     </button>
-    
+
     <button class="btn btn-icon-labeled btn-transparent" v-on:click="start_drawing_arrow()" v-bind:class="{active:active_tool=='arrow'}" title="<%=__("tool_arrow")%>">
       <span class="icon icon-tool-arrow"></span>
       <span class="icon-label"><%=__("tool_arrow")%></span>
     </button>
-    
+
     <div class="dropdown bottom light center">
       <div class="btn-collapse in">
-        <button class="btn btn-transparent btn-icon-labeled" v-on:click="handle_insert_image_url()" v-on:touchstart="handle_insert_image_url()" title="<%=__("media")%>">
+        <input type="file" multiple v-on:change="handle_image_file_upload($event)" id="image_file_upload" class="btn btn-transparent btn-icon-labeled" style="position: absolute; z-index: 1; opacity: 0;">
+        <button class="btn btn-transparent btn-icon-labeled" title="<%=__("media")%>">
           <span class="icon icon-upload"></span>
           <span class="icon-label" ><%=__("media")%></span>
         </button>
@@ -59,19 +60,6 @@
       </div>
     </div>
 
-    <div class="dropdown top left light">
-      <div class="btn-collapse">
-        <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='image'}" v-on:click="open_dialog('image')" title="<%=__("image")%>">
-          <span class="icon icon-picture"></span>
-          <span class="icon-label"><%=__("image")%></span>
-        </button>
-      </div>
-
-      <div class="dialog">
-        <%- include("./image.html") %>
-      </div>
-    </div>
-
     <div class="dropdown top left light" v-bind:class="{open:opened_dialog=='zones'}">
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-bind:class="{open:opened_dialog=='zones'}" v-on:click="open_dialog('zones')" title="<%=__("tool_zones")%>">
@@ -84,7 +72,7 @@
         <%- include("./zones.html") %>
       </div>
     </div>
-    
+
     <button class="btn btn-divider" v-show="logged_in"></button>
 
     <div class="dropdown top left center" v-show="logged_in" v-bind:class="{open:opened_dialog=='background'}">
@@ -107,8 +95,8 @@
       <span class="icon icon-share"></span>
       <span class="icon-label"><%= __('share') %></span>
     </button>
-    
-    <!--        
+
+    <!--
             <li v-on:click="edit_space_title()" v-if="logged_in">
               <span>
                 <span class="icon icon-sm icon-tag"></span>

views/partials/tool/toolbar-object.html

@@ -40,7 +40,7 @@
 
     <button class="btn btn-divider"></button>
     -->
-    
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='text-styles'}">
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-styles')" v-bind:class="{open : opened_dialog=='text-styles'}" title="<%=__("tool_styles")%>">
@@ -53,7 +53,7 @@
         <%- include("./text-styles.html") %>
       </div>
     </div>
-    
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='type-align'}">
       <div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('type-align')" v-bind:class="{open : opened_dialog=='type-align'}" title="<%=__("tool_align")%>">
@@ -80,9 +80,9 @@
         <%- include("./layout.html") %>
       </div>
     </div>
-    
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='text-settings'}">
-      
+
       <div class="btn-collapse in">
         <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('text-settings')" v-bind:class="{open : opened_dialog=='text-settings'}" title="<%=__("tool_font")%>">
           <span class="icon icon-text-typeface"></span>
@@ -97,6 +97,17 @@
 
     <button class="btn btn-divider"></button>
 
+    <div class="dropdown bottom light center">
+      <div class="btn-collapse" v-bind:class="{in:selection_metrics.contains_text}">
+        <button
+          class="btn btn-icon-labeled btn-transparent"
+          v-on:click="delayed_edit_artifact()">
+          <span class="icon icon-pencil"></span>
+          <span class="icon-label"><%=__("tool_edit_text")%></span>
+        </button>
+      </div>
+    </div>
+
     <div class="dropdown top light right" v-bind:class="{open:opened_dialog=='object-options'}">
       <button class="btn btn-transparent btn-icon-labeled" v-on:click="open_dialog('object-options')" v-bind:class="{open : opened_dialog=='object-options'}">
         <span class="icon icon-cogwheel"></span>
@@ -107,6 +118,6 @@
         <%- include("./object-options.html") %>
       </div>
     </div>
-    
+
   </div>
 </div>