added share and design form directives
This commit is contained in:
David Baldwynn
parent
5451475636
commit
22cf37424f
|
|
@ -0,0 +1,14 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('forms').directive('designFormDirective', [
|
||||
function () {
|
||||
return {
|
||||
templateUrl: 'modules/forms/admin/views/directiveViews/form/design-form.client.view.html',
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
myform:'=',
|
||||
formurl: '='
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
'use strict';
|
||||
|
||||
angular.module('forms').directive('editFormDirective', ['$rootScope', 'FormFields', '$uibModal',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('forms').directive('shareFormDirective', ['$rootScope',
|
||||
function ($rootScope) {
|
||||
return {
|
||||
templateUrl: 'modules/forms/admin/views/directiveViews/form/share-form.client.view.html',
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
actualformurl:'='
|
||||
},
|
||||
controller: function($scope){
|
||||
$scope.actualFormURL = $scope.actualformurl;
|
||||
}
|
||||
};
|
||||
}
|
||||
]);
|
||||
|
|
@ -4,7 +4,6 @@
|
|||
angular.module('forms').service('FormFields', [ '$rootScope', '$translate', '$window',
|
||||
function($rootScope, $translate, $window) {
|
||||
$translate.use($window.user.language);
|
||||
console.log($translate.instant('SHORT_TEXT'));
|
||||
|
||||
this.types = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -68,130 +68,11 @@
|
|||
<uib-tab index="2" heading="{{ 'ANALYZE_TAB' | translate }}" select="deactivateDesignTab()">
|
||||
<edit-submissions-form-directive myform="myform" user="myform.admin"></edit-submissions-form-directive>
|
||||
</uib-tab>
|
||||
<uib-tab ng-if="tabData" heading="{{ 'SHARE_TAB' | translate }}" index="{{tabData.length}}" select="deactivateDesignTab()">
|
||||
<div class="config-form">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<uib-tabset active="activePill" vertical="true" type="pills">
|
||||
<uib-tab index="0" heading="{{ 'SHARE_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'TELLFORM_URL' | translate }}
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyURL"> <input id="copyURL" ng-value="actualFormURL" class="form-control ng-pristine ng-untouched ng-valid"> </span>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyURL">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</uib-tab>
|
||||
<uib-tab index="1" heading="{{ 'EMBED_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'COPY_AND_PASTE' | translate }}
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
<textarea id="copyEmbedded" class="form-control ng-pristine ng-untouched ng-valid" style="min-height:200px; width:100%; background-color: #FFFFCC; color: #30313F;">
|
||||
<!-- {{ 'CHANGE_WIDTH_AND_HEIGHT' | translate }} -->
|
||||
<iframe id="iframe" src="{{actualFormURL}}" style="width:100%;height:500px;"></iframe>
|
||||
<div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;">{{ 'POWERED_BY' | translate }} <a href="https://www.tellform.com" style="color: #999" target="_blank">TellForm</a></div>
|
||||
</textarea>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<uib-tab ng-if="tabData" heading="{{ 'SHARE_TAB' | translate }}" index="3" select="deactivateDesignTab()">
|
||||
<share-form-directive actualformurl="actualFormURL"></share-form-directive>
|
||||
</uib-tab>
|
||||
<uib-tab class="design-tab" ng-if="tabData && myform.form_fields.length" heading="{{ 'DESIGN_TAB' | translate }}" index="{{tabData.length}}+1"
|
||||
select="activateDesignTab()">
|
||||
<div class="config-form design container">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-xs-12">
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'BACKGROUND_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text"
|
||||
ng-model="myform.design.colors.backgroundColor"
|
||||
ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
|
||||
ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'QUESTION_TEXT_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'ANSWER_TEXT_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'BTN_BACKGROUND_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text"
|
||||
ng-model="myform.design.colors.buttonColor"
|
||||
ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
|
||||
ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'BTN_TEXT_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text"
|
||||
ng-model="myform.design.colors.buttonTextColor"
|
||||
ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
|
||||
ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 hidden-xs" ng-if="designTabActive">
|
||||
<div class="public-form" ng-style="{ 'background-color': myform.design.colors.backgroundColor }">
|
||||
<iframe id="iframe" ng-if="!!formURL" ng-src="{{formURL | trustSrc}}" style="border: none; box-shadow: 0px 0px 10px 0px grey; overflow: hidden; height: 400px; width: 90%; position: absolute;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-4 col-sm-2">
|
||||
<button class="btn btn-signup btn-rounded" type="button" ng-click="updateDesign(false, myform, false, false)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<uib-tab class="design-tab" ng-if="tabData && myform.form_fields.length" heading="{{ 'DESIGN_TAB' | translate }}" index="4" select="activateDesignTab()">
|
||||
<design-form-directive myform="myform" formurl="formURL"></design-form-directive>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
<div class="config-form design container">
|
||||
<div class="row">
|
||||
<div class="col-sm-4 col-xs-12">
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'BACKGROUND_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text"
|
||||
ng-model="myform.design.colors.backgroundColor"
|
||||
ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
|
||||
ng-style="{ 'background-color': myform.design.colors.backgroundColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'QUESTION_TEXT_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.questionColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"ng-style="{ 'background-color': myform.design.colors.questionColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'ANSWER_TEXT_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text" ng-model="myform.design.colors.answerColor" ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/" ng-style="{ 'background-color': myform.design.colors.answerColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'BTN_BACKGROUND_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text"
|
||||
ng-model="myform.design.colors.buttonColor"
|
||||
ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
|
||||
ng-style="{ 'background-color': myform.design.colors.buttonColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row field">
|
||||
<div class="field-title col-sm-5">
|
||||
<h5>{{ 'BTN_TEXT_COLOR' | translate }}</h5>
|
||||
</div>
|
||||
|
||||
<div class="field-input col-sm-6">
|
||||
<input class="form-control" colorpicker="hex" type="text"
|
||||
ng-model="myform.design.colors.buttonTextColor"
|
||||
ng-pattern="/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/"
|
||||
ng-style="{ 'background-color': myform.design.colors.buttonTextColor }"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8 hidden-xs">
|
||||
<div class="public-form" ng-style="{ 'background-color': myform.design.colors.backgroundColor }">
|
||||
<iframe id="iframe" ng-if="!!formurl" ng-src="{{formurl | trustSrc}}" style="border: none; box-shadow: 0px 0px 10px 0px grey; overflow: hidden; height: 400px; width: 90%; position: absolute;"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-offset-4 col-sm-2">
|
||||
<button class="btn btn-signup btn-rounded" type="button" ng-click="updateDesign(false, myform, false, false)"><i class="icon-arrow-left icon-white"></i>{{ 'SAVE_CHANGES' | translate }}</button>
|
||||
</div>
|
||||
<div class="col-sm-1">
|
||||
<button class="btn btn-secondary btn-rounded" type="button" ng-click="resetForm()"><i class="icon-eye-open icon-white"></i>{{ 'CANCEL' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<div class="config-form">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<uib-tabset active="activePill" vertical="true" type="pills">
|
||||
<uib-tab index="0" heading="{{ 'SHARE_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'TELLFORM_URL' | translate }}
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyURL"> <input id="copyURL" ng-value="actualFormURL" class="form-control ng-pristine ng-untouched ng-valid"> </span>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyURL">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</uib-tab>
|
||||
<uib-tab index="1" heading="{{ 'EMBED_YOUR_FORM' | translate }}">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
{{ 'COPY_AND_PASTE' | translate }}
|
||||
</div>
|
||||
<div class="col-sm-8 form-input">
|
||||
<span ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
<textarea id="copyEmbedded" class="form-control ng-pristine ng-untouched ng-valid" style="min-height:200px; width:100%; background-color: #FFFFCC; color: #30313F;">
|
||||
<!-- {{ 'CHANGE_WIDTH_AND_HEIGHT' | translate }} -->
|
||||
<iframe id="iframe" src="{{actualFormURL}}" style="width:100%;height:500px;"></iframe>
|
||||
<div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;">{{ 'POWERED_BY' | translate }} <a href="https://www.tellform.com" style="color: #999" target="_blank">TellForm</a></div>
|
||||
</textarea>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<button class="btn btn btn-secondary view-form-btn" ngclipboard data-clipboard-target="#copyEmbedded">
|
||||
{{ 'COPY' | translate }} <i class="fa fa-clipboard" aria-hidden="true"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</uib-tab>
|
||||
</uib-tabset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue