Add toot modal ready for display toot detail

This commit is contained in:
Sardo 2018-04-10 13:18:39 +08:00
parent ca3aeb0fa9
commit c062afa138
5 changed files with 151 additions and 1 deletions

View File

@ -43,7 +43,7 @@
</el-button>
<popover name="menu" :width="120">
<ul class="toot-menu">
<li>
<li role="button" @click="openDetail(message)">
View Toot Detail
</li>
</ul>
@ -89,6 +89,9 @@ export default {
openReply (message) {
this.$store.dispatch('TimelineSpace/Modals/NewToot/openReply', message)
},
openDetail (message) {
this.$store.dispatch('TimelineSpace/Modals/Toot/openToot', message)
},
changeReblog (message) {
if (message.reblogged) {
this.$store.dispatch('TimelineSpace/Contents/Cards/Toot/unreblog', message)

View File

@ -1,5 +1,6 @@
<template>
<div>
<toot></toot>
<new-toot></new-toot>
<jump></jump>
<image-viewer></image-viewer>
@ -7,6 +8,7 @@
</template>
<script>
import Toot from './Modals/Toot'
import NewToot from './Modals/NewToot'
import Jump from './Modals/Jump'
import ImageViewer from './Modals/ImageViewer'
@ -14,6 +16,7 @@ import ImageViewer from './Modals/ImageViewer'
export default {
name: 'modals',
components: {
Toot,
NewToot,
Jump,
ImageViewer

View File

@ -0,0 +1,114 @@
<template>
<el-dialog
title="Toot Detail"
:visible.sync="tootModal"
width="400px"
class="toot-modal">
Hello World
</el-dialog>
</template>
<script>
export default {
name: 'toot',
computed: {
tootModal: {
get () {
return this.$store.state.TimelineSpace.Modals.Toot.modalOpen
},
set (value) {
this.$store.dispatch('TimelineSpace/Modals/Toot/changeModal', value)
}
}
},
updated () {
if (this.TootModal) {
this.$refs.status.focus()
}
},
methods: {
close () {
this.$store.dispatch('TimelineSpace/Modals/Toot/changeModal', false)
}
}
}
</script>
<style lang="scss" scoped>
.toot-modal /deep/ {
.el-dialog__header {
background-color: #4a5664;
.el-dialog__title {
color: #ebeef5;
}
}
.el-dialog__body {
padding: 0;
.status {
textarea {
display: block;
padding: 5px 15px;
line-height: 1.5;
box-sizing: border-box;
width: 100%;
font-size: inherit;
color: #606266;
background-image: none;
border: 0;
border-radius: 4px;
resize: none;
height: 120px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
textarea:focus {
outline: 0;
}
}
.preview {
box-sizing: border-box;
padding: 0 12px;
.image-wrapper {
position: relative;
display: inline-block;
.preview-image {
width: 60px;
margin-right: 8px;
}
.remove-image {
position: absolute;
top: 0;
left: 0;
padding: 0;
cursor: pointer;
}
}
}
}
.el-dialog__footer {
background-color: #f2f6fc;
.upload-image {
text-align: left;
float: left;
.image-input {
display: none;
}
}
.text-count {
padding-right: 24px;
color: #909399;
}
}
}
</style>

View File

@ -1,4 +1,5 @@
import NewToot from './Modals/NewToot'
import Toot from './Modals/Toot'
import ImageViewer from './Modals/ImageViewer'
import Jump from './Modals/Jump'
@ -7,6 +8,7 @@ const Modals = {
modules: {
ImageViewer,
NewToot,
Toot,
Jump
}
}

View File

@ -0,0 +1,28 @@
// import Mastodon from 'mastodon-api'
// import { ipcRenderer } from 'electron'
// import fs from 'fs'
const Toot = {
namespaced: true,
state: {
modalOpen: false
},
mutations: {
changeModal (state, value) {
state.modalOpen = value
}
},
actions: {
openToot ({ commit }, message) {
commit('changeModal', true)
},
changeModal ({ commit }, value) {
commit('changeModal', value)
}
}
}
export default Toot
// class AuthenticationError {}
// class UnknownTypeError {}