Skip to content

Commit

Permalink
Dev: style amendmends to question reordering
Browse files Browse the repository at this point in the history
  • Loading branch information
@lacrioque
lacrioque committed Oct 27, 2017
1 parent 1620498 commit 1c24c51
Show file tree
Hide file tree
Showing 7 changed files with 63 additions and 28 deletions.
9 changes: 7 additions & 2 deletions assets/packages/adminpanel/build/lsadminpanel.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -544,6 +544,9 @@ ol.breadcrumb.title-bar-breadcrumb {
#sidebar .fill-height {
height: 100%; }

#sidebar .dragPointer {
cursor: move; }

#sidebar .menu-open {
animation-name: animate-gradient;
animation-duration: 450ms;
Expand All @@ -556,9 +559,11 @@ ol.breadcrumb.title-bar-breadcrumb {
transition-duration: .25s;
transition-timing-function: cubic-bezier(1, 0.5, 0.5, 1); }

#sidebar .dragging {
background-color: #efefef;
#sidebar .dragged {
background-color: rgba(50, 134, 55, 0.8) !important;
opacity: 0.8;
padding-top: 18px;
padding-bottom: 18px;
transition-property: all;
transition-duration: .1s;
transition-timing-function: ease-in-out; }
Expand Down
35 changes: 23 additions & 12 deletions assets/packages/adminpanel/build/lsadminpanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29073,6 +29073,22 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
}
},
methods: {
questionItemClasses(question) {
let classes = "";
classes += this.$store.state.lastQuestionOpen === question.qid ? 'selected' : ' ';

if (this.draggedQuestion !== null) classes += this.draggedQuestion.qid === question.qid ? ' dragged' : ' ';

return classes;
},
questionGroupItemClasses(questionGroup) {
let classes = "";
classes += this.isActive(questionGroup.gid) ? 'selected' : ' ';

if (this.draggedQuestionGroup !== null) classes += this.draggedQuestionGroup.gid === questionGroup.gid ? ' dragged' : ' ';

return classes;
},
orderQuestions(questionList) {
return __WEBPACK_IMPORTED_MODULE_1_lodash___default.a.orderBy(questionList, a => {
return parseInt(a.question_order || 999999);
Expand Down Expand Up @@ -29117,12 +29133,10 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
},
//dragevents questiongroups
startDraggingGroup($event, questiongroupObject) {
$event.target.parentElement.parentElement.style.opacity = 0.5;
this.draggedQuestionGroup = questiongroupObject;
this.questiongroupDragging = true;
},
endDraggingGroup($event, questiongroupObject) {
$event.target.parentElement.parentElement.style.opacity = 1;
this.draggedQuestionGroup = null;
this.questiongroupDragging = false;
this.$emit('questiongrouporder');
Expand All @@ -29148,14 +29162,12 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
},
//dragevents questions
startDraggingQuestion($event, questionObject, questionGroupObject) {
$event.target.parentElement.style.opacity = 0.5;
this.$log.log("Dragging started", questionObject);
this.questionDragging = true;
this.draggedQuestion = questionObject;
this.draggedQuestionsGroup = questionGroupObject;
},
endDraggingQuestion($event, question) {
$event.target.parentElement.style.opacity = 1;
this.questionDragging = false;
this.draggedQuestion = null;
this.draggedQuestionsGroup = null;
Expand Down Expand Up @@ -29212,7 +29224,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
return _c('li', {
key: questiongroup.gid,
staticClass: "list-group-item ls-flex-column",
class: _vm.isActive(questiongroup.gid) ? 'selected' : '',
class: _vm.questionGroupItemClasses(questiongroup),
on: {
"dragenter": function($event) {
_vm.dragoverQuestiongroup($event, questiongroup)
Expand All @@ -29221,7 +29233,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
}, [_c('div', {
staticClass: "col-12 ls-flex-row nowrap ls-space padding left-5 bottom-5"
}, [_c('i', {
staticClass: "fa fa-bars bigIcons",
staticClass: "fa fa-bars bigIcons dragPointer",
attrs: {
"draggable": "true"
},
Expand Down Expand Up @@ -29270,14 +29282,14 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
return _c('li', {
key: question.qid,
staticClass: "list-group-item ls-flex-row align-itmes-flex-between",
class: (_vm.$store.state.lastQuestionOpen == question.qid ? 'selected' : ''),
class: _vm.questionItemClasses(question),
on: {
"dragenter": function($event) {
_vm.dragoverQuestion($event, question)
}
}
}, [_c('i', {
staticClass: "fa fa-bars margin-right bigIcons",
staticClass: "fa fa-bars margin-right bigIcons dragPointer",
attrs: {
"draggable": "true"
},
Expand Down Expand Up @@ -30061,10 +30073,9 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
}
}, [_c('div', {
staticClass: "col-12 fill-height ls-space padding all-0",
style: ({
'min-height': _vm.$store.state.inSurveyViewHeight,
'height': '100%'
})
staticStyle: {
"height": "100%"
}
}, [_c('div', {
staticClass: "mainMenu container-fluid col-12 ls-space padding right-0 fill-height"
}, [_c('div', {
Expand Down
2 changes: 1 addition & 1 deletion assets/packages/adminpanel/build/lsadminpanel.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/packages/adminpanel/build/lsadminpanel.min.js
View file

Large diffs are not rendered by default.

9 changes: 7 additions & 2 deletions assets/packages/adminpanel/scss/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ ol.breadcrumb.title-bar-breadcrumb {
.fill-height {
height: 100%
}
.dragPointer{
cursor: move;
}
.menu-open {
animation-name: animate-gradient;
animation-duration: 450ms;
Expand All @@ -144,9 +147,11 @@ ol.breadcrumb.title-bar-breadcrumb {
transition-duration: .25s;
transition-timing-function: cubic-bezier(1, 0.5, 0.5, 1);
}
.dragging {
background-color: #efefef;
.dragged {
background-color: rgba(50, 134, 55,0.8) !important;
opacity: 0.8;
padding-top: 18px;
padding-bottom: 18px;
transition-property: all;
transition-duration: .1s;
transition-timing-function: ease-in-out;
Expand Down
2 changes: 1 addition & 1 deletion assets/packages/adminpanel/src/components/sidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@ export default {
</script>
<template>
<div id="sidebar" class="ls-flex ls-ba ls-space padding left-0 col-md-4 hidden-xs nofloat transition-animate-width" :style="{width : sideBarWidth}" @mouseleave="mouseleave" @mouseup="mouseup">
<div class="col-12 fill-height ls-space padding all-0" v-bind:style="{'min-height': $store.state.inSurveyViewHeight, 'height': '100%'}">
<div class="col-12 fill-height ls-space padding all-0" style="height: 100%">
<div class="mainMenu container-fluid col-12 ls-space padding right-0 fill-height">
<div class="ls-space margin bottom-15 top-5 col-12" style="height: 40px;">
<div class="ls-flex-row align-content-space-between align-items-flex-end ls-space padding left-0 right-10 bottom-0 top-0">
Expand Down
32 changes: 23 additions & 9 deletions assets/packages/adminpanel/src/components/subcomponents/_questionsgroups.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,24 @@ export default {
}
},
methods: {
questionItemClasses(question){
let classes = "";
classes+=(this.$store.state.lastQuestionOpen === question.qid ? 'selected' : ' ');
if(this.draggedQuestion !== null)
classes+=(this.draggedQuestion.qid === question.qid ? ' dragged' : ' ');
return classes;
},
questionGroupItemClasses(questionGroup){
let classes = "";
classes+=(this.isActive(questionGroup.gid) ? 'selected' : ' ');
if(this.draggedQuestionGroup !== null)
classes+=(this.draggedQuestionGroup.gid === questionGroup.gid ? ' dragged' : ' ');
return classes;
},
orderQuestions(questionList){
return _.orderBy(questionList,(a)=>{return parseInt((a.question_order || 999999)) }, ['asc']);
},
Expand Down Expand Up @@ -71,12 +89,10 @@ export default {
},
//dragevents questiongroups
startDraggingGroup($event, questiongroupObject){
$event.target.parentElement.parentElement.style.opacity = 0.5;
this.draggedQuestionGroup = questiongroupObject;
this.questiongroupDragging = true;
},
endDraggingGroup($event, questiongroupObject){
$event.target.parentElement.parentElement.style.opacity = 1;
this.draggedQuestionGroup = null;
this.questiongroupDragging = false;
this.$emit('questiongrouporder');
Expand All @@ -101,14 +117,12 @@ export default {
},
//dragevents questions
startDraggingQuestion($event, questionObject, questionGroupObject){
$event.target.parentElement.style.opacity = 0.5;
this.$log.log("Dragging started", questionObject);
this.questionDragging = true;
this.draggedQuestion = questionObject;
this.draggedQuestionsGroup = questionGroupObject;
},
endDraggingQuestion($event, question){
$event.target.parentElement.style.opacity = 1;
endDraggingQuestion($event, question){
this.questionDragging = false;
this.draggedQuestion = null;
this.draggedQuestionsGroup = null;
Expand All @@ -135,9 +149,9 @@ export default {
<i class="fa fa-plus-circle"></i>&nbsp;{{translate.createQuestion}}</a>
</div>
<ul class="list-group" @drop="dropQuestionGroup($event, questiongroup)">
<li v-for="questiongroup in orderedQuestionGroups" class="list-group-item ls-flex-column" v-bind:key="questiongroup.gid" v-bind:class="isActive(questiongroup.gid) ? 'selected' : ''" @dragenter="dragoverQuestiongroup($event, questiongroup)">
<li v-for="questiongroup in orderedQuestionGroups" class="list-group-item ls-flex-column" v-bind:key="questiongroup.gid" v-bind:class="questionGroupItemClasses(questiongroup)" @dragenter="dragoverQuestiongroup($event, questiongroup)">
<div class="col-12 ls-flex-row nowrap ls-space padding left-5 bottom-5">
<i class="fa fa-bars bigIcons" draggable="true" @dragend="endDraggingGroup($event, questiongroup)" @dragstart="startDraggingGroup($event, questiongroup)">&nbsp;</i>
<i class="fa fa-bars bigIcons dragPointer" draggable="true" @dragend="endDraggingGroup($event, questiongroup)" @dragstart="startDraggingGroup($event, questiongroup)">&nbsp;</i>
<a :href="questiongroup.link" @click.stop="openQuestionGroup(questiongroup)" class="col-12 pjax">
{{questiongroup.group_name}}
<span class="badge pull-right ls-space margin right-5">{{questiongroup.questions.length}}</span>
Expand All @@ -146,8 +160,8 @@ export default {
</div>
<transition name="slide-fade-down">
<ul class="list-group background-muted padding-left" v-if="isActive(questiongroup.gid)" @drop="dropQuestion($event, question)">
<li v-for="question in orderQuestions(questiongroup.questions)" v-bind:key="question.qid" v-bind:class="($store.state.lastQuestionOpen == question.qid ? 'selected' : '')" class="list-group-item ls-flex-row align-itmes-flex-between" @dragenter="dragoverQuestion($event, question)">
<i class="fa fa-bars margin-right bigIcons" draggable="true" @dragend="endDraggingQuestion($event, question)" @dragstart="startDraggingQuestion($event, question, questiongroup)">&nbsp;</i>
<li v-for="question in orderQuestions(questiongroup.questions)" v-bind:key="question.qid" v-bind:class="questionItemClasses(question)" class="list-group-item ls-flex-row align-itmes-flex-between" @dragenter="dragoverQuestion($event, question)">
<i class="fa fa-bars margin-right bigIcons dragPointer" draggable="true" @dragend="endDraggingQuestion($event, question)" @dragstart="startDraggingQuestion($event, question, questiongroup)">&nbsp;</i>
<a @click.stop="openQuestion(question)" :href="question.link" class="pjax" data-toggle="tootltip" :title="question.question"> <i>[{{question.title}}]</i> {{($store.state.maximalSidebar ? question.question : question.name_short)}} </a>
</li>
</ul>
Expand Down

0 comments on commit 1c24c51

Please sign in to comment.