Skip to content

Commit

Permalink
Better animation
Browse files Browse the repository at this point in the history 
Signed-off-by: DorraJaouad <[email protected]>
  • Loading branch information
@DorraJaouad
DorraJaouad committed Jul 28, 2023
1 parent 80030a4 commit 64a2be1
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 97 deletions.
144 changes: 83 additions & 61 deletions src/components/LeftSidebar/LeftSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,71 +35,73 @@
@abort-search="abortSearch" />
</div>

<!-- Filters -->
<div class="filters"
:class="{'hidden-visually': isFocused}">
<NcActions class="filter-actions"
:primary="isFiltered !== null">
<template #icon>
<FilterIcon :size="15" />
</template>
<NcActionButton close-after-click
class="filter-actions__button"
:class="{'filter-actions__button--active': isFiltered === 'mentions'}"
@click="handleFilter('mentions')">
<template #icon>
<AtIcon :size="20" />
</template>
{{ t('spreed','Filter unread mentions') }}
</NcActionButton>

<NcActionButton close-after-click
class="filter-actions__button"
:class="{'filter-actions__button--active': isFiltered === 'unread'}"
@click="handleFilter('unread')">
<template #icon>
<MessageBadge :size="20" />
</template>
{{ t('spreed','Filter unread messages') }}
</NcActionButton>

<NcActionButton v-if="isFiltered"
close-after-click
class="filter-actions__clearbutton"
@click="handleFilter(null)">
<template #icon>
<FilterRemoveIcon :size="20" />
</template>
{{ t('spreed', 'Clear filters') }}
</NcActionButton>
</NcActions>
</div>

<!-- Actions -->
<div class="actions"
:class="{'hidden-visually': isFocused}">
<NcActions class="conversations-actions">
<template #icon>
<DotsVertical :size="20" />
</template>
<NcActionButton v-if="canStartConversations"
close-after-click
@click="showModalNewConversation">
<transition-group name="radial-reveal">
<!-- Filters -->
<div v-show="!isFocused" key="filters" class="filters">
<NcActions class="filter-actions"
:primary="isFiltered !== null">
<template #icon>
<Plus :size="20" />
<FilterIcon :size="15" />
</template>
{{ t('spreed','Create a new conversation') }}
</NcActionButton>
<NcActionButton close-after-click
class="filter-actions__button"
:class="{'filter-actions__button--active': isFiltered === 'mentions'}"
@click="handleFilter('mentions')">
<template #icon>
<AtIcon :size="20" />
</template>
{{ t('spreed','Filter unread mentions') }}
</NcActionButton>

<NcActionButton close-after-click
class="filter-actions__button"
:class="{'filter-actions__button--active': isFiltered === 'unread'}"
@click="handleFilter('unread')">
<template #icon>
<MessageBadge :size="20" />
</template>
{{ t('spreed','Filter unread messages') }}
</NcActionButton>

<NcActionButton v-if="isFiltered"
close-after-click
class="filter-actions__clearbutton"
@click="handleFilter(null)">
<template #icon>
<FilterRemoveIcon :size="20" />
</template>
{{ t('spreed', 'Clear filters') }}
</NcActionButton>
</NcActions>
</div>

<NcActionButton close-after-click
@click="showModalListConversations">
<!-- Actions -->
<div v-show="!isFocused"
key="actions"
class="actions">
<NcActions class="conversations-actions">
<template #icon>
<List :size="20" />
<DotsVertical :size="20" />
</template>
{{ t('spreed','Join open conversations') }}
</NcActionButton>
</NcActions>
</div>
<NcActionButton v-if="canStartConversations"
close-after-click
@click="showModalNewConversation">
<template #icon>
<Plus :size="20" />
</template>
{{ t('spreed','Create a new conversation') }}
</NcActionButton>

<NcActionButton close-after-click
@click="showModalListConversations">
<template #icon>
<List :size="20" />
</template>
{{ t('spreed','Join open conversations') }}
</NcActionButton>
</NcActions>
</div>
</transition-group>

<!-- All open conversations list -->
<OpenConversationsList ref="openConversationsList" />
Expand Down Expand Up @@ -809,7 +811,7 @@ export default {
}
.conversations-search {
transition: all 0.3s ease;
transition: all 0.15s ease;
z-index: 1;
// New conversation button width : 52 px
// Filters button width : 44 px
Expand All @@ -830,13 +832,15 @@ export default {
.filters {
position: absolute;
right : 52px; // New conversation button's width
top : 5px;
display: flex;
height: var(--default-clickable-area);
}
.actions {
position: absolute;
right: 5px;
top : 5px;
}
.filter-actions__button--active {
Expand All @@ -852,6 +856,24 @@ export default {
justify-content: flex-start !important;
}
.radial-reveal-enter-active {
animation: radial-reveal 0.15s forwards;
}
@keyframes radial-reveal {
0% {
transform: scale(0); /* Start as a point */
opacity: 0;
}
100% {
transform: scale(1); /* Expand to full size */
opacity: 1;
}
}
:deep(.input-field__clear-button) {
border-radius: var(--border-radius-pill) !important;
}
:deep(.app-navigation ul) {
padding: 0 !important;
}
Expand Down
37 changes: 1 addition & 36 deletions src/components/LeftSidebar/SearchBox/SearchBox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
:show-trailing-button="isFocused"
trailing-button-icon="close"
v-on="listeners"
@focus="handleFocus"
@blur="handleBlur"
@update:value="updateValue"
@trailing-button-click="abortSearch"
Expand Down Expand Up @@ -118,41 +117,6 @@ export default {
*/
abortSearch() {
this.$emit('abort-search')
this.focus()
},
handleFocus(event) {
this.$emit('focus', event)
},
handleBlur(event) {
console.log('inner blur')
if (Array.from(event.relatedTarget.classList).includes('input-field__clear-button')) {
event.preventDefault()
this.$refs.searchConversations.$el.querySelector('.input-field__clear-button').addEventListener('blur', (event) => {
console.log('trailing blur')
console.log(event)
// check if focus goes back to native input or outside, and proceed accordingly
})
} else {
this.$emit('blur', event)
}
},
handleFocus(event) {
this.$emit('focus', event)
},
handleBlur(event) {
console.log('inner blur')
if (Array.from(event.relatedTarget.classList).includes('input-field__clear-button')) {
event.preventDefault()
this.$refs.searchConversations.$el.querySelector('.input-field__clear-button').addEventListener('blur', (event) => {
console.log('trailing blur')
console.log(event)
// check if focus goes back to native input or outside, and proceed accordingly
})
} else {
this.$emit('blur', event)
}
},
handleBlur(event) {
Expand All @@ -165,6 +129,7 @@ export default {
this.$emit('blur', event)
}
},
},
}
</script>
Expand Down

0 comments on commit 64a2be1

Please sign in to comment.