mirror
/
phanpy
kopia lustrzana https://github.com/cheeaun/phanpy
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

💅 Aesthetic changes

pull/11/head
Lim Chee Aun 2022-12-19 13:38:16 +08:00
rodzic 1826b01103
commit 8c97dcc5bc
3 zmienionych plików z 107 dodań i 94 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

1
src/app.css
Wyświetl plik

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

31
src/components/status.css
Wyświetl plik

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

169
src/components/status.jsx
Wyświetl plik

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