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/23 15:28:09 UTC
[1/4] allura git commit: [#7919] Update stylesheet to support new
component markup
Repository: allura
Updated Branches:
refs/heads/hs/7919 9b3135daf -> 3674ec6db
[#7919] Update stylesheet to support new component markup
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/26e49ff7
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/26e49ff7
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/26e49ff7
Branch: refs/heads/hs/7919
Commit: 26e49ff71f4e1f7868f261055aa5fab49c2d20e9
Parents: 9b3135d
Author: Heith Seewald <hs...@hsmb.local>
Authored: Thu Oct 22 15:53:35 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Thu Oct 22 15:53:35 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/css/navbar.css | 2856 ++++++++++++++++++++++++---
1 file changed, 2633 insertions(+), 223 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/26e49ff7/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 f3c3336..2cc8798 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -3,11 +3,9 @@
width: 350px;
display: none;
}
-
.hidden {
display: none;
}
-
.submenu ul {
list-style: none;
display: block;
@@ -23,7 +21,6 @@
z-index: -1000;
padding-top: 11px;
}
-
#bar-config {
display: inline-flex;
position: absolute;
@@ -32,14 +29,12 @@
align-items: stretch;
flex: 1 1 auto;
}
-
#threshold-config > span > input {
width: 2rem;
background-color: #A1A1A1;
color: white;
font-weight: bold;
}
-
#toggle-admin-btn {
position: absolute;
right: -9px;
@@ -47,21 +42,18 @@
width: 2rem;
height: 1.8rem;
}
-
nav {
display: flex;
flex-direction: row;
justify-content: center;
margin: auto;
}
-
#top_nav_admin > div.edit-mode > ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
-
#top_nav_admin > div.edit-mode > ul > .tb-item {
background-color: #F0F0F0;
margin-top: 0.5rem;
@@ -70,11 +62,9 @@ nav {
border: 1px dashed gray;
padding: 0.3rem 0.6rem 0.3rem 0.6rem;
}
-
.admin-toolbar {
display: flex;
}
-
#top_nav_admin {
display: grid;
flex-direction: row;
@@ -85,13 +75,17 @@ nav {
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
- width: 918px; /* 940px - 32px for toggle-admin-btn */
+ width: 918px;
+ /* 940px - 32px for toggle-admin-btn */
}
-
#top_nav_admin .edit-mode .fa {
margin: 0 3px;
+ margin-left: 0;
+ padding: 2px;
+ padding-left: 1px;
+ /* font-size: large; */
+ color: #595959;
}
-
.btn-bar {
display: block;
clear: both;
@@ -108,7 +102,6 @@ nav {
position: relative;
margin: 0 0 20px;
}
-
ul.dropdown li {
float: left;
vertical-align: middle;
@@ -116,21 +109,17 @@ ul.dropdown li {
padding-top: 10px;
padding-bottom: 10px;
}
-
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
-
li.tb-item-edit > input {
width: 2.2rem;
}
-
.draggable-handle {
cursor: move;
}
-
ul.dropdown li {
float: left;
vertical-align: middle;
@@ -138,35 +127,38 @@ ul.dropdown li {
padding-top: 10px;
padding-bottom: 10px;
}
-
#content {
width: 990px;
}
-
.react-reorderable-item {
display: inline-flex;
float: left;
+ text-align: left;
}
-
.react-reorderable-item-active {
border: 3px dashed #9e9e9e;
background: #c9c9c9;
- width: 5rem; /* dynamic would be nice */
+ width: 5rem;
+ /* dynamic would be nice */
height: 50px;
}
-
.react-reorderable-item-active div {
display: none;
}
-
.react-reorderable-handle {
position: absolute;
}
-
#top_nav_admin .tb-item a {
margin: 10px;
+ text-align: left;
+ display: inline-block;
+ padding-right: 10px;
+ padding-left: 10px;
+ margin-right: 5px;
+ border: 2px solid #8C8C8C;
+ /* border-right: 2px solid #8C8C8C; */
+ border-radius: 3px;
}
-
.react-drag {
-webkit-user-select: none;
-moz-user-select: none;
@@ -174,7 +166,6 @@ ul.dropdown li {
-o-user-select: none;
user-select: none;
}
-
ul.dropdown ul {
visibility: hidden;
position: absolute;
@@ -184,234 +175,2653 @@ ul.dropdown ul {
border: 1px solid #dddddd;
border-top-width: 0;
}
-
ul.dropdown .hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
-
.anchored {
cursor: not-allowed;
color: gray;
}
-
+.nav_admin {
+ height: auto;
+}
+.nav_admin > div > ul > li {
+ height: 1.2rem;
+ font-weight: inherit;
+}
.tool-partition {
height: 0;
- margin-top: 5px;
- border-top: 3px solid #777;
+ /*padding-top: 5px;*/
+ /* border-top: 3px solid #777; */
}
-
.installable-tool-box {
- list-style: none;
- display: flex;
- background-color: #FFFEFA;
- flex-wrap: wrap;
- justify-content: space-around;
- margin-left: 0;
- margin-bottom: 8px;
- margin-top: -8px;
-}
+ /* position: relative; */
+ display: inlin-f;
+ min-height: 289px;
+ align-content: center;
+ border-right: 1px solid #9D9D9D;
+ background-color: yellow;
+ background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-.installable-tool-box li {
- margin-top: 15px;
- height: auto;
- border-radius: 4px;
- padding: 10px;
- text-align: center;
- font-size: medium;
- list-style: none;
- cursor: pointer;
- 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 {
- background: white;
- border: 1px solid #09C;
-}
-.installable-tool-box li.selected-tool:hover {
- background: white;
- color: rgb(85, 85, 85);
-}
-.tool-card {
- width: 600px;
- display: block;
- border: 2px solid #4E4E4E;
- border-radius: 2px 2px 5px 5px;
- overflow-y: visible;
- margin-bottom: 50px;
- background: white;
- right: 161px;
- top: 83px;
- position: absolute;
- z-index: 1000;
-}
-.tool-card::before {
- content: "▲";
- color: #4E4E4E;
- font-size: xx-large;
- position: absolute;
- right: 0px;
- top: -14px;
- overflow: visible;
- float: right;
- height: 1.5rem;
-}
-.box-title {
- z-index: 60;
- height: auto;
- font-size: small;
- text-align: center;
- padding-bottom: 3px;
- position: relative;
- padding-top: 3px;
- background: #4E4E4E;
- color: #DEDEDE;
-}
-.tool-info {
- min-height: 15rem;
- display: block;
- clear: both;
-}
-.tool-info-left p {
- text-align: center;
- vertical-align: text-top;
- padding-top: 0;
- left: 0;
- font-size: large;
- font-weight: 400;
- margin: 2rem 33px;
- color: #CCCBC8;
- padding-bottom: 20px;
-}
-.tool-info-left h1 {
- text-align: center;
- padding-bottom: 0;
- vertical-align: text-top;
- padding-top: 18px;
- left: 0;
- font-size: large;
- background-color: #AEF4FF;
- color: #5B5B5B;
- height: 3rem;
-}
-.add-tool-button {
- width: 140px;
- height: auto;
- background: white;
- min-width: 6rem;
- min-height: 2.6rem;
- font-size: large;
- bottom: -0.3rem;
- right: -30px;
-}
-.tool-info-left {
- background: #636363;
- width: 60%;
- height: 260px;
- left: 0;
- float: left;
- top: 0;
- color: white;
-}
-.tool-info-right {
- width: 40%;
- float: right;
- overflow: hidden;
- position: relative;
- display: block;
- top: 0;
-}
-.tool-form {
- display: inline-block;
- width: 100%;
- position: absolute;
- right: 0;
- top: 0;
- padding-top: 1rem;
- height: auto;
-}
-#add-tool-form > label{
- padding: 0;
- font-size: 13pt;
- position: absolute;
- margin-left: 18px;
-}
-#add-tool-form > p{
- font-size: large;
-}
-#add-tool-form > input {
- padding-top: 10px;
- padding-left: 10px;
- width: 77%;
- margin: 23px 60px 11px 19px;
-}
-#add-tool-form{
- padding-top: 20px;
- padding-left: 25px;
- padding-right: 25px;
-}
-.tool-form-fields{
- clear: both;
- position: relative;
- display: flex;
- flex-direction: row;
-}
-#mount_point :invalid{
- background: #333;
-}
-.add-tool-toggle{
- background: rgba(255, 255, 255, 0.32);
- clear: both;
- float: right;
- color: #B3B3B3;
- font-weight: 900;
- margin: 1px;
- right: 127px;
- position: absolute;
- padding: 5px 5px 3px;
- border: 2px dashed #B3B3B3;
- top: 18px;
- width: 5.7rem;
- border-radius: 4px;
- height: 1.5rem;
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-.add-tool-toggle:hover{
- background: #F4F4F4;
- color: #777;
-}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
+ background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
+ background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
+ /* flex-wrap: wrap; */
+ flex-direction: column;
+ /* justify-content: flex-start; */
+ justify-content: space-around;
+ padding-bottom: 2.2rem;
+ width: 100%;
+ /* -webkit-flex-direction: row; */
+ /* flex-direction: column; */
+ /*margin-bottom: 8px;*/
+ /* min-height: 280px; */
+}
+.installable-tool-box div {
+ /* margin-top: 0.5rem; */
+ margin-left: 0;
+ /* height: auto; */
+ border-radius: 4px;
+ padding: 10px;
+ text-align: right;
+ font-size: medium;
+ list-style: none;
+ cursor: pointer;
+ /*align-items: flex-start;*/
+ min-width: 10%;
+ border: 1px solid transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+ border-radius: 0 4px 4px 0;
+}
+
+/*.installable-tool-box > div{
+ color:blue;
+ background: rgba(255, 255, 255, 0.8);
+ min-width: 75px;
+ border: 1px dashed orange;
+}*/
+
+.installable-tool-box div:hover {
+ background: white;
+ border: 1px solid rgb(0, 153, 204);
+ border: 1;
+}
+.selected-tool {
+ background: rgba(0, 153, 243, 0.8) !important;
+ color: white !important;
+ box-shadow: 3px 3px 2px #ABABAB !important;
+ font-weight: bold;
+}
+.installable-tool-box div.selected-tool:hover {
+ background: white;
+ color: rgb(85, 85, 85);
+}
+.tool-card {
+ width: 447px;
+ height: 345px;
+ display: block;
+ border: 2px solid #5B5B5B;
+ box-shadow: 7px 5px 21px rgba(68, 68, 68, 0.58);
+ border-radius: 2px 2px 5px 5px;
+ overflow: inherit;
+ margin-bottom: 50px;
+ background: rgb(255, 255, 255);
+ right: 20px;
+ position: absolute;
+ background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, rgba(233, 233, 233, 0.67)));
+ z-index: 1000;
+ background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
+ -webkit-gradient(
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ linear, 0% 0%, 0% 100%,
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ color-stop(0%, #ffffff),
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ color-stop(100%, #cccccc));
+ background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
+ background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
+}
+.tool-card::before {
+ content: "â–²";
+ color: #4E4E4E;
+ font-size: xx-large;
+ position: absolute;
+ right: 0px;
+ top: -14px;
+ overflow: visible;
+ float: right;
+ height: 1.5rem;
+}
+.box-title {
+ z-index: 60;
+ height: auto;
+ font-size: small;
+ text-align: center;
+ padding-bottom: 3px;
+ position: relative;
+ /* padding-top: 3px; */
+ background: #4E4E4E;
+ color: #DEDEDE;
+ background-image:
+
+
+
+
+
+
+
+
+ -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #555), color-stop(100%, #666));
+ background-image:
+
+
+
+
+
+
+
+
+ -moz-linear-gradient(top, #666 0%, #555 100%);
+ background-image: linear-gradient(top, #666 0%, #555 100%);
+}
+.tool-info {
+ min-height: 22rem;
+ /* display: block; */
+ width: 72%;
+ float: right;
+ /* clear: both; */
+}
+.tool-info-left p {
+ text-align: center;
+ vertical-align: text-top;
+ padding-top: 0;
+ left: 0;
+ font-size: small;
+ font-kerning: 81;
+ font-weight: 100;
+ min-height: 70px;
+ margin: 1.5rem 23px;
+ margin-top: 0;
+ color: #FFFFFF;
+ padding-bottom: 0px;
+}
+.tool-info-left h1 {
+ text-align: center;
+ padding-bottom: 0;
+ vertical-align: text-top;
+ padding-top: 8px;
+ left: 0;
+ font-size: large;
+ /* background-color: #AEF4FF; */
+ color: #5B5B5B;
+ height: 2.6rem;
+ box-shadow: 3px 2px 5px rgba(34, 34, 34, 0.56);
+}
+.add-tool-button {
+ width: 109px;
+ height: auto;
+ background: white;
+ min-width: 6rem;
+ position: absolute;
+ min-height: 2.1rem;
+ margin-top: 5px;
+ font-size: large;
+ /* bottom: -2.3rem; */
+ overflow: visible;
+ right: 0px;
+ bottom: -29px;
+}
+.tool-info-left {
+ background: rgb(98, 98, 98);
+ /* width: 75%; */
+ position: relative;
+ /* float: right; */
+ /* display: inline-block; */
+ height: auto;
+ /* box-shadow: 0px 1px 5px darkgray; */
+ /* left: 0; */
+ /* border-left: 1px solid #B3B3B3; */
+ /* float: right; */
+ /* top: 0; */
+ color: white;
+}
+.tool-info-right {
+ /* width: 100%; */
+ /* float: right; */
+ /* overflow: hidden; */
+ /* display: inline-grid; */
+ /* flex-direction: column; */
+ /* float: right; */
+ /* position: relative; */
+ /* left: 50px; */
+ /* display: block; */
+ top: 0;
+ /* align-content: center; */
+ height: auto;
+ position: relative;
+ top: -9px;
+}
+.tool-form {
+ display: inline-block;
+ width: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding-top: 1rem;
+ /*height: auto;*/
+}
+#add-tool-form > label {
+ /* padding: 0; */
+ font-size: 8pt;
+ /* position: relative; */
+ /* left: -128px; */
+ /* top: 27px; */
+ /* margin-left: 18px; */
+ color: grey;
+}
+#add-tool-form > p {
+ font-size: large;
+}
+#add-tool-form > input {
+ /* padding-top: 10px; */
+ /* padding-left: 10px; */
+ /* position: relative; */
+ /* width: 60%; */
+ /* display: inline-flex; */
+ float: left;
+ /* flex-wrap: wrap; */
+ width: 100px;
+ margin-left: 4px;
+ margin-right: 20px;
+}
+#add-tool-url-preview {
+ font-size: 10pt;
+ position: relative;
+ right: 143px;
+ top: 43px;
+ height: 20px;
+ padding-bottom: 0;
+ margin-bottom: 0;
+}
+#add-tool-form {
+ padding-top: 0;
+ margin-top: 0;
+ display: flex;
+ flex-direction: row;
+ width: 95%;
+ /* align-items: center; */
+ padding-left: 0;
+ /* padding-right: 25px; */
+ /* height: 80px; */
+ align-content: center;
+ /* float: left; */
+}
+.tool-form-fields {
+ clear: both;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+}
+#mount_point:invalid {
+ /* background: #333; */
+}
+.add-tool-toggle {
+ background: rgba(255, 255, 255, 0.32);
+ /* clear: both; */
+ color: #8b8b8b;
+ /* font-weight: bold; */
+ /* margin: 1px; */
+ /*position: relative;*/
+ /* right: 127px; */
+ /* position: absolute; */
+ /*padding: 5px 5px 3px;*/
+ border: 1px dashed #B3B3B3;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ /* top: 18px; */
+ height: 100%;
+ width: 5.7rem;
+ float: right;
+ border-radius: 4px;
+ /*height: 1.5rem;*/
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+.add-tool-toggle:hover {
+ background: #F4F4F4;
+ color: #777;
+}
+.active-nav-link {
+ font-weight: bolder;
+}
+.menu-appear {
+ opacity: 0.01;
+}
+.example-appear.example-appear-active {
+ opacity: 1;
+ transition: opacity .5s ease-in;
+}
+#installable-items {
+ position: initial;
+ left: 0px;
+ float: left;
+ width: 28%;
+}
+
+.error-box{
+ background: rgba(255, 165, 0, 0.54);
+ color: white;
+ padding: 4px;
+ font-weight: bold;
+ position: absolute;
+ top: 66px;
+ width: 146px;
+ box-shadow: 0px 1px 1px #8E8E8E;
+ /* left: 17px; */
+ border-radius: 4px;
+ font-size: 9pt;
+ float: left;
+}
+#add-tool-url-preview{
+ /* float: right; */
+}
+
+#add-tool-url-preview > p > small {
+ color: grey;
+}
+
+#add-tool-url-preview > p > strong {
+ color: orange;
+}
+
+.add-tool-field{
+ width: 50%;
+ min-height: 137px;
+}
[4/4] allura git commit: [#7919] Update stylesheet to support new
component markup
Posted by he...@apache.org.
[#7919] Update stylesheet to support new component markup
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/3674ec6d
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/3674ec6d
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/3674ec6d
Branch: refs/heads/hs/7919
Commit: 3674ec6db3135d7c504beace161f79918dfe34b6
Parents: 3ed19dc
Author: Heith Seewald <hs...@hsmb.local>
Authored: Thu Oct 22 15:58:32 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Thu Oct 22 15:58:32 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/css/navbar.css | 3009 ++++-----------------------
1 file changed, 398 insertions(+), 2611 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/3674ec6d/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 2cc8798..6b947d1 100644
--- a/Allura/allura/public/nf/css/navbar.css
+++ b/Allura/allura/public/nf/css/navbar.css
@@ -3,9 +3,11 @@
width: 350px;
display: none;
}
+
.hidden {
display: none;
}
+
.submenu ul {
list-style: none;
display: block;
@@ -21,6 +23,7 @@
z-index: -1000;
padding-top: 11px;
}
+
#bar-config {
display: inline-flex;
position: absolute;
@@ -29,12 +32,14 @@
align-items: stretch;
flex: 1 1 auto;
}
+
#threshold-config > span > input {
width: 2rem;
background-color: #A1A1A1;
color: white;
font-weight: bold;
}
+
#toggle-admin-btn {
position: absolute;
right: -9px;
@@ -42,18 +47,21 @@
width: 2rem;
height: 1.8rem;
}
+
nav {
display: flex;
flex-direction: row;
justify-content: center;
margin: auto;
}
+
#top_nav_admin > div.edit-mode > ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
+
#top_nav_admin > div.edit-mode > ul > .tb-item {
background-color: #F0F0F0;
margin-top: 0.5rem;
@@ -62,9 +70,11 @@ nav {
border: 1px dashed gray;
padding: 0.3rem 0.6rem 0.3rem 0.6rem;
}
+
.admin-toolbar {
display: flex;
}
+
#top_nav_admin {
display: grid;
flex-direction: row;
@@ -75,17 +85,13 @@ nav {
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
- width: 918px;
- /* 940px - 32px for toggle-admin-btn */
+ width: 918px; /* 940px - 32px for toggle-admin-btn */
}
+
#top_nav_admin .edit-mode .fa {
margin: 0 3px;
- margin-left: 0;
- padding: 2px;
- padding-left: 1px;
- /* font-size: large; */
- color: #595959;
}
+
.btn-bar {
display: block;
clear: both;
@@ -102,6 +108,7 @@ nav {
position: relative;
margin: 0 0 20px;
}
+
ul.dropdown li {
float: left;
vertical-align: middle;
@@ -109,17 +116,21 @@ ul.dropdown li {
padding-top: 10px;
padding-bottom: 10px;
}
+
ul.dropdown, ul.dropdown li, ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
+
li.tb-item-edit > input {
width: 2.2rem;
}
+
.draggable-handle {
cursor: move;
}
+
ul.dropdown li {
float: left;
vertical-align: middle;
@@ -127,38 +138,35 @@ ul.dropdown li {
padding-top: 10px;
padding-bottom: 10px;
}
+
#content {
width: 990px;
}
+
.react-reorderable-item {
display: inline-flex;
float: left;
- text-align: left;
}
+
.react-reorderable-item-active {
border: 3px dashed #9e9e9e;
background: #c9c9c9;
- width: 5rem;
- /* dynamic would be nice */
+ width: 5rem; /* dynamic would be nice */
height: 50px;
}
+
.react-reorderable-item-active div {
display: none;
}
+
.react-reorderable-handle {
position: absolute;
}
+
#top_nav_admin .tb-item a {
margin: 10px;
- text-align: left;
- display: inline-block;
- padding-right: 10px;
- padding-left: 10px;
- margin-right: 5px;
- border: 2px solid #8C8C8C;
- /* border-right: 2px solid #8C8C8C; */
- border-radius: 3px;
}
+
.react-drag {
-webkit-user-select: none;
-moz-user-select: none;
@@ -166,6 +174,7 @@ ul.dropdown li {
-o-user-select: none;
user-select: none;
}
+
ul.dropdown ul {
visibility: hidden;
position: absolute;
@@ -175,2653 +184,431 @@ ul.dropdown ul {
border: 1px solid #dddddd;
border-top-width: 0;
}
+
ul.dropdown .hover, ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
+
.anchored {
cursor: not-allowed;
color: gray;
}
-.nav_admin {
+
+.nav_admin{
height: auto;
}
-.nav_admin > div > ul > li {
+
+.nav_admin > div > ul > li{
height: 1.2rem;
font-weight: inherit;
}
+
.tool-partition {
height: 0;
/*padding-top: 5px;*/
- /* border-top: 3px solid #777; */
+ border-top: 3px solid #777;
}
+
.installable-tool-box {
/* position: relative; */
- display: inlin-f;
- min-height: 289px;
- align-content: center;
- border-right: 1px solid #9D9D9D;
- background-color: yellow;
- background-image:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ display: flex;
+ background-color: white;
+ background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, rgba(204, 204, 204, 0.6)));
+ background-image:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
+ background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
+ flex-wrap: wrap;
+ /*justify-content: flex-start;*/
+ justify-content: space-around;
+ /*margin-left: 0;*/
+ flex-direction: row;
+ /* padding-bottom: 5px; */
+ /* padding-top: 4px; */
+ /*display: -webkit-flex;*/
+ /*display: flex;*/
+ /*-webkit-flex-direction: row;*/
+ /*flex-direction: row;*/
+ /*margin-bottom: 8px;*/
+}
+.installable-tool-box div {
+ padding-top: 4px;
+ margin-bottom: 0;
+ margin-left: 0;
+ border-radius: 0 0 4px 4px;
+ padding-left: 5px;
+ padding-bottom: 2px;
+ padding-right: 5px;
+ text-align: center;
+ font-size: small;
+ font-weight: 400;
+ list-style: none;
+ cursor: pointer;
+ /*align-items: flex-start;*/
+ min-width: 40px;
+ border: 1px solid transparent;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+/*.installable-tool-box > div{
+ color:blue;
+ background: rgba(255, 255, 255, 0.8);
+ min-width: 75px;
+ border: 1px dashed orange;
+}*/
+.selected-tool{
+ background: #09C !important;
+ color: white !important;
+ height: 21px;
+}
+.installable-tool-box div:hover {
+ background: white;
+ border: 1px solid #09C;
+}
+.installable-tool-box div.selected-tool:hover {
+ background: white;
+ color: rgb(85, 85, 85);
+}
+.tool-card {
+ width: 500px;
+ display: block;
+ border: 2px solid #4E4E4E;
+ border-radius: 2px 2px 5px 5px;
+ margin-bottom: 0;
+ background: white;
+ right: 10px;
+ top: 50px;
+ position: absolute;
+ z-index: 1000;
+}
+.tool-card::before {
+ content: "▲";
+ color: #4E4E4E;
+ font-size: xx-large;
+ position: absolute;
+ right: 0px;
+ top: -14px;
+ overflow: visible;
+ float: right;
+ height: 1.5rem;
+}
+.box-title {
+ z-index: 60;
+ height: auto;
+ font-size: small;
+ text-align: center;
+ padding-bottom: 3px;
+ position: relative;
+ padding-top: 3px;
+ background: #4E4E4E;
+ color: #DEDEDE;
+}
+.tool-info {
+ min-height: -15rem;
+ display: block;
+ clear: both;
+}
+.tool-info-left p {
+ text-align: center;
+ vertical-align: text-top;
+ padding-top: 0;
+ left: 0;
+ font-size: 11pt;
+ font-weight: 400;
+ margin: 2rem 33px;
+ color: #F9F9F9;
+ padding-bottom: 20px;
+ margin: 20px;
+}
+.tool-info-left h1 {
+ text-align: center;
+ padding-bottom: 0;
+ vertical-align: text-top;
+ padding-top: 0;
+ left: 0;
+ font-size: large;
+ background-color: #AEF4FF;
+ color: #5B5B5B;
+ height: 2.4rem;
+ margin: 0;
+}
+.add-tool-button {
+ width: 140px;
+ height: auto;
+ min-height: 1.6rem;
+ font-size: small;
+ bottom: 0.7rem;
+ right: -10px;
+}
+.tool-info-left {
+ background: #636363;
+ width: 60%;
+ height: 206px;
+ left: 0;
+ float: left;
+ top: 0;
+ color: white;
+}
+.tool-info-right {
+ width: 40%;
+ float: right;
+ overflow: hidden;
+ position: relative;
+ display: block;
+ top: 0;
+}
+.tool-form {
+ display: inline-block;
+ width: 100%;
+ position: absolute;
+ right: 0;
+ top: 0;
+ padding-top: 1rem;
+ height: auto;
+}
+#add-tool-form > label{
+ padding: 0;
+ font-size: 13pt;
+ position: absolute;
+ margin-left: 18px;
+}
+#add-tool-form > p{
+ font-size: large;
+}
+#add-tool-form > input {
+ padding-top: 10px;
+ padding-left: 10px;
+ width: 77%;
+ margin: 23px 60px 11px 19px;
+}
+#add-tool-form{
+ padding-top: 20px;
+ padding-left: 25px;
+ padding-right: 25px;
+}
+.tool-form-fields{
+ clear: both;
+ position: relative;
+ display: flex;
+ flex-direction: row;
+}
+#mount_point :invalid{
+ background: #333;
+}
+.add-tool-toggle{
+ background: rgba(255, 255, 255, 0.32);
+ /*clear: both;*/
+ color: #8b8b8b;
+ /*font-weight: bold;*/
+ /*margin: 1px;*/
+ /*position: relative;*/
+ /*right: 127px;*/
+ /*position: absolute;*/
+ /*padding: 5px 5px 3px;*/
+ border: 1px dashed #B3B3B3;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ /*top: 18px;*/
+ height: 100%;
+ width: 5.7rem;
+ float: right;
+ border-radius: 4px;
+ /*height: 1.5rem;*/
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ -o-user-select: none;
+ user-select: none;
+}
+.add-tool-toggle:hover{
+ background: #F4F4F4;
+ color: #777;
+}
+.active-nav-link{
+ font-weight: bolder;
+}
+.add-tool-field{
+ width: 50%;
+}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, #cccccc));
- background-image:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
- background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
- /* flex-wrap: wrap; */
- flex-direction: column;
- /* justify-content: flex-start; */
- justify-content: space-around;
- padding-bottom: 2.2rem;
- width: 100%;
- /* -webkit-flex-direction: row; */
- /* flex-direction: column; */
- /*margin-bottom: 8px;*/
- /* min-height: 280px; */
-}
-.installable-tool-box div {
- /* margin-top: 0.5rem; */
- margin-left: 0;
- /* height: auto; */
- border-radius: 4px;
- padding: 10px;
- text-align: right;
- font-size: medium;
- list-style: none;
- cursor: pointer;
- /*align-items: flex-start;*/
- min-width: 10%;
- border: 1px solid transparent;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
- border-radius: 0 4px 4px 0;
-}
-
-/*.installable-tool-box > div{
- color:blue;
- background: rgba(255, 255, 255, 0.8);
- min-width: 75px;
- border: 1px dashed orange;
-}*/
-
-.installable-tool-box div:hover {
- background: white;
- border: 1px solid rgb(0, 153, 204);
- border: 1;
-}
-.selected-tool {
- background: rgba(0, 153, 243, 0.8) !important;
- color: white !important;
- box-shadow: 3px 3px 2px #ABABAB !important;
- font-weight: bold;
-}
-.installable-tool-box div.selected-tool:hover {
- background: white;
- color: rgb(85, 85, 85);
-}
-.tool-card {
- width: 447px;
- height: 345px;
- display: block;
- border: 2px solid #5B5B5B;
- box-shadow: 7px 5px 21px rgba(68, 68, 68, 0.58);
- border-radius: 2px 2px 5px 5px;
- overflow: inherit;
- margin-bottom: 50px;
- background: rgb(255, 255, 255);
- right: 20px;
- position: absolute;
- background-image:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #ffffff), color-stop(100%, rgba(233, 233, 233, 0.67)));
- z-index: 1000;
- background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
- -webkit-gradient(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- linear, 0% 0%, 0% 100%,
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- color-stop(0%, #ffffff),
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- color-stop(100%, #cccccc));
- background-image:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -moz-linear-gradient(top, #ffffff 0%, #cccccc 100%);
- background-image: linear-gradient(top, #ffffff 0%, #cccccc 100%);
-}
-.tool-card::before {
- content: "â–²";
- color: #4E4E4E;
- font-size: xx-large;
- position: absolute;
- right: 0px;
- top: -14px;
- overflow: visible;
- float: right;
- height: 1.5rem;
-}
-.box-title {
- z-index: 60;
- height: auto;
- font-size: small;
- text-align: center;
- padding-bottom: 3px;
- position: relative;
- /* padding-top: 3px; */
- background: #4E4E4E;
- color: #DEDEDE;
- background-image:
-
-
-
-
-
-
-
-
- -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #555), color-stop(100%, #666));
- background-image:
-
-
-
-
-
-
-
-
- -moz-linear-gradient(top, #666 0%, #555 100%);
- background-image: linear-gradient(top, #666 0%, #555 100%);
-}
-.tool-info {
- min-height: 22rem;
- /* display: block; */
- width: 72%;
- float: right;
- /* clear: both; */
-}
-.tool-info-left p {
- text-align: center;
- vertical-align: text-top;
- padding-top: 0;
- left: 0;
- font-size: small;
- font-kerning: 81;
- font-weight: 100;
- min-height: 70px;
- margin: 1.5rem 23px;
- margin-top: 0;
- color: #FFFFFF;
- padding-bottom: 0px;
-}
-.tool-info-left h1 {
- text-align: center;
- padding-bottom: 0;
- vertical-align: text-top;
- padding-top: 8px;
- left: 0;
- font-size: large;
- /* background-color: #AEF4FF; */
- color: #5B5B5B;
- height: 2.6rem;
- box-shadow: 3px 2px 5px rgba(34, 34, 34, 0.56);
-}
-.add-tool-button {
- width: 109px;
- height: auto;
- background: white;
- min-width: 6rem;
- position: absolute;
- min-height: 2.1rem;
- margin-top: 5px;
- font-size: large;
- /* bottom: -2.3rem; */
- overflow: visible;
- right: 0px;
- bottom: -29px;
-}
-.tool-info-left {
- background: rgb(98, 98, 98);
- /* width: 75%; */
- position: relative;
- /* float: right; */
- /* display: inline-block; */
- height: auto;
- /* box-shadow: 0px 1px 5px darkgray; */
- /* left: 0; */
- /* border-left: 1px solid #B3B3B3; */
- /* float: right; */
- /* top: 0; */
- color: white;
-}
-.tool-info-right {
- /* width: 100%; */
- /* float: right; */
- /* overflow: hidden; */
- /* display: inline-grid; */
- /* flex-direction: column; */
- /* float: right; */
- /* position: relative; */
- /* left: 50px; */
- /* display: block; */
- top: 0;
- /* align-content: center; */
- height: auto;
- position: relative;
- top: -9px;
-}
-.tool-form {
- display: inline-block;
- width: 100%;
- position: absolute;
- right: 0;
- top: 0;
- padding-top: 1rem;
- /*height: auto;*/
-}
-#add-tool-form > label {
- /* padding: 0; */
- font-size: 8pt;
- /* position: relative; */
- /* left: -128px; */
- /* top: 27px; */
- /* margin-left: 18px; */
- color: grey;
-}
-#add-tool-form > p {
- font-size: large;
-}
-#add-tool-form > input {
- /* padding-top: 10px; */
- /* padding-left: 10px; */
- /* position: relative; */
- /* width: 60%; */
- /* display: inline-flex; */
- float: left;
- /* flex-wrap: wrap; */
- width: 100px;
- margin-left: 4px;
- margin-right: 20px;
-}
-#add-tool-url-preview {
- font-size: 10pt;
- position: relative;
- right: 143px;
- top: 43px;
- height: 20px;
- padding-bottom: 0;
- margin-bottom: 0;
-}
-#add-tool-form {
- padding-top: 0;
- margin-top: 0;
- display: flex;
- flex-direction: row;
- width: 95%;
- /* align-items: center; */
- padding-left: 0;
- /* padding-right: 25px; */
- /* height: 80px; */
- align-content: center;
- /* float: left; */
-}
-.tool-form-fields {
- clear: both;
- position: relative;
- display: flex;
- flex-direction: row;
-}
-#mount_point:invalid {
- /* background: #333; */
-}
-.add-tool-toggle {
- background: rgba(255, 255, 255, 0.32);
- /* clear: both; */
- color: #8b8b8b;
- /* font-weight: bold; */
- /* margin: 1px; */
- /*position: relative;*/
- /* right: 127px; */
- /* position: absolute; */
- /*padding: 5px 5px 3px;*/
- border: 1px dashed #B3B3B3;
- padding-top: 2px;
- padding-bottom: 2px;
- /* top: 18px; */
- height: 100%;
- width: 5.7rem;
- float: right;
- border-radius: 4px;
- /*height: 1.5rem;*/
- cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-.add-tool-toggle:hover {
- background: #F4F4F4;
- color: #777;
-}
-.active-nav-link {
- font-weight: bolder;
-}
-.menu-appear {
- opacity: 0.01;
-}
-.example-appear.example-appear-active {
- opacity: 1;
- transition: opacity .5s ease-in;
-}
-#installable-items {
- position: initial;
- left: 0px;
- float: left;
- width: 28%;
-}
-
.error-box{
- background: rgba(255, 165, 0, 0.54);
+ background: rgba(255, 114, 114, 0.65);
color: white;
padding: 4px;
- font-weight: bold;
- position: absolute;
- top: 66px;
- width: 146px;
+ font-weight: 500;
+ position: fixed;
+ top: 289px;
+ width: 175px;
box-shadow: 0px 1px 1px #8E8E8E;
- /* left: 17px; */
+ left: 639px;
border-radius: 4px;
font-size: 9pt;
float: left;
-}
-#add-tool-url-preview{
- /* float: right; */
-}
-
-#add-tool-url-preview > p > small {
- color: grey;
-}
-
-#add-tool-url-preview > p > strong {
- color: orange;
-}
-
-.add-tool-field{
- width: 50%;
- min-height: 137px;
-}
+}
\ No newline at end of file
[3/4] allura git commit: [#7919] Remove unneeded components and
refactor submenus
Posted by he...@apache.org.
[#7919] Remove unneeded components and refactor submenus
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/3ed19dc2
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/3ed19dc2
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/3ed19dc2
Branch: refs/heads/hs/7919
Commit: 3ed19dc298bcb9cf529f716c6ee5511bcb640979
Parents: 5117289
Author: Heith Seewald <hs...@hsmb.local>
Authored: Thu Oct 22 15:57:28 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Thu Oct 22 15:57:28 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/js/navbar.es6.js | 534 +++++++-------------------
1 file changed, 132 insertions(+), 402 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/3ed19dc2/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 feb1af8..c547cc8 100644
--- a/Allura/allura/public/nf/js/navbar.es6.js
+++ b/Allura/allura/public/nf/js/navbar.es6.js
@@ -1,8 +1,8 @@
'use strict';
-
/**
* Gets the current url.
+
* @constructor
* @param {bool} rest - Return a "rest" version of the url.
* @returns {string}
@@ -13,18 +13,44 @@ function _getProjectUrl(rest = true) {
return rest ? `${base}/rest/${nbhd}/${proj}` : `${base}/${nbhd}/${proj}`;
}
-function slugify(text)
-{
- return text.toString().toLowerCase()
- .replace(/\s+/g, '-') // Replace spaces with -
- .replace(/[^\w\-]+/g, '') // Remove all non-word chars
- .replace(/\-\-+/g, '-') // Replace multiple - with single -
- .replace(/^-+/, '') // Trim - from start of text
- .replace(/-+$/, ''); // Trim - from end of text
+function slugify(text) {
+ return text.toString().toLowerCase()
+ .replace(/\s+/g,/\s+/g,/\s+/g,/\s+/g, '-') // Replace spaces with -
+ .replace(/[^\w\-]+/g,/[^\w\-]+/g,/[^\w\-]+/g,/[^\w\-]+/g, '') // Remove all non-word chars
+ .replace(/\-\-+/g,/\-\-+/g,/\-\-+/g,/\-\-+/g, '-') // Replace multiple - with single -
+ .replace(/^-+/,/^-+/,/^-+/,/^-+/, '') // Trim - from start of text
+ .replace(/-+$/,/-+$/,/-+$/,/-+$/, ''); // Trim - from end of text
}
+/**
+ * Get the color for a tool type
+ * @constructor
+ * @label string 'The default mount label for a tool. i.e. git and hg use 'Code' which returns 'blue'.
+ * @return {string}
+ */
+function _getToolColor(defaultLabel='standard') {
+ switch (defaultLabel) {
+ case 'Wiki':
+ return '#DDFFF0';
+ case 'Git': // Git, svn, hg
+ return '#BBDEFB';
+ case 'Mercurial': // Git, svn, hg
+ return '#BBDEFB';
+ case 'Tickets':
+ return '#D1C4E9';
+ case 'Discussion':
+ return '#DCEDC8';
+ case 'Blog':
+ return '#FFF9C4';
+ case 'Link':
+ return '#FFCDD2';
+ default:
+ return 'white';
+ }
+}
/**
* Get a mount point from a NavBarItem node.
+
* @constructor
* @param {NavBarItem} node
* @returns {string}
@@ -52,85 +78,33 @@ function ToolsPropType() {
};
}
-
-/**
- * When the number of tools of the same type exceeds the grouping threshold,
- * they are placed in a group and this submenu is generated.
- * @constructor
- */
-var ToolSubMenu = React.createClass({
- propTypes: {
- isSubmenu: React.PropTypes.bool,
- tools: ToolsPropType
- },
- mode: 'list',
- 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 data={ item } name={ item.mount_point } url={ item.url }/>
- </div>
- </div>
- );
- });
-
- return (
- <div className='hidden' style={ { display: 'none'} }>
- <ReactReorderable handle='.draggable-handle' mode='grid' onDragStart={ this.onDragStart } onDrop={ this.props.onToolReorder }
- onChange={ this.onChange }>
- { tools }
- </ReactReorderable>
- </div>
- );
- }
-});
-
/**
* A single NavBar item.
+
* @constructor
*/
var NavBarItem = React.createClass({
propTypes: {
name: React.PropTypes.string.isRequired,
url: React.PropTypes.string.isRequired,
- isSubmenu: React.PropTypes.bool,
- children: React.PropTypes.array,
- tools: ToolsPropType
},
- generateItem: function () {
+
+ isAnchored: function() {
+ return this.props.is_anchored !== null;
+ },
+
+ render: function() {
var controls = [<i className='config-tool fa fa-cog'></i>];
- var arrow_classes = 'fa fa-arrows-h'
+ 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 () {
- return <ToolSubMenu {...this.props} tools={ this.props.children } key={ `submenu-${_.uniqueId()}` } isSubmenu={ true }/>;
- },
-
- generateContent: function () {
- var content = [this.generateItem()];
- if (this.props.children) {
- content.push(this.generateSubmenu());
- }
-
- return content;
- },
-
- render: function () {
- var content = this.generateContent();
- var classes = 'tb-item tb-item-edit';
return (
- <div className={ classes }>
- { content }
+ <div className="tb-item tb-item-edit">
+ <a>{this.props.name}<br/>{controls}</a>
</div>
);
}
@@ -138,26 +112,27 @@ var NavBarItem = React.createClass({
/**
* An input component that updates the NavBar's grouping threshold.
+
* @constructor
*/
var GroupingThreshold = React.createClass({
propTypes: {
initialValue: React.PropTypes.number.isRequired
},
- getInitialState: function () {
+ getInitialState: function() {
return {
value: this.props.initialValue
};
},
- handleChange: function (event) {
+ handleChange: function(event) {
this.setState({
value: event.target.value
});
this.props.onUpdateThreshold(event);
},
- render: function () {
+ render: function() {
return (
<div>
{ !!this.props.isHidden &&
@@ -176,14 +151,14 @@ var GroupingThreshold = React.createClass({
}
});
-
/**
* The NavBar when in "Normal" mode.
+
* @constructor
*/
var NormalNavBar = React.createClass({
- buildMenu: function (item) {
- var classes = ` ui-icon-${item.icon}-32`;
+ buildMenu: function(item) {
+ let classes = window.location.pathname.startsWith(item.url) ? 'active-nav-link' : '';
var subMenu;
if (item.children) {
@@ -195,20 +170,26 @@ var NormalNavBar = React.createClass({
<a href={ item.url } key={ 'link-' + _.uniqueId() } className={ classes }>
{ item.name }
</a>
- <ul className={ item.children ? 'submenu' : '' }>
- { subMenu }
- </ul>
+ {subMenu &&
+ <ul className={ classes + ' submenu'}>
+ { subMenu }
+ </ul>
+ }
</li>
);
},
- render: function () {
+ render: function() {
var listItems = this.props.items.map(this.buildMenu);
var classes = 'dropdown';
- classes = this.props.isSubmenu ? classes += ' submenu' : classes;
return (
- <ul className={ classes } key={ `toolList-${_.uniqueId()}` }>
+ <ul
+ className={ classes }
+ key={ `toolList-${_.uniqueId()}` }>
{ listItems }
+ <ToggleAddNewTool
+ handleToggleAddNewTool={this.props.handleToggleAddNewTool}
+ showAddToolMenu={this.props.showAddToolMenu} />
</ul>
);
}
@@ -224,33 +205,38 @@ var AdminNav = React.createClass({
tools: ToolsPropType
},
mode: 'grid',
- getInitialState: function () {
+ getInitialState: function() {
return {
hover: false
};
},
- mouseOver: function () {
+ mouseOver: function() {
this.setState({
hover: true
});
},
- mouseOut: function () {
+ mouseOut: function() {
this.setState({
hover: false
});
},
- render: function () {
+ render: function() {
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 }
+ 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'}/>;
+ 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);
@@ -258,7 +244,7 @@ var AdminNav = React.createClass({
anchored_tools.push(core_item);
} else {
tools.push(
- <div className={ 'draggable-element' + subMenuClass } key={ 'draggable-' + _.uniqueId() }>
+ <div className={ 'draggable-element' + subMenuClass } key={ 'draggable-' + _.uniqueId() }>
{ core_item }
</div>
);
@@ -268,8 +254,13 @@ var AdminNav = React.createClass({
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 }>
+ <ReactReorderable
+ key={ 'reorder-' + _.uniqueId() }
+ handle='.draggable-handle'
+ mode='grid'
+ onDragStart={ this.onDragStart }
+ onDrop={ this.props.onToolReorder }
+ onChange={ this.onChange }>
{ tools }
</ReactReorderable>
{ end_tools }
@@ -280,13 +271,14 @@ var AdminNav = React.createClass({
/**
* The button that toggles NavBar modes.
+
* @constructor
*/
var ToggleAdminButton = React.createClass({
propTypes: {
visible: React.PropTypes.bool
},
- render: function () {
+ render: function() {
var classes = this.props.visible ? 'fa fa-unlock' : 'fa fa-lock';
return (
<button id='toggle-admin-btn' onClick={ this.props.handleButtonPush } className='admin-toolbar-right'>
@@ -297,290 +289,8 @@ var ToggleAdminButton = React.createClass({
});
/**
- * Add new tool button.
- * @constructor
- */
-var ToggleAddNewTool = React.createClass({
- render: function () {
- return (
- <div>
- <div onClick={ this.props.handleToggleAddNewTool } className="add-tool-toggle"> + Add new...</div>
- {this.props.showMenu && <NewToolMain />}
- </div>
- );
- }
-});
-
-//////////////////
-// Add New Tool //
-//////////////////
-
-
-/**
- * Menu for adding a new tool.
- * @constructor
- */
-var NewToolMenu = React.createClass({
- propTypes: {
- tools: React.PropTypes.array,
- onPushAddButton: React.PropTypes.func,
- onSetActive: React.PropTypes.func,
- formData: React.PropTypes.object,
- visible: React.PropTypes.bool
- },
-
- render: function () {
- var _this = this;
- var showInfo = this.props.active.name !== "Add a tool";
-
- var tools = this.props.tools.map(function (tool, i) {
- var classes;
- if (_this.props.active && _this.props.active.name === tool.name) {
- classes = " selected-tool"
- }
- else {
- classes = ""
- }
- return (
- <li className={classes}
- id={"add-new-" + tool.name}
- key={`new-tool-btn-${i}`}
- onClick={_this.props.handleChangeTool}>
- {tool.tool_label}
- </li>
- )
- });
-
- return (
- <div className="tool-card">
- <div className="box-title">Add a new ...</div>
- <div id="installable-items">
- <ul className="installable-tool-box">
- {tools}
- </ul>
- </div>
- <div className="tool-partition"></div>
-
- {showInfo &&
- <NewToolInfo {...this.props}
- name={this.props.active.tool_label}
- description={this.props.active.description}
- handleAddButton={this.props.handleAddButton}/>
- }
- </div>
- );
- }
-});
-
-var InstallNewToolForm = React.createClass({
- render: function () {
- return (
- <form id="add-tool-form">
- <label htmlFor="mount_label">Label</label>
- <input required
- id="mount_label"
- onChange={this.props.handleChangeForm}
- value={this.props.formData.mount_label} />
-
- <label htmlFor="mount_point">Url Path</label>
- <input required
- id="mount_point"
- onChange={this.props.handleChangeForm}
- onBlur={this.props.toolFormIsValid}
- value={slugify(this.props.formData.mount_label)}
- value={this.props.formData.mount_point.toLowerCase()}/>
- <span>{this.props.validationErrors.mount_point}</span>
-
- <p style={{"color": "grey"}}><small>http://hs/p/finna/</small><strong style={{"color": "orange"}}>
- {this.props.formData.mount_point}
- </strong></p>
-
- <button id="new-tool-submit"
- onClick={this.props.handleSubmit}
- className="add-tool-button">
- Add Tool
- </button>
- </form>
- );
- }
-});
-
-
-var NewToolInfo = React.createClass({
- propTypes: {
- name: React.PropTypes.string,
- description: React.PropTypes.string,
- handleAddButton: React.PropTypes.func
- },
-
-
- render: function () {
- return (
- <div className="tool-info">
- <div className="tool-info-left">
- <h1>{this.props.name}</h1>
- <p>{this.props.description}</p>
- </div>
- <div className="tool-info-right">
- <InstallNewToolForm {...this.props} />
- </div>
- </div>
- );
- }
-});
-
-
-var installableToolsCache = {};
-function loadTools(id, callback) {
- if(!installableToolsCache[id]) {
- installableToolsCache[id] = $.get(_getProjectUrl(true) + "/admin/installable_tools/").promise();
- }
- installableToolsCache[id].done(callback);
-}
-
-
-var NewToolMain = React.createClass({
- getInitialState: function () {
- let toolPlaceHolder = {
- name: "Add a tool",
- tool_label: "Add a tool",
- description: "click on one of the tools shown above to add it to your project."
- };
-
- return {
- visible: false,
- installableTools: [toolPlaceHolder],
- active: toolPlaceHolder,
- errors: {
- mount_point: [],
- mount_label: []
- },
- new_tool: {
- mount_point: "",
- tool_label: "",
- mount_label: ""
- }
- };
- },
-
- componentDidMount: function () {
- let tools = loadTools('tools', function (result) {
- if (this.isMounted()) {
- this.setState({
- installableTools: result['tools']
- })
- }
- }.bind(this));
- },
- handleChangeTool: function (e) {
- console.log(`Changed tool to: ${e.target.textContent}`);
- this._setActiveByName(e.target.textContent);
-
- },
- _setActiveByName: function (tool_label) {
- var index = this.state.installableTools.findIndex(
- x => x.tool_label === tool_label
- );
- var active = this.state.installableTools[index];
- var _new_tool = this.state.new_tool;
-
- _new_tool['mount_label'] = active.defaults.default_mount_label;
- _new_tool['mount_point'] = "";
-
- this.setState({
- active: active,
- new_tool: _new_tool
- });
- },
-
- handleChangeForm: function (e) {
- console.log(e.target.value);
- var _new_tool = this.state.new_tool;
-
- console.log(e.target.id);
- _new_tool[e.target.id] = e.target.value;
-
- this.setState({
- new_tool: _new_tool
- });
-
- },
- handleSubmit: function (e) {
- e.preventDefault();
- var data = {
- _session_id: $.cookie('_session_id'),
- tool: this.state.active.name,
- mount_label: this.state.new_tool.mount_label,
- mount_point: this.state.new_tool.mount_point
- };
-
- var url = _getProjectUrl() + "/admin/install_tool/";
-
- $.ajax({
- type: 'POST',
- url: url,
- data: data,
- success: function () {
- $('#messages').notify('Tool created',
- {
- status: 'confirm'
- });
- },
-
- error: function () {
- $('#messages').notify('Error creating tool.',
- {
- status: 'error'
- });
- }
- });
-
- },
-
- toolFormIsValid: function (e) {
- e.preventDefault();
-
- var errors = {
- mount_point: []
- };
-
- if (this.state.new_tool.mount_point.length < 3) {
- errors.mount_point.push("Mount point must have at least 3 characters.");
- }
-
- let data = {
- 'mount_point': e.target.value,
- '_session_id': $.cookie('_session_id')
- };
-
- let result = $.post(_getProjectUrl() + '/admin/mount_point/', data);
- if (!result.responseJSON) {
- errors.mount_point.push("Mount point already exists.");
- }
-
- this.setState({errors: errors})
-
- },
-
- render: function () {
- return <NewToolMenu
- active={this.state.active}
- tools={this.state.installableTools}
- formData={this.state.new_tool}
- handleChangeTool={this.handleChangeTool}
- handleSubmit={this.handleSubmit}
- handleChangeForm={this.handleChangeForm}
- toolFormIsValid={this.toolFormIsValid}
- validationErrors={this.state.errors}
- handleAddButton={this.handleAddButton}/>;
- }
-});
-
-
-////////////////////////////////////////////
-
-/**
* The main "controller view" of the NavBar.
+
* @constructor
* @param {object} initialData - Consumes the _nav.json endpoint.
*/
@@ -589,7 +299,7 @@ var Main = React.createClass({
initialData: ToolsPropType,
installableTools: React.PropTypes.array
},
- getInitialState: function () {
+ getInitialState: function() {
return {
data: this.props.initialData,
visible: false,
@@ -601,8 +311,8 @@ var Main = React.createClass({
/**
* When invoked, this updates the state with the latest data from the server.
*/
- getNavJson: function () {
- $.get(`${_getProjectUrl(false)}/_nav.json`, function (result) {
+ getNavJson: function() {
+ $.get(`${_getProjectUrl(false)}/_nav.json`, function(result) {
if (this.isMounted()) {
this.setState({
data: result
@@ -610,12 +320,10 @@ var Main = React.createClass({
}
}.bind(this));
},
-
-
/**
* Handles the locking and unlocking of the NavBar
*/
- handleToggleAdmin: function () {
+ handleToggleAdmin: function() {
this.setState({
visible: !this.state.visible
});
@@ -624,7 +332,13 @@ var Main = React.createClass({
/**
* Handles the the display of the "Add new tool" menu.
*/
- handleToggleAddNewTool: function () {
+ handleToggleAddNewTool: function() {
+ $('body').click(function(e) { // click the background
+ if (e.target == this) {
+ $(this).fadeOut();
+ }
+ });
+
this.setState({
showAddToolMenu: !this.state.showAddToolMenu
});
@@ -632,9 +346,10 @@ var Main = React.createClass({
/**
* Handles the changing of the NavBars grouping threshold.
+
* @param {object} event
*/
- onUpdateThreshold: function (event) {
+ onUpdateThreshold: function(event) {
var _this = this;
var thres = event.target.value;
var url = `${_getProjectUrl()}/admin/configure_tool_grouping`;
@@ -651,8 +366,8 @@ var Main = React.createClass({
this.setState({
in_progress: true
});
- $.post(url, data, function () {
- }.bind(this)).always(function () {
+ $.post(url, data, function() {
+ }.bind(this)).always(function() {
_this.setState({
in_progress: false
});
@@ -664,15 +379,16 @@ var Main = React.createClass({
/**
* Handles the changing of the NavBars grouping threshold.
+
* @param {array} data - Array of tools
*/
- onToolReorder: function (data) {
+ onToolReorder: function(data) {
var tools = this.state.data;
var params = {
_session_id: $.cookie('_session_id')
};
- data.map(function (tool, i) {
+ data.map(function(tool, i) {
var mount_point = getMountPoint(tool);
var index = tools.children.findIndex(
x => x.mount_point === mount_point
@@ -690,7 +406,7 @@ var Main = React.createClass({
type: 'POST',
url: url,
data: params,
- success: function () {
+ success: function() {
$('#messages').notify('Tool order updated',
{
status: 'confirm'
@@ -698,7 +414,7 @@ var Main = React.createClass({
_this.getNavJson();
},
- error: function () {
+ error: function() {
$('#messages').notify('Error saving tool order.',
{
status: 'error'
@@ -707,33 +423,47 @@ var Main = React.createClass({
});
},
- render: function () {
+ render: function() {
var editMode = this.state.visible ? 'edit-mode' : '';
var _this = this;
var navBarSwitch = (showAdmin) => {
if (showAdmin) {
return (
- <AdminNav tools={ _this.state.data.menu } data={ _this.state.data } onToolReorder={ _this.onToolReorder }
- onUpdateMountOrder={ _this.onUpdateMountOrder } editMode={ _this.state.visible } />
+ <AdminNav
+ tools={ _this.state.data.menu }
+ data={ _this.state.data }
+ onToolReorder={ _this.onToolReorder }
+ onUpdateMountOrder={ _this.onUpdateMountOrder }
+ editMode={ _this.state.visible } />
);
} else {
return (
<div>
- <NormalNavBar items={ _this.state.data.menu } key={ `normalNav-${_.uniqueId()}` }/>
- <ToggleAddNewTool handleToggleAddNewTool={this.handleToggleAddNewTool} showMenu={this.state.showAddToolMenu} />
+ <NormalNavBar
+ items={ _this.state.data.menu }
+ handleToggleAddNewTool={this.handleToggleAddNewTool}
+ showAddToolMenu={this.state.showAddToolMenu}/>
</div>
- )
+ );
}
};
var navBar = navBarSwitch(this.state.visible);
return (
- <div ref={ _.uniqueId() } className={ 'nav_admin ' + editMode }>
+ <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 }/>
+ <ToggleAdminButton
+ key={ _.uniqueId() }
+ handleButtonPush={ this.handleToggleAdmin }
+ visible={ this.state.visible }/>
</div>
);
}
[2/4] allura git commit: [#7919] Split the "add new tool" components
into another file
Posted by he...@apache.org.
[#7919] Split the "add new tool" components into another file
Project: http://git-wip-us.apache.org/repos/asf/allura/repo
Commit: http://git-wip-us.apache.org/repos/asf/allura/commit/51172891
Tree: http://git-wip-us.apache.org/repos/asf/allura/tree/51172891
Diff: http://git-wip-us.apache.org/repos/asf/allura/diff/51172891
Branch: refs/heads/hs/7919
Commit: 51172891c6a554ef4fe8f275fbdb07c2997fe010
Parents: 26e49ff
Author: Heith Seewald <hs...@hsmb.local>
Authored: Thu Oct 22 15:54:59 2015 -0400
Committer: Heith Seewald <hs...@hsmb.local>
Committed: Thu Oct 22 15:54:59 2015 -0400
----------------------------------------------------------------------
Allura/allura/public/nf/js/add-new-tool.es6.js | 347 ++++++++++++++++++++
1 file changed, 347 insertions(+)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/allura/blob/51172891/Allura/allura/public/nf/js/add-new-tool.es6.js
----------------------------------------------------------------------
diff --git a/Allura/allura/public/nf/js/add-new-tool.es6.js b/Allura/allura/public/nf/js/add-new-tool.es6.js
new file mode 100644
index 0000000..c9820e9
--- /dev/null
+++ b/Allura/allura/public/nf/js/add-new-tool.es6.js
@@ -0,0 +1,347 @@
+'use strict';
+
+///////////////////////////////////////////////////
+// Components for adding a new tool to a project //
+///////////////////////////////////////////////////
+
+/**
+ * Add new tool button.
+ * @constructor
+ */
+var ToggleAddNewTool = React.createClass({
+ render: function() {
+ let _this = this;
+
+ var content = (() => {
+ if (_this.props.showAddToolMenu) {
+ return (
+ <div>
+ <span onClick={ _this.props.handleToggleAddNewTool }
+ className='add-tool-toggle'> + Add new...</span>
+ <NewToolMain />
+ </div>
+ );
+ } else {
+ return (
+ <span onClick={ _this.props.handleToggleAddNewTool }
+ className='add-tool-toggle'> + Add new...</span>
+ );
+ }
+ })();
+
+ return (<li>
+ {content}
+ </li>
+ );
+ }
+});
+
+/**
+ * Menu for adding a new tool.
+ * @constructor
+ */
+var NewToolMenu = React.createClass({
+ propTypes: {
+ tools: React.PropTypes.array,
+ onPushAddButton: React.PropTypes.func,
+ onSetActive: React.PropTypes.func,
+ formData: React.PropTypes.object,
+ visible: React.PropTypes.bool
+ },
+
+ render: function() {
+ var _this = this;
+ var showInfo = this.props.active.name !== 'Add a tool';
+ var tools = this.props.tools.map(function(tool, i) {
+ var classes;
+ if (_this.props.active && _this.props.active.tool_label === tool.tool_label) {
+ classes = ' selected-tool';
+ }else {
+ classes = ' ';
+ }
+ return (
+ <div className={classes}
+ id={'add-new-' + tool.name}
+ key={`new-tool-btn-${i}`}
+ onClick={_this.props.handleChangeTool}>
+ {tool.tool_label}
+ </div>
+ );
+ });
+
+ return (
+ <div className='tool-card'>
+ <div className='box-title'>Add a new ...</div>
+ <div id='installable-items'>
+ <div className='installable-tool-box'>
+ {tools}
+ </div>
+ </div>
+ {showInfo &&
+ <NewToolInfo {...this.props}
+ name={this.props.active.name}
+ toolLabel={this.props.active.tool_label}
+ description={this.props.active.description}
+ handleAddButton={this.props.handleAddButton}/>
+ }
+ </div>
+ );
+ }
+});
+
+var FormField = React.createClass({
+ propTypes: {
+ id: React.PropTypes.string,
+ handleOnChange: React.PropTypes.func,
+ value: React.PropTypes.func,
+ errors: React.PropTypes.array
+ },
+
+ getErrors: function() {
+ if (!this.props.errors.hasOwnProperty(this.props.id) || this.props.errors[this.props.id].length === 0) {
+ return;
+ }
+
+ let errorList = [].concat(this.props.errors[this.props.id]);
+
+ var result = errorList.map(function(e) {
+ console.log('eeeee', e);
+ console.dir(e);
+ return <span>{e}</span>;
+ });
+ console.log('result', result);
+ return (
+ <div className="error-box">
+ {result}
+ </div>
+ );
+ },
+ render: function () {
+ let errors = this.getErrors();
+ console.log('val e', errors);
+ return (
+ <div className="add-tool-field">
+ <label htmlFor={this.props.id}>{this.props.label}</label>
+ <input required
+ id={this.props.id}
+ onBlur={this.props.handleOnBlur}
+ onChange={this.props.handleOnChange}
+ value={this.props.value}/>
+
+ {errors}
+ </div>
+
+ );
+ }
+});
+
+var InstallNewToolForm = React.createClass({
+ render: function() {
+ return (
+ <form id='add-tool-form'>
+ <FormField
+ id="mount_label"
+ handleOnChange={this.props.handleChangeForm}
+ handleOnBlur={this.props.toolFormIsValid}
+ value={this.props.formData.mount_label}
+ label="Label"
+ errors={this.props.validationErrors}
+ />
+
+ <FormField
+ id="mount_point"
+ handleOnChange={this.props.handleChangeForm}
+ handleOnBlur={this.props.toolFormIsValid}
+ value={this.props.formData.mount_point}
+ label="Url Path"
+ errors={this.props.validationErrors}
+ />
+
+ <div id={'add-tool-url-preview'}>
+ <p>
+ <small>{_getProjectUrl(false)}/</small>
+ <strong>{this.props.formData.mount_point}</strong>
+ </p>
+ </div>
+ <div>
+ <button id='new-tool-submit'
+ onClick={this.props.handleSubmit}
+ className='add-tool-button'>
+ Add Tool
+ </button>
+ </div>
+ </form>
+ );
+ }
+});
+
+var NewToolInfo = React.createClass({
+ propTypes: {
+ name: React.PropTypes.string,
+ description: React.PropTypes.string,
+ handleAddButton: React.PropTypes.func
+ },
+
+ render: function() {
+ var titleStyle = {background: _getToolColor(this.props.toolLabel)};
+ return (
+ <div className='tool-info'>
+ <div className='tool-info-left'>
+ <h1 style={titleStyle}>{this.props.toolLabel}</h1>
+ <p>{this.props.description}</p>
+ </div>
+ <div className='tool-info-right'>
+ <InstallNewToolForm {...this.props} />
+ </div>
+ </div>
+ );
+ }
+});
+
+var installableToolsCache = {};
+function loadTools(id, callback) {
+ if (!installableToolsCache[id]) {
+ installableToolsCache[id] = $.get(_getProjectUrl(true) + '/admin/installable_tools/').promise();
+ }
+ installableToolsCache[id].done(callback);
+}
+
+var NewToolMain = React.createClass({
+ getInitialState: function() {
+ let toolPlaceHolder = {
+ name: 'Add a tool',
+ tool_label: 'Add a tool',
+ description: 'click on one of the tools shown above to add it to your project.'
+ };
+
+ return {
+ visible: false,
+ installableTools: [toolPlaceHolder],
+ active: toolPlaceHolder,
+ errors: {
+ mount_point: [],
+ mount_label: []
+ },
+ new_tool: {
+ mount_point: '',
+ tool_label: '',
+ mount_label: ''
+ }
+ };
+ },
+
+ componentDidMount: function() {
+ let tools = loadTools('tools', function(result) {
+ if (this.isMounted()) {
+ this.setState({
+ installableTools: result.tools
+ });
+ }
+ }.bind(this));
+ },
+ handleChangeTool: function(e) {
+ console.log("HANDLE CHANGE -->", e.target.textContent);
+ this._setActiveByLabel(e.target.textContent);
+ },
+ _setActiveByLabel: function(tool_label) {
+ var index = this.state.installableTools.findIndex(
+ x => x.tool_label === tool_label
+ );
+ console.log('index for tool_label: ', index);
+ var active = this.state.installableTools[index];
+
+ console.log('new active: ', active);
+
+ var _new_tool = this.state.new_tool;
+ console.log('new _new_tool: ', _new_tool);
+
+ _new_tool.mount_label = active.defaults.default_mount_label;
+ _new_tool.mount_point = '';
+
+ this.setState({
+ active: active,
+ new_tool: _new_tool
+ });
+ },
+
+ handleChangeForm: function(e) {
+ var _new_tool = this.state.new_tool;
+ _new_tool[e.target.id] = e.target.value;
+
+ this.setState({
+ new_tool: _new_tool
+ });
+
+ },
+
+ handleSubmit: function(e) {
+ e.preventDefault();
+ var data = {
+ _session_id: $.cookie('_session_id'),
+ tool: this.state.active.name,
+ mount_label: this.state.new_tool.mount_label,
+ mount_point: this.state.new_tool.mount_point
+ };
+
+ $.ajax({
+ type: 'POST',
+ url: _getProjectUrl() + '/admin/install_tool/',
+ data: data,
+ success: function() {
+ $('#messages')
+ .notify('Tool created', {
+ status: 'confirm'
+ });
+ },
+
+ error: function() {
+ $('#messages')
+ .notify('Error creating tool.', {
+ status: 'error'
+ });
+ }
+ });
+ },
+ toolFormIsValid: function(e) {
+ e.preventDefault();
+ var errors = {
+ mount_point: []
+ };
+
+ if (this.state.new_tool.mount_point.length < 3) {
+ errors.mount_point.push('Mount point must have at least 3 characters.');
+ }
+ let data = {
+ 'mount_point': e.target.value,
+ '_session_id': $.cookie('_session_id')
+ };
+
+ let result = $.post(_getProjectUrl() + '/admin/mount_point/', data);
+ if (!result.responseJSON) {
+ errors.mount_point.push('Mount point already exists.');
+ }
+
+ this.setState({errors: errors});
+
+ },
+
+ render: function() {
+ return (
+ <React.addons.CSSTransitionGroup
+ transitionName="menu"
+ transitionEnterTimeout={500}
+ transitionLeaveTimeout={300} >
+ <NewToolMenu
+ active={this.state.active}
+ tools={this.state.installableTools}
+ formData={this.state.new_tool}
+ handleChangeTool={this.handleChangeTool}
+ handleSubmit={this.handleSubmit}
+ handleChangeForm={this.handleChangeForm}
+ toolFormIsValid={this.toolFormIsValid}
+ validationErrors={this.state.errors}
+ handleAddButton={this.handleAddButton}/>
+ </React.addons.CSSTransitionGroup>
+ );
+ }
+});