cleanup drag handle example

2020-11-25 17:58:53 +01:00
parent b7ca33aeae
commit fd94e321ea
9 changed files with 80 additions and 118 deletions
--- a/docs/src/demos/Examples/DragHandle/Component.vue
+++ b/docs/src/demos/Examples/DragHandle/Component.vue
@@ -0,0 +1,57 @@
+<template>
+  <node-view-wrapper class="draggable-item">
+    <div class="drag-handle" contenteditable="false" data-drag-handle />
+    <node-view-content class="content" />
+  </node-view-wrapper>
+</template>
+
+<script>
+export default {
+  props: {
+    editor: {
+      type: Object,
+      required: true,
+    },
+
+    node: {
+      type: Object,
+      required: true,
+    },
+
+    updateAttributes: {
+      type: Function,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.draggable-item {
+  display: flex;
+  padding: 0.5rem;
+  margin: 0.5rem 0;
+  border-radius: 0.5rem;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0px 10px 20px rgba(0, 0, 0, 0.1),
+  ;
+
+  .drag-handle {
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    top: 0.3rem;
+    margin-right: 0.5rem;
+    cursor: grab;
+    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 16"><path fill-opacity="0.2" d="M4 14c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zM2 6C.9 6 0 6.9 0 8s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6C.9 0 0 .9 0 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" /></svg>');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+  }
+
+  .content {
+    flex: 1 1 auto;
+  }
+}
+</style>