graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-30 06:23:09 +02:00
Code Issues Projects Releases Packages Wiki Activity

Bring note style closer to Firefish

Browse source
This commit is contained in:
Volpeon 2024-01-01 17:44:13 +01:00
parent 9f5b404a70
commit f92f474088
No known key found for this signature in database
15 changed files with 88 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -120,8 +120,8 @@ onMounted(() => {
.iconFrame { .iconFrame {
position: relative; position: relative;
width: 58px; width: var(--avatar);
height: 58px; height: var(--avatar);
padding: 6px; padding: 6px;
border-radius: var(--radius-full); border-radius: var(--radius-full);
box-sizing: border-box; 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; flex-shrink: 0;
display: block !important; display: block !important;
margin: 0 14px 0 0; margin: 0 14px 0 0;
width: 58px; width: var(--avatar);
height: 58px; height: var(--avatar);
position: sticky !important; position: sticky !important;
top: calc(22px + var(--stickyTop, 0px)); top: calc(22px + var(--stickyTop, 0px));
left: 0; left: 0;

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

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

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

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

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

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

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

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

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

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

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

@ -882,7 +882,6 @@ function emitUpdReaction(emoji: string, delta: number) {
} }
.replyTo { .replyTo {
opacity: 0.7;
padding-bottom: 0; padding-bottom: 0;
} }
@ -890,11 +889,28 @@ function emitUpdReaction(emoji: string, delta: number) {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 24px 38px 16px; padding: 24px 32px 16px calc(32px + var(--avatar) + 14px);
line-height: 28px; line-height: 28px;
white-space: pre; white-space: pre;
color: var(--renote); 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 { & + .article {
padding-top: 8px; padding-top: 8px;
} }
@ -906,7 +922,7 @@ function emitUpdReaction(emoji: string, delta: number) {
.renoteAvatar { .renoteAvatar {
flex-shrink: 0; 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; width: 28px;
height: 28px; height: 28px;
margin: 0 8px 0 0; margin: 0 8px 0 0;
@ -987,8 +1003,8 @@ function emitUpdReaction(emoji: string, delta: number) {
display: block !important; display: block !important;
position: sticky !important; position: sticky !important;
margin: 0 14px 0 0; margin: 0 14px 0 0;
width: 58px; width: var(--avatar);
height: 58px; height: var(--avatar);
position: sticky !important; position: sticky !important;
top: calc(22px + var(--stickyTop, 0px)); top: calc(22px + var(--stickyTop, 0px));
left: 0; left: 0;

9
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"> <div v-if="!repliesLoaded" style="padding: 16px">
<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton> <MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
</div> </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>
<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes"> <div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
<MkPagination :pagination="renotesPagination" :disableAutoLoad="true"> <MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@ -807,12 +807,11 @@ function animatedMFM() {
} }
.replyTo { .replyTo {
opacity: 0.7;
padding-bottom: 0; padding-bottom: 0;
} }
.replyToMore { .replyToMore {
opacity: 0.7;
} }
.renote { .renote {
@ -879,8 +878,8 @@ function animatedMFM() {
.noteHeaderAvatar { .noteHeaderAvatar {
display: block; display: block;
flex-shrink: 0; flex-shrink: 0;
width: 58px; width: var(--avatar);
height: 58px; height: var(--avatar);
} }
.noteHeaderBody { .noteHeaderBody {

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

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

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

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

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

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

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

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

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

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

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

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