Merge pull request #10610 from nextcloud/fix/10282/increase-avatars-i…

…n-call

fix(NcAvatar) increase avatar sizes in call

src/assets/variables.scss

@@ -20,66 +20,14 @@
  *
  */
 
-@use 'sass:math';
-
-// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
-// recommended is 48px
-// 44px is what we choose and have very good visual-to-usability ratio
-$clickable-area: 44px;
-
-// background icon size
-// also used for the scss icon font
-$icon-size: 16px;
-
-// icon padding for a $clickable-area width and a $icon-size icon
-// ( 44px - 16px ) / 2
-$icon-margin: math.div($clickable-area - $icon-size, 2);
-
-// transparency background for icons
-$icon-focus-bg: rgba(127, 127, 127, .25);
-
-// popovermenu arrow width from the triangle center
-$arrow-width: 9px;
-
-// opacities
-$opacity_disabled: .5;
-$opacity_normal: .7;
-$opacity_full: 1;
-
-// menu round background hover feedback
-// good looking on dark AND white bg
-$action-background-hover: rgba(127, 127, 127, .25);
-
-// various structure data used in the
-// `NcAppNavigation` component
-$header-height: 50px;
-$navigation-width: 300px;
-
-// mobile breakpoint
-$breakpoint-mobile: 1024px;
-
 //messages list max width
 $messages-list-max-width: 800px;
 
-//message max width
-$message-max-width: 680px;
-
 //message utils width
 $message-utils-width: 100px;
 
-//message form max height
-$message-form-max-height: 180px;
-
+// background color of call container
 $color-call-background: rgba(34, 34, 34, 0.8);
-$color-guests-avatar: #ffffff;
-$color-background-guests-avatar: #b9b9b9;
-
-
-//chat font size
-$chat-font-size: 15px;
-
-//chat line height
-$chat-line-height: 1.6em;
 
 // transition
 $transition-duration-quick: var(--animation-quick, 100ms);

src/components/AvatarWrapper/AvatarWrapper.spec.js

@@ -49,17 +49,18 @@ describe('AvatarWrapper.vue', () => {
 			expect(avatar.exists()).toBeFalsy()
 		})
 
-		test('component renders NcAvatar with smaller size', () => {
+		test('component renders NcAvatar with specified size', () => {
+			const size = 22
 			const wrapper = shallowMount(AvatarWrapper, {
 				store,
 				propsData: {
 					name: USER_NAME,
-					small: true,
+					size,
 				},
 			})
 
 			const avatar = wrapper.findComponent(NcAvatar)
-			expect(avatar.props('size')).toBe(22)
+			expect(avatar.props('size')).toBe(size)
 		})
 
 		test('component pass props to NcAvatar correctly', async () => {

src/components/AvatarWrapper/AvatarWrapper.vue

@@ -21,18 +21,12 @@
 -->
 
 <template>
-	<div class="avatar-wrapper" :class="avatarClass" :style="{'--condensed-overlap': condensedOverlap}">
-		<div v-if="iconClass"
-			class="icon"
-			:class="[`avatar-${size}px`, iconClass]" />
-		<div v-else-if="isGuest || isDeletedUser"
-			class="guest"
-			:class="`avatar-${size}px`">
+	<div class="avatar-wrapper" :class="avatarClass" :style="avatarStyle">
+		<div v-if="iconClass" class="avatar icon" :class="[iconClass]" />
+		<div v-else-if="isGuest || isDeletedUser" class="avatar guest">
 			{{ firstLetterOfGuestName }}
 		</div>
-		<div v-else-if="isBot"
-			class="bot"
-			:class="`avatar-${size}px`">
+		<div v-else-if="isBot" class="avatar bot">
 			{{ '>_' }}
 		</div>
 		<NcAvatar v-else
@@ -53,7 +47,7 @@
 <script>
 import NcAvatar from '@nextcloud/vue/dist/Components/NcAvatar.js'
 
-import { ATTENDEE } from '../../constants.js'
+import { ATTENDEE, AVATAR } from '../../constants.js'
 
 export default {
 
@@ -76,13 +70,9 @@ export default {
 			type: String,
 			default: null,
 		},
-		small: {
-			type: Boolean,
-			default: false,
-		},
-		medium: {
-			type: Boolean,
-			default: false,
+		size: {
+			type: Number,
+			default: AVATAR.SIZE.DEFAULT,
 		},
 		condensed: {
 			type: Boolean,
@@ -126,9 +116,6 @@ export default {
 		},
 	},
 	computed: {
-		size() {
-			return this.small ? 22 : this.medium ? 32 : 44
-		},
 		// Determines which icon is displayed
 		iconClass() {
 			if (!this.source || this.isUser || this.isBot || this.isGuest || this.isDeletedUser) {
@@ -146,12 +133,16 @@ export default {
 		avatarClass() {
 			return {
 				'avatar-wrapper--offline': this.offline,
-				'avatar-wrapper--small': this.small,
-				'avatar-wrapper--medium': this.medium,
 				'avatar-wrapper--condensed': this.condensed,
 				'avatar-wrapper--highlighted': this.highlighted,
 			}
 		},
+		avatarStyle() {
+			return {
+				'--avatar-size': this.size + 'px',
+				'--condensed-overlap': this.condensedOverlap,
+			}
+		},
 		isUser() {
 			return this.source === 'users' || this.source === ATTENDEE.ACTOR_TYPE.BRIDGED
 		},
@@ -184,26 +175,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/avatar';
-
 .avatar-wrapper {
-	height: 44px;
-	width: 44px;
-	border-radius: 44px;
-	@include avatar-mixin(44px);
-
-	&--small {
-		height: 22px;
-		width: 22px;
-		border-radius: 22px;
-		@include avatar-mixin(22px);
-	}
+	height: var(--avatar-size);
+	width: var(--avatar-size);
+	border-radius: var(--avatar-size);
+
+	.avatar {
+		position: sticky;
+		top: 0;
+		width: var(--avatar-size);
+		height: var(--avatar-size);
+		line-height: var(--avatar-size);
+		font-size: calc(var(--avatar-size) / 2);
+		border-radius: 50%;
+
+		&.icon {
+			background-color: var(--color-background-darker);
+		}
+
+		&.bot {
+			padding-left: 5px;
+			background-color: var(--color-background-darker);
+		}
 
-	&--medium {
-		height: 32px;
-		width: 32px;
-		border-radius: 32px;
-		@include avatar-mixin(32px);
+		&.guest {
+			color: #ffffff;
+			background-color: #b9b9b9;
+			padding: 0;
+			display: block;
+			text-align: center;
+			margin-left: auto;
+			margin-right: auto;
+		}
 	}
 
 	&--condensed {

src/components/CallView/Grid/Grid.vue

@@ -858,8 +858,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../assets/variables';
-
 .grid-main-wrapper {
 	position: relative;
 	width: 100%;