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/28 19:02:12 UTC
[50/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/9f04ce31
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/9f04ce31
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/9f04ce31
Branch: refs/heads/hs/7919
Commit: 9f04ce31d0ce3978d111f7c7856e1f239325c1b0
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 14:00:52 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/css/navbar.css | 64 ++++++++++++++++++++++----
Allura/allura/public/nf/js/navbar.es6.js | 66 +++++++++++++++++----------
2 files changed, 97 insertions(+), 33 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/9f04ce31/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..8e0adbf 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;
}
@@ -39,10 +39,9 @@
cursor: move;
}
-.react-reorderable-item {
- display: inline-flex;
- float: left;
-}
+/*.submenu-edit{*/
+/*background: red;*/
+/*}*/
.react-reorderable-item-active {
border: 3px dashed #9e9e9e;
@@ -56,7 +55,7 @@
}
.react-reorderable-item {
- display: inline-flex;
+ display: flex;
float: left;
}
@@ -76,9 +75,10 @@
}
#top_nav_admin .tb-item a {
- margin: 10px 10px 10px 0;
+ margin: 10px 10px 10px 0px;
border-right: 1px solid #ccc;
padding-right: 10px;
+ padding-left: 4px;
}
.react-drag {
@@ -165,7 +165,7 @@
}
.tool-card::before {
- content: "▲";
+ content: "â–²";
color: #4E4E4E;
font-size: xx-large;
position: absolute;
@@ -268,6 +268,10 @@
user-select: none;
}
+.tb-item-edit a {
+ margin-left: 2px;
+}
+
.add-tool-toggle:hover {
background: #F4F4F4;
color: #777;
@@ -276,3 +280,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/9f04ce31/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..1d56056 100644
--- a/Allura/allura/public/nf/js/navbar.es6.js
+++ b/Allura/allura/public/nf/js/navbar.es6.js
@@ -225,33 +225,40 @@ var AdminNav = React.createClass({
});
},
- render: function() {
+ buildMenu: function (item) {
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 = item.children.map(_this.buildMenu);
+ }
+ 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 }
+ 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>
);
- }
- });
+ }
return (
<div className='react-drag edit-mode'>
@@ -268,6 +275,15 @@ var AdminNav = React.createClass({
{ end_tools }
</div>
);
+ },
+
+ render: function () {
+ var tools = this.props.tools.map(this.buildMenu);
+ return (
+ <div>
+ {tools}
+ </div>
+ );
}
});