SWREI/switched
0
0
Fork 0
Code

✌️

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 "../animation"
html
&.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>
<img class="avatar" :src="`${ os.i.avatar_url }?thumbnail&size=64`" alt="avatar"/>
</button>
<div class="menu" v-if="isOpen">
<ul>
<li>
<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
</li>
<li @click="drive">
<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>
</ul>
<ul>
<li @click="settings">
<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
</li>
</ul>
<ul>
<li @click="signout">
<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
</li>
</ul>
</div>
<transition name="zoom-in-top">
<div class="menu" v-if="isOpen">
<ul>
<li>
<a :href="`/${ os.i.username }`">%fa:user%%i18n:desktop.tags.mk-ui-header-account.profile%%fa:angle-right%</a>
</li>
<li @click="drive">
<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>
</ul>
<ul>
<li @click="settings">
<p>%fa:cog%%i18n:desktop.tags.mk-ui-header-account.settings%%fa:angle-right%</p>
</li>
</ul>
<ul>
<li @click="signout">
<p>%fa:power-off%%i18n:desktop.tags.mk-ui-header-account.signout%%fa:angle-right%</p>
</li>
</ul>
</div>
</transition>
</div>
</template>
@ -209,4 +211,12 @@ export default Vue.extend({
background $theme-color
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>