Improving CSS for alerts + Fixing bug for nested folders + Adding fol…

…der-name edit
Shashwat986 · Jul 8, 2017 · 5891ad6 · 5891ad6
1 parent 88d65aa
commit 5891ad6
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 12 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -12,6 +12,12 @@
         padding-top: 50px;
         padding-bottom: 20px;
       }
+
+      .bg-danger, .bg-success {
+        position: absolute;
+        left: 0;
+        right: 0;
+      }
     </style>
   </head>
   <body>

diff --git a/src/js/store/folder_model.js b/src/js/store/folder_model.js
@@ -78,8 +78,13 @@ class FolderModel {
     });
   }
 
-  getNode (key) {
-    return this.root.children.find((elem) => {
+  getNode (key, tNode = null) {
+    let node = tNode;
+    if (node === null) {
+      node = this.root;
+    }
+
+    return node.children.find((elem) => {
       return (elem.model.name === key || elem.model.uuid === key);
     });
   }

diff --git a/src/js/views/file_item.vue b/src/js/views/file_item.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="col-xs-6 col-md-4 panel-container"
+    class="col-xs-6 col-md-4 panel-container file-panel"
     draggable="true"
     @dragstart="dragStart"
     @dragend="dragEnd">
@@ -94,7 +94,7 @@ module.exports = {
   overflow-x: hidden;
 }
 
-h3.panel-title {
+.file-panel h3.panel-title {
   overflow-x: hidden;
   text-overflow: ellipsis;
   line-height: 1.25em;

diff --git a/src/js/views/folder_item.vue b/src/js/views/folder_item.vue
@@ -1,17 +1,29 @@
 <template>
   <div
-    class="col-xs-6 col-md-4 panel-container"
+    class="col-xs-6 col-md-4 panel-container folder-panel"
     @dragover.prevent
     @drop="drop">
     <div class="panel panel-default">
       <div class="panel-heading">
         <template v-if="typeof folder === 'object'">
-          <router-link :to="getFolderUrl(folder.model.name)">
-            <h3 class="panel-title">{{folder.model.name}}</h3>
-          </router-link>
+          <template v-if="showEditBox">
+            <h3 :class="['panel-title', 'form-group', {'has-error': editBoxHasError}]">
+              <input :value="folder.model.name" @keyup.enter="updateName" class="form-control"/>
+            </h3>
+          </template>
+          <template v-else>
+            <router-link :to="getFolderUrl(folder.model.name)">
+              <h3 class="panel-title">
+                {{folder.model.name}}
+              </h3>
+            </router-link>
+          </template>
+          <span class="pull-right pointer" @click="openEditBox">Edit</span>
         </template>
         <template v-else>
-          <h3 class="panel-title">New</h3>
+          <a @click="addFolder" class="pointer">
+            <h3 class="panel-title">New Folder</h3>
+          </a>
         </template>
       </div>
     </div>
@@ -21,6 +33,12 @@
 <script>
 module.exports = {
   props: ['folder', 'current-path'],
+  data () {
+    return {
+      showEditBox: false,
+      editBoxHasError: false
+    };
+  },
   computed: {
     folderJSON () {
       return this.$store.state.gistux.folderJSON;
@@ -30,9 +48,45 @@ module.exports = {
     getFolderUrl (key) {
       return `${(this.$route.params.path || '/list')}/${key}`;
     },
+    addFolder () {
+      return this.folderJSON.addFolder(null, this.currentPath);
+      this.$store.dispatch('updateGistUXConfig');
+    },
+    updateName (e) {
+      const newFolderName = e.currentTarget.value;
+      if (newFolderName === this.folder.model.name) {
+        this.closeEditBox();
+        return;
+      }
+
+      // TODO: Move this to FolderModel
+      const folderNames = this.folderJSON.
+        getFolders(this.folder.parent).
+        map((folder) => {
+          // To ensure that the same filename isn't rejected
+          if (folder.model === this.folder.model)
+            return null;
+          return folder.model.name;
+        });
+
+      if (folderNames.includes(newFolderName)) {
+        this.editBoxHasError = true;
+      } else {
+        this.folder.model.name = newFolderName;
+        this.$store.dispatch('updateGistUXConfig');
+        this.closeEditBox();
+      }
+    },
+    openEditBox () {
+      this.showEditBox = true;
+    },
+    closeEditBox () {
+      this.editBoxHasError = false;
+      this.showEditBox = false;
+    },
     drop (e) {
       const obj = JSON.parse(e.dataTransfer.getData('json'));
-      const fileNode = this.folderJSON.getNode(obj.fileId);
+      const fileNode = this.folderJSON.getNode(obj.fileId, this.currentPath);
       let currentFolder = this.folder;
       if (this.folder === 'new') {
         currentFolder = this.folderJSON.addFolder(null, this.currentPath);
@@ -50,10 +104,12 @@ module.exports = {
   overflow-x: hidden;
 }
 
-h3.panel-title {
+.folder-panel h3.panel-title {
   overflow-x: hidden;
   text-overflow: ellipsis;
   line-height: 1.25em;
   white-space: nowrap;
+  max-width: 75%;
+  display: inline-block;
 }
 </style>
diff --git a/src/js/views/list.vue b/src/js/views/list.vue
@@ -20,7 +20,7 @@
     <template v-for="(node, index) in tree.getFolders(currentPath)">
       <div class="col-xs-12 visible-xs-block visible-sm-block clearfix" v-if="index % 2 == 0"></div>
       <div class="col-md-12 visible-md-block visible-lg-block clearfix" v-if="index % 3 == 0"></div>
-      <folder-item :key="index" :folder="node"></folder-item>
+      <folder-item :key="index" :folder="node" :current-path="currentPath"></folder-item>
     </template>
     <folder-item key="new" folder="new" :current-path="currentPath"></folder-item>
   </div>