Commit ad9cae39 authored by Aral Balkan's avatar Aral Balkan

Add simple composition panel mock

parent bc43c664
......@@ -21,7 +21,8 @@ module.exports = {
],
plugins: [
'~plugins/buefy'
'~plugins/buefy',
'~plugins/sweet-modal'
],
axios: {
......
This diff is collapsed.
......@@ -15,9 +15,10 @@
<input type="search" placeholder="Search">
<!-- Add button -->
<div class='add-button'>
<img src='/plus.svg' alt='Add button'>
</div>
<button class='add-button' @click="openComposePanel">+</button>
<!-- <div class='add-button'>
<img src='/plus.svg' alt='Add button'">
</div> -->
<!-- Tabs with hard-coded content in first. -->
<b-tabs position="is-centered" class="block">
......@@ -109,6 +110,20 @@
<b-tab-item label="…"></b-tab-item>
</b-tabs>
<!-- Modal: compose panel -->
<sweet-modal ref="compose" title="Compose" overlay-theme="dark">
<b-tabs position="is-centered" class="block">
<b-tab-item label="Text">
<section>
<textarea style='width: 100%;'>What’s on your mind?</textarea>
</section>
</b-tab-item>
<b-tab-item label="Photo"></b-tab-item>
</b-tabs>
<!-- <sweet-modal-tab title="Text" id="tab1">Contents of Tab 1</sweet-modal-tab>
<sweet-modal-tab title="Photo" id="tab2">Contents of Tab 2</sweet-modal-tab> -->
</sweet-modal>
</div>
</template>
......@@ -117,6 +132,11 @@ export default {
computed: {
name () { return this.$store.state.name },
bio () { return this.$store.state.bio }
},
methods: {
openComposePanel: function (event) {
this.$refs.compose.open()
}
}
}
</script>
......@@ -142,6 +162,14 @@ nav {
font-size: 3vmax;
}
.sweet-content .tabs {
font-size: 2vmax;
}
.sweet-content nav {
margin-top: 0;
}
.header-material {
text-align: center;
z-index: 2;
......@@ -217,6 +245,12 @@ header {
}
.add-button {
border: 0;
color: white;
/* z-index of sweet-modal’s shade is 9001. We want to be just below that. */
z-index: 9000;
background-color: rgba(0,0,0,0.55);
width: 6vmax;
height: 6vmax;
......
import Vue from 'vue'
import { SweetModal, SweetModalTab } from 'sweet-modal-vue'
const SweetModalPlugin = {
install (Vue, options) {
Vue.component('SweetModal', SweetModal)
Vue.component('SweetModalTab', SweetModalTab)
}
}
Vue.use(SweetModalPlugin)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment