Dev: redesign ellipsis on questions and questiongroups

LimeSurvey · Jan 10, 2018 · 0657cf5 · 0657cf5
1 parent 1155107
commit 0657cf5
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 15 deletions.
diff --git a/assets/packages/adminpanel/build/lsadminpanel.css b/assets/packages/adminpanel/build/lsadminpanel.css
@@ -109,6 +109,14 @@
     height: 100%; }
   #sidebar .dragPointer {
     cursor: move; }
+  #sidebar .question-question-list .question-question-list-item .question-question-list-item-link {
+    display: inline-flex; }
+  #sidebar .question_text_ellipsize {
+    display: inline-block;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    padding-left: 2px; }
 
 .bigIcons {
   font-size: 18px;

diff --git a/assets/packages/adminpanel/build/lsadminpanel.js b/assets/packages/adminpanel/build/lsadminpanel.js
@@ -36777,7 +36777,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
             if (this.isMouseDown) {
                 this.isMouseDown = false;
                 this.$store.state.isCollapsed = false;
-                if (parseInt(this.sideBarWidth) < 335 && !this.$store.state.isCollapsed) {
+                if (parseInt(this.sideBarWidth) < 250 && !this.$store.state.isCollapsed) {
                     this.toggleCollapse();
                     this.$store.commit('changeSidebarwidth', '340px');
                 } else {
@@ -37052,6 +37052,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
         },
         createQuestionAllowed() {
             return this.$store.state.questiongroups.length > 0;
+        },
+        itemWidth() {
+            return parseInt(this.$store.state.sidebarwidth) - 135 + 'px';
         }
     },
     methods: {
@@ -37263,7 +37266,12 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
           _vm.openQuestionGroup(questiongroup)
         }
       }
-    }, [_vm._v(" \n                    " + _vm._s(questiongroup.group_name) + " \n                    "), _c('span', {
+    }, [_c('span', {
+      staticClass: "question_text_ellipsize",
+      style: ({
+        width: _vm.itemWidth
+      })
+    }, [_vm._v(" " + _vm._s(questiongroup.group_name) + " ")]), _vm._v(" "), _c('span', {
       staticClass: "badge pull-right ls-space margin right-5"
     }, [_vm._v(_vm._s(questiongroup.questions.length))])]), _vm._v(" "), _c('i', {
       staticClass: "fa bigIcons",
@@ -37279,7 +37287,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
         "name": "slide-fade-down"
       }
     }, [(_vm.isActive(questiongroup.gid)) ? _c('ul', {
-      staticClass: "list-group background-muted padding-left",
+      staticClass: "list-group background-muted padding-left question-question-list",
       on: {
         "drop": function($event) {
           _vm.dropQuestion($event, _vm.question)
@@ -37288,7 +37296,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
     }, _vm._l((_vm.orderQuestions(questiongroup.questions)), function(question) {
       return _c('li', {
         key: question.qid,
-        staticClass: "list-group-item ls-flex-row align-itmes-flex-between",
+        staticClass: "list-group-item question-question-list-item ls-flex-row align-itmes-flex-between",
         class: _vm.questionItemClasses(question),
         on: {
           "dragenter": function($event) {
@@ -37309,7 +37317,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
           }
         }
       }, [_vm._v(" ")]), _vm._v(" "), _c('a', {
-        staticClass: "col-12 pjax",
+        staticClass: "col-12 pjax question-question-list-item-link",
         attrs: {
           "href": question.link,
           "data-toggle": "tootltip",
@@ -37321,7 +37329,12 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c
             _vm.openQuestion(question)
           }
         }
-      }, [_c('i', [_vm._v("[" + _vm._s(question.title) + "]")]), _vm._v(" " + _vm._s((_vm.$store.state.maximalSidebar ? question.question : question.name_short)) + " ")])])
+      }, [_c('i', [_vm._v("[" + _vm._s(question.title) + "]")]), _vm._v(" "), _c('span', {
+        staticClass: "question_text_ellipsize",
+        style: ({
+          width: _vm.itemWidth
+        })
+      }, [_vm._v(" " + _vm._s(question.question) + " ")])])])
     })) : _vm._e()])], 1)
   }))])
 },staticRenderFns: []}

diff --git a/assets/packages/adminpanel/build/lsadminpanel.js.map b/assets/packages/adminpanel/build/lsadminpanel.js.map
diff --git a/assets/packages/adminpanel/build/lsadminpanel.min.css b/assets/packages/adminpanel/build/lsadminpanel.min.css
diff --git a/assets/packages/adminpanel/build/lsadminpanel.min.js b/assets/packages/adminpanel/build/lsadminpanel.min.js
diff --git a/assets/packages/adminpanel/scss/custom.scss b/assets/packages/adminpanel/scss/custom.scss
@@ -139,6 +139,22 @@
     .dragPointer{
         cursor: move;
     }
+    .question-question-list{
+        .question-question-list-item{
+            .question-question-list-item-link{
+                display: inline-flex;
+
+            }
+        }
+
+    }
+    .question_text_ellipsize{
+        display: inline-block;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        padding-left: 2px;
+    }
 }
 
 .bigIcons {

diff --git a/assets/packages/adminpanel/src/components/sidebar.vue b/assets/packages/adminpanel/src/components/sidebar.vue
@@ -171,7 +171,7 @@ export default {
             if(this.isMouseDown){
                 this.isMouseDown = false;
                 this.$store.state.isCollapsed = false;
-                if(parseInt(this.sideBarWidth) < 335 && !this.$store.state.isCollapsed) {
+                if(parseInt(this.sideBarWidth) < 250 && !this.$store.state.isCollapsed) {
                     this.toggleCollapse();
                     this.$store.commit('changeSidebarwidth', '340px');
                 } else {

diff --git a/assets/packages/adminpanel/src/components/subcomponents/_questionsgroups.vue b/assets/packages/adminpanel/src/components/subcomponents/_questionsgroups.vue
@@ -29,6 +29,9 @@ export default {
         },
         createQuestionAllowed(){
             return (this.$store.state.questiongroups.length > 0);
+        },
+        itemWidth(){
+            return (parseInt(this.$store.state.sidebarwidth)-135)+'px';
         }
     },
     methods: {
@@ -181,16 +184,19 @@ export default {
                 <div class="col-12 ls-flex-row nowrap ls-space padding left-5 bottom-5">
                     <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="question_text_ellipsize" :style="{ width: itemWidth }"> {{questiongroup.group_name}} </span>
                         <span class="badge pull-right ls-space margin right-5">{{questiongroup.questions.length}}</span>
                     </a>
                     <i class="fa bigIcons" v-bind:class="isActive(questiongroup.gid) ? 'fa-caret-up' : 'fa-caret-down'" @click.prevent="toggleActivation(questiongroup.gid)">&nbsp;</i>
                 </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="questionItemClasses(question)" class="list-group-item ls-flex-row align-itmes-flex-between" @dragenter="dragoverQuestion($event, question, questiongroup)">
+                    <ul class="list-group background-muted padding-left question-question-list" 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="questionItemClasses(question)" class="list-group-item question-question-list-item ls-flex-row align-itmes-flex-between" @dragenter="dragoverQuestion($event, question, questiongroup)">
                             <i class="fa fa-bars margin-right bigIcons dragPointer" draggable="true" @dragend="endDraggingQuestion($event, question)" @dragstart="startDraggingQuestion($event, question, questiongroup)">&nbsp;</i>
-                            <a :href="question.link" class="col-12 pjax" @click.prevent="openQuestion(question)" data-toggle="tootltip" :title="question.question"> <i>[{{question.title}}]</i> {{($store.state.maximalSidebar ? question.question : question.name_short)}} </a>
+                            <a :href="question.link" class="col-12 pjax question-question-list-item-link" @click.prevent="openQuestion(question)" data-toggle="tootltip" :title="question.question"> 
+                                <i>[{{question.title}}]</i> 
+                                <span class="question_text_ellipsize" :style="{ width: itemWidth }"> {{ question.question }} </span> 
+                            </a>
                         </li>
                     </ul>
                 </transition>