allura-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From brond...@apache.org
Subject [49/50] [abbrv] allura git commit: [#7919] Make edit-mode sub-menus display correctly
Date Thu, 29 Oct 2015 14:37:31 GMT
[#7919] Make edit-mode sub-menus display correctly


Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/2c4142e4
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/2c4142e4
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/2c4142e4

Branch: refs/heads/db/7919
Commit: 2c4142e4f3e496162a6a01cf98eda99e070959c3
Parents: 6b697c2
Author: Heith Seewald <hseewald@hsmb.local>
Authored: Wed Oct 28 14:00:14 2015 -0400
Committer: Heith Seewald <hseewald@hsmb.local>
Committed: Wed Oct 28 16:54:40 2015 -0400

----------------------------------------------------------------------
 Allura/allura/public/nf/css/navbar.css   | 76 ++++++++++++++++------
 Allura/allura/public/nf/js/navbar.es6.js | 93 +++++++++++++++++----------
 2 files changed, 116 insertions(+), 53 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/2c4142e4/Allura/allura/public/nf/css/navbar.css
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/css/navbar.css b/Allura/allura/public/nf/css/navbar.css
index 097c163..fa0dcf5 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -25,7 +25,7 @@
     width: 918px; /* 940px - 32px for toggle-admin-btn */
 }
 
-#admin-toolbar-list{
+#admin-toolbar-list {
     border-bottom: 1px solid transparent;
 }
 
@@ -34,21 +34,17 @@
     color: gray;
 }
 
-.draggable-handle {
+.draggable-handle, .draggable-handle-sub {
+    float: none;
     margin-left: 2px;
     cursor: move;
 }
 
-.react-reorderable-item {
-    display: inline-flex;
-    float: left;
-}
-
 .react-reorderable-item-active {
     border: 3px dashed #9e9e9e;
     background: #c9c9c9;
     width: 5rem; /* dynamic would be nice */
-    height: 50px;
+    height: 24px;
 }
 
 .react-reorderable-item-active div {
@@ -56,20 +52,11 @@
 }
 
 .react-reorderable-item {
-    display: inline-flex;
+    display: block;
+    flex-direction: column;
     float: left;
 }
 
-.react-reorderable-item-active {
-    border: 3px dashed #9e9e9e;
-    background: #c9c9c9;
-    width: 5rem; /* dynamic would be nice */
-    height: 50px;
-}
-
-.react-reorderable-item-active div {
-    display: none;
-}
 
 .react-reorderable-handle {
     position: absolute;
@@ -79,6 +66,7 @@
     margin: 10px 10px 10px 0;
     border-right: 1px solid #ccc;
     padding-right: 10px;
+    padding-left: 4px;
 }
 
 .react-drag {
@@ -165,7 +153,7 @@
 }
 
 .tool-card::before {
-    content: "▲";
+    content: "â–²";
     color: #4E4E4E;
     font-size: xx-large;
     position: absolute;
@@ -268,6 +256,10 @@
     user-select: none;
 }
 
+.tb-item-edit a {
+    margin-left: 2px;
+}
+
 .add-tool-toggle:hover {
     background: #F4F4F4;
     color: #777;
@@ -276,3 +268,47 @@
 .add-tool-field {
     width: 50%;
 }
+
+.tb-item-grouper > div.tb-sub-menu {
+    visibility: hidden;
+}
+
+.tb-item-grouper > div > div {
+    border-bottom: 1px solid #e5e5e5;
+
+}
+
+.tb-item-grouper:hover > div > div {
+    background: white;
+    visibility: visible;
+}
+
+#top_nav_admin .tb-sub-menu .tb-item a {
+    border-right: none;
+    margin: 3px 20px 0 2px;
+    padding: 5px;
+}
+
+#top_nav_admin .tb-sub-menu a:hover {
+    color: white;
+}
+
+.tb-sub-menu {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    top: 36px;
+    background: white;
+    z-index: 600;
+}
+
+.tb-sub-menu .react-drag:hover {
+    background: #09c linear-gradient(#09c, #07a);
+    border-bottom-style: none;
+    color: white;
+
+}
+
+.tb-sub-menu .react-drag:hover a {
+    color: white;
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/allura/blob/2c4142e4/Allura/allura/public/nf/js/navbar.es6.js
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/js/navbar.es6.js b/Allura/allura/public/nf/js/navbar.es6.js
index e860597..26f72bc 100644
--- a/Allura/allura/public/nf/js/navbar.es6.js
+++ b/Allura/allura/public/nf/js/navbar.es6.js
@@ -56,7 +56,10 @@ function _getToolColor(defaultLabel='standard') {
  * @returns {string}
  */
 function getMountPoint(node) {
-    return node.props.children.props.children.props.mount_point;
+    if(node.hasOwnProperty('mount_point') && node.mount_point !== null){
+        return node['mount_point'];
+    }
+    return node.props.children[0].props.mount_point;
 }
 
 function ToolsPropType() {
@@ -99,13 +102,13 @@ var NavBarItem = React.createClass({
         if (this.props.is_anchored) {
             arrow_classes += ' anchored';
         } else {
-            arrow_classes += ' draggable-handle';
+            arrow_classes += this.props.handleType;
         }
 //controls.push(<i className={arrow_classes}></i>);
         return (
             <div className="tb-item tb-item-edit">
                 <a>{controls}
-                    <span className="draggable-handle">{this.props.name}</span></a>
+                    <span className={this.props.handleType.slice(1)}>{this.props.name}</span></a>
             </div>
         );
     }
@@ -225,40 +228,56 @@ var AdminNav = React.createClass({
         });
     },
 
-    render: function() {
+    buildMenu: function (item, isSubMenu=false) {
         var _this = this;
-        var subMenuClass = this.props.isSubmenu ? ' submenu ' : '';
-        var [tools, anchored_tools, end_tools] = [[], [], [],];
-        this.props.tools.forEach(function(item) {
-            var core_item = <NavBarItem
-                                onMouseOver={ _this.mouseOver }
-                                onMouseOut={ _this.mouseOut } {..._this.props}
-                                data={ item }
-                                mount_point={ item.mount_point }
-                                name={ item.name }
-                                url={ item.url }
-                                key={ 'tb-item-' + _.uniqueId() }
-                                is_anchored={ item.is_anchored || item.mount_point === 'admin'}/>;
-            if (item.mount_point === 'admin') {
-                // force admin to end, just like 'Project.sitemap()' does
-                end_tools.push(core_item);
-            } else if (item.is_anchored) {
-                anchored_tools.push(core_item);
-            } else {
-                tools.push(
-                    <div className={ 'draggable-element' + subMenuClass } key={ 'draggable-'
+ _.uniqueId() }>
-                        { core_item }
-                    </div>
-            );
+        var [tools, anchored_tools, end_tools] = [[], [], []];
+        var subMenu;
+        if (item.children) {
+            subMenu = [];
+            for(let subItem of item.children){
+                subMenu.push(this.buildMenu(subItem, true));
             }
-        });
+            //subMenu = item.children.map(_this.buildMenu);
+        }
 
+
+        var _handle = subMenu ? ".draggable-handle-sub" : '.draggable-handle';
+
+        var classes = subMenu ? 'draggable-element tb-item-grouper' : 'draggable-element';
+        var core_item = <NavBarItem
+            onMouseOver={ _this.mouseOver }
+            onMouseOut={ _this.mouseOut } {..._this.props}
+            data={ item }
+            mount_point={ item.mount_point }
+            name={ item.name }
+            handleType={_handle}
+            url={ item.url }
+            key={ 'tb-item-' + _.uniqueId() }
+            is_anchored={ item.is_anchored || item.mount_point === 'admin'}/>;
+        if (item.mount_point === 'admin') {
+            // force admin to end, just like 'Project.sitemap()' does
+            end_tools.push(core_item);
+        } else if (item.is_anchored) {
+            anchored_tools.push(core_item);
+        } else {
+            tools.push(
+                <div className={classes}>
+                    { core_item }
+                    {subMenu &&
+                        <div className="tb-sub-menu">
+                            {subMenu}
+                        </div>
+                        }
+                </div>
+            );
+        }
+        var _handle = subMenu ? ".draggable-handle-sub" : '.draggable-handle';
         return (
             <div className='react-drag edit-mode'>
                 { anchored_tools }
                 <ReactReorderable
                     key={ 'reorder-' + _.uniqueId() }
-                    handle='.draggable-handle'
+                    handle={_handle}
                     mode='grid'
                     onDragStart={ this.onDragStart }
                     onDrop={ this.props.onToolReorder }
@@ -268,6 +287,15 @@ var AdminNav = React.createClass({
                 { end_tools }
             </div>
         );
+    },
+
+    render: function () {
+        var tools = this.props.tools.map(this.buildMenu);
+        return (
+            <div>
+                {tools}
+            </div>
+        );
     }
 });
 
@@ -389,13 +417,12 @@ var Main = React.createClass({
         var params = {
             _session_id: $.cookie('_session_id')
         };
-
-        data.map(function(tool, i) {
+        tools.menu.map(function(tool, i) {
             var mount_point = getMountPoint(tool);
-            var index = tools.children.findIndex(
+            var index = tools.menu.findIndex(
                 x => x.mount_point === mount_point
             );
-            tools.children[index].ordinal = i;
+            tools.menu[index].ordinal = i;
             params[i] = mount_point;
         });
 


Mime
View raw message