pinafore/routes/_components/dialog/PostPrivacyDialog.html

97 lines
2.6 KiB
HTML
Raw Normal View History

2018-03-03 21:23:26 +00:00
<ModalDialog :label :shown :closed :title background="var(--main-bg)">
<ul class="post-privacy">
{{#each postPrivacyOptions as option}}
<li class="post-privacy-item">
<button class="post-privacy-button" on:click="onClick(option)">
<svg>
<use xlink:href="{{option.icon}}" />
</svg>
<span>
{{option.label}}
</span>
<svg class="{{isSelected(option, postPrivacy) ? '' : 'hidden'}}"
aria-hidden="{{!isSelected(option, postPrivacy)}}">
<use xlink:href="#fa-check" />
</svg>
</button>
</li>
{{/each}}
</ul>
</ModalDialog>
<style>
.post-privacy {
list-style: none;
width: 100%;
border: 1px solid var(--settings-list-item-border);
box-sizing: border-box;
min-width: 300px;
max-width: calc(100vw - 20px);
}
.post-privacy-item {
border: 1px solid var(--settings-list-item-border);
2018-03-03 23:03:02 +00:00
font-size: 1.2em;
2018-03-03 21:23:26 +00:00
display: flex;
}
.post-privacy-item svg {
width: 24px;
height: 24px;
fill: var(--svg-fill);
}
.post-privacy-button {
flex: 1;
padding: 20px;
background: var(--settings-list-item-bg);
border: none;
margin: 0;
display: flex;
flex-direction: row;
}
.post-privacy-button span {
flex: 1;
2018-03-03 23:03:02 +00:00
text-align: left;
margin-left: 20px;
2018-03-03 21:23:26 +00:00
}
.post-privacy-button:hover {
background: var(--settings-list-item-bg-hover);
}
.post-privacy-button:active {
background: var(--settings-list-item-bg-active);
}
</style>
<script>
import ModalDialog from './ModalDialog.html'
import { store } from '../../_store/store'
import { POST_PRIVACY_OPTIONS } from '../../_static/statuses'
2018-03-03 22:15:50 +00:00
import { setPostPrivacy } from '../../_actions/postPrivacy'
2018-03-03 21:23:26 +00:00
export default {
components: {
ModalDialog
},
store: () => store,
data: () => ({
postPrivacyOptions: POST_PRIVACY_OPTIONS
}),
helpers: {
isSelected: (option, postPrivacy) => postPrivacy.key === option.key
},
methods: {
async show() {
this.set({shown: true})
},
onClick(option) {
2018-03-03 22:15:50 +00:00
setPostPrivacy(this.get('realm'), option.key)
2018-03-03 21:23:26 +00:00
this.set({closed: true})
}
},
computed: {
2018-03-03 22:15:50 +00:00
composeData: ($currentComposeData, realm) => $currentComposeData[realm] || {},
2018-03-03 21:23:26 +00:00
postPrivacy: (postPrivacyKey) => {
return POST_PRIVACY_OPTIONS.find(_ => _.key === postPrivacyKey)
},
2018-03-03 22:15:50 +00:00
postPrivacyKey: (composeData, $currentVerifyCredentials) => {
return composeData.postPrivacy || $currentVerifyCredentials.source.privacy
2018-03-03 21:23:26 +00:00
}
}
}
</script>