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

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

Browse source 
Reviewed-on: https://git.joinsharkey.org/Sharkey/Sharkey/pulls/294
This commit is contained in:
Marie 2024-01-01 18:37:25 +01:00
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 ### Client
- - Enhance: Adjusted styling to be closer to Firefish
### Server ### Server
- -

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',