chore: Refactors chatlist header css to work with RTL (#6520)

authored by 1277421+nithindavid@users.noreply.github.com
This commit is contained in:
Nithin David Thomas
2023-02-23 16:45:56 +05:30
committed by GitHub
parent 8935933266
commit 2674130714
7 changed files with 46 additions and 44 deletions

View File

@@ -1,10 +1,10 @@
<template>
<div v-on-clickaway="closeSearch" class="search-wrap">
<div class="search-header--wrap">
<div class="search-header--wrap" :class="{ 'is-active': showSearchBox }">
<woot-sidemenu-icon v-if="!showSearchBox" />
<div class="search" :class="{ 'is-active': showSearchBox }">
<div class="icon">
<fluent-icon icon="search" class="search--icon" size="28" />
<fluent-icon icon="search" class="search--icon" size="16" />
</div>
<input
v-model="searchTerm"
@@ -12,11 +12,12 @@
:placeholder="$t('CONVERSATION.SEARCH_MESSAGES')"
@focus="onSearch"
/>
<switch-layout
:is-on-expanded-layout="isOnExpandedLayout"
@toggle="$emit('toggle-conversation-layout')"
/>
</div>
<switch-layout
v-if="!showSearchBox"
:is-on-expanded-layout="isOnExpandedLayout"
@toggle="$emit('toggle-conversation-layout')"
/>
</div>
<div v-if="showSearchBox" class="results-wrap">
<div class="show-results">
@@ -162,13 +163,14 @@ export default {
.search-header--wrap {
display: flex;
justify-content: space-between;
align-items: center;
min-height: var(--space-large);
}
.search {
display: flex;
flex: 1;
padding: 0;
padding: 0 var(--space-smaller);
border-bottom: 1px solid transparent;
&:hover {
@@ -193,8 +195,7 @@ export default {
.search--icon {
color: var(--s-600);
font-size: var(--font-size-large);
padding: 0 var(--space-small) 0 0;
margin: 0 var(--space-smaller);
}
.icon {

View File

@@ -1,16 +1,14 @@
<template>
<div>
<woot-button
v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
icon="arrow-right-import"
size="tiny"
variant="smooth"
color-scheme="secondary"
class="layout-switch__container"
:class="{ expanded: isOnExpandedLayout }"
@click="toggle"
/>
</div>
<woot-button
v-tooltip.left="$t('CONVERSATION.SWITCH_VIEW_LAYOUT')"
icon="arrow-right-import"
size="tiny"
variant="smooth"
color-scheme="secondary"
class="layout-switch__container"
:class="{ expanded: isOnExpandedLayout }"
@click="toggle"
/>
</template>
<script>