Lev
2 years ago
5 changed files with 330 additions and 67 deletions
@ -0,0 +1,192 @@ |
|||||||
|
<template> |
||||||
|
<div class="center"> |
||||||
|
<div class="constr-switcher"> |
||||||
|
<div @click="constructor_site = true" |
||||||
|
:class="{'inactive': !constructor_site, 'constr-switch': true}"> |
||||||
|
By template |
||||||
|
</div> |
||||||
|
<div @click="constructor_site = false" |
||||||
|
:class="{'inactive': constructor_site, 'constr-switch': true}"> |
||||||
|
Host your own |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div id="site_input" class="rec-field" v-if="!constructor_site"> |
||||||
|
<div style="display: flex; width: 100%"> |
||||||
|
<p style="width: 9rem;">Site:</p> |
||||||
|
<contenteditable class="record-inp site-record-field" tag="div" :no-hl="true" :no-html="true" spellcheck="false" |
||||||
|
v-model="site_rec"></contenteditable> |
||||||
|
<div :class="{'record-submit': true, 'get_b': true, 'inactive': !siteChanged, 'signing': signingSite}" |
||||||
|
@click="$emit('save')"> |
||||||
|
<template v-if="!signingSite">Save</template> |
||||||
|
<template v-else> |
||||||
|
<Socket secondary-color="#a7aab3" color="#282e46" size="50px" style="min-width: 3rem"/> |
||||||
|
Confirm in the wallet... |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div v-else class="constructor-form"> |
||||||
|
<div style="display: flex; width: 100%"> |
||||||
|
<p style="width: 9rem;">Title:</p> |
||||||
|
<contenteditable class="record-inp" tag="div" :no-hl="true" :no-html="true" spellcheck="false" |
||||||
|
v-model="constructor_params.title"></contenteditable> |
||||||
|
</div> |
||||||
|
<div class="save_container center"> |
||||||
|
<div :class="{'record-submit': true, 'get_b': true, 'inactive': !siteChanged, 'signing': signingSite}" |
||||||
|
@click="$emit('save-constructor')"> |
||||||
|
<template v-if="!signingSite">Save</template> |
||||||
|
<template v-else> |
||||||
|
<Socket secondary-color="#a7aab3" color="#282e46" size="50px" style="min-width: 3rem"/> |
||||||
|
Confirm in the wallet... |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import Socket from "./Socket.vue"; |
||||||
|
import contenteditable from 'vue-contenteditable'; |
||||||
|
import {config} from "../api"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "SiteSettings", |
||||||
|
components: {Socket, contenteditable}, |
||||||
|
props: { |
||||||
|
site_rec_init: { |
||||||
|
default: null |
||||||
|
}, |
||||||
|
siteChanged: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
constructorChanged: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
signingSite: { |
||||||
|
type: Boolean, |
||||||
|
default: false |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
let site_rec = this.site_rec_init; |
||||||
|
if (!site_rec) site_rec = config.agorata_adnl; |
||||||
|
let constructor_site = site_rec.toLowerCase() === config.agorata_adnl.toLowerCase(); |
||||||
|
return { |
||||||
|
site_rec, |
||||||
|
constructor_site, |
||||||
|
constructor_params: {title: ''}, |
||||||
|
saved_constructor_params: {title: ''}, |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
site_rec_patched () { |
||||||
|
this.$emit('change', this.site_rec_patched); |
||||||
|
}, |
||||||
|
constructor_params: { |
||||||
|
handler: function (newVal) { |
||||||
|
this.$emit('change-constructor', newVal); |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
}, |
||||||
|
saved_constructor_params: { |
||||||
|
handler: function (newVal) { |
||||||
|
this.$emit('change-constructor', newVal); |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
}, |
||||||
|
}, |
||||||
|
computed: { |
||||||
|
site_rec_patched() { |
||||||
|
if (this.constructor_site) { |
||||||
|
return config.agorata_adnl; |
||||||
|
} else { |
||||||
|
return this.site_rec; |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
set_site_rec(site_rec) { |
||||||
|
this.site_rec = site_rec; |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.record-inp { |
||||||
|
padding: 0.3rem; |
||||||
|
margin-left: 0.5rem; |
||||||
|
border-radius: 0.3rem; |
||||||
|
background-color: #4e5a88; |
||||||
|
color: white; |
||||||
|
min-width: 50vw; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.rec-field:not(:last-child) { |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.get_b.inactive { |
||||||
|
opacity: 0.5; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.get_b.signing { |
||||||
|
/* Center elements inside horizontally, allow rows */ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
flex-direction: column; |
||||||
|
background-color: white; |
||||||
|
font-size: 1.4rem; |
||||||
|
} |
||||||
|
|
||||||
|
.get_b { |
||||||
|
max-width: 8rem; |
||||||
|
} |
||||||
|
|
||||||
|
.constructor-form > div:not(:last-child) { |
||||||
|
margin-bottom: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
/* The switcher with two buttons - create from template or use custom */ |
||||||
|
.constr-switcher { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 1rem; |
||||||
|
border-radius: 1.3rem; |
||||||
|
padding: 1rem; |
||||||
|
max-width: 35rem; |
||||||
|
background-color: #4e5a88; |
||||||
|
} |
||||||
|
|
||||||
|
/* The button inside the switcher */ |
||||||
|
.constr-switch { |
||||||
|
padding: 0.5rem 1rem; |
||||||
|
border-radius: 0.7rem; |
||||||
|
background-color: #cdcee8; |
||||||
|
color: #282e46; |
||||||
|
width: 13rem; |
||||||
|
cursor: default; |
||||||
|
} |
||||||
|
|
||||||
|
.constr-switch:not(:last-child) { |
||||||
|
margin-right: 1rem; |
||||||
|
} |
||||||
|
|
||||||
|
.constr-switch.inactive { |
||||||
|
/*background-color: #5d5f79;*/ |
||||||
|
background-color: #6a6e95; |
||||||
|
color: #cecddb; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.site-record-field { |
||||||
|
font-family: 'Inconsolata', monospace; |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue