hide column background if task too close

HabitRPG · Aug 6, 2017 · 25d9064 · 25d9064
1 parent 5f4fb62
commit 25d9064
Showing 1 changed file with 35 additions and 2 deletions.
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
@@ -9,7 +9,7 @@
         :class="{active: activeFilter.label === filter.label}",
         @click="activateFilter(type, filter)",
       ) {{ $t(filter.label) }}
-  .tasks-list
+  .tasks-list(ref="taskList")
     task(
       v-for="task in taskList",
       :key="task.id", :task="task",
@@ -18,7 +18,11 @@
       @editTask="editTask",
     )
     .bottom-gradient
-    .column-background(v-if="isUser === true", :class="{'initial-description': tasks[`${type}s`].length === 0}")
+    .column-background(
+      v-if="isUser === true", 
+      :class="{'initial-description': tasks[`${type}s`].length === 0}",
+      ref="columnBackground",
+    )
       .svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
       h3(v-once) {{$t('theseAreYourTasks', {taskType: `${type}s`})}}
       .small-text {{$t(`${type}sDesc`)}}
@@ -139,6 +143,7 @@ import dailyIcon from 'assets/svg/daily.svg';
 import todoIcon from 'assets/svg/todo.svg';
 import rewardIcon from 'assets/svg/reward.svg';
 import bModal from 'bootstrap-vue/lib/components/modal';
+import throttle from 'lodash/throttle';
 
 export default {
   components: {
@@ -206,6 +211,17 @@ export default {
       return this.tasks[`${this.type}s`];
     },
   },
+  watch: {
+    taskList: {
+      handler: throttle(function setColumnBackgroundVisibility () {
+        this.setColumnBackgroundVisibility();
+      }, 250),
+      deep: true,
+    },
+  },
+  mounted () {
+    this.setColumnBackgroundVisibility();
+  },
   methods: {
     ...mapActions({loadCompletedTodos: 'tasks:fetchCompletedTodos'}),
     editTask (task) {
@@ -217,6 +233,23 @@ export default {
       }
       this.activeFilter = filter;
     },
+    setColumnBackgroundVisibility () {
+      this.$nextTick(() => {
+        const taskListEl = this.$refs.taskList;
+        const tasklistHeight = taskListEl.offsetHeight;
+        let combinedTasksHeights = 0;
+        Array.from(taskListEl.getElementsByClassName('task')).forEach(el => {
+          combinedTasksHeights += el.offsetHeight;
+        });
+        const columnBackgroundStyle = this.$refs.columnBackground.style;
+
+        if (tasklistHeight - combinedTasksHeights < 150) {
+          columnBackgroundStyle.display = 'none';
+        } else {
+          columnBackgroundStyle.display = 'block';
+        }
+      });
+    },
     filterTask (task) {
       // View
       if (!this.activeFilter.filter(task)) return false;