butter/keanu-weblite
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Basic support for RTL languages

Browse source 
Issue #77.
This commit is contained in:
N-Pex 2021-06-29 11:55:53 +02:00
parent 2112448ae9
commit eb6f02b3d4
10 changed files with 283 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/components/ChatHeader.vue
View file

@ -2,58 +2,77 @@
<v-container fluid v-if="room">
<v-row class="chat-header-row flex-nowrap">
<v-col
cols="auto"
cols="auto"
class="chat-header-members text-start ma-0 pa-0"
style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked"
style="overflow: hidden; cursor: pointer"
@click.stop="onHeaderClicked"
>
<v-avatar size="40" class="mr-2">
<v-avatar size="40" class="me-2">
<v-img :src="room.avatar" />
</v-avatar>
</v-col>
<v-col class="ma-0 pa-0 flex-shrink-1 flex-nowrap" style="overflow:hidden;cursor:pointer" @click.stop="onHeaderClicked">
<div class="d-flex flex-nowrap room-name-inline">{{ room.summary.info.title }} <!--<v-icon>expand_more</v-icon>--></div>
<div class="num-members">{{ $tc('room.members', memberCount) }}</div>
<v-col
class="ma-0 pa-0 flex-shrink-1 flex-nowrap"
style="overflow: hidden; cursor: pointer"
@click.stop="onHeaderClicked"
>
<div class="d-flex flex-nowrap room-name-inline">
{{ room.summary.info.title }}
<!--<v-icon>expand_more</v-icon>-->
</div>
<div class="num-members">{{ $tc("room.members", memberCount) }}</div>
</v-col>
<v-col cols="auto" class="text-end ma-0 pa-0">
<v-btn text class="leave-button" @click.stop="leaveRoom">{{$t('room.leave')}}</v-btn>
<v-btn text class="leave-button" @click.stop="leaveRoom">{{
$t("room.leave")
}}</v-btn>
</v-col>
<v-col cols="auto" class="text-end ma-0 pa-0 ml-2">
<v-avatar class="avatar-32 clickable" size="32" color="#e0e0e0" @click.stop="showProfileInfo = true">
<v-col cols="auto" class="text-end ma-0 pa-0 ms-2">
<v-avatar
class="avatar-32 clickable"
size="32"
color="#e0e0e0"
@click.stop="showProfileInfo = true"
>
<img v-if="userAvatar" :src="userAvatar" />
<span v-else class="white--text">{{
userAvatarLetter
}}</span>
</v-avatar>
<span v-else class="white--text">{{ userAvatarLetter }}</span>
</v-avatar>
</v-col>
</v-row>
<!-- "REALLY LEAVE?" dialog -->
<LeaveRoomDialog :show="showLeaveConfirmation" :room="room" @close="showLeaveConfirmation = false" />
<LeaveRoomDialog
:show="showLeaveConfirmation"
:room="room"
@close="showLeaveConfirmation = false"
/>
<!-- PROFILE INFO POPUP -->
<ProfileInfoPopup :show="showProfileInfo" @close="showProfileInfo = false" />
<ProfileInfoPopup
:show="showProfileInfo"
@close="showProfileInfo = false"
/>
</v-container>
</template>
<script>
import LeaveRoomDialog from '../components/LeaveRoomDialog';
import ProfileInfoPopup from '../components/ProfileInfoPopup';
import profileInfoMixin from '../components/profileInfoMixin';
import LeaveRoomDialog from "../components/LeaveRoomDialog";
import ProfileInfoPopup from "../components/ProfileInfoPopup";
import profileInfoMixin from "../components/profileInfoMixin";
export default {
name: "ChatHeader",
mixins: [profileInfoMixin],
components: {
LeaveRoomDialog,
ProfileInfoPopup
ProfileInfoPopup,
},
data() {
return {
memberCount: null,
showLeaveConfirmation: false,
showProfileInfo: false
showProfileInfo: false,
};
},
mounted() {
@ -92,9 +111,9 @@ export default {
this.updateMemberCount();
}
},
onHeaderClicked() {
this.$emit("header-click", {event: this.event});
this.$emit("header-click", { event: this.event });
},
updateMemberCount() {