logo

pleroma-fe

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

conversation.vue (10658B)

    

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