Skip to content

Commit

Permalink
Work in progress
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaphaelGauthier
RaphaelGauthier committed Aug 3, 2017
1 parent 6da6483 commit f711be0
Show file tree
Hide file tree
Showing 3 changed files with 347 additions and 33 deletions.
218 changes: 215 additions & 3 deletions builder/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ a:hover {
outline: none;
padding: 0;
color: #555;
top: 1px;
}
.method-actions.disabled {
cursor: not-allowed;
Expand Down Expand Up @@ -513,6 +514,7 @@ button.btn-save.saving span.saving{
span.text-fit {
font-weight: normal;
}

.generic-methods .panel-title{
position: relative;
}
Expand Down Expand Up @@ -602,6 +604,179 @@ span.text-fit {
margin-left: 10px;
font-size: 16px;
}
.ng-toast.ng-toast--right .ng-toast__message {
text-align: left;
}

/* DEPRECATED METHODS */
li.deprecated{
display: none;
}
li.deprecated h4.panel-title > span, li.deprecatedCategory > a{
text-decoration: line-through !important;
}
li.deprecated.used, li.deprecated.show {
display: block;
}

/* CUSTOM CHECKBOX */
.rudder-form input[type=checkbox] + .label-radio{
border-radius: 3px;
}
.rudder-form input[type=radio] + .label-radio,.rudder-form input[type=checkbox] + .label-radio{
display: inline-block;
height: 15px;
width: 15px;
border: 2px solid rgb(198, 200, 201);
text-align: center;
line-height: 34px;
position: relative;
top: 5px;
margin-bottom:0;
background-color: #fff;
}
.rudder-form input[type=radio] + .label-radio{
border-radius: 50%;
}
.rudder-form input[type=radio] + .label-radio + .text-radio,.rudder-form input[type=checkbox] + .label-radio + .text-radio{
-webkit-animation: text-radio-off .2s ease-in forwards;
-moz-animation: text-radio-off .2s ease-in forwards;
-o-animation: text-radio-off .2s ease-in forwards;
animation: text-radio-off .2s ease-in forwards;
}
.rudder-form input[type=radio]:checked + .label-radio + .text-radio,.rudder-form input[type=checkbox]:checked + .label-radio + .text-radio{
-webkit-animation: text-radio-on .2s ease-in forwards;
-moz-animation: text-radio-on .2s ease-in forwards;
-o-animation: text-radio-on .2s ease-in forwards;
animation: text-radio-on .2s ease-in forwards;
}
.rudder-form input[type=radio] + .label-radio span,.rudder-form input[type=checkbox] + .label-radio span{
font-size: 9px;
top: -12.5px;
left: 0.1px;
position: relative;
visibility:hidden;
animation: opacity-0 .2s linear forwards;
}
.rudder-form input[type=radio]:checked + .label-radio span,.rudder-form input[type=checkbox]:checked + .label-radio span{
visibility:visible;
animation: opacity-1 .2s linear forwards;
}
.rudder-form .text-radio{
position: relative;
top: -6px;
margin-left: 8px;
}
.rudder-form input[type=radio],.rudder-form input[type=checkbox]{
display: none;
}
.rudder-form input[type=radio]:disabled + .label-radio,.rudder-form input[type=checkbox]:disabled + .label-radio{
background-color: rgb(236,236,236);
}
.rudder-form input[type=radio]:disabled + .label-radio span,.rudder-form input[type=checkbox]:disabled + .label-radio span{
color:#898989;
}
.rudder-form input[type=radio]:checked:disabled + .label-radio + .text-radio, .rudder-form input[type=checkbox]:checked:disabled + .label-radio + .text-radio,.rudder-form input[type=radio]:disabled + .label-radio + .text-radio, .rudder-form input[type=checkbox]:disabled + .label-radio + .text-radio{
color: #B7B4B4;
-webkit-animation:none;
-moz-animation:none;
-o-animation:none;
animation:none;
}
ul.list-sm{
list-style-type: none;
}
ul.list-sm .rudder-form input[type=checkbox] + .label-radio + .check-icon{
font-size:12px;
}
ul > li.rudder-form:first-child > .input-group label.form-control,ul > li.rudder-form:first-child > .input-group .input-group-addon{
border-top:1px solid #d0d0d0;
}
#denyBadClocksForm ul > li:first-child > .input-group .input-group-addon,ul > li.rudder-form:first-child > .input-group .input-group-addon{
border-top-left-radius:4px;
}
#denyBadClocksForm ul > li:last-child > .input-group .input-group-addon,ul > li.rudder-form:last-child > .input-group .input-group-addon{
border-bottom-left-radius:4px;
}
ul > li.rudder-form:first-child > .input-group label.form-control{
border-top-right-radius:4px;
}
ul > li.rudder-form label{
cursor:pointer;
}
ul > li.rudder-form > .input-group label.form-control{
border-top-right-radius:0;
border-bottom-right-radius:0;
font-weight: 500;
color: #555;
font-size: 14px;
}
ul.list-sm > li.rudder-form > .input-group label.form-control{
height: auto;
min-height: 34px;
font-size: 14px;
}
ul > li.rudder-form > .input-group .input-group-addon{
padding: 3px 11px;
background-color: #f4f4f4;
}
ul.list-sm > li.rudder-form > .input-group .input-group-addon{
padding: 0 11px;
}
ul > li.rudder-form > .input-group label.form-control .glyphicon.info{
top:3px;
}
ul > li.rudder-form:last-child > .input-group label.form-control{
border-bottom-right-radius:4px;
padding-top: 6px;
}
ul > li.rudder-form > .input-group label.form-control,ul > li.rudder-form > .input-group .input-group-addon{
border-top:none;
}
ul > li.rudder-form > .input-group label.form-control{
padding-right: 40px;
}
ul > li.rudder-form > .input-group.disabled label.form-control,ul > li.rudder-form > .input-group.disabled .input-group-addon{
background-color: #eeeeee;
cursor:no-drop;
}
ul > li.rudder-form > .input-group.disabled *{
cursor:no-drop;
}
.rudder-form input[type=checkbox] + .label-radio + .check-icon,.rudder-form input[type=radio] + .label-radio + .check-icon{
position: absolute;
top: calc(50% - 7px);
right: 15px;
color: #222d32;
z-index: 10;
visibility:hidden;
animation: opacity-0 .1s linear forwards;
}
.list-sm .rudder-form input[type=checkbox] + .label-radio + .check-icon,.rudder-form input[type=radio] + .label-radio + .check-icon{
top: 11px;
}
.rudder-form .disabled input[type=checkbox] + .label-radio + .check-icon,.rudder-form .disabled input[type=radio] + .label-radio + .check-icon{
color: #7d7d7d;
}
.rudder-form input[type=checkbox]:checked + .label-radio + .check-icon,.rudder-form input[type=radio]:checked + .label-radio + .check-icon{
visibility:visible;
animation: opacity-1 .1s linear forwards;
}
.deprecated-icon{
color:#f08004;
top:2px;
font-size: 0.8em !important;
}
.btn-method .deprecated-icon{
top: -6px;
left: -2px;
font-size: 14px;
}
#methodBlock h3 > .deprecated-icon{
font-size: 16px;
left: -4px;
top: -8px;
}
@-webkit-keyframes saving {
0% {
-ms-transform: rotate(0deg);
Expand Down Expand Up @@ -634,7 +809,44 @@ span.text-fit {
transform: rotate(360deg);
}
}

.ng-toast.ng-toast--right .ng-toast__message {
text-align: left;
@keyframes opacity-1 {
0% {opacity:0;visibility: visible;}
100% {opacity:1;visibility: visible;}
}
@keyframes opacity-0 {
0% {opacity:1;visibility: visible;}
99% {opacity:0;visibility: visible;}
100% {opacity:0;visibility: hidden;}
}
@-webkit-keyframes text-radio-on {
0% {color: #646464;}
100% {color: #222D32;}
}
@-moz-keyframes text-radio-on {
0% {color: #646464;}
100% {color: #222D32;}
}
@-o-keyframes text-radio-on {
0% {color: #646464;}
100% {color: #222D32;}
}
@keyframes text-radio-on {
0% {color: #646464;}
100% {color: #222D32;}
}
@-webkit-keyframes text-radio-off {
0% {color: #222D32;}
100% {color: #646464;}
}
@-moz-keyframes text-radio-off {
0% {color: #222D32;}
100% {color: #646464;}
}
@-o-keyframes text-radio-off {
0% {color: #222D32;}
100% {color: #646464;}
}
@keyframes text-radio-off {
0% {color: #222D32;}
100% {color: #646464;}
}
80 changes: 71 additions & 9 deletions builder/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,8 +114,8 @@ <h1>You are not authenticated in ncf-builder</h1>
<div>Please try again by clicking <a href="" ng-click="reloadPage()">here</a></div>
</div>
</div>
<div class="container Override row fill" ng-show="authenticated" >

<div class="container Override row fill" ng-show="authenticated">
<div class="col-lg-2 col-md-2 col-sm-4 col-xs-12 ncf_col">
<div class="title">Library</div>
<h3 >Techniques</h3>
Expand All @@ -132,9 +132,21 @@ <h3 >Techniques</h3>
</tr>
</thead>
<tbody>
<tr ng-repeat="technique in techniques | orderBy:'name':false | filter:searchText track by $index" ng-click="checkSelect(technique,selectTechnique)" >
<tr ng-repeat="technique in techniques | orderBy:'name':false | filter:searchText track by $index" ng-click="checkSelect(technique,selectTechnique)">
<td href="#" ng-class="{'active': isSelected(technique)}" style="height:100%;vertical-align:middle; padding: 0 5px">
<span class="col-md-10">{{technique.name}} </span>
<span class="col-md-10">
{{technique.name}}
<i
popover
class="glyphicon glyphicon-exclamation-sign deprecated-icon"
ng-if="hasDeprecatedMethod(technique)"
data-original-title="{{technique.name}}"
data-content="This technique is using at least one deprecated generic method."
rel="popover" data-placement="bottom"
data-trigger="hover"
data-container="body">
</i>
</span>
</td>
<td href="#" ng-class="{'active': isSelected(technique)}" style="height:100%;vertical-align:middle">
<i type="button" class="glyphicon pull-right icon-margin" ng-class="{'glyphicon-chevron-left': isSelected(technique), 'glyphicon-chevron-right': !isSelected(technique)}"></i>
Expand All @@ -143,7 +155,6 @@ <h3 >Techniques</h3>
</tbody>
</table>
</div>

<form class="form-horizontal editForm col-lg-5 col-md-5 col-sm-8 col-xs-12 ncf_col" name="editForm" novalidate >
<div class="jumbotron" ng-if="selectedTechnique === undefined" >
<h1>Technique editor</h1>
Expand Down Expand Up @@ -232,6 +243,17 @@ <h4 class="panel-title">
</div>
<span class="pull-left method-name">
{{getMethodName(method_call)}}
<i
popover
class="glyphicon glyphicon-exclamation-sign deprecated-icon"
ng-if="(method_call.deprecated || isDeprecated(method_call.method_name))"
data-original-title="{{getMethodName(method_call)}}"
data-content="This generic method is deprecated."
rel="popover"
data-placement="top"
data-trigger="hover"
data-container="body">
</i>
<a ng-click="$event.stopPropagation();" target="_blank" ng-href="http://www.ncf.io/pages/reference.html#{{getMethodBundleName(method_call)}}">
<i class="glyphicon glyphicon-info-sign method-actions"></i>
</a>
Expand Down Expand Up @@ -281,7 +303,19 @@ <h4 class="panel-title">
<div class="col-md-5 ncf_col" id="methodBlock" ng-if="selectedMethod !== undefined">
<div>
<div class="title">Method</div>
<h3 >{{getMethodName(selectedMethod)}}<i class="{{getIconClassByAgentType(selectedMethod.method_name)}}"></i>
<h3 >{{getMethodName(selectedMethod)}}
<i
popover
class="glyphicon glyphicon-exclamation-sign deprecated-icon"
ng-if="isDeprecated(selectedMethod.method_name)"
data-original-title="{{getMethodName(selectedMethod)}}"
data-content="This generic method is deprecated."
rel="popover"
data-placement="top"
data-trigger="hover"
data-container="body">
</i>
<i class="{{getIconClassByAgentType(selectedMethod.method_name)}}"></i>
<button ng-disabled="! canResetMethod()" class="btn btn-default pull-right top-margin" ng-click="resetMethod()">Reset</button>
</h3>
<accordion>
Expand Down Expand Up @@ -420,18 +454,46 @@ <h4 class="panel-title">
<i class="dsc-icon"></i>
</button>
</div>
<br>
<ul class="form-group list-sm">
<li class="rudder-form">
<div class="input-group">
<label for="showDeprecated" class="input-group-addon" id="labelShowDeprecated">
<input id="showDeprecated" type="checkbox" ng-model="filter.showDeprecated">
<label class="label-radio" for="showDeprecated">
<span class="glyphicon glyphicon-ok"></span>
</label>
<span class="glyphicon glyphicon-ok check-icon"></span>
</label>
<label for="showDeprecated" class="form-control">
Show deprecated generic methods
<i class="glyphicon glyphicon-exclamation-sign deprecated-icon"></i>
</label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<ul class="list-unstyled" ng-repeat="(kind,methods) in methodsByCategory" ng-if="checkFilterCategory(methods)">
<h4 id={{kind}}>{{capitaliseFirstLetter(kind)}}</h4>
<li ng-click="addMethod(method)" ng-repeat="method in methods" class="panel-margin-top btn btn-block btn-default btn-method" dnd-draggable="method" dnd-effect-allowed="move" dnd-type="'bundle'" ng-show="checkFilterMethod(method)">
<li ng-click="addMethod(method)" ng-repeat="method in methods" class="panel-margin-top btn btn-block btn-default btn-method" dnd-draggable="method" dnd-effect-allowed="move" dnd-type="'bundle'" ng-show="checkFilterMethod(method)" ng-class="{'used':isUsed(method), 'show':filter.showDeprecated}">
<div class="input-group">
<span class="input-group-addon cursorMove"><b>:::</b></span>
<div class="panel-heading" style="overflow:hidden">
<h4 class="panel-title">
<span class="pull-left"> {{method.name}}
<i
popover
class="glyphicon glyphicon-exclamation-sign deprecated-icon"
ng-if="method.deprecated"
data-original-title="{{method.name}}"
data-content="This technique is using at least one deprecated generic method."
rel="popover" data-placement="bottom"
data-trigger="hover"
data-container="body">
</i>
<a ng-click="$event.stopPropagation();" target="_blank" ng-href="{{methodUrl(method, kind)}}">
<i class="glyphicon glyphicon-info-sign method-actions"></i>
</a>
Expand All @@ -451,8 +513,8 @@ <h4 class="panel-title">
<div class="col-lg-1 col-md-1 col-sm-2 col-xs-4 ncf_col no-padding" class="bs-sidebar navbar" ng-if="selectedMethod === undefined">
<ul class="nav bs-sidenav" id="categories-list">
<h4 id="categories">Categories</h4>
<li ng-repeat="(kind,methods) in methodsByCategory" class="active">
<a href="" ng-click="scroll(kind)">{{capitaliseFirstLetter(kind)}} </a>
<li ng-repeat="(kind,methods) in methodsByCategory" class="active" ng-if="checkFilterCategory(methods)" ng-class="{'deprecatedCategory':!checkDeprecatedFilter(methods)}">
<a href="" ng-click="scroll(kind)">{{capitaliseFirstLetter(kind)}}</a>
</li>
</ul>
</div>
Expand Down
Loading

0 comments on commit f711be0

Please sign in to comment.