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

✌️

Browse source
This commit is contained in:
syuilo 2018-02-23 03:33:12 +09:00
parent 64781efe52
commit 80929eb176
3 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/web/app/animation.styl Normal file
View file

@ -0,0 +1,12 @@
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
opacity: 1;
transform: scaleY(1);
transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
transform-origin: center top;
}
.zoom-in-top-enter,
.zoom-in-top-leave-active {
opacity: 0;
transform: scaleY(0);
}

1
src/web/app/app.styl
View file

@ -1,4 +1,5 @@
@import "../style" @import "../style"
@import "../animation"
html html
&.progress &.progress

56
src/web/app/desktop/views/components/ui.header.account.vue
View file

@ -4,29 +4,31 @@
<span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span> <span class="username">{{ os.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/> <img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
</button> </button>
<div class="menu" v-if="isOpen"> <transition name="zoom-in-top">
<ul> <div class="menu" v-if="isOpen">
<li> <ul>
<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a> <li>
</li> <a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
<li @click="drive"> </li>
<p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p> <li @click="drive">
</li> <p>%fa:cloud%%i18n:desktop.tags.mk-ui-header-account.drive%%fa:angle-right%</p>
<li> </li>
<a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a> <li>
</li> <a href="/i/mentions">%fa:at%%i18n:desktop.tags.mk-ui-header-account.mentions%%fa:angle-right%</a>
</ul> </li>
<ul> </ul>
<li @click="settings"> <ul>
<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p> <li @click="settings">
</li> <p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
</ul> </li>
<ul> </ul>
<li @click="signout"> <ul>
<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p> <li @click="signout">
</li> <p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
</ul> </li>
</div> </ul>
</div>
</transition>
</div> </div>
</template> </template>
@ -209,4 +211,12 @@ export default Vue.extend({
background $theme-color background $theme-color
color $theme-color-foreground color $theme-color-foreground
&:active
background darken($theme-color, 10%)
.zoom-in-top-enter-active,
.zoom-in-top-leave-active {
transform-origin: center -16px;
}
</style> </style>