tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change how strings and text are editable (submit on enter), colorify json

Browse Source
This commit is contained in:
Tamius Han 2020-03-12 00:37:57 +01:00
parent a7fa66b840
commit 217206ca1e
2 changed files with 33 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/common/components/JsonEditor/JsonElement.vue
View File

@ -2,12 +2,16 @@
<div class="flex flex-row json-level-indent">
<div>
<b>
<span v-if="label" class="item-key">"{{label}}" </span>
:
<span v-if="label" class="item-key"
:class="{'item-key-boolean-false': typeof value_internal === 'boolean' && !value_internal}"
>
"{{label}}"
</span>
:&nbsp;
</b>
</div>
<div v-if="typeof value_internal === 'boolean'"
class="json-value-boolean"
:class="{'json-value-boolean-true': value_internal, 'json-value-boolean-false': !value_internal}"
@click="toggleBoolean"
>
<template v-if="value_internal">true</template>
@ -20,24 +24,22 @@
'json-value-string': typeof value_internal === 'string'
}"
>
<template v-if="editing">
<template v-if="typeof value_internal === 'string'">
"<div ref="element-edit-area"
contenteditable="true"
@keydown.enter="changeValue"
>
{{value_internal}}
</div>"
</template>
<template v-else>
<div ref="element-edit-area"
:contenteditable="editing"
contenteditable="true"
@keydown.enter="changeValue"
>
{{value_internal}}
</div>
<div class="btn" @click="changeValue">
✔
</div>
</template>
<template v-else>
<template v-if="typeof value_internal === 'string'">
"{{value_internal}}"
</template>
<template v-else>
{{value_internal}}
</template>,
</template>
</template>,
</div>
</div>
</template>
@ -69,12 +71,13 @@ export default {
this.$emit('change', this.value_internal);
},
changeValue() {
const newValue = this.$refs['element-edit-area'].textContent;
this.$refs['element-edit-area'].blur();
const newValue = this.$refs['element-edit-area'].textContent.replace(/\n/g, '');
if (isNaN(newValue)) {
this.value_internal = newValue;
this.$emit('change', newValue);
} else {
this.value_internal.value = +newValue;
this.value_internal = +newValue;
this.$emit('change', +newValue);
}
this.editing = false;

16
src/common/components/JsonEditor/json.scss
View File

@ -2,15 +2,21 @@
padding-left: 2em !important;
}
.item-key {
color: #fa6;
color: rgb(255, 196, 148);
}
.item-key-boolean-false {
color: rgb(207, 149, 101)
}
.json-value-boolean {
color: rgb(53, 179, 120);
.json-value-boolean-true {
color: rgb(150, 240, 198);
}
.json-value-boolean-false {
color: rgb(241, 21, 21);
}
.json-value-number {
color: rgb(73, 73, 160);
color: rgb(121, 121, 238);
}
.json-value-string {
color: rgb(195, 35, 35);
color: rgb(226, 175, 7);
}