add drag and drop element to page

4xmen · May 18, 2021 · 4f292d7 · 4f292d7
1 parent e50922a
commit 4f292d7
Show file tree

Hide file tree

Showing 10 changed files with 424 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "anubias",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "description": "anubias desktop application",
   "author": {
@@ -31,6 +31,7 @@
     "path": "^0.12.7",
     "vazir-font": "^28.0.0",
     "vue": "^2.6.11",
+    "vue-easy-dnd": "^1.10.2",
     "vue-router": "^3.5.1"
   },
   "devDependencies": {

diff --git a/src/App.vue b/src/App.vue
@@ -33,22 +33,23 @@ export default {
     window.api.receive("message", (data) => {
       switch (data.type) {
         case 'warning':
-          window.alertify.warning(data.msg);
+          window.alertify.warning(data.msg,10);
           break;
         case 'error':
-          window.alertify.error(data.msg);
+          window.alertify.error(data.msg,10);
           break;
         case 'success':
-          window.alertify.success(data.msg);
+          window.alertify.success(data.msg,10);
           break;
         default:
-          window.alertify.message(data.msg);
+          window.alertify.message(data.msg,10);
       }
     });
   }
 }
 </script>
 
 <style>
-
+  #app{
+  }
 </style>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
@@ -80,3 +80,78 @@ label{
     color: black;
 }
 
+.inactive{
+    opacity: 0.025;
+}
+
+/*dnd fix*/
+
+.drag {
+    /*border: 1px solid rgba(220, 220, 255,.2);*/
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 33%;
+    text-align: center;
+    transition: all 0.5s;
+}
+
+.drop {
+    margin: 20px 10px;
+    height: 80px;
+    border: 2px dashed rgba(0,0,0,0.2);
+    position: relative;
+}
+
+.drop::before {
+    font-size: 15px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-weight: bold;
+    opacity: 0.2;
+    white-space: nowrap;
+}
+
+.drop.visual::before {
+    content: "viual component";
+}
+
+.drop.non-visual::before {
+    content: "non-visual component";
+}
+
+.drop.any::before {
+    content: "CUT ANY NUMBERS";
+}
+
+.drop-allowed {
+    background-color: rgba(0, 255, 0, 0.2);
+}
+
+.drop-forbidden {
+    background-color: rgba(255, 0, 0, 0.2);
+}
+
+.drop-in {
+    box-shadow: 0 0 5px rgba(0, 0, 255, 0.4);
+}
+
+
+.list-enter,
+.list-leave-to {
+    opacity: 0;
+}
+
+.list-leave-active {
+    position: absolute;
+}
+
+.ajs-message{
+    background: #4285f4;
+    color: black;
+}
+.ajs-warning{
+    color: red;
+}
diff --git a/src/assets/js/winVars.js b/src/assets/js/winVars.js
@@ -20,6 +20,7 @@ window.project = {
 window.devices = require('../json/devices.json').data;
 window.colors = require('../json/colors.json').data;
 window.material_icons = require('../json/mateialIcons.json').data;
+window.components = require('../json/components.json').data;
 window.defaults = {};
 window.defaults.page = require('../json/defaults/defPage.json');
 window.defaults.preloader = require('../json/defaults/defPreloader.json');
diff --git a/src/assets/json/components.json b/src/assets/json/components.json
@@ -0,0 +1,193 @@
+{
+  "data": [
+    {
+      "title": "Preloader",
+      "icon": "fa fa-spinner",
+      "active": true,
+      "visual": true,
+      "data": "window.defaults.preloader"
+    },
+    {
+      "title": "Container",
+      "icon": "far fa-square",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.container"
+    },
+    {
+      "title": "AppBar",
+      "icon": "far fa-window-maximize",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.appbar"
+    },
+    {
+      "title": "AppBar",
+      "icon": "far fa-window-maximize",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.appbar"
+    },
+    {
+      "title": "Image",
+      "icon": "far fa-image",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.image"
+    },
+    {
+      "title": "Icon",
+      "icon": "far fa-smile",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.icon"
+    },
+    {
+      "title": "Text",
+      "icon": "fas fa-font",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.text"
+    },
+    {
+      "title": "Column",
+      "icon": "fas fa-bars",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.column"
+    },
+    {
+      "title": "Row",
+      "icon": "fas fa-bars fa-rotate-90",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.row"
+    },
+    {
+      "title": "Nav",
+      "icon": "far fa-window-maximize fa-rotate-180",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.nav"
+    },
+    {
+      "title": "List",
+      "icon": "fa fa-list",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.list"
+    },
+    {
+      "title": "Dropdown",
+      "icon": "fa fa-prescription-bottle",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.dropdown"
+    },
+    {
+      "title": "Input",
+      "icon": "fab fa-yoast",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.input"
+    },
+    {
+      "title": "Button",
+      "icon": "far fa-plus-square",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.button"
+    },
+    {
+      "title": "Toggle",
+      "icon": "fa fa-toggle-on",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.toggle"
+    },
+    {
+      "title": "Menu",
+      "icon": "fa fa-list-alt",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.menu"
+    },
+    {
+      "title": "Grid",
+      "icon": "fa fa-th",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.grid"
+    },
+    {
+      "title": "Rate",
+      "icon": "fa fa-star",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.rate"
+    },
+    {
+      "title": "Rate",
+      "icon": "fa fa-star",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.rate"
+    },
+    {
+      "title": "Calendar",
+      "icon": "fa fa-calendar-alt",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.calendar"
+    },
+    {
+      "title": "DatePicker",
+      "icon": "fa fa-calendar-check",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.datepicker"
+    },
+    {
+      "title": "Image Picker",
+      "icon": "fa fa-file-image",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.imagepicker"
+    },
+    {
+      "title": "File Picker",
+      "icon": "fa fa-folder-open",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.filepicker"
+    },
+    {
+      "title": "Map",
+      "icon": "fa fa-map",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.map"
+    },
+    {
+      "title": "Location",
+      "icon": "fa fa-map-marker-alt",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.location"
+    },
+    {
+      "title": "Slider",
+      "icon": "fa fa-ellipsis-h",
+      "active": false,
+      "visual": true,
+      "data": "window.defaults.slider"
+    },
+    {
+      "title": "Timer",
+      "icon": "fa fa-stopwatch",
+      "active": false,
+      "visual": false,
+      "data": "window.defaults.timer"
+    }
+  ]
+}
diff --git a/src/assets/json/defaults/defPage.json b/src/assets/json/defaults/defPage.json
@@ -6,5 +6,8 @@
   "bgColor": "Colors.transparent",
   "padding": "15",
   "align": "center",
-  "children": []
+  "children": {
+    "visual": [],
+    "nonvisual": []
+  }
 }
diff --git a/src/assets/json/defaults/defPreloader.json b/src/assets/json/defaults/defPreloader.json
@@ -1,4 +1,5 @@
 {
+  "type": "preloader",
   "name": "preloader",
   "padding": "10",
   "align": "center",