Normalize the button coloring for primary functions vs reload etc.

This commit is contained in:
abdulmohsen
2024-05-10 19:25:35 +03:00
parent 5f0874d64b
commit c8673c8854
12 changed files with 71 additions and 86 deletions

View File

@@ -5,7 +5,6 @@
<NuxtLink href="/backends">Backends</NuxtLink>
: {{ backend }}
</span>
<div class="is-pulled-right">
<div class="field is-grouped"></div>
</div>

View File

@@ -31,12 +31,11 @@
<script setup>
const backend = useRoute().params.backend
const info = ref({})
const info = ref()
const loadContent = async () => {
const response = await request(`/backend/${backend}/info`)
const json = await response.json()
info.value = json.data
info.value = await response.json()
}
onMounted(() => loadContent())

View File

@@ -1,27 +1,19 @@
<template>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<div class="p-2">
<span class="title is-4">Backends</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary is-light" v-tooltip="'Add New Backend'"
@click="toggleForm = !toggleForm">
<span class="icon">
<i class="fas fa-add"></i>
</span>
</button>
</p>
<p class="control">
<button class="button is-primary" @click.prevent="loadContent">
<span class="icon">
<i class="fas fa-sync"></i>
</span>
</button>
</p>
</div>
<span class="title is-4">Backends</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary" v-tooltip="'Add New Backend'" @click="toggleForm = !toggleForm">
<span class="icon"><i class="fas fa-add"></i></span>
</button>
</p>
<p class="control">
<button class="button is-info" @click.prevent="loadContent">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>
</div>
<div class="is-hidden-mobile">

View File

@@ -1,9 +1,7 @@
<template>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<span class="title is-4">
Console
</span>
<h1 class="title is-4">Console</h1>
<div class="subtitle is-6">
You can execute <strong>non-interactive</strong> commands here. The interface jailed to the <code>console</code>
command. You do not have to write <code>console</code> or <code>docker exec -ti watchstate console</code> here.

View File

@@ -2,18 +2,17 @@
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<span id="env_page_title" class="title is-4">Environment Variables</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary is-light" v-tooltip="'Add New Variable'" @click="toggleForm = !toggleForm">
<button class="button is-primary" v-tooltip="'Add New Variable'" @click="toggleForm = !toggleForm">
<span class="icon">
<i class="fas fa-add"></i>
</span>
</button>
</p>
<p class="control">
<button class="button is-primary" @click="loadContent">
<button class="button is-info" @click="loadContent">
<span class="icon">
<i class="fas fa-sync"></i>
</span>
@@ -52,17 +51,24 @@
<p class="help" v-html="getHelp(form_key)"></p>
</div>
<div class="control">
<button class="button is-danger" type="button"
v-tooltip="'Cancel'" @click="form_key=null; form_value=null; toggleForm=false">
<span class="icon"><i class="fas fa-cancel"></i></span>
</button>
</div>
<div class="control">
<button class="button is-primary" type="submit" :disabled="!form_key || !form_value">
<span class="icon"><i class="fas fa-save"></i></span>
<span class="icon-text">
<span class="icon"><i class="fas fa-save"></i></span>
<span>Save</span>
</span>
</button>
</div>
<div class="control">
<button class="button is-danger" type="button" @click="form_key=null; form_value=null; toggleForm=false">
<span class="icon-text">
<span class="icon"><i class="fas fa-cancel"></i></span>
<span>Cancel</span>
</span>
</button>
</div>
</div>
</form>
</div>

View File

@@ -8,10 +8,8 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary" @click="loadContent(id)">
<span class="icon">
<i class="fas fa-sync"></i>
</span>
<button class="button is-info" @click="loadContent(id)">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>
@@ -24,7 +22,6 @@
<div class="column is-12">
<pre><code>{{ data }}</code></pre>
</div>
</div>
</template>

View File

@@ -5,14 +5,14 @@
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-warning" @click.prevent="searchForm = !searchForm">
<button class="button is-primary" @click.prevent="searchForm = !searchForm">
<span class="icon">
<i class="fas fa-search"></i>
</span>
</button>
</p>
<p class="control">
<button class="button is-primary" @click.prevent="loadContent(page, true)">
<button class="button is-info" @click.prevent="loadContent(page, true)">
<span class="icon">
<i class="fas fa-sync"></i>
</span>
@@ -86,15 +86,6 @@
</div>
</div>
<div class="control">
<button class="button is-warning" type="button" @click="clearSearch" :disabled="isLoading">
<span class="icon-text">
<span class="icon"><i class="fas fa-cancel"></i></span>
<span>Reset</span>
</span>
</button>
</div>
<div class="control">
<button class="button is-primary" type="submit" :disabled="!query || '' === searchField || isLoading"
:class="{'is-loading':isLoading}">
@@ -105,6 +96,15 @@
</button>
</div>
<div class="control">
<button class="button is-warning" type="button" @click="clearSearch" :disabled="isLoading">
<span class="icon-text">
<span class="icon"><i class="fas fa-cancel"></i></span>
<span>Reset</span>
</span>
</button>
</div>
</div>
</div>
<p class="help" v-html="getHelp(searchField)"></p>
@@ -262,6 +262,9 @@ const loadContent = async (pageNumber, fromPopState = false) => {
page.value = json.paging.current_page
perpage.value = json.paging.perpage
total.value = json.paging.total
} else {
page.value = 1
total.value = 0
}
if (json.history) {

View File

@@ -1,6 +1,5 @@
<template>
<div class="columns is-multiline">
<div class="column is-12">
<h1 class="title is-4">
<NuxtLink href="/history">Latest History Entries</NuxtLink>

View File

@@ -11,7 +11,7 @@
<p class="control" v-if="filename.includes(moment().format('YYYYMMDD'))">
<button class="button" v-tooltip="'Watch log'" @click="watchLog"
:class="{'is-info':!stream,'is-danger':stream}">
:class="{'is-primary':!stream,'is-danger':stream}">
<span class="icon">
<i class="fas fa-stream"></i>
</span>
@@ -27,10 +27,8 @@
</p>
<p class="control">
<button class="button is-primary" @click.prevent="loadContent">
<span class="icon">
<i class="fas fa-sync"></i>
</span>
<button class="button is-info" @click.prevent="loadContent">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>

View File

@@ -1,16 +1,14 @@
<template>
<div class="columns is-multiline">
<div class="column is-12">
<div class="p-2">
<span class="title is-4">Logs</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary" @click.prevent="loadContent">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>
<div class="column is-12 is-clearfix">
<span class="title is-4">Logs</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click.prevent="loadContent">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>
</div>
<div class="is-hidden-mobile">

View File

@@ -1,9 +1,7 @@
<template>
<div class="columns is-multiline">
<div class="column is-12 is-clearfix">
<span class="title is-4">
System Report
</span>
<span class="title is-4">System Report</span>
<div class="is-pulled-right" v-if="copyAPI">
<div class="field is-grouped">
<p class="control">

View File

@@ -1,17 +1,14 @@
<template>
<div class="columns is-multiline">
<div class="column is-12">
<div class="p-2">
<span class="title is-4">Tasks</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary" @click.prevent="loadContent(true)">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>
<div class="column is-12 is-clearfix">
<span class="title is-4">Tasks</span>
<div class="is-pulled-right">
<div class="field is-grouped">
<p class="control">
<button class="button is-info" @click.prevent="loadContent(true)">
<span class="icon"><i class="fas fa-sync"></i></span>
</button>
</p>
</div>
</div>
<div class="is-hidden-mobile">
@@ -22,6 +19,7 @@
</template>
</span>
</div>
</div>
<div v-for="task in tasks" :key="task.name" class="column is-6-tablet is-12-mobile">