mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-14 06:38:28 +09:00
✌️
This commit is contained in:
parent
64781efe52
commit
80929eb176
12
src/web/app/animation.styl
Normal file
12
src/web/app/animation.styl
Normal 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,4 +1,5 @@
|
|||||||
@import "../style"
|
@import "../style"
|
||||||
|
@import "../animation"
|
||||||
|
|
||||||
html
|
html
|
||||||
&.progress
|
&.progress
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user