chore: Update contact sidebar with accordion (#3002)

This commit is contained in:
Pranav Raj S
2021-09-13 18:08:58 +05:30
committed by GitHub
parent 328edd24de
commit f2e2a0b7ed
9 changed files with 147 additions and 129 deletions

View File

@@ -1,33 +1,27 @@
<template>
<div>
<h6 class="text-block-title">
<i class="title-icon ion-pricetags" />
{{ $t('CONTACT_PANEL.LABELS.CONTACT.TITLE') }}
</h6>
<div v-on-clickaway="closeDropdownLabel" class="label-wrap">
<add-label @add="toggleLabels" />
<woot-label
v-for="label in savedLabels"
:key="label.id"
:title="label.title"
:description="label.description"
:show-close="true"
:bg-color="label.color"
@click="removeItem"
/>
<div class="dropdown-wrap">
<div
:class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
class="dropdown-pane"
>
<label-dropdown
v-if="showSearchDropdownLabel"
:account-labels="allLabels"
:selected-labels="selectedLabels"
@add="addItem"
@remove="removeItem"
/>
</div>
<div v-on-clickaway="closeDropdownLabel" class="label-wrap">
<add-label @add="toggleLabels" />
<woot-label
v-for="label in savedLabels"
:key="label.id"
:title="label.title"
:description="label.description"
:show-close="true"
:bg-color="label.color"
@click="removeItem"
/>
<div class="dropdown-wrap">
<div
:class="{ 'dropdown-pane--open': showSearchDropdownLabel }"
class="dropdown-pane"
>
<label-dropdown
v-if="showSearchDropdownLabel"
:account-labels="allLabels"
:selected-labels="selectedLabels"
@add="addItem"
@remove="removeItem"
/>
</div>
</div>
</div>
@@ -96,7 +90,6 @@ export default {
.label-wrap {
position: relative;
margin-left: var(--space-two);
line-height: var(--space-medium);
.dropdown-wrap {