Skip to content

Commit f5b2f75

Browse files
yeshwanth235yeshwanth235
committed
Removed vuetify components in Invitations in Channels
1 parent 294f4b8 commit f5b2f75

File tree

5 files changed

+177
-79
lines changed

5 files changed

+177
-79
lines changed

‎contentcuration/contentcuration/frontend/channelList/views/Channel/ChannelInvitation.vue‎

Lines changed: 91 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,65 @@
11
<template>
22

33
<div>
4-
<VListTile @click.stop>
5-
<VListTileContent>
6-
<VListTileTitle>{{ invitationText }}</VListTileTitle>
7-
</VListTileContent>
8-
4+
<li class="invitation">
5+
<div class="invitation__main">
6+
<div class="invitation__main--left">
7+
{{ invitationText }}
8+
</div>
9+
<div class="invitation__main--right">
10+
<div class="invitation__main--right__btn-one">
11+
<KIconButton
12+
:tooltip="$tr('accept')"
13+
text="Flat button"
14+
:primary="true"
15+
icon="check"
16+
:color="$themePalette.green.v_600"
17+
data-test="accept"
18+
appearance="flat-button"
19+
@click="accept"
20+
/>
21+
</div>
22+
<div class="invitation__main--right__btn-two">
23+
<KIconButton
24+
:tooltip="$tr('decline')"
25+
text="Flat button"
26+
:primary="true"
27+
icon="close"
28+
:color="$themePalette.red.v_500"
29+
data-test="decline"
30+
appearance="flat-button"
31+
@click="dialog = true"
32+
/>
33+
</div>
34+
</div>
35+
</div>
36+
</li>
37+
<KModal
38+
v-if="dialog"
39+
size="small"
40+
:title="$tr('decliningInvitation')"
41+
>
942
<template>
10-
<VListTileAction>
11-
<VTooltip
12-
bottom
13-
lazy
14-
>
15-
<template #activator="{ on }">
16-
<VBtn
17-
icon
18-
data-test="accept"
19-
v-on="on"
20-
@click="accept"
21-
>
22-
<Icon icon="done" />
23-
</VBtn>
24-
</template>
25-
<span>{{ $tr('accept') }}</span>
26-
</VTooltip>
27-
</VListTileAction>
28-
<VListTileAction>
29-
<VTooltip
30-
bottom
31-
lazy
32-
>
33-
<template #activator="{ on }">
34-
<VBtn
35-
icon
36-
data-test="decline"
37-
v-on="on"
38-
@click="dialog = true"
39-
>
40-
<Icon
41-
color="red"
42-
icon="clear"
43-
/>
44-
</VBtn>
45-
</template>
46-
<span>{{ $tr('decline') }}</span>
47-
</VTooltip>
48-
</VListTileAction>
43+
{{ $tr('decliningInvitationMessage') }}
4944
</template>
50-
</VListTile>
51-
<MessageDialog
52-
v-model="dialog"
53-
:header="$tr('decliningInvitation')"
54-
:text="$tr('decliningInvitationMessage')"
55-
>
56-
<template #buttons="{ close }">
57-
<VSpacer />
58-
<VBtn
59-
flat
60-
@click="close"
61-
>
62-
{{ $tr('cancel') }}
63-
</VBtn>
64-
<VBtn
65-
data-test="decline-close"
66-
color="primary"
67-
@click="declineAndClose"
68-
>
69-
{{ $tr('decline') }}
70-
</VBtn>
45+
<template #actions>
46+
<div class="modal-actions">
47+
<div class="modal-actions__close">
48+
<KButton @click="close">{{ $tr('cancel') }} </KButton>
49+
</div>
50+
<div class="modal-actions__decline">
51+
<KButton
52+
:primary="true"
53+
appearance="raised-button"
54+
data-test="decline-close"
55+
@click="declineAndClose"
56+
>
57+
{{ $tr('decline') }}
58+
</KButton>
59+
</div>
60+
</div>
7161
</template>
72-
</MessageDialog>
62+
</KModal>
7363
</div>
7464

7565
</template>
@@ -134,6 +124,9 @@
134124
this.$store.dispatch('showSnackbarSimple', this.$tr('declinedSnackbar'));
135125
});
136126
},
127+
close() {
128+
this.dialog = false;
129+
},
137130
},
138131
$trs: {
139132
editText: '{sender} has invited you to edit {channel}',
@@ -152,7 +145,7 @@
152145
</script>
153146

154147

155-
<style scoped>
148+
<style lang="scss" scoped>
156149
157150
/deep/ .v-list__tile {
158151
height: unset;
@@ -165,4 +158,35 @@
165158
white-space: unset;
166159
}
167160
161+
.invitation {
162+
list-style: none;
163+
font-size: 16px;
164+
padding: 16px 16px 0 16px;
165+
&__main{
166+
display: flex;
167+
align-items: center;
168+
justify-content: space-between;
169+
&--right {
170+
display: flex;
171+
flex-direction: row;
172+
[dir='ltr'] &__btn-one {
173+
margin-right: 15px;
174+
margin-left: 0;
175+
}
176+
[dir='rtl'] &__btn-two, &__btn-one {
177+
margin-right: 0;
178+
margin-left: 15px;
179+
}
180+
}
181+
}
182+
}
183+
184+
.modal-actions {
185+
display: flex;
186+
justify-content: end;
187+
&__close {
188+
margin-right: 10px;
189+
}
190+
}
191+
168192
</style>

‎contentcuration/contentcuration/frontend/channelList/views/Channel/__tests__/channelInvitation.spec.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ describe('channelInvitation', () => {
4242
});
4343

4444
it('clicking on the decline button should decline the invitation', async () => {
45+
await wrapper.find('[data-test="decline"]').trigger('click');
4546
const declineInvitation = jest.spyOn(wrapper.vm, 'declineInvitation');
4647
declineInvitation.mockImplementation(() => Promise.resolve());
4748
await wrapper.find('[data-test="decline-close"]').trigger('click');

‎contentcuration/contentcuration/frontend/channelList/views/ChannelListIndex.vue‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -88,21 +88,23 @@
8888
md8
8989
lg6
9090
>
91-
<VCard
91+
<StudioRaisedBox
9292
v-if="invitationList.length"
9393
v-show="isChannelList"
9494
>
95-
<VList subheader>
96-
<VSubheader>
97-
{{ $tr('invitations', { count: invitationList.length }) }}
98-
</VSubheader>
99-
<ChannelInvitation
100-
v-for="invitation in invitationList"
101-
:key="invitation.id"
102-
:invitationID="invitation.id"
103-
/>
104-
</VList>
105-
</VCard>
95+
<template #header>
96+
{{ $tr('invitations', { count: invitationList.length }) }}
97+
</template>
98+
<template #main>
99+
<ul class="invitation-list">
100+
<ChannelInvitation
101+
v-for="invitation in invitationList"
102+
:key="invitation.id"
103+
:invitationID="invitation.id"
104+
/>
105+
</ul>
106+
</template>
107+
</StudioRaisedBox>
106108
</VFlex>
107109
</VLayout>
108110
<ChannelListAppError
@@ -131,6 +133,7 @@
131133
} from '../constants';
132134
import ChannelListAppError from './ChannelListAppError';
133135
import ChannelInvitation from './Channel/ChannelInvitation';
136+
import StudioRaisedBox from 'shared/views/StudioRaisedBox.vue';
134137
import { ChannelListTypes } from 'shared/constants';
135138
import { constantsTranslationMixin, routerMixin } from 'shared/mixins';
136139
import GlobalSnackbar from 'shared/views/GlobalSnackbar';
@@ -162,6 +165,7 @@
162165
GlobalSnackbar,
163166
PolicyModals,
164167
OfflineText,
168+
StudioRaisedBox
165169
},
166170
mixins: [constantsTranslationMixin, routerMixin],
167171
computed: {
@@ -337,4 +341,8 @@
337341
overflow: auto;
338342
}
339343
344+
.invitation-list {
345+
padding: 0;
346+
}
347+
340348
</style>

‎contentcuration/contentcuration/frontend/shared/views/StudioRaisedBox.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
3+
<div
4+
class="studio-raised-box"
5+
:style="{ backgroundColor: $themeTokens.surface }"
6+
>
7+
<div
8+
class="studio-raised-box__header"
9+
:style="{ color: $themeTokens.annotation }"
10+
>
11+
<slot name="header"></slot>
12+
</div>
13+
<div class="studio-raised-box__main">
14+
<slot name="main"></slot>
15+
</div>
16+
</div>
17+
18+
</template>
19+
20+
21+
<script>
22+
23+
export default {
24+
name: 'StudioRaisedBox'
25+
}
26+
27+
</script>
28+
29+
30+
<style lang="scss" scoped>
31+
32+
@import '~kolibri-design-system/lib/styles/definitions';
33+
34+
.studio-raised-box {
35+
@extend %dropshadow-2dp;
36+
&__header {
37+
padding: 16px 16px 0 16px;
38+
}
39+
&__main {
40+
padding-bottom: 18px;
41+
}
42+
43+
}
44+
45+
</style>

‎contentcuration/contentcuration/frontend/shared/views/__tests__/StudioRaisedBox.spec.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { render, screen } from '@testing-library/vue';
2+
import VueRouter from 'vue-router';
3+
import StudioRaisedBox from '../StudioRaisedBox.vue';
4+
5+
describe('StudioRaisedBox', () => {
6+
test('renders both header and main slots', () => {
7+
const headerContent = 'Header Title';
8+
const mainContent = 'Main content area';
9+
render(StudioRaisedBox, {
10+
props: {},
11+
routes: new VueRouter(),
12+
slots: {
13+
header: headerContent,
14+
main: mainContent,
15+
},
16+
});
17+
expect(screen.getByText(headerContent)).toBeInTheDocument();
18+
expect(screen.getByText(mainContent)).toBeInTheDocument();
19+
});
20+
});

0 commit comments

Comments
 (0)