Rewrite edit popup as angular directive
Change-Id: Ie554889f757741c33f5e8d5ef80cfdaa613f360a
This commit is contained in:
parent
00e5cb0036
commit
b5cecf04b6
|
@ -0,0 +1,7 @@
|
|||
{$ value $}
|
||||
<a href="#" data-toggle="popover" data-trigger="click" data-container="body"
|
||||
data-content="<label>{$ label $}</label>
|
||||
<input type='text' class='form-control' value='{$ value $}'>
|
||||
<button class='btn btn-default btn-sm cancel'>Cancel</button>
|
||||
<button class='btn btn-primary btn-sm'>Save</button>">
|
||||
<i class="fa fa-pencil"></i></a>
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* Created by tsufiev on 12/29/14.
|
||||
*/
|
||||
angular.module('hz').directive('editable', function($document) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: '/static/mistral/js/angular-templates/editable-popup.html',
|
||||
scope: {
|
||||
label: '@',
|
||||
value: '@'
|
||||
},
|
||||
link: function(scope, element) {
|
||||
angular.element(element).find('a[data-toggle="popover"]')
|
||||
.popover({html: true})
|
||||
.on('click', function(e) {
|
||||
e.preventDefault();
|
||||
return true;
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
|
@ -1,6 +1,7 @@
|
|||
{% extends "base.html" %}
|
||||
{% load i18n %}
|
||||
{% load url from future %}
|
||||
{% load static %}
|
||||
{% block title %}{% trans "Create Workbook" %}{% endblock %}
|
||||
|
||||
{% block page_header %}
|
||||
|
@ -9,6 +10,35 @@
|
|||
|
||||
{% include "_stylesheets.html" %}
|
||||
|
||||
{% block js %}
|
||||
{% include "horizon/_scripts.html" %}
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('a[data-toggle="collapse"]').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
return true;
|
||||
});
|
||||
|
||||
$('span.yaql-condition').on('click', function(e) {
|
||||
var $elt = $(this),
|
||||
$inputColumn = $elt.closest('div.row').children(':first-child'),
|
||||
$input;
|
||||
|
||||
$elt.hide();
|
||||
$input = $inputColumn.show().find('textarea');
|
||||
$input.focus().on('blur', function() {
|
||||
$inputColumn.hide();
|
||||
$elt.toggleClass('fa-lock', $input.val() !== '');
|
||||
$elt.toggleClass('fa-unlock', $input.val() === '');
|
||||
$elt.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}mistral/js/directives.js"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block css %}
|
||||
{% include "_stylesheets.html" %}
|
||||
<link rel="stylesheet" href="{{ STATIC_URL }}mistral/css/mistral.css">
|
||||
|
@ -47,25 +77,18 @@
|
|||
<div class="col-md-12 col-sm-12 col-lg-12">
|
||||
<!-- root-level parameters -->
|
||||
<div class="panel panel-default merlin-panel" id="panel0">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-target="#collapseZero" href="#">
|
||||
Base Parameters</a></h4>
|
||||
</div>
|
||||
<div id="collapseZero" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="form-group">
|
||||
<label for="workbookName">Name</label>
|
||||
<input type="text" class="form-control" id="workbookName" placeholder="Workbook1">
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="form-group">
|
||||
<label for="workbookName">Name</label>
|
||||
<input type="text" class="form-control" id="workbookName" placeholder="Workbook1">
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="form-group">
|
||||
<label for="workbookDesc">Description</label>
|
||||
<textarea class="form-control" id="workbookDesc" placeholder="Type a description here"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-lg-6">
|
||||
<div class="form-group">
|
||||
<label for="workbookDesc">Description</label>
|
||||
<textarea class="form-control" id="workbookDesc" placeholder="Type a description here"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -185,13 +208,10 @@
|
|||
</div>
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF3">Key1
|
||||
<a href="#" data-toggle="popover" data-trigger="click"
|
||||
data-container="body" data-content="<label>New Name</label>
|
||||
<input type='text' class='form-control' value='Key1'>
|
||||
<button class='btn btn-default btn-sm cancel'>Cancel</button>
|
||||
<button class='btn btn-primary btn-sm'>Save</button>">
|
||||
<i class="fa fa-pencil"></i></a></label>
|
||||
|
||||
<label for="collapseFourOuputF3">
|
||||
<editable value="Key1" label="New Name"></editable>
|
||||
</label>
|
||||
<div class="input-group" id="collapseFourOuputF3">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
|
@ -203,13 +223,9 @@
|
|||
<div class="col-md-5 col-sm-5 col-lg-5"></div>
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF4">Key2
|
||||
<a href="#" data-toggle="popover" data-trigger="click"
|
||||
data-container="body" data-content="<label>New Name</label>
|
||||
<input type='text' class='form-control' value='Key2'>
|
||||
<button class='btn btn-default btn-sm cancel'>Cancel</button>
|
||||
<button class='btn btn-primary btn-sm'>Save</button>">
|
||||
<i class="fa fa-pencil"></i></a></label>
|
||||
<label for="collapseFourOuputF4">
|
||||
<editable value="Key2" label="New Name"></editable>
|
||||
</label>
|
||||
<div class="input-group" id="collapseFourOuputF4">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
|
@ -522,13 +538,9 @@
|
|||
<div class="row">
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF15">Key1
|
||||
<a href="#" data-toggle="popover" data-trigger="click"
|
||||
data-container="body" data-content="<label>New Name</label>
|
||||
<input type='text' class='form-control' value='Key1'>
|
||||
<button class='btn btn-default btn-sm cancel'>Cancel</button>
|
||||
<button class='btn btn-primary btn-sm'>Save</button>">
|
||||
<i class="fa fa-pencil"></i></a></label>
|
||||
<label for="collapseFourOuputF15">
|
||||
<editable value="Key1" label="New Name"></editable>
|
||||
</label>
|
||||
<div class="input-group" id="collapseFourOuputF15">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
|
@ -554,13 +566,9 @@
|
|||
<div class="row">
|
||||
<div class="second-column col-md-5 col-sm-5 col-lg-5">
|
||||
<div class="form-group">
|
||||
<label for="collapseFourOuputF16">Key1
|
||||
<a href="#" data-toggle="popover" data-trigger="click"
|
||||
data-container="body" data-content="<label>New Name</label>
|
||||
<input type='text' class='form-control' value='Key1'>
|
||||
<button class='btn btn-default btn-sm cancel'>Cancel</button>
|
||||
<button class='btn btn-primary btn-sm'>Save</button>">
|
||||
<i class="fa fa-pencil"></i></a></label>
|
||||
<label for="collapseFourOuputF16">
|
||||
<editable value="Key1" label="New Name"></editable>
|
||||
</label>
|
||||
<div class="input-group" id="collapseFourOuputF16">
|
||||
<input type="text" class="form-control">
|
||||
<i class="fa fa-minus-circle input-group-addon"></i>
|
||||
|
@ -749,33 +757,3 @@ description: </pre>
|
|||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block js %}
|
||||
{% include "horizon/_scripts.html" %}
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('a[data-toggle="popover"]').popover({html: true}).on('click', function(e) {
|
||||
e.preventDefault();
|
||||
return true;
|
||||
});
|
||||
$('a[data-toggle="collapse"]').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
return true;
|
||||
});
|
||||
|
||||
$('span.yaql-condition').on('click', function(e) {
|
||||
var $elt = $(this),
|
||||
$inputColumn = $elt.closest('div.row').children(':first-child'),
|
||||
$input;
|
||||
|
||||
$elt.hide();
|
||||
$input = $inputColumn.show().find('textarea');
|
||||
$input.focus().on('blur', function() {
|
||||
$inputColumn.hide();
|
||||
$elt.toggleClass('fa-lock', $input.val() !== '');
|
||||
$elt.toggleClass('fa-unlock', $input.val() === '');
|
||||
$elt.show();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
Loading…
Reference in New Issue