HoovesSocial/hippofish
2
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Change detailed note tabs design

Browse source
This commit is contained in:
Freeplay 2023-05-20 12:08:20 -04:00
parent 38d323962a
commit bfde7bbb88
2 changed files with 22 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/client/src/components/MkNoteDetailed.vue
View file

@ -33,37 +33,32 @@
detailedView detailedView
></MkNote> ></MkNote>
<MkTab v-model="tab" :style="'chips'" @update:modelValue="loadTab"> <MkTab v-model="tab" :style="'underline'" @update:modelValue="loadTab">
<option value="replies"> <option value="replies">
<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
<template v-if="appearNote.repliesCount > 0"> <template v-if="appearNote.repliesCount > 0">
<span class="count">{{ appearNote.repliesCount }}</span> <span class="count">{{ appearNote.repliesCount }}</span>
</template> </template>
{{ i18n.ts._notification._types.reply }} {{ i18n.ts._notification._types.reply }}
</option> </option>
<option value="renotes"> <option value="renotes">
<i class="ph-repeat ph-bold ph-lg"></i>
<template v-if="appearNote.renoteCount > 0"> <template v-if="appearNote.renoteCount > 0">
<span class="count">{{ appearNote.renoteCount }}</span> <span class="count">{{ appearNote.renoteCount }}</span>
</template> </template>
{{ i18n.ts._notification._types.renote }} {{ i18n.ts._notification._types.renote }}
</option> </option>
<option value="quotes"> <option value="quotes">
<i class="ph-quotes ph-bold ph-lg"></i>
<template v-if="directQuotes?.length > 0"> <template v-if="directQuotes?.length > 0">
<span class="count">{{ directQuotes.length }}</span> <span class="count">{{ directQuotes.length }}</span>
</template> </template>
{{ i18n.ts._notification._types.quote }} {{ i18n.ts._notification._types.quote }}
</option> </option>
<option value="reactions"> <option value="reactions">
<i class="ph-smiley ph-bold ph-lg"></i>
<template v-if="reactionsCount > 0"> <template v-if="reactionsCount > 0">
<span class="count">{{ reactionsCount }}</span> <span class="count">{{ reactionsCount }}</span>
</template> </template>
{{ i18n.ts.reaction }} {{ i18n.ts.reaction }}
</option> </option>
<option value="clips"> <option value="clips">
<i class="ph-paperclip ph-bold ph-lg"></i>
<template v-if="clips?.length > 0"> <template v-if="clips?.length > 0">
<span class="count">{{ clips.length }}</span> <span class="count">{{ clips.length }}</span>
</template> </template>

23
packages/client/src/components/MkTab.vue
View file

@ -16,7 +16,10 @@ export default defineComponent({
return h( return h(
"div", "div",
{ {
class: ["pxhvhrfw", { chips: this.style === "chips" }], class: ["pxhvhrfw",
{ chips: this.style === "chips" },
{ underline: this.style === "underline" }
],
role: "tablist", role: "tablist",
}, },
options.map((option) => options.map((option) =>
@ -85,7 +88,7 @@ export default defineComponent({
} }
} }
&.chips { &.chips, &.underline {
padding: 12px 32px; padding: 12px 32px;
font-size: 0.85em; font-size: 0.85em;
overflow-x: auto; overflow-x: auto;
@ -118,6 +121,22 @@ export default defineComponent({
} }
} }
&.underline {
padding-block: 0 !important;
margin-bottom: -1px;
button {
background: none !important;
border-radius: 0 !important;
padding-block: 10px !important;
border-bottom: 2px solid transparent;
&[aria-selected="true"] {
background: none !important;
font-weight: 700;
border-bottom-color: var(--accent);
}
}
}
&.max-width_500px { &.max-width_500px {
font-size: 80%; font-size: 80%;