logo

pleroma-fe

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

post_status_form.vue (16057B)

    

  1. <template>
  2.   <div
  3.     ref="form"
  4.     class="post-status-form"
  5.   >
  6.     <form
  7.       autocomplete="off"
  8.       @submit.prevent
  9.       @dragover.prevent="fileDrag"
  10.     >
  11.       <div class="form-group">
  12.         <i18n-t
  13.           v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
  14.           keypath="post_status.account_not_locked_warning"
  15.           tag="p"
  16.           class="visibility-notice"
  17.           scope="global"
  18.         >
  19.           <button
  20.             class="button-unstyled -link"
  21.             @click="openProfileTab"
  22.           >
  23.             {{ $t('post_status.account_not_locked_warning_link') }}
  24.           </button>
  25.         </i18n-t>
  26.         <p
  27.           v-if="!hideScopeNotice && newStatus.visibility === 'public'"
  28.           class="visibility-notice notice-dismissible"
  29.         >
  30.           <span>{{ $t('post_status.scope_notice.public') }}</span>
  31.           <a
  32.             class="fa-scale-110 fa-old-padding dismiss"
  33.             :title="$t('post_status.scope_notice_dismiss')"
  34.             role="button"
  35.             tabindex="0"
  36.             @click.prevent="dismissScopeNotice()"
  37.           >
  38.             <FAIcon icon="times" />
  39.           </a>
  40.         </p>
  41.         <p
  42.           v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
  43.           class="visibility-notice notice-dismissible"
  44.         >
  45.           <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
  46.           <a
  47.             class="fa-scale-110 fa-old-padding dismiss"
  48.             :title="$t('post_status.scope_notice_dismiss')"
  49.             role="button"
  50.             tabindex="0"
  51.             @click.prevent="dismissScopeNotice()"
  52.           >
  53.             <FAIcon icon="times" />
  54.           </a>
  55.         </p>
  56.         <p
  57.           v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
  58.           class="visibility-notice notice-dismissible"
  59.         >
  60.           <span>{{ $t('post_status.scope_notice.private') }}</span>
  61.           <a
  62.             class="fa-scale-110 fa-old-padding dismiss"
  63.             :title="$t('post_status.scope_notice_dismiss')"
  64.             role="button"
  65.             tabindex="0"
  66.             @click.prevent="dismissScopeNotice()"
  67.           >
  68.             <FAIcon icon="times" />
  69.           </a>
  70.         </p>
  71.         <p
  72.           v-else-if="newStatus.visibility === 'direct'"
  73.           class="visibility-notice"
  74.         >
  75.           <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
  76.           <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
  77.         </p>
  78.         <div
  79.           v-if="isEdit"
  80.           class="visibility-notice edit-warning"
  81.         >
  82.           <p>{{ $t('post_status.edit_remote_warning') }}</p>
  83.           <p>{{ $t('post_status.edit_unsupported_warning') }}</p>
  84.         </div>
  85.         <div
  86.           v-if="!disablePreview"
  87.           class="preview-heading faint"
  88.         >
  89.           <a
  90.             class="preview-toggle faint"
  91.             @click.stop.prevent="togglePreview"
  92.           >
  93.             {{ $t('post_status.preview') }}
  94.             <FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
  95.           </a>
  96.           <div
  97.             v-show="previewLoading"
  98.             class="preview-spinner"
  99.           >
  100.             <FAIcon
  101.               class="fa-old-padding"
  102.               spin
  103.               icon="circle-notch"
  104.             />
  105.           </div>
  106.         </div>
  107.         <div
  108.           v-if="showPreview"
  109.           class="preview-container"
  110.         >
  111.           <div
  112.             v-if="!preview"
  113.             class="preview-status"
  114.           >
  115.             {{ $t('general.loading') }}
  116.           </div>
  117.           <div
  118.             v-else-if="preview.error"
  119.             class="preview-status preview-error"
  120.           >
  121.             {{ preview.error }}
  122.           </div>
  123.           <StatusContent
  124.             v-else
  125.             :status="preview"
  126.             class="preview-status"
  127.           />
  128.         </div>
  129.         <div
  130.           v-if="quotable"
  131.           role="radiogroup"
  132.           class="btn-group reply-or-quote-selector"
  133.         >
  134.           <button
  135.             :id="`reply-or-quote-option-${randomSeed}-reply`"
  136.             class="btn button-default reply-or-quote-option"
  137.             :class="{ toggled: !newStatus.quoting }"
  138.             tabindex="0"
  139.             role="radio"
  140.             :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
  141.             :aria-checked="!newStatus.quoting"
  142.             @click="newStatus.quoting = false"
  143.           >
  144.             {{ $t('post_status.reply_option') }}
  145.           </button>
  146.           <button
  147.             :id="`reply-or-quote-option-${randomSeed}-quote`"
  148.             class="btn button-default reply-or-quote-option"
  149.             :class="{ toggled: newStatus.quoting }"
  150.             tabindex="0"
  151.             role="radio"
  152.             :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
  153.             :aria-checked="newStatus.quoting"
  154.             @click="newStatus.quoting = true"
  155.           >
  156.             {{ $t('post_status.quote_option') }}
  157.           </button>
  158.         </div>
  159.         <EmojiInput
  160.           v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
  161.           v-model="newStatus.spoilerText"
  162.           enable-emoji-picker
  163.           :suggest="emojiSuggestor"
  164.           class="input form-control"
  165.         >
  166.           <template #default="inputProps">
  167.             <input
  168.               v-model="newStatus.spoilerText"
  169.               type="text"
  170.               :placeholder="$t('post_status.content_warning')"
  171.               :disabled="posting && !optimisticPosting"
  172.               v-bind="propsToNative(inputProps)"
  173.               size="1"
  174.               class="input form-post-subject"
  175.             >
  176.           </template>
  177.         </EmojiInput>
  178.         <EmojiInput
  179.           ref="emoji-input"
  180.           v-model="newStatus.status"
  181.           :suggest="emojiUserSuggestor"
  182.           :placement="emojiPickerPlacement"
  183.           class="input form-control main-input"
  184.           enable-emoji-picker
  185.           hide-emoji-button
  186.           :newline-on-ctrl-enter="submitOnEnter"
  187.           enable-sticker-picker
  188.           @input="onEmojiInputInput"
  189.           @sticker-uploaded="addMediaFile"
  190.           @sticker-upload-failed="uploadFailed"
  191.           @shown="handleEmojiInputShow"
  192.         >
  193.           <template #default="inputProps">
  194.             <textarea
  195.               ref="textarea"
  196.               v-model="newStatus.status"
  197.               :placeholder="placeholder || $t('post_status.default')"
  198.               rows="1"
  199.               cols="1"
  200.               :disabled="posting && !optimisticPosting"
  201.               class="input form-post-body"
  202.               :class="{ 'scrollable-form': !!maxHeight }"
  203.               v-bind="propsToNative(inputProps)"
  204.               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
  205.               @keydown.meta.enter="postStatus($event, newStatus)"
  206.               @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
  207.               @input="resize"
  208.               @compositionupdate="resize"
  209.               @paste="paste"
  210.             />
  211.             <p
  212.               v-if="hasStatusLengthLimit"
  213.               class="character-counter faint"
  214.               :class="{ error: isOverLengthLimit }"
  215.             >
  216.               {{ charactersLeft }}
  217.             </p>
  218.           </template>
  219.         </EmojiInput>
  220.         <div
  221.           v-if="!disableScopeSelector"
  222.           class="visibility-tray"
  223.         >
  224.           <scope-selector
  225.             v-if="!disableVisibilitySelector"
  226.             :show-all="showAllScopes"
  227.             :user-default="userDefaultScope"
  228.             :original-scope="copyMessageScope"
  229.             :initial-scope="newStatus.visibility"
  230.             :on-scope-change="changeVis"
  231.           />
  233.           <div
  234.             v-if="postFormats.length > 1"
  235.             class="text-format"
  236.           >
  237.             <Select
  238.               id="post-content-type"
  239.               v-model="newStatus.contentType"
  240.               class="input form-control"
  241.               :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
  242.             >
  243.               <option
  244.                 v-for="postFormat in postFormats"
  245.                 :key="postFormat"
  246.                 :value="postFormat"
  247.               >
  248.                 {{ $t(`post_status.content_type["${postFormat}"]`) }}
  249.               </option>
  250.             </Select>
  251.           </div>
  252.           <div
  253.             v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
  254.             class="text-format"
  255.           >
  256.             <span class="only-format">
  257.               {{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
  258.             </span>
  259.           </div>
  260.         </div>
  261.       </div>
  262.       <poll-form
  263.         v-if="pollsAvailable"
  264.         ref="pollForm"
  265.         :visible="pollFormVisible"
  266.         @update-poll="setPoll"
  267.       />
  268.       <div
  269.         ref="bottom"
  270.         class="form-bottom"
  271.       >
  272.         <div class="form-bottom-left">
  273.           <media-upload
  274.             ref="mediaUpload"
  275.             class="media-upload-icon"
  276.             :drop-files="dropFiles"
  277.             :disabled="uploadFileLimitReached"
  278.             @uploading="startedUploadingFiles"
  279.             @uploaded="addMediaFile"
  280.             @upload-failed="uploadFailed"
  281.             @all-uploaded="finishedUploadingFiles"
  282.           />
  283.           <button
  284.             class="emoji-icon button-unstyled"
  285.             :title="$t('emoji.add_emoji')"
  286.             @click="showEmojiPicker"
  287.           >
  288.             <FAIcon icon="smile-beam" />
  289.           </button>
  290.           <button
  291.             v-if="pollsAvailable"
  292.             class="poll-icon button-unstyled"
  293.             :class="{ selected: pollFormVisible }"
  294.             :title="$t('polls.add_poll')"
  295.             @click="togglePollForm"
  296.           >
  297.             <FAIcon icon="poll-h" />
  298.           </button>
  299.         </div>
  300.         <button
  301.           v-if="posting"
  302.           disabled
  303.           class="btn button-default"
  304.         >
  305.           {{ $t('post_status.posting') }}
  306.         </button>
  307.         <button
  308.           v-else-if="isOverLengthLimit"
  309.           disabled
  310.           class="btn button-default"
  311.         >
  312.           {{ $t('post_status.post') }}
  313.         </button>
  314.         <button
  315.           v-else
  316.           :disabled="uploadingFiles || disableSubmit"
  317.           class="btn button-default"
  318.           @click.stop.prevent="postStatus($event, newStatus)"
  319.         >
  320.           {{ $t('post_status.post') }}
  321.         </button>
  322.       </div>
  323.       <div
  324.         v-show="showDropIcon !== 'hide'"
  325.         :style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
  326.         class="drop-indicator"
  327.         @dragleave="fileDragStop"
  328.         @drop.stop="fileDrop"
  329.       >
  330.         <FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
  331.       </div>
  332.       <div
  333.         v-if="error"
  334.         class="alert error"
  335.       >
  336.         Error: {{ error }}
  337.         <button
  338.           class="button-unstyled"
  339.           @click="clearError"
  340.         >
  341.           <FAIcon
  342.             class="fa-scale-110 fa-old-padding"
  343.             icon="times"
  344.           />
  345.         </button>
  346.       </div>
  347.       <gallery
  348.         v-if="newStatus.files && newStatus.files.length > 0"
  349.         class="attachments"
  350.         :grid="true"
  351.         :nsfw="false"
  352.         :attachments="newStatus.files"
  353.         :descriptions="newStatus.mediaDescriptions"
  354.         :set-media="() => $store.dispatch('setMedia', newStatus.files)"
  355.         :editable="true"
  356.         :edit-attachment="editAttachment"
  357.         :remove-attachment="removeMediaFile"
  358.         :shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
  359.         :shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
  360.         @play="$emit('mediaplay', attachment.id)"
  361.         @pause="$emit('mediapause', attachment.id)"
  362.       />
  363.       <div
  364.         v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
  365.         class="upload_settings"
  366.       >
  367.         <Checkbox v-model="newStatus.nsfw">
  368.           {{ $t('post_status.attachments_sensitive') }}
  369.         </Checkbox>
  370.       </div>
  371.     </form>
  372.   </div>
  373. </template>
  375. <script src="./post_status_form.js"></script>
  377. <style lang="scss">
  378. .post-status-form {
  379.   position: relative;
  381.   .attachments {
  382.     margin-bottom: 0.5em;
  383.   }
  385.   .form-bottom {
  386.     display: flex;
  387.     justify-content: space-between;
  388.     padding: 0.5em;
  389.     height: 2.5em;
  391.     button {
  392.       width: 10em;
  393.     }
  395.     p {
  396.       margin: 0.35em;
  397.       padding: 0.35em;
  398.       display: flex;
  399.     }
  400.   }
  402.   .form-bottom-left {
  403.     display: flex;
  404.     flex: 1;
  405.     padding-right: 7px;
  406.     margin-right: 7px;
  407.     max-width: 10em;
  408.   }
  410.   .preview-heading {
  411.     display: flex;
  412.     padding-left: 0.5em;
  413.   }
  415.   .preview-toggle {
  416.     flex: 1;
  417.     cursor: pointer;
  418.     user-select: none;
  420.     &:hover {
  421.       text-decoration: underline;
  422.     }
  424.     svg,
  425.     i {
  426.       margin-left: 0.2em;
  427.       font-size: 0.8em;
  428.       transform: rotate(90deg);
  429.     }
  430.   }
  432.   .preview-container {
  433.     margin-bottom: 1em;
  434.   }
  436.   .preview-error {
  437.     font-style: italic;
  438.     color: var(--textFaint);
  439.   }
  441.   .preview-status {
  442.     border: 1px solid var(--border);
  443.     border-radius: var(--roundness);
  444.     padding: 0.5em;
  445.     margin: 0;
  446.   }
  448.   .reply-or-quote-selector {
  449.     margin-bottom: 0.5em;
  450.   }
  452.   .text-format {
  453.     .only-format {
  454.       color: var(--textFaint);
  455.     }
  456.   }
  458.   .visibility-tray {
  459.     display: flex;
  460.     justify-content: space-between;
  461.     padding-top: 5px;
  462.     align-items: baseline;
  463.   }
  465.   .visibility-notice.edit-warning {
  466.     > :first-child {
  467.       margin-top: 0;
  468.     }
  470.     > :last-child {
  471.       margin-bottom: 0;
  472.     }
  473.   }
  475.   // Order is not necessary but a good indicator
  476.   .media-upload-icon {
  477.     order: 1;
  478.     justify-content: left;
  479.   }
  481.   .emoji-icon {
  482.     order: 2;
  483.     justify-content: center;
  484.   }
  486.   .poll-icon {
  487.     order: 3;
  488.     justify-content: right;
  489.   }
  491.   .media-upload-icon,
  492.   .poll-icon,
  493.   .emoji-icon {
  494.     font-size: 1.85em;
  495.     line-height: 1.1;
  496.     flex: 1;
  497.     padding: 0 0.1em;
  498.     display: flex;
  499.     align-items: center;
  500.   }
  502.   .error {
  503.     text-align: center;
  504.   }
  506.   .media-upload-wrapper {
  507.     margin-right: 0.2em;
  508.     margin-bottom: 0.5em;
  509.     width: 18em;
  511.     img,
  512.     video {
  513.       object-fit: contain;
  514.       max-height: 10em;
  515.     }
  517.     .video {
  518.       max-height: 10em;
  519.     }
  521.     input {
  522.       flex: 1;
  523.       width: 100%;
  524.     }
  525.   }
  527.   .status-input-wrapper {
  528.     display: flex;
  529.     position: relative;
  530.     width: 100%;
  531.     flex-direction: column;
  532.   }
  534.   .btn[disabled] {
  535.     cursor: not-allowed;
  536.   }
  538.   form {
  539.     display: flex;
  540.     flex-direction: column;
  541.     margin: 0.6em;
  542.     position: relative;
  543.   }
  545.   .form-group {
  546.     display: flex;
  547.     flex-direction: column;
  548.     padding: 0.25em 0.5em 0.5em;
  549.     line-height: 1.85;
  550.   }
  552.   .input.form-post-body {
  553.     // TODO: make a resizable textarea component?
  554.     box-sizing: content-box; // needed for easier computation of dynamic size
  555.     overflow: hidden;
  556.     transition: min-height 200ms 100ms;
  557.     // stock padding + 1 line of text (for counter)
  558.     padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
  559.     // two lines of text
  560.     height: calc(var(--post-line-height) * 1em);
  561.     min-height: calc(var(--post-line-height) * 1em);
  562.     resize: none;
  563.     background: transparent;
  565.     &.scrollable-form {
  566.       overflow-y: auto;
  567.     }
  568.   }
  570.   .main-input {
  571.     position: relative;
  572.   }
  574.   .character-counter {
  575.     position: absolute;
  576.     bottom: 0;
  577.     right: 0;
  578.     padding: 0;
  579.     margin: 0 0.5em;
  581.     &.error {
  582.       color: var(--cRed);
  583.     }
  584.   }
  586.   @keyframes fade-in {
  587.     from { opacity: 0; }
  588.     to { opacity: 0.6; }
  589.   }
  591.   @keyframes fade-out {
  592.     from { opacity: 0.6; }
  593.     to { opacity: 0; }
  594.   }
  596.   .drop-indicator {
  597.     position: absolute;
  598.     width: 100%;
  599.     height: 100%;
  600.     font-size: 5em;
  601.     display: flex;
  602.     align-items: center;
  603.     justify-content: center;
  604.     opacity: 0.6;
  605.     color: var(--text);
  606.     background-color: var(--bg);
  607.     border-radius: var(--roundness);
  608.     border: 2px dashed var(--text);
  609.   }
  610. }
  611. </style>