mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-12 21:58:58 +09:00
Add header clock
This commit is contained in:
parent
d2b61229a3
commit
87451b1223
@ -25,6 +25,7 @@
|
|||||||
<input type="search" :placeholder="$t('search')" v-model="searchQuery" v-autocomplete="{ model: 'searchQuery' }" :disabled="searchWait" @keypress="searchKeypress"/>
|
<input type="search" :placeholder="$t('search')" v-model="searchQuery" v-autocomplete="{ model: 'searchQuery' }" :disabled="searchWait" @keypress="searchKeypress"/>
|
||||||
</div>
|
</div>
|
||||||
<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
|
<button v-if="$store.getters.isSignedIn" class="post _buttonPrimary" @click="post()"><fa :icon="faPencilAlt"/></button>
|
||||||
|
<x-clock v-if="isDesktop" class="clock"/>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
@ -107,7 +108,7 @@
|
|||||||
|
|
||||||
<div class="widgets">
|
<div class="widgets">
|
||||||
<div ref="widgets" :class="{ edit: widgetsEditMode }">
|
<div ref="widgets" :class="{ edit: widgetsEditMode }">
|
||||||
<template v-if="enableWidgets && $store.getters.isSignedIn">
|
<template v-if="isDesktop && $store.getters.isSignedIn">
|
||||||
<template v-if="widgetsEditMode">
|
<template v-if="widgetsEditMode">
|
||||||
<mk-button primary @click="addWidget" class="add"><fa :icon="faPlus"/></mk-button>
|
<mk-button primary @click="addWidget" class="add"><fa :icon="faPlus"/></mk-button>
|
||||||
<x-draggable
|
<x-draggable
|
||||||
@ -166,6 +167,7 @@ export default Vue.extend({
|
|||||||
i18n,
|
i18n,
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
|
XClock: () => import('./components/header-clock.vue').then(m => m.default),
|
||||||
XNotifications: () => import('./components/notifications.vue').then(m => m.default),
|
XNotifications: () => import('./components/notifications.vue').then(m => m.default),
|
||||||
MkButton: () => import('./components/ui/button.vue').then(m => m.default),
|
MkButton: () => import('./components/ui/button.vue').then(m => m.default),
|
||||||
XDraggable: () => import('vuedraggable'),
|
XDraggable: () => import('vuedraggable'),
|
||||||
@ -184,7 +186,7 @@ export default Vue.extend({
|
|||||||
searchQuery: '',
|
searchQuery: '',
|
||||||
searchWait: false,
|
searchWait: false,
|
||||||
widgetsEditMode: false,
|
widgetsEditMode: false,
|
||||||
enableWidgets: window.innerWidth >= 1100,
|
isDesktop: window.innerWidth >= 1100,
|
||||||
canBack: false,
|
canBack: false,
|
||||||
disconnectedDialog: null as Promise<void> | null,
|
disconnectedDialog: null as Promise<void> | null,
|
||||||
faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer
|
faGripVertical, faChevronLeft, faComments, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faBell, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faEnvelope, faListUl, faPlus, faUserClock, faLaugh, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer
|
||||||
@ -273,7 +275,7 @@ export default Vue.extend({
|
|||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
// https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width
|
// https://stackoverflow.com/questions/33891709/when-flexbox-items-wrap-in-column-mode-container-does-not-grow-its-width
|
||||||
if (this.enableWidgets) {
|
if (this.isDesktop) {
|
||||||
const adjustWidgetsWidth = () => {
|
const adjustWidgetsWidth = () => {
|
||||||
const lastChild = this.$refs.widgets.children[this.$refs.widgets.children.length - 1];
|
const lastChild = this.$refs.widgets.children[this.$refs.widgets.children.length - 1];
|
||||||
if (lastChild == null) return;
|
if (lastChild == null) return;
|
||||||
@ -819,6 +821,10 @@ export default Vue.extend({
|
|||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
> .clock {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
100
src/client/components/header-clock.vue
Normal file
100
src/client/components/header-clock.vue
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
<template>
|
||||||
|
<div class="eqryymyo">
|
||||||
|
<div class="header">
|
||||||
|
<time ref="time" class="_ghost">
|
||||||
|
<span class="yyyymmdd">{{ yyyy }}/{{ mm }}/{{ dd }}</span>
|
||||||
|
<br>
|
||||||
|
<span class="hhnn">{{ hh }}<span :style="{ visibility: now.getSeconds() % 2 == 0 ? 'visible' : 'hidden' }">:</span>{{ nn }}</span>
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
<div class="content _panel">
|
||||||
|
<mk-clock/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
import MkClock from './analog-clock.vue';
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
components: {
|
||||||
|
MkClock
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
now: new Date(),
|
||||||
|
clock: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
yyyy(): number {
|
||||||
|
return this.now.getFullYear();
|
||||||
|
},
|
||||||
|
mm(): string {
|
||||||
|
return ('0' + (this.now.getMonth() + 1)).slice(-2);
|
||||||
|
},
|
||||||
|
dd(): string {
|
||||||
|
return ('0' + this.now.getDate()).slice(-2);
|
||||||
|
},
|
||||||
|
hh(): string {
|
||||||
|
return ('0' + this.now.getHours()).slice(-2);
|
||||||
|
},
|
||||||
|
nn(): string {
|
||||||
|
return ('0' + this.now.getMinutes()).slice(-2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.tick();
|
||||||
|
this.clock = setInterval(this.tick, 1000);
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
clearInterval(this.clock);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tick() {
|
||||||
|
this.now = new Date();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.eqryymyo {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: visible;
|
||||||
|
|
||||||
|
> .header {
|
||||||
|
padding: 0 12px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
&:hover + .content {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
> time {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
> .yyyymmdd {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .content {
|
||||||
|
opacity: 0;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: auto;
|
||||||
|
right: 0;
|
||||||
|
z-index: 3;
|
||||||
|
margin: 16px 0 0 0;
|
||||||
|
padding: 16px;
|
||||||
|
width: 230px;
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue
Block a user