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