mirror of https://github.com/akveo/blur-admin
First commit : adding a survey page and the builder UI
Youssef ABIDI
parent
1f81f3b1c1
commit
08fd6c9aa5
|
|
@ -11,11 +11,14 @@ var _ = require('lodash');
|
|||
|
||||
var browserSync = require('browser-sync');
|
||||
|
||||
//process.on('unhandledRejection', () => {});
|
||||
|
||||
gulp.task('inject-reload', ['inject'], function () {
|
||||
browserSync.reload();
|
||||
});
|
||||
|
||||
gulp.task('inject', ['scripts', 'styles', 'injectAuth', 'inject404', 'copyVendorImages'], function () {
|
||||
console.log("START inject 1")
|
||||
var injectStyles = gulp.src([
|
||||
path.join(conf.paths.tmp, '/serve/app/main.css'),
|
||||
path.join('!' + conf.paths.tmp, '/serve/app/vendor.css')
|
||||
|
|
@ -34,7 +37,7 @@ gulp.task('inject', ['scripts', 'styles', 'injectAuth', 'inject404', 'copyVendor
|
|||
ignorePath: [conf.paths.src, path.join(conf.paths.tmp, '/serve')],
|
||||
addRootSlash: false
|
||||
};
|
||||
|
||||
console.log("END inject 1")
|
||||
return gulp.src(path.join(conf.paths.src, '/index.html'))
|
||||
.pipe($.inject(injectStyles, injectOptions))
|
||||
.pipe($.inject(injectScripts, injectOptions))
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -16,6 +16,7 @@
|
|||
'BlurAdmin.pages.charts',
|
||||
'BlurAdmin.pages.maps',
|
||||
'BlurAdmin.pages.profile',
|
||||
'BlurAdmin.pages.surveys',
|
||||
])
|
||||
.config(routeConfig);
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
/**
|
||||
* @author v.lugovsky
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.surveys')
|
||||
.controller('SurveysPageCtrl', SurveysPageCtrl);
|
||||
|
||||
/** @ngInject */
|
||||
function SurveysPageCtrl($scope, $timeout) {
|
||||
|
||||
$scope.isUnfolded = false;
|
||||
$scope.survey.name = '';
|
||||
$scope.survey.description = '';
|
||||
$scope.survey.elements.length = 0;
|
||||
|
||||
$scope.progressFunction = function() {
|
||||
return $timeout(function() {}, 3000);
|
||||
};
|
||||
|
||||
$scope.panelFoldToggle = function() {
|
||||
$scope.isUnfolded = !$scope.isUnfolded;
|
||||
console.log($scope.isUnfolded);
|
||||
};
|
||||
|
||||
$scope.getTheFoldingClass = function() {
|
||||
var $className = ( $scope.isUnfolded ) ? "fa fa-compress" : "fa fa-expand";
|
||||
return $className;
|
||||
};
|
||||
|
||||
$scope.addElement = function(type){
|
||||
var element = createEmptyElement(type, $scope.survey.elements.length + 1);
|
||||
$scope.activeElement=element;
|
||||
$scope.survey.elements.push(element);
|
||||
};
|
||||
|
||||
function createEmptyElement(type,orderNo){
|
||||
return {
|
||||
id: 1, // TODO : generate the ID
|
||||
orderNo: orderNo,
|
||||
type: type
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -0,0 +1,191 @@
|
|||
<div id="surveys" class="row">
|
||||
<div id="sidebar" class="col-md-4 col-lg-4">
|
||||
<uib-accordion>
|
||||
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default saved-questions">
|
||||
<uib-accordion-heading>
|
||||
Saved Questions <i class="fa pull-right fa-floppy-o"></i>
|
||||
</uib-accordion-heading>
|
||||
<section class="col-md-12 col-lg-12 no-gutter">
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
First Question
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
Second Question
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
Third Question
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
Last Question
|
||||
</button>
|
||||
</section>
|
||||
</uib-accordion-group>
|
||||
|
||||
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default">
|
||||
<uib-accordion-heading>
|
||||
Survey Builder <i class="fa pull-right fa-gavel"></i>
|
||||
</uib-accordion-heading>
|
||||
<section class="col-md-12 col-lg-12 no-gutter">
|
||||
<button ng-click="addElement('')" progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
<i class="fa fa-font"></i>Textbox
|
||||
</button>
|
||||
<button ng-click="addElement('multiple')" progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
<i class="fa fa-list"></i>Multiple Choices
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
<i class="fa fa-star"></i>Star Rating
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
<i class="fa fa-chevron-circle-down"></i>Drop Down
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12 ">
|
||||
<i class="fa fa-sliders"></i>Slider
|
||||
</button>
|
||||
</section>
|
||||
</uib-accordion-group>
|
||||
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default survey-template">
|
||||
<uib-accordion-heading>
|
||||
Survey Template <i class="fa pull-right fa-file-code-o"></i>
|
||||
</uib-accordion-heading>
|
||||
<section class="col-md-12 col-lg-12 no-gutter">
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
First Template
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
Second Template
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
Third Template
|
||||
</button>
|
||||
<button progress-button="progressFunction()" pb-style="flip-open" class="btn btn-default btn-with-icon col-md-12">
|
||||
Last Template
|
||||
</button>
|
||||
</section>
|
||||
</uib-accordion-group>
|
||||
<uib-accordion-group panel-class="bootstrap-panel accordion-panel panel-default">
|
||||
<uib-accordion-heading>
|
||||
Options <i class="fa pull-right ion-settings"></i>
|
||||
</uib-accordion-heading>
|
||||
Some options in here ...
|
||||
</uib-accordion-group>
|
||||
</uib-accordion>
|
||||
</div>
|
||||
<div class="col-md-8 col-lg-8">
|
||||
<div id="survey-builder" class="panel panel-default bootstrap-panel">
|
||||
<div class="panel-heading"><h2 class="panel-title pull-left">Survey Title</h2></div>
|
||||
<div class="panel-body">
|
||||
<h2>Page Title</h2>
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
|
||||
|
||||
<div class="panel panel-default bootstrap-panel new-question-options-container">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title pull-left">Question 1</h4>
|
||||
<div class="btn-group pull-right">
|
||||
<button type="button" class="btn btn-default btn-icon" title="Your Title" data-toggle="tooltip"><i class="fa fa-arrows"></i></button>
|
||||
<button type="button" class="btn btn-default btn-icon" ng-click="panelFoldToggle()"><i class="" ng-class="getTheFoldingClass()"></i></button>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-chevron-down"></i></button>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-chevron-up"></i></button>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-pencil-square-o"></i></button>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-trash-o"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body" ng-show=isUnfolded>
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="inputQuestion1" class="col-md-12 control-label">Question 1</label>
|
||||
<div class="col-md-12">
|
||||
<input type="email" class="form-control" id="inputQuestion1" placeholder="Question 1">
|
||||
</div>
|
||||
</div>
|
||||
<hr/>
|
||||
<!-- Begin Answer Choices -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-12">Answer Choices</label>
|
||||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-md-2 control-label"><input type="radio" value="option2" disabled="true"></label>
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder="Enter an answer choice">
|
||||
</div>
|
||||
<div class="col-md-2 btn-group">
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-plus-circle"></i></button>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-minus-circle"></i></button>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-md-2 control-label"><input type="radio" value="option2" disabled="true"></label>
|
||||
<div class="col-md-8">
|
||||
<input type="text" class="form-control" placeholder="Enter an answer choice">
|
||||
</div>
|
||||
<div class="col-md-2 btn-group">
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-plus-circle"></i></button>
|
||||
<button type="button" class="btn btn-default btn-icon"><i class="fa fa-minus-circle"></i></button>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Answer Choices -->
|
||||
|
||||
<hr/>
|
||||
|
||||
<!-- Begin Answer's Options -->
|
||||
<div class="form-group">
|
||||
<label class="col-md-12">Question Options</label>
|
||||
<div class="form-group">
|
||||
<div class="col-md-10 pull-right">
|
||||
<label class="checkbox-inline custom-checkbox nowrap">
|
||||
<input type="checkbox" id="inlineCheckbox03" value="option3">
|
||||
<span>Allow more than one answer to this question (use checkboxes)</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="col-md-10 pull-right">
|
||||
<label class="checkbox-inline custom-checkbox nowrap">
|
||||
<input type="checkbox" id="inlineCheckbox03" value="option3" checked="true">
|
||||
<span>Add an "Other" Answer Option or Comment Field</span>
|
||||
</label>
|
||||
<div class="form-group">
|
||||
<label for="inputEmail3" class="col-sm-2 control-label">Label</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="inputEmail3" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Answer's Options -->
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group col-sm-12 col-xs-12 text-center new-question-container">
|
||||
<div class="btn-group" uib-dropdown dropdown-append-to-body>
|
||||
<button type="button" class="btn btn-primary btn-with-icon btn-lg"><i class="ion-plus-round"></i>NEW QUESTION</button>
|
||||
<button type="button" class="btn btn-primary btn-with-icon btn-lg" uib-dropdown-toggle>
|
||||
<span class="caret"></span>
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul uib-dropdown-menu>
|
||||
<li><a href>Textbox</a></li>
|
||||
<li><a href>Multiple Choices</a></li>
|
||||
<li><a href>Star Rating</a></li>
|
||||
<li><a href>Drop Down</a></li>
|
||||
<li><a href>Slider</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('[data-toggle="tooltip"]').tooltip();
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
/**
|
||||
* @author v.lugovsky
|
||||
* created on 16.12.2015
|
||||
*/
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('BlurAdmin.pages.surveys', [])
|
||||
.config(routeConfig);
|
||||
|
||||
/** @ngInject */
|
||||
function routeConfig($stateProvider) {
|
||||
$stateProvider
|
||||
.state('surveys', {
|
||||
url: '/surveys',
|
||||
templateUrl: 'app/pages/surveys/surveys.html',
|
||||
controller: 'SurveysPageCtrl',
|
||||
title: 'Surveys',
|
||||
sidebarMeta: {
|
||||
order: 1500,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
url: '/ui',
|
||||
template : '<ui-view autoscroll="true" autoscroll-body-top></ui-view>',
|
||||
abstract: true,
|
||||
title: 'UI Features',
|
||||
title: 'UI Featuress',
|
||||
sidebarMeta: {
|
||||
icon: 'ion-android-laptop',
|
||||
order: 200,
|
||||
|
|
|
|||
|
|
@ -221,4 +221,29 @@ a {
|
|||
|
||||
.irs-grid-text {
|
||||
color: $default-text;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.no-gutter {
|
||||
padding-left:0;
|
||||
padding-right:0;
|
||||
}
|
||||
|
||||
#surveys #sidebar button {
|
||||
margin-bottom:10px;
|
||||
}
|
||||
|
||||
#surveys .new-question-container {
|
||||
margin:25px 0;
|
||||
}
|
||||
|
||||
#surveys .saved-questions .progress-button .content:after,#surveys .saved-questions .progress-button .content:before, #surveys .survey-template .progress-button .content:after,#surveys .survey-template .progress-button .content:before {
|
||||
content: "\f054" !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
#surveys #survey-builder .new-question-options-container .panel-heading .btn-group{
|
||||
margin-top: -25px;
|
||||
}
|
||||
Loading…
Reference in New Issue