mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-14 04:08:32 +03:00
Code Issues Projects Releases Packages Wiki Activity

Revisit and add slight polish to Composer UI

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-14 20:24:36 +08:00
parent 0cc4075eaa
commit 10090e316a
2 changed files with 34 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/compose.css
View file

@ -31,6 +31,10 @@
max-height: 50vh;
resize: vertical;
line-height: 1.4;
border-color: transparent;
}
#compose-container textarea:hover {
border-color: var(--divider-color);
}
@media (min-width: 40em) {
@ -51,7 +55,7 @@
}
}
#compose-container .status-preview {
border-radius: 8px 8px 0 0;
border-radius: 16px 16px 0 0;
max-height: 160px;
background-color: var(--bg-color);
margin: 0 12px;
@ -59,6 +63,7 @@
border-bottom: 0;
animation: appear-up 1s ease-in-out;
overflow: auto;
box-shadow: 0 -3px 12px -3px var(--drop-shadow-color);
}
#compose-container .status-preview :is(.hashtag, .time) {
/* Prevent hashtags from being clickable */
@ -87,7 +92,7 @@
transparent,
var(--bg-faded-color)
); */
border-top: 1px solid var(--outline-color);
border-top: var(--hairline-width) solid var(--outline-color);
backdrop-filter: blur(8px);
text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
@ -105,14 +110,17 @@
}
#compose-container form {
border-radius: 8px;
border-radius: 16px;
padding: 4px 12px;
background-image: linear-gradient(var(--bg-color) 75%, transparent);
background-color: var(--bg-blur-color);
/* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
position: relative;
z-index: 1;
z-index: 2;
--drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
box-shadow: var(--drop-shadow);
}
#compose-container .status-preview ~ form {
box-shadow: 0 -12px 12px -12px var(--divider-color);
box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
}
#compose-container .toolbar {
@ -131,8 +139,8 @@
}
#compose-container .toolbar-button {
display: inline-block;
color: var(--text-color);
background-color: var(--bg-faded-color);
color: var(--link-color);
background-color: var(--bg-blur-color);
padding: 0 8px;
border-radius: 8px;
min-height: 2.4em;
@ -150,9 +158,10 @@
cursor: inherit;
outline: 0;
}
#compose-container .toolbar-button:has([disabled]) {
#compose-container .toolbar-button:has([disabled]),
#compose-container .toolbar-button[disabled] {
pointer-events: none;
background-color: var(--bg-faded-color);
background-color: transparent;
opacity: 0.5;
}
#compose-container
@ -186,9 +195,14 @@
) {
cursor: pointer;
filter: none;
border-color: var(--divider-color);
background-color: var(--bg-color);
border-color: var(--link-faded-color);
outline: 0;
}
#compose-container .toolbar-button:not(:disabled).highlight {
border-color: var(--link-color);
box-shadow: inset 0 0 8px var(--link-faded-color);
}
#compose-container .toolbar-button:not(:disabled):active {
filter: brightness(0.8);
}
@ -430,6 +444,12 @@
}
}
@media (min-width: 480px) {
#compose-container button[type='submit'] {
padding-inline: 24px;
}
}
#media-sheet main {
padding-top: 8px;
display: flex;

6
src/components/compose.jsx
View file

@ -502,7 +502,7 @@ function Compose({
{currentAccountInfo?.avatarStatic && (
<Avatar
url={currentAccountInfo.avatarStatic}
size="l"
size="xl"
alt={currentAccountInfo.username}
/>
)}
@ -831,7 +831,7 @@ function Compose({
}}
/>
<label
class="toolbar-button"
class={`toolbar-button ${sensitive ? 'highlight' : ''}`}
title="Content warning or sensitive media"
>
<input
@ -854,7 +854,7 @@ function Compose({
<label
class={`toolbar-button ${
visibility !== 'public' && !sensitive ? 'show-field' : ''
}`}
} ${visibility !== 'public' ? 'highlight' : ''}`}
title={`Visibility: ${visibility}`}
>
<Icon icon={visibilityIconsMap[visibility]} alt={visibility} />