LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

refactor: multiple fixes to contact header [CW-2081] (#7331)

Browse Source 
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
Shivam Mishra
2023-06-19 21:58:33 +05:30
committed by GitHub
parent 9bb455ec2d
commit 9ac4a1eb30
3 changed files with 51 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsView.vue
View File

@@ -3,15 +3,15 @@
<div class="left-wrap" :class="wrapClass">
<contacts-header
:search-query="searchQuery"
:segments-id="segmentsId"
:on-search-submit="onSearchSubmit"
:on-export-submit="onExportSubmit"
this-selected-contact-id=""
:on-input-search="onInputSearch"
:on-toggle-create="onToggleCreate"
:on-toggle-import="onToggleImport"
:on-toggle-filter="onToggleFilters"
:header-title="pageTitle"
:segments-id="segmentsId"
this-selected-contact-id=""
@on-input-search="onInputSearch"
@on-toggle-create="onToggleCreate"
@on-toggle-filter="onToggleFilters"
@on-search-submit="onSearchSubmit"
@on-toggle-import="onToggleImport"
@on-export-submit="onExportSubmit"
@on-toggle-save-filter="onToggleSaveFilters"
@on-toggle-delete-filter="onToggleDeleteFilters"
@on-toggle-edit-filter="onToggleFilters"

82
app/javascript/dashboard/routes/dashboard/contacts/components/Header.vue
View File

@@ -9,20 +9,22 @@
</div>
<div class="right-aligned-wrap">
<div class="search-wrap">
<fluent-icon icon="search" class="search-icon" />
<div class="search-icon-container">
<fluent-icon icon="search" class="search-icon" />
</div>
<input
type="text"
:placeholder="$t('CONTACTS_PAGE.SEARCH_INPUT_PLACEHOLDER')"
class="contact-search"
:value="searchQuery"
@keyup.enter="onSearchSubmit"
@input="onInputSearch"
@keyup.enter="submitSearch"
@input="inputSearch"
/>
<woot-button
:is-loading="false"
class="clear"
:class-names="searchButtonClass"
@click="onSearchSubmit"
@click="submitSearch"
>
{{ $t('CONTACTS_PAGE.SEARCH_BUTTON') }}
</woot-button>
@@ -52,7 +54,7 @@
color-scheme="secondary"
data-testid="create-new-contact"
icon="filter"
@click="onToggleFilter"
@click="toggleFilter"
>
{{ $t('CONTACTS_PAGE.FILTER_CONTACTS') }}
</woot-button>
@@ -73,7 +75,7 @@
color-scheme="success"
icon="person-add"
data-testid="create-new-contact"
@click="onToggleCreate"
@click="toggleCreate"
>
{{ $t('CREATE_CONTACT.BUTTON_LABEL') }}
</woot-button>
@@ -83,7 +85,7 @@
color-scheme="info"
icon="upload"
class="clear"
@click="onToggleImport"
@click="toggleImport"
>
{{ $t('IMPORT_CONTACTS.BUTTON_LABEL') }}
</woot-button>
@@ -91,9 +93,9 @@
<woot-button
v-if="isAdmin"
color-scheme="info"
icon="upload"
icon="download"
class="clear"
@click="onExportSubmit"
@click="submitExport"
>
{{ $t('EXPORT_CONTACTS.BUTTON_LABEL') }}
</woot-button>
@@ -121,30 +123,6 @@ export default {
type: [String, Number],
default: 0,
},
onInputSearch: {
type: Function,
default: () => {},
},
onSearchSubmit: {
type: Function,
default: () => {},
},
onToggleCreate: {
type: Function,
default: () => {},
},
onToggleImport: {
type: Function,
default: () => {},
},
onExportSubmit: {
type: Function,
default: () => {},
},
onToggleFilter: {
type: Function,
default: () => {},
},
},
data() {
return {
@@ -176,6 +154,24 @@ export default {
onToggleDeleteSegmentsModal() {
this.$emit('on-toggle-delete-filter');
},
toggleCreate() {
this.$emit('on-toggle-create');
},
toggleFilter() {
this.$emit('on-toggle-filter');
},
toggleImport() {
this.$emit('on-toggle-import');
},
submitExport() {
this.$emit('on-export-submit');
},
submitSearch() {
this.$emit('on-search-submit');
},
inputSearch(event) {
this.$emit('on-input-search', event);
},
},
};
</script>
@@ -220,20 +216,26 @@ export default {
margin-right: var(--space-small);
margin-left: var(--space-small);
.search-icon {
.search-icon-container {
display: flex;
align-items: center;
position: absolute;
top: 1px;
height: 100%;
left: var(--space-one);
height: 3.8rem;
line-height: 3.6rem;
font-size: var(--font-size-medium);
color: var(--b-700);
.search-icon {
height: var(--font-size-medium);
line-height: 3.6rem;
font-size: var(--font-size-small);
color: var(--b-700);
}
}
.contact-search {
margin: 0;
height: 3.8rem;
width: 100%;
padding-left: var(--space-large);
font-size: var(--font-size-small);
padding-left: calc(var(--space-large) + var(--space-smaller));
padding-right: 6rem;
border-color: var(--s-100);
}

1
app/javascript/shared/components/FluentIcon/dashboard-icons.json
View File

@@ -169,6 +169,7 @@
"subtract-outline": "M3.997 13H20a1 1 0 1 0 0-2H3.997a1 1 0 1 0 0 2Z",
"tag-outline": "M19.75 2A2.25 2.25 0 0 1 22 4.25v5.462a3.25 3.25 0 0 1-.952 2.298l-8.5 8.503a3.255 3.255 0 0 1-4.597.001L3.489 16.06a3.25 3.25 0 0 1-.003-4.596l8.5-8.51A3.25 3.25 0 0 1 14.284 2h5.465Zm0 1.5h-5.465c-.465 0-.91.185-1.239.513l-8.512 8.523a1.75 1.75 0 0 0 .015 2.462l4.461 4.454a1.755 1.755 0 0 0 2.477 0l8.5-8.503a1.75 1.75 0 0 0 .513-1.237V4.25a.75.75 0 0 0-.75-.75ZM17 5.502a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z",
"upload-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0Zm-6-1.793V19.5a.5.5 0 0 0 1 0v-4.793l1.646 1.647a.5.5 0 0 0 .708-.708l-2.5-2.5a.5.5 0 0 0-.708 0l-2.5 2.5a.5.5 0 0 0 .708.708L16 14.707Z",
"download-outline": "M6.087 7.75a5.752 5.752 0 0 1 11.326 0h.087a4 4 0 0 1 3.962 4.552 6.534 6.534 0 0 0-1.597-1.364A2.501 2.501 0 0 0 17.5 9.25h-.756a.75.75 0 0 1-.75-.713 4.25 4.25 0 0 0-8.489 0 .75.75 0 0 1-.749.713H6a2.5 2.5 0 0 0 0 5h4.4a6.458 6.458 0 0 0-.357 1.5H6a4 4 0 0 1 0-8h.087ZM22 16.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0Zm-6-3a.5.5 0 0 1 1 0v4.793l1.646-1.647a.5.5 0 0 1 .708.708l-2.5 2.5a.5.5 0 0 1-.708 0l-2.5-2.5a.5.5 0 0 1 .708-.708L16 18.293V13.5Z",
"video-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-8.5A3.25 3.25 0 0 1 2 16.25v-8.5A3.25 3.25 0 0 1 5.25 4.5h8.5Zm0 1.5h-8.5A1.75 1.75 0 0 0 3.5 7.75v8.5c0 .966.784 1.75 1.75 1.75h8.5a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6Zm6.75 1.573L17 9.674v4.651l3.5 2.1V7.573Z",
"video-add-outline": "M13.75 4.5A3.25 3.25 0 0 1 17 7.75v.173l3.864-2.318A.75.75 0 0 1 22 6.248V17.75a.75.75 0 0 1-1.136.643L17 16.075v.175a3.25 3.25 0 0 1-3.25 3.25h-1.063c.154-.478.255-.98.294-1.5h.769a1.75 1.75 0 0 0 1.75-1.75v-8.5A1.75 1.75 0 0 0 13.75 6h-8.5A1.75 1.75 0 0 0 3.5 7.75v3.982A6.517 6.517 0 0 0 2 12.81V7.75A3.25 3.25 0 0 1 5.25 4.5h8.5Zm6.75 3.073L17 9.674v4.651l3.5 2.1V7.573ZM12 17.5a5.5 5.5 0 1 0-11 0 5.5 5.5 0 0 0 11 0ZM7 18l.001 2.503a.5.5 0 1 1-1 0V18H3.496a.5.5 0 0 1 0-1H6v-2.5a.5.5 0 1 1 1 0V17h2.497a.5.5 0 0 1 0 1H7Z",
"warning-outline": "M10.91 2.782a2.25 2.25 0 0 1 2.975.74l.083.138 7.759 14.009a2.25 2.25 0 0 1-1.814 3.334l-.154.006H4.243a2.25 2.25 0 0 1-2.041-3.197l.072-.143L10.031 3.66a2.25 2.25 0 0 1 .878-.878Zm9.505 15.613-7.76-14.008a.75.75 0 0 0-1.254-.088l-.057.088-7.757 14.008a.75.75 0 0 0 .561 1.108l.095.006h15.516a.75.75 0 0 0 .696-1.028l-.04-.086-7.76-14.008 7.76 14.008ZM12 16.002a.999.999 0 1 1 0 1.997.999.999 0 0 1 0-1.997ZM11.995 8.5a.75.75 0 0 1 .744.647l.007.102.004 4.502a.75.75 0 0 1-1.494.103l-.006-.102-.004-4.502a.75.75 0 0 1 .75-.75Z",