mockup/master: Improve the UI and functionality of the find command.

Repository: mockup
Branch: refs/heads/master
Date: 2017-06-28T14:10:54-05:00
Author: Oshane Bailey (b4oshany) <[email protected]>
Commit: https://github.com/plone/mockup/commit/8918bdb40ac9cfe195974c33bf410335f054bf2a

Improve the UI and functionality of the find command.

Files changed:
M mockup/js/bundles/filemanager.js
M mockup/js/ui/templates/dropdown.xml
M mockup/js/ui/views/dropdown.js
M mockup/patterns/filemanager/js/findinfiles.js
M mockup/patterns/filemanager/pattern.filemanager.less
M mockup/patterns/filemanager/pattern.js

diff --git a/mockup/js/bundles/filemanager.js b/mockup/js/bundles/filemanager.js
index 18c3b196..84778497 100644
--- a/mockup/js/bundles/filemanager.js
+++ b/mockup/js/bundles/filemanager.js
@@ -1,6 +1,6 @@
 define([
   'pat-registry',
-  'mockup-patterns-filemanager'
+  'mockup-patterns-filemanager',
 ], function(registry) {
   'use strict';
   // initialize only if we are in top frame
diff --git a/mockup/js/ui/templates/dropdown.xml b/mockup/js/ui/templates/dropdown.xml
index ffb2492a..34c20d25 100644
--- a/mockup/js/ui/templates/dropdown.xml
+++ b/mockup/js/ui/templates/dropdown.xml
@@ -1,5 +1,6 @@
 
-<a style="padding-top: 8px" href="#" class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+<a href="#" class="btn btn-default dropdown-toggle" type="button" id="dropdown-menu-" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+  <span class="glyphicon glyphicon-search"></span>
   <span class="dropdown-title">
 
   </span>
diff --git a/mockup/js/ui/views/dropdown.js b/mockup/js/ui/views/dropdown.js
index 53cddacb..90eb79f9 100644
--- a/mockup/js/ui/views/dropdown.js
+++ b/mockup/js/ui/views/dropdown.js
@@ -9,6 +9,7 @@ define([
   var DropdownView = ButtonGroup.extend({
     idPrefix: 'btngroup-dropdown-',
     template: DropdownTemplate,
+    className: 'btn-group-dropdown',
     itemContainer: "ul.dropdown-content",
     title: null,
 
diff --git a/mockup/patterns/filemanager/js/findinfiles.js b/mockup/patterns/filemanager/js/findinfiles.js
index 904741f9..32b4dd80 100644
--- a/mockup/patterns/filemanager/js/findinfiles.js
+++ b/mockup/patterns/filemanager/js/findinfiles.js
@@ -48,7 +48,10 @@ define([
       var $item = $(file_item);
       $('a', $item).click(function(e) {
         e.preventDefault();
-        self.findinfiles($(this).attr("data-target"));
+        self.findinfiles(
+          $(this).attr("data-target"),
+          parseInt($(this).attr("target-line"))
+        );
       });
       self.$results.append($item);
     },
@@ -115,7 +118,7 @@ define([
       });
       return self;
     },
-    findinfiles: function(resource) {
+    findinfiles: function(resource, line) {
       var self = this;
       self.app.doAction('getFile', {
         data: {
@@ -124,7 +127,7 @@ define([
         dataType: 'json',
         success: function(data) {
           self.app.fileData[resource] = data;
-          self.app.openEditor(resource);
+          self.app.openEditor(resource, {goToLine: line});
         }
       });
     }
diff --git a/mockup/patterns/filemanager/pattern.filemanager.less b/mockup/patterns/filemanager/pattern.filemanager.less
index c37f28ac..85d01cdc 100644
--- a/mockup/patterns/filemanager/pattern.filemanager.less
+++ b/mockup/patterns/filemanager/pattern.filemanager.less
@@ -43,6 +43,10 @@
     .btn-primary:extend(.btn-primary all){}
     .btn-group:extend(.btn-group all){}
     .btn-success:extend(.btn-success all){}
+    .btn-group-dropdown:extend(.btn-group all){
+        display: inline-block;
+        margin: 0 !important;
+    }
     .input-group:extend(.input-group all){}
     .input-group-addon:extend(.input-group-addon all){}
     .input-group-btn:extend(.input-group-btn all){}
@@ -117,6 +121,33 @@
             margin-bottom: 0.5em;
             text-decoration: none;
         }
+        .btn-group > .btn-group-dropdown{
+            float: none;
+            display: inline-block;
+            text-decoration: none;
+
+            & > a.btn {
+                margin-bottom: 0.5em;
+                border-radius: 0;
+                float: none;
+                display: inline-block;
+                text-decoration: none;
+                padding: 5px 5px 8px 5px;
+                line-height: 10px;
+                font-size: 13px;
+            }
+
+            &:last-child > a.btn{
+                border-bottom-right-radius: 4px;
+                border-top-right-radius: 4px;
+            }
+
+            &:first-child > a.btn{
+                border-bottom-left-radius: 4px;
+                border-top-left-radius: 4px;
+            }
+
+        }
     }
     .navbar-default {
         min-height: 250px
diff --git a/mockup/patterns/filemanager/pattern.js b/mockup/patterns/filemanager/pattern.js
index 3bcc6e2a..c36020e7 100644
--- a/mockup/patterns/filemanager/pattern.js
+++ b/mockup/patterns/filemanager/pattern.js
@@ -96,6 +96,7 @@ define([
       self.options.treeConfig = $.extend(true, {}, self.treeConfig, {
         dataUrl: self.options.actionUrl + '?action=dataTree',
         dragAndDrop: true,
+        useContextMenu: true,
         onCreateLi: function(node, li) {
           var imageTypes = ['png', 'jpg', 'jpeg', 'gif', 'ico'];
           var themeTypes = ['css', 'html', 'htm', 'txt', 'xml', 'js', 'cfg', 'less'];
@@ -120,65 +121,73 @@ define([
         icon: 'floppy-disk',
         context: 'primary'
       });
-
-      var newFolderView = new NewFolderView({
-        triggerView: new ButtonView({
+      self.btns = {
+        "newfolder": new ButtonView({
           id: 'newfolder',
           title: _t('New folder'),
           tooltip: _t('Add new folder to current directory'),
           icon: 'folder-open',
           context: 'default'
         }),
-        app: self
-      });
-      var addNewView = new AddNewView({
-        triggerView: new ButtonView({
+        "newfile": new ButtonView({
           id: 'addnew',
           title: _t('Add new file'),
           tooltip: _t('Add new file to current folder'),
           icon: 'file',
           context: 'default'
         }),
-        app: self
-      });
-      var findFileView = new FindFileView({
-        triggerView: new AnchorView({
+        "findfile": new AnchorView({
           id: 'findfile',
           title: _t('Find File'),
           tooltip: _t('Find theme resource in plone'),
           icon: 'file',
           context: 'default'
         }),
-        app: self
-      });
-      var findinFilesView = new FindInFilesView({
-        triggerView: new AnchorView({
+        "findtextinfile": new AnchorView({
           id: 'findinfiles',
           title: _t('Find in Files'),
           tooltip: _t('Find text within theme resource in plone'),
           icon: 'file',
           context: 'default'
         }),
-        app: self
-      });
-      var renameView = new RenameView({
-        triggerView: new ButtonView({
+        "rename": new ButtonView({
           id: 'rename',
           title: _t('Rename'),
           tooltip: _t('Rename currently selected resource'),
           icon: 'random',
           context: 'default'
         }),
-        app: self
-      });
-      var deleteView = new DeleteView({
-        triggerView: new ButtonView({
+        "delete": new ButtonView({
           id: 'delete',
           title: _t('Delete'),
           tooltip: _t('Delete currently selected resource'),
           icon: 'trash',
           context: 'danger'
-        }),
+        })
+      };
+
+      var newFolderView = new NewFolderView({
+        triggerView: self.btns["newfolder"],
+        app: self
+      });
+      var addNewView = new AddNewView({
+        triggerView: self.btns["newfile"],
+        app: self
+      });
+      var findFileView = new FindFileView({
+        triggerView: self.btns["findfile"],
+        app: self
+      });
+      var findinFilesView = new FindInFilesView({
+        triggerView: self.btns["findfile"],
+        app: self
+      });
+      var renameView = new RenameView({
+        triggerView: self.btns["rename"],
+        app: self
+      });
+      var deleteView = new DeleteView({
+        triggerView: self.btns["delete"],
         app: self
       });
 
@@ -582,12 +591,15 @@ define([
         failure: options.failure || function() {}
       });
     },
-    openEditor: function(path) {
+    openEditor: function(path, options) {
       var self = this;
 
       if (path !== undefined) {
         self.updateTabs(path);
       }
+      if (options === undefined) {
+        options = {};
+      }
 
       // first we need to save the current editor content
       if (self.currentPath) {
@@ -624,6 +636,10 @@ define([
       }
 
       self.resizeEditor();
+      if(options.goToLine != undefined){
+        self.ace.editor.gotoLine(options.goToLine, 0, true);
+      }
+
       self.$el.trigger('fileChange');
       self.ace.editor.on('change', function() {
         if (self.ace.editor.curOp && self.ace.editor.curOp.command.name) {



------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot