beenull/tellform
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

updated styling of config panel

Browse source
This commit is contained in:
David Baldwynn 2017-11-01 21:15:27 -07:00
parent 4d94ed50ee
commit 692e4e43f5
15 changed files with 172 additions and 159 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/views/index.server.view.pug
View file

@ -5,7 +5,7 @@ block content
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css')
link(rel='stylesheet', href='/static/lib/jquery-ui/themes/flick/jquery-ui.min.css')
script(src='/static/lib/file-saver.js/FileSaver.js', type='text/javascript')
script(src='/static/lib/jquery/jquery.min.js')
//Embedding The User Object
script(type='text/javascript').

3
bower.json
View file

@ -42,7 +42,8 @@
"css-toggle-switch": "^4.0.2",
"angular-strap": "^2.3.12",
"textAngular": "^1.5.16",
"angular-ui-select": "^0.19.8"
"angular-ui-select": "^0.19.8",
"angular-bootstrap-switch": "^0.5.2"
},
"resolutions": {
"angular-bootstrap": "^0.14.0",

12
public/modules/forms/admin/config/i18n/english.js
View file

@ -6,16 +6,16 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
//Configure Form Tab View
ADVANCED_SETTINGS: 'Advanced Settings',
FORM_NAME: 'Form Name',
FORM_STATUS: 'Form Status',
FORM_NAME: 'Your tellform is called',
FORM_STATUS: 'Status',
PUBLIC: 'Public',
PRIVATE: 'Private',
GA_TRACKING_CODE: 'Google Analytics Tracking Code',
DISPLAY_FOOTER: 'Display Form Footer?',
DISPLAY_FOOTER: 'Form Footer',
SAVE_CHANGES: 'Save Changes',
CANCEL: 'Cancel',
DISPLAY_START_PAGE: 'Display Start Page?',
DISPLAY_END_PAGE: 'Display Custom End Page?',
DISPLAY_START_PAGE: 'Start Page',
DISPLAY_END_PAGE: 'Custom End Page',
GENERAL_TAB: 'General',
SELF_NOTIFICATIONS_TAB: 'Self notifications',
RESPONDENT_NOTIFICATIONS_TAB: 'Respondent notifications',
@ -61,7 +61,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
DELETE_FORM_MD: 'Delete Form',
DELETE: 'Delete',
FORM: 'Form',
VIEW: 'View',
VIEW_MY_TELLFORM: 'View my tellform',
LIVE: 'Live',
PREVIEW: 'Preview',
COPY: 'Copy',

12
public/modules/forms/admin/config/i18n/french.js
View file

@ -5,16 +5,16 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
$translateProvider.translations('fr', {
// Configurer la vue de l'onglet Formulaire
ADVANCED_SETTINGS: 'Paramètres avancés',
FORM_NAME: "Nom du formulaire",
FORM_STATUS: 'Statut du formulaire',
FORM_NAME: "Votre tellform est appelé",
FORM_STATUS: 'Statut',
PUBLIC: 'Public',
PRIVATE: "Privé",
GA_TRACKING_CODE: "Code de suivi Google Analytics",
DISPLAY_FOOTER: "Afficher le pied de formulaire?",
DISPLAY_FOOTER: "Pied de formulaire",
SAVE_CHANGES: 'Enregistrer les modifications',
CANCEL: 'Annuler',
DISPLAY_START_PAGE: "Afficher la page de démarrage?",
DISPLAY_END_PAGE: "Afficher la page de fin personnalisée?",
DISPLAY_START_PAGE: "Page de démarrage",
DISPLAY_END_PAGE: "Page de fin personnalisée",
GENERAL_TAB: 'General',
SELF_NOTIFICATIONS_TAB: 'Self notifications',
@ -61,7 +61,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
DELETE_FORM_MD: "Supprimer le formulaire",
DELETE: "Supprimer",
FORM: 'Formulaire',
VIEW: "Afficher",
VIEW_MY_TELLFORM: "Afficher ma forme",
LIVE: "Live",
PREVIEW: 'Aperçu',
COPY: "Copier",

12
public/modules/forms/admin/config/i18n/german.js
View file

@ -5,16 +5,16 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
$translateProvider.translations('de', {
// Konfigurieren der Formularregisterkarte
ADVANCED_SETTINGS: 'Erweiterte Einstellungen',
FORM_NAME: 'Formularname',
FORM_STATUS: 'Formularstatus',
FORM_NAME: 'Ihr tellform heißt',
FORM_STATUS: 'Status',
PUBLIC: 'Öffentlich',
PRIVATE: 'Privat',
GA_TRACKING_CODE: 'Google Analytics Tracking-Code',
DISPLAY_FOOTER: 'Formularfußzeile anzeigen?',
DISPLAY_FOOTER: 'Fußzeile',
SAVE_CHANGES: 'Änderungen speichern',
CANCEL: 'Abbrechen',
DISPLAY_START_PAGE: 'Startseite anzeigen?',
DISPLAY_END_PAGE: 'Benutzerdefinierte Endseite anzeigen?',
DISPLAY_START_PAGE: 'Startseite',
DISPLAY_END_PAGE: 'Benutzerdefinierte Endseite',
GENERAL_TAB: 'Allgemein',
SELF_NOTIFICATIONS_TAB: 'Selbstbenachrichtigungen',
@ -61,7 +61,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
DELETE_FORM_MD: 'Formular löschen',
DELETE: 'Löschen',
FORM: 'Formular',
VIEW: 'Ansicht',
VIEW_MY_TELLFORM: 'Mein tellform anzeigen',
LIVE: 'Leben',
PREVIEW: 'Vorschau',
COPY: 'Kopieren',

12
public/modules/forms/admin/config/i18n/italian.js
View file

@ -5,16 +5,16 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
$translateProvider.translations('it', {
// Configura la visualizzazione scheda modulo
ADVANCED_SETTINGS: 'Impostazioni avanzate',
FORM_NAME: 'Nome modulo',
FORM_STATUS: 'Stato modulo',
FORM_NAME: 'Il tuo tellform è chiamato',
FORM_STATUS: 'Stato',
PUBLIC: 'pubblico',
PRIVATE: 'Privato',
GA_TRACKING_CODE: 'Codice di monitoraggio di Google Analytics',
DISPLAY_FOOTER: 'Visualizza piè di pagina?',
DISPLAY_FOOTER: 'Piè di pagina',
SAVE_CHANGES: 'Salva modifiche',
CANCEL: 'Annulla',
DISPLAY_START_PAGE: 'Visualizza pagina iniziale?',
DISPLAY_END_PAGE: 'Mostra pagina finale personalizzata?',
DISPLAY_START_PAGE: 'Pagina iniziale',
DISPLAY_END_PAGE: 'Pagina finale personalizzata',
GENERAL_TAB: 'Generale',
SELF_NOTIFICATIONS_TAB: 'Autodiagnosi',
@ -61,7 +61,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
DELETE_FORM_MD: 'Elimina modulo',
DELETE: 'Elimina',
FORM: 'Forma',
VIEW: 'Visualizza',
VIEW_MY_TELLFORM: 'Visualizza la mia informazione',
LIVE: 'Live',
PREVIEW: 'Anteprima',
COPY: 'Copia',

13
public/modules/forms/admin/config/i18n/spanish.js
View file

@ -3,19 +3,18 @@
angular.module('forms').config(['$translateProvider', function ($translateProvider) {
$translateProvider.translations('es', {
//Configure Form Tab View
ADVANCED_SETTINGS: 'Configuraciones avanzadas',
FORM_NAME: 'Nombre del formulario',
FORM_STATUS: 'Estado del formulario',
FORM_NAME: 'Tu tellform se llama',
FORM_STATUS: 'Estado',
PUBLIC: 'Público',
PRIVATE: 'Privado',
GA_TRACKING_CODE: 'Código de Google Analytics',
DISPLAY_FOOTER: '¿Mostrar pie de página?',
DISPLAY_FOOTER: 'Pie de página',
SAVE_CHANGES: 'Grabar',
CANCEL: 'Cancelar',
DISPLAY_START_PAGE: '¿Mostrar página de inicio?',
DISPLAY_END_PAGE: '¿Mostrar paǵina de fin?',
DISPLAY_START_PAGE: 'Página de inicio',
DISPLAY_END_PAGE: 'Página final personalizada',
SELF_NOTIFICATIONS_TAB: 'Auto notificaciones',
RESPONDANT_NOTIFICATIONS_TAB: 'Notificaciones de los demandados',
@ -62,7 +61,7 @@ angular.module('forms').config(['$translateProvider', function ($translateProvid
DELETE_FORM_MD: 'Borrar formulario',
DELETE: 'Borrar',
FORM: 'Formulario',
VIEW: 'Vista',
VIEW_MY_TELLFORM: 'Ver mi tellform',
LIVE: 'Online',
PREVIEW: 'Vista previa',
COPY: 'Copiar',

8
public/modules/forms/admin/css/edit-form-configure.css
View file

@ -31,4 +31,12 @@
.ui-select input.form-control {
height: 34px;
padding: 6px;
}
.config-form .btn-secondary {
border-color: #DDDDDD;
}
.notification-toggle.toggle-switch {
margin: 5px 0;
}

16
public/modules/forms/admin/css/edit-form.css
View file

@ -247,9 +247,25 @@ div.config-form .row.field {
margin: 10px 0 10px;
}
.view-form-btn {
border: none;
}
.view-form-btn.span {
padding-right:0.6em;
}
.notification-row {
display: inline-block;
padding: 0 5px;
}
.status-light {
font-size: 10px;
}
.notification-row .status-light {
padding-top: 15px;
}
.status-light.status-light-off {
color: #BE0000;
}

18
public/modules/forms/admin/directives/configure-form.client.directive.js
View file

@ -13,6 +13,24 @@ angular.module('forms').directive('configureFormDirective', ['$rootScope', '$fil
$scope.languages = $rootScope.languages;
$scope.resetForm = $rootScope.resetForm;
$scope.update = $rootScope.update;
$scope.languages = ['en', 'fr', 'es', 'it', 'de'];
$scope.langCodeToWord = {
'en': 'English',
'fr': 'Français',
'es': 'Español',
'it': 'Italiàno',
'de': 'Deutsch'
};
$scope.wordToLangCode = {
'English': 'en',
'Français': 'fr',
'Español': 'es',
'Italiàno': 'it',
'Deutsch': 'de'
};
$scope.configureTabs = [
{

13
public/modules/forms/admin/views/admin-form.client.view.html
View file

@ -42,15 +42,12 @@
<div class="col-xs-1 col-sm-2">
<small class="pull-right">
<a class="btn btn-secondary view-form-btn" href="{{actualFormURL}}">
<span class="hidden-xs hidden-sm">
{{ 'VIEW' | translate }}
<span ng-show="myform.isLive">
{{ 'LIVE' | translate }}
</span>
<span ng-hide="myform.isLive">{{ 'PREVIEW' | translate }}</span>
<i class="fa fa-external-link"></i>
<span>
{{ 'VIEW_MY_TELLFORM' | translate }}
</span>
<i class="status-light status-light-on fa fa-dot-circle-o" ng-if="myform.isLive"></i>
<i class="status-light status-light-off fa fa-dot-circle-o" ng-if="!myform.isLive"></i>
<i class="status-light status-light-on fa fa-circle" ng-if="myform.isLive"></i>
<i class="status-light status-light-off fa fa-circle" ng-if="!myform.isLive"></i>
</a>
</small>
</div>

127
public/modules/forms/admin/views/adminTabs/configureTabs/general.html
View file

@ -1,13 +1,13 @@
<!-- Settings -->
<div class="row">
<div class="col-sm-offset-2 col-sm-4">
<div class="col-sm-offset-2 col-sm-10">
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'FORM_NAME' | translate }}</h5>
<h4>{{ 'FORM_NAME' | translate }}</h4>
</div>
<div class="col-sm-12">
<input class="form-control"
<input class=""
type="text"
ng-model="myform.title"
value="{{myform.title}}"
@ -18,47 +18,43 @@
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'FORM_STATUS' | translate }}</h5>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.isLive" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'PUBLIC' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.isLive" ng-required="true" />
&nbsp;<span>{{ 'PRIVATE' | translate }}</span>
</label>
</div>
</div>
<div class="row field">
<div class="col-sm-12 field-title">{{ 'LANGUAGE' | translate }}</div>
<div class="col-sm-12 field-input">
<select ng-model="myform.language">
<option ng-repeat="language in languages"
ng-selected="language == myform.language"
value="{{language}}">
{{language}}
</option>
<div class="col-sm-4 field-title"><h4>{{ 'LANGUAGE' | translate }}</h4></div>
<div class="col-sm-8 field-input">
<ui-select ng-model="myform.language" search-enabled="false" theme="selectize">
<ui-select-match>
{{ langCodeToWord[$select.selected] }}
</ui-select-match>
<ui-select-choices repeat="language in languages">
<span ng-bind-html="langCodeToWord[language] | highlight: $select.search">
</span>
</ui-select-choices>
</select>
<span class="required-error" ng-show="field.required && !field.fieldValue">* {{ 'REQUIRED_FIELD' | translate }}</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row field">
<div class="field-title col-sm-8">
<h4>{{ 'FORM_STATUS' | translate }}</h4>
</div>
<div class="field-input col-sm-4 text-right">
<input class="toggle-switch" type="checkbox" name="my-checkbox"
bs-switch ng-model="myform.isLive"
switch-on-text="{{ 'PUBLIC' | translate }}"
switch-off-text="{{ 'PRIVATE' | translate }}"
switch-on-color="success"
switch-off-color="danger">
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'GA_TRACKING_CODE' | translate }}</h5>
<h4>{{ 'GA_TRACKING_CODE' | translate }}</h4>
</div>
<div class="col-sm-12">
<input class="form-control"
<input class=""
type="text"
ng-model="myform.analytics.gaCode"
value="{{myform.analytics.gaCode}}"
@ -69,60 +65,41 @@
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'DISPLAY_FOOTER' | translate }}</h5>
<div class="field-title col-sm-8">
<h4>{{ 'DISPLAY_FOOTER' | translate }}</h4>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.hideFooter" ng-required="true" />
&nbsp;<span>{{ 'YES' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.hideFooter" ng-required="true" />
&nbsp;<span>{{ 'NO' | translate }}</span>
</label>
<div class="field-input col-sm-4 text-right">
<input class="toggle-switch" type="checkbox"
bs-switch ng-model="myform.hideFooter"
switch-on-text="{{ 'ON' | translate }}"
switch-off-text="{{ 'OFF' | translate }}">
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'DISPLAY_START_PAGE' | translate }}</h5>
<div class="field-title col-sm-8">
<h4>{{ 'DISPLAY_START_PAGE' | translate }}</h4>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.startPage.showStart" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'YES' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.startPage.showStart" ng-required="true" />
&nbsp;<span>{{ 'NO' | translate }}</span>
</label>
<div class="field-input col-sm-4 text-right">
<input class="toggle-switch" type="checkbox"
bs-switch ng-model="myform.startPage.showStart"
switch-on-text="{{ 'ON' | translate }}"
switch-off-text="{{ 'OFF' | translate }}">
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'DISPLAY_END_PAGE' | translate }}</h5>
<div class="field-title col-sm-8">
<h4>{{ 'DISPLAY_END_PAGE' | translate }}</h4>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.endPage.showEnd" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'YES' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.endPage.showEnd" ng-required="true" />
&nbsp;<span>{{ 'NO' | translate }}</span>
</label>
<div class="field-input col-sm-4 text-right">
<input class="toggle-switch" type="checkbox"
bs-switch ng-model="myform.endPage.showEnd"
switch-on-text="{{ 'ON' | translate }}"
switch-off-text="{{ 'OFF' | translate }}">
</div>
</div>
</div>

39
public/modules/forms/admin/views/adminTabs/configureTabs/respondent-notifications.html
View file

@ -1,5 +1,22 @@
<div class="row">
<div class="col-sm-offset-2">
<div class="col-sm-offset-2 col-sm-10">
<div class="row field">
<div class="notification-row">
<i class="status-light status-light-on fa fa-circle" ng-if="myform.respondentNotifications.enabled"></i>
<i class="status-light status-light-off fa fa-circle" ng-if="!myform.respondentNotifications.enabled"></i>
</div>
<div class="notification-row">
<h5>{{ 'ENABLE_RESPONDENT_NOTIFICATIONS' | translate }}</h5>
</div>
<div class="notification-row">
<input class="toggle-switch notification-toggle" type="checkbox" switch-size="small"
bs-switch ng-model="myform.respondentNotifications.enabled"
switch-on-text="{{ 'ON' | translate }}"
switch-off-text="{{ 'OFF' | translate }}">
</div>
</div>
<div class="row field" ng-if="formHasEmailField">
<div class="field-title col-sm-12">
<h5>{{ 'SEND_NOTIFICATION_TO' | translate }}:</h5>
@ -55,25 +72,5 @@
<text-angular class="email-subject" ng-model="myform.respondentNotifications.htmlTemplate" ta-toolbar="[['bold','italics', 'insertField']]"></text-angular>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'ENABLE_RESPONDENT_NOTIFICATIONS' | translate }}:</h5>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.respondentNotifications.enabled" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'TOGGLE_ENABLED' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.respondentNotifications.enabled" ng-required="true" />
&nbsp;<span>{{ 'TOGGLE_DISABLED' | translate }}</span>
</label>
</div>
</div>
</div>
</div>

41
public/modules/forms/admin/views/adminTabs/configureTabs/self-notifications.html
View file

@ -1,5 +1,24 @@
<div class="row">
<div class="col-sm-offset-2">
<div class="col-sm-offset-2 col-sm-10">
<div class="row field">
<div class='notification-row'>
<i class="status-light status-light-on fa fa-circle" ng-if="myform.selfNotifications.enabled"></i>
<i class="status-light status-light-off fa fa-circle" ng-if="!myform.selfNotifications.enabled"></i>
</div>
<div class='notification-row'>
<h5>{{ 'ENABLE_SELF_NOTIFICATIONS' | translate }}</h5>
</div>
<div class='notification-row'>
<input class="toggle-switch notification-toggle" type="checkbox" switch-size="small"
bs-switch ng-model="myform.selfNotifications.enabled"
switch-on-text="{{ 'ON' | translate }}"
switch-off-text="{{ 'OFF' | translate }}">
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'SEND_NOTIFICATION_TO' | translate }}</h5>
@ -50,25 +69,5 @@
<text-angular ng-model="myform.selfNotifications.htmlTemplate" ta-toolbar="[['bold','italics', 'insertField']]"></text-angular>
</div>
</div>
<div class="row field">
<div class="field-title col-sm-12">
<h5>{{ 'ENABLE_SELF_NOTIFICATIONS' | translate }}</h5>
</div>
<div class="field-input col-sm-12">
<label style="display: inline-block;">
<input type="radio" data-ng-value="true" ng-model="myform.selfNotifications.enabled" ng-required="true" style="background-color:#33CC00;"/>
&nbsp;<span>{{ 'TOGGLE_ENABLED' | translate }}</span>
</label>
<label style="display: inline-block;">
<input type="radio" data-ng-value="false" ng-model="myform.selfNotifications.enabled" ng-required="true" />
&nbsp;<span>{{ 'TOGGLE_DISABLED' | translate }}</span>
</label>
</div>
</div>
</div>
</div>

3
public/modules/forms/forms.client.module.js
View file

@ -3,5 +3,6 @@
// Use Application configuration module to register a new module
ApplicationConfiguration.registerModule('forms', [
'ngFileUpload', 'ui.date', 'ui.sortable',
'angular-input-stars', 'users', 'ngclipboard', 'textAngular'
'angular-input-stars', 'users', 'ngclipboard', 'textAngular',
'frapontillo.bootstrap-switch'
]);//, 'colorpicker.module' @TODO reactivate this module