mirror of https://github.com/Lissy93/dashy.git
🎨 Use schema title attribute if available and fixed position save menu
This commit is contained in:
parent
c7e6047385
commit
06dd8ed525
|
@ -22,7 +22,7 @@
|
||||||
v-if="row.type === 'text' || row.type === 'number'"
|
v-if="row.type === 'text' || row.type === 'number'"
|
||||||
v-model="formData[index].value"
|
v-model="formData[index].value"
|
||||||
:description="row.description"
|
:description="row.description"
|
||||||
:label="row.name"
|
:label="row.title || row.name"
|
||||||
:type="row.type"
|
:type="row.type"
|
||||||
layout="horizontal"
|
layout="horizontal"
|
||||||
/>
|
/>
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
v-else-if="row.type === 'boolean'"
|
v-else-if="row.type === 'boolean'"
|
||||||
v-model="formData[index].value"
|
v-model="formData[index].value"
|
||||||
:description="row.description"
|
:description="row.description"
|
||||||
:label="row.name"
|
:label="row.title || row.name"
|
||||||
:options="['true', 'false']"
|
:options="['true', 'false']"
|
||||||
:initialOption="boolToStr(formData[index].value)"
|
:initialOption="boolToStr(formData[index].value)"
|
||||||
/>
|
/>
|
||||||
|
@ -42,7 +42,7 @@
|
||||||
:options="formData[index].enum"
|
:options="formData[index].enum"
|
||||||
:description="row.description"
|
:description="row.description"
|
||||||
:initialOption="formData[index].value"
|
:initialOption="formData[index].value"
|
||||||
:label="row.name"
|
:label="row.title || row.name"
|
||||||
class="edit-item-select"
|
class="edit-item-select"
|
||||||
/>
|
/>
|
||||||
<!-- Warning note, for any other data types, that aren't yet supported -->
|
<!-- Warning note, for any other data types, that aren't yet supported -->
|
||||||
|
@ -60,7 +60,7 @@
|
||||||
:key="row.name"
|
:key="row.name"
|
||||||
@click="() => appendNewField(row.name)"
|
@click="() => appendNewField(row.name)"
|
||||||
class="add-field-tag">
|
class="add-field-tag">
|
||||||
<AddIcon /> {{ row.name }}
|
<AddIcon /> {{ row.title || row.name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -126,15 +126,20 @@ export default {
|
||||||
value: this.item[property],
|
value: this.item[property],
|
||||||
type: this.getInputType(this.schema[property]),
|
type: this.getInputType(this.schema[property]),
|
||||||
enum: this.schema[property].enum,
|
enum: this.schema[property].enum,
|
||||||
|
title: this.schema[property].title,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
/* Make formatted data structure to be rendered as form elements */
|
/* Make formatted data structure to be rendered as form elements */
|
||||||
makeInitialFormData() {
|
makeInitialFormData() {
|
||||||
const formData = [];
|
const formData = [];
|
||||||
const requiredFields = ['title', 'description', 'url', 'icon', 'target'];
|
const requiredFields = ['title', 'description', 'url', 'icon', 'target'];
|
||||||
|
const unneededFields = ['id'];
|
||||||
|
const isPrimaryField = (property) => (
|
||||||
|
this.item[property] || requiredFields.includes(property)
|
||||||
|
) && !unneededFields.includes(property);
|
||||||
Object.keys(this.schema).forEach((property) => {
|
Object.keys(this.schema).forEach((property) => {
|
||||||
const singleRow = this.makeRowData(property);
|
const singleRow = this.makeRowData(property);
|
||||||
if (this.item[property] || requiredFields.includes(property)) {
|
if (isPrimaryField(property)) {
|
||||||
formData.push(singleRow);
|
formData.push(singleRow);
|
||||||
} else {
|
} else {
|
||||||
this.additionalFormData.push(singleRow);
|
this.additionalFormData.push(singleRow);
|
||||||
|
@ -263,8 +268,8 @@ export default {
|
||||||
.input-container, .select-container {
|
.input-container, .select-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
input.input-field {
|
input.input-field {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
padding: 0.35rem 0.5rem;
|
padding: 0.35rem 0.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -194,7 +194,7 @@ export default {
|
||||||
@import '@/styles/media-queries.scss';
|
@import '@/styles/media-queries.scss';
|
||||||
|
|
||||||
div.edit-mode-bottom-banner {
|
div.edit-mode-bottom-banner {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
display: grid;
|
display: grid;
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
|
Loading…
Reference in New Issue