Add close to tags popup (#9376)

website/client/components/tasks/tagsPopup.vue

@@ -12,6 +12,7 @@
             span.custom-control-description(:title='tag.name') {{tag.name}}
   .tags-footer
     span.clear-tags(@click="clearTags()") {{$t("clearTags")}}
+    span.close-tags(@click="close()") {{$t("close")}}
 </template>
 
 <style lang="scss" scoped>
@@ -68,6 +69,18 @@
       display: flex;
       justify-content: center;
 
+      .close-tags {
+        color: $red-50;
+        margin: 1.1em 0;
+        margin-left: 2em;
+        font-size: 14px;
+
+        &:hover {
+          text-decoration: underline;
+          cursor: pointer;
+        }
+      }
+
       .clear-tags {
         cursor: pointer;
         margin: 1.1em 0;
@@ -102,6 +115,9 @@ export default {
     clearTags () {
       this.selectedTags = [];
     },
+    close () {
+      this.$emit('close');
+    },
   },
 };
 </script>

website/client/components/tasks/taskModal.vue

@@ -125,7 +125,7 @@
                 .category-label(v-for='tagName in truncatedSelectedTags', :title="tagName") {{ tagName }}
                 .tags-more(v-if='remainingSelectedTags.length > 0') +{{ $t('more', { count: remainingSelectedTags.length }) }}
                 .dropdown-toggle
-          tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags")
+          tags-popup(v-if="showTagsSelect", :tags="user.tags", v-model="task.tags", @close='closeTagsPopup()')
 
         .option(v-if="task.type === 'habit'")
           label(v-once) {{ $t('resetStreak') }}
@@ -671,6 +671,9 @@ export default {
   },
   methods: {
     ...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
+    closeTagsPopup () {
+      this.showTagsSelect = false;
+    },
     sortedChecklist (data) {
       let sorting = clone(this.task.checklist);
       let movingItem = sorting[data.oldIndex];