Merge pull request #2054 from doccano/enhancement/enable-to-expand-label-type-card

Enable to expand/collapse label types card

frontend/pages/projects/_id/sequence-labeling/index.vue

@@ -41,36 +41,44 @@
     <template #sidebar>
       <annotation-progress :progress="progress" />
       <v-card class="mt-4">
-        <v-card-title>Label Types</v-card-title>
-        <v-card-text>
-          <v-switch v-if="useRelationLabeling" v-model="relationMode">
-            <template #label>
-              <span v-if="relationMode">Relation</span>
-              <span v-else>Span</span>
-            </template>
-          </v-switch>
-          <v-chip-group v-model="selectedLabelIndex" column>
-            <v-chip
-              v-for="(item, index) in labelTypes"
-              :key="item.id"
-              v-shortkey="[item.suffixKey]"
-              :color="item.backgroundColor"
-              filter
-              :text-color="$contrastColor(item.backgroundColor)"
-              @shortkey="selectedLabelIndex = index"
-            >
-              {{ item.text }}
-              <v-avatar
-                v-if="item.suffixKey"
-                right
-                color="white"
-                class="black--text font-weight-bold"
+        <v-card-title>
+          Label Types
+          <v-spacer />
+          <v-btn icon @click="showLabelTypes = !showLabelTypes">
+            <v-icon>{{ showLabelTypes ? mdiChevronUp : mdiChevronDown }}</v-icon>
+          </v-btn>
+        </v-card-title>
+        <v-expand-transition>
+          <v-card-text v-show="showLabelTypes">
+            <v-switch v-if="useRelationLabeling" v-model="relationMode">
+              <template #label>
+                <span v-if="relationMode">Relation</span>
+                <span v-else>Span</span>
+              </template>
+            </v-switch>
+            <v-chip-group v-model="selectedLabelIndex" column>
+              <v-chip
+                v-for="(item, index) in labelTypes"
+                :key="item.id"
+                v-shortkey="[item.suffixKey]"
+                :color="item.backgroundColor"
+                filter
+                :text-color="$contrastColor(item.backgroundColor)"
+                @shortkey="selectedLabelIndex = index"
               >
-                {{ item.suffixKey }}
-              </v-avatar>
-            </v-chip>
-          </v-chip-group>
-        </v-card-text>
+                {{ item.text }}
+                <v-avatar
+                  v-if="item.suffixKey"
+                  right
+                  color="white"
+                  class="black--text font-weight-bold"
+                >
+                  {{ item.suffixKey }}
+                </v-avatar>
+              </v-chip>
+            </v-chip-group>
+          </v-card-text>
+        </v-expand-transition>
       </v-card>
       <list-metadata :metadata="doc.meta" class="mt-4" />
     </template>
@@ -80,6 +88,7 @@
 <script>
 import _ from 'lodash'
 import { mapGetters } from 'vuex'
+import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import LayoutText from '@/components/tasks/layout/LayoutText'
 import ListMetadata from '@/components/tasks/metadata/ListMetadata'
 import ToolbarLaptop from '@/components/tasks/toolbar/ToolbarLaptop'
@@ -115,7 +124,10 @@ export default {
       rtl: false,
       selectedLabelIndex: null,
       progress: {},
-      relationMode: false
+      relationMode: false,
+      showLabelTypes: true,
+      mdiChevronUp,
+      mdiChevronDown
     }
   },