Page MenuHomePhorge
Files F85628559

No OneTemporary
Actions

Size
10 KB
Referenced Files
None
Subscribers
None

View Options

diff --git a/src/components/conversation/conversation.scss b/src/components/conversation/conversation.scss
index 9f9c30747a..97238c2dd9 100644
--- a/src/components/conversation/conversation.scss
+++ b/src/components/conversation/conversation.scss
@@ -1,130 +1,129 @@
.Conversation {
z-index: 1;
&.-hidden {
background: var(--__panel-background);
backdrop-filter: var(--__panel-backdrop-filter);
}
.conversation-dive-to-top-level-box {
padding: var(--status-margin);
border-bottom: 1px solid var(--border);
border-radius: 0;
/* Make the button stretch along the whole row */
display: flex;
align-items: stretch;
flex-direction: column;
}
.thread-ancestors {
margin-left: var(--status-margin);
border-left: 2px solid var(--border);
}
.thread-ancestor.-faded .RichContent {
/* stylelint-disable declaration-no-important */
--text: var(--textFaint) !important;
--link: var(--linkFaint) !important;
--funtextGreentext: var(--funtextGreentextFaint) !important;
--funtextCyantext: var(--funtextCyantextFaint) !important;
/* stylelint-enable declaration-no-important */
}
.thread-ancestor-dive-box {
padding-left: var(--status-margin);
border-bottom: 1px solid var(--border);
border-radius: 0;
/* Make the button stretch along the whole row */
&,
&-inner {
display: flex;
align-items: stretch;
flex-direction: column;
}
}
.thread-ancestor-dive-box-inner {
padding: var(--status-margin);
}
.conversation-status {
border-bottom: 1px solid var(--border);
border-radius: 0;
}
.thread-ancestor-has-other-replies .conversation-status,
&:last-child:not(.-expanded) .conversation-status,
&.-expanded .conversation-status:last-child,
.thread-ancestor:last-child .conversation-status,
.thread-ancestor:last-child .thread-ancestor-dive-box,
&.-expanded .thread-tree .conversation-status {
border-bottom: none;
}
.thread-ancestors + .thread-tree > .conversation-status {
border-top: 1px solid var(--border);
}
/* expanded conversation in timeline */
&.status-fadein.-expanded .thread-body {
border-left: 4px solid var(--cRed);
border-radius: var(--roundness);
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom: 1px solid var(--border);
}
&.-expanded.status-fadein {
--___margin: calc(var(--status-margin) / 2);
background: var(--background);
margin: var(--___margin);
&::before {
z-index: -1;
content: "";
display: block;
position: absolute;
inset: calc(var(--___margin) * -1);
background: var(--background);
backdrop-filter: var(--__panel-backdrop-filter);
}
}
.auto-reply-to-section {
margin: 0 1em;
gap: 0.5em;
h4 {
margin: 0.5em 0;
line-height: 1.1;
button {
line-height: 1.1;
}
}
.reply-to-preview {
display: flex;
align-items: center;
gap: 0.5em;
border: 1px solid var(--border);
border-radius: var(--roundness);
padding: 0.5em;
}
}
.chat-view-reply-form {
position: sticky;
display: flex;
flex-direction: column;
align-items: stretch;
bottom: 0;
-
- .reply-form form {
- margin-top: 0;
- }
+ padding-left: 0;
+ padding-right: 0;
+ padding-bottom: 0;
}
}
diff --git a/src/components/post_status_form/post_status_form.scss b/src/components/post_status_form/post_status_form.scss
index 3de28928d1..31da7b9336 100644
--- a/src/components/post_status_form/post_status_form.scss
+++ b/src/components/post_status_form/post_status_form.scss
@@ -1,294 +1,291 @@
.post-status-form {
position: relative;
+ form {
+ display: flex;
+ flex-direction: column;
+ padding: 0.5em;
+ position: relative;
+ gap: 0.25em;
+ }
+
+ .form-group {
+ display: flex;
+ flex-direction: column;
+ line-height: 1.85;
+ }
+
.attachments {
margin-bottom: 0.5em;
}
.more-post-actions {
height: 100%;
.btn {
height: 100%;
}
}
.form-bottom {
display: flex;
justify-content: space-between;
- padding: 0.5em 0.5em 0.25em;
height: 2.5em;
.post-button-group {
width: 10em;
display: flex;
.post-button {
flex: 1 0 auto;
}
.more-post-actions {
flex: 0 0 auto;
}
}
p {
margin: 0.35em;
padding: 0.35em;
display: flex;
}
}
.form-bottom-left {
display: flex;
gap: 1.5em;
- margin-right: 1em;
+ margin: 0 0.5em;
button {
- padding: 0.5em;
- margin: -0.5em;
+ padding: 0.25em;
+ margin: -0.25em;
}
}
.preview-heading {
display: flex;
flex-wrap: wrap;
margin: 0 0.5em;
}
.preview-toggle {
flex: 10 0 auto;
cursor: pointer;
user-select: none;
&:hover {
text-decoration: underline;
}
svg,
i {
margin-left: 0.2em;
font-size: 0.8em;
transform: rotate(90deg);
}
}
.preview-container {
margin-bottom: 1em;
}
.preview-error {
font-style: italic;
color: var(--textFaint);
}
.preview-status {
border: 1px solid var(--border);
border-radius: var(--roundness);
padding: 0.5em;
margin: 0;
}
.reply-or-quote-selector {
margin-bottom: 0.5em;
gap: 0 1em;
display: flex;
flex-wrap: wrap-reverse;
grid-template-columns: 1fr 1fr;
}
.text-format {
.only-format {
color: var(--textFaint);
}
}
.visibility-tray {
display: flex;
justify-content: space-between;
align-items: baseline;
}
.visibility-notice {
border: 1px solid var(--border);
border-radius: var(--roundness);
}
.visibility-notice.edit-warning {
> :first-child {
margin-top: 0;
}
> :last-child {
margin-bottom: 0;
}
}
// Order is not necessary but a good indicator
.media-upload-icon {
order: 1;
justify-content: left;
}
.emoji-icon {
order: 2;
justify-content: center;
}
.poll-icon {
order: 3;
justify-content: center;
}
.quote-icon {
order: 4;
justify-content: right;
}
.bottom-left-button {
font-size: 1.85em;
line-height: 1.1;
flex: 1;
padding: 0 0.1em;
display: flex;
align-items: center;
}
.error {
text-align: center;
}
.media-upload-wrapper {
margin-right: 0.2em;
margin-bottom: 0.5em;
width: 18em;
img,
video {
object-fit: contain;
max-height: 10em;
}
.video {
max-height: 10em;
}
input {
flex: 1;
width: 100%;
}
}
.status-input-wrapper {
display: flex;
position: relative;
width: 100%;
flex-direction: column;
}
.btn[disabled] {
cursor: not-allowed;
}
- form {
- display: flex;
- flex-direction: column;
- margin: 0.6em;
- position: relative;
- }
-
- .form-group {
- display: flex;
- flex-direction: column;
- padding: 0.25em 0.5em 0.5em;
- line-height: 1.85;
- }
-
.inputs-wrapper {
padding: 0;
display: flex;
flex-direction: column;
}
.keyboard-enter-hint {
text-align: right;
- margin-right: 1em;
line-height: 1;
- margin-bottom: 0.5em;
}
textarea.input.form-post-body {
// TODO: make a resizable textarea component?
box-sizing: content-box; // needed for easier computation of dynamic size
overflow: hidden;
transition: min-height 200ms 100ms;
// stock padding + 1 line of text (for counter)
padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
padding-right: 0.5em;
// two lines of text
height: calc(var(--post-line-height) * 1em);
min-height: calc(var(--post-line-height) * 1em);
resize: none;
background: transparent;
text-wrap: stable;
&.scrollable-form {
overflow-y: auto;
}
}
.main-input {
position: relative;
}
.subject-input {
border-bottom: 1px solid var(--border);
}
.mentions-input {
border-bottom: 1px solid var(--border);
}
.character-counter {
position: absolute;
bottom: 0;
right: 2.2em;
padding: 0;
margin: 0;
line-height: 2.2em;
height: 2.2em;
&.error {
color: var(--cRed);
}
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 0.6; }
}
@keyframes fade-out {
from { opacity: 0.6; }
to { opacity: 0; }
}
.drop-indicator {
position: absolute;
width: 100%;
height: 100%;
font-size: 5em;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
color: var(--text);
background-color: var(--bg);
border-radius: var(--roundness);
border: 2px dashed var(--text);
}
.auto-save-status {
align-self: center;
}
}
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index b0479321c2..0f9260c4a9 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -1,51 +1,49 @@
<template>
<aside class="user-panel">
<div
v-if="signedIn"
key="user-panel-signed"
class="panel panel-default signed-in"
>
<UserCard
:user-id="user.id"
:hide-bio="true"
/>
<PostStatusForm />
</div>
<AuthForm
v-else
key="user-panel"
/>
</aside>
</template>
<script src="./user_panel.js"></script>
<style lang="scss">
.user-panel {
.panel {
background: var(--background);
backdrop-filter: var(--backdrop-filter);
}
.user-info {
margin: 0.6em 0.6em 0;
.Avatar {
width: 5em;
width: calc(min(5em, 20cqw));
height: 5em;
height: calc(min(5em, 20cqw));
}
}
.post-status-form {
- form {
- margin-top: 0;
- }
+ margin: 0.5em;
}
.signed-in {
z-index: 10;
}
}
</style>

File Metadata

Mime Type
text/x-diff
Expires
Sat, Aug 8, 1:01 PM (1 d, 11 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1723402
Default Alt Text
(10 KB)

Event Timeline