amybones/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(client): indicate dev build

Browse source
This commit is contained in:
syuilo 2022-03-03 01:17:37 +09:00
parent 072799f674
commit 0bd68902f9
1 changed files with 31 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
packages/client/src/ui/_common_/common.vue
View file

@ -11,6 +11,8 @@
<XStreamIndicator/> <XStreamIndicator/>
<div v-if="pendingApiRequestsCount > 0" id="wait"></div> <div v-if="pendingApiRequestsCount > 0" id="wait"></div>
<div v-if="dev" id="devTicker"><span>DEV BUILD</span></div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -52,12 +54,28 @@ export default defineComponent({
uploads, uploads,
popups, popups,
pendingApiRequestsCount, pendingApiRequestsCount,
dev: _DEV_,
}; };
}, },
}); });
</script> </script>
<style lang="scss"> <style lang="scss">
@keyframes dev-ticker-blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes progress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#wait { #wait {
display: block; display: block;
position: fixed; position: fixed;
@ -79,12 +97,19 @@ export default defineComponent({
} }
} }
@keyframes progress-spinner { #devTicker {
0% { position: fixed;
transform: rotate(0deg); top: 0;
} left: 0;
100% { z-index: 2147483647;
transform: rotate(360deg); color: #ff0;
background: rgba(0, 0, 0, 0.5);
padding: 4px 5px;
font-size: 14px;
pointer-events: none;
> span {
animation: dev-ticker-blink 2s infinite;
} }
} }
</style> </style>