YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

uniformize description list and buttons

Browse source
This commit is contained in:
Axolotle 2020-11-25 16:20:59 +01:00
parent c0e0b97ae6
commit 7ce154d597
4 changed files with 103 additions and 102 deletions

29
app/src/scss/main.scss
View file

@ -61,27 +61,20 @@ body {
display: block; display: block;
} }
// <b-row /> elems with <b-col> inside and eventually .sep inside // Descriptive list (<b-row /> elems with <b-col> inside)
.row-line { .row-line {
&:hover > div > :first-child { @include media-breakpoint-up(md) {
background-color: rgba(0, 0, 0, 0.05); &:hover {
border-radius: 0.2rem; background-color: rgba(0, 0, 0, 0.05);
padding: 0 .5rem; border-radius: 0.2rem;
margin-right: -.5rem; }
margin-left: -.5rem;
} }
& > div { @include media-breakpoint-down(sm) {
align-self: flex-start; flex-direction: column;
display: flex; margin-bottom: 0.5rem;
align-items: center; padding-bottom: 0.5rem;
// display a dashed line between col items border-bottom: $border-width solid $card-border-color;
.sep {
height: 0;
border-top: 1px dashed rgba(0, 0, 0, 0.25);
flex-grow: 1;
margin: 0 .75rem;
}
} }
} }

52
app/src/views/app/AppInfo.vue
View file

@ -10,26 +10,29 @@
v-for="(value, prop) in info" :key="prop" v-for="(value, prop) in info" :key="prop"
no-gutters class="row-line" no-gutters class="row-line"
> >
<b-col cols="5" md="3" xl="3"> <b-col cols="auto" md="3">
<strong>{{ $t(prop) }}</strong> <strong>{{ $t(prop) }}</strong>
<span class="sep" />
</b-col> </b-col>
<b-col> <b-col>
<a v-if="prop === 'url'" :href="value" target="_blank">{{ value }}</a> <a v-if="prop === 'url'" :href="value" target="_blank">{{ value }}</a>
<span v-else>{{ value }}</span> <span v-else>{{ value }}</span>
</b-col> </b-col>
</b-row> </b-row>
<hr> <b-row no-gutters class="row-line">
<b-col cols="auto" md="3">
<!-- MANAGE USER/GROUP --> <strong>{{ $t('app_info_access_desc') }}</strong>
<p class="mb-2"> <span class="sep" />
<strong>{{ $t('app_info_access_desc') }}</strong> </b-col>
<br> <b-col>
{{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }} {{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
</p> <b-button
<b-button size="sm" :to="{ name: 'group-list'}" variant="info"> size="sm" :to="{ name: 'group-list'}" variant="info"
<icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }} class="ml-2"
</b-button> >
<icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
</b-button>
</b-col>
</b-row>
</b-card> </b-card>
<!-- OPERATIONS --> <!-- OPERATIONS -->
@ -39,11 +42,11 @@
</template> </template>
<!-- CHANGE PERMISSIONS LABEL --> <!-- CHANGE PERMISSIONS LABEL -->
<b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold" :description="$t('app_info_managelabel_desc')"> <b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold">
<form-field <form-field
v-for="(perm, i) in app.permissions" :key="i" v-for="(perm, i) in app.permissions" :key="i"
:label="perm.title" :label-for="'perm-' + i" :label="perm.title" :label-for="'perm-' + i"
label-cols="0" label-class="" label-cols="0" label-class="" class="m-0"
:validation="$v.form.labels.$each[i] " :validation="$v.form.labels.$each[i] "
> >
<template #default="{ self }"> <template #default="{ self }">
@ -237,10 +240,13 @@ export default {
methods: { methods: {
fetchData () { fetchData () {
this.$store.dispatch('FETCH', { uri: 'users/permissions?full', storeKey: 'permissions' }).then(a => { Promise.all([
console.log(a) api.get(`apps/${this.id}?full`),
}) this.$store.dispatch('FETCH_ALL', [
api.get(`apps/${this.id}?full`).then((app) => { { uri: 'users/permissions?full', storeKey: 'permissions' },
{ uri: 'domains' }
])
]).then(([app]) => {
const form = { labels: [] } const form = { labels: [] }
const mainPermission = app.permissions[this.id + '.main'] const mainPermission = app.permissions[this.id + '.main']
@ -263,10 +269,8 @@ export default {
} }
} }
console.log(app.permissions)
this.info = { this.info = {
id: this.id, id: this.id,
// FIXME permission
label: mainPermission.label, label: mainPermission.label,
description: app.description, description: app.description,
version: app.version, version: app.version,
@ -280,22 +284,18 @@ export default {
path: app.settings.path.slice(1) path: app.settings.path.slice(1)
} }
} }
// FIXME permission
this.form = form this.form = form
this.app = { this.app = {
domain: app.settings.domain, domain: app.settings.domain,
supports_change_url: app.supports_change_url, supports_change_url: app.supports_change_url,
// FIXME permission
permissions permissions
} }
}) })
this.$store.dispatch('FETCH', { uri: 'domains' })
}, },
changeLabel (permName, data) { changeLabel (permName, data) {
data.show_tile = data.show_tile ? 'True' : 'False' data.show_tile = data.show_tile ? 'True' : 'False'
console.log(permName, data)
api.put('users/permissions/' + permName, data).then(this.fetchData) api.put('users/permissions/' + permName, data).then(this.fetchData)
}, },

111
app/src/views/service/ServiceInfo.vue
View file

@ -1,72 +1,75 @@
<template> <template>
<div class="service-info"> <div class="service-info">
<div class="actions"> <!-- INFO CARD -->
<div class="buttons ml-auto">
<template v-if="status === 'running'">
<b-button
variant="warning"
@click="action = 'restart'" v-b-modal.action-confirm-modal
>
<icon iname="refresh" /> {{ $t('restart') }}
</b-button>
<b-button
variant="danger" :disabled="critical"
@click="action = 'stop'" v-b-modal.action-confirm-modal
>
<icon iname="warning" /> {{ $t('stop') }}
</b-button>
</template>
<template v-else>
<b-button
variant="success"
@click="action = 'start'" v-b-modal.action-confirm-modal
>
<icon iname="play" /> {{ $t('start') }}
</b-button>
</template>
<b-button @click="shareLogs">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</div>
</div>
<b-card> <b-card>
<template v-slot:header> <template v-slot:header>
<h2><icon iname="info-circle" /> {{ name }}</h2> <div class="d-sm-flex">
<h2><icon iname="info-circle" /> {{ name }}</h2>
<div class="ml-auto mt-2 mt-sm-0">
<template v-if="status === 'running'">
<b-button variant="warning" @click="action = 'restart'" v-b-modal.action-confirm-modal>
<icon iname="refresh" /> {{ $t('restart') }}
</b-button>
<b-button
v-if="!critical" variant="danger" class="ml-2"
@click="action = 'stop'" v-b-modal.action-confirm-modal
>
<icon iname="warning" /> {{ $t('stop') }}
</b-button>
</template>
<b-button
v-else
variant="success" @click="action = 'start'" v-b-modal.action-confirm-modal
>
<icon iname="play" /> {{ $t('start') }}
</b-button>
</div>
</div>
</template> </template>
<dl> <b-row no-gutters class="row-line">
<dt v-t="'description'" /> <b-col cols="auto" md="3"><strong v-t="'description'" /></b-col>
<dd>{{ description }}</dd> <b-col>{{ description }}</b-col>
<hr> </b-row>
<b-row no-gutters class="row-line">
<dt v-t="'status'" /> <b-col cols="auto" md="3"><strong v-t="'status'" /></b-col>
<dd> <b-col>
<span :class="status === 'running' ? 'text-success' : 'text-danger'"> <span :class="status === 'running' ? 'text-success' : 'text-danger'">
<icon :iname="status === 'running' ? 'check-circle' : 'times'" /> <icon :iname="status === 'running' ? 'check-circle' : 'times'" />
{{ status }} {{ status }}
</span> </span>
{{ $t('since') }} {{ last_state_change | distanceToNow }} {{ $t('since') }} {{ last_state_change | distanceToNow }}
</dd> </b-col>
<hr> </b-row>
<b-row no-gutters class="row-line">
<dt v-t="'service_start_on_boot'" /> <b-col cols="auto" md="3"><strong v-t="'service_start_on_boot'" /></b-col>
<dd :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'"> <b-col>
{{ $t(start_on_boot) }} <span :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'">
</dd> {{ $t(start_on_boot) }}
<hr> </span>
</b-col>
<dt v-t="'configuration'" /> </b-row>
<dd :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }"> <b-row no-gutters class="row-line">
{{ $t(configuration) }} <b-col cols="auto" md="3"><strong v-t="'configuration'" /></b-col>
</dd> <b-col>
</dl> <span :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }">
{{ $t(configuration) }}
</span>
</b-col>
</b-row>
</b-card> </b-card>
<!-- LOGS CARD -->
<b-card> <b-card>
<template v-slot:header> <template v-slot:header>
<h2><icon iname="book" /> {{ $t('logs') }}</h2> <div class="d-sm-flex justify-content-sm-between">
<h2><icon iname="book" /> {{ $t('logs') }}</h2>
<b-button variant="success" @click="shareLogs" class="mt-2 mt-sm-0">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</div>
</template> </template>
<div class="w-100" v-for="{ filename, content} in logs" :key="filename"> <div class="w-100" v-for="{ filename, content} in logs" :key="filename">
<h3>{{ filename }}</h3> <h3>{{ filename }}</h3>
<pre class="bg-light p-3"><code>{{ content }}</code></pre> <pre class="bg-light p-3"><code>{{ content }}</code></pre>
@ -152,7 +155,7 @@ export default {
: 'services/' + this.name : 'services/' + this.name
// FIXME API doesn't return anything to the PUT so => json err // FIXME API doesn't return anything to the PUT so => json err
api.fetch(method, uri).then(() => { api[method](uri).then(() => {
this.fetchData() this.fetchData()
}) })
}, },

13
app/src/views/tool/ToolLog.vue
View file

@ -10,9 +10,8 @@
v-for="(value, prop) in info" :key="prop" v-for="(value, prop) in info" :key="prop"
no-gutters class="row-line" no-gutters class="row-line"
> >
<b-col cols="5" md="3" xl="3"> <b-col cols="auto" md="3">
<strong>{{ $t('logs_' + prop) }}</strong> <strong>{{ $t('logs_' + prop) }}</strong>
<span class="sep" />
</b-col> </b-col>
<b-col> <b-col>
<span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span> <span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span>
@ -41,19 +40,25 @@
<template v-slot:header> <template v-slot:header>
<div class="d-sm-flex justify-content-sm-between"> <div class="d-sm-flex justify-content-sm-between">
<h2><icon iname="file-text" /> {{ $t('logs') }}</h2> <h2><icon iname="file-text" /> {{ $t('logs') }}</h2>
<b-button @click="shareLogs"> <b-button @click="shareLogs" variant="success">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }} <icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button> </b-button>
</div> </div>
</template> </template>
<b-button <b-button
v-if="moreLogsAvailable" v-if="moreLogsAvailable"
variant="info" class="w-100 rounded-0" variant="white" class="w-100 rounded-0"
@click="fetchData" @click="fetchData"
> >
<icon iname="plus" /> {{ $t('logs_more') }} <icon iname="plus" /> {{ $t('logs_more') }}
</b-button> </b-button>
<pre><code v-html="logs" /></pre> <pre><code v-html="logs" /></pre>
<b-button @click="shareLogs" variant="success" class="w-100 rounded-0">
<icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
</b-button>
</b-card> </b-card>
</div> </div>
</template> </template>