Skip to content

Commit 9baffd3

Browse files
bjesterbjester
authored
Merge pull request #5252 from yeshwanth235/issue-5217
[Remove Vuetify from Studio] Invitations in Channels
2 parents 2778563 + 2871380 commit 9baffd3

File tree

5 files changed

+177
-85
lines changed

5 files changed

+177
-85
lines changed

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

Lines changed: 86 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,53 @@
11
<template>
22

33
<div>
4-
<VListTile @click.stop>
5-
<VListTileContent>
6-
<VListTileTitle>{{ invitationText }}</VListTileTitle>
7-
</VListTileContent>
8-
9-
<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>
49-
</template>
50-
</VListTile>
51-
<MessageDialog
52-
v-model="dialog"
53-
:header="$tr('decliningInvitation')"
54-
:text="$tr('decliningInvitationMessage')"
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+
:submitText="$tr('decline')"
41+
:cancelText="$tr('cancel')"
42+
:title="$tr('decliningInvitation')"
43+
data-testid="channel-invitation-modal"
44+
@submit="declineAndClose"
45+
@cancel="close"
5546
>
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>
47+
<template>
48+
{{ $tr('decliningInvitationMessage') }}
7149
</template>
72-
</MessageDialog>
50+
</KModal>
7351
</div>
7452

7553
</template>
@@ -79,13 +57,9 @@
7957
8058
import { mapActions, mapGetters } from 'vuex';
8159
import { InvitationShareModes } from '../../constants';
82-
import MessageDialog from 'shared/views/MessageDialog';
8360
8461
export default {
8562
name: 'ChannelInvitation',
86-
components: {
87-
MessageDialog,
88-
},
8963
props: {
9064
invitationID: {
9165
type: String,
@@ -134,6 +108,9 @@
134108
this.$store.dispatch('showSnackbarSimple', this.$tr('declinedSnackbar'));
135109
});
136110
},
111+
close() {
112+
this.dialog = false;
113+
},
137114
},
138115
$trs: {
139116
editText: '{sender} has invited you to edit {channel}',
@@ -152,7 +129,7 @@
152129
</script>
153130

154131

155-
<style scoped>
132+
<style lang="scss" scoped>
156133
157134
/deep/ .v-list__tile {
158135
height: unset;
@@ -165,4 +142,41 @@
165142
white-space: unset;
166143
}
167144
145+
.invitation {
146+
padding: 16px 16px 0;
147+
font-size: 16px;
148+
list-style: none;
149+
150+
&__main {
151+
display: flex;
152+
align-items: center;
153+
justify-content: space-between;
154+
155+
&--right {
156+
display: flex;
157+
flex-direction: row;
158+
159+
[dir='ltr'] &__btn-one {
160+
margin-right: 15px;
161+
margin-left: 0;
162+
}
163+
164+
[dir='rtl'] &__btn-two,
165+
&__btn-one {
166+
margin-right: 0;
167+
margin-left: 15px;
168+
}
169+
}
170+
}
171+
}
172+
173+
.modal-actions {
174+
display: flex;
175+
justify-content: end;
176+
177+
&__close {
178+
margin-right: 10px;
179+
}
180+
}
181+
168182
</style>

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,13 @@ 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());
47-
await wrapper.find('[data-test="decline-close"]').trigger('click');
48+
await wrapper
49+
.findComponent('[data-testid="channel-invitation-modal"]')
50+
.find('form')
51+
.trigger('submit');
4852
expect(declineInvitation).toHaveBeenCalledWith(invitationID);
4953
});
5054
});

‎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: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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+
37+
&__header {
38+
padding: 16px 16px 0;
39+
}
40+
41+
&__main {
42+
padding-bottom: 18px;
43+
}
44+
}
45+
46+
</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)