Merge branch 'css' of github.com:teamprevue/PreVue

public/index.html

@@ -5,10 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-    />
+
     <link
       rel="stylesheet"
       href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"

src/components/ComponentCodeDisplay.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <p class="panel-heading">{{ clickedComponent }} Code Display</p>
     <div id="codeDisplay"></div>
   </div>
 </template>
@@ -75,4 +76,8 @@ export default {
 .nested {
   white-space: pre;
 }
+
+#codeDisplay {
+  background-color: aqua;
+}
 </style>

src/components/ComponentDisplay.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="component-display">
     <ProjectTabs id="project-tabs"></ProjectTabs>
-    <div style="height: 800px; width: 800px; border: 1px solid red; position: relative;">
+    <div
+      style="height: 800px; width: 800px; border: 1px solid red; position: relative;"
+    >
       <VueDraggableResizable
         class-name="component-box"
         v-for="[componentName, componentData] in Object.entries(
@@ -17,32 +19,30 @@
         @dragging="onDrag"
         @resizing="onResize"
         :parent="true"
-        @dblclick.native="handleDoubleClick"
+        @dblclick.native="doubleClick"
       >
         <h3>{{ componentName }}</h3>
-        <br>
+        <br />
         X: {{ componentData.x }} / Y: {{ componentData.y }} - Width:
         {{ componentData.w }} / Height: {{ componentData.h }}
       </VueDraggableResizable>
-      <modals-container></modals-container>
-      <ComponentModal :modalWidth="800" :modalHeight="900"/>
     </div>
   </div>
 </template>
 <script>
 import { mapState } from 'vuex';
+// import LoadingBar from './LoadingBar.vue';
 import ProjectTabs from '@/components/ProjectTabs';
-import ComponentModal from './ComponentModal.vue';
 import { setComponentMap, getPrevState } from '../store/types';
 import localforage from 'localforage';
 import VueDraggableResizable from 'vue-draggable-resizable';
+import ModalView from '@/views/ModalView';
+import { ModalProgrammatic } from 'buefy/dist/components/modal';
 
 export default {
   name: 'ComponentDisplay',
   components: {
     VueDraggableResizable,
-    // LoadingBar,
-    ComponentModal,
     ProjectTabs
   },
   data() {
@@ -95,14 +95,6 @@ export default {
       this.componentMap[this.clickedComponent].x = x;
       this.componentMap[this.clickedComponent].y = y;
     },
-    getRandomColor() {
-      var letters = '0123456789ABCDEF';
-      var color = '#';
-      for (var i = 0; i < 6; i++) {
-        color += letters[Math.floor(Math.random() * 16)];
-      }
-      return color;
-    },
     onActivated(componentName) {
       this.handleClick(componentName);
       this.abilityToDelete = true;
@@ -115,9 +107,11 @@ export default {
       console.log('CLICKED');
       this.$store.dispatch('setClickedComponent', componentName);
     },
-    handleDoubleClick() {
-      console.log('DOUBLE CLICKED');
-      this.$modal.show('demo-login');
+    doubleClick() {
+      ModalProgrammatic.open({
+        parent: this,
+        component: ModalView
+      });
     }
   }
 };
@@ -126,7 +120,6 @@ export default {
 <style scoped>
 .component-display {
   border: 1px solid palegreen;
-  /* background-color: #d4d4dc; */
 }
 
 .component-box {
@@ -142,4 +135,9 @@ export default {
   color: #d4d4dc;
   border: 1px solid #d4d4dc;
 }
+
+.component-box {
+  color: white;
+  border: 1px solid salmon;
+}
 </style>

src/components/EditQueue.vue

@@ -1,9 +1,28 @@
 <template>
   <div>
+    <!-- <p class="panel-heading">selected elements</p>
+    <draggable
+      v-model="renderList"
+      group="people"
+      @start="drag = true"
+      @end="drag = false"
+    >
+      <li
+        class="list-group-item"
+        v-for="(element, index) in renderList"
+        :key="index + Date.now()"
+      >
+        <span>{{ element }}</span>
+
+        <i class="fas fa-save fa-lg" @click="deleteElement(index)"></i>
+      </li>
+    </draggable>-->
+    <p class="panel-heading">Selected Elements</p>
     <Tree :data="renderList" draggable="draggable" cross-tree="cross-tree">
       <div slot-scope="{ data }" class="white --text">
         <template v-if="!data.isDragPlaceHolder">
           <span>{{ data.text }}</span>
+          <i class="fas fa-save fa-lg" @click="deleteElement(index)"></i>
         </template>
       </div>
     </Tree>
@@ -47,4 +66,18 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped>
+li {
+  list-style-type: none;
+}
+.list-group-item {
+  margin-top: 5px;
+  border: 1px solid black;
+  border-radius: 0.5cm;
+  background-color: #d1bfa7;
+}
+
+.delete-icon:hover {
+  cursor: pointer;
+}
+</style>

src/components/EditSideBar.vue

@@ -1,79 +1,38 @@
 <template>
-  <div class="sidebar">
-    <h1 class="headline green--text text--accent-2">
-      Edit {{ clickedComponent }}
-    </h1>
+  <div class="home-sidebar">
+    <p class="panel-heading">Edit {{ clickedComponent }}</p>
 
-    <v-form class="px-3">
-      <section>
-        <Icons @getClickedIcon="addToComponentElementList" />
-      </section>
-    </v-form>
-
-    <section>
-      <!-- <button @click="consoleMap">Click</button> -->
-      <h1 class="headline purple--text text--accent-2">Selected Elements</h1>
-      <hr />
-      <EditQueue />
-      <v-select
-        v-model="selectedChildren"
-        :items="
-          Object.keys(componentMap).filter(
-            comp => comp !== clickedComponent && comp !== 'App'
-          )
-        "
-        label="Select"
-        multiple
-        chips
-        hint="Select child components"
-        persistent-hint
-      ></v-select>
-    </section>
+    <Icons @getClickedIcon="addToComponentElementList" />
   </div>
 </template>
 
 <script>
 import Icons from './Icons';
-import EditQueue from './EditQueue';
 import { mapState } from 'vuex';
 import * as types from '../store/types.js';
 
 export default {
-  name: 'EditSideBar',
+  name: 'EditSidebar',
+
   components: {
-    Icons,
-    EditQueue
+    Icons
   },
-  props: ['header', 'name'],
   computed: {
     ...mapState(['clickedComponent', 'componentMap']),
     selectedChildren: {
       get() {
         return this.$store.state.componentMap[this.clickedComponent].children;
       },
       set(newArray) {
-        console.log(newArray);
         const payload = { name: this.clickedComponent, newArray };
         this.$store.commit(types.UPDATE_CHILDREN, payload);
       }
     }
   },
   methods: {
-    consoleMap() {
-      console.log(this.selectedChildren);
-    },
     addToComponentElementList(elementName) {
       this.$store.dispatch(types.addToComponentElementList, elementName);
     }
   }
 };
 </script>
-
-<style scoped>
-.sidebar {
-  /* padding-right: 20px; */
-  border-right: 1px solid;
-  border-right-color: white;
-  color: black;
-}
-</style>

src/components/HomeQueue.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="home-queue">
-    <p class="panel-heading">selected elements</p>
+    <p class="panel-heading">Selected Elements</p>
     <draggable
       v-model="renderList"
       group="people"
@@ -16,9 +16,7 @@
       >
         <span>{{ element.text }}</span>
 
-        <v-icon class="delete-icon" @click="deleteElement(index)"
-          >remove_circle_outline</v-icon
-        >
+        <i class="fas fa-save fa-lg" @click="deleteElement(index)"></i>
       </li>
     </draggable>
   </section>

src/components/HomeSidebar.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="home-sidebar">
-    <section class="add-component-display">
-      <b-field label="Create a Component">
-        <b-input v-model="componentName" placeholder="Component name"></b-input>
-      </b-field>
-      <Icons @getClickedIcon="addToSelectedElementList" />
+    <p class="panel-heading">Create a component</p>
 
-      <button
-        class="button is-primary"
-        @click="addComponent"
-        :disabled="!componentName"
-      >
-        Add Component
-      </button>
-    </section>
+    <b-input v-model="componentName" placeholder="Component name"></b-input>
+
+    <Icons @getClickedIcon="addToSelectedElementList" />
+
+    <button
+      class="button is-primary"
+      @click="addComponent"
+      :disabled="!componentName"
+    >
+      Add Component
+    </button>
   </div>
 </template>
 

src/components/Icons.vue

@@ -5,7 +5,7 @@
       v-for="([elementName, iconString], idx) in Object.entries(icons)"
       :key="idx + Date.now()"
     >
-      <v-icon>{{ iconString }}</v-icon>
+      <i :class="iconString"></i>
       <br />
       <span class="white--text">{{ elementName }}</span>
     </button>