Mailing-List: contact commits-help@allura.apache.org; run by ezmlm
Precedence: bulk
Reply-To: dev@allura.apache.org
Content-Type: text/plain; charset="us-ascii"
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
From: heiths@apache.org
To: commits@allura.apache.org
Message-Id: <e451d2e34ab14c0a8516f9fa74590483@git.apache.org>
Subject: allura git commit: [#7919] Merged with Dave's refactor/enhancments
Date: Thu, 15 Oct 2015 19:41:17 +0000 (UTC)

Repository: allura
Updated Branches:
  refs/heads/hs/7919 a5ab3d942 -> 9590ba2e3


[#7919] Merged with Dave's refactor/enhancments


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

Branch: refs/heads/hs/7919
Commit: 9590ba2e34d1dfd9989a266ac609e939d3f866db
Parents: a5ab3d9
Author: Heith Seewald <hseewald@hsmb.local>
Authored: Thu Oct 15 15:40:27 2015 -0400
Committer: Heith Seewald <hseewald@hsmb.local>
Committed: Thu Oct 15 15:40:27 2015 -0400

----------------------------------------------------------------------
 Allura/allura/public/nf/css/navbar.css   | 154 +++++---------------------
 Allura/allura/public/nf/js/navbar.es6.js | 106 +++++++-----------
 2 files changed, 66 insertions(+), 194 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/allura/blob/9590ba2e/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 0dec309..f3c3336 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -55,10 +55,6 @@ nav {
     margin: auto;
 }
 
-.nav_admin ul {
-    display: flex;
-}
-
 #top_nav_admin > div.edit-mode > ul {
     display: flex;
     flex-direction: row;
@@ -79,7 +75,6 @@ nav {
     display: flex;
 }
 
-
 #top_nav_admin {
     display: grid;
     flex-direction: row;
@@ -90,8 +85,13 @@ nav {
     -ms-border-radius: 4px;
     -khtml-border-radius: 4px;
     border-radius: 4px;
-    width: 940px;
+    width: 918px;  /* 940px - 32px for toggle-admin-btn */
 }
+
+#top_nav_admin .edit-mode .fa {
+    margin: 0 3px;
+}
+
 .btn-bar {
     display: block;
     clear: both;
@@ -127,51 +127,8 @@ li.tb-item-edit > input {
     width: 2.2rem;
 }
 
-li.tb-item-edit > label > i {
-    padding-right: 0.7rem;
-    color: grey;
-    font-size: larger;
-    cursor: move;
-}
-
-div.edit-mode > ul > div.anchored {
-    background: grey;
-}
-
-div.anchored > li.tb-item-edit > label > i {
-    padding-right: 0.7rem;
-    color: #898c89;
-    font-size: larger;
-    cursor: not-allowed;
-}
-
-.react-reorderable-item-active, .draggable-element {
-    height: 28px;
-    width: 120px;
-    margin-top: 5px;
-}
-
-.draggable-element {
-    background-color: rgb(255, 255, 255);
-    border: 1px dashed #B5AFAF;
-    min-width: 100%;
-    border-radius: 3px;
-    width: 9rem;
-    height: 30px;
-}
-
 .draggable-handle {
-    background-color: rgb(126, 125, 125);
-    width: 15%;
-    height: 80%;
-    border-radius: 4px 0 0 4px;
-    margin-top: -2px;
-    margin-left: -2px;
-    z-index: 10000;
     cursor: move;
-    color: white;
-    padding: 3px 3px 4px;
-    border: 1px solid #575656;
 }
 
 ul.dropdown li {
@@ -188,14 +145,14 @@ ul.dropdown li {
 
 .react-reorderable-item {
     display: inline-flex;
-    margin-right: 2%;
-    /* float: left; */
+    float: left;
 }
 
 .react-reorderable-item-active {
     border: 3px dashed #9e9e9e;
     background: #c9c9c9;
-    width: 9rem;
+    width: 5rem; /* dynamic would be nice */
+    height: 50px;
 }
 
 .react-reorderable-item-active div {
@@ -206,23 +163,8 @@ ul.dropdown li {
     position: absolute;
 }
 
-.react-drag > div > div > div > div > div > a {
-    margin-top: 2px;
-    text-align: center;
-    color: #898989;
-    width: 5rem;
-    /* margin-bottom: 10px; */
-    min-width: 100%;
-    overflow-x: hidden;
-    overflow-wrap: break-word;
-    height: 18px;
-    position: relative;
-}
-
-.react-drag > div > div > div > div > div {
-    width: 100%;
-    position: relative;
-    right: -40px;
+#top_nav_admin .tb-item a {
+    margin: 10px;
 }
 
 .react-drag {
@@ -243,13 +185,6 @@ ul.dropdown ul {
     border-top-width: 0;
 }
 
-ul.dropdown ul li a {
-    float: none;
-    display: block;
-    text-align: left;
-    margin-right: 0;
-}
-
 ul.dropdown .hover, ul.dropdown li:hover {
     position: relative;
     z-index: 599;
@@ -258,10 +193,7 @@ ul.dropdown .hover, ul.dropdown li:hover {
 
 .anchored {
     cursor: not-allowed;
-}
-
-#add_tool_menu{
-    position: relative;
+    color: gray;
 }
 
 .tool-partition {
@@ -271,42 +203,35 @@ ul.dropdown .hover, ul.dropdown li:hover {
 }
 
 .installable-tool-box {
-    /* margin: 0 0 15px 50px; */
     list-style: none;
     display: flex;
     background-color: #FFFEFA;
     flex-wrap: wrap;
-    margin-bottom: 0;
-    margin-left: 0;
     justify-content: space-around;
+    margin-left: 0;
+    margin-bottom: 8px;
+    margin-top: -8px;
 }
 
 .installable-tool-box li {
-    /* margin: 5px 10px 20px 60px; */
-    /* margin-left: 80px; */
-    margin-top: 5px;
-    clear: both;
+    margin-top: 15px;
     height: auto;
     border-radius: 4px;
-    /* vertical-align: middle; */
-    /* padding-bottom:10px; */
     padding: 10px;
     text-align: center;
     font-size: medium;
     list-style: none;
     cursor: pointer;
-        border: 1px solid transparent;
-        -webkit-user-select: none;
+    border: 1px solid transparent;
+    -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     -o-user-select: none;
     user-select: none;
-
 }
 .selected-tool{
     background: #09C;
     color: white;
-
 }
 
 .installable-tool-box li:hover {
@@ -314,8 +239,6 @@ ul.dropdown .hover, ul.dropdown li:hover {
     border: 1px solid #09C;
 }
 
-
-
 .installable-tool-box li.selected-tool:hover {
     background: white;
     color: rgb(85, 85, 85);
@@ -329,14 +252,14 @@ ul.dropdown .hover, ul.dropdown li:hover {
     overflow-y: visible;
     margin-bottom: 50px;
     background: white;
-    right: 22px;
-    top: 94px;
+    right: 161px;
+    top: 83px;
     position: absolute;
     z-index: 1000;
 }
 
 .tool-card::before {
-    content: "▲";/* left point triangle in escaped unicode */
+    content: "▲";
     color: #4E4E4E;
     font-size: xx-large;
     position: absolute;
@@ -344,7 +267,6 @@ ul.dropdown .hover, ul.dropdown li:hover {
     top: -14px;
     overflow: visible;
     float: right;
-    /* position: relative; */
     height: 1.5rem;
 }
 
@@ -362,8 +284,6 @@ ul.dropdown .hover, ul.dropdown li:hover {
 
 .tool-info {
     min-height: 15rem;
-    /* padding: 35px 5px 5px 10px; */
-    /* background-color: #40AFD4; */
     display: block;
     clear: both;
 }
@@ -373,12 +293,9 @@ ul.dropdown .hover, ul.dropdown li:hover {
     vertical-align: text-top;
     padding-top: 0;
     left: 0;
-    /* text-shadow: 1px 2px 1px  #444; */
     font-size: large;
     font-weight: 400;
-    margin: 2rem;
-    margin-left: 33px;
-    margin-right: 33px;
+    margin: 2rem 33px;
     color: #CCCBC8;
     padding-bottom: 20px;
 }
@@ -388,7 +305,6 @@ ul.dropdown .hover, ul.dropdown li:hover {
     padding-bottom: 0;
     vertical-align: text-top;
     padding-top: 18px;
-    /* text-shadow: 1px 2px 1px #C8C8C8; */
     left: 0;
     font-size: large;
     background-color: #AEF4FF;
@@ -407,7 +323,6 @@ ul.dropdown .hover, ul.dropdown li:hover {
     right: -30px;
 }
 
-
 .tool-info-left {
     background: #636363;
     width: 60%;
@@ -427,16 +342,6 @@ ul.dropdown .hover, ul.dropdown li:hover {
     top: 0;
 }
 
-.tool-info-right form {
-
-    /* display: grid; */
-    /* position: relative; */
-    /* padding-top: 30px; */
-
-
-
-}
-
 .tool-form {
     display: inline-block;
     width: 100%;
@@ -468,10 +373,7 @@ ul.dropdown .hover, ul.dropdown li:hover {
 
 #add-tool-form{
     padding-top: 20px;
-    /* clear: both; */
     padding-left: 25px;
-    /* width: 20%; */
-    /* display: block; */
     padding-right: 25px;
 }
 
@@ -490,18 +392,13 @@ ul.dropdown .hover, ul.dropdown li:hover {
     background: rgba(255, 255, 255, 0.32);
     clear: both;
     float: right;
-    /* font-size: x-large; */
-    color: #777;
+    color: #B3B3B3;
     font-weight: 900;
-    /* position: absolute; */
-    padding: 3px;
     margin: 1px;
-    padding-top: 5px;
     right: 127px;
     position: absolute;
-    padding-left: 5px;
-    padding-right: 5px;
-    border: 2px dashed #777;
+    padding: 5px 5px 3px;
+    border: 2px dashed #B3B3B3;
     top: 18px;
     width: 5.7rem;
     border-radius: 4px;
@@ -515,5 +412,6 @@ ul.dropdown .hover, ul.dropdown li:hover {
 }
 .add-tool-toggle:hover{
     background: #F4F4F4;
+    color: #777;
 }
 

http://git-wip-us.apache.org/repos/asf/allura/blob/9590ba2e/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 8aae568..791efd9 100644
--- a/Allura/allura/public/nf/js/navbar.es6.js
+++ b/Allura/allura/public/nf/js/navbar.es6.js
@@ -24,9 +24,9 @@ function slugify(text)
 }
 
 /**
- * Get a tool label from a NavBarItem node.
+ * Get a mount point from a NavBarItem node.
  * @constructor
- * @param {NavBarItem} node - Return a "rest" version of the url.
+ * @param {NavBarItem} node
  * @returns {string}
  */
 function getMountPoint(node) {
@@ -52,26 +52,6 @@ function ToolsPropType() {
     };
 }
 
-/**
- * A NavBar link, the most basic component of the NavBar.
- * @constructor
- */
-var NavLink = React.createClass({
-    propTypes: {
-        name: React.PropTypes.string.isRequired,
-        url: React.PropTypes.string.isRequired,
-        style: React.PropTypes.object
-    },
-    render: function () {
-        var classes = this.props.subMenu ? ' subMenu' : '';
-        classes += this.props.classes;
-        return (
-            <a href={ this.props.url } key={ `link-${_.uniqueId()}` } className={ classes } style={ this.props.style }>
-                { this.props.name }
-            </a> // jshint ignore:line
-        );
-    }
-});
 
 /**
  * When the number of tools of the same type exceeds the grouping threshold,
@@ -83,7 +63,6 @@ var ToolSubMenu = React.createClass({
         isSubmenu: React.PropTypes.bool,
         tools: ToolsPropType
     },
-    handle: '.draggable-handle',
     mode: 'list',
     render: function () {
         var _this = this;
@@ -92,7 +71,7 @@ var ToolSubMenu = React.createClass({
             return (
                 <div className={ 'draggable-element ' + subMenuClass } key={ 'draggable-' + _.uniqueId() }>
                     <div className='draggable-handle' key={ 'handleId-' + _.uniqueId() }>
-                        <NavBarItem data={ item } name={ item.mount_point } url={ item.url } data-id={ i }/>
+                        <NavBarItem data={ item } name={ item.mount_point } url={ item.url }/>
                     </div>
                 </div>
             );
@@ -110,7 +89,7 @@ var ToolSubMenu = React.createClass({
 });
 
 /**
- * A single NavBar item. (A wrapper for NavLink).
+ * A single NavBar item.
  * @constructor
  */
 var NavBarItem = React.createClass({
@@ -118,11 +97,19 @@ var NavBarItem = React.createClass({
         name: React.PropTypes.string.isRequired,
         url: React.PropTypes.string.isRequired,
         isSubmenu: React.PropTypes.bool,
-        children: React.PropTypes.array.isRequired,
+        children: React.PropTypes.array,
         tools: ToolsPropType
     },
-    generateLink: function () {
-        return <NavLink url={ this.props.url } name={ this.props.name } key={ _.uniqueId() }/>;
+    generateItem: function () {
+        var controls = [<i className='config-tool fa fa-cog'></i>];
+        var arrow_classes = 'fa fa-arrows-h'
+        if (this.props.is_anchored) {
+            arrow_classes += ' anchored';
+        } else {
+            arrow_classes += ' draggable-handle';
+        }
+        controls.push(<i className={arrow_classes}></i>);
+        return <a>{ this.props.name }<br/>{ controls }</a>
     },
 
     generateSubmenu: function () {
@@ -130,7 +117,7 @@ var NavBarItem = React.createClass({
     },
 
     generateContent: function () {
-        var content = [this.generateLink()];
+        var content = [this.generateItem()];
         if (this.props.children) {
             content.push(this.generateSubmenu());
         }
@@ -140,10 +127,7 @@ var NavBarItem = React.createClass({
 
     render: function () {
         var content = this.generateContent();
-        var classes = this.props.editMode ? 'tb-item tb-item-edit' : 'tb-item';
-        classes = this.props.is_anchored ? `${classes} anchored` : classes;
-
-
+        var classes = 'tb-item tb-item-edit';
         return (
             <div className={ classes }>
                 { content }
@@ -200,7 +184,6 @@ var GroupingThreshold = React.createClass({
 var NormalNavBar = React.createClass({
     buildMenu: function (item) {
         var classes = ` ui-icon-${item.icon}-32`;
-        classes = item.is_anchored ? `${classes} anchored` : classes;
 
         var subMenu;
         if (item.children) {
@@ -240,7 +223,6 @@ var AdminNav = React.createClass({
         isSubmenu: React.PropTypes.bool,
         tools: ToolsPropType
     },
-    handle: '.draggable-handle',
     mode: 'grid',
     getInitialState: function () {
         return {
@@ -263,24 +245,34 @@ var AdminNav = React.createClass({
     render: function () {
         var _this = this;
         var subMenuClass = this.props.isSubmenu ? ' submenu ' : '';
-        var tools = this.props.tools.map(function (item, i) {
-            return (
+        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() }>
-                    <div className='draggable-handle' key={ 'handleId-' + _.uniqueId() }>
-                        <NavBarItem onMouseOver={ _this.mouseOver } onMouseOut={ _this.mouseOut } {..._this.props} data={ item }
-                                    name={ item.mount_point } url={ item.url }
-                                    key={ 'tb-item-' + _.uniqueId() } is_anchored={ item.is_anchored } data-id={ i }/>
+                        { core_item }
                     </div>
-                </div>
             );
+            }
         });
 
         return (
             <div className='react-drag edit-mode'>
+                { anchored_tools }
                 <ReactReorderable key={ 'reorder-' + _.uniqueId() } handle='.draggable-handle' mode='grid' onDragStart={ this.onDragStart }
                                   onDrop={ this.props.onToolReorder } onChange={ this.onChange }>
                     { tools }
                 </ReactReorderable>
+                { end_tools }
             </div>
         );
     }
@@ -310,15 +302,10 @@ var ToggleAdminButton = React.createClass({
  */
 var ToggleAddNewTool = React.createClass({
     render: function () {
-        var classes = this.props.visible ? 'fa fa-unlock' : 'fa fa-lock';
         return (
             <div>
-                <div onClick={ this.props.handleToggleAddNewTool } className="add-tool-toggle">
-                    + Add new...
-                </div>
-                                {this.props.showMenu &&
-                <NewToolMain />
-                }
+                <div onClick={ this.props.handleToggleAddNewTool } className="add-tool-toggle"> + Add new...</div>
+                {this.props.showMenu && <NewToolMain />}
             </div>
         );
     }
@@ -567,7 +554,6 @@ var NewToolMain = React.createClass({
     toolFormIsValid: function (e) {
         e.preventDefault();
 
-        var isValid = true;
         var errors = {
             mount_point: []
         };
@@ -743,22 +729,14 @@ var Main = React.createClass({
         var navBarSwitch = (showAdmin) => {
             if (showAdmin) {
                 return (
-                    <AdminNav tools={ _this.state.data.children }
-                              data={ _this.state.data }
-                              onToolReorder={ _this.onToolReorder }
-                              onUpdateMountOrder={ _this.onUpdateMountOrder }
-                              editMode={ _this.state.visible }
-                        />
+                    <AdminNav tools={ _this.state.data.children } data={ _this.state.data } onToolReorder={ _this.onToolReorder }
+                              onUpdateMountOrder={ _this.onUpdateMountOrder } editMode={ _this.state.visible } />
                 );
             } else {
                 return (
                     <div>
                         <NormalNavBar items={ _this.state.data.children } key={ `normalNav-${_.uniqueId()}` }/>
-
-                        <ToggleAddNewTool
-                            handleToggleAddNewTool={this.handleToggleAddNewTool}
-                            showMenu={this.state.showAddToolMenu}
-                            />
+                        <ToggleAddNewTool handleToggleAddNewTool={this.handleToggleAddNewTool} showMenu={this.state.showAddToolMenu} />
                     </div>
                 )
             }
@@ -769,14 +747,10 @@ var Main = React.createClass({
             <div ref={ _.uniqueId() } className={ 'nav_admin ' + editMode }>
                 { navBar }
                 <div id='bar-config'>
-                    <GroupingThreshold onUpdateThreshold={ this.onUpdateThreshold } isHidden={ this.state.visible }
-                                       initialValue={ this.state.data.grouping_threshold }/>
+                    <GroupingThreshold onUpdateThreshold={ this.onUpdateThreshold } isHidden={ this.state.visible } initialValue={ this.state.data.grouping_threshold }/>
                 </div>
                 <ToggleAdminButton key={ _.uniqueId() } handleButtonPush={ this.handleToggleAdmin } visible={ this.state.visible }/>
             </div>
         );
     }
 });
-   //
-   //React.render(React.createElement(NewToolMain, {
-   //     }), document.getElementById("add_tool_menu"));
\ No newline at end of file