Various UI improvements for the execute tab.

This commit is contained in:
Fabio Manganiello 2023-05-17 10:41:02 +02:00
parent 91daec579d
commit 33e2879413
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 37 additions and 11 deletions

View file

@ -641,11 +641,7 @@ of Platypush to your fingertips.
## Tests ## Tests
To run the tests simply run `pytest` either from the project root folder or the To run the tests simply run `pytest` either from the project root folder or the
`tests/` folder. Or run the following command from the project root folder: `tests/` folder.
```shell
python -m tests
```
--- ---

View file

@ -21,7 +21,8 @@
@change="actionChanged=true" @blur="updateAction"> @change="actionChanged=true" @blur="updateAction">
</label> </label>
</div> </div>
<button type="submit" class="run-btn btn-primary" :disabled="running" title="Run"> <button type="submit" class="run-btn btn-primary"
:disabled="running || !action?.name?.length" title="Run">
<i class="fas fa-play" /> <i class="fas fa-play" />
</button> </button>
@ -66,11 +67,11 @@
<input type="text" class="action-extra-param-name" :disabled="running" <input type="text" class="action-extra-param-name" :disabled="running"
placeholder="Name" v-model="action.extraArgs[i].name"> placeholder="Name" v-model="action.extraArgs[i].name">
</label> </label>
<label class="col-5"> <label class="col-6">
<input type="text" class="action-extra-param-value" :disabled="running" <input type="text" class="action-extra-param-value" :disabled="running"
placeholder="Value" v-model="action.extraArgs[i].value"> placeholder="Value" v-model="action.extraArgs[i].value">
</label> </label>
<label class="col-2 buttons"> <label class="col-1 buttons">
<button type="button" class="action-extra-param-del" title="Remove parameter" <button type="button" class="action-extra-param-del" title="Remove parameter"
@click="removeParameter(i)"> @click="removeParameter(i)">
<i class="fas fa-trash" /> <i class="fas fa-trash" />
@ -108,7 +109,7 @@
<div class="request raw-request" :class="structuredInput ? 'hidden' : ''"> <div class="request raw-request" :class="structuredInput ? 'hidden' : ''">
<div class="first-row"> <div class="first-row">
<label> <label>
<textarea v-model="rawRequest" placeholder="Raw JSON request" /> <textarea v-model="rawRequest" ref="rawAction" :placeholder="rawRequestPlaceholder" />
</label> </label>
<button type="submit" :disabled="running" class="run-btn btn-primary" title="Run"> <button type="submit" :disabled="running" class="run-btn btn-primary" title="Run">
<i class="fas fa-play" /> <i class="fas fa-play" />
@ -183,6 +184,8 @@ export default {
response: undefined, response: undefined,
error: undefined, error: undefined,
rawRequest: undefined, rawRequest: undefined,
rawRequestPlaceholder: 'Raw JSON request. Example:\n\n' +
'{"type": "request", "action": "file.list", "args": {"path": "/"}}',
actions: {}, actions: {},
plugins: {}, plugins: {},
procedures: {}, procedures: {},
@ -330,6 +333,13 @@ export default {
this.structuredInput = structuredInput this.structuredInput = structuredInput
this.response = undefined this.response = undefined
this.error = undefined this.error = undefined
this.$nextTick(() => {
if (structuredInput) {
this.$refs.actionName.focus()
} else {
this.$refs.rawAction.focus()
}
})
}, },
onResponse(response) { onResponse(response) {
@ -426,6 +436,10 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => {
this.$refs.actionName.focus()
})
this.refresh() this.refresh()
}, },
} }
@ -459,7 +473,7 @@ $params-tablet-width: 20em;
} }
.title { .title {
background: $title-bg; background: $header-bg;
padding: .5em; padding: .5em;
border: $title-border; border: $title-border;
box-shadow: $title-shadow; box-shadow: $title-shadow;
@ -755,15 +769,31 @@ $params-tablet-width: 20em;
} }
.run-btn { .run-btn {
background: none; background: $background-color;
border-radius: .25em; border-radius: .25em;
padding: .5em 1.5em; padding: .5em 1.5em;
box-shadow: $primary-btn-shadow; box-shadow: $primary-btn-shadow;
cursor: pointer;
&:hover { &:hover {
background: $hover-bg; background: $hover-bg;
box-shadow: none; box-shadow: none;
} }
&:disabled {
opacity: 0.7;
color: $default-fg-2;
cursor: initial;
box-shadow: none;
&:hover {
background: $background-color;
box-shadow: none;
}
}
&:not(disabled) {
}
} }
} }
</style> </style>