natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

finish up new navbar

This commit is contained in:
ThatOneCalculator 2022-07-23 19:54:13 -07:00
parent eb6c975395
commit 86eede2403
2 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CALCKEY.md
View File

@ -2,7 +2,6 @@
### Planned ### Planned
- Better sidebar/navbar
- MFM button - MFM button
- Better Messaging UI - Better Messaging UI
- Classic mode make instance icon bring up new context menu - Classic mode make instance icon bring up new context menu
@ -24,7 +23,8 @@
- Yarn 3 - Yarn 3
- Saner defaults - Saner defaults
- Star as default reaction - Star as default reaction
- Rosé Pine by default - Rosé Pine by default (+ non-themable elements made Rosé Pine)
- Better sidebar/navbar
- Mark as read from notifications widget - Mark as read from notifications widget
- Better welcome screen (not logged in) - Better welcome screen (not logged in)
- Ability to turn off "Connection lost" message - Ability to turn off "Connection lost" message

45
packages/client/src/ui/_common_/navbar.vue
View File

@ -3,12 +3,9 @@
<div class="body"> <div class="body">
<div class="top"> <div class="top">
<div class="banner" :user="$i" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div> <div class="banner" :user="$i" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button instance" @click="openAccountMenu"> <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="icon"/><!-- <MkAcct class="text" :user="$i"/> --> <MkAvatar :user="$i" class="icon"/><!-- <MkAcct class="text" :user="$i"/> -->
</button> </button>
<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
</button> -->
</div> </div>
<div class="middle"> <div class="middle">
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact> <MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
@ -47,9 +44,12 @@
<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post"> <button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span> <i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
</button> </button>
<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu"> <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/> <img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
</button> </button>
<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
</button> -->
</div> </div>
</div> </div>
</div> </div>
@ -190,7 +190,7 @@ function more(ev: MouseEvent) {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 2.5rem 0; padding: 2rem 0;
background: var(--X14); background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
@ -207,7 +207,7 @@ function more(ev: MouseEvent) {
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%); mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
} }
> .instance { > .account {
position: relative; position: relative;
display: block; display: block;
text-align: center; text-align: center;
@ -273,22 +273,14 @@ function more(ev: MouseEvent) {
> .account { > .account {
position: relative; position: relative;
display: flex; display: block;
align-items: center; text-align: center;
padding-left: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 100%; width: 100%;
text-align: left;
box-sizing: border-box;
margin-top: 16px;
> .avatar { > .icon {
position: relative; display: inline-block;
width: 32px; width: 38px;
aspect-ratio: 1; aspect-ratio: 1;
margin-right: 8px;
} }
} }
} }
@ -377,12 +369,12 @@ function more(ev: MouseEvent) {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 1; z-index: 1;
padding: 2.5rem 0; padding: 2rem 0;
background: var(--X14); background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px)); -webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px)); backdrop-filter: var(--blur, blur(8px));
> .instance { > .account {
display: block; display: block;
text-align: center; text-align: center;
width: 100%; width: 100%;
@ -443,19 +435,16 @@ function more(ev: MouseEvent) {
} }
> .account { > .account {
position: relative;
display: block; display: block;
text-align: center; text-align: center;
width: 100%; width: 100%;
> .avatar { > .icon {
display: inline-block; display: inline-block;
width: 38px; width: 38px;
aspect-ratio: 1; aspect-ratio: 1;
} }
> .text {
display: none;
}
} }
} }