simono41/phanpy
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

💅 Aesthetic changes

Browse source
This commit is contained in:
Lim Chee Aun 2022-12-19 13:38:16 +08:00
parent 1826b01103
commit 8c97dcc5bc
3 changed files with 107 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app.css
View file

@ -197,7 +197,6 @@ a.mention span {
} }
.timeline.contextual > li .replies { .timeline.contextual > li .replies {
margin-top: -16px; margin-top: -16px;
font-size: 90%;
} }
.timeline.contextual > li .replies :is(ul, li) { .timeline.contextual > li .replies :is(ul, li) {
margin: 0; margin: 0;

31
src/components/status.css
View file

@ -455,6 +455,7 @@ a.card:hover {
.status .extra-meta { .status .extra-meta {
padding-top: 8px; padding-top: 8px;
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
font-size: 90%;
} }
.status .extra-meta * { .status .extra-meta * {
vertical-align: middle; vertical-align: middle;
@ -472,7 +473,7 @@ a.card:hover {
} }
.status.large .extra-meta { .status.large .extra-meta {
padding-top: 0; padding-top: 0;
margin-left: calc(-50px - 8px); margin-left: calc(-50px - 16px);
} }
/* ACTIONS */ /* ACTIONS */
@ -480,32 +481,36 @@ a.card:hover {
.status .actions { .status .actions {
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: space-between;
} }
.status.large .actions { .status.large .actions {
padding-top: 8px; padding-top: 4px;
padding-bottom: 16px; padding-bottom: 16px;
margin-left: calc(-50px - 16px); margin-left: calc(-50px - 16px);
color: var(--text-insignificant-color); color: var(--text-insignificant-color);
border-top: 1px solid var(--outline-color);
margin-top: 8px;
} }
.status .actions > button { .status .action.has-count {
flex: 1;
}
.status .action > button {
min-height: 40px; min-height: 40px;
min-width: 40px; min-width: 40px;
padding: 0 8px; padding: 0 8px;
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.status .actions > button.plain { .status .action > button.plain {
color: inherit; color: inherit;
border: 1.5px solid transparent; border: 1.5px solid transparent;
} }
.status .actions > button.plain:hover { .status .action > button.plain:hover {
color: var(--link-color); color: var(--link-color);
background-color: var(--button-plain-bg-hover-color); background-color: var(--button-plain-bg-hover-color);
} }
.status .actions > button.plain.reblog-button:hover { .status .action > button.plain.reblog-button:hover {
color: var(--reblog-color); color: var(--reblog-color);
} }
.status .actions > button.plain.reblog-button.checked { .status .action > button.plain.reblog-button.checked {
color: var(--reblog-color); color: var(--reblog-color);
border-color: var(--reblog-color); border-color: var(--reblog-color);
} }
@ -524,13 +529,13 @@ a.card:hover {
opacity: 0; opacity: 0;
} }
} }
.status .actions > button.plain.reblog-button.checked .icon { .status .action > button.plain.reblog-button.checked .icon {
animation: reblogged 1s ease-in-out; animation: reblogged 1s ease-in-out;
} }
.status .actions > button.plain.favourite-button:hover { .status .action > button.plain.favourite-button:hover {
color: var(--favourite-color); color: var(--favourite-color);
} }
.status .actions > button.plain.favourite-button.checked { .status .action > button.plain.favourite-button.checked {
color: var(--favourite-color); color: var(--favourite-color);
border-color: var(--favourite-color); border-color: var(--favourite-color);
} }
@ -552,11 +557,11 @@ a.card:hover {
opacity: 0; opacity: 0;
} }
} }
.status .actions > button.plain.favourite-button.checked .icon { .status .action > button.plain.favourite-button.checked .icon {
transform-origin: bottom center; transform-origin: bottom center;
animation: hearted 1s ease-in-out; animation: hearted 1s ease-in-out;
} }
.status .actions > button.plain.bookmark-button.checked { .status .action > button.plain.bookmark-button.checked {
color: var(--link-color); color: var(--link-color);
border-color: var(--link-color); border-color: var(--link-color);
} }

169
src/components/status.jsx
View file

@ -429,104 +429,113 @@ function Status({
)} )}
</div> </div>
<div class="actions"> <div class="actions">
<StatusButton <div class="action has-count">
title="Reply" <StatusButton
alt="Comments" title="Reply"
class="reply-button" alt="Comments"
icon="comment" class="reply-button"
count={repliesCount} icon="comment"
onClick={() => { count={repliesCount}
states.showCompose = { onClick={() => {
replyToStatus: status, states.showCompose = {
}; replyToStatus: status,
}} };
/> }}
/>
</div>
{/* TODO: if visibility = private, only can reblog own statuses */} {/* TODO: if visibility = private, only can reblog own statuses */}
{visibility !== 'direct' && ( {visibility !== 'direct' && (
<div class="action has-count">
<StatusButton
checked={reblogged}
title={['Boost', 'Unboost']}
alt={['Boost', 'Boosted']}
class="reblog-button"
icon="rocket"
count={reblogsCount}
onClick={async () => {
try {
// Optimistic
states.statuses.set(id, {
...status,
reblogged: !reblogged,
reblogsCount: reblogsCount + (reblogged ? -1 : 1),
});
if (reblogged) {
const newStatus = await masto.statuses.unreblog(id);
states.statuses.set(newStatus.id, newStatus);
} else {
const newStatus = await masto.statuses.reblog(id);
states.statuses.set(newStatus.id, newStatus);
states.statuses.set(
newStatus.reblog.id,
newStatus.reblog,
);
}
} catch (e) {
console.error(e);
}
}}
/>
</div>
)}
<div class="action has-count">
<StatusButton <StatusButton
checked={reblogged} checked={favourited}
title={['Boost', 'Unboost']} title={['Favourite', 'Unfavourite']}
alt={['Boost', 'Boosted']} alt={['Favourite', 'Favourited']}
class="reblog-button" class="favourite-button"
icon="rocket" icon="heart"
count={reblogsCount} count={favouritesCount}
onClick={async () => { onClick={async () => {
try { try {
// Optimistic // Optimistic
states.statuses.set(id, { states.statuses.set(statusID, {
...status, ...status,
reblogged: !reblogged, favourited: !favourited,
reblogsCount: reblogsCount + (reblogged ? -1 : 1), favouritesCount:
favouritesCount + (favourited ? -1 : 1),
}); });
if (reblogged) { if (favourited) {
const newStatus = await masto.statuses.unreblog(id); const newStatus = await masto.statuses.unfavourite(id);
states.statuses.set(newStatus.id, newStatus); states.statuses.set(newStatus.id, newStatus);
} else { } else {
const newStatus = await masto.statuses.reblog(id); const newStatus = await masto.statuses.favourite(id);
states.statuses.set(newStatus.id, newStatus); states.statuses.set(newStatus.id, newStatus);
states.statuses.set(
newStatus.reblog.id,
newStatus.reblog,
);
} }
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }
}} }}
/> />
)} </div>
<StatusButton <div class="action">
checked={favourited} <StatusButton
title={['Favourite', 'Unfavourite']} checked={bookmarked}
alt={['Favourite', 'Favourited']} title={['Bookmark', 'Unbookmark']}
class="favourite-button" alt={['Bookmark', 'Bookmarked']}
icon="heart" class="bookmark-button"
count={favouritesCount} icon="bookmark"
onClick={async () => { onClick={async () => {
try { try {
// Optimistic // Optimistic
states.statuses.set(statusID, { states.statuses.set(statusID, {
...status, ...status,
favourited: !favourited, bookmarked: !bookmarked,
favouritesCount: favouritesCount + (favourited ? -1 : 1), });
}); if (bookmarked) {
if (favourited) { const newStatus = await masto.statuses.unbookmark(id);
const newStatus = await masto.statuses.unfavourite(id); states.statuses.set(newStatus.id, newStatus);
states.statuses.set(newStatus.id, newStatus); } else {
} else { const newStatus = await masto.statuses.bookmark(id);
const newStatus = await masto.statuses.favourite(id); states.statuses.set(newStatus.id, newStatus);
states.statuses.set(newStatus.id, newStatus); }
} catch (e) {
console.error(e);
} }
} catch (e) { }}
console.error(e); />
} </div>
}}
/>
<StatusButton
checked={bookmarked}
title={['Bookmark', 'Unbookmark']}
alt={['Bookmark', 'Bookmarked']}
class="bookmark-button"
icon="bookmark"
onClick={async () => {
try {
// Optimistic
states.statuses.set(statusID, {
...status,
bookmarked: !bookmarked,
});
if (bookmarked) {
const newStatus = await masto.statuses.unbookmark(id);
states.statuses.set(newStatus.id, newStatus);
} else {
const newStatus = await masto.statuses.bookmark(id);
states.statuses.set(newStatus.id, newStatus);
}
} catch (e) {
console.error(e);
}
}}
/>
{isSelf && ( {isSelf && (
<span class="menu-container"> <span class="menu-container">
<button type="button" title="More" class="plain more-button"> <button type="button" title="More" class="plain more-button">