diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-02-23 03:33:12 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-02-23 03:33:12 +0900 |
| commit | 80929eb176beec7f46f68b7c5cd35e37f3cda751 (patch) | |
| tree | fbeb8b7ff5f6c5c209dafc78343e9dcab6c7f5c7 /src/web | |
| parent | Merge pull request #1121 from syuilo/greenkeeper/css-loader-0.28.10 (diff) | |
| download | sharkey-80929eb176beec7f46f68b7c5cd35e37f3cda751.tar.gz sharkey-80929eb176beec7f46f68b7c5cd35e37f3cda751.tar.bz2 sharkey-80929eb176beec7f46f68b7c5cd35e37f3cda751.zip | |
:v:
Diffstat (limited to 'src/web')
| -rw-r--r-- | src/web/app/animation.styl | 12 | ||||
| -rw-r--r-- | src/web/app/app.styl | 1 | ||||
| -rw-r--r-- | src/web/app/desktop/views/components/ui.header.account.vue | 56 |
3 files changed, 46 insertions, 23 deletions
diff --git a/src/web/app/animation.styl b/src/web/app/animation.styl new file mode 100644 index 0000000000..8f121b313b --- /dev/null +++ b/src/web/app/animation.styl @@ -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); +} diff --git a/src/web/app/app.styl b/src/web/app/app.styl index 22043b8833..c441a445fb 100644 --- a/src/web/app/app.styl +++ b/src/web/app/app.styl @@ -1,4 +1,5 @@ @import "../style" +@import "../animation" html &.progress diff --git a/src/web/app/desktop/views/components/ui.header.account.vue b/src/web/app/desktop/views/components/ui.header.account.vue index af58e81a04..b55333ecc4 100644 --- a/src/web/app/desktop/views/components/ui.header.account.vue +++ b/src/web/app/desktop/views/components/ui.header.account.vue @@ -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> |