github/directus
1
0
Fork 0
mirror of https://github.com/directus/directus.git synced 2026-01-27 10:18:06 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix drawer contents overflow (#329)

Browse Source
This commit is contained in:
Rijk van Zanten
2020-04-06 18:21:21 -04:00
committed by GitHub
parent 39311982f7
commit 6a87fbb0c6
5 changed files with 76 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/components/activity-drawer-detail/activity-drawer-detail.vue
View File

@@ -1,69 +1,67 @@
<template>
<div class="activity-drawer-detail">
<drawer-detail title="Comments" icon="mode_comment">
<form @submit.prevent="postComment">
<v-textarea
:placeholder="$t('leave_comment')"
v-model="newCommentContent"
expand-on-focus
>
<template #append>
<v-button
:disabled="!newCommentContent || newCommentContent.length === 0"
:loading="saving"
class="post-comment"
@click="postComment"
x-small
>
{{ $t('submit') }}
</v-button>
</template>
</v-textarea>
</form>
<transition-group name="slide" tag="div">
<div class="activity-record" v-for="act in activity" :key="act.id">
<div class="activity-header">
<v-avatar small>
<v-icon name="person_outline" />
</v-avatar>
<div class="name">
<template v-if="act.action_by && act.action_by">
{{ act.action_by.first_name }} {{ act.action_by.last_name }}
</template>
<template v-else-if="act.action.by && action.action_by">
{{ $t('private_user') }}
</template>
<template v-else>
{{ $t('external') }}
</template>
</div>
<div class="date" v-tooltip.start="new Date(act.action_on)">
{{ act.date_relative }}
</div>
<drawer-detail title="Comments" icon="mode_comment">
<form @submit.prevent="postComment">
<v-textarea
:placeholder="$t('leave_comment')"
v-model="newCommentContent"
expand-on-focus
>
<template #append>
<v-button
:disabled="!newCommentContent || newCommentContent.length === 0"
:loading="saving"
class="post-comment"
@click="postComment"
x-small
>
{{ $t('submit') }}
</v-button>
</template>
</v-textarea>
</form>
<transition-group name="slide" tag="div">
<div class="activity-record" v-for="act in activity" :key="act.id">
<div class="activity-header">
<v-avatar small>
<v-icon name="person_outline" />
</v-avatar>
<div class="name">
<template v-if="act.action_by && act.action_by">
{{ act.action_by.first_name }} {{ act.action_by.last_name }}
</template>
<template v-else-if="act.action.by && action.action_by">
{{ $t('private_user') }}
</template>
<template v-else>
{{ $t('external') }}
</template>
</div>
<div class="content">
<template v-if="act.comment">
<span v-html="marked(act.comment)" />
</template>
<template v-else-if="act.action === 'create'">
{{ $t('activity_delta_created') }}
</template>
<template v-else-if="act.action === 'update'">
{{ $t('activity_delta_updated') }}
</template>
<template v-else-if="act.action === 'delete'">
{{ $t('activity_delta_deleted') }}
</template>
<div class="date" v-tooltip.start="new Date(act.action_on)">
{{ act.date_relative }}
</div>
</div>
</transition-group>
<div class="activity-record">
<div class="content">{{ $t('activity_delta_created_externally') }}</div>
<div class="content">
<template v-if="act.comment">
<span v-html="marked(act.comment)" />
</template>
<template v-else-if="act.action === 'create'">
{{ $t('activity_delta_created') }}
</template>
<template v-else-if="act.action === 'update'">
{{ $t('activity_delta_updated') }}
</template>
<template v-else-if="act.action === 'delete'">
{{ $t('activity_delta_deleted') }}
</template>
</div>
</div>
</drawer-detail>
</div>
</transition-group>
<div class="activity-record">
<div class="content">{{ $t('activity_delta_created_externally') }}</div>
</div>
</drawer-detail>
</template>
<script lang="ts">

1
src/views/private/components/drawer-button/drawer-button.vue
View File

@@ -43,6 +43,7 @@ export default defineComponent({
<style lang="scss" scoped>
.drawer-button {
position: relative;
flex-shrink: 0;
width: 100%;
height: 64px;
color: var(--foreground-normal);

6
src/views/private/components/drawer-detail-group/drawer-detail-group.vue
View File

@@ -33,3 +33,9 @@ export default defineComponent({
},
});
</script>
<style lang="scss" scoped>
.drawer-detail-group {
display: contents;
}
</style>

11
src/views/private/components/drawer-detail/drawer-detail.vue
View File

@@ -8,7 +8,7 @@
{{ title }}
</div>
</button>
<transition-expand>
<transition-expand class="scroll-container">
<div v-show="active">
<div class="content">
<slot />
@@ -43,8 +43,11 @@ export default defineComponent({
<style lang="scss" scoped>
.drawer-detail {
display: contents;
.toggle {
position: relative;
flex-shrink: 0;
width: 100%;
height: 64px;
color: var(--foreground-normal);
@@ -76,6 +79,12 @@ export default defineComponent({
transform: translateY(-50%);
}
.scroll-container {
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto;
}
.content {
padding: 12px;
}

1
src/views/private/private-view.vue
View File

@@ -212,6 +212,7 @@ export default defineComponent({
flex-direction: column;
width: 284px;
height: 100%;
overflow: hidden;
background-color: var(--background-normal);
transform: translateX(100%);
transition: transform var(--slow) var(--transition);