keanu-weblite/src/components/ProfileInfoPopup.vue

<template>
  <v-dialog
    v-model="showDialog"
    content-class="profile-info-popup"
    class="ma-0 pa-0"
    :width="$vuetify.breakpoint.smAndUp ? '940px' : '95%'"
  >
    <v-card flat>
      <v-card-text>
        <div class="you-are">{{ $t("profile_info_popup.you_are") }}</div>
        <v-container fluid>
          <v-row>
            <v-col class="username" cols="pa-2">
              <div v-if="$matrix.currentUser.is_guest">
                <i18n path="profile_info_popup.identity_temporary" tag="span">
                  <template v-slot:displayName>
                    <b>{{ displayName }}</b>
                  </template>
                </i18n>
              </div>
              <div v-else>
                <i18n path="profile_info_popup.identity" tag="span">
                  <template v-slot:displayName>
                    <b>{{ displayName }}</b>
                  </template>
                </i18n>
              </div>
            </v-col>
            <v-col cols="auto" class="pa-2">
              <v-avatar
                class="avatar-32"
                size="32"
                color="#e0e0e0"
                @click.stop="showProfileInfo = true"
              >
                <img v-if="userAvatar" :src="userAvatar" />
                <span v-else class="white--text">{{ userAvatarLetter }}</span>
              </v-avatar>
            </v-col>
          </v-row>
        </v-container>

        <v-container class="mt-4 pa-0">
          <ActionRow
            @click="viewProfile"
            :icon="'account_circle'"
            :text="$t('profile_info_popup.edit_profile')"
          />
          <ActionRow
            @click="logout"
            :icon="'logout'"
            :text="$t('profile_info_popup.logout')"
          />
        </v-container>

        <div class="more-container">
          <div class="want_more">
            🙌 {{ $t("profile_info_popup.want_more") }}
          </div>
          <i18n path="profile_info_popup.powered_by" tag="div">
            <template v-slot:product>{{ product }}</template>
            <template v-slot:productLink>
              <a :href="'//'+productLink">{{ productLink }}</a>
            </template>
          </i18n>
          <div
            style="position: relative; width: 100%; height: 40px"
            class="text-end"
          >
            <v-btn class="new_room" text @click="createRoom">{{
              $t("profile_info_popup.new_room")
            }}</v-btn>
          </div>
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>
<script>
import profileInfoMixin from "./profileInfoMixin";
import ActionRow from "./ActionRow.vue";

export default {
  name: "ProfileInfoPopup",
  mixins: [profileInfoMixin],
  components: {
    ActionRow,
  },
  props: {
    show: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {
      showDialog: false,
    };
  },
  computed: {
    product() {
      return this.$config.appName;
    },
    productLink() {
      return this.$config.productLink;
    },
  },
  watch: {
    show: {
      handler(newVal, ignoredOldVal) {
        this.showDialog = newVal;
      },
    },
    showDialog() {
      if (!this.showDialog) {
        this.$emit("close");
      }
    },
  },

  methods: {
    viewProfile() {
      this.showDialog = false;
      this.$navigation.push({ name: "Profile" }, 1);
    },
    createRoom() {
      this.showDialog = false;
      this.$navigation.push({ name: "CreateRoom" });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/chat.scss";
@import '~vuetify/src/styles/settings/_variables.scss';

.profile-info-popup {
  font-family: "Inter", sans-serif !important;
  font-size: 16px;
  position: fixed;
  margin: 0px;
  top: 70px;
  right: 10px;
  [dir="rtl"] & {
    right: inherit;
    left: 10px;
  }
  border-radius: 40px;
  &::before {
    content: "▲";
    position: fixed;
    top: 57px;
    right: 22px;
    [dir="rtl"] & {
      left: 22px;
      right: inherit;
    }
    color: white;
  }
  .you-are {
    padding-top: 20px;
    font-size: 12px;
  }
  .username {
    border-radius: 4px;
    background-color: #f5f5f5;
  }
  .more-container {
    border-radius: 10px;
    background-color: #f5f5f5;
    padding: 20px;
    .want_more {
      font-family: "Poppins", sans-serif;
      font-weight: 700;
      font-size: 13 * $chat-text-size;
    }
    .new_room .v-btn__content {
      font-family: "Poppins", sans-serif !important;
      font-weight: 700 !important;
      font-size: 13 * $chat-text-size !important;
    }
  }
  @media #{map-get($display-breakpoints, 'lg-and-up')} {
    overflow: unset;
    width: $main-desktop-width;;
    position: absolute;
    top: 70px;
    right: unset;

    &::before {
      position: absolute;
      top: -18px;
      right: 40px;
    }

    .v-card {
      border-radius: 20px;
    }
  }
}
</style>