logo

pleroma-fe

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

conversation.vue (11074B)

    

  1. <template>
  2.   <div
  3.     v-if="!hideStatus"
  4.     :style="hiddenStyle"
  5.     class="Conversation"
  6.     :class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
  7.   >
  8.     <div
  9.       v-if="isExpanded"
  10.       class="panel-heading conversation-heading -sticky"
  11.     >
  12.       <h1 class="title">
  13.         {{ $t('timeline.conversation') }}
  14.       </h1>
  15.       <button
  16.         v-if="collapsable"
  17.         class="button-unstyled -link"
  18.         @click.prevent="toggleExpanded"
  19.       >
  20.         {{ $t('timeline.collapse') }}
  21.       </button>
  22.       <QuickFilterSettings
  23.         v-if="!collapsable && mobileLayout"
  24.         :conversation="true"
  25.         class="rightside-button"
  26.       />
  27.       <QuickViewSettings
  28.         v-if="!collapsable"
  29.         :conversation="true"
  30.         class="rightside-button"
  31.       />
  32.     </div>
  33.     <div
  34.       v-if="isPage && !status"
  35.       class="conversation-body"
  36.       :class="{ 'panel-body': isExpanded }"
  37.     >
  38.       <p v-if="!loadStatusError">
  39.         <FAIcon
  40.           spin
  41.           icon="circle-notch"
  42.         />
  43.         {{ $t('status.loading') }}
  44.       </p>
  45.       <p v-else>
  46.         {{ $t('status.load_error', { error: loadStatusError }) }}
  47.       </p>
  48.     </div>
  49.     <div
  50.       v-else
  51.       class="conversation-body"
  52.       :class="{ 'panel-body': isExpanded }"
  53.     >
  54.       <div
  55.         v-if="isTreeView"
  56.         class="thread-body"
  57.       >
  58.         <div
  59.           v-if="shouldShowAllConversationButton"
  60.           class="conversation-dive-to-top-level-box"
  61.         >
  62.           <i18n-t
  63.             keypath="status.show_all_conversation_with_icon"
  64.             tag="button"
  65.             class="button-unstyled -link"
  66.             scope="global"
  67.             @click.prevent="diveToTopLevel"
  68.           >
  69.             <template #icon>
  70.               <FAIcon
  71.                 icon="angle-double-left"
  72.               />
  73.             </template>
  74.             <template #text>
  75.               <span>
  76.                 {{ $t('status.show_all_conversation', { numStatus: otherTopLevelCount }, otherTopLevelCount) }}
  77.               </span>
  78.             </template>
  79.           </i18n-t>
  80.         </div>
  81.         <div
  82.           v-if="shouldShowAncestors"
  83.           class="thread-ancestors"
  84.         >
  85.           <article
  86.             v-for="status in ancestorsOf(diveRoot)"
  87.             :key="status.id"
  88.             class="thread-ancestor"
  89.             :class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
  90.           >
  91.             <status
  92.               ref="statusComponent"
  93.               :inline-expanded="collapsable && isExpanded"
  94.               :statusoid="status"
  95.               :expandable="!isExpanded"
  96.               :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
  97.               :focused="focused(status.id)"
  98.               :in-conversation="isExpanded"
  99.               :highlight="getHighlight()"
  100.               :replies="getReplies(status.id)"
  101.               :in-profile="inProfile"
  102.               :profile-user-id="profileUserId"
  103.               class="conversation-status status-fadein panel-body"
  105.               :simple-tree="treeViewIsSimple"
  106.               :toggle-thread-display="toggleThreadDisplay"
  107.               :thread-display-status="threadDisplayStatus"
  108.               :show-thread-recursively="showThreadRecursively"
  109.               :total-reply-count="totalReplyCount"
  110.               :total-reply-depth="totalReplyDepth"
  111.               :show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
  112.               :dive="() => diveIntoStatus(status.id)"
  114.               :controlled-showing-tall="statusContentProperties[status.id].showingTall"
  115.               :controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
  116.               :controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
  117.               :controlled-replying="statusContentProperties[status.id].replying"
  118.               :controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
  119.               :controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
  120.               :controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
  121.               :controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
  122.               :controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
  123.               :controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"
  125.               @goto="setHighlight"
  126.               @toggleExpanded="toggleExpanded"
  127.             />
  128.             <div
  129.               v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
  130.               class="thread-ancestor-dive-box"
  131.             >
  132.               <div
  133.                 class="thread-ancestor-dive-box-inner"
  134.               >
  135.                 <i18n-t
  136.                   tag="button"
  137.                   scope="global"
  138.                   keypath="status.ancestor_follow_with_icon"
  139.                   class="button-unstyled -link thread-tree-show-replies-button"
  140.                   @click.prevent="diveIntoStatus(status.id)"
  141.                 >
  142.                   <template #icon>
  143.                     <FAIcon
  144.                       icon="angle-double-right"
  145.                     />
  146.                   </template>
  147.                   <template #text>
  148.                     <span>
  149.                       {{ $t('status.ancestor_follow', { numReplies: getReplies(status.id, getReplies(status.id).length - 1).length - 1 }) }}
  150.                     </span>
  151.                   </template>
  152.                 </i18n-t>
  153.               </div>
  154.             </div>
  155.           </article>
  156.         </div>
  157.         <thread-tree
  158.           v-for="status in showingTopLevel"
  159.           :key="status.id"
  160.           ref="statusComponent"
  161.           :depth="0"
  163.           :status="status"
  164.           :in-profile="inProfile"
  165.           :conversation="conversation"
  166.           :collapsable="collapsable"
  167.           :is-expanded="isExpanded"
  168.           :pinned-status-ids-object="pinnedStatusIdsObject"
  169.           :profile-user-id="profileUserId"
  171.           :focused="focused"
  172.           :get-replies="getReplies"
  173.           :highlight="maybeHighlight"
  174.           :set-highlight="setHighlight"
  175.           :toggle-expanded="toggleExpanded"
  177.           :simple="treeViewIsSimple"
  178.           :toggle-thread-display="toggleThreadDisplay"
  179.           :thread-display-status="threadDisplayStatus"
  180.           :show-thread-recursively="showThreadRecursively"
  181.           :total-reply-count="totalReplyCount"
  182.           :total-reply-depth="totalReplyDepth"
  183.           :status-content-properties="statusContentProperties"
  184.           :set-status-content-property="setStatusContentProperty"
  185.           :toggle-status-content-property="toggleStatusContentProperty"
  186.           :dive="canDive ? diveIntoStatus : undefined"
  187.         />
  188.       </div>
  189.       <div
  190.         v-if="isLinearView"
  191.         class="thread-body"
  192.       >
  193.         <article>
  194.           <status
  195.             v-for="status in conversation"
  196.             :key="status.id"
  197.             ref="statusComponent"
  198.             :inline-expanded="collapsable && isExpanded"
  199.             :statusoid="status"
  200.             :expandable="!isExpanded"
  201.             :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
  202.             :focused="focused(status.id)"
  203.             :in-conversation="isExpanded"
  204.             :highlight="getHighlight()"
  205.             :replies="getReplies(status.id)"
  206.             :in-profile="inProfile"
  207.             :profile-user-id="profileUserId"
  208.             class="conversation-status status-fadein panel-body"
  210.             :toggle-thread-display="toggleThreadDisplay"
  211.             :thread-display-status="threadDisplayStatus"
  212.             :show-thread-recursively="showThreadRecursively"
  213.             :total-reply-count="totalReplyCount"
  214.             :total-reply-depth="totalReplyDepth"
  215.             :status-content-properties="statusContentProperties"
  216.             :set-status-content-property="setStatusContentProperty"
  217.             :toggle-status-content-property="toggleStatusContentProperty"
  219.             @goto="setHighlight"
  220.             @toggleExpanded="toggleExpanded"
  221.           />
  222.         </article>
  223.       </div>
  224.     </div>
  225.   </div>
  226.   <div
  227.     v-else
  228.     class="Conversation -hidden"
  229.     :style="hiddenStyle"
  230.   />
  231. </template>
  233. <script src="./conversation.js"></script>
  235. <style lang="scss">
  236. .Conversation {
  237.   z-index: 1;
  239.   &.-hidden {
  240.     background: var(--__panel-background);
  241.     backdrop-filter: var(--__panel-backdrop-filter);
  242.   }
  244.   .conversation-dive-to-top-level-box {
  245.     padding: var(--status-margin);
  246.     border-bottom: 1px solid var(--border);
  247.     border-radius: 0;
  249.     /* Make the button stretch along the whole row */
  250.     display: flex;
  251.     align-items: stretch;
  252.     flex-direction: column;
  253.   }
  255.   .thread-ancestors {
  256.     margin-left: var(--status-margin);
  257.     border-left: 2px solid var(--border);
  258.   }
  260.   .thread-ancestor.-faded .RichContent {
  261.     /* stylelint-disable declaration-no-important */
  262.     --text: var(--textFaint) !important;
  263.     --link: var(--linkFaint) !important;
  264.     --funtextGreentext: var(--funtextGreentextFaint) !important;
  265.     --funtextCyantext: var(--funtextCyantextFaint) !important;
  266.     /* stylelint-enable declaration-no-important */
  267.   }
  269.   .thread-ancestor-dive-box {
  270.     padding-left: var(--status-margin);
  271.     border-bottom: 1px solid var(--border);
  272.     border-radius: 0;
  274.     /* Make the button stretch along the whole row */
  275.     &,
  276.     &-inner {
  277.       display: flex;
  278.       align-items: stretch;
  279.       flex-direction: column;
  280.     }
  281.   }
  283.   .thread-ancestor-dive-box-inner {
  284.     padding: var(--status-margin);
  285.   }
  287.   .conversation-status {
  288.     border-bottom: 1px solid var(--border);
  289.     border-radius: 0;
  290.   }
  292.   .thread-ancestor-has-other-replies .conversation-status,
  293.   &:last-child:not(.-expanded) .conversation-status,
  294.   &.-expanded .conversation-status:last-child,
  295.   .thread-ancestor:last-child .conversation-status,
  296.   .thread-ancestor:last-child .thread-ancestor-dive-box,
  297.   &.-expanded .thread-tree .conversation-status {
  298.     border-bottom: none;
  299.   }
  301.   .thread-ancestors + .thread-tree > .conversation-status {
  302.     border-top: 1px solid var(--border);
  303.   }
  305.   /* expanded conversation in timeline */
  306.   &.status-fadein.-expanded .thread-body {
  307.     border-left: 4px solid var(--cRed);
  308.     border-radius: var(--roundness);
  309.     border-top-left-radius: 0;
  310.     border-top-right-radius: 0;
  311.     border-bottom: 1px solid var(--border);
  312.   }
  314.   &.-expanded.status-fadein {
  315.     --___margin: calc(var(--status-margin) / 2);
  317.     background: var(--background);
  318.     margin: var(--___margin);
  320.     &::before {
  321.       z-index: -1;
  322.       content: "";
  323.       display: block;
  324.       position: absolute;
  325.       top: calc(var(--___margin) * -1);
  326.       bottom: calc(var(--___margin) * -1);
  327.       left: calc(var(--___margin) * -1);
  328.       right: calc(var(--___margin) * -1);
  329.       background: var(--background);
  330.       backdrop-filter: var(--__panel-backdrop-filter);
  331.     }
  332.   }
  333. }
  334. </style>