heartles
/
egirlskey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

merge: Bring note style closer to Firefish (#294) 

Reviewed-on: https://git.joinsharkey.org/Sharkey/Sharkey/pulls/294
This commit is contained in:
Marie 2024-01-01 18:37:25 +01:00
parent 7c481f545a 0e6d0c4f95
commit b928446ddd
16 changed files with 89 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -5,7 +5,7 @@
-
### Client
-
- Enhance: Adjusted styling to be closer to Firefish
### Server
-

4
packages/frontend/src/components/MkAchievements.vue
View File

@ -120,8 +120,8 @@ onMounted(() => {
.iconFrame {
position: relative;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
padding: 6px;
border-radius: var(--radius-full);
box-sizing: border-box;

4
packages/frontend/src/components/MkNote.vue
View File

@ -986,8 +986,8 @@ function emitUpdReaction(emoji: string, delta: number) {
flex-shrink: 0;
display: block !important;
margin: 0 14px 0 0;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
position: sticky !important;
top: calc(22px + var(--stickyTop, 0px));
left: 0;

4
packages/frontend/src/components/MkNoteDetailed.vue
View File

@ -871,8 +871,8 @@ function animatedMFM() {
.noteHeaderAvatar {
display: block;
flex-shrink: 0;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
}
.noteHeaderBody {

4
packages/frontend/src/components/MkUserInfo.vue
View File

@ -65,8 +65,8 @@ defineProps<{
top: 62px;
left: 13px;
z-index: 2;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
border: solid 4px var(--panel);
}

4
packages/frontend/src/components/MkUserPopup.vue
View File

@ -199,8 +199,8 @@ onMounted(() => {
right: 0;
margin: 0 auto;
z-index: 2;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
}
.title {

4
packages/frontend/src/components/MkUserSetupDialog.User.vue
View File

@ -59,8 +59,8 @@ async function follow() {
top: 30px;
left: 13px;
z-index: 2;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
border: solid 4px var(--panel);
}

1
packages/frontend/src/components/SkInstanceTicker.vue
View File

@ -46,7 +46,6 @@ const bg = {
align-items: center;
height: 1.5ex;
border-radius: var(--radius-xl);
margin-top: 5px;
padding: 4px;
overflow: clip;
color: #fff;

26
packages/frontend/src/components/SkNote.vue
View File

@ -882,7 +882,6 @@ function emitUpdReaction(emoji: string, delta: number) {
}
.replyTo {
opacity: 0.7;
padding-bottom: 0;
}
@ -890,11 +889,28 @@ function emitUpdReaction(emoji: string, delta: number) {
position: relative;
display: flex;
align-items: center;
padding: 24px 38px 16px;
padding: 24px 32px 16px calc(32px + var(--avatar) + 14px);
line-height: 28px;
white-space: pre;
color: var(--renote);
&::before {
content: '';
position: absolute;
top: 0;
left: calc(32px + .5 * var(--avatar));
bottom: -8px;
border-left: var(--thread-width) solid var(--thread);
}
&:first-child {
padding-left: 32px;
&::before {
display: none;
}
}
& + .article {
padding-top: 8px;
}
@ -906,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.renoteAvatar {
flex-shrink: 0;
display: inline-block;
display: none; /* same as Firefish, but keeping the element around in case someone wants to add it back via CSS override */
width: 28px;
height: 28px;
margin: 0 8px 0 0;
@ -987,8 +1003,8 @@ function emitUpdReaction(emoji: string, delta: number) {
display: block !important;
position: sticky !important;
margin: 0 14px 0 0;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
position: sticky !important;
top: calc(22px + var(--stickyTop, 0px));
left: 0;

23
packages/frontend/src/components/SkNoteDetailed.vue
View File

@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div>
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" />
<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
</div>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -381,16 +381,16 @@ const reactionsPagination = computed(() => ({
}));
async function addReplyTo(replyNote: Misskey.entities.Note) {
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
replies.value.unshift(replyNote);
appearNote.value.repliesCount += 1;
}
async function removeReply(id: Misskey.entities.Note['id']) {
const replyIdx = replies.value.findIndex(note => note.id === id);
if (replyIdx >= 0) {
replies.value.splice(replyIdx, 1);
appearNote.value.repliesCount -= 1;
}
const replyIdx = replies.value.findIndex(note => note.id === id);
if (replyIdx >= 0) {
replies.value.splice(replyIdx, 1);
appearNote.value.repliesCount -= 1;
}
}
useNoteCapture({
@ -807,12 +807,11 @@ function animatedMFM() {
}
.replyTo {
opacity: 0.7;
padding-bottom: 0;
}
.replyToMore {
opacity: 0.7;
}
.renote {
@ -879,8 +878,8 @@ function animatedMFM() {
.noteHeaderAvatar {
display: block;
flex-shrink: 0;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
}
.noteHeaderBody {

11
packages/frontend/src/components/SkNoteHeader.vue
View File

@ -116,6 +116,8 @@ const mock = inject<boolean>('mock', false);
.root {
display: flex;
cursor: auto; /* not clickToOpen-able */
min-height: 100%;
align-items: center;
}
.classicRoot {
@ -135,6 +137,7 @@ const mock = inject<boolean>('mock', false);
display: flex;
align-items: flex-end;
margin-left: auto;
margin-bottom: auto;
padding-left: 10px;
overflow: clip;
}
@ -143,10 +146,9 @@ const mock = inject<boolean>('mock', false);
.name {
flex-shrink: 1;
display: block;
// note, these margin top values were done by hand may need futher checking if it actualy aligns pixel perfect
margin: 3px .5em 0 0;
margin: 0 .5em 0 0;
padding: 0;
overflow: scroll;
overflow: hidden;
overflow-wrap: anywhere;
font-size: 1em;
font-weight: bold;
@ -192,8 +194,7 @@ const mock = inject<boolean>('mock', false);
.username {
flex-shrink: 9999999;
// note these top margins were made to align with the instance ticker
margin: 4px .5em 0 0;
margin: 0 .5em 0 0;
overflow: hidden;
text-overflow: ellipsis;
font-size: .95em;

61
packages/frontend/src/components/SkNoteSub.vue
View File

@ -426,22 +426,22 @@ if (props.detail) {
<style lang="scss" module>
.root {
padding: 28px 32px;
font-size: 0.9em;
position: relative;
--reply-indent: calc(.5 * var(--avatar));
&.children {
padding: 10px 0 0 16px;
font-size: 1em;
}
}
.line {
position: absolute;
height: calc(100% - 58px); // 58px of avatar height (see SkNote)
left: 60px;
left: calc(32px + .5 * var(--avatar));
// using solid instead of dotted, stylelistic choice
border-left: 2.5px solid rgb(174, 174, 174);
top: 86px; // 28px of .root padding, plus 58px of avatar height (see SkNote)
border-left: var(--thread-width) solid var(--thread);
top: calc(28px + var(--avatar)); // 28px of .root padding, plus 58px of avatar height (see SkNote)
bottom: -28px;
}
.footer {
@ -471,8 +471,8 @@ if (props.detail) {
flex-shrink: 0;
display: block;
margin: 0 14px 0 0;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
border-radius: var(--radius-sm);
}
@ -521,15 +521,11 @@ if (props.detail) {
@container (max-width: 580px) {
.root {
padding: 28px 26px 0;
--avatar: 46px;
}
.line {
left: 50.5px;
}
.avatar {
width: 50px;
height: 50px;
left: calc(26px + .5 * var(--avatar));
}
}
@ -537,6 +533,11 @@ if (props.detail) {
.root {
padding: 23px 25px;
}
.line {
top: calc(23px + var(--avatar));
left: calc(25px + .5 * var(--avatar));
}
}
@container (max-width: 400px) {
@ -586,16 +587,16 @@ if (props.detail) {
padding: 10px 0 0 8px;
}
}
.line {
top: calc(22px + var(--avatar));
left: calc(24px + .5 * var(--avatar));
}
}
@container (max-width: 450px) {
.line {
left: 46px;
}
.avatar {
width: 46px;
height: 46px;
.root {
--avatar: 44px;
}
}
@ -616,19 +617,19 @@ if (props.detail) {
.threadLine {
width: 0;
flex-grow: 1;
border-left: 2.5px solid rgb(174, 174, 174);
margin-left: 29px;
border-left: var(--thread-width) solid var(--thread);
margin-left: var(--reply-indent);
}
.reply {
margin-left: 29px;
margin-left: var(--reply-indent);
}
.reply:not(:last-child) {
border-left: 2.5px solid rgb(174, 174, 174);
border-left: var(--thread-width) solid var(--thread);
&::before {
left: -2px;
left: calc(-1 * var(--thread-width));
}
}
@ -637,10 +638,10 @@ if (props.detail) {
content: '';
left: 0px;
top: -10px;
height: 49px;
height: calc(10px + 10px + .5 * var(--avatar));
width: 15px;
border-left: 2.5px solid rgb(174, 174, 174);
border-bottom: 2.5px solid rgb(174, 174, 174);
border-left: var(--thread-width) solid var(--thread);
border-bottom: var(--thread-width) solid var(--thread);
border-bottom-left-radius: 15px;
}
@ -649,7 +650,7 @@ if (props.detail) {
padding-left: 0 !important;
&::before {
left: 29px;
left: var(--reply-indent);
width: 0;
border-bottom: unset;
}

4
packages/frontend/src/components/SkOldNoteWindow.vue
View File

@ -177,8 +177,8 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
.noteHeaderAvatar {
display: block;
flex-shrink: 0;
width: 58px;
height: 58px;
width: var(--avatar);
height: var(--avatar);
}
.noteHeaderBody {

3
packages/frontend/src/style.scss
View File

@ -37,6 +37,9 @@
--margin: var(--marginHalf);
}
--avatar: 48px;
--thread-width: 2px;
//--ad: rgb(255 169 0 / 10%);
}

1
packages/frontend/src/themes/_dark.json5
View File

@ -30,6 +30,7 @@
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)',
thread: ':lighten<12<@panel',
acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel',

1
packages/frontend/src/themes/_light.json5
View File

@ -30,6 +30,7 @@
panelHeaderFg: '@fg',
panelHeaderDivider: 'rgba(0, 0, 0, 0)',
panelBorder: '" solid 1px var(--divider)',
thread: ':darken<12<@panel',
acrylicPanel: ':alpha<0.5<@panel',
windowHeader: ':alpha<0.85<@panel',
popup: ':lighten<3<@panel',