You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@allura.apache.org by he...@apache.org on 2015/10/30 02:07:22 UTC
[42/48] allura git commit: [#7919] Fix missing keys from toolbar
components
[#7919] Fix missing keys from toolbar components
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/110afb7d
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/110afb7d
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/110afb7d
Branch: refs/heads/hs/7919
Commit: 110afb7d904b101c8ee6dddd1d12a414b7802586
Parents: 52a3b03
Author: Heith Seewald <hs...@hsmb.local>
Authored: Thu Oct 29 11:31:33 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Thu Oct 29 20:21:44 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/css/navbar.css | 55 ++++++----
Allura/allura/public/nf/js/navbar.es6.js | 104 ++++++++++++-------
Allura/allura/public/nf/js/react-drag.js | 2 +-
.../allura/templates/jinja_master/master.html | 1 +
4 files changed, 105 insertions(+), 57 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/110afb7d/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 988f3f1..730c7b3 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -40,6 +40,10 @@
cursor: move;
}
+.react-reorderable-item{
+ z-index:5000;
+}
+
.react-reorderable-item-active {
border: 3px dashed #9e9e9e;
background: #c9c9c9;
@@ -51,16 +55,15 @@
display: none;
}
-/*.react-reorderable-item {*/
- /*display: block;*/
- /*flex-direction: column;*/
- /*float: left;*/
-/*}*/
+.react-reorderable-item {
+ display: block;
+ float: left;
+}
-/*.react-reorderable-handle {*/
- /*position: absolute;*/
-/*}*/
+.react-reorderable-handle {
+ position: absolute;
+}
#top_nav_admin .tb-item a {
margin: 10px 10px 10px 0;
@@ -91,18 +94,29 @@
width: 50%;
}
-.tb-item-grouper > div.tb-sub-menu {
+
+.tb-item-grouper{
visibility: hidden;
+ position: absolute;
+ top: 32px;
+}
+
+.react-reorderable-item:hover .tb-item-grouper{
+ background: white;
+ visibility: visible;
}
-.tb-item-grouper > div > div {
- border-bottom: 1px solid #e5e5e5;
+.tb-item-grouper .react-reorderable-item-active {
+ border: 3px dashed #9e9e9e;
+ background: #c9c9c9;
+ width: 100%;
+ height: 24px;
}
-.tb-item-grouper:hover > div > div {
- background: white;
- visibility: visible;
+#top_nav_admin .tb-item-grouper a {
+ border-right: 1px transparent;
+
}
#top_nav_admin .tb-sub-menu .tb-item a {
@@ -115,11 +129,16 @@
color: white;
}
-.tb-sub-menu {
+
+.tb-item-grouper > div > div {
+ border-bottom: 1px solid #e5e5e5;
+
+}
+
+.tb-item-grouper > div{
display: flex;
flex-direction: column;
- position: absolute;
- top: 29px;
+ position: relative;
background: white;
z-index: 1620;
}
@@ -215,7 +234,7 @@
}
.tool-card::before {
- content: "â–²";
+ content: "^";
color: #4E4E4E;
font-size: xx-large;
position: absolute;
http://git-wip-us.apache.org/repos/asf/allura/blob/110afb7d/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 26f72bc..46cc87e 100644
--- a/Allura/allura/public/nf/js/navbar.es6.js
+++ b/Allura/allura/public/nf/js/navbar.es6.js
@@ -89,7 +89,7 @@ function ToolsPropType() {
var NavBarItem = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
- url: React.PropTypes.string.isRequired,
+ url: React.PropTypes.string.isRequired
},
isAnchored: function() {
@@ -97,16 +97,16 @@ var NavBarItem = React.createClass({
},
render: function() {
- var controls = [<i className='config-tool fa fa-cog'></i>];
- var arrow_classes = 'fa fa-arrows-h';
+ var controls = [<i key={'admin-nav-item-' + _.uniqueId()} className='config-tool fa fa-cog '></i>];
+ var classes = ' fa fa-arrows-h ';
if (this.props.is_anchored) {
- arrow_classes += ' anchored';
+ classes += ' anchored';
} else {
- arrow_classes += this.props.handleType;
+ classes += this.props.handleType.slice(1);
}
-//controls.push(<i className={arrow_classes}></i>);
+controls.push(<i className={classes}></i>);
return (
- <div className="tb-item tb-item-edit">
+ <div className={classes + " tb-item tb-item-edit "}>
<a>{controls}
<span className={this.props.handleType.slice(1)}>{this.props.name}</span></a>
</div>
@@ -160,37 +160,50 @@ var GroupingThreshold = React.createClass({
* @constructor
*/
+var NormalNavItem = React.createClass({
+ mixins: [React.addons.PureRenderMixin],
+
+ render: function() {
+
+ return (
+ <li key={`tb-norm-${_.uniqueId()}`}>
+ <a href={ this.props.url } className={ this.props.classes }>
+ { this.props.name }
+ </a>
+ {this.props.children}
+ </li>
+ );
+ }
+});
+
+/**
+ * The NavBar when in "Normal" mode.
+
+ * @constructor
+ */
var NormalNavBar = React.createClass({
- buildMenu: function(item) {
+ buildMenu: function(item, i) {
let classes = window.location.pathname.startsWith(item.url) ? 'active-nav-link' : '';
var subMenu;
if (item.children) {
subMenu = item.children.map(this.buildMenu);
}
-
return (
- <li>
- <a href={ item.url } key={ 'link-' + _.uniqueId() } className={ classes }>
- { item.name }
- </a>
- {subMenu &&
- <ul className={ classes + ' submenu'}>
- { subMenu }
- </ul>
- }
- </li>
+ <NormalNavItem url={item.url} name={item.name} classes={classes} key={`normal-nav-${_.uniqueId()}`}>
+ <ul>
+ {subMenu}
+ </ul>
+ </NormalNavItem>
);
},
render: function() {
var listItems = this.props.items.map(this.buildMenu);
- var classes = 'dropdown';
return (
<ul
- id="admin-toolbar-list"
- className={ classes }
- key={ `toolList-${_.uniqueId()}` }>
+ id="normal-nav-bar"
+ className="dropdown">
{ listItems }
<ToggleAddNewTool
handleToggleAddNewTool={this.props.handleToggleAddNewTool}
@@ -207,7 +220,8 @@ var NormalNavBar = React.createClass({
var AdminNav = React.createClass({
propTypes: {
isSubmenu: React.PropTypes.bool,
- tools: ToolsPropType
+ tools: React.PropTypes.arrayOf(
+ React.PropTypes.objectOf(ToolsPropType))
},
mode: 'grid',
getInitialState: function() {
@@ -237,13 +251,11 @@ var AdminNav = React.createClass({
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 classes = subMenu ? 'draggable-element tb-item-grouper' : 'draggable-element';
var core_item = <NavBarItem
onMouseOver={ _this.mouseOver }
onMouseOut={ _this.mouseOut } {..._this.props}
@@ -261,25 +273,26 @@ var AdminNav = React.createClass({
anchored_tools.push(core_item);
} else {
tools.push(
- <div className={classes}>
+ <div className={"draggable-element" }>
{ core_item }
+
{subMenu &&
- <div className="tb-sub-menu">
- {subMenu}
- </div>
+ <AdminItemGroup key={'tb-group-' + _.uniqueId()}>
+ {subMenu}
+ </AdminItemGroup>
+
}
</div>
);
}
- var _handle = subMenu ? ".draggable-handle-sub" : '.draggable-handle';
return (
<div className='react-drag edit-mode'>
{ anchored_tools }
<ReactReorderable
key={ 'reorder-' + _.uniqueId() }
- handle={_handle}
+ handle='.draggable-handle'
mode='grid'
- onDragStart={ this.onDragStart }
+ onDragStart={ _this.props.onDragStart }
onDrop={ this.props.onToolReorder }
onChange={ this.onChange }>
{ tools }
@@ -300,6 +313,20 @@ var AdminNav = React.createClass({
});
/**
+ * The NavBar when in "Admin" mode.
+ * @constructor
+ */
+var AdminItemGroup = React.createClass({
+ render: function () {
+ return (
+ <div className="tb-item-grouper" key={_.uniqueId()}>
+ {this.props.children}
+ </div>
+ );
+ }
+});
+
+/**
* The button that toggles NavBar modes.
* @constructor
@@ -326,7 +353,7 @@ var ToggleAdminButton = React.createClass({
*/
var Main = React.createClass({
propTypes: {
- initialData: ToolsPropType,
+ initialData: React.PropTypes.objectOf(ToolsPropType),
installableTools: React.PropTypes.array
},
getInitialState: function() {
@@ -435,10 +462,12 @@ var Main = React.createClass({
type: 'POST',
url: url,
data: params,
- success: function() {
+ success: function () {
$('#messages').notify('Tool order updated',
{
- status: 'confirm'
+ status: 'confirm',
+ interval: 500,
+ timer: 2000
});
_this.getNavJson();
},
@@ -490,7 +519,6 @@ var Main = React.createClass({
initialValue={ this.state.data.grouping_threshold }/>
</div>
<ToggleAdminButton
- key={ _.uniqueId() }
handleButtonPush={ this.handleToggleAdmin }
visible={ this.state.visible }/>
</div>
http://git-wip-us.apache.org/repos/asf/allura/blob/110afb7d/Allura/allura/public/nf/js/react-drag.js
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/js/react-drag.js b/Allura/allura/public/nf/js/react-drag.js
index c52ac50..14aca73 100644
--- a/Allura/allura/public/nf/js/react-drag.js
+++ b/Allura/allura/public/nf/js/react-drag.js
@@ -535,7 +535,7 @@
'react-drag-dragging': this.state.dragging
});
// Reuse the child provided
- // This makes it flexible to use whatever element is wanted (div, ul, etc)
+ // This makes it flexible to use whatereact-reorderable-itemver element is wanted (div, ul, etc)
return React.addons.cloneWithProps(
React.Children.only(this.props.children), {
style: style,
http://git-wip-us.apache.org/repos/asf/allura/blob/110afb7d/Allura/allura/templates/jinja_master/master.html
----------------------------------------------------------------------
diff --git a/Allura/allura/templates/jinja_master/master.html b/Allura/allura/templates/jinja_master/master.html
index 3017c51..c60732d 100644
--- a/Allura/allura/templates/jinja_master/master.html
+++ b/Allura/allura/templates/jinja_master/master.html
@@ -63,6 +63,7 @@
{% for blob in g.resource_manager.emit('head_js') %}
{{ blob }}
{% endfor %}
+{#<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react-with-addons.js"#}
{% if c.project and c.project.neighborhood.css %}
<style type="text/css">