63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<form @submit.prevent="addTL">
|
||
|
|
<label
|
||
|
|
v-for="(types,name) in userTimelineTypes"
|
||
|
|
:key="name"
|
||
|
|
:class="{selected: name === timelineType}"
|
||
|
|
>
|
||
|
|
<input type="radio" :value="name" v-model="timelineType">
|
||
|
|
{{ types }}
|
||
|
|
</label>
|
||
|
|
<BaseButton
|
||
|
|
type="submit"
|
||
|
|
class="primary fill"
|
||
|
|
style="--font-size:.8em;margin-top:1em;"
|
||
|
|
>Add Column</BaseButton>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Component, Prop, Vue } from "vue-property-decorator"
|
||
|
|
|
||
|
|
@Component
|
||
|
|
export default class UserTimeline extends Vue {
|
||
|
|
public timelineType: string = 'home'
|
||
|
|
public userTimelineTypes: {
|
||
|
|
[key: string]: string
|
||
|
|
} = {
|
||
|
|
home: 'Home Timeline',
|
||
|
|
notify: 'Notifications',
|
||
|
|
dm: 'Direct Messages',
|
||
|
|
local: 'Local Timeline',
|
||
|
|
fediverse: 'Fediverse Timeline',
|
||
|
|
integrated: 'Integrated Timeline (Home + Local)',
|
||
|
|
localPlus: 'Integrated Timeline (Local + Boost + Reply)',
|
||
|
|
}
|
||
|
|
|
||
|
|
public addTL() {
|
||
|
|
console.log(this.timelineType)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="postcss">
|
||
|
|
label {
|
||
|
|
display: block;
|
||
|
|
line-height: 2em;
|
||
|
|
margin: 0em;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
background-color: gray;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.selected {
|
||
|
|
background-color: maroon;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > input[type="radio"] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|