set focal point for images

zero.Web.UI/App/pages/media/upload.vue

@@ -2,9 +2,10 @@
   <div class="media-upload">
 
     <div v-if="entity.source" class="media-upload-preview" :data-type="entity.type">
-      <a :href="entity.source" target="_blank" v-if="entity.type === 'image'" class="media-upload-preview-image media-bg-pattern">
+      <span ref="image" v-if="entity.type === 'image'" class="media-upload-preview-image media-bg-pattern" @click="setFocalPoint" @dblclick="entity.focalPoint = null">
+        <span class="media-upload-preview-focal-point" :style="getFocalPointStyle(entity.focalPoint)"></span>
         <img :src="entity.previewSource" :alt="entity.name" />
-      </a>
+      </span>
       
       <a :href="entity.source" target="_blank" v-if="entity.type === 'file'" class="media-upload-preview-file">
         <i :class="icons[entity.type]" :data-extension="entity.source.split('.').pop()"></i>
@@ -16,6 +17,7 @@
     </div>
 
     <div v-if="entity.source">
+      <a :href="entity.source" target="_blank" v-if="entity.type === 'image'" class="ui-link media-upload-preview-remove">Open</a>
       <button type="button" class="ui-link media-upload-preview-remove" @click="removeFile">Remove file</button>
     </div>
 
@@ -82,6 +84,28 @@
           });
         });
       },
+
+      getFocalPointStyle(point)
+      {
+        return {
+          display: 'inline-block',
+          left: (point ? point.left : 0.5) * 100 + '%',
+          top: (point ? point.top : 0.5) * 100 + '%'
+        }
+      },
+
+      setFocalPoint(ev)
+      {
+        let image = this.$refs.image.getBoundingClientRect();
+        let point = { x: ev.pageX - image.x, y: ev.pageY - image.y };
+        const left = +(point.x / image.width).toFixed(2);
+        const top = +(point.y / image.height).toFixed(2);
+
+        this.entity.focalPoint =  {
+          left: left < 0 ? 0 : (left > 1 ? 1 : left),
+          top: top < 0 ? 0 : (top > 1 ? 1: top)
+        };
+      }
     }
   }
 </script>
@@ -98,6 +122,10 @@
     border-radius: var(--radius);
     background: var(--color-bg-dim);
     display: inline-block;
+    position: relative;
+    cursor: pointer;
+    overflow: visible;
+    user-select: none;
 
     img
     {
@@ -108,6 +136,11 @@
       position: relative;
       z-index: 1;
     }
+
+    /*&:hover img
+    {
+      opacity: 0.7;
+    }*/
   }
 
   .media-upload-preview-file
@@ -135,9 +168,25 @@
     }
   }
 
+  .media-upload-preview-focal-point
+  {
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    margin: -8px 0 0 -8px;
+    width: 16px;
+    height: 16px;
+    border-radius: 20px;
+    background: white;
+    border: 3px solid #222;
+    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
+    z-index: 2;
+  }
+
   .media-upload-preview-remove
   {
-    margin-right: 2px;
+    margin-right: 8px;
     margin-top: 10px;
   }
 

zero.Web.UI/Sass/Modules/_link.scss

@@ -1,14 +1,14 @@
 
 
-.ui-link
+.ui-link, a.ui-link
 {
   color: var(--color-fg-dim);
-  text-decoration: underline dotted var(--color-fg-dim);
+  text-decoration: underline dotted var(--color-fg-dim) !important;
   text-underline-offset: 3px;
 
   &.is-primary
   {
     color: var(--color-primary);
-    text-decoration-color: var(--color-primary);
+    text-decoration-color: var(--color-primary) !important;
   }
 }