logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

user_card.vue (11479B)

    

  1. <template>
  2.   <div
  3.     class="user-card"
  4.     :class="classes"
  5.   >
  6.     <div
  7.       :class="{ 'hide-bio': hideBio }"
  8.       :style="style"
  9.       class="background-image"
  10.     />
  11.     <div :class="onClose ? '' : panel-heading -flexible-height">
  12.       <div class="user-info">
  13.         <div class="container">
  14.           <a
  15.             v-if="avatarAction === 'zoom'"
  16.             class="user-info-avatar -link"
  17.             @click="zoomAvatar"
  18.           >
  19.             <UserAvatar
  20.               :better-shadow="betterShadow"
  21.               :user="user"
  22.             />
  23.             <div class="user-info-avatar -link -overlay">
  24.               <FAIcon
  25.                 class="fa-scale-110 fa-old-padding"
  26.                 icon="search-plus"
  27.               />
  28.             </div>
  29.           </a>
  30.           <UserAvatar
  31.             v-else-if="typeof avatarAction === 'function'"
  32.             class="user-info-avatar"
  33.             :better-shadow="betterShadow"
  34.             :user="user"
  35.             @click="avatarAction"
  36.           />
  37.           <router-link
  38.             v-else
  39.             :to="userProfileLink(user)"
  40.           >
  41.             <UserAvatar
  42.               :better-shadow="betterShadow"
  43.               :user="user"
  44.             />
  45.           </router-link>
  46.           <div class="user-summary">
  47.             <div class="top-line">
  48.               <router-link
  49.                 :to="userProfileLink(user)"
  50.                 class="user-name"
  51.               >
  52.                 <RichContent
  53.                   :title="user.name"
  54.                   :html="user.name"
  55.                   :emoji="user.emoji"
  56.                 />
  57.               </router-link>
  58.               <button
  59.                 v-if="!isOtherUser && user.is_local"
  60.                 class="button-unstyled edit-profile-button"
  61.                 @click.stop="openProfileTab"
  62.               >
  63.                 <FAIcon
  64.                   fixed-width
  65.                   class="icon"
  66.                   icon="edit"
  67.                   :title="$t('user_card.edit_profile')"
  68.                 />
  69.               </button>
  70.               <a
  71.                 v-if="isOtherUser && !user.is_local"
  72.                 :href="user.statusnet_profile_url"
  73.                 target="_blank"
  74.                 class="button-unstyled external-link-button"
  75.               >
  76.                 <FAIcon
  77.                   class="icon"
  78.                   icon="external-link-alt"
  79.                 />
  80.               </a>
  81.               <AccountActions
  82.                 v-if="isOtherUser && loggedIn"
  83.                 :user="user"
  84.                 :relationship="relationship"
  85.               />
  86.               <router-link
  87.                 v-if="onClose"
  88.                 :to="userProfileLink(user)"
  89.                 class="button-unstyled external-link-button"
  90.                 @click="onClose"
  91.               >
  92.                 <FAIcon
  93.                   class="icon"
  94.                   icon="expand-alt"
  95.                 />
  96.               </router-link>
  97.               <button
  98.                 v-if="onClose"
  99.                 class="button-unstyled external-link-button"
  100.                 @click="onClose"
  101.               >
  102.                 <FAIcon
  103.                   class="icon"
  104.                   icon="times"
  105.                 />
  106.               </button>
  107.             </div>
  108.             <div class="bottom-line">
  109.               <user-link
  110.                 class="user-screen-name"
  111.                 :user="user"
  112.               />
  113.               <template v-if="!hideBio">
  114.                 <span
  115.                   v-if="user.deactivated"
  116.                   class="alert neutral user-role"
  117.                 >
  118.                   {{ $t('user_card.deactivated') }}
  119.                 </span>
  120.                 <span
  121.                   v-if="!!visibleRole"
  122.                   class="alert neutral user-role"
  123.                 >
  124.                   {{ $t(`general.role.${visibleRole}`) }}
  125.                 </span>
  126.                 <span
  127.                   v-if="user.actor_type === 'Service'"
  128.                   class="alert neutral user-role"
  129.                 >
  130.                   {{ $t('user_card.bot') }}
  131.                 </span>
  132.                 <span
  133.                   v-if="user.actor_type === 'Group'"
  134.                   class="alert user-role"
  135.                 >
  136.                   {{ $t('user_card.group') }}
  137.                 </span>
  138.               </template>
  139.               <span v-if="user.locked">
  140.                 <FAIcon
  141.                   class="lock-icon"
  142.                   icon="lock"
  143.                   size="sm"
  144.                 />
  145.               </span>
  146.               <span
  147.                 v-if="!mergedConfig.hideUserStats && !hideBio"
  148.                 class="dailyAvg"
  149.               >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
  150.             </div>
  151.           </div>
  152.         </div>
  153.         <div class="user-meta">
  154.           <div
  155.             v-if="relationship.followed_by && loggedIn && isOtherUser"
  156.             class="following"
  157.           >
  158.             {{ $t('user_card.follows_you') }}
  159.           </div>
  160.           <div
  161.             v-if="isOtherUser && (loggedIn || !switcher)"
  162.             class="highlighter"
  163.           >
  164.             <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
  165.             <input
  166.               v-if="userHighlightType !== 'disabled'"
  167.               :id="'userHighlightColorTx'+user.id"
  168.               v-model="userHighlightColor"
  169.               class="input userHighlightText"
  170.               type="text"
  171.             >
  172.             <input
  173.               v-if="userHighlightType !== 'disabled'"
  174.               :id="'userHighlightColor'+user.id"
  175.               v-model="userHighlightColor"
  176.               class="input userHighlightCl"
  177.               type="color"
  178.             >
  179.             {{ ' ' }}
  180.             <Select
  181.               :id="'userHighlightSel'+user.id"
  182.               v-model="userHighlightType"
  183.               class="userHighlightSel"
  184.             >
  185.               <option value="disabled">
  186.                 {{ $t('user_card.highlight.disabled') }}
  187.               </option>
  188.               <option value="solid">
  189.                 {{ $t('user_card.highlight.solid') }}
  190.               </option>
  191.               <option value="striped">
  192.                 {{ $t('user_card.highlight.striped') }}
  193.               </option>
  194.               <option value="side">
  195.                 {{ $t('user_card.highlight.side') }}
  196.               </option>
  197.             </Select>
  198.           </div>
  199.         </div>
  200.         <div
  201.           v-if="loggedIn && isOtherUser"
  202.           class="user-interactions"
  203.         >
  204.           <div class="btn-group">
  205.             <FollowButton
  206.               :relationship="relationship"
  207.               :user="user"
  208.             />
  209.             <template v-if="relationship.following">
  210.               <ProgressButton
  211.                 v-if="!relationship.subscribing"
  212.                 class="btn button-default"
  213.                 :click="subscribeUser"
  214.                 :title="$t('user_card.subscribe')"
  215.               >
  216.                 <FAIcon icon="bell" />
  217.               </ProgressButton>
  218.               <ProgressButton
  219.                 v-else
  220.                 class="btn button-default toggled"
  221.                 :click="unsubscribeUser"
  222.                 :title="$t('user_card.unsubscribe')"
  223.               >
  224.                 <FALayers>
  225.                   <FAIcon
  226.                     icon="rss"
  227.                     transform="left-5 shrink-6 up-3 rotate-20"
  228.                     flip="horizontal"
  229.                   />
  230.                   <FAIcon
  231.                     icon="rss"
  232.                     transform="right-5 shrink-6 up-3 rotate-20"
  233.                   />
  234.                   <FAIcon icon="bell" />
  235.                 </FALayers>
  236.               </ProgressButton>
  237.             </template>
  238.           </div>
  239.           <div>
  240.             <button
  241.               v-if="relationship.muting"
  242.               class="btn button-default btn-block toggled"
  243.               :disabled="user.deactivated"
  244.               @click="unmuteUser"
  245.             >
  246.               {{ $t('user_card.muted') }}
  247.             </button>
  248.             <button
  249.               v-else
  250.               class="btn button-default btn-block"
  251.               :disabled="user.deactivated"
  252.               @click="muteUser"
  253.             >
  254.               {{ $t('user_card.mute') }}
  255.             </button>
  256.           </div>
  257.           <div>
  258.             <button
  259.               class="btn button-default btn-block"
  260.               :disabled="user.deactivated"
  261.               @click="mentionUser"
  262.             >
  263.               {{ $t('user_card.mention') }}
  264.             </button>
  265.           </div>
  266.           <ModerationTools
  267.             v-if="showModerationMenu"
  268.             :user="user"
  269.           />
  270.         </div>
  271.         <div
  272.           v-if="!loggedIn && user.is_local"
  273.           class="user-interactions"
  274.         >
  275.           <RemoteFollow :user="user" />
  276.         </div>
  277.         <UserNote
  278.           v-if="loggedIn && isOtherUser && (hasNote || (hasNoteEditor && supportsNote))"
  279.           :user="user"
  280.           :relationship="relationship"
  281.           :editable="hasNoteEditor"
  282.         />
  283.       </div>
  284.     </div>
  285.     <div v-if="!hideBio">
  286.       <div
  287.         v-if="!mergedConfig.hideUserStats && switcher"
  288.         class="user-counts"
  289.       >
  290.         <div
  291.           class="user-count"
  292.           @click.prevent="setProfileView('statuses')"
  293.         >
  294.           <h5>{{ $t('user_card.statuses') }}</h5>
  295.           <span>{{ user.statuses_count }} <br></span>
  296.         </div>
  297.         <div
  298.           class="user-count"
  299.           @click.prevent="setProfileView('friends')"
  300.         >
  301.           <h5>{{ $t('user_card.followees') }}</h5>
  302.           <span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
  303.         </div>
  304.         <div
  305.           class="user-count"
  306.           @click.prevent="setProfileView('followers')"
  307.         >
  308.           <h5>{{ $t('user_card.followers') }}</h5>
  309.           <span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
  310.         </div>
  311.       </div>
  312.       <RichContent
  313.         v-if="!hideBio"
  314.         class="user-card-bio"
  315.         :html="user.description_html"
  316.         :emoji="user.emoji"
  317.         :handle-links="true"
  318.       />
  319.     </div>
  320.     <teleport to="#modal">
  321.       <confirm-modal
  322.         v-if="showingConfirmMute"
  323.         :title="$t('user_card.mute_confirm_title')"
  324.         :confirm-text="$t('user_card.mute_confirm_accept_button')"
  325.         :cancel-text="$t('user_card.mute_confirm_cancel_button')"
  326.         @accepted="doMuteUser"
  327.         @cancelled="hideConfirmMute"
  328.       >
  329.         <i18n-t
  330.           keypath="user_card.mute_confirm"
  331.           tag="div"
  332.         >
  333.           <template #user>
  334.             <span
  335.               v-text="user.screen_name_ui"
  336.             />
  337.           </template>
  338.         </i18n-t>
  339.         <div
  340.           class="mute-expiry"
  341.         >
  342.           <label>
  343.             {{ $t('user_card.mute_duration_prompt') }}
  344.           </label>
  345.           <input
  346.             v-model="muteExpiryAmount"
  347.             type="number"
  348.             class="expiry-amount hide-number-spinner"
  349.             :min="0"
  350.           >
  351.           <Select
  352.             v-model="muteExpiryUnit"
  353.             unstyled="true"
  354.             class="expiry-unit"
  355.           >
  356.             <option
  357.               v-for="unit in muteExpiryUnits"
  358.               :key="unit"
  359.               :value="unit"
  360.             >
  361.               {{ $t(`time.${unit}_short`, ['']) }}
  362.             </option>
  363.           </Select>
  364.         </div>
  365.       </confirm-modal>
  366.     </teleport>
  367.   </div>
  368. </template>
  370. <script src="./user_card.js"></script>
  372. <style lang="scss" src="./user_card.scss" />