You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@allura.apache.org by br...@apache.org on 2015/10/29 15:37:31 UTC
[49/50] [abbrv] allura git commit: [#7919] Make edit-mode sub-menus
display correctly
[#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 <hs...@hsmb.local>
Authored: Wed Oct 28 14:00:14 2015 -0400
Committer: Heith Seewald <hs...@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;
});