hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'origin/develop' into sss-objects

Browse source
This commit is contained in:
Henry Jameson 2025-04-08 22:36:05 +03:00
commit 4d5333102e
28 changed files with 788 additions and 983 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/attachment/attachment.scss
View file

@ -177,7 +177,8 @@
.text {
flex: 2;
margin: 8px;
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
h1 {
font-size: 1rem;

1
src/components/chat_list_item/chat_list_item.scss
View file

@ -17,7 +17,6 @@
width: 100%;
box-sizing: border-box;
overflow: hidden;
word-wrap: break-word;
}
.heading {

1
src/components/chat_title/chat_title.vue
View file

@ -39,7 +39,6 @@
text-overflow: ellipsis;
white-space: nowrap;
display: inline;
word-wrap: break-word;
overflow: hidden;
}

10
src/components/component_preview/component_preview.vue
View file

@ -199,7 +199,7 @@ export default {
inset: 0;
display: grid;
place-items: center center;
background-color: rgba(100 0 0 / 50%);
background-color: rgb(100 0 0 / 50%);
.alert {
padding: 0.5em 1em;
@ -261,14 +261,14 @@ export default {
.preview-window {
--__grid-color1: rgb(102 102 102);
--__grid-color2: rgb(153 153 153);
--__grid-color1-disabled: rgba(102 102 102 / 20%);
--__grid-color2-disabled: rgba(153 153 153 / 20%);
--__grid-color1-disabled: rgb(102 102 102 / 20%);
--__grid-color2-disabled: rgb(153 153 153 / 20%);
&.-light-grid {
--__grid-color1: rgb(205 205 205);
--__grid-color2: rgb(255 255 255);
--__grid-color1-disabled: rgba(205 205 205 / 20%);
--__grid-color2-disabled: rgba(255 255 255 / 20%);
--__grid-color1-disabled: rgb(205 205 205 / 20%);
--__grid-color2-disabled: rgb(255 255 255 / 20%);
}
position: relative;

1
src/components/draft/draft.vue
View file

@ -127,7 +127,6 @@
max-width: 100%;
p {
word-wrap: break-word;
white-space: normal;
overflow-x: hidden;
}

1
src/components/flash/flash.vue
View file

@ -72,7 +72,6 @@
flex: 1 1 0;
line-height: 1.2;
white-space: normal;
word-wrap: normal;
}
.hidden {

37
src/components/image_cropper/image_cropper.vue
View file

@ -2,21 +2,24 @@
<div class="image-cropper">
<div v-if="dataUrl">
<cropper-canvas
ref="cropperCanvas"
background
class="image-cropper-canvas"
ref="cropperCanvas"
height="25em"
>
<cropper-image
ref="cropperImage"
:src="dataUrl"
alt="Picture"
ref="cropperImage"
class="image-cropper-image"
translatable
scalable
/>
<cropper-shade hidden />
<cropper-handle action="select" plain />
<cropper-handle
action="select"
plain
/>
<cropper-selection
ref="cropperSelection"
initial-coverage="1"
@ -25,17 +28,23 @@
resizable
@change="onCropperSelectionChange"
>
<cropper-grid role="grid" covered></cropper-grid>
<cropper-crosshair centered></cropper-crosshair>
<cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
<cropper-handle action="n-resize"></cropper-handle>
<cropper-handle action="e-resize"></cropper-handle>
<cropper-handle action="s-resize"></cropper-handle>
<cropper-handle action="w-resize"></cropper-handle>
<cropper-handle action="ne-resize"></cropper-handle>
<cropper-handle action="nw-resize"></cropper-handle>
<cropper-handle action="se-resize"></cropper-handle>
<cropper-handle action="sw-resize"></cropper-handle>
<cropper-grid
role="grid"
covered
/>
<cropper-crosshair centered />
<cropper-handle
action="move"
theme-color="rgba(255, 255, 255, 0.35)"
/>
<cropper-handle action="n-resize" />
<cropper-handle action="e-resize" />
<cropper-handle action="s-resize" />
<cropper-handle action="w-resize" />
<cropper-handle action="ne-resize" />
<cropper-handle action="nw-resize" />
<cropper-handle action="se-resize" />
<cropper-handle action="sw-resize" />
</cropper-selection>
</cropper-canvas>
<div class="image-cropper-buttons-wrapper">

3
src/components/link-preview/link-preview.vue
View file

@ -68,7 +68,8 @@
margin: 0.5em 0 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
line-height: 1.2em;
/* cap description at 3 lines, the 1px is to clean up some stray pixels

2
src/components/login_form/login_form.vue
View file

@ -93,4 +93,4 @@
<script src="./login_form.js"></script>
<style src="./login_form.scss"/>
<style src="./login_form.scss" />

3
src/components/media_modal/media_modal.vue
View file

@ -170,7 +170,8 @@ $modal-view-button-icon-margin: 0.5em;
min-height: 1em;
max-width: 500px;
max-height: 9.5em;
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
}
.modal-image {

1
src/components/mention_link/mention_link.scss
View file

@ -27,7 +27,6 @@
top: 100%;
left: 0;
height: 100%;
word-wrap: normal;
white-space: nowrap;
transition: opacity 0.2s ease;
z-index: 1;

3
src/components/mentions_line/mentions_line.scss
View file

@ -1,5 +1,6 @@
.MentionsLine {
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
.mention-link:not(:first-child)::before {
content: " ";

6
src/components/notification/notification.scss
View file

@ -2,8 +2,8 @@
.Notification {
border-bottom: 1px solid;
border-color: var(--border);
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
&.Status {
/* stylelint-disable-next-line declaration-no-important */
@ -31,8 +31,6 @@
& .status-username,
& .mute-thread,
& .mute-words {
word-wrap: normal;
word-break: normal;
white-space: nowrap;
}

4
src/components/notifications/notifications.scss
View file

@ -128,7 +128,6 @@
.notification-details {
min-width: 0;
word-wrap: break-word;
line-height: var(--post-line-height);
position: relative;
overflow: hidden;
@ -161,7 +160,8 @@
}
h1 {
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
margin: 0 0 0.3em;
padding: 0;
font-size: 1em;

3
src/components/poll/poll.scss
View file

@ -26,7 +26,8 @@
align-items: center;
padding: 0.1em 0.25em;
z-index: 1;
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
}
.result-percentage {

1
src/components/post_status_form/post_status_form.scss
View file

@ -205,6 +205,7 @@
min-height: calc(var(--post-line-height) * 1em);
resize: none;
background: transparent;
text-wrap: stable;
&.scrollable-form {
overflow-y: auto;

18
src/components/scroll_top_button/scroll_top_button.js Normal file
View file

@ -0,0 +1,18 @@
const ScrollTopButton = {
props: {
fast: {
type: Boolean,
required: false,
default: false
}
},
methods: {
scrollToTop() {
const speed = this.fast ? 'instant' : 'smooth';
window.scrollTo({ top: 0, behavior: speed })
}
}
}
export default ScrollTopButton

29
src/components/scroll_top_button/scroll_top_button.vue Normal file
View file

@ -0,0 +1,29 @@
<template>
<div class="rightside-button scroll-to-top">
<button
class="button-unstyled scroll-to-top-button"
type="button"
:title="$t('general.scroll_to_top')"
@click="scrollToTop"
>
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
</div>
</template>
<script src="./scroll_top_button.js"></script>
<style lang="scss">
.scroll-to-top {
display: none;
}
.-scrolled .scroll-to-top {
display: inline-block;
}
</style>

11
src/components/status/status.scss
View file

@ -1,8 +1,8 @@
.Status {
min-width: 0;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
&:hover {
--_still-image-img-visibility: visible;
@ -92,7 +92,10 @@
a {
display: inline-block;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
width: 100%
}
}
@ -283,8 +286,6 @@
& .status-username,
& .mute-reason {
word-wrap: normal;
word-break: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

22
src/components/status_body/status_body.scss
View file

@ -14,8 +14,7 @@
& .summary {
white-space: pre-wrap;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
text-wrap: pretty;
line-height: var(--post-line-height);
}
@ -54,19 +53,22 @@
}
.text-wrapper {
text-overflow: ellipsis;
overflow-wrap: break-word;
overflow: hidden;
display: flex;
flex-flow: column nowrap;
&.-tall-status {
position: relative;
height: 220px;
height: 16em;
overflow: hidden;
z-index: 1;
.media-body {
min-height: 0;
mask:
linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
linear-gradient(to top, white, transparent) bottom/100% 8em no-repeat,
linear-gradient(to top, white, white);
/* Autoprefixed seem to ignore this one, and also syntax is different */
@ -87,16 +89,17 @@
& .status-unhider,
& .cw-status-hider {
display: inline-block;
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
width: 100%;
text-align: center;
}
.tall-status-hider {
position: absolute;
height: 70px;
margin-top: 150px;
line-height: 110px;
height: 5em;
margin-top: 10em;
line-height: 8em;
z-index: 2;
}
@ -107,7 +110,8 @@
& .status-unhider,
& .cw-status-hider {
word-break: break-all;
overflow-wrap: break-word;
text-wrap: pretty;
svg {
color: inherit;

6
src/components/timeline/timeline.js
View file

@ -5,6 +5,7 @@ import Conversation from '../conversation/conversation.vue'
import TimelineMenu from '../timeline_menu/timeline_menu.vue'
import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
import ScrollTopButton from '../scroll_top_button/scroll_top_button.vue'
import { debounce, throttle, keyBy } from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
@ -47,6 +48,7 @@ const Timeline = {
},
components: {
Status,
ScrollTopButton,
Conversation,
TimelineMenu,
QuickFilterSettings,
@ -144,9 +146,6 @@ const Timeline = {
this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
},
methods: {
scrollToTop () {
window.scrollTo({ top: this.$el.offsetTop })
},
stopBlockingClicks: debounce(function () {
this.blockingClicks = false
}, 1000),
@ -251,7 +250,6 @@ const Timeline = {
}
},
handleScroll: throttle(function (e) {
this.showScrollTop = this.$el.offsetTop < window.scrollY
this.determineVisibleStatuses()
this.scrollLoad(e)
}, 200),

20
src/components/timeline/timeline.vue
View file

@ -8,25 +8,7 @@
v-if="!embedded"
:timeline-name="timelineName"
/>
<div
v-if="showScrollTop"
class="rightside-button"
>
<button
class="button-unstyled scroll-to-top-button"
type="button"
:title="$t('general.scroll_to_top')"
@click="scrollToTop"
>
<FALayers class="fa-scale-110 fa-old-padding-layer">
<FAIcon icon="arrow-up" />
<FAIcon
icon="minus"
transform="up-7"
/>
</FALayers>
</button>
</div>
<ScrollTopButton />
<template v-if="mobileLayout">
<div
v-if="showLoadButton"