First attempt at clock styling
This commit is contained in:
James Lyne
parent
a04df4cb09
commit
9caec78200
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 4.3 KiB |
@ -1,48 +1,27 @@
|
||||
<script lang="ts">
|
||||
import {defineComponent, computed} from "@vue/runtime-core";
|
||||
import {defineComponent, computed, watch, onMounted, onUnmounted} from "@vue/runtime-core";
|
||||
import {useStore} from "@/store";
|
||||
import L from 'leaflet';
|
||||
import {ClockControl, ClockControlOptions} from "@/leaflet/control/ClockControl";
|
||||
import DynmapMap from "@/leaflet/DynmapMap";
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
leaflet: {
|
||||
type: Object as () => L.Map,
|
||||
type: Object as () => DynmapMap,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
|
||||
setup() {
|
||||
setup(props) {
|
||||
const store = useStore(),
|
||||
componentSettings = store.state.components.clockControl,
|
||||
worldState = computed(() => store.state.currentWorldState),
|
||||
control = new ClockControl(componentSettings as ClockControlOptions) as ClockControl;
|
||||
|
||||
return {
|
||||
control,
|
||||
worldState
|
||||
}
|
||||
},
|
||||
watch(worldState, (newValue) => control.update(newValue), { deep: true });
|
||||
|
||||
watch: {
|
||||
worldState: {
|
||||
handler(newValue) {
|
||||
if (this.control) {
|
||||
this.control.update(newValue);
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.leaflet.addControl(this.control);
|
||||
// console.log('Mounted coordinatesControl');
|
||||
},
|
||||
|
||||
unmounted() {
|
||||
this.leaflet.removeControl(this.control);
|
||||
// console.log('Unmounted coordinatesControl');
|
||||
onMounted(() => props.leaflet.addControl(control));
|
||||
onUnmounted(() => props.leaflet.removeControl(control));
|
||||
},
|
||||
|
||||
render() {
|
||||
@ -50,7 +29,3 @@ export default defineComponent({
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -19,9 +19,8 @@ export class ClockControl extends L.Control {
|
||||
private _weather?: HTMLElement;
|
||||
|
||||
constructor(options: ClockControlOptions) {
|
||||
super(options);
|
||||
super(Object.assign(options, {position: 'topcenter'}));
|
||||
|
||||
options.position = 'topleft';
|
||||
L.Util.setOptions(this, options);
|
||||
}
|
||||
|
||||
|
||||
@ -32,6 +32,7 @@
|
||||
flex-direction: column;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
box-shadow: 0 0 1.5rem 0 #121212;
|
||||
|
||||
h2:first-child {
|
||||
margin-top: 0;
|
||||
|
||||
@ -160,6 +160,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-center {
|
||||
left: 0;
|
||||
right: 0;
|
||||
justify-content: center;
|
||||
flex-direction: row;
|
||||
|
||||
.leaflet-control {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-layers-toggle {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
|
||||
@ -138,125 +138,87 @@ button {
|
||||
border-radius: 0 0 3px 3px;
|
||||
}
|
||||
|
||||
/*******************
|
||||
* sidebar panels
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/*******************
|
||||
* Sidebar clock style
|
||||
*/
|
||||
/*
|
||||
.dynmap .clock {
|
||||
display: inline-block;
|
||||
height: 16px;
|
||||
z-index:50;
|
||||
|
||||
font-weight: bold;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
padding-left: 20px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
*/
|
||||
.largeclock.digitalclock {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.digitalclock {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight:bold;
|
||||
}
|
||||
|
||||
.digitalclock.night {
|
||||
/* background-image: url(../assets/images/clock_night.png); */
|
||||
color: #dff;
|
||||
}
|
||||
|
||||
.digitalclock.day {
|
||||
/* background-image: url(../assets/images/clock_day.png); */
|
||||
color: #fd3;
|
||||
}
|
||||
|
||||
.digitalclock.night, .digitalclock.day {
|
||||
transition: color 8s 8s linear;
|
||||
}
|
||||
|
||||
|
||||
/*******************
|
||||
* Large clock style
|
||||
*/
|
||||
|
||||
.largeclock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-color: rgba(0,0,0,0.5);
|
||||
width: 150px;
|
||||
height: 60px;
|
||||
background: rgba(0,0,0,0.6);
|
||||
z-index:50;
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.timeofday {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.timeofday.sun {
|
||||
background-image: url(../assets/images/sun.png);
|
||||
}
|
||||
|
||||
.timeofday.moon {
|
||||
background-image: url(../assets/images/moon.png);
|
||||
}
|
||||
|
||||
.timeofday.digitalclock {
|
||||
@extend %panel;
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
}
|
||||
width: 15rem;
|
||||
height: 6rem;
|
||||
z-index: 50;
|
||||
|
||||
/*******************
|
||||
* Clock weather style
|
||||
*/
|
||||
.digitalclock {
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
font-weight: bold;
|
||||
|
||||
.weather {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&.night {
|
||||
color: #dff;
|
||||
}
|
||||
|
||||
.weather.sunny_day {
|
||||
background-image: url(../assets/images/weather_sunny_day.png);
|
||||
}
|
||||
&.day {
|
||||
color: #fd3;
|
||||
}
|
||||
|
||||
.weather.stormy_day {
|
||||
background-image: url(../assets/images/weather_stormy_day.png);
|
||||
}
|
||||
.weather.thunder_day {
|
||||
background-image: url(../assets/images/weather_thunder_day.png);
|
||||
}
|
||||
&.night, &.day {
|
||||
transition: color 8s 8s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.weather.sunny_night {
|
||||
background-image: url(../assets/images/weather_sunny_night.png);
|
||||
}
|
||||
.timeofday {
|
||||
background-repeat: no-repeat;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
.weather.stormy_night {
|
||||
background-image: url(../assets/images/weather_stormy_night.png);
|
||||
}
|
||||
.weather.thunder_night {
|
||||
background-image: url(../assets/images/weather_thunder_night.png);
|
||||
&.digitalclock {
|
||||
top: auto;
|
||||
bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&.sun {
|
||||
background-image: url(../assets/images/sun.png);
|
||||
}
|
||||
|
||||
&.moon {
|
||||
background-image: url(../assets/images/moon.png);
|
||||
}
|
||||
}
|
||||
|
||||
.weather {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&.sunny_day {
|
||||
background-image: url(../assets/images/weather_sunny_day.png);
|
||||
}
|
||||
|
||||
&.stormy_day {
|
||||
background-image: url(../assets/images/weather_stormy_day.png);
|
||||
}
|
||||
|
||||
&.thunder_day {
|
||||
background-image: url(../assets/images/weather_thunder_day.png);
|
||||
}
|
||||
|
||||
&.sunny_night {
|
||||
background-image: url(../assets/images/weather_sunny_night.png);
|
||||
}
|
||||
|
||||
&.stormy_night {
|
||||
background-image: url(../assets/images/weather_stormy_night.png);
|
||||
}
|
||||
|
||||
&.thunder_night {
|
||||
background-image: url(../assets/images/weather_thunder_night.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*******************
|
||||
|
||||
Loading…
Reference in New Issue
Block a user