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/27 22:37:06 UTC
[40/47] allura git commit: [#7919] Merged with Dave's
refactor/enhancments
[#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/7621027f
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/7621027f
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/7621027f
Branch: refs/heads/db/7919
Commit: 7621027fc7527a338ef0314c3725c92392657eec
Parents: 7a7a4d0
Author: Heith Seewald <hs...@hsmb.local>
Authored: Thu Oct 15 15:40:27 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Fri Oct 23 13:10:04 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/7621027f/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/7621027f/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