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/13 21:51:46 UTC
allura git commit: [#7919] anchored tools are not draggable,
style nav bar items better
Repository: allura
Updated Branches:
refs/heads/db/7919 912e1af09 -> 389f226e6
[#7919] anchored tools are not draggable, style nav bar items better
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/389f226e
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/389f226e
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/389f226e
Branch: refs/heads/db/7919
Commit: 389f226e60c2ca1f23eed1833381f4ac118e213e
Parents: 912e1af
Author: Dave Brondsema <da...@brondsema.net>
Authored: Tue Oct 13 15:51:44 2015 -0400
Committer: Dave Brondsema <da...@brondsema.net>
Committed: Tue Oct 13 15:51:44 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/css/navbar.css | 86 ++++-----------------------
Allura/allura/public/nf/js/navbar.es6.js | 82 ++++++++++++-------------
2 files changed, 48 insertions(+), 120 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/389f226e/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 a5d24bc..4764ac7 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;
@@ -89,7 +85,11 @@ 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 {
@@ -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,6 +193,7 @@ ul.dropdown .hover, ul.dropdown li:hover {
.anchored {
cursor: not-allowed;
+ color: gray;
}
.tool-partition {
http://git-wip-us.apache.org/repos/asf/allura/blob/389f226e/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 e252631..f516d2d 100644
--- a/Allura/allura/public/nf/js/navbar.es6.js
+++ b/Allura/allura/public/nf/js/navbar.es6.js
@@ -14,13 +14,13 @@ function _getProjectUrl(rest = true) {
}
/**
- * 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) {
- return node.props.children.props.children.props.mount_point;
+ return node.props.children.props.mount_point;
}
function ToolsPropType() {
@@ -42,26 +42,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,
@@ -73,7 +53,6 @@ var ToolSubMenu = React.createClass({
isSubmenu: React.PropTypes.bool,
tools: ToolsPropType
},
- handle: '.draggable-handle',
mode: 'list',
render: function () {
var _this = this;
@@ -82,7 +61,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>
);
@@ -100,7 +79,7 @@ var ToolSubMenu = React.createClass({
});
/**
- * A single NavBar item. (A wrapper for NavLink).
+ * A single NavBar item.
* @constructor
*/
var NavBarItem = React.createClass({
@@ -108,11 +87,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 () {
@@ -120,7 +107,7 @@ var NavBarItem = React.createClass({
},
generateContent: function () {
- var content = [this.generateLink()];
+ var content = [this.generateItem()];
if (this.props.children) {
content.push(this.generateSubmenu());
}
@@ -130,10 +117,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 }
@@ -190,7 +174,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) {
@@ -230,7 +213,6 @@ var AdminNav = React.createClass({
isSubmenu: React.PropTypes.bool,
tools: ToolsPropType
},
- handle: '.draggable-handle',
mode: 'grid',
getInitialState: function () {
return {
@@ -253,24 +235,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 (
- <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 }/>
+ 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>
- </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>
);
}